GXML (GeneXus Markup Language)

Official Content
This documentation is valid for:

GeneXus Markup Language (GXML) is an XML-like descriptive language for describing GeneXus' objects.

The drag-and-drop concept in GeneXus makes it far easier for the average user to understand how to design apps by describing their components in an abstract way, without worrying about the lines of code that it may entail. Either way, for those adventured users, the GXML syntax aims to be very simple to understand, providing views, controls, and layout structures for declaring your app's user interface. This document pretends to be a guideline for those intrigued users that wants to analyze a GeneXus object from another point of view.

Overview

The GXML format can be used for defining User Interface (UI) objects such as Panels, Stencils, Themes, and ColorPalette objects. This format aims to be simple to read for developers.

The main structure of every GXML is as follows:

<Root>
    <!-- Object description -->
</Root>

The content of the Root tag will depend on what kind of object you are modeling.

In the case of Panels and Stencils, it will contain the definition of every object in the Layout (delimited by a Controls tag), the Variables involved (by a Variables tag), and the Code section (by a Code tag). Also, it allows you to define a set of data objects on which it depends (delimited by SDTs tag and DataProviders tag). For instance:

<Root ImportFor="SD">
    <Controls>
        <!-- Controls description -->
    </Controls>
    <Variables>
        <Variable name="MyVar">
            <!-- Variable definition -->
        </Variable>
        ...
    </Variables>
    <Code>
    <![CDATA[
    // Code events
    ]]>
    </Code>
    <SDTs>
        <!-- Structure Data Type definition -->
    </SDTs>
    <DataProviders>
        <!-- Data Providers definition -->
    <DataProviders>
</Root>

 

In the case of a Theme object definition, the GXML structure will contain a Themes tag where you are able to define a set of theme objects by a Theme tag (usually one), and each Theme tag is defined by a set of Class tags for describing the theme-classes. For instance:

<Root>
    <Themes>
        <Theme name="MyMobileTheme" ImportFor="SD">
            <Class name="MyAttribute" parent="Attribute">
                <!-- Set of properties that defines the theme-class -->
            </Class>
            ...
        </Theme>
        <Theme name="MyWebTheme" ImportFor="WEB">
            <!-- Set of classes definitions -->
        </Theme>
    </Themes>
</Root>

 

Finally, a ColorPalette object definition is very similar to the Theme object definition. It defines a Palette tag that contains a set of PaletteColors tag (usually one), and each of them will contain a set of PaletteColor tags for describing the target color. For instance:

<Root>
    <Palettes>
        <PaletteColors name="MyPaletteColor">
            <PaletteColor name="MyColor1" color="#E21710" />
            <PaletteColor name="MyColor2" color="#F0A3B2" />
            ...
        </PaletteColors>
        ...
    </Palettes>
</Root>

Advantages

  1. The Sketch Import option tool will basically generate the appropriate GXML files from your Sketch files (translate them) in order to import them into GeneXus. In that sense, when GeneXus displays the preview of what are you going to import, you can see a Code tab with the GXML to be imported.
     
  2. In the Layout tab of a (Web) Panel, you can copy any Table (except the Main Table) and paste it into a text editor in order to see the GXML representation and vice versa.

    For example, if you have the following layout and copy the highlighted control.
    GXML from Panel example

    And you paste it into a text editor, it will show you something as follows:
    <Root>
        <Controls>
            <table controlName="Table1" 
                   columnsStyle="100%;60dip" 
                   class="Search">
                <row rowHeight="60dip">
                    <cell>
                        <data attribute="&amp;Search" />
                    </cell>
                    <cell colSpan="1">
                        <action controlName="Search" 
                                onClickEvent="'Search'" 
                                image="Search_icon" />
                    </cell>
                </row>
            </table>
        </Controls>
        <Variables>
            <Variable Name="Search">
                <Properties>
                    <Property>
                        <Name>Name</Name>
                        <Value>Search</Value>
                    </Property>
                    <Property>
                        <Name>OBJ_TYPE</Name>
                        <Value>id_OTYPE_VAR</Value>
                    </Property>
                    <Property>
                        <Name>ATTCUSTOMTYPE</Name>
                        <Value>bas:VarChar</Value>
                    </Property>
                    <Property>
                        <Name>Type</Name>
                        <Value>VARCHAR</Value>
                    </Property>
                </Properties>
            </Variable>
        </Variables>
    </Root>

Formal specification

Under construction.

Scope

Generators   .NET, .NET Core, Java, Android, Apple, Angular

See also