UI Nodes
Bridge between the Design [blup designer] and logics [Blup Lightning].

UI nodes Overview

Nodes present in this section are one of the most important and widely used, they are called UI nodes because they are not present in the arsenal panel in blup lightning, rather they are generated automatically by blup from the designer section itself.
These nodes help you to connect the UI with actual Logic, or we can say that they act as s bridge between the blup Designer UI and Blup Lightning logics section. These nodes help you to capture user events like on click etc which further helps you to create logic for these events.
There are majorly four types of UI nodes.

Rectangle UI Node

This node helps you to interact with the rectangle that you have created in UI, this node helps you to change various properties associated with the rectangle dynamically, this node is also helpful in capturing various events like on click or properties changed\updated.
For example, if you wanted to navigate to another page with the click of the rectangle, such types of functionality can be achieved with the help of this node.

How to get rectangle Node.

To get the rectangle node just select any normal rectangle [not on group] present on the mobile canvas or pages, then press right-click over the selected rectangle it will open up an arsenal panel in blup designer [arsenal panel is different for blup lightning] in which you can select the option of edit in blup lightning, as soon you click on the option a rectangle node is generated in the blup lightning on the same tab.

Components of rectangle Nodes.

1. Is hide – this input node point helps you to hide the rectangle, this node point accepts a Boolean type value if the value is true it hides the rectangle, else the rectangle is visible.
2. Width – this input node helps you to define the width of the rectangle.
3. Height - this input node helps you to define the height of the rectangle.
4. File Path – this input node point helps you provide the path of any image or gifs that you wanted to show inside the rectangle.
5. Extra Data – this input node points help to store data. which can be used in further cases.
6. Edit Checkbox – this checkbox helps you to access secondary input node points or Extra properties associated with the rectangle node. If the checkbox is checked then all the secondary input node points are visible and if not then they are hidden and cannot be used.
7. Padding Left - this node point helps you to give the left padding.
8. Padding Right - this node point helps you to give the Right padding.
9. Padding Top - this node point helps you to give the Top padding.
10. Padding Bottom - this node point helps you to give the Bottom padding.
11. Radius – this input node helps you to define the corner radius. This help helps you to round the corner from the rectangle as per the value given.
12. Fill - This node point helps you provide background colour/gradient to the rectangle.
13. Border fill - This input node point helps you to apply colour to the border of the rectangle.
14. Border Width - This input node point helps you to define the width of the border of the rectangle.
15. Shadow X -- this input node point helps you move your shadow effect in x-direction [horizontal].
16. Shadow Y - this input box helps you move your shadow effect in y-direction [vertical].
17. Shadow blur - this input node point helps you to expand the effect of shadow, If the value is smaller then the shadow is concentrated into a small area and vice versa.
18. Image Fill - This input node point helps you provide background colour for the image present in the rectangle.
19. Image Fit – This input node point helps you define how the image has to be fitted inside the rectangle. 20. On Click – this output node point helps you define the logic which is going to be executed when there is an on click press on the rectangle.
21. On Rect default prop update – this output node point as the name suggests helps you to run any logic when any primary input node points [primary properties ] changes. Also if you stretch the node point it will give you the properties values that are present on the left-hand side of the rectangle node.
22. On reactExtra prop Update - this output node point helps you to define logic when these extra properties are available when you press on the Edit checkbox. Change also similar to above node point stretch this node point further will help you to get more output node points.

Group UI Node

The Group node is useful when you wanted to perform any logic or change the property of the group dynamically on some event.
This node provides you with all properties that you can change in a group.

How to get the Group Node.

To get the group node first group the multiple elements present on the page or mobile canvas together and then select the group created with the selector toggle, that right-click on the group arsenal panel of blup designer opens up which shows you a couple of options, select the edit in blup lightning option from the dialog box, which will generate the group Node in blup Lightning.
Note – the group node doesn’t have the onclick output node point so if you wanted to perform any logic when the user clicks on the group you have to do it through the rectangle present inside the group.

Componenst of Group UI Node

  1. 1.
    Width – this input node helps you to define the width of the group.
  2. 2.
    Height - this input node helps you to define the height of the group.
  3. 3.
    Is hide – this input node point helps you to hide the group, this node point accepts a Boolean type value if the value is true it hides the group, else the group is visible.
  4. 4.
    Extra Data – this input node points help to store data. which can be used in further cases.
  5. 5.
    Edit Checkbox – this checkbox helps you to access secondary input node points or Extra properties associated with the group node.
    If the checkbox is checked then all the secondary input node points are visible and if not then they are hidden and cannot be used.
  6. 6.
    Padding Left - this node point helps you to give the left padding.
  7. 7.
    Padding Right - this node point helps you to give the Right padding.
  8. 8.
    Padding Top - this node point helps you to give the Top padding.
  9. 9.
    Padding Bottom - this node point helps you to give the Bottom padding.
  10. 10.
    Enum Stack comp Type Value Str –
  11. 11.
    On Group default prop update – this output node point as the name suggests helps you to run any logic when any primary input node points [primary properties ] changes.
    Also if you stretch the node point it will give you the properties values that are present on the left-hand side of the rectangle node.
  12. 12.
    On reactExtra prop Update - this output node point helps you to define logic when these extra properties are available when you press on the Edit checkbox. Change also similar to above node point stretch this node point further will help you to get more output node points.

Text UI Node.

Text UI Node helps you to perform logic on click of text or when properties related to text change.
Note – Text or Text Field [inout box] are having the same node i.e text UI node.
This node also helps you to get all the properties of textField so if you have created the text field and you wanted to get the information or text put the user in the text field, or if you wanted to perform logic while the user is putting text into the text field, this node covers all the aspects of both text and text Field.

Components Of Text Node

  1. 1.
    Text – this input node point helps you to provide the text which you wanted to show on.
  2. 2.
    Is hide – this input node point helps you to hide the Text Textfield, this node point accepts a Boolean type value if the value is true it hides the group, else the group is visible.
  3. 3.
    Extra Data – this input node points help to store data. which can be used in further cases.
  4. 4.
    Edit Checkbox – this checkbox helps you to access secondary input node points or Extra properties associated with the Text.
    If the checkbox is checked then all the secondary input node points are visible and if not then they are hidden and cannot be used.
  5. 5.
    Font Color - As the name suggests this property helps you to define the font colour.
  6. 6.
    Font Size - This input node point helps you to define the font size of the text.
  7. 7.
    Padding Left - this node point helps you to give the left padding.
  8. 8.
    Padding Right - this node point helps you to give the Right padding.
  9. 9.
    Padding Top - this node point helps you to give the Top padding.
  10. 10.
    Padding Bottom - this node point helps you to give the Bottom padding.
  11. 11.
    Line Height - This input node point helps you to define a height between the text. The bigger the number bigger will be height and if the number is smaller then the height is also going to be smaller.
  12. 12.
    Letter Spacing - This input node point helps you to define the spacing between the letters of the text that you have defined.
  13. 13.
    Max Lines - This input node point helps you to define the max line to which your text can expand, for example, if you define maxline value as 2 then your text can only take up 2 lines.
  14. 14.
    Is Ellipses - This input node point helps you to convert the text that is expanded in multiple lines to convert to a single line and show the rest of the text in β€œβ€¦.” form.
  15. 15.
    Is Adjust With Keyboard - This property helps your input box to adjust with a keyboard which means that when your input box is present on the bottom of the screen and you open the keyboard to input in the field it got hidden below the keyboard to avoid such a situation we used this property.
  16. 16.
    Is Paragraph Editor –
  17. 17.
    TextField Width – this input node point helps you to define the text-field or input Box width.
  18. 18.
    TextField height – this input node point helps you to define the text-field or input Box width.
  19. 19.
    Text Field Padding Left - this input node point helps you to give left padding to the text Field.
  20. 20.
    Text Field Padding Right - this input node point helps you to give the right padding to the text Field.
  21. 21.
    Text Field Padding Top - this input node point helps you to give Top padding to the text Field.
  22. 22.
    Text Field Padding Bottom - this input node point helps you to give bottom padding to the text Field.
  23. 23.
    Hint Text – this input node point helps you to give provide the hint text [hint text is the text which shows some hint to the user as to what information needs to be put inside the textField].
  24. 24.
    Hint Color – this input node point helps you to define the color of the hint that is present in the hint.
  25. 25.
    Border Focused Color - An input Box or text Field Is said to be focused when the user is inputting the text inside it, So as the name suggests this input node point helps you to define the border colour when the input box is in a focused state.
  26. 26.
    Border Un-Focused Color - An input Box or text Field Is said to be unfocused when the user is not inputting the text inside it, So as the name suggests this property helps you to define the border colour when the input box is in an unfocused state.
  27. 27.
    Border Focused Width – this input node point helps you to define the width of the border when the text field or input box is in a focused state.
  28. 28.
    Border Un-Focused Width – this input node point helps you to define the width of the border when the text field or input box is in an unfocused state.
  29. 29.
    Border Focused Radius - this input node point helps you to define the radius of the border when the text field or input box is in a focused state.
  30. 30.
    Border Un-Focused Radius - this input node point helps you to define the radius of the border when the text field or input box is in an unfocused state.
  31. 31.
    Cursor Color – this input node point helps you to define the colour of the cursor that is shown when the user starts putting the information.
  32. 32.
    Cursor Width – this input node point helps you to define the width of the colour.
  33. 33.
    Cursor Height - this input node point helps you to define the width of the colour.
  34. 34.
    Cursor Radius - this input node point helps you to define the width of the colour.
  35. 35.
    On Text Changed – if you wanted to perform some logic which user starts typing in the input box or text Field, this about node point helps you achieve the same functionality.
  36. 36.
    On Submitted – this output node point helps you to execute any logic when the user stops typing in the input box.
  37. 37.
    On Text default prop update – this output node point as the name suggests helps you to run any logic when any primary input node points [primary properties ] changes.
    Also if you stretch the node point it will give you the properties values that are present on the left-hand side of the rectangle node.
  38. 38.
    On reactExtra prop Update - this output node point helps you to define logic when these extra properties are available when you press on the Edit checkbox. Change also similar to above node point stretch this node point further will help you to get more output node points.

List UI Node

this node helps you to create a list of repetitive elements. This is one of the most widely used nodes in blup lightning.
This node is used for providing the data to the list dynamically or if you wanted to perform logic on various events. The main purpose of the node is to populate the list of items that you want to show repeatedly.

How to get List UI Node.

For creating a new List first you have to create a single element [repetitive element] of the list which can be created out of a single rectangle, single text or a group with multiple items in it. The process remains the same for all types of list the only difference is that, if the single list element consists of a single rectangle or text then only one item widget is going to be generated while list node is created, but if the single list element consists of multiple items like a group then the number of item widget that going to be associated with list node is equal to the number of items present in the single group.
After the single list element [repetitive element] is created then convert it to the list by clicking on the convert to list button on the properties panel, then select the list created and right-click on the list and choose the option edit in blup lightning in arsenal panel.
As soon as you do that a listview node is generated in the blup lightning which consists of an automatically generated item widget based on the number of items in a single element of the list.

Components of List UI node

  1. 1.
    Is Update – this input node point helps you to define whether the going is to be updated dynamically or not, this node point accepts a Boolean type value.
  2. 2.
    Item count - Item count input node point helps you to define the total number of items that we wanted to have on the list.
  3. 3.
    Is hide – this input node point helps you to hide the list. this node point accepts a Boolean type value if the value is true it hides the group, else the group is visible.
  4. 4.
    Item Widget – these input node points are dynamically generated based on the number of items present in the single element in the list.
    For example – if the single element of the list consists of three items, then three items widgets are going to be generated in the list node.
  5. 5.
    Extra Data – this input node points help to store data. which can be used in further cases.
  6. 6.
    Width – this input node point helps you to define the width of the list.
  7. 7.
    Height – this input node point helps you to define the height of the list.
  8. 8.
    Padding Left - this node point helps you to give the left padding.
  9. 9.
    Padding Right - this node point helps you to give the Right padding.
  10. 10.
    Padding Top - this node point helps you to give the Top padding.
  11. 11.
    Padding Bottom - this node point helps you to give the Bottom padding.
  12. 12.
    Grid Row Count – this input node point we can convert the list into a grid list. If the value of this property is one then it is a simple list but if we increase the value of let's say to 2 it becomes the grid list with two-column.
  13. 13.
    Item Spacing - This property helps you to define the spacing [vertical height] between the list items. Higher the value of item spacing greater the vertical height between the item in the list and vice versa.
  14. 14.
    Grid Spacing - This property helps you define the horizontal spacing between the grid items. Note - The property only going to works when we have a grid, not a list.
  15. 15.
    Item Aspect Ratio - Aspects ratio is the ratio between the width and height of the item, the greater the value of this property smaller the vertical spacing between them and the smaller the item gets.
  16. 16.
    Iterator – this output node point provides you with the current index of the list.
  17. 17.
    Scroll Listener – this output node point provides you with scroll pixels.
  18. 18.
    On Bottom Reached – this output node point helps you to perform any logic when the list reached the bottom [last element in list].
  19. 19.
    On Top Reached - this output node point helps you to perform any logic when the list reached the top [first element in list].
  20. 20.
    On Scroll Up - this output node point helps you to perform any logic when the user scrolls up for moving up in the list.
  21. 21.
    On Scroll Down - this output node point helps you to perform any logic when the user scrolls down for moving down in the list.
  22. 22.
    On default prop update – this output node point as the name suggests helps you to run any logic when any primary input node points [primary properties ] changes.
    Also if you stretch the node point it will give you the properties values that are present on the left-hand side of the rectangle node.
  23. 23.
    On Extra prop Update - this output node point helps you to define logic when these extra properties are available when you press on the Edit checkbox. Change also similar to above node point stretch this node point further will help you to get more output node points.