To achieve a Responsive Web Application, and an optimal viewing experience, we must use the Web Abstract Editor
For extra flexibility in designing web application forms, it's possible to use either the HTML editor or the abstract editor for designing different parts in a form. Nevertheless, note that this isn't a best practice and it should be avoided to use HTML editor to add a Responsive form inside. The other way round (the HTML editor inside a Responsive Form) could be acceptable in some cases. But these should be exceptional cases where there isn't another way to design the form.
As explained, the user may decide to use the abstract editor, in addition to the HTML editor for the various parts in the web form that is designed.
This may be achieved through "nesting form layouts", which consists of including an HTML editor inside the abstract layout and vice-versa.
This could be useful when we need to create a responsive design on the basis of an HTML design.
We may drag the Layout control into the form, in web forms edited with the traditional HTML editor.
Layout control dragged into the HTML form
With a double click on the layout control, an abstract form will appear in the window's editor.
Layout to be edited
Note that, in the figure above, the Layout is the child node of a tree whose root is "Root Form".
The user may navigate through the tree's nodes by clicking on the nodes.
The HTML container may be dragged from the toolbox to the abstract layout as shown in the figure.
HTML Container inside abstract layout
We can work with different Responsive Table in the abstract layout. This means that n responsive tables may be nested, all displayed in the same window of the editor.
Responsive Table nested in abstract layout
Responsive Tables edited in the same abstract Layout
This enables us to easily design a Responsive web application with more flexibility, since each editor implies specific advantages and they may be used interchangeably.
The different layouts used in designing a single web form are represented on a tree structure. The tree of form layouts consists of nodes, which may be either an HTML layout or an abstract layout. This tree's Root form may be either an HTML or an abstract Layout.
We can only display one form layout in the web object's web form tab. The layout displayed depends on the selection made on the tree.
In the following example the "ResponsiveMasterpage" object has a main HTML form including three abstract editors.
ResponsiveMasterPage object web form
We can display the form in the web form tab by double clicking on any abstract editor, or by selecting the corresponding node in the tree.
In this example, after we select the "RecentLinksLayout" it is displayed in the web form tab.
Note that it contains a "RecentLinksWrapper", which is an HTML layout embedded in the abstract layout.
Abstract Layout containing HTML layout
We edit the HTML Layout by double clicking on it, or by selecting it from the tree.
There is no automatic conversion between the two forms. But to allow the user more flexibility, there is the possibility of switching from one form to the other, as explained in these links:
Use HTML As Root Form
Add Html as Root Form
Use Layout as Root Form
Add Layout as Root Form