# 1. Hello World

### 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](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2FixgcjFxH4s6BVRDqa2Z1%2Fimage.png?alt=media\&token=0e8eb8bb-92c6-460d-bae1-78a4f892fabe)

### 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

{% tabs %}
{% tab title="View\[MainView]" %}
MainView

* [ ] Container\[cntHelloWorld]
  * [ ] Text Input\[fldInpName]
  * [ ] Text\[txtString]
  * [ ] Text\[txtFunction]
    {% endtab %}
    {% endtabs %}

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

{% hint style="info" %}
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*.
{% endhint %}

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

{% tabs %}
{% tab title="Canvas\[MainView]" %}
![](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2FgBoStf3lnEbbzjXekGl3%2Fimage.png?alt=media\&token=4a6f03f7-e88e-446c-adf4-102409efa501)
{% endtab %}

{% tab title="Outline\[MainView]" %}
![](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2FEmjvKdWIKixb8FMq2Mr3%2Fimage.png?alt=media\&token=8473d94c-659e-413a-aacc-b9a01fc7fb4f)
{% endtab %}

{% tab title="Inspector\[Common]" %}
![](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2FMa7IROxEDpZ6TAjFtbwx%2Fimage.png?alt=media\&token=a72b6844-0577-45bc-9c4e-16b48a984370)
{% endtab %}

{% tab title="Inspector\[Style]" %}
![](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2FhcSJhIqqCavvrYBbfaCb%2Fimage.png?alt=media\&token=f3bf94f4-0c8d-441f-bab8-d249619d926e)
{% endtab %}

{% tab title="Inspector\[Layout]" %}
![](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2FwdjlbVpnrnralN2VpNh6%2Fimage.png?alt=media\&token=b9116553-5ad0-481c-b7b9-a720b6e5e97d)
{% endtab %}
{% endtabs %}

### 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`.

{% tabs %}
{% tab title="Canvas\[cntHelloWorld]" %}
![](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2FV5OVcF5PNM4rss42RBd7%2Fimage.png?alt=media\&token=b0025860-0f49-4acc-92f2-dcfed0e31a9c)
{% endtab %}

{% tab title="Outline\[MainView]" %}
![](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2FEdeylLSo49xur81QyU1j%2Fimage.png?alt=media\&token=2c1ce9c1-5955-4fde-b747-30dc20932632)
{% endtab %}
{% endtabs %}

### 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*.

{% hint style="info" %}
Any associable *Values* and callable *Functions* of the existing *Components* can be referenced by matching the structure in the *Data Explorer*.
{% endhint %}

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` 

{% hint style="info" %}
You will see "Hello, ..." *Text output* at both *Text Components* if you did it right*.*
{% endhint %}

{% tabs %}
{% tab title="Canvas\[Main View]" %}
![](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2FbmqpZ1ygEJODp5nWiQQU%2Fimage.png?alt=media\&token=e57845fa-ab27-4393-a9c6-fdb96294f619)
{% endtab %}

{% tab title="Code Editor\[txtString Value]" %}
![](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2FZu04b2ttaIedsNpRN1zh%2Fimage.png?alt=media\&token=5d741a61-e90c-4af9-936c-56165b73aab0)
{% endtab %}

{% tab title="Code Editor\[txtFunction Value]" %}
![](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2FSrTYekatEzEWXg2gW20q%2Fimage.png?alt=media\&token=4f77495b-c1ce-47a0-bbeb-fd6376d1910c)
{% endtab %}
{% endtabs %}

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