Show TOC

Procedure documentationModeling the Currency Converter Application Locate this document in the navigation structure

 

In this section, you create a new model by defining its logic and layout. This component is used to display the conversion rate between two currencies. In the process, you will:

  • Create a new model and save it in the same development component created previously

  • Discover and define a standard Web service

  • Test the data service

  • Deploy and run the model in the Web Dynpro Flex runtime

  • Define the application logic and flow of your model: the input to and the output from the data service

  • Lay out the UI elements of your model

Before You Begin:

To use standard Web services as a source of data in your models, you must first define their destinations in SAP NetWeaver Administrator. For this example, we want to define the destination for a Web service that displays the conversion rate between two selected currencies.

To configure the Web service:

  1. Open NetWeaver Administrator using the following URL:

    http://<machine name with full domain>:<portnumber>/nwa

    This URL is the same as the URL that you used for Visual Composer, with the /VC/default.jsp suffix replaced by nwa.

  2. If a Welcome screen is displayed, enter your user name and password, and click Log On.

  3. Choose   SOA Management   Technical Configuration   Destination Template Management  .

  4. Under Configure Destinations, click New. The New Destination wizard is displayed.

  5. From the Destination Type dropdown list, choose WSDL.

  6. Specify the following settings for the Web service destination:

    • Destination Name: CurrencyConverter

    • URL: http://www.webservicex.net/CurrencyConvertor.asmx?WSDL

  7. Click Next and then Finish.

The Web service can now be accessed in Visual Composer Storyboard, from the Search task panel.

Procedure

  1. Create the model:

    1. Click New (New). The Create New Model dialog box is displayed.

    2. Create a Composite View component named CurrencyConverter.

    3. Select the tutorials development component as the location at which to save the model.

    4. Click OK. The new model is created and another tab is added to Storyboard, with a blank Design board.

  2. Discover and test the data service:

    1. Click the Search button in the task-panel toolbar. The Search task panel is displayed.

    2. From the Search in dropdown list, choose the CurrencyConverter (WebService) service.

      Note Note

      If you configured the service while the model was open, refresh the Search task panel before you perform the search.

      End of the note.
    3. Click Search. The Web service operation that we need – ConversionRate – is displayed in the Results pane (this may take some time).

    4. Drag the service onto the Design board. An icon representing the data service is displayed.

    5. Test the data service as follows:

      Note Note

      This functionality is available only for “flat” (non-complex) data services.

      End of the note.
      1. Right-click the ConversionRate icon and choose Test Data Service from the context menu. The Test Data Service dialog box is displayed.

      2. In the top-left pane, click the Input node. A table of input fields is displayed below.

      3. In the Value column, enter USD for FromCurrency and EUR for ToCurrency.

      4. Click Test. The returned data (the rate for converting US dollars to Euros) is displayed in the main pane of the dialog box.

      5. Click Close.

  3. Model the input and output logic:

    1. To define the input UI element, drag out from the Input port and choose Form View from the context menu.

      You can check the data mapping by right-clicking the submit line between the two elements and choosing Map Data from the context menu. The Map Data dialog box displays the fields required as the input to the data service (Target Field) and the fields from the input element that are mapped to them (Assigned Value).

    2. To define the output UI, repeat the procedure to add a Form View element to the ConversionRateResponse output port of the data service.

    3. Your model should look similar to this:

      Design Board (Design Board)

      Note Note

      When you modify a model, an asterisk (*) is added to the model name in the tab to indicate that changes have been made but have not yet been saved. When you save the model, the asterisk is removed.

      End of the note.
  4. Save your model.

    Notice that the asterisk is removed.

  5. Define the layout of the UI.

    1. Click the Layout button. The UI elements that you defined are displayed, showing each field that was added automatically when you created the input and output forms. In our example, you see the Input form displayed directly above the ConversionRateResponse form.

    2. To change the layout of the application from vertical to horizontal:

      1. Right-click the CurrencyConverter heading (selecting the entire view) and choose Configure from the context menu.

      2. In the Configure task panel, choose Horizontal flow from the Layout dropdown list. The two UI elements are then displayed side-by-side.

      3. Scroll down and then drag up from the selected area and shorten the length of the forms to below the Submit button. You layout should look something like this:

        Initial Layout (Initial Layout)

    3. Revise the UI of the Input form by clicking on it, and performing the following:

      1. In the Title field of the Configure Form View task panel, change the form name to Conversion Details.

      2. On the layout, change the Fromcurrency field label to From currency.

      3. Drag the right border to the left to reduce the width of the field label.

      4. Change the Tocurrency label to To currency and shorten its label as you did in the previous step.

    4. Do the following for the output form:

      1. Change the name of the form to Results (either through the Configure task panel or by using the context menu).

      2. Change the field label to Conversion rate.

      3. Reduce the width of the field.

        The layout should look something like this:

        Final Layout (Final Layout)

  6. Save the model, and then deploy and view the model:

    1. Click the Deploy button in the task-panel toolbar. The Deploy task panel is displayed.

    2. Click Deploy.

    3. In the Flex list, click the CurrencyConverter model to view it. The model is displayed in the Web Dynpro Flex runtime.

    4. In the From Currency field, enter the value USD and in the To Currency field, enter the value EUR. Click Submit. The results should be similar to the following:

      Runtime Application (Runtime Application)

    5. You can return to Storyboard and click the same model in the HTML list to view the model in the Web Dynpro HTML runtime.

Result

You have completed the design of the Currency Converter component. In the next section, Adding a Currency Converter Popup, you will embed this component into the base model, to serve as a popup window.