1. Introduction and Project Creation
2. Importing the Web Service
3. Creating the Web Layer
4. Appendix

Build the User Interface for the Web Service

Controller, Conversation, and Action

Create a Web Controller by highlighting the WeaterProject and clicking the Controller icon in the toolbar. Name it “WeatherController”.

Create a Web Conversation underneath the WeatherController. Name it “ForecastConversation”.

Go to the Variables tab and add the 3 variables below:
» zipCode, Type=Text
» forecastRetObject, Type=ForecastReturn
» SevenDayForecast, Type=Forecast, Collection

Save all artifacts.

Create a Conversation Action by highlighting the ForecastConversation and clicking the Action icon in the toolbar. Name it “getForecast”. Click Finish.

Drop and configure the following 3 modeling steps on the getForecast action design palette:

1. [Start Step] Modify Collection
» General tab > Step Name: Reset Seven Day Forecast Collection
» Modify tab > Collection: Select… SevenDayForecast.
» Modify tab > Operation: Reset radio button

2. Invoke Web Service
» General tab > Step Name: Invoke Get Forecast Web Service
» WebService tab > Operation: Select… GetCityForecastByZIP
» WebService tab > WSDL: http://ws.cdyne.com/WeatherWS/Weather.asmx?wsdl
» Inputs tab > Insert Variable, zipCode
» Outputs tab > Assignment, forecastRetObject

3. Search Collection
» General tab > Step Name: Assign and Sort Collection
» Select Collection Info tab > Source Collection, Select… forecastRetObject.ForecastResult.Forecast
» Select Collection Info tab > Target Variable, Select… SevenDayForecast
» Search Criteria tab > Criteria Type: All radio button
» Sort Fields tab > Add… dbDate, Ascending

Once completed, the getForecast action should look something like the following:

WebContents, JSP, CSS, & AJAX

Web Files Setup

Create the following new web files under the WebContents folder. To expedite the file creation, right-click the WebContents folder, and select the New option.

» HTML: File name “loading.htm”
» JSP: File name “localWeather.jsp”. Ensure to click Next and select the Skyway JSP File (html) JSP Template.
» JSP: File name “forecastDetails.jsp”
» FOLDER: Folder name “css”
» CSS: File name “styles.css”. Place it under the css Folder.

Feel free to create your own styling, or use my favorite evolving stylesheet that you can download. Don’t forget this nice little code snippet to place between the head tags of your JSPs:

<link href="${webContextRoot}/css/styles.css" rel="stylesheet" type="text/css" />

The great thing about adding the CSS link is now you can choose which styles to use on your Skyway Web Controls from a drop down box.

LOADING.HTML
Double-click the loading.html file to edit the contents in the Skyway Page Designer. All that is needed in this page is your favorite animated loading image. Feel free to “borrow” the one I “borrowed” below.

AJAX Loader GIF:

FORECASTDETAILS.JSP
Double-click the forecastDetails.jsp file. The purpose of this JSP is to iterate through the SeventDayForecast collection, and show the weather conditions for the seven days worth of data populated in that collection by the web service. Feel free to experiment with your own layout, or use the following code.

<h3>Your 7 day forecast for
<skyway:label value="${WeatherController.ForecastConversation.forecastRetObject.City}">
</skyway:label>,
<skyway:label value="${WeatherController.ForecastConversation.forecastRetObject.State}">
</skyway:label></h3>
<skyway:layer display="DIV" id="layer_ycqFgQ" cssClass="div-table-row">
<skyway:iterator varStatus="metadata" var="f" step="1"
items="${WeatherController.ForecastConversation.SevenDayForecast}">
<skyway:layer display="DIV" id="layer_b2F6YX" cssClass="div-table-col1">
<skyway:label value="${f.dbDate}" pattern="EE, MMM d"></skyway:label><br>
<img src="images/${f.WeatherID}.gif"/><br>
<skyway:label value="${f.Desciption}"></skyway:label><br>
High: <skyway:label value="${f.Temperatures.DaytimeHigh}"></skyway:label>°<br>
Low: <skyway:label value="${f.Temperatures.MorningLow}"></skyway:label>°<br>
Precipitation: <skyway:label value="${f.ProbabilityOfPrecipiation.Daytime}"></skyway:label>
%</skyway:layer>
</skyway:iterator>
</skyway:layer>

Remember to save often!

If you use the code above or you are doing your own thing and wish to display weather images pertaining to the current condition, then you can download weather icons from the CDYNE wiki.

Once you have the images, you can use the Skyway Label to create the JSP EL syntax needed to display the image, like so:

<img src="images/${f.WeatherID}.gif" alt="" />

LOCALWEATHER.JSP
Double-click the localWeather.jsp file. The purpose of this file is to create a simple form with an ajax call to show the forecast details in the same page. The page contains the following Skyway Web Controls:

1. Skyway Form
» Properties tab > URL Action Mapping: ${webContextRoot}/skyway/internal/bind
The internal/bind action is a Skyway generated internal action that can be used to bind values in form elements to their bound variable. This action is executed automatically for normal form post requests. However, since this will be an AJAX call the bind action does not automatically get executed since there can’t be an assumption that a form is used in AJAX calls. So, since this particular case uses a form, a very simple way to bind the Skyway variable to the input field value is to call the bind action.

2. Skyway Layer, after the Skyway form
» Properties tab > Id: layer_forecast
» Add a   inside the skyway:layer tags

3. Skyway Input Field
» Variable tab > Select… zipCode

4. Skyway Button
» Label tab > Label: Get Forecast
» Properties tab > Button type: Button
» Events tab > Add the onclick Event, and the following 3 actions:
- Submit Form > Form: [choose the form created in step 1]
- Load URL
> Link To: File… loading.html
> Type: AJAX – XHR
> Check Asynchronous
> XHR Target, Element ID: select layer_forecast
- Load URL
> Link To: URL Action Mapping… /getForecast
> Type: AJAX – XHR
> Check Asynchronous
> XHR Target, Element ID: select layer_forecast

The dual Load URL Events, aka Dual Pole Doppler 9000, provide a very simple implementation to present the user a temporary page while a long running transaction occurs in the background. This feature comes in handy especially with web services.

The following code is the completed localWeather.jsp code found between the body tags:

<h1>Local Weather</h1>
<i>Implemented by <a href="http://www.skywayperspectives.org/portal/web/guest/builderee">
Skyway Builder Enterprise Edition</a> using the
<a href="http://wiki.cdyne.com/wiki/index.php?title=CDYNE_Weather">
CDYNE Weather Web Service</a>.</i>
<br><br>
<skyway:form id="form_NPh1kK" name="form_NPh1kK" action="${webContextRoot}/skyway/internal/bind">
Zip Code:
<skyway:input type="text" id="input_NNHdTm" path="WeatherController.ForecastConversation.zipCode">
</skyway:input>
<skyway:button type="button" label="Get Forecast" id="button_RZnIzh"><skyway:event event="onclick">
<skyway:submitform form="form_NPh1kK" element="" />
<skyway:loadurl url="${webContextRoot}/loading.htm" element="layer_forecast" async="true"/>
<skyway:loadurl url="${webContextRoot}/getForecast" async="true" element="layer_forecast"/>
</skyway:event>
</skyway:button>
</skyway:form>
<skyway:layer display="DIV" id="layer_forecast"> </skyway:layer>

Add Controller URL Mapping

The final thing to do in our WeatherProject development is tie the getForecast action to the forecastDetails.jsp. This will let the controller know to show the forecast details page after the action is complete.

To do this, double-click the WeatherController artifact and go to the URL Action Mapping tab. The /getForecast URL should already be there, and all that needs to happen is to click the JSP… button next to the View field and select forecastDetails.jsp.

Save all artifacts, and deploy this project out to your favorite web or app server. (I used Tomcat 6.0). Then use your favorite browser, and paste in the following URL:

http://localhost:8080/WeatherProject/localWeather.jsp

Prev | 1: Intro | 2: Web Service | 3: UI | 4: Appendix | Next