# Views

*Views* representing the graphical user interface contain as many components as required. Each application can be composed of many different *Views*, nested or opened as a solo page.

{% hint style="info" %}
Application **is always starting** from the *View* called **`MainView`**, and **it's mandatory**.
{% endhint %}

![Application Views](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2FCe6SiTUML8BKqh2eW3Xv%2Fimage.png?alt=media\&token=47f13c4f-f67a-4056-891a-2fb7bf43fdd0)

### 1. Creating and Working with a View

In the *Main Menu* settings, any new or existing *View* can be *created*, *renamed*, *duplicated*, *deleted*, *exported*, or *changed* in its parent directory.

{% tabs %}
{% tab title="Main Menu\[Create New View]" %}
![](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2F3CQprjqtSme4oX2x1bpz%2Fimage.png?alt=media\&token=9ea2e23e-7c9a-43ab-9ab2-4a281801611d)
{% endtab %}

{% tab title="Main Menu\[Name & Locate New View]" %}
![](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2F5U8nAKRm3UqpFbUParcM%2Fimage.png?alt=media\&token=e7ffdafb-8c2e-4290-aae4-1f2368c12332)
{% endtab %}

{% tab title="Main Menu\[List of Existing Views & it's Options]" %}
![](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2FOfaidME72b4FDQd1NdaW%2Fimage.png?alt=media\&token=0e3c415a-d775-4c3a-9780-ee043e06a204)
{% endtab %}
{% endtabs %}

### 2. Views Tabs

Switching between opened *Views* can be done by clicking on its tabs and closing them by clicking on the cross icon.

{% hint style="info" %}
Any unsaved changes **will be lost** after closing a tab!
{% endhint %}

{% tabs %}
{% tab title="View\[Tabs & Closing]" %}
![](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2FVJX6wd16CsdkKllfJ1ft%2Fimage.png?alt=media\&token=f847f51f-f9c2-47ce-8c07-f1b416a97205)
{% endtab %}
{% endtabs %}

### 3. Screen Resolutions

Switching between the screen resolution allows displaying proper responsivity on different devices. Each of the resolutions is represented by the pixel value, which can be modified if required.

{% hint style="info" %}
The **Base Screen** setting is considered to be a **default** in herity chain.
{% endhint %}

{% tabs %}
{% tab title="Base Screen" %}
![](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2FqmQXmxZSeYHV6cJP59Ol%2Fimage.png?alt=media\&token=3368b2c4-599c-473e-b619-c8a57d390dd4)
{% endtab %}

{% tab title="Phone Screen" %}
![](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2FB7tQ5qFKjz5vRgT0FAIE%2Fimage.png?alt=media\&token=93580e8f-837a-4531-adf2-4b202be1f8ea)
{% endtab %}

{% tab title="Custom Pixel Ratio" %}
![](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2FVGy0grbQjfUCpB6gzZiC%2Fimage.png?alt=media\&token=7f40beeb-90fa-46f6-89d7-50f80d569583)
{% endtab %}
{% endtabs %}

### 4. Undo & Redo

Each of the existing *Views* has its own *undo* and *redo* steps if necessary.

{% tabs %}
{% tab title="Undo & Redo" %}
![](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2FdbDgvzZbMF4cJigYxpaQ%2Fimage.png?alt=media\&token=e1e828d9-52d5-4670-be84-5ef6ed5b6a0c)
{% endtab %}
{% endtabs %}

### 5. Toggling the Panels

Resizing the *Canvas Work-field* during developing applications, especially on the smaller screens, can take advantage of by switching off the left and right panels by clicking on the *toggle buttons*.

{% tabs %}
{% tab title="Left Toggle Button" %}
![](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2FNcG0Y56M2wPM0tX3rquJ%2Fimage.png?alt=media\&token=19226977-bc8d-409c-84ae-e2abfdbf5843)
{% endtab %}

{% tab title="Right Toggle Button" %}
![](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2F4znEr1mrMAZZhfkW9Igh%2Fimage.png?alt=media\&token=edfcb921-1151-411d-b4bf-118066b87efd)
{% endtab %}
{% endtabs %}

### 6. Saving a Current Content

The *Save button* will save the composition of a *current View*; meanwhile, *Save All button* will save all opened *tabs*, even *actions*, and *integrations*.

{% tabs %}
{% tab title="Save View Button" %}
![](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2FHQEPi8Qsrm8Ge1mfe92B%2Fimage.png?alt=media\&token=263bec92-d954-4ab5-b78a-9efe7e84544e)
{% endtab %}

{% tab title="Save All Application Button" %}
![](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2FESJSViNegkxpXyDcdB4P%2Fimage.png?alt=media\&token=c74f5f9c-311c-47c4-91b3-505e82d53589)
{% endtab %}
{% endtabs %}

### 7. View the Options Panel

The *Options Panel* allows direct work with a *current View*, like *renaming*, *moving* to different directories, *duplicating* actual content into a new *View*, *watching* revision history, *exporting* its content to *YAML*, and deleting the whole *View*.

{% hint style="info" %}
The Revision history would be available as soon as possible.
{% endhint %}

{% tabs %}
{% tab title="Options Panel" %}
![](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2Ff0UKu5UVLoCndfFILFk1%2Fimage.png?alt=media\&token=d4c1d885-444a-4dbf-97bf-8f1ac5426690)
{% endtab %}
{% endtabs %}

### 8. Design & Preview & Debug

1. The **Design Mode** is the essential part of designing *Views*. You can drag and drop components into *Canvas Work-field* and edit their properties.
2. The **Preview Mode** is representing the visual output of a current *View* and active components are fully available.
3. The **Debug Mode** shows the current *View* blueprint that is taking advantage of checking exported code. Any immediate changes are fully responsive.

{% tabs %}
{% tab title="Design Mode" %}
![](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2FenFfv7tatU6TZiwxhhV3%2Fimage.png?alt=media\&token=3851ec0f-36cc-4a1f-a05b-a7ab9bf4a45c)
{% endtab %}

{% tab title="Preview Mode" %}
![](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2FdkPXQu6IDWaNRitACQp5%2Fimage.png?alt=media\&token=9b22c3fb-b520-4e6c-9539-099761fa4a5f)
{% endtab %}

{% tab title="Debug Mode" %}
![](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2FmP4GRJ2X4PX0vf5l7woI%2Fimage.png?alt=media\&token=3a62d0bd-f6d6-4bfc-99d3-c3caf16b0589)
{% endtab %}
{% endtabs %}