Twitter Facebook
Go To home page Italiano
products
support
prices
clients
contact Pro Gamma
press
blog
forum
segui Pro Gamma su twitter e facebook

Home/Form Structure: Frames and Containers

Instant Developer forms can contain one or more different components which make possible many complete functionalities. These are the main types.

  • Panels: allow users to view or edit record / entity sets, displayed in list view as well as detail view.
  • Trees: allow users to view or edit record / entity hierarchies.
  • Charts: allow users to view records pulled from the database or processed by the memory in an interactive graphic format.
  • Reports: allow users to view / print any record set in any format / layout.
  • Tabbed Views: views in the form of multiple tabs representing containers for other components.

The form layout is set via In.de form editor. The form is partitioned into horizontal or vertical frames as shown in the example below:

with a few mouse clicks frames can be completed with, for instance, a tree representing the product category structure, an editing panel to edit product specifications or charts showing the progress of sales and stocks.

It should be noted that the layout of this form is the default layout of In.de form editor, where the charts are previewed in a simplified form. In the frame below you can test the application for yourself: expand the product category tree and pick a product to view the related product details on the right-hand side of the window.

Initialize framework...

In each panel some areas may be designed to act as containers of further graphic components so to create layouts which are more flexible than the basic horizontal and vertical partitioning. For further information read the Panel object documentation.

It should also be noted that form designed with In.de have a special feature that means they can automatically adjust to fit the dimensions of the browser. The dimensioning properties of frames and containers can be configured via form editor. The image below shows what happens when the Products panel is dimensioned.

  • When the form height changes the whole list is dimensioned accordingly in order to display more or fewer rows and the fields underneath the list also move upwards or downwards accordingly.
  • When the form width changes the whole list is re-dimensioned but only the PRODUCT NAME and UNIT PRICE fields broaden out or narrow down while all the others retain their fixed dimensions.

Let's move on now to see how the application components work, with the aid of actual examples. Our learning pathway starts from the component which allows you to view or edit record and entity sets: the panel.

<<< Browser-based User Interface Structure

 

 

Indice del percorso

Structure of user interface in the browser
Form's structure: frames & containers
Panels
Trees
Charts
Reports
Tabbed Views
Integration of external components
Graphic effects
Graphic style customization
Integration into portals