UseWidget

This page has been updated on the 27 May 2010.
Information validated on 2.4.0 framework.

Objective

The purpose of the useWidget Component is to manage graphical interfaces and its features.
This will be done in several steps :

  • STEP 1 : create a widget and manage text
  • STEP 2 : manage languages
  • STEP 3 : manage Styles and StyleSheets
  • STEP 4 : manage Screens
  • STEP 5 : manage Pop-ups

Preliminary step

  • Create a user interface component called useWidget with package name : com.training.useWidget
  • Open the MDU file.

Step 1 : Manage text

  • Go on the palette of widget and click on Text

  • Create the “Text” widget on the top left of the main screen. Give it a name and choose “new text entry” and type “message1”.

  • Create a “Button” widget just behind the text box of the main screen. Give it a name and choose “new text entry” and type “chgText”.
  • Go on “Texts Table” in the bottom tab

  • Set the message1 value to “hello world”.
  • Set the chgText value to “change\ntext”.
  • Click on the third button of the Texts Table’s topbar to create a new text entry.
  • Set the text entry to “message2” and set its value to “hello all”.
  • Save your work.
  • Go back to “Visual Application” in the bottom tab.
  • Right-click on the created button, then “code”, then “onClick”. This shows you a part of the code in the “Java Code Editor”.

  • To access a widget inside our screen you can type “w_” and use completion (CTRL+SPACE), this will show you all the widgets available. Choose your text widget and look at the methods setText(), parameter can be String or StringRef.
  w_XXXX.setText("hello trainees");
  • Launch this in the simulator and test it, when you click on the button the text changes. But with a raw String, you lose regionalisation support. The StringRef method is used to enable this feature:
  w_XXXX.setText(MuiApp.INSTANCE.getTexts().t_message2);
  • It is possible to modify it to change the text each time.
  if (w_XXXX.getText().equals(MuiApp.INSTANCE.getTexts().t_message1))
    w_XXXX.setText(MuiApp.INSTANCE.getTexts().t_message2);
  else
    w_XXXX.setText(MuiApp.INSTANCE.getTexts().t_message1);

Note:
The main advantage is the language configuration, so in the next part we will see how to set translations and change language.

Step 2 : Manage language

Add a new language

  • Go on “Texts Table” in the bottom tab,
  • Click on the first button of the Texts Table topbar to add a new language
  • In the opened dialog choose which language you want to add.

Note:

  • The default language in each project is English, it will be used if no translation is provided.
  • The language is represented by the ISO code of the country in 2 letters in lower case (ISO 3166-1, alpha-2 notation).

Apply a “text” to a button

  • Go back “Visual Application” in the bottom tab
  • Create on the main screen a “Button” widget next to the first button. In the “properties” view give it a name and choose “new text entry” and type “chgLanguage”.
  • In “Texts Table” set the chgLanguage value to “change\nlanguage”.
  • Right-click on button, then “code”, then “onClick”. We will add a switch between the two languages:
  if (MuiApp.INSTANCE.getLanguage().equals("en"))
    MuiApp.INSTANCE.setLanguage("fr");
  else
    MuiApp.INSTANCE.setLanguage("en");
  • Launch this in the simulator and test it, when you click on the button all texts change to another language. The first button still works and change the message with the right translation.

Note:
The setLanguage method changes the language of all applications on the device.

Step 3 : Manage styles

Change colors

  • In the “Styles Sheet” tab (by default you only have a style sheet called “Default” which is empty):
    • Right-click on the “Default” style sheet, then “Create Style”, then “Style”.
    • Click on the “NewStyle” style and go on the Properties view in the bottom right.
    • Change the style name to RedStyle.
    • Right-click on the “RedStyle” style, then “Create Style”, then “Properties”. This adds a new property: “normal”.
    • Right-click on the “normal” property, then “Add Properties”, then “Background-color”.
      • Click on background-color, and go on the Properties view.
      • Click on value and then on the 3 dots button.
      • Change transparency to 70% and the color to red.

    • Using the same method, create a style in blue called BlueStyle .
  • In “Texts Table” set the value of chgStyle to “change\nstyle”
  • In “Visual Application” tab:
    • Click on the text widget, go to the Properties view in the bottom right, click on style, a combo box appears and then choose RedStyle
    • Create a new button just behind the second button. In the window give it a name and choose “new text entry” and type “chgStyle”.
    • On the button we have created we will manage to change the style of the text widget.
      • Right-click on the button, then “code”, then “onClick”.
      • Use the following code example to change the style (it looks like the change language method)
  if (w_XXXX.getStyleRef().equals(MuiApp.INSTANCE.getStyles().s_RedStyle))
    w_XXXX.setStyle(MuiApp.INSTANCE.getStyles().s_BlueStyle);
  else
    w_XXXX.setStyle(MuiApp.INSTANCE.getStyles().s_RedStyle);
  • Launch this in the simulator and test it, when you click on the button the background color changes.

Add pictures

  • In the “Styles Sheet” tab
    • Create a new style BackgroundStyle
    • Add a “normal” property
    • Right-click on it and “Add Properties”, then “Background-image”.
    • Click on background-image, and go on the Properties view
      • Click on value and on the 3 dots button.
      • In the opened dialog, choose the “screen/background.png” picture
        .
  • In the “Visual Application” tab, set BackgroundStyle style to the main screen.
  • Create a new style named ButtonStyle and set “action/action100x45_up.png” as “Background-image” using the above method.
  • Right-click on properties “normal” and “Add Properties”, then “Border-type”. Leave this value to none in order to hide the button border.
  • Right-click on property “normal” and “Add Properties”, then “Background-color”. Change the transparency value to 0 in order to make the background transparent.
  • Right-click on style “ButtonStyle”, then “Create Style”, then “Properties”. This adds a new property: “normal”; change this properties to “down” in the properties view.
    • Right-click on it and “Add Properties”, then “Background-image”.
    • Click on background-image, and set the picture, type “action/” and choose “action/action100x45_down.png”.
  • Add a “disable” property containing “action/action100x45_dis.png” as “Background-image” using the method above
  • In the “Visual Application” tab
    • Set ButtonStyle to all buttons.
    • Resize the buttons to the picture size using the resize icon on the Visual Application topbar:
  • Launch this in the simulator and see the result.

Note:
Pictures are available in : ...\2.X-project\plugins\com.mdi.project.fw.windows_1.0.0\mdi-framework-2.X\simulator\data\pictures\

Step 4 : Manage screen

  • Add a new screen using the palette
  • Give it a name
    The screen is created just behind the main screen.

  • On the palette, select “one way link”
  • Click on the main screen and on the second screen you created. This will create a link between the 2 screens.

    Note:
    Press ESCAPE to get out of the link mode.

    This link between screens has several advantages :
    • Visually it shows you which screens are linked. It can be very useful to understand the structure and the order of the screens.
    • In terms of code, this creates a shortcut to access the screen.
    • in terms of use, this link enhance the resources preload of linked screens for better performance.

  • Create a new button on the main screen on the bottom right.
  • Right-click on button, then “code”, then “onClick”.
  • Add a switch to another screen using the swichTo() method:
	s_XXXX.switchTo();	

Note:
This shortcut (s_XXXX) exists because you created the one way link.

Let’s make a button on the other screen to go back:

  • Create a new button on the second screen on the bottom left.
  • Open the “onClick” action method in the Java Editor

    The common mistake is to try using the name of the screen you want to go back to, but it is just a ONE WAY link, so it doesn’t work to go backward.
    So here we have 2 solutions :
    1. Create another one way link, in order to make a two way link
    2. Use the screen history system to go back to the previous screen
	returnToPreviousScreen();	

Step 5 : Manage pop-ups

  • Add a new pop-up using the palette.
  • Give your pop-up a name.

Note:

  • All pop-ups are created at the bottom of the visual view.
  • Pop-ups have the same size as a screen.

Most of the time, by “pop-up” we refer to a little box on the screen. But what we call pop-up in Morpheus SDK/ MCT is a representation of the screen when we call it. So by default, if you call it now, it will be just a transparent layer in the foreground.

To create a “normal” pop-up, we need to create a frame which size and position will be the ones of the actual pop-up on the screen.

  • Create a new frame on the pop-up in the centre.
  • Create a new text on top of the frame.
  • Create a new button on the frame.
    • Open the “onClick” action method in the Java Editor
    • Add the following code to close the popup
  closePopup();	

Note:
Because we are inside a pop-up, we can directly call the closePopup() method.

Now we are going to see how to call the pop-up.

  • Create a new button on the second screen.
  • Open the “onClick” action method in the Java Editor
    Now we are going to see how to call the pop-up.

    Note:
    Unlike screens which are automatically created, pop-ups need to be created before calling them.
    To create a pop-up we need to use the static method createPopup() which is generated in Popup_XXXX.java.
  MPopup pop = Popup_XXXX.createPopup(5, 3000); // create a pop-up with priority 5 (between 0 and 10) and a timeout of 3s (-1 for no timeout)

  pop.showPopup();
  • Launch this project on the simulator, you can see that the pop-up is displayed on the screen. If you wait 3 seconds the pop-up is closed automatically and if you click on close the pop-up is closed.

Notes:

  • You can manage the priority of the pop-up at its creation; priority is between 0 an 10 (0 is the lowest and 10 the highest).
  • The createPopup() method returns a generic type of pop-up : MPopup. That means that if you want to change pop-up elements like the message in text box, you need to cast it. You can modify your code as follows :
    ===
    Note that the crestePopup() method returns a generic type of pop-up : MPopup.
    That means that if you want to change pop-up elements like the message in text box, you need to cast it.
    You can modify your code as follows :
  MPopup pop = popup_XXXX.createPopup(5, 3000); // create a pop-up with priority 5 (between 0 and 10) and a timeout of 3s (-1 for no timeout)
  ((popup_XXXX)pop).w_frame.w_text.setText("display a custom message !");
  pop.showPopup();