Skyway 6.3 How To: Web Services

Transcription

1 Abstract Skyway 6.3 How To: Web Services Build a web user interface around existing Web Services Dave Meurer <dmeurer@skywaysoftware.com> Copyright 2009 Skyway Software This tutorial details how to generate a fully functional Java Spring MVC Eclipse Dynamic Web project using AJAX around an existing weather forecasting Web Service using Skyway Builder's Model Driven Development (MDD) capabilities. By using Skyway Builder's adaptation and visual Domain Specific Language (DSL) capabilities, a complete Spring MVC web application, including the business logic, will be created in a fraction of the time. Consuming and producing web services in Skyway Builder is an Enterprise Edition (EE) feature. To obtain a test drive of EE, please submit a test drive 1 request. The intended audience for this document are: Developers familiar with web and logic concepts, Developers who need to wrap user interfaces around Web Services, Developers who are interested in the learning about the Java Spring framework, Novice to Experienced Spring developers interested in learning how to dramatically speed up their application development time, and/or Developers interested in a Model Driven Development approach. Table of Contents 1. Prerequisites Overview Create the Skyway and Spring MVC WeatherBot projects Import the Weather Web Service Create the Forecast Controller, Operation, and Action Model the Action business logic Add images, CSS, and HTML loader Create index.jsp Create forecastlist.jsp Complete the Controller Deploy and Run WeatherBot Prerequisites The prerequisites needed to complete this tutorial are: 1 1

2 Skyway 6.3 Enterprise Edition (EE) or later Skyway 6.3 How To: Web Services If a sandbox environment is not setup yet with a server and database, please read the Skyway Builder Sandbox Setup Guide 2. (Database is optional for this tutorial.) Download the Weather Bot icons Overview This tutorial will make use of the free CDYNE Weather 4 Web Service, which provides weather information in the United States by zip code. Please read the notes section on the CDYNE wiki site for information regarding this Web Service. The WSDL for the CDYNE Weather Web Service is If this does not work, please consult the CDYNE wiki site mentioned in the previous paragraph. The finished Weather Bot application will be an AJAX enabled page that allows the user to specify a United States zip code to retrieve the seven day forecast from the CDYNE Weather Web Service. Once the user specifies the zip code and clicks to retrieve the forecast, the page will display an animated icon until the forecast is retrieved and displayed on the same page, all without refreshing the browser. The resulting view will look like the following figure. Figure 1. Weather Bot runtime application view 3. Create the Skyway and Spring MVC WeatherBot projects This section details creating a new Skyway Builder project, which creates both the Spring visual DSL project and the Eclipse Dynamic Web Spring MVC project. The generated Spring MVC skeleton project: 4 2

3 has no tie into the modeling project, contains all the necessary spring libraries, Skyway 6.3 How To: Web Services contains bootstrapped configuration files, and generates a shell WebContents folder with starter jsps and javascript libraries. 1. In the Skyway Builder perspective, instantiate the new Skyway project wizard by one of the following methods: Click the Skyway Project icon on the toolbar, Click File > New > Skyway Project, or Right-click in a blank area in the Project Explorer view, and select New > Project... > Skyway > Skyway Project. 2. In the Create a Skyway Project wizard, type WeatherBot as the Project name. 3. Click Finish. 4. Notice both created projects: WeatherBot (Spring visual DSL project), and WeatherBot-Web (Eclipse Java Dynamic Web project). 5. Expand the WeatherBot Modeling project, and double-click the Spring DSL artifact. Go to the Code Generation tab, and change the Relationship Collection Type to List. Save (Ctrl+S). Changing the collection relationships to List will preserve the sort order of items returned from the weather web service. 4. Import the Weather Web Service 1. In the WeatherBot modeling project, double-click the Spring DSL artifact, and click the Import Web Service link on the right-hand side of the Overview tab. 2. As seen in the figure below, type com.weatherbot.cdyne.service in the Target Package text box, and the following WSDL URL into the WSDL Location text box: Weather.asmx?wsdl 3

4 Figure 2. Import WSDL Document Skyway 6.3 How To: Web Services Click Finish. Note: Compile errors may occur in the WeatherBot-Web project due to Eclipse's WSDL validation using a later version of the mime schema. This error can be ignored and removed by either adding the part attribute, or un-checking the WSDL Validator Build checkbox in Window > Preferences > Validation. More information about this error can be found in Skyway's JIRA: MOD Notice the visual artifacts created in the WeatherBot modeling project as seen in the figure below. All artifacts created reflect the web service's definition in the WSDL. 4

5 Figure 3. Visual artifacts in Spring visual DSL project A few artifacts to point out include: WeatherSoap Skyway Service Three operations under the WeatherSoap Service: GetCityForecastByZip, GetCityWeatherByZip, GetWeatherInformation Empty actions underneath the operations to support Contract First Development, or the ability to stub out the Web Service's operations during development All defined complex types and their relationships as the Skyway Data Types under the package com.cdyne.ws.weatherws Take a moment to get familiarized with the CDYNE Weather Web Service and it's operations. This application will use the GetCityForecastByZip Operation, which uses the Forecast Data Type. Doubleclick both of these artifacts in the Modeling project and take note of inputs, outputs, variables in the operation, and relationships and fields in the Data Type. 5

6 Now take a look at the WSDL document. In the Spring DSL project, open wsdls > com > cdyne > ws > wsdl > asmx > Weather > WeatherWS > WeatherWS.wsld. Notice the operations, complex types and relationships are all consistent with the Skyway Spring visual DSL artifacts. The following consolidated figure of the relationships shows the operation and data types that are used in this tutorial. Figure 4. WSDL GetCityForecastByZip Operation, Types, and relationships 5. Create the Forecast Controller, Operation, and Action In this section, the Controller will be created which is is responsible for receiving requests from a web client and invoking an Operation. For more detailed information regarding Skyway's modeling concepts and MVC concepts, please refer to the Skyway Developer's Guide and Recipes Guide located at the developer site Right-click the WeatherBot Spring DSL artifact and select New > Model Pacakge. 2. Name it com.weatherbot.web 3. Click Finish. 4. Right-click the com.weatherbot.web Model Package and select New > Web Controller

7 5. Name it ForecastController 6. Click Finish. Skyway 6.3 How To: Web Services 7. Right-click ForecastController, and select New > Operation. 8. Name it ListForecast 9. Click Next. 10.In the Operation Options dialog, change the URL to /listforecast.html, and the Action name to listforecastaction 11.Click Finish. 12.In the Project Explorer, double-click ListForecast. Go to the Variables tab. 13.Add the following variable: Table 1. ListForecast Variable Name Type Collection forecastreturn ForecastReturn No 14.Go to the Inputs/Outputs tab, and create the following: Table 2. ListForecast Input Variables Name Type Collection zipcode Text No Table 3. ListForecast Output Variables forecast Name forecastreturn Assignment Note: selecting the assignment in the outputs will automatically fill in the Type and Collection attributes. Figure 5. ListForecast Input/Output tab 15.Save All (Ctrl+Shift+S). 7

8 6. Model the Action business logic In this section, the business logic will be modeled to call the web service and return the forecast data. 1. Double-click listforecastaction under the ListForecast Operation. 2. In the Tool Palette on the right-hand side of the design canvas, open the Services drawer and drag and drop an Invoke Web Service step on the canvas. 3. Double-click the step and configure the properties tab as described in the figure and table below. Table 4. Action Implementation: ListForecast.listForecastAction Step Name Step Type Configuration Invoke Forecast Web Service Properties > WebService > Operation: GetCityForecastByZIP Invoke Web Service Properties > Input > ZIP: zipcode (Note: either type the expression in the text field, or click Edit Expression, and use Ctrl+Space for code completion.) Properties > Output > GetCityForecastByZIPResult: forecastreturn Figure 6. listforecastaction 4. Save. (Ctrl+S) 8

9 7. Add images, CSS, and HTML loader This section begins the view layer development by adding the necessary images, a cascading stylesheet, and an HTML loader page. 1. Expand the WeatherBot-Web project, right-click the WebContent folder, and select New > Folder. Name it images. 2. Add your favorite animation loading image, or download and import the following animation in your WebContent > images folder. AJAX loader 7 3. Unzip the Weather Bot icons into the WebContent/images folder mentioned in the prerequisite section. A total of 28 images should exist in the images folder. 4. Right-click the WebContent folder, and select New > Folder. Name it css. Use either option to create the Cascading Stylesheet: Create your own (Right-click on the css folder, select New > Other > CSS) Complete the Skyway Spring MVC Scaffold Quick start tutorial and copy over the WebContents/css/ styles.css from that project. (Check out the videos and docs on to learn more about scaffolding) Download this one: My Favorite Styles Create the HTML page, by right-clicking the WebContent folder, and select New > HTML. 6. Give it the File Name ajaxloader.html, and click Finish. 7. Add the following HTML image tag to the HTML page in between the body tags. This can be done via the HTML 4.0 Tool Palette, or by copy and pasting the following code: <img src="images/ajax-loader.gif"> 8. Create index.jsp In this section, the index.jsp page will be created giving the user a form to enter the zip code. AJAX will be used to submit the form and retrieve the forecast without refreshing the browser. 1. Right-click the WebContent folder. Select New > JSP. 2. Give it the File Name index.jsp, and click Next. 3. In the Select JSP Template dialog, select Skyway JSP File (html), and click Finish. 4. In the code view, create an HTML link to the CSS stylesheet. Add the following code snippet above the skyway:javascript tags in the head tag. <link href="${pagecontext.request.contextpath}/css/styles.css" rel="stylesheet" type="text/css" /> 5. In the Tool Palette on the right-hand side of the Design View, drag and drop a Skyway Form into the design view area where is states "Drag and drop Web page content here". 6. The Skyway Form Properties tab will open. (If not, double-click the dropped form). Give the form an Id and Form Name of form_zipcode, and select the /listforecast.html URL Mapping. 9

10 7. Back In the Tool Palette, drag and drop a Skyway Layer into the design view after the Skyway form. Give it an id of layer_forecast. 8. Click inside the Skyway Layer on the JSP design view, and type "Enter zip code and select go.". 9. Click inside the Skyway Form on the JSP design view, and type "Zip Code:". 10.For this view, we only need a simple HTML input text field. Go to the code view below the design view and place the cursor after the "Zip Code": text typed in the previous step, and copy and paste the following HTML input control: <input name="zipcode" type="text" size="7"/> 11.Back in the Skyway Tool Palette, drag and drop a Skyway Button after the HTML text box. Configure the Properties tab according to the following: Label > Label: Go Properties > Id: button_forecast Properties > Button Type: Button Events > Add Event: onclick Two commands will now be created to achieve the long running transaction AJAX call. Events > onclick > Add Command: Load URL Events > onclick > Load URL > Link To: File > ajaxloader.html Events > onclick > Load URL > Type: AJAX - XHR Events > onclick > Load URL > XHR Target > Element ID: layer_forecast The Events > onclick > Load URL command should look like the following figure: Figure 7. index.jsp Button Load URL command A second command needs to be added to call the Controller Operation Action that contains the call to the web service. The Submit Form command uses Skyway's javascript library that calls the prototype.js javascript library to submit the form without refreshing the browser. The current version of the Submit Form command property page defaults the form submission to synchronous and does not provide a visual way to configure the call to asynchronous. However, the underlying Skyway javascript function does support submitting the form asynchronously. Therefore, the Custom Script command can be used to call the Skyway Submit Form function with the asynchronous parameter set to true. The call needs to be asynchronous to prevent the browser 10

11 from blocking other requests if a long running transaction occurs, as in the case with some web service calls. Add the Custom Script command through Events > onclick > Add Command: Custom Script Highlight the Custom Script command, and copy and paste the following function call: Skyway.submitForm('form_zipcode', true, 'layer_forecast', null, null); Figure 8. index.jsp design view Figure 9. index.jsp - body contents <skyway:form id="form_zipcode" name="form_zipcode" action="${pagecontext.request.contextpath}/listforecast.html"> Zip Code: <input name="zipcode" type="text" size="7"/> <skyway:button type="button" label="go" id="button_forecast"> <skyway:event event="onclick"> <skyway:loadurl target="_self" ajax="true" ajaxtype="element" url="${pagecontext.request.contextpath}/ajaxloader.html" element="layer_forecast"/> <skyway:script> <![CDATA[Skyway.submitForm('form_zipcode',true, 'layer_forecast', null, null);]]> </skyway:script> </skyway:event> </skyway:button> </skyway:form> <skyway:layer display="div" id="layer_forecast"> Enter zip code and select go. </skyway:layer> 9. Create forecastlist.jsp In this section, the forecastlist.jsp page will be created, which presents the forecast results from the web service. 1. Right-click the WebContent > WEB-INF folder, and select New > Folder. Name it forecast 2. Right-click the forecast folder, and select New > JSP. Name it forecastlist.jsp, and click Next. 3. In the Select JSP Template dialog, select Skyway JSP File (html), and click Finish. 4. Drag and drop a Skyway Label from the Tool Palette into the design view. 5. In the Properties tab of the Skyway Label, select ForecastController > ListForecast > forecast > City for the Variable Path as seen in the figure below. 11

12 Figure 10. forecastlist.jsp Skyway Label Variable Path selection Click OK. 6. After the City Skyway Label, type in a comma and space. 7. Drag and drop another Skyway Label from the Tool Palette after the comma/space, and point this one to ForecastController > ListForecast > forecast > State. 8. Add a carriage return after the State Label by typing Enter. 9. Drag and drop a Skyway Layer from the Tool Palette in the new line under the City and State labels. Give it an id of layer_container. In the Style tab, type div-container for the CSS Class. The CSS Class drop down works when the stylesheet is defined in the JSP page through the link element. Since this page is being pushed into the index.jsp page via the form AJAX call, it will inherit the stylesheet defined from the index.jsp page. 10.From the Skyway Tools Palette, drag a Skyway Iterator web control in the layer_conatiner Layer. Choose ForecastController > ListForecast > forecast > ForecastResult > Forecast for the Collection value in the Properties tab. 11.Drag and drop a second Skyway Layer from the Tool Palette in the Iterator. Notice the control understands it is contained in an iterator and adds the ${metadata.index} variable to the id to distinguish it from other Layers in the Iteration. Rename the auto generated Id text to layer_day ${metadata.index}. 12.In the Properties > Style tab, give it a CSS Class of div-cell. 12

13 13.Drag and drop a Skyway Label in the layer_day${metadata.index} Layer. Choose current.dbdate for the Variable Path. Feel free to choose or type any date format you prefer in the Format text field. 14.Add a carriage return after the label, and drag and drop a Skyway Image in the new line. 15.Copy and paste or type the following into the Image URL field in the Properties > Properties tab: images/${current.weatherid}.gif 16.Add a carriage return after the image, and type the text "High:" in the design view. 17.Drag and drop a Skyway Label after the "High:" text.choose current.temperatures.daytimehigh for the Variable Path. 18.Add the degrees symbol after the DaytimeHigh Label by copying and pasting the HTML special character in the code view. 19.Add a carriage return after the degrees symbol, and type the text "Low:" in the design view. 20.Drag and drop a Skyway Label after the "Low:" text.choose current.temperatures.morninglow for the Variable Path. 21.Add the degrees symbol after the MorningLow Label by copying and pasting the HTML special character in the code view. 22.Save All. Figure 11. forecastlist.jsp design view 13

14 Figure 12. forecastlist.jsp - body contents <skyway:label designpath="weatherbot.forecastcontroller.listforecast" value="${forecast.city}"> </skyway:label>, <skyway:label designpath="weatherbot.forecastcontroller.listforecast" value="${forecast.state}"> </skyway:label> <br> <skyway:layer display="div" id="layer_container" cssclass="div-container"> <skyway:iterator varstatus="metadata" var="current" step="1" designpath="weatherbot.forecastcontroller.listforecast" items="${sortedforecast}"> <skyway:layer display="div" id="layer_day${metadata.index}" cssclass="div-cell"> <skyway:label designpath="weatherbot.forecastcontroller.listforecast" value="${current.dbdate}" pattern="eeee, MMMM d"></skyway:label> <br> <skyway:image version="1" urltype="url" id="image_kzundg${metadata.index}" src="images/${current.weatherid}.gif"></skyway:image> <br> High: <skyway:label designpath="weatherbot.forecastcontroller.listforecast" value="${current.temperatures.daytimehigh}"></skyway:label> <br> Low: <skyway:label designpath="weatherbot.forecastcontroller.listforecast" value="${current.temperatures.morninglow}"></skyway:label> </skyway:layer> </skyway:iterator> </skyway:layer> 10. Complete the Controller Before this application can be deployed and ran, the /listforecast.html URL mapping needs to be set. 1. Double click ForecastController, and highlight /listforecast.html 2. Type or select the /WEB-INF/forecast/forecastList.jsp JSP in the View field. 3. Save the Controller. 11. Deploy and Run WeatherBot 1. Right-click the installed Tomcat server (refer to the sandbox tutorial in prerequisites), and choose Add and Remove Projects Add the WeatherBot-Web project to Tomcat. 3. Start Tomcat. (It may be necessary to Clean the server or project if it doesn't deploy or run properly the first time) 4. Right-click the WeatherBot-Web project in the Skyway Navigator, select Run As... > Run On Server. Click Finish. 5. The Zip Code text field should be shown. Enter in the text field, and click Go. Try other US zip codes. Note: the CDYNE web service doesn't always have the latest data. 14