NexJ Logo

Adding tile controls to applications in NexJ Studio

Add a tile control to your NexJ application by inserting it into a form.

To add a tile control:

  1. In the NexJ Studio Presentation layer, open a form you want to add a tile control to.
  2. In the Layout or Outline view, right-click where you want to add a tile control.
  3. Place your cursor over Insert Tile and select one of the available tile control types from the menu.
    The new tile control appears in the form.
  4. Assemble the tile by adding and configuring controls in each of the tile's available slots in the Outline view:
    1. Add preconfigured layout elements to the tile control.
    2. Insert regular controls into the tile layout.
    3. Modify the properties of the tile layout and regular control objects.

A tile control has been added to your NexJ application.

Configuring grids to contain tile controls

Certain types of tile controls can be added to grids. Grids containing tile controls must have a specific configuration.
The following tile controls can be placed in a grid:

  • ActionTile
  • ExpandableTile
  • ExpandableTextTile
  • MultilineRepeaterTile

For these tiles to be compatible with a grid, the grid must have the following properties:

  • form: (<Name> of the form with the tile control)
  • style: GridNoSelection
  • formCollapsible: false
  • showMenuColumn: false
  • headers: false

Expanding and inspecting tile controls

You can expand and inspect tile controls in NexJ Studio. Expanding a tile control displays the XML coding of the preconfigured layout in a new dialog.

The Outline view does not display all metadata for a tile control. Instead, a simplified control outline is displayed using semantically tagged names. Expanding a tile lets you see the full structure of the control as if it had been built it from scratch.
There are two primary uses for expanding a tile control:

  • Debugging.
  • Reviewing and copying code to customize the tile layout.

To expand a tile control in NexJ Studio:

  1. In the Presentation layer, open a form that contains a tile control.
  2. Right-click a tile control in the Layout view or the tile control node in the Outline view and select Expand.
    The Results dialog opens containing the expanded view of the tile control's XML data.

You have expanded a tile to view its XML data.

Editing tile control source files

You can customize the appearance of predefined tile controls in your NexJ application by modifying the source file.

Tile controls are defined using XSLT in a .xsl file. Modifying the contents of the source file affects each instance of the tile in your application.
To customize tile controls:

  1. In NexJ Studio, using the Resource perspective, locate uipatterns.xsl in your model.
    The uipatterns.xsl file is located in the <model>\src\nexj\core\meta\sys\controls\ directory.
  2. Open the file using the text editor application.
  3. Make your changes to the XSLT code.
    For example, you can change the width of table columns or the color of the text.
  4. Click the Save button  to save your changes.

Your control tile source code has been modified. All affected control tiles will reflect the changes when the application server is restarted.