Tools Bar
Left Hand Side Panel Of Blup
This section consists of all the tools required to build the UI, we will go over each tool one by one in detail.
This button converts the normal cursor into a selector cursor which as the name suggests is used to select components or widgets of the mobile screen or pages.
If you want the change the cursor type back to a selector cursor, click "v" and the cursor will revert back to a selector cursor
This toggle is used to create rectangular shapes on the mobile canvas or pages.
As you hover above the rectangle button a GIF demonstrating all the functionalities that can be achieved by using a rectangle toggle will pop up to the bottom-left part of the screen.
As soon as you click on the button and move your cursor to pages section, the cursor changes into a cross cursor to draw rectangular shapes on the screens similar to other designer tools available in the market. The dimensions of the rectangle can be changed during the creation itself. The option to change various other properties of the selected rectangle is present in the properties panel to the right of the screen.
Thanks to Blup's tight integration with windows/mac OS, any image gifs or videos that are present in your file explorer can be directly dragged and dropped into any rectangle.
Text toggle helps to create a text field (or input box).
Note: Text is used to show information to the user
Input box - Input box (also called text fields) are used to receive information or data from users like email id and passwords for login into your apps.
Similar to rectangle toggle hovering over the text toggle generates a dialog box playing gifs at the bottom which demonstrates all the features that are present in the text Toggle.
Clicking on the text toggle transforms the cursor into a text cursor. You can click on any part of the page and start typing.
To increase the font size of the text, revert the cursor back to selector cursor and click and drag the bottom part of the cell encompassing the text, you can watch as the font size increases in real time.
If you want to change more advanced properties of the text you can go to the properties panel on the right-hand side.
Elements library is used for the creation of widgets that can't be built using just rectangle toggle and text toggle. Widgets like radio button, checkbox, progress indicator, progress wheel are examples of widgets which can be implemented using the Elements Library
Blup employs a simple drag and drop method in which the user merely needs to select the desired widget and drag it to the desired position. The properties panel provides the option to change the various properties of the selected widget.
Widget Library is divide into three major parts
The Blup comes with several commonly used pre-built widgets like radio box, checkbox and other widgets to enable a smoother and swifter development experience.
This is where the strength of the Blup community comes into play. This section houses the various widgets created by members of the community who were kind enough to share it. If you have created elements that you believe can be useful to other members too, feel free to share to the community.
If you want to publish a widget globally, there are certain rules and criteria that need to be satisfied. The blup team is coming up with a well-nuanced set of rules and regulations the widgets have to satisfy to be published to the public.
Global widgets employ the same drag and drop implementation method of the Pre-built widgets.
This section houses your custom made widgets. When dealing with large projects you may come across a situation where you need to use a custom widget in multiple places, rather than building it from scratch, blup provides the option to save the widgets of your choice in your device itself.
A widget that is present in the local widget library is exclusive to the project i.e, this section is different for different projects.
This button opens up the blup lightning panel where you can add logic to your UI.
Blupsheets is a GUI-based database that is built on top of AWS(making it secure and remotely accessible) to work seamlessly with blup. In Blupsheets, the data is stored in a tabular format, thereby if you want to use Blupsheets as your backend service you must define the structure of the intended database.
As soon as you click on the Blupsheet button a bottom panel pops up where you can add new columns, rename them, specify the type of data to go in it, and if you want you can add multiple tables also. You can add values to the table manually or you could employ blup lightning to enter the values dynamically using BlupSheets nodes.
Simple Overview of Layer and Pages Section
Blup follows a layering system which means each widget that you create is created as layers and these layers are stacked one over the other to form a widget. Each page or mobile canvas has its own set of layers that can be seen in this section. This layer will display the layers constituting the current page.
If you want to see the layer of another Page just click on the page name in the designer or use the pages tab inside this section to select the page. Layers are useful when creating widgets that need to be stacked one over the other. If you want to change the order of any layer just select the layer and drag and drop to a position where you want to keep it.
The pages section is essentially a list of all the pages you have built for your project. You can add new pages in this section.
We have a community exclusively for the blup. If you have a doubt about Blup or want to interact with other community member and get to know what new things your community members are building with the help of Blup, just click on this button it will take you to the community website of blup.
Lofi music
Last modified 9mo ago