Tutorial 1: Your first web application

In this first example you will create a Hello World application. To achieve this you will place a textLabel to the screen which shows the value “Hello World”.

Once you start the Formspider IDE, the login screen will show up. The default user “admin” is created with every Formspider Local Installation. Enter admin and the password that you have provided during the installation process, click OK to log in to the Formspider IDE. If you are using Formspider Online, then enter the email and password you provided to create your account to access the Formspider IDE.

Default Username is "admin" in Formspider IDE

Click the “New Application” menu item under “File” menu in the menu bar to create a new application. The “New Application Dialog” will show up.

Creating a new application.

In the “New Application Dialog”, enter helloWorld as the name of your application. If you are using a local installation of Formspider enter a datasource schema name for your application such as “HR” which is a sample Oracle Database schema. Leave the other fields unchanged for now and click OK. If you are using Formpider IDE online, you do not need to specify a datasource schema since a schema is already assigned to you. You can obtain the connection information for this schema under Tools->User Settings.

Filling properties of the new application.

Formspider IDE creates the helloWorld application and then opens it for editing. A quick investigation reveals that Formspider IDE has already created a Mainframe and placed a Panel to its center using borderLayout for your convenience.

Containers Tree in Formspider IDE.

Double click the mainPanel in the “Container Navigation Tree” to open it in the Editor.

XML of the panel in the Editor.

XML of the panel in the Editor.

At this step we need to specify what layout we will use in the Panel. Enter “<xyLayout> </xyLayout>” under the “<panel>” tag to use the XY Layout to place components in this Panel.

XML of the panel after adding XY Layout.

XML of the panel after adding XY Layout.

Next, create a cell tag under the “<xyLayout>” tag which will hold a textLabel component. Give thecell a position on the screen, a width and a height as shown below:

<cell height="20" width="100" x="100" y="100"></cell>

Place a textLabel inside the cell as shown below.

<textLabel label="Hello World"></textLabel>

The final XML should look like this:

<panel>
 <xyLayout>
  <cell height="20" width="100" x="100" y="100">
    <textLabel label="Hello World"/>
  </cell>
  </xyLayout>
</panel>

Click the “Save” button on the left side of the toolbar. You will see a confirmation message under the Editor stating that your changes have been saved.

XML saved successfully.

Run the application by clicking the “Run as a Web Application” button on the toolbar. This will run the helloWorld application in your default browser.

Created Application is running.

  • Literate Aspects

    Excellent, thank you.