Define the User Interface

Now create a web application and design its page by adding fields that will display the weather information. Also, create variables to store information and then map them to fields.

Visual Builder provides a simple visual development tool that lets you drag and drop components to pages.

Create a Web Application

1. On the Welcome page of your application, click Web Apps.

   This displays the Web Apps button in the Web Apps pane.

2. Click the Web Application button.

3. In the Create Web Application dialog, in the Id field, enter WeatherWeb and click Create.

   This displays the main-start page of your web application.

Define the Fields

Your application will comprise various fields to display weather information, and a button to invoke the integration. So, add Input Text elements and the button to the main-start page.

1. Add a field named Location.

   1. From the Field section in Component Palette, drag Input Text to the canvas.

   2. Click the Input Text label on the canvas.

   3. Click Expand Property Inspector to display the Property Inspector pane.

   4. In the Label pane in Property Inspector, in the Text field, enter Location.

   5. Select the Show Required check box to mark the Location field as mandatory.

      
      Description of the illustration application_page.png

2. Add the Get Weather Information button that will be used to invoke the integration.

   1. From the Common section in Component Palette, drag Button to the canvas.

   2. In the Button pane in Property Inspector, in the Text field, enter Get Weather Information.

3. From the Layout section in Component Palette, drag Horizontal Rule to the canvas to divide the page.

4. Next, add all the input fields listed in the table.

   To add a field, drag the Input Text component to the canvas and select Readonly in the Input Text pane in Property Inspector. Then, select the Input Text label on the canvas and enter the label in the Text field in the Label pane in Property Inspector.

   Component in Component Palette	Label in Property Inspector	Input Text Property in Property Inspector
   Input Text	Local Time	Readonly
   Input Text	Temp F	Readonly
   Input Text	Temp C	Readonly
   Input Text	Weather Description	Readonly
   Input Text	Wind Speed Miles	Readonly
   Input Text	Wind Speed km	Readonly
   Input Text	Wind Direction	Readonly
   Input Text	Humidity	Readonly
   Input Text	Precipitation MM	Readonly

   Your page would like the following sample page.

   
   Description of the illustration application_design.png

Define the Variables

Now, corresponding to each component you added, add variables to store weather information.

1. On the main-start page, click Variables .

   
   Description of the illustration vb_variables.png

2. Click the +Variable button.

3. In the New Variable dialog, select the Create Another check box.

4. In the Id field, enter the name of the variable and click Create. By default, the variable type String is selected.

   Create the following variables:

   • humidity

   • localTime

   • location

   • precipitationMM

   • tempC

   • tempF

   • weatherDescription

   • windDirection

   • windSpeedKm

   • windSpeedMiles

5. When you are done, click Cancel in the New Variable dialog to close the dialog.

   The newly created variables are listed on your application page.

   
   Description of the illustration vb_variables_list.png

Map Fields to Variables

Next, bind each field to the corresponding variable.

1. Click Designer to go back to the canvas.

2. Map the Location field to the location variable:

   1. Click the Location field on the canvas. Ensure that you click the input text and not the label of the Location field.

   2. In the Input Text pane, click the Data tab.

   3. Move the mouse pointer to the Value box. This displays the Variables icon. Click Variables .

      The list of variables is displayed.

   4. From the Variables list, select the location variable to bind it to the Location input text field.

      
      Description of the illustration vb_variables_mapping.png

3. Similarly, bind the following fields to the corresponding variables. Ensure that you select the Input Text, and not Label of a field.

   Field	Variable
   Local Time	localTime
   Temp F	tempF
   Temp C	tempC
   Weather Description	weatherDescription
   Wind Speed Miles	windSpeedMiles
   Wind Speed km	windSpeedKm
   Wind Direction	windDirection
   Humidity	humidity
   Precipitation MM	precipitationMM