Buttons Menu Example


Example of menu with buttons that display suboptions. This menu replaces APPWIZARD, so that we can customize to our liking the application menus.

Android menu view Drop-down menu view
Demo frames view

Download the example


NOTA: A phone has been developed (800*480) with vertical orientation, simply as an example of development.

Download example

Code Explanation

1.- Automatic Login


The first thing that draws attention is that the application does NOT ask for a username and password to enter the application, this can be achieved by having an “admin” user without a password in the database users table, in addition, in the mappings, within the APP node, we have to specify the attribute autologon = “true” . 

<app prefix="gen" version="0.0.0.1" autologon="true" entry-point="menus" resolution-width="480" resolution-height="800">

2.- Replacing APPWIZARD


To replace APPWIZARD, we will have to define a collection in the mappings.xml file, with the design of menu we want to show. In the APP node we have to specify in the entry-point=“NOMBRE_COLECCION_MENUS” attribute, the name of the collection where we have defined the menu.

3.- Images Resolution


At the time to design our menus, we have to take in mind the different devices and resolutions we have today in the market. For this, we take as a base a device to make our design, at the example we have taken a device with a resolution of 800×480 pixels.

Our entire application will be made for this resolution and in the APP node we will specify the resolution-width=“480” and resolution-height=“800” attributes. These attributes allow us that our application resizes automatically if we use another device with different resolution, so that the framework will be in charge automatically of the resizing.


Preferably use devices with a high resolution (1920×1080, full hd) to develop the application, since making large images are resized at a smaller resolution is not a problem, however, when small images have to be resized to see them in a device with higher resolution, will cause the images to look pixelated.


Code Explanation
special=“true” This attribute, to a COLL node level, allow us to NOT execute any SQL against the Database to get the values ​​of the collection.
notab=“true” This attribute, to a COLL node level, allow us to NOT show the possible tabs(group) that could have.
bgcolor=“#00FFFFFF” The two first digits of color specify us the OPACITY, in this case 00, with which it is transparent and the color is not shown.
MAP_SUBOPCION This Numeric field we have visible will be used as a flag field in order to know which submenu we have to show, firstly its value is 0 and no suboption is NOT shown.
scroll=“true” Used in the frame1, so that if there are many options / suboptions, scroll is made. It is only put in this frame, so that the rest continue to appear on the screen without being affected by the scroll.
Subopciones1/2 This frame is used to encompass the suboptions and lo hemos utilizado para englobar las subopciones and thus be able to show them or hide them all at once. It has specified the disablevisible=“MAP_SUBOPCION&lt;&gt;1” attribute which specifies the condition to hide the suboptions, in this case the suboptions will remain invisible while MAP_SUBOPCION is different than 1. The &lt; and &gt; characters have to be modified like that, since hemos de codificarlos así since being inside an XML, we can not put the < y > symbols, so do not think we're closing or opening an XML node.
NOTE: This frame we have used it for convenience and as an example, just trying to avoid as much as possible the use of frames, since a greater complexity of the visual structure of the application will imply a greater time of “repainting”, whenever a field changes and causes a refreshing of the screen.
method=“executenode(toggleMENU(1))“ Used in the buttons of the main options, we call to the “toggleMENU” node and we pass it as parameter the option which we have click into.
show-wait-dialog=“false” Used in the “toggleMENU” node, to not show the message “LOADING…” while the script defined is being running.
method=“executenode(abrirCOLL('Clients'))“ Used in the buttons of the suboptions, we call to the “abrirCOLL” node and we pass it as parameter the collection we want to open.
appData.userinterface.openmenu coll,26,1 Used in the “abrirCOLL” node to open a collection, the attributes are “collection”, mask(permissions) and mode (0-list, 1-edition). See more information about the mask values Here

Example of code of the menus collection


<coll name="menus" title="menus" notab="true" special="true" filter="" sort="">
    <group name="General" id="1"> 
 
    <frame name="frmFondo" width="480" height="800" imgbk=".\icons\FondoEntry.jpg">
 
        <frame name="frmtitle" framebox="false" width="480" align="center" height="80" bgcolor="#00FFFFFF">
            <prop name="MAP_TITLE" type="TL" align="center" labelbox="false" title="By XOne - Menú sin Appwizard " visible="1" width="480" height="50" labelwidth="20" forecolor="#FFFFFFFF" />
            <prop name="MAP_SUBOPCION" type="N" visible="0" />
        </frame>
 
        <frame name="Frame1" width="480" height="720" labelbox="false" scroll="true">
 
            <prop name="MAP_BT_OPCION1" type="B" method="executenode(toggleMENU(1))" class="opcion_appwizard" title="Opción 1" />
 
                <frame name="Subopciones1" width="480" height="250" labelbox="false" disablevisible="MAP_SUBOPCION&lt;&gt;1">
                    <prop name="MAP_BT_OPCION1_1" type="B" method="executenode(abrirCOLL('Clientes'))" class="subopcion_appwizard" title="SubOpción 1.1" />
                    <prop name="MAP_BT_OPCION1_2" type="B" method="executenode(abrirCOLL('Clientes'))" class="subopcion_appwizard" title="SubOpción 1.2" />
                    <prop name="MAP_BT_OPCION1_3" type="B" method="executenode(abrirCOLL('Clientes'))" class="subopcion_appwizard" title="SubOpción 1.3" />
                </frame>
 
            <prop name="MAP_BT_OPCION2" type="B" method="executenode(toggleMENU(2))" class="opcion_appwizard" title="Opción 2" />
 
                <frame name="Subopciones2" width="480" height="250" labelbox="false" disablevisible="MAP_SUBOPCION&lt;&gt;2">
                    <prop name="MAP_BT_OPCION2_1" type="B" method="executenode(abrirCOLL('Clientes'))" class="subopcion_appwizard" title="SubOpción 2.1" />
                    <prop name="MAP_BT_OPCION2_2" type="B" method="executenode(abrirCOLL('Clientes'))" class="subopcion_appwizard" title="SubOpción 2.2" />
                    <prop name="MAP_BT_OPCION2_3" type="B" method="executenode(abrirCOLL('Clientes'))" class="subopcion_appwizard" title="SubOpción 2.3" />
                </frame>
 
            <prop name="MAP_BT_OPCION3" type="B" title="Opción 3" class="opcion_appwizard" />
            <prop name="MAP_BT_OPCION4" type="B" title="Opción 4" class="opcion_appwizard" />
            <prop name="MAP_BT_OPCION5" type="B" title="Opción 5" class="opcion_appwizard" />
        </frame>
    </frame>
    </group>
 
    <toggleMENU show-wait-dialog="false">
        <action name="runscript">
            <param name="subopcion" />
            <script language="VBScript">
                'Pasamos como parámetro la opcion principal en que ha pinchado.
                'Preguntamos y si le ha vuelto a dar a la que estaba desplegada, la colapsamos.
                if this("MAP_SUBOPCION")=subopcion then
                    this("MAP_SUBOPCION")=0
                else
                    this("MAP_SUBOPCION")=subopcion
                end if
            </script>
        </action>
    </toggleMENU>
 
    <abrirCOLL>
        <action name="runscript">
            <param name="coll" />
            <script language="VBScript">
                'Para abrir una colección "nombre_coll",mascara,modo(0-listado, 1-edicion)
                appData.userinterface.openmenu coll,26,1
            </script>
        </action>
    </abrirCOLL>
</coll>