Understanding BlockySite creator
The websites in BlockySite creator are built as a combination of various Components, with each Component being used for a specific purpose.
The Component's behaviour is configured using Blocks
What are components?
Components are the basic building elements of any website in BlockySite creator. Everything on the website is done with the help of one component or the other.
Different components are used for different purposes. One component may be used to design the User Interface(UI) of the website, for example, a Button component, while others may be used for performing actions like saving an image to the device's folder etc. for example the Download component.
What are blocks?
Blocks are used to describe how to do a task. How the Components respond to various actions and events on the website is designed using the Blocks.
For example, how the website should respond when a Button is clicked, what image is to be downloaded using the Download component etc. are all configured using the Blocks.
Thus, by using the various Components and by configuring its behaviour and response to actions from the user with the help of Blocks, a website is developed in BlockySite creator.
The Phone Analogy
Let us consider an analogy of a phone to better understand the concept of the components and blocks.
A phone is developed using various parts like screen, speakers, battery, camera, processers etc.., each performing its own unique function.
Some of these parts are visible to the user(who is using the phone) and he/she interacts with them directly, while some of them are not visible. And these parts know what their function is and how to perform it, for example, the function of the battery is to provide power to the phone, the function of the camera is to take pictures and so on.
A website is like a phone, having various parts and developed using various Components, like buttons, Labels, File pickers etc. with each component being used for a particular purpose.
Like the parts of the phone, some of these components are visible to the user of the website and they interact with it, while some of the components don't interact directly with the user. The behaviour or the purpose of these components is configured using the Blocks. The "how to perform the function of a component" part is configured by using the Blocks.
Types of components
-
Visible Components: The components that can be viewed in the Viewer panel of the Designer page are known as the Visible Component. They are visible to the user on the website and the user can interact with them directly and help in building the User Interface of the website.
-
Non-Visible Components: The components that are not viewed in the Viewer panel of the Designer page are known as Non-Visible Components. They are the components that usually do other things like saving a file to the device's storage, getting data from various databases etc. But, sometimes, these components may also be used to create visible elements in the website. For example, the localStorage component, which is a Non-visible Component can be used to create, read and delete the data in the user's browser localStorage.
Types of blocks
Each Component has its own set of blocks, divided into three types:
Property Blocks
Each component comes with its own set of Properties, which describe its characteristics. For example, the Button component has properties like disabled, text etc. which are characteristics that describe the features of that particular button.
Some of these properties can either be set from Designer page, or through Blocks, while some can be set only through Blocks and some only from the Designer.
At any time on the website, the given property of a component can be read through a Getter Block. It gives the current value of that property of that particular component.
loading block...
loading block...
Similarly, the given property of a component can be modified during the runtime of the website through Setter Blocks.
Not all the properties of the component have both Getter and Setter Blocks. Some of them may have only Getter or sometimes only Setter blocks.
Method Blocks
Methods are certain functions that a component can do. For example, the Print method should be able to print the window when required. This is done by using a method called Print, which instructs the components to carry out the task of printing the window.
So, Methods are nothing but an instruction to carry out a particular task, like printing the window.
Some methods require some additional data, which will also be used in carrying out that task. For example, LocalStorage component gets the data using a method called getValue. But how will the component know what data to get and under what tag? This is where Parameters or simply Params are used.
The getValue method has one parameter(i.e. it makes use of the data that need to be specified). So this method can be called(i.e. used in the blocks) along with the data that it needs.
loading block...
Event Blocks
The blocks or behaviour of the website are executed based on the various events that occur. There is a wide range of events that occur throughout the time for which the website is running, and the response of the website to these events can be configured.
For example, if the user clicks a Button, the website starting are all events. The response of the website to such events is configured by grouping the desired behaviour under the Event block. The methods and property blocks grouped under each event are executed whenever that particular event occurs.
Let us take an example. If you want to change the Button text when the user clicks it, you have to group the logic to change the text under the Button Clicked event. This is shown below.
