After you mark the content area and define an application layout, you have to cut the views and make their layout responsive.
To define and cut the view layout:
Click the arrow icon next to the LAYOUT item.
Remember to cut the LAYOUT view and make it responsive.
- Save metadata—To save the medatadata on the file system use keyboard shortcut Cmd/Ctrl + S.
- Defining the View Layout
When the dialog for cutting the view layout appears, a toolbox is displayed to the left.
The toolbox renders the following fields:
- RESPONSIVE LAYOUT—Represents the responsive elements and their hierarchy from the RESPONSIVE canvas. To reorder elements, drag and drop them or create new layout containers (container, row or column) by clicking the Container, Row or Column button.
- DETACHED ELEMENTS—Represents the absolute positioned elements from the canvas which are rendered in the DESIGN tab. To reorder elements, drag and drop them or select elements and wrap them in responsive containers by clicking the Row, Column or Container button.
COMPONENT—Includes all available components which can be used in the Studio. You can drag and drop components directly on the RESPONSIVE canvas and configure their properties.
To design and configure the components, use the DESIGN, RESPONSIVE, and CODE tabs that are located to the right of the toolbox.
The DESIGN tab visually represents the absolute positioned elements which are related with the DETACHED ELEMENTS list of the toolbox.
- The DETACHED ELEMENTS list includes all elements from the DESIGN tab canvas.
The RESPONSIVE tab visually represents the responsive elements which are related with RESPONSIVE LAYOUT tree of the toolbox.
- The RESPONSIVE LAYOUT tree represents all elements from the RESPONSIVE tab canvas.
The CODE tab displays the code editor which loads files for each corresponding view from the file system.
When you generate an application and depending on the selected RESPONSIVE or DESIGN tab, the corresponding HTML content will be built—for RESPONSIVE, the responsive elements built with Bootstrap, and for DESIGN, the absolute positioned elements.
To make an absolute positioned view responsive, wrap all DETACHED ELEMENTS components as row and column elements and move them to RESPONSIVE LAYOUT either by selecting them and using the Row or Column wrapping buttons, or by dragging and dropping the components directly from DETACHED ELEMENTS to RESPONSIVE LAYOUT.
When you select a component from the canvas, the INSPECTOR displays all available properties for that component. In this way, you can configure and customize each component depending on its specific requirements.