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 Hello World Application

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

1. Responsive notion.

2. Working with Components and their properties.

3. Understand the difference between Constant and Dynamic Values.

The Project Structure

View[MainView]

MainView

• Container[cntHelloWorld]

  • Text Input[fldInpName]

  • Text[txtString]

  • Text[txtFunction]

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.

1. Find a Container and drag and drop it to your MainView Canvas from the Component Panel.

2. Rename its ID to cntHelloWorld at the Inspector Panel. You can also see the name change in the Outline Panel at that time.

   1. Set up Common -> Flow on Under each other, telling us sorting of child components.

   2. Common -> Horizontal Alignment -> Center and Vertical Alignment -> Middle ensuring position of all placed components right in the middle.

   3. Style -> Spacing -> Medium is set up distance between all child components.

   4. The last setting of the cntHelloWorld Container has to be Layout -> Item Flex -> Stretch filling full content View.

Canvas[MainView]

Outline[MainView]

Inspector[Common]

Inspector[Style]

Inspector[Layout]

2. Placing Components into Container

Place three components into cntHelloWorld Container and set up their properties.

1. First, put into cntHelloWorld Text Input from Component Panel and set up its ID -> fldInpName following next properties:

   1. Common -> Value -> "..." showing content of fldInpName by a Default.

   2. 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.

   3. Layout -> Width -> 200px forcing to keep the pixel width of the Text Input.

2. 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:

   1. Common -> Text Style -> Bold and Font Size -> Large defines graphical output style of txtString.

3. The Last component would be a Text also with ID -> txtFunction. Even here keep Value blanc and set up as follows:

   1. Common -> Text Style -> Bold; Font Size -> Large; Foreground -> RED what represents graphical output of txtString.

Canvas[cntHelloWorld]

Outline[MainView]

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.

1. Set up txtString Common -> Value -> Hello, ${fldInpName.value}

2. Switch on Function of txtFunction by clicking on ƒx icon on the right side of the Value property.

3. Set up txtFunction Common -> Value -> "Hello, " + fldInpName.value

You will see "Hello, ..." Text output at both Text Components if you did it right.

Canvas[Main View]

Code Editor[txtString Value]

Code Editor[txtFunction Value]

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.