1. Hello World
How to build an application based on blueprint driven development and reactive programming?
The Goal
Prepare a basic responsive application, reflecting Input Field value into two Text components, where one should be a String and the second one a Function.
The Description
Any changes you will make to any existing Components are fully responsive. In our case, we are placing one Text Input and two Text components into the Canvas work-field. First, the Text output would be bound as a constant Value
; the second one would be mapped dynamically
by a Function.
The Knowledge You Will Get
Responsive notion.
Working with Components and their properties.
Understand the difference between Constant and Dynamic Values.
The Project Structure
MainView
1. Prepare your MainView Canvas
The MainView
is an inseparable part of all applications and is superior to any other Views. You can put components directly to the MainView
Canvas or start by creating a new one.
Keep in mind that the application is always run from the MainView
. Mean, if you use another one, you won't see any results after deployment till you will bind MainView
with a View component.
Let's say that we will stay in MainView
for this tutorial.
Find a Container and drag and drop it to your
MainView
Canvas from the Component Panel.Rename its ID to
cntHelloWorld
at the Inspector Panel. You can also see thename
change in the Outline Panel at that time.Set up Common -> Flow on
Under each other
, telling us sorting of child components.Common -> Horizontal Alignment ->
Center
and Vertical Alignment ->Middle
ensuring position of all placed components right in the middle.Style -> Spacing ->
Medium
is set up distance between all child components.The last setting of the
cntHelloWorld
Container has to be Layout -> Item Flex ->Stretch
filling full content View.
2. Placing Components into Container
Place three components into cntHelloWorld
Container and set up their properties.
First, put into
cntHelloWorld
Text Input from Component Panel and set up its ID ->fldInpName
following next properties:Common -> Value -> "
...
" showing content offldInpName
by a Default.Common -> Placeholder -> "
Input your name
" ensure hint of the Text Input unless its empty Value; for example, if you will delete "...
" when the application will run.Layout -> Width ->
200px
forcing to keep the pixel width of the Text Input.
The Next component would be a Text that ID set up on
txtString
. Keep the Value empty for a moment and continue with other properties:Common -> Text Style ->
Bold
and Font Size ->Large
defines graphical output style oftxtString
.
The Last component would be a Text also with ID ->
txtFunction
. Even here keep Value blanc and set up as follows:Common -> Text Style ->
Bold
; Font Size ->Large
; Foreground ->RED
what represents graphical output oftxtString
.
3. Bind Components Together
Both Text Components have to assume the Value of the Text Input. We can make it in two ways; first, Text Input will stay as a constant Value; the second one will be switched to a Function.
Any associable Values and callable Functions of the existing Components can be referenced by matching the structure in the Data Explorer.
Set up
txtString
Common -> Value ->Hello, ${fldInpName.value}
Switch on Function of
txtFunction
by clicking on ƒx icon on the right side of the Value property.Set up
txtFunction
Common -> Value ->"Hello, " + fldInpName.value
You will see "Hello, ..." Text output at both Text Components if you did it right.
The Conclusion
The constant Value and Dynamic Function are interconnected, and both settings are valid. Referencing Function from String has to be annotated by ${function}
; meanwhile, referencing String from Function has “string”
annotation.
Last updated