Tutorial 13 : Internationalization with Formspider

This tutorial explains how to create a multi-lingual application. To achieve this you will place a textLabel which shows the multi-lingual message and a menu which changes the language. The application will present a message on the screen and a menu which changes the language to display the same message in different languages.

You may click here to run the completed application.

Open Formspider IDE and create a new Formspider Application named MultilingualMsg. If you are using Formspider Local Installation, use the HR schema as the Datasource Schema. Click OK. If you are using Formspider Online, then you already have a schema assigned to your account. You can connect to this schema by using the connection information under Tools>User Settings in the IDE Menu.

Creating MultilingualMsg Application

Creating MultilingualMsg Application

Formspider IDE creates and opens the MultilingualMsg application for editing.

The User Interface

At this step, you will create the necessary UI components for your application; a menu and a textLabel.

Open the “Miscellaneous” section and double click “Languages” under Internationalization to open the Languages dialog.

Double click Languages

Double click Languages

On the Languages dialog, click the “+” button to create a new language. Enter “English” as the language name, “En” as the language code and “en” as the local code. Then click the “+” button again to create a second language. Enter “German” as the language name, “Ge” as the language code and “ge” as the local code. Select “English” language as default and click OK.

Creating new Languages

Creating new Languages

Double click “Multilingual Keys” under Internationalization to open the Multilingual Keys dialog. Select English in the Language combo box and click the “+” button to create a multilingual key for your text message which will be displayed on the screen when you run the application. Enter “helloworld” as the key and “Hello World” as the value for the language English.

Hello World value in English

Hello World value in English

Then select German in Language combo box, you will see “helloworld” key without any value in value field. Enter “Hallo Welt” as the value for the language German. Then click OK.

Hello World value in German

Hello World value in German

Double click the mainPanel in the “Container Navigation Tree” to open it in the Editor. Use the XML below as your panel XML.

<panel>
    <xyLayout>
      <cell width="150" height="25" x="50" y="50">
        <button label="Display in English"></button>
      </cell>
      <cell width="150" height="25" x="250" y="50">
        <button label="Display in German"></button>
      </cell>
      <cell width="300" x="200" y="150" >
        <textLabel label="#{lang.helloworld}"/>
      </cell>
    </xyLayout>
  </panel>

The key point in panel XML is the value of the “Label” attribute of the textLabel component. Instead of a static value, there is a special syntax which includes your “key”(helloworld) of the multilingual text.

Click “Save” to commit your changes.

The Code

Connect to the datasource schema which you enter in New Application Create dialog in your favorite PL/SQL Editor. Create a package called “MULTILINGUAL_PKG” with a procedures named “changeLanguageToEnglish” and “changeLanguageToGerman”. In the procedures, change the language of the application.

CREATE OR REPLACE
PACKAGE multilingual_pkg IS
  procedure changeLanguageToEnglish;
  procedure changeLanguageToGerman;
END;

CREATE OR REPLACE
PACKAGE BODY multilingual_pkg IS
procedure changeLanguageToEnglish is
begin
  api_application.setlanguage('En', 'en');
end;
procedure changeLanguageToGerman is
begin
  api_application.setlanguage('Ge', 'ge');
end;
END;

In Formspider IDE expand the Actions accordion, select the Actions node, click the “+” button to create a new Action. Alternatively you may right click the Actions node and select “New” from the pop-up menu. The “New Action Dialog” will show up. Enter “setEnglish” as the action name and “multilingual_pkg.changeLanguageToEnglish” as the procedure. Click OK to save your action. Then click the “+” button to create the second Action. Enter “setGerman” as the action name and “multilingual_pkg.changeLanguageToGerman” as the procedure. Click OK to save your action.

Creating a new Action

Creating a new Action

Double-click and open the “mainPanel” in the Editor. First add a buttonPress event to the “Display in English” button and call the “setEnglish” action. Then add a buttonPress event to the “Display in German” button and call the “setGerman” action.

<panel>
  <xyLayout>
    <cell x="50" y="50" width="150" height="25">
      <button label="Display in English">
        <events>
          <buttonPress action="setEnglish"/>
        </events>
      </button>
    </cell>
    <cell x="250" y="50" width="150" height="25">
      <button label="Display in German">
        <events>
          <buttonPress action="setGerman"/>
        </events>
      </button>
    </cell>
    <cell x="200" y="150" width="300">
      <textLabel label="#{lang.helloworld}"/>
    </cell>
  </xyLayout>
</panel>

Click Save to commit your changes.

Run the application by clicking the “Run as a Web Application” button on the toolbar. Note that the application displays the message in English which was selected as the default language. Use the “Display in German” button to display the message in German and use the “Display in English” button to display the message in English.

You may click here to run the application.

Message in German language

Message in German language

Message in English language

Message in English language

  • Marko P.

    Hi.
    I have some problems with internationalization.
    1. I am defined security repository and assign it to my application. When I begin to create internationalization FS remove the security repository from my application. In this case I need to again assign security repository to my app. If it should be then OK.
    2. In internationalization I can’t add more then 20 words. I founded way to display it on second page when click search button, but at that moment I can’t change key

    • http://www.gerger.co Yalim K. Gerger

      Hi Marko,

      Regarding issue 1:

      This is a bug in FS 1.8. We fixed this bug in FS 1.9 which is available for download now. :-)

      Regarding issue 2:

      The multilingual dialog does not indeed work very nicely to enter a lot of keys. We are going to redesign it in one of out future releases. What we noticed is that most customers who enter a lot of multilingual data prefer to do it using our internal API’s. We’ve actually got new internal API’s that makes this even easier.

      For example, you can write your keys in the following format: