Creating Dynamic Layouts

Introduction

K2BTools includes a feature to reuse visual patterns, by defining Dynamic Layout objects. When K2BTools is installed some of these objects are imported into the KB. These objects implement some visual patterns identified by K2BTools’ team.

A developer can choose to implement new Layouts. After these layouts are created, they can be exported and imported as a normal GeneXus object. This page describes how the developer can create a new Layout.

There are two approaches to create new layouts. The first one is a manual procedure where the developer first defines the components that are to be included in the layout, and then defines the Layout associated with it. The second option is completely different, as the developer first must create a normal web panel with the design that should be included in the layout, and then extract the Dynamic Layout from it using a special tool.

Approach 1 - Manual definition

In this approach, the developer must create a new GeneXus object using the “New Object” dialog. In this dialog, the developer must choose the “Dynamic Layout Web” or “Dynamic Layout SD” object type depending on the platform where the layout should be created.

NewObjectDialogLayout
New Object dialog

When the object is created, the developer will be presented with a new object with a “Designer” part, where the specification is blank.

The developer must add a Components node in this part, and include as many nodes in it as necessary to complete the component definition.

After the components have been defined, the object must be saved. After the object is saved the contents of the Layout/WebForm part is updated, and the developer may begin designing it. To edit the layout, the following rules must be followed:

All the modifications must be done inside the table with control name “UserRegion”. All modifications performed outside that area will be discarded.

If defining a Dynamic Layout with “Layout Type” = “Grid”, a grid is added to the User Region. The developer may change the definition of the grid, but the following properties may not be altered: “Control Name”, “Collection”, “Default Action”, “Order”, “Conditions”, and “Rows”. This grid cannot be deleted from the user region.

The developer may include anything in the user region: all controls available in the Toolbox panel can be used.

The developer may add code to the Events part. If adding code to standard events (Start, ClientStart, Refresh, Load), the developer may add the code directly. If the intention is to add a new Event or subroutine, it must be declared in the Designer part using an Event (Dynamic Layout Definition) node.

Note: Layouts are considered valid by K2BTools only if they are included in the “DesignerLayouts” folder (or one of its subfolders).

Approach 2 - Layout extraction

This approach is radically different. In this case, the developer should first create a simple web panel containing the desired layout. This panel doesn’t need to have a complex logic, as only the layout will be extracted. For example, the developer doesn’t need to use real data, and can use variables loaded statically in the web panel to provide content.

After the design is complete, the developer must execute the “Extract Layout” action to begin the extraction process. This action will not modify the original web panel.

ExtractLayoutAction
Extract layout action

When this action is executed a wizard will be presented to the developer. This wizard’s steps are:

  1. Name selection: The developer must choose a name for the Layout object being created.
  2. Select the layout’s root table: The table selected in this step will be converted to the “UserRegion” table mentioned in the previous section.
  3. Select textblock dynamic components: In this step, the developer must choose the textblocks that should be included in the Dynamic Layout as Textblock (Dynamic Layout Definition) nodes. If a textblock is intended to have a constant value, it should not be selected in this step.
  4. Select variable dynamic components: In this step, the developer must choose the variables that should be included in the Dynamic Layout as Variable (Dynamic Layout Definition) nodes. Variables whose value should be loaded in the layout’s events should not be selected in this step.
  5. Select action dynamic components: In this step, the developer must choose the actions that should be included in the Dynamic Layout as Action (Dynamic Layout Definition) nodes. Actions that will not be customizable in the Dynamic Layout should not be selected in this step.
  6. Select actions dynamic components: In this step, the developer must choose the tables that should be included in the Dynamic Layout as Actions (Dynamic Layout Definition) nodes. In this step, only tables that do not contain any of the previously selected items will be shown.
  7. Select attributes dynamic components: In this step, the developer must choose the tables that should be included in the Dynamic Layout as Attributes (Dynamic Layout Definition) nodes. In this step, only tables that do not contain any of the previously selected items will be shown.

After the wizard is completed the new layout will be opened. The developer can modify this layout in any way it deems necessary. In particular, Event code is not inherited, so the developer must do so manually.