The MDU file

This page has been updated on the 19 May 2010.

What is this document about?

This document will show you how to use the MDU file. The purpose of this file is to create and manage the graphical interface of your project. This specific editor gives you the opportunity to manage the interface of your application by creating all the screens of an application, create styles (using a CSS subset) and finally manage the regionalisation

The graphical interface

This tool allows you to create the graphical interface of your application. You can add some widgets such as text fields, buttons, toggles and so on. You can manage your application screen by screen.

The interface

This tool is organized in two main parts.The first one is the middle, here are displayed all the screens that belong to your application. As soon as a new graphical project is created, there is always one screen present here, this screen is the main one of your application. You can see and manage all the widgets, that have been created in your screens. Here you can manage the layout of your different screens by moving the widget to the position you desire with the mouse. This is a small, but very efficient tool to set up your layout in few clicks.

With this tool bar you can align all your widget very easily, resize widget, zoom in and out and finally search for a precise element of your interface.
The second important part is the toolbar on the left side. This bar is called “the palette”. This menu lets you create new screens, new widgets to insert your application interface. This will be explained in details in the next paragraph.

The palette

Displays

In this section you can add new screens to your application, and also create pop-up.

  • Screen

To create a new screen, select Screen in the palette and click on the area where the screens are displayed. A pop-up should open, enter the name of your screen and click on OK. The new screen must appear below the main screen.

  • Pop-up

To create a pop-up, select pop-up in the palette and click on the area where the screens are displayed. Give a name to this pop-up in the pop-up that should have just opened and click pn OK. The pop-ups are display at the bottom of the window where the screens are displayed.

Links

The links are a very easy way to manage the navigation between two screens

To link two screens, select One way link, then select one screen and click on the destination screen to link both screens. An arrow must have appear between the screens.

Widgets

The widgets are the elements that compose your user interface. Those elements are frames, text fields, buttons, toggles, gauge, image and draw box.

  • Frame

This widget acts as a container. You can put inside its frame any other widget you want.
So to create a frame, select Frame in the palette and click on the screen (or pop-up) in which you want to put the frame. Give a name to this frame in the pop-up and select OK.
Your frame is now displayed on your screen (or pop-up).

  • Text

This element lets you create a text field.
To create a new text field, select Text and click on the screen (or pop-up) in which you want to create the new widget. A new window should open, in this window you have to give a name and a text tag. This tag will let you manage the content of the text field and the regionalisation, this point will be treat later.

To assign a tag to this text field, you have two possibilities. You can use an existing tag or you can create a new one.
Once you click on ok in this window will close and the text filed will appear on your screen (or pop-up).

  • Button

This widget enables you to create buttons.
So here the process to create this element is the same as for the other widgets. Select Button in the palette, then put your button wherever you want on a screen (or pop-up). And finally give a name to this element and assign it a tag. Then it will appear on your screen.
Of course it is possible to put some action behind a button, this will be explain in the java code editor section.

  • Toggle

This widget allows you to create check boxes.
The creation process is exactly the same as for the other widget.
This element acts as a button but only with two states: on and off.

  • Gauge

This widget is made for creating loading bar.

  • Images

With this element, you can insert an image in a screen.

  • Draw box

This widget lets you draw a picture pixel by pixel.

Nav Tools

The style sheets manager

The style sheets manager is the easiest way to create a style for your graphical interface. Using this tools you can add background image to a text field or button, manage the font and the size of text and so on. All this system is based on the same CSS used to develop websites and uses the same properties.

By default for new project, there is no style created. So to create a new style, go on the style sheets editor.

Then do a right click on StyleSheets “default”, select Create style, then style.

Then you can rename your first style sheet by using the properties windows of the SDK.

Once you have done that you can create a property by right clicking on the style you have just created. Then select Create Style and Properties. This property you have just created is tagged as “normal”. This tag’s purpose is to change the style you are using when the state of a widget is modified. For instance for a button it can be up, down or disable, so a property will exist for each style.
Then you can add all the properties you want to this style sheets, by right clicking on the properties.

When adding a property to change the value of this one you need to do it in Properties window of the SDK. You can change the value as you like. A set of initial pictures is included in the SDK, but you can of course include your own images.

Once you have created your style, you need to assign the sheet to a widget. To do so go back in the visual application window, select the widget you want to a assign a style to. Then you need to use the Properties windows and select which style sheet you want to use for this widget in the list of the property Style.

You can now launch the simulator to see how this new style looks like live. Or you can chose to use a feature of the SDK which display the style in the visual application. To do so, on the top bar menu go into Unit interface and select Preview mode.

The language manager

This feature helps you manage the regionalisation of your application. You can manage several languages at same time, thanks to a very simple user interface.

The default language of a new application is English. You can add as many languages as you want. To add a new language you just need to click on the button add.

Then a window opens. Here you need to select a language or add another language if it is not in the list.

Then you just need to fill in the text table to translate each tag that have been created with a widget.

The other interesting feature is that you can export or import a text table. The SDK can handles CSV files.

The java code editor

To each widget you can assign some specific behaviour, using java method and all the Mobile Devices APIs. For instance you can change the action of a button at the click, or load special feature when a screen is loading (change the language or the style, …).

To do so you have to go into the visual application and make a right click on a screen, a pop-up or a widget. Then select Code and choose on which action you want to assign specific method.

Then the java code editor opens. Here you just need to code your method in java. No need to declare a class or a new method, just put your implementation and when you save, the SDK will generate
everything.

Generated Files

Some files are generated by the MDU file :

  • MuiApp.java : contains all global methods, styles and texts of the graphical part.
  • ConstStyle.java : this file is used by MuiApp.java. Users don’t need to use it directly.
  • Screen_XXXX.java : generated for each existing screen in the project.
  • Popup_XXXX.java : generated for each existing pop-up in the project.

Warning : the file are re-generated each time you save the file.

Format

This XML file uses the format described here : MUI XML Description