introduction to skyway builder tutorial · 2011. 11. 8. · 1 chapter 1. introduction welcome to...

57
Introduction to Skyway Builder Tutorial September 11, 2008 Skyway Software

Upload: others

Post on 01-Oct-2020

5 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Introduction to Skyway Builder Tutorial · 2011. 11. 8. · 1 Chapter 1. Introduction Welcome to the Introduction to Skyway Builder tutorial. This document is a step-by-step guide

Introduction to Skyway Builder Tutorial

September 11, 2008

Skyway Software

Page 2: Introduction to Skyway Builder Tutorial · 2011. 11. 8. · 1 Chapter 1. Introduction Welcome to the Introduction to Skyway Builder tutorial. This document is a step-by-step guide

Introduction to Skyway Builder Tutorial: September 11, 2008Skyway Software

PublishedCopyright © 2008 Skyway Software

Abstract

This document is a step-by-step guide on how to develop a web application from scratch using Skyway Builder.This tutorial is the first tutorial in a series of tutorials that are available from the Skyway Community Portal [http://www.skywayperspectives.org].

Page 3: Introduction to Skyway Builder Tutorial · 2011. 11. 8. · 1 Chapter 1. Introduction Welcome to the Introduction to Skyway Builder tutorial. This document is a step-by-step guide
Page 4: Introduction to Skyway Builder Tutorial · 2011. 11. 8. · 1 Chapter 1. Introduction Welcome to the Introduction to Skyway Builder tutorial. This document is a step-by-step guide

iv

Table of Contents1. Introduction ................................................................................................................... 1

1. What's Covered ...................................................................................................... 12. Suggested Audience ................................................................................................ 13. Prerequisite Software ............................................................................................... 14. What are we going to build? ..................................................................................... 1

4.1. User Story ................................................................................................... 15. Support ................................................................................................................. 26. Skyway Development Artifacts ................................................................................. 27. Application Layers .................................................................................................. 38. Implementation Overview ......................................................................................... 39. Development Process ............................................................................................... 5

9.1. Development Steps ....................................................................................... 52. Skyway Project .............................................................................................................. 7

1. TASK: Create Skyway Project for PAM .................................................................... 71.1. TASK: Define Project Variables ..................................................................... 8

3. Data Layer ................................................................................................................... 101. Model ................................................................................................................. 10

1.1. TASK: Add AppraisalService to Project ........................................................ 101.2. TASK: Add Appraisal Data Type ................................................................. 11

2. Persistence ........................................................................................................... 132.1. TASK: Add AppraisalDS Data Store ............................................................. 13

4. Service Layer ............................................................................................................... 171. Model ................................................................................................................. 17

1.1. TASK: Add SaveAppraisal Operation ........................................................... 171.2. TASK: Define Operation Input and Output Variables ..................................... 191.3. TASK: Create Save Action ........................................................................... 20

5. Web Layer ................................................................................................................... 241. Web View Mappings ............................................................................................. 24

1.1. TASK: Create index.jsp Page ....................................................................... 241.2. TASK: Create edit.jsp Page ......................................................................... 261.3. TASK: Create confirm.jsp Page .................................................................... 261.4. TASK: Define page aliases ........................................................................... 26

2. Controller ............................................................................................................ 272.1. TASK: Add PAMController Web Controller .................................................. 272.2. TASK: Add the PerformanceMgmt Web Conversation ..................................... 282.3. TASK: Define Web Conversation Variables .................................................... 292.4. TASK: Add the InitConversation Action ....................................................... 302.5. TASK: Add the InitNewAppraisal Action ...................................................... 332.6. TASK: Add the ValidateAppraisal Action ..................................................... 352.7. TASK: Add the SaveAppraisal Action ........................................................... 37

3. View - JSP Pages .................................................................................................. 393.1. TASK: Implement index.jsp Page ................................................................. 393.2. TASK: Implement edit.jsp Page .................................................................... 413.3. TASK: Implement confirm.jsp Page .............................................................. 433.4. TASK: Configure URL Action Mappings ...................................................... 45

6. Deployment .................................................................................................................. 481. Configure Database ............................................................................................... 48

1.1. Add Data Source ........................................................................................ 481.2. Configure Data Store in Project ..................................................................... 48

2. Configure Server ................................................................................................... 482.1. Add Server ................................................................................................ 48

Page 5: Introduction to Skyway Builder Tutorial · 2011. 11. 8. · 1 Chapter 1. Introduction Welcome to the Introduction to Skyway Builder tutorial. This document is a step-by-step guide

Introduction to SkywayBuilder Tutorial

v

2.2. Add PAM Project to Server .......................................................................... 483. Run Application .................................................................................................... 48

3.1. Start Server ............................................................................................... 483.2. Run Application ......................................................................................... 49

Page 6: Introduction to Skyway Builder Tutorial · 2011. 11. 8. · 1 Chapter 1. Introduction Welcome to the Introduction to Skyway Builder tutorial. This document is a step-by-step guide

vi

List of Figures1.1. Project Meta-Data Model ............................................................................................... 21.2. End-User View of Application ........................................................................................ 31.3. Developer View of Application ....................................................................................... 42.1. New --> Project ........................................................................................................... 72.2. Wizard: Create a Skyway Project - Skyway Project ............................................................ 82.3. Wizard: Create a Skyway Project - Folder Names .............................................................. 82.4. Editor: Project Editor - Variables .................................................................................... 93.1. New --> Service ......................................................................................................... 103.2. Wizard: New Skyway Service ....................................................................................... 113.3. New --> Data Type ..................................................................................................... 113.4. Wizard: New Data Type .............................................................................................. 123.5. Editor: Data Type Editor - Overview .............................................................................. 123.6. Data Type: Appraisal Fields ......................................................................................... 133.7. Wizard: New Data Store .............................................................................................. 143.8. Wizard: New Data Store - Add Data Types ..................................................................... 143.9. Wizard: New Data Store - Managed Data Types ............................................................... 153.10. Editor: Data Store Editor - Overview ............................................................................ 153.11. Editor: Data Store Editor - Database Configuration ......................................................... 164.1. Wizard: New Operation - Name .................................................................................... 184.2. Wizard: New Operation - Entry Point Action ................................................................... 184.3. Editor: Operation Editor - Overview .............................................................................. 194.4. Select Type ............................................................................................................... 204.5. Editor: Operation Editor - Inputs/Outputs ........................................................................ 204.6. Open Action Editor ..................................................................................................... 214.7. Step Palette ............................................................................................................... 214.8. Operation Action: Save ................................................................................................ 224.9. Properties: Modify Data Store Step - Modify ................................................................... 235.1. Wizard: New JavaServer Page - Name ........................................................................... 255.2. Wizard: New JavaServer Page - Template ....................................................................... 265.3. View Mappings .......................................................................................................... 275.4. Wizard: New Web Controller ....................................................................................... 275.5. Developer View of Application - Web Conversation ......................................................... 285.6. Wizard: New Web Conversation .................................................................................... 285.7. Editor: Web Conversation Editor ................................................................................... 295.8. Editor: Web Conversation Editor - Variables ................................................................... 305.9. Developer View of Application - InitConversation ............................................................ 305.10. Wizard: New Action - Name ....................................................................................... 315.11. Wizard: New Action - URL Action Mapping ................................................................. 315.12. Conversation Action: InitConversation .......................................................................... 325.13. Properties: Search Data Store - Select Data Store Info ...................................................... 335.14. Properties: Search Data Store - Search Criteria ............................................................... 335.15. Developer View of Application - InitNewAppraisal ......................................................... 335.16. Conversation Action: InitNewAppraisal ......................................................................... 345.17. Developer View of Application - ValidateAppraisal ........................................................ 355.18. Conversation Action: ValidateAppraisal ........................................................................ 355.19. Properties: Decision Step - Decision Criteria .................................................................. 365.20. Properties: Variable Editor - Variable Editor .................................................................. 375.21. Properties: Variable Editor - Variable Editor .................................................................. 375.22. Developer View of Application - SaveAppraisal ............................................................. 375.23. Conversation Action: SaveAppraisal ............................................................................. 385.24. index.jsp - runtime view ............................................................................................. 40

Page 7: Introduction to Skyway Builder Tutorial · 2011. 11. 8. · 1 Chapter 1. Introduction Welcome to the Introduction to Skyway Builder tutorial. This document is a step-by-step guide

Introduction to SkywayBuilder Tutorial

vii

5.25. index.jsp - full listing ................................................................................................ 415.26. edit.jsp - runtime view ............................................................................................... 415.27. edit.jsp - full listing ................................................................................................... 435.28. confirm.jsp - runtime view .......................................................................................... 445.29. confirm.jsp - full listing ............................................................................................. 455.30. URL Action Mapping ................................................................................................ 465.31. URL Action Mapping ................................................................................................ 47

Page 8: Introduction to Skyway Builder Tutorial · 2011. 11. 8. · 1 Chapter 1. Introduction Welcome to the Introduction to Skyway Builder tutorial. This document is a step-by-step guide

viii

List of Tables2.1. Project Wizard Configuration ......................................................................................... 82.2. Project Variables: PAM ................................................................................................. 93.1. Data Type: Appraisal Fields ......................................................................................... 134.1. Operation Wizard Configuration: SaveAppraisal .............................................................. 174.2. Operation Inputs: SaveAppraisal ................................................................................... 204.3. Action Implementation: Save Action ............................................................................. 225.1. Conversation Variables: PerformanceMgmt ..................................................................... 295.2. Action Implementation: InitConversation Action ............................................................. 325.3. Action Implementation: InitNewAppraisal Action ............................................................ 345.4. Action Implementation: ValidateAppraisal Action ............................................................ 365.5. Action Implementation: SaveAppraisal Action ................................................................ 395.6. Action Implementation: ValidateAppraisal Action ............................................................ 47

Page 9: Introduction to Skyway Builder Tutorial · 2011. 11. 8. · 1 Chapter 1. Introduction Welcome to the Introduction to Skyway Builder tutorial. This document is a step-by-step guide

1

Chapter 1. IntroductionWelcome to the Introduction to Skyway Builder tutorial. This document is a step-by-step guide on howto develop a web application from scratch using Skyway Builder. This tutorial is the first tutorial in aseries of tutorials.

1. What's CoveredThis tutorial will introduce new users to application development using Skyway Builder through thedevelopment and deployment of a simple web application.

2. Suggested AudienceThis tutorial is intended for developers with familiarity with Java-based web development and Eclipse. Itis assumed that the developer has basic experience with running a JEE Application Server and a databasemanagement system.

3. Prerequisite SoftwareThe prerequisites completing this tutorial are

• Skyway Builder 6.0 Community Edition or Skyway 6.0 Enterprise Edition

• Java Application Server: Apache Tomcat 6.0

• Database Management System (DBMS): Postgres 8.1 -or- MySQL 5.1 Database

The setup of the application server and database management system is beyond the scope of this tutorial.If you need assistance setting up a sandbox which includes Tomcat and MySQL, please see refer to theSkyway Builder Sandbox Setup guide or Video Tutorial that can found in the Resources section of theSkyway Community Portal [http://www.skywayperspectives.org].

4. What are we going to build?The goal of this tutorial is to provide a step-by-step example of building a web application using SkywayBuilder. Skyway Builder CE is a subset of the development functionality, and this tutorial isn't making useof any of the additional Skyway Builder EE features. So this tutorial is applicable to all versions of SkywayBuilder (CE and EE). While it is intentionally limited in scope, it introduces new users to applicationdevelopment using Skyway Builder.

The web application that will be implemented is a tool for managing the performance reviews of teammembers, and the application is called Performance Appraisal Management (PAM).

4.1. User StoryHere's a description of the requirements of PAM using user stories:

User Stories

• Reviewer can list all performance appraisals.

• Reviewer can add a performance appraisal.

Page 10: Introduction to Skyway Builder Tutorial · 2011. 11. 8. · 1 Chapter 1. Introduction Welcome to the Introduction to Skyway Builder tutorial. This document is a step-by-step guide

Introduction

2

• An appraisal has employee first name, last name, and employee number.

• An appraisal covers three topics: design, programming, testing.

• A optional comment can be included for each appraisal.

• There are three appraisal ratings: 3-does not meet expectations, 2-meets expectations, 1-exceedsexpectations.

5. SupportIf you need help, there is a forum on the Skyway Community portal dedicated to the Skyway Tutorials[http://www.skywayperspectives.org/portal/web/guest/174/message_boards/category/10960].

6. Skyway Development ArtifactsApplication development using Skyway Builder is accomplished by using (assembling and configuring)graphical development artifacts:

Figure 1.1. Project Meta-Data Model

Summary of Skyway Development Artifacts

• Projects are the top level artifact within the developer's workspace. All other objects must be madewithin projects but can access objects within and across project boundaries.

• Data Types are used to define the domain model. Developers can specify standard primitive types forthe fields within a Data Type and can also specify relationships to other Data Types and their cardinality.

Page 11: Introduction to Skyway Builder Tutorial · 2011. 11. 8. · 1 Chapter 1. Introduction Welcome to the Introduction to Skyway Builder tutorial. This document is a step-by-step guide

Introduction

3

• Data Stores are abstract representations of real databases that are used in the modelling environmentwhen persistence is needed. During deployment Data Stores are bound to a real, physical implementationof a database.

• Services are used to implement the Service layer of an application.

• Operations are discrete application functions defined in a Service.

• Actions are the model-based implementation of application. Actions are created by sequencing Stepstogether.

• Web Controllers are used to implement the Web layer of an application, and they have one or moreConversations.

• Web Conversations are task-based groupings of logic for handling user event. Conversations areimplemented using Actions.

• Views are Java Server Pages (JSP) that implement the Presentation layer.

• Exceptions are definitions of certain types of errors that the developer may want to surface as the modelsbecome code and are executed.

7. Application LayersThis application will implemented in three layers:

The web layer (also referred to as the UI layer) is primarily concerned with presenting the user interfaceand handling user interactions/events. The Skyway artifacts for implementing the web layer are the WebController, Web Conversation, Action, Steps and JSP pages.

The service layer (also referred to as the logic layer or business layer) represents the core functionalityof the application being built. The Skyway artifacts for implementing the service layer are the Service,Operation, Action, and Steps.

The data layer (also referred to as the persistence layer or domain object layer) is represented by a domainmodel; a distinct set of inter-related application objects that embody the functionality and characteristicsof the system being built. This layer also encompasses the persistence of the domain model to and from adatabase. The Skyway artifacts for implementing the data layer are the Data Type and Data Store artifacts.

8. Implementation OverviewFigure 1.2. End-User View of Application

Page 12: Introduction to Skyway Builder Tutorial · 2011. 11. 8. · 1 Chapter 1. Introduction Welcome to the Introduction to Skyway Builder tutorial. This document is a step-by-step guide

Introduction

4

End-User View of Application

• Step 1: End-user goes to index.jsp, the starting page of the application. From here the user will see alist of performance appraisals in the database. There is also a "New Appraisal" hyperlink that the usercan click on to start the new appraisal process.

• Step 2: Clicking on the "New Appraisal" hyperlink loads edit.jsp, the appraisal entry form. The end-user enters all the data, and clicks the "Next" button.

• Step 3: After clicking on the "Next" button, then appraisal will be validated on the server. If the appraisalpasses validation, the confirm.jsp page will load. If the appraisal doesn't pass validation, the edit.jspwill be reloaded.

• Step 4: From the confirm.jsp page, the end-user will confirm that the appraisal should be submittedto PAM system.

• Step 5: Upon a successfull save, the user will be returned to the index.jsp page.

Figure 1.3. Developer View of Application

Developer View of Application using Skyway Builder

• Step 1: Prior to the page rendering, there is some data loading and variable housecleaning (clearing data)that needs to occur. This is implemented in the InitConversation action. The URL Action Mapping(UAM) is configured to fire the InitConversation action prior to the /home page (index.jsp) page beingrendered.

• Step 2: The "New Appraisal" hyperlink on the index.jsp page is configured with a URL that is mappedby the UAM to call the InitNewAppraisal action. This action will initialize variables, and uponcompletion the UAM will defer to the /edit page (edit.jsp) to render the view (or response).

• Step 3: The end-user will press the "Next" button when finished filling in the appraisal form. The "Next"button is configured with a URL that is mapped by the UAM to call the ValidateAppraisal action. Thisaction will verify that all the required appraisal details were specified by the end-user. This action cango to one of two pages based on the result of the validation logic. This is accomplished with a projectvariable that the UAM uses to determine the view. If the appraisal passes validation, the action will setthe project variable to /confirm page (confirm.jsp). If the appraisal doesn't pass validation, the actionwill set the project variable to the /edit page (edit.jsp).

• Step 4: The "Confirm" button on the confirm.jsp page is configured with a URL that is mapped bythe UAM to call the SaveAppraisal action. This action will call the SaveAppraisal operation (whichwill persist the appraisal).

Page 13: Introduction to Skyway Builder Tutorial · 2011. 11. 8. · 1 Chapter 1. Introduction Welcome to the Introduction to Skyway Builder tutorial. This document is a step-by-step guide

Introduction

5

• Step 5: Upon completion the UAM will reload the /home page (index.jsp).

Use the following Skyway Navigator screenshot as a guideline for implementing the project

9. Development Process

9.1. Development StepsApplication development with Skyway Builder generally consists of five steps, and the tutorial is structuredaccording to these steps.

High-level Development Steps Defined

• Project - create a project

• Data Layer - define the data layer

• Services Layer - define the service layer

• Web Layer - define the web layer

Page 14: Introduction to Skyway Builder Tutorial · 2011. 11. 8. · 1 Chapter 1. Introduction Welcome to the Introduction to Skyway Builder tutorial. This document is a step-by-step guide

Introduction

6

• Deploy - deploy the project

Please refer to the Skyway Builder Developer Guide [http://www.skywayperspectives.org/portal/web/guest/documentation] for a more detailed explanation of these development steps.

Page 15: Introduction to Skyway Builder Tutorial · 2011. 11. 8. · 1 Chapter 1. Introduction Welcome to the Introduction to Skyway Builder tutorial. This document is a step-by-step guide

7

Chapter 2. Skyway Project

This chapter will outline the steps for creating the PAM project.

1. TASK: Create Skyway Project for PAMProjects are the top level development artifact within Skyway Builder. All other Skyway artifacts mustreside inside a project. In many cases (as is the case with PAM) a web application is implemented as asingle project, with the project containing any and all artifacts needed to provide its functionality. Since aproject can reference development artifacts in other projects, there are cases where an application consistsof multiple projects.

Steps:

1. Right click in Skyway Navigator, and select New-->Project

2. From the New Project Wizard, pick "Skyway Project" from the "Skyway" folder. This will open theCreate Skyway Project Wizard, which is used to specify name, location and sub-folders to be usedfor the project.

Figure 2.1. New --> Project

3. Configure the Create Skyway Project Wizard as follows:

Page 16: Introduction to Skyway Builder Tutorial · 2011. 11. 8. · 1 Chapter 1. Introduction Welcome to the Introduction to Skyway Builder tutorial. This document is a step-by-step guide

Skyway Project

8

Table 2.1. Project Wizard Configuration

Panel Field Value

Skyway Project Project Name: PAM

Skyway Project Use default location: yes (default)

Folder Names Folder to create for web content: WebContents (default)

Folder Names Folder to create for models: models (default)

Figure 2.2. Wizard: Create a Skyway Project - Skyway Project

Figure 2.3. Wizard: Create a Skyway Project - Folder Names

4. When done, click Finish.

You now have a Skyway project that you can version control using Eclipse, just like any other Eclipseproject.

1.1. TASK: Define Project VariablesProject variables are variables that are available to any and all project artifacts. Project variables aresession scoped, so they exist for the life of the user session.

Page 17: Introduction to Skyway Builder Tutorial · 2011. 11. 8. · 1 Chapter 1. Introduction Welcome to the Introduction to Skyway Builder tutorial. This document is a step-by-step guide

Skyway Project

9

For the PAM project we will define one variable (page) for dynamic page navigation. In certain parts ofthe implementation we will use this variable to control page flow.

Steps:

1. Open the Project Editor by double-clicking on the PAM project icon. Switch to the Variables tab,which is located along the bottom of the editor, and add variables per the following table. As you addvariables, the type picker will show you the Skyway Basic types plus any data types defined in anyopen Skyway projects.

Table 2.2. Project Variables: PAM

Name Type Collection Initial Value

page Text No

Figure 2.4. Editor: Project Editor - Variables

2. Save the project using File-->Save.

Page 18: Introduction to Skyway Builder Tutorial · 2011. 11. 8. · 1 Chapter 1. Introduction Welcome to the Introduction to Skyway Builder tutorial. This document is a step-by-step guide

10

Chapter 3. Data Layer

The data layer (also referred to as the persistence layer or domain object layer) is represented by a domainmodel; a distinct set of inter-related application objects that embody the functionality and characteristicsof the system being built. This layer also encompasses the persistence of the domain model to and from adatabase. The Skyway artifacts for implementing the data layer are the Data Type and Data Store artifacts.

This chapter will outline the steps for implementing the data layer for PAM.

1. Model

1.1. TASK: Add AppraisalService to Project

A Skyway Service is a container for data and logic artifacts. This task entails creating data artifacts.Defining logic will done in a later task

Steps:

1. Right click on PAM project, and select New-->Service

Figure 3.1. New --> Service

2. From the New Skyway Service Wizard, enter "AppraisalService" for the filename. This will be thename of the new service. The container for this service should be the project (PAM). If the project isnot highlighted, then select the project.

Page 19: Introduction to Skyway Builder Tutorial · 2011. 11. 8. · 1 Chapter 1. Introduction Welcome to the Introduction to Skyway Builder tutorial. This document is a step-by-step guide

Data Layer

11

Figure 3.2. Wizard: New Skyway Service

3. When done, click Finish.

1.2. TASK: Add Appraisal Data Type

Data Types are used to define domain objects that will be utilized within an application. You can addobject attributes by using the basic data types, and you can also specify relationships to other Data Typesand their cardinality.

Steps:

1. Righ click on the AppraisalService service, and select New-->Data Type

Figure 3.3. New --> Data Type

2. From the New Data Type Wizard, enter "Appraisal" for the filename. This will be the name of thenew data type. The container for this data type should be the service (AppraisalService). If the servicenot highlighted, then select the service.

Page 20: Introduction to Skyway Builder Tutorial · 2011. 11. 8. · 1 Chapter 1. Introduction Welcome to the Introduction to Skyway Builder tutorial. This document is a step-by-step guide

Data Layer

12

Figure 3.4. Wizard: New Data Type

3. When done, click Finish. This will open the Data Type editor.

Figure 3.5. Editor: Data Type Editor - Overview

4. From the Overview tab of the Data Type editor, add the following fields.

Page 21: Introduction to Skyway Builder Tutorial · 2011. 11. 8. · 1 Chapter 1. Introduction Welcome to the Introduction to Skyway Builder tutorial. This document is a step-by-step guide

Data Layer

13

Table 3.1. Data Type: Appraisal Fields

Display Name Type Primary Key

employeeNo Text Yes

lastName Text

firstName Text

ratingDesign Integer

ratingProgramming Integer

ratingTesting Integer

comments LargeText

Figure 3.6. Data Type: Appraisal Fields

5. Save the data type using File-->Save. You may also close the editor.

2. Persistence

2.1. TASK: Add AppraisalDS Data StoreData Stores are abstract representations of real databases (or persistence mechanisms), and they managepersistence for a set of data types. When designing the models there is no need to know the detailof the database (vendor, version, IP, etc.), but simply a need to know that one exists for modelingdatabase activity. When models are deployed, the developer late binds each Data Store to a real, physicalimplementation of a database.

Steps:

1. Right click on the AppraisalService service, and select New-->Data Store

2. From the New Data Store Wizard, enter "AppraisalDS" for the filename. This will be the name of thenew data store. The container for this data type should be the service (AppraisalService). If the servicenot highlighted, then click on it before clicking Next to go to the next panel.

Page 22: Introduction to Skyway Builder Tutorial · 2011. 11. 8. · 1 Chapter 1. Introduction Welcome to the Introduction to Skyway Builder tutorial. This document is a step-by-step guide

Data Layer

14

Figure 3.7. Wizard: New Data Store

3. From the Add Data Type panel, click the Add button, and select the "Appraisal" data type from theData Types list.

Figure 3.8. Wizard: New Data Store - Add Data Types

Page 23: Introduction to Skyway Builder Tutorial · 2011. 11. 8. · 1 Chapter 1. Introduction Welcome to the Introduction to Skyway Builder tutorial. This document is a step-by-step guide

Data Layer

15

Figure 3.9. Wizard: New Data Store - Managed Data Types

4. When done, click Finish. This will open the Data Store editor.

Figure 3.10. Editor: Data Store Editor - Overview

5. On the Database Configuration tab the database connection should be defaulted to the data connectionyou created when you performed the Sandbox setup prerequisites. Per the sandbox setup guide, thedb connection is called SkywayDB. If you haven't created a connection yet, you can create a newconnection from here.

Page 24: Introduction to Skyway Builder Tutorial · 2011. 11. 8. · 1 Chapter 1. Introduction Welcome to the Introduction to Skyway Builder tutorial. This document is a step-by-step guide

Data Layer

16

Figure 3.11. Editor: Data Store Editor - Database Configuration

6. Save the data store using File-->Save.

Page 25: Introduction to Skyway Builder Tutorial · 2011. 11. 8. · 1 Chapter 1. Introduction Welcome to the Introduction to Skyway Builder tutorial. This document is a step-by-step guide

17

Chapter 4. Service Layer

The service layer (also referred to as the logic layer or business layer) represents the core functionalityof the application being built. The Skyway artifacts for implementing the service layer are the Service,Operation, Action, and Steps.

This chapter will outline the steps for implementing the service layer of PAM.

For the PAM project there is only one operation in the service layer. The SaveAppraisal operation isintended to handle all persistence logic associated with saving an appraisal. For the tutorial the logic isvery basic; the appraisal will simply be persisted to a database. However as the application requirementschange in the future, you can add additional functionality (i.e. checking for duplicate entries, sending emailnotifications, updating HR system).

1. Model

1.1. TASK: Add SaveAppraisal Operation

Service functions are specified as Operations, which represent stateless application logic. In additionto a name and description, the operation definition consists of an operation interface and operationresources. The actual application logic of an operation is implemented using Actions (which will becovered in a later task).

In the case of PAM, the approval logic is implemented as a Service. It could have been implemented inthe web layer, but it would have (a) limited the reusability of the logic, and (b) not given you a chanceto implement a Service.

Steps:

1. Right click on the AppraisalService service, and select New-->Operation

2. Configure the Create Skyway Project Wizard as follows:

Table 4.1. Operation Wizard Configuration: SaveAppraisal

Panel Field Value

New Skyway Operation File Name: SaveAppraisal

Entry Point Action Create an entry point action: yes (default)

Entry Point Action Action Name: Save

Page 26: Introduction to Skyway Builder Tutorial · 2011. 11. 8. · 1 Chapter 1. Introduction Welcome to the Introduction to Skyway Builder tutorial. This document is a step-by-step guide

Service Layer

18

Figure 4.1. Wizard: New Operation - Name

Figure 4.2. Wizard: New Operation - Entry Point Action

3. When done, click Finish. This will open the Operation editor.

Page 27: Introduction to Skyway Builder Tutorial · 2011. 11. 8. · 1 Chapter 1. Introduction Welcome to the Introduction to Skyway Builder tutorial. This document is a step-by-step guide

Service Layer

19

Figure 4.3. Editor: Operation Editor - Overview

The operation name will be used when referencing this operation from elsewhere in the application.

Depending on the amount of functionality in an operation, an operation can be implemented with one ormore actions. In the event there's multiple actions, one of the actions must be defined as the entry point.When you initially create an operation, you can have the initial action automatically created for you, andyou can also have the action preconfigured as the entry point.

1.2. TASK: Define Operation Input and Output Variables

Inputs and Output variables partly define the operation contract. When another application artifact wantsto call an operation, it must pass in the input variables and accept the output variables.

In the case of the SaveAppraisal action, the input will be an appraisal object, and there are no outputs.

Steps:

1. From the Inputs/Outputs tab of the Operation Editor, add an input variable per the following table.Adding variables is very similar to adding variables to a project. As you add variables, the type pickerwill show you the Skyway Basic types plus the data types of any open Skyway projects.

Page 28: Introduction to Skyway Builder Tutorial · 2011. 11. 8. · 1 Chapter 1. Introduction Welcome to the Introduction to Skyway Builder tutorial. This document is a step-by-step guide

Service Layer

20

Figure 4.4. Select Type

Table 4.2. Operation Inputs: SaveAppraisal

Name Type Collection

inAppraisal Appraisal No

Figure 4.5. Editor: Operation Editor - Inputs/Outputs

2. Save the operation using File-->Save.

1.3. TASK: Create Save Action

While the operation defines the interface and resources needed for an application function, the functionalityis actually implemented using Actions. The developer defines the logic to be performed by sequencingsteps together.

Adding actions to the an operation is normally accomplished by right-clicking on the Operation, andselecting "New-->Action". However during the creation of the operation, we were given the option to have

Page 29: Introduction to Skyway Builder Tutorial · 2011. 11. 8. · 1 Chapter 1. Introduction Welcome to the Introduction to Skyway Builder tutorial. This document is a step-by-step guide

Service Layer

21

an action automatically created and preconfigured as the entry point. If you expand the SaveAppraisaloperation, you will see the "Save" action.

Steps:

1. Open the Save action by double-clicking on the action in the Skyway Navigator. This will open theAction editor.

Figure 4.6. Open Action Editor

2. From here you will model the implementation of the operation. In this case the operation will beimplemented with one step, so it can be modeled using only the entry-point action. However in othercases, as described earlier, you may choose to decompose the logic into multiple actions that are strungtogether by the entry-point action.

To implement the Action, open the step palette.

Figure 4.7. Step Palette

Page 30: Introduction to Skyway Builder Tutorial · 2011. 11. 8. · 1 Chapter 1. Introduction Welcome to the Introduction to Skyway Builder tutorial. This document is a step-by-step guide

Service Layer

22

3. Implementing the Action consists of dropping the desired steps onto the canvas, configuring the steps(properties), and stringing the steps together into a flow. Click on the Modify Data Store step and thenclick on the canvas. Repeat this for all the steps listed in the following table.

4. Once the steps are added the canvas, you can configure the steps by double-clicking on the step to openthe step properties. Configure the step properties using the following table as a reference.

Table 4.3. Action Implementation: Save Action

Step Name Step Type Configuration

Persist Appraisal

Modify Data Store

Properties-->Modify Tab

• Data Store: AppraisalDS

• Operation: Update

• Operation Input: inAppraisal

Stop

Stop

Note Optional Text: "This action persists the appraisalto the data source."

5. To connect the steps, click on the Connector in the palette, click on the first step (Persist Appraisal)and drag to the second step (Stop).

6. Save the action using File-->Save.

Figure 4.8. Operation Action: Save

Page 31: Introduction to Skyway Builder Tutorial · 2011. 11. 8. · 1 Chapter 1. Introduction Welcome to the Introduction to Skyway Builder tutorial. This document is a step-by-step guide

Service Layer

23

Figure 4.9. Properties: Modify Data Store Step - Modify

Page 32: Introduction to Skyway Builder Tutorial · 2011. 11. 8. · 1 Chapter 1. Introduction Welcome to the Introduction to Skyway Builder tutorial. This document is a step-by-step guide

24

Chapter 5. Web Layer

The web layer (also referred to as the UI layer) is primarily concerned with presenting the user interfaceand implementing the behavior of the application. The Skyway artifacts for implementing the web layerare the Web Controller, Web Conversation, Action, Steps, and JSP pages.

This chapter will outline the steps for implementing the web layer of PAM.

1. Web View MappingsThe web layer of the PAM application is implemented using a variety of different Skyway artifacts, and theuser interface is implemented using JSP pages. During the flow of the application, control will be passedback-and-forth between Actions and JSP pages. As an action performs it's function, a corresponding JSPpage will render the response. Rather than hard-coding references to specific JSP pages from the Actions,which is generally regarded a bad practice, a common solution is to define and use aliases to JSP pages.View mappings are the mechanism for defining and associating aliases to JSP pages. When an Actionneeds to reference a JSP page, it references an alias to the page instead of the actual JSP page.

Before we can define the aliases, we must first create the JSP pages. The JSP pages won't actually beimplemented until the next chapter.

1.1. TASK: Create index.jsp Page

Steps for creating index.jsp:

1. Right click on WebContent folder, and select New-->JSP. This will open the New JavaServer PageWizard.

2. Enter index.jsp as the filename, and click the Next button.

Page 33: Introduction to Skyway Builder Tutorial · 2011. 11. 8. · 1 Chapter 1. Introduction Welcome to the Introduction to Skyway Builder tutorial. This document is a step-by-step guide

Web Layer

25

Figure 5.1. Wizard: New JavaServer Page - Name

3. Select Skyway JSP File (html) as the template, and click the Finish button.

Page 34: Introduction to Skyway Builder Tutorial · 2011. 11. 8. · 1 Chapter 1. Introduction Welcome to the Introduction to Skyway Builder tutorial. This document is a step-by-step guide

Web Layer

26

Figure 5.2. Wizard: New JavaServer Page - Template

1.2. TASK: Create edit.jsp Page

Steps for creating edit.jsp:

1. Create another JSP page called edit.jsp using Skyway JSP File (html) as the template.

1.3. TASK: Create confirm.jsp Page

Steps for creating confirm.jsp:

1. Create another JSP page called confirm.jsp using Skyway JSP File (html) as the template.

1.4. TASK: Define page aliases

To create a View Mapping, double click the PAM project to bring up it’s properties. Then select the ViewMappings tab on the bottom.

The following figure shows how the view mappings are configured to associate an alias with an actual JSPpage. Start by adding (Add...) each JSP page as a View Resource and specify the alias to be associatedwith the JSP page.

Page 35: Introduction to Skyway Builder Tutorial · 2011. 11. 8. · 1 Chapter 1. Introduction Welcome to the Introduction to Skyway Builder tutorial. This document is a step-by-step guide

Web Layer

27

Figure 5.3. View Mappings

2. Controller

2.1. TASK: Add PAMController Web Controller

As described earlier Web Controllers are used along with the JSP pages (located in the WebContent)to implement the Web layer of an application. The JSP pages represent the View in MVC, and WebControllers represent the Controller in MVC. Per the project meta-data model, a Web Controller can haveone or more Web Conversations, which will be described in a subsequent task.

Steps:

1. Right click on PAM project, and select New-->Web Controller

2. From the New Web Controller Wizard, enter "PAMController" for the filename. This will be thename of the new web controller. The container for this web controller should be the project (PAM). Ifthe project is not highlighted, then select the project.

Figure 5.4. Wizard: New Web Controller

3. When done, click Finish.

Page 36: Introduction to Skyway Builder Tutorial · 2011. 11. 8. · 1 Chapter 1. Introduction Welcome to the Introduction to Skyway Builder tutorial. This document is a step-by-step guide

Web Layer

28

2.2. TASK: Add the PerformanceMgmt WebConversation

A Web Conversation facilitates the grouping of processing logic around application tasks, whichis typically comprised of a series of steps between the end-user and the application. Therefore eachapplication task is implemented as it's own conversation, and each conversation contains the variables,constants, and Actions needed to orchestrate the task and support the user events associated with the task.These types of Web Conversations will typically be session scoped. When the task is done, the conversationstate can be discarded using the Clear Conversations step.

Figure 5.5. Developer View of Application - Web Conversation

Steps:

1. Right click the on PAMController web controller, and select New-->Web Conversation

2. From the New Web Conversation Wizard, enter "PerformanceMgmt" for the filename. This will bethe name of the new web conversation. The container for this web conversation should be the webcontroller (PAMController). If the web controller is not highlighted, then select the web controller.

Figure 5.6. Wizard: New Web Conversation

3. When done, click Finish. This will open the Web Conversation editor.

Page 37: Introduction to Skyway Builder Tutorial · 2011. 11. 8. · 1 Chapter 1. Introduction Welcome to the Introduction to Skyway Builder tutorial. This document is a step-by-step guide

Web Layer

29

Figure 5.7. Editor: Web Conversation Editor

2.3. TASK: Define Web Conversation Variables

Web Conversation variables are the variables used by Actions. All actions in a Web Conversation sharethe same variables. This reinforces the concept of a conversation being oriented around an application taskor function where different steps in the task will need to share variables and state. In the case of PAMthere will be two variables. One variable (appraisals) is for holding all appraisals for the purpose of listingon the front page, and another variable (currentAppraisal) is for storing the appraisal details entered bythe end user.

Steps:

1. From the Variables tab of the Web Conversation Editor, add variables per the following table. As youadd variables, the type picker will show you the Skyway Basic types plus any data types in Skywayprojects.

Table 5.1. Conversation Variables: PerformanceMgmt

Name Type Collection Public

currentAppraisal Appraisal No Yes

appraisals Appraisal Yes Yes

Page 38: Introduction to Skyway Builder Tutorial · 2011. 11. 8. · 1 Chapter 1. Introduction Welcome to the Introduction to Skyway Builder tutorial. This document is a step-by-step guide

Web Layer

30

Figure 5.8. Editor: Web Conversation Editor - Variables

2. Save the conversation using File-->Save.

2.4. TASK: Add the InitConversation ActionActions in the context of a web conversation (as opposed to a service operation) implement the logicfor handling user-generated events. The developer defines the logic to be performed by the action bysequencing steps together.

Figure 5.9. Developer View of Application - InitConversation

The first action, InitConversation, is intended to do some housecleaning. Since the end-user dictates theflow of the application, the state of the application cannot be assumed. Therefore this action is intended toassure that the application is in a predetermined state. Prior to loading the index page and listing all currentappraisals, the appraisals should be loaded into the appraisals variable.

When this action is created, a partially configured URL Action Mapping will also be created. In a latersection we will complete the configuration of the URL Action Mapping to fire prior to displaying theindex page.

Steps:

Page 39: Introduction to Skyway Builder Tutorial · 2011. 11. 8. · 1 Chapter 1. Introduction Welcome to the Introduction to Skyway Builder tutorial. This document is a step-by-step guide

Web Layer

31

1. Right click the on PerformanceMgmt web conversation, and select New-->Action

2. From the New Action Wizard, enter "InitConversation" for the filename. This will be the name of thenew action. The container for this action should be the web conversation(PerformanceMgmt). If theweb conversation is not highlighted, then select the web conversation.

Figure 5.10. Wizard: New Action - Name

Figure 5.11. Wizard: New Action - URL Action Mapping

3. When done, click Finish. This will open the Action editor.

4. From here you will model the implementation of the action. Implementing the Action consists ofdropping steps onto the canvas, configuring the steps, and stringing the steps together into a flow. Thefollowing diagram shows the implementation of the InitConversation action.

Page 40: Introduction to Skyway Builder Tutorial · 2011. 11. 8. · 1 Chapter 1. Introduction Welcome to the Introduction to Skyway Builder tutorial. This document is a step-by-step guide

Web Layer

32

Figure 5.12. Conversation Action: InitConversation

5. In this case there are only two steps. Once a step is added the canvas, you can configure the step bydouble-clicking on the step to open the step properties.

Table 5.2. Action Implementation: InitConversation Action

Step Name Step Type Configuration

Retrieve All Appraisal

Search Data Store

Properties-->Select Data Store Info

• Search Data Store:PAM.AppraisalService.AppraisalDS

• Target Variable: ${appraisals}

Properties-->Search Criteria

• Criteria Type: All Records

Properties-->Sort Fields

• None

Stop

Stop

Note Optional Text: "This action persists the appraisalto the data source."

Page 41: Introduction to Skyway Builder Tutorial · 2011. 11. 8. · 1 Chapter 1. Introduction Welcome to the Introduction to Skyway Builder tutorial. This document is a step-by-step guide

Web Layer

33

Figure 5.13. Properties: Search Data Store - Select Data Store Info

Figure 5.14. Properties: Search Data Store - Search Criteria

6. A Note can be optionally added to an action to describe the functionality of the action.

2.5. TASK: Add the InitNewAppraisal Action

Figure 5.15. Developer View of Application - InitNewAppraisal

The InitNewAppraisal action is intended to prepare the conversation for creating a new appraisal. Whenthe "New" hyperlink is clicked by the end-user, the InitNewAppraisal action will be invoked, which willcreate a new appraisal object to make sure that any data that may have been previously entered by theend-user is discarded.

Steps:

1. Right click the on PerformanceMgmt web conversation, and select New-->Action

Page 42: Introduction to Skyway Builder Tutorial · 2011. 11. 8. · 1 Chapter 1. Introduction Welcome to the Introduction to Skyway Builder tutorial. This document is a step-by-step guide

Web Layer

34

2. From the New Action Wizard, enter "InitNewAppraisal" for the filename. This will be the name ofthe new action. The container for this action should be the web conversation(PerformanceMgmt). If theweb conversation is not highlighted, then select the web conversation.

3. When done, click Finish. This will open the Action editor.

4. From here you will model the implementation of the action. Implementing the Action consists ofdropping steps onto the canvas, configuring the steps, and stringing the steps together into a flow. Thefollowing diagram shows the implementation of the InitConversation action.

5. In this case there are only two steps. Once a step is added the canvas, you can configure the step bydouble-clicking on the step to open the step properties.

Table 5.3. Action Implementation: InitNewAppraisal Action

Step Name Step Type Configuration

New Appraisal

Variable Editor

Properties-->Variable Editor

• Variable:currentAppraisal = RESET

Insert the currentAppraisal variable using theInsert Variable button, and then press the Resetbutton. The Reset button will append the "=RESET" to the expression.

Stop

Stop

Note Optional Text: "This action persists the appraisalto the data source."

Figure 5.16. Conversation Action: InitNewAppraisal

6. A Note can be optionally added to an action to describe the functionality of the action.

Page 43: Introduction to Skyway Builder Tutorial · 2011. 11. 8. · 1 Chapter 1. Introduction Welcome to the Introduction to Skyway Builder tutorial. This document is a step-by-step guide

Web Layer

35

2.6. TASK: Add the ValidateAppraisal Action

Figure 5.17. Developer View of Application - ValidateAppraisal

The ValidateAppraisal action is responsible for validating the appraisal data that was entered by the end-user. In this implementation the validation logic is very basic. The only thing that is being verified is thatan employeeNo is specified. Based on the evaluation of the appraisal object, this action will direct the end-user either to the /confirm page (alias) or back to the /edit page (alias). In contrast with the other actions inthe PerformanceMgmt conversation which go to one and only one page, the next page will be determinedby the page project variable which will be set with a page alias.

Steps:

1. Right click the on PerformanceMgmt web conversation, and select New-->Action

2. From the New Action Wizard, enter "ValidateAppraisal" for the filename. This will be the name ofthe new action. The container for this action should be the web conversation (PerformanceMgmt). Ifthe web conversation is not highlighted, then select the web conversation.

3. When done, click Finish. This will open the Action editor.

4. From here you will model the implementation of the action. Implementing the Action consists ofdropping steps onto the canvas, configuring the steps, and stringing the steps together into a flow. Thefollowing diagram shows the implementation of the InitConversation action.

Figure 5.18. Conversation Action: ValidateAppraisal

Page 44: Introduction to Skyway Builder Tutorial · 2011. 11. 8. · 1 Chapter 1. Introduction Welcome to the Introduction to Skyway Builder tutorial. This document is a step-by-step guide

Web Layer

36

5. In this case there are only two steps. Once a step is added the canvas, you can configure the step bydouble-clicking on the step to open the step properties.

Table 5.4. Action Implementation: ValidateAppraisal Action

Step Name Step Type Configuration

Required FieldsSpecified?

Decision

Properties-->Decision Criteria

• Expression: currentAppraisal.employeeNo != null && currentAppraisal.employeeNo !=""

Proceed to ConfirmPage

Variable Editor

Properties-->Variable Editor

• Variable:project.page = "/confirm"

Proceed to Edit Page

Variable Editor

Properties-->Variable Editor

• Variable:project.page = "/edit"

Stop

Stop

Note Optional Text: "This action persists the appraisalto the data source."

Figure 5.19. Properties: Decision Step - Decision Criteria

Page 45: Introduction to Skyway Builder Tutorial · 2011. 11. 8. · 1 Chapter 1. Introduction Welcome to the Introduction to Skyway Builder tutorial. This document is a step-by-step guide

Web Layer

37

Figure 5.20. Properties: Variable Editor - Variable Editor

Figure 5.21. Properties: Variable Editor - Variable Editor

6. A Note can be optionally added to an action to describe the functionality of the action.

2.7. TASK: Add the SaveAppraisal Action

Figure 5.22. Developer View of Application - SaveAppraisal

This action handles the logic when the user clicks on the "Next" button, in which case the validatedappraisal object should be persisted. This action defers to the Save Appraisal operation that was created

Page 46: Introduction to Skyway Builder Tutorial · 2011. 11. 8. · 1 Chapter 1. Introduction Welcome to the Introduction to Skyway Builder tutorial. This document is a step-by-step guide

Web Layer

38

in chapter 4. This action will also invoke the InitConversation action which is responsible for getting theapplication back to the starting state.

Steps:

1. Right click the on PerformanceMgmt web conversation, and select New-->Action

2. From the New Action Wizard, enter "SaveAppraisal" for the filename. This will be the name of thenew action. The container for this action should be the web conversation(PerformanceMgmt). If theweb conversation is not highlighted, then select the web conversation.

3. When done, click Finish. This will open the Action editor.

4. From here you will model the implementation of the action. Implementing the Action consists ofdropping steps onto the canvas, configuring the steps, and stringing the steps together into a flow. Thefollowing diagram shows the implementation of the InitConversation action.

Figure 5.23. Conversation Action: SaveAppraisal

5. In this case there are only two steps. Once a step is added the canvas, you can configure the step bydouble-clicking on the step to open the step properties.

Page 47: Introduction to Skyway Builder Tutorial · 2011. 11. 8. · 1 Chapter 1. Introduction Welcome to the Introduction to Skyway Builder tutorial. This document is a step-by-step guide

Web Layer

39

Table 5.5. Action Implementation: SaveAppraisal Action

Step Name Step Type Configuration

Invoke Save AppraisalOperation

Invoke Operation

Properties-->Operation

• Operation:PAM.AppraisalService.SaveAppraisal

Properties-->Inputs

• Input Variable: inAppraisal - Expression:currentAppraisal

Properties-->Outputs

• None

Invoke InitConversationAction

Invoke Action

Properties-->Operation

• Action:PAM.PAMController.PerformanceMgmt.InitConversation

Stop

Stop

Note Optional Text: "This action persists the appraisalto the data source."

6. A Note can be optionally added to an action to describe the functionality of the action.

3. View - JSP PagesThe user interface is implemented using JSP pages, which were created at the beginning of the chapter.The WebContent folder holds all JSP pages and web-related resources, including javascript libraries,stylesheets, flash controls, and images. Skyway provides a palette of web controls to build user interfaces.The web controls can be wired to the Web Controller and associated Web Conversations that were definedin an earlier section. Each web control has it's own properties panel for configuring.

You can further augment Skyway's web controls with the additional functionality available from JSP.

3.1. TASK: Implement index.jsp Page

The following figure shows how the index.jsp page will look to the end-user of PAM.

Page 48: Introduction to Skyway Builder Tutorial · 2011. 11. 8. · 1 Chapter 1. Introduction Welcome to the Introduction to Skyway Builder tutorial. This document is a step-by-step guide

Web Layer

40

Figure 5.24. index.jsp - runtime view

Steps for implementing index.jsp:

1. The pages are comprised of a combination of html and Skyway web controls. Using the Web Controlpalette, build the page according to the following listing. Following the listing there is a description ofkey web controls and their configuration.

• Skyway Form ( <skyway:form> ) - used to define a form. The action attribute is configured with"/PAM/PAMController/PerformanceMgmt/InitNewAppraisal", the fully qualified path of the webconversation action that will be invoked when the form is posted.

<skyway:form action="/PAM/PAMController/PerformanceMgmt/InitNewAppraisal">...Form Contents...</skyway:form>

• Skyway Button ( <skyway:button> ) - used to provide the user a button to click. The label attributeis configured with "New", the title of the button. To configure the button to submit the form, thetype should be set to "submit".

<skyway:button label="New" type ="submit"></skyway:button>

• Skyway Iterator ( <skyway:iterator> ) - used to define a fragment that should be repeated for asmany objects that exist in the collection. This is very useful for listing the contents of a collection.The items attribute is configured with "PAMController.PerformanceMgmt.appraisals", the variablecollection that should be iterated. The var attribute is configured to "current", a variable that is usedby embedded web controls (see label) to reference an individual object as the collection is iterated.

<skyway:iterator items="${PAMController.PerformanceMgmt.appraisals }" var="current"></skyway:iterator>

• Skyway Label ( <skyway:label> ) - used to output the value of a variable. The value attribute isconfigured with the variable that should be output. Since this label is referencing a variable froman iterated collection, the variable is referenced as "current.", the var attribute from the iterator webcontrol.

<skyway:label value="${current.employeeNo}"></skyway:label>

Page 49: Introduction to Skyway Builder Tutorial · 2011. 11. 8. · 1 Chapter 1. Introduction Welcome to the Introduction to Skyway Builder tutorial. This document is a step-by-step guide

Web Layer

41

Figure 5.25. index.jsp - full listing

<%@taglib uri="http://www.skywaysoftware.com/taglibs/core" prefix="skyway"%><%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><title>Insert title here</title></head><body><skyway:form action="/PAM/PAMController/PerformanceMgmt/InitNewAppraisal"> <skyway:button label="New" type ="submit"></skyway:button></skyway:form>

<table> <tr> <td>Employee No</td> <td>Last Name</td> <td>First Name</td> <td>Design</td> <td>Program</td> <td>Test</td> <td>Comments</td> </tr><skyway:iterator items="${PAMController.PerformanceMgmt.appraisals }" var="current"> <tr> <td><skyway:label value="${current.employeeNo}"></skyway:label></td> <td><skyway:label value="${current.lastName}"></skyway:label></td> <td><skyway:label value="${current.firstName}"></skyway:label></td> <td><skyway:label value="${current.ratingDesign}"></skyway:label></td> <td><skyway:label value="${current.ratingProgramming}"></skyway:label></td> <td><skyway:label value="${current.ratingTesting}"></skyway:label></td> <td><skyway:label value="${current.comments}"></skyway:label></td> </tr></skyway:iterator></table></body></html>

3.2. TASK: Implement edit.jsp Page

The following figure shows how the edit.jsp page will look to the end-user of PAM.

Figure 5.26. edit.jsp - runtime view

Steps for implementing edit.jsp:

Page 50: Introduction to Skyway Builder Tutorial · 2011. 11. 8. · 1 Chapter 1. Introduction Welcome to the Introduction to Skyway Builder tutorial. This document is a step-by-step guide

Web Layer

42

1. Using the Web Control palette, build the page according to the following listing. Following the listingthere is a description of key web controls and their configuration.

• Skyway Form ( <skyway:form> ) - used to define a form. The action attribute is configured with"/PAM/PAMController/PerformanceMgmt/ValidateAppraisal", the fully qualified path of the webconversation action that will be invoked when the form is posted.

<skyway:form action="/PAM/PAMController/PerformanceMgmt/ValidateAppraisal">...Form Contents...</skyway:form>

• Skyway Input ( <skyway:input> ) - used to solicit input from the user. The path attribute is the pathof the variable that the contents of the input field should be stored.

<skyway:input path="PAMController.PerformanceMgmt.currentAppraisal.employeeNo"></skyway:input>

• Skyway Dropdown ( <skyway:dropdown> ) - used to let the user select one of multiple preset values.The path attribute is the path of the variable that the contents of the selected value should be stored.

<skyway:dropdown path="PAMController.PerformanceMgmt.currentAppraisal.ratingDesign">...options...</skyway:dropdown><br>

• Skyway Option ( <skyway:option> ) - used to specify a preset value for the dropdown control. Thelabel attribute is displayed to the end user, and the value attribute is the value that's submitted forthe option.

<skyway:option label="Exceeds Expectations" value="1"></skyway:option><skyway:option label="Meets Expectations" value="2"></skyway:option><skyway:option label="Does Not Meet Expectations" value="3"></skyway:option>

• Skyway Textarea ( <skyway:textarea> ) - used to solicit input from the user. The path attribute isthe path of the variable that the contents of the input field should be stored.

<skyway:textarea path="PAMController.PerformanceMgmt.currentAppraisal.comments"></skyway:textarea>

• Skyway Button ( <skyway:button> ) - used to provide the user a button to click. The label attributeis configured with "Save", the title of the button. To configure the button to submit the form, thetype should be set to "submit".

<skyway:button type="submit" label="Next" ></skyway:button>

Page 51: Introduction to Skyway Builder Tutorial · 2011. 11. 8. · 1 Chapter 1. Introduction Welcome to the Introduction to Skyway Builder tutorial. This document is a step-by-step guide

Web Layer

43

Figure 5.27. edit.jsp - full listing

<%@taglib uri="http://www.skywaysoftware.com/taglibs/core" prefix="skyway"%><%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><title>Insert title here</title></head><body><skyway:form action="/PAM/PAMController/PerformanceMgmt/ValidateAppraisal"> Employee No <skyway:input path="PAMController.PerformanceMgmt.currentAppraisal.employeeNo"></skyway:input> <br> Last Name <skyway:input path="PAMController.PerformanceMgmt.currentAppraisal.lastName"></skyway:input> <br> First Name <skyway:input path="PAMController.PerformanceMgmt.currentAppraisal.firstName"></skyway:input> <h2>Ratings:</h2> Design <skyway:dropdown path="PAMController.PerformanceMgmt.currentAppraisal.ratingDesign"> <skyway:option label="Exceeds Expectations" value="1"></skyway:option> <skyway:option label="Meets Expectations" value="2"></skyway:option> <skyway:option label="Does Not Meet Expectations" value="3"></skyway:option> </skyway:dropdown><br> Programming <skyway:dropdown path="PAMController.PerformanceMgmt.currentAppraisal.ratingProgramming"> <skyway:option label="Exceeds Expectations" value="1"></skyway:option> <skyway:option label="Meets Expectations" value="2"></skyway:option> <skyway:option label="Does Not Meet Expectations" value="3"></skyway:option> </skyway:dropdown><br> Testing <skyway:dropdown path="PAMController.PerformanceMgmt.currentAppraisal.ratingTesting"> <skyway:option label="Exceeds Expectations" value="1"></skyway:option> <skyway:option label="Meets Expectations" value="2"></skyway:option> <skyway:option label="Does Not Meet Expectations" value="3"></skyway:option> </skyway:dropdown> <br> Comments: <skyway:textarea path="PAMController.PerformanceMgmt.currentAppraisal.comments"></skyway:textarea> <br> <skyway:button type="submit" label="Next" ></skyway:button> </skyway:form></body></html>

3.3. TASK: Implement confirm.jsp Page

The following figure shows how the confirm.jsp page will look to the end-user of PAM.

Page 52: Introduction to Skyway Builder Tutorial · 2011. 11. 8. · 1 Chapter 1. Introduction Welcome to the Introduction to Skyway Builder tutorial. This document is a step-by-step guide

Web Layer

44

Figure 5.28. confirm.jsp - runtime view

Steps for implementing confirm.jsp:

1. Using the Web Control palette, build the page according to the following listing. Following the listingthere is a description of key web controls and their configuration.

• Skyway Form ( <skyway:form> ) - used to define a form. The action attribute is configuredwith "/PAM/PAMController/PerformanceMgmt/SaveAppraisal", the fully qualified path of the webconversation action that will be invoked when the form is posted.

<skyway:form action="${webContextRoot}/PAMController/PerformanceMgmt/SaveAppraisal">...form...</skyway:form>

• Skyway Button ( <skyway:button> ) - used to provide the user a button to click. The label attributeis configured with "Confirm", the title of the button. To configure the button to submit the form, thetype should be set to "submit".

<skyway:button type="submit" label="Save" id="button_0n5lNx"></skyway:button>

• Skyway Label ( <skyway:label> ) - used to output the value of a variable. The value attribute isconfigured with the variable that should be output.

<skyway:label value="${PAMController.PerformanceMgmt.currentAppraisal.firstName}"></skyway:label>

Page 53: Introduction to Skyway Builder Tutorial · 2011. 11. 8. · 1 Chapter 1. Introduction Welcome to the Introduction to Skyway Builder tutorial. This document is a step-by-step guide

Web Layer

45

Figure 5.29. confirm.jsp - full listing

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%><%@taglib uri="http://www.skywaysoftware.com/taglibs/core" prefix="skyway"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><title>Insert title here</title><skyway:javascript src="prototype.js"/><skyway:javascript src="skyway-internal.js"/><skyway:javascript src="skyway.js"/></head><body>

Please confirm this appraisal for:<br><skyway:label value="${PAMController.PerformanceMgmt.currentAppraisal.firstName}"></skyway:label><skyway:label value="${PAMController.PerformanceMgmt.currentAppraisal.lastName}"></skyway:label><br><br><skyway:form action="${webContextRoot}/PAMController/PerformanceMgmt/SaveAppraisal"> <skyway:button type="submit" label="Save" id="button_0n5lNx"></skyway:button></skyway:form>

</body></html>

3.4. TASK: Configure URL Action Mappings

In addition to serving as the container for Web Conversations, a Web Controller has the very importantfunction of associating urls to actions and views, and this is referred to as a URL Action Mapping. Asyou create Actions in a Conversation, you must decide whether the Action is going to be accessible usinga URL. In order for the action to be accessible from a JSP page in a Skyway application or any otherweb client, the action must be configured as web resource, and this is accomplished by adding an actionmapping in the Web Controller.

An action mapping is responsible for defining the url(s) that will trigger an action. When the defined URLis requested from a web control, javascript or web client, the action mapped to the url will handle therequest. The action mapping will also specify the jsp that will render the response to the request. Everyrequest will have a response, and the action mapping specifies both the action that will handle the requestand the jsp that will render the response.

Earlier in the tutorial there were several Actions that were added to the "PerformanceMgmt" Conversation,and each Action is responsible for handling a particular task. When the Actions were created, you wereprompted whether to "Create a URL Action Mapping". For every New Action wizard where you left theoption enabled (default), a new URL Action Mapping entry was added to the "PAMController" WebController.

You may be wondering what's the association between the URL and the Action, particularly since theAction name is embedded in some of the action mapping URLs. The answer is that there's no association,other than an association specified by the developer or created by default (although it can be overridden) inthe "New Action" wizard. The association between URLs and Actions is completely up to the developer.

During the course of the tutorial four action mappings were automatically created. For three of the actionmappings (InitNewAppraisal, ValidateAppraisal, and SaveAppraisal) the only remaining configuration isto associate the mapping with a view mapping. For the InitConversation action mapping, you must alsochange the URL to /index.jsp, the entry point of the web application. Any calls to /index.jsp will fall underthis action mapping.

Page 54: Introduction to Skyway Builder Tutorial · 2011. 11. 8. · 1 Chapter 1. Introduction Welcome to the Introduction to Skyway Builder tutorial. This document is a step-by-step guide

Web Layer

46

Figure 5.30. URL Action Mapping

Here's a listing and description of each action mapping:

• (#1) When the end-user initiates the application (index.jsp), there is some application initializationthat needs to occur. In an earlier step of the tutorial, the InitConversation Action was implemented toperform the initialization, and it must be executed prior to index.jsp being rendered. This accomplishedby mapping "/index.jsp" to the InitConversation Action. When the action is complete, the "/home"page (alias to index.jsp) renders the response (or view).

• (#2) When the end-user clicks on the "New" button, there is some initialization that must occur(the InitNewAppraisal action) prior to rendering the edit.jsp. The action mapping is implementedby mapping the "/PAM/PAMController/PerformanceManagement/InitNewAppraisal" URL to theInitNewAppraisal action. When the action is complete, the "/edit" page (alias to edit.jsp) renders theresponse (or view).

• (#3) When the end-user clicks on the "Next" button, there is some data validation that must occur (theValidateAppraisal Action), and the page will be determined (either /edit or /confirm) based on theresults of the validation. The action mapping is implemented by mapping the "/PAM/PAMController/PerformanceManagement/ValidateAppraisal" URL to the ValidateAppraisal action. The view isspecified using a project variable (page) that is set by the action based on the results of the validation.

• (#4) When the end-user clicks on the "Confirm" button, the appraisal must be actually persisted(the SaveAppraisal action) prior to rendering the index.jsp page. The action mapping isimplemented by mapping the "/PAM/PAMController/PerformanceManagement/SaveAppraisal" URLto the SaveAppraisal action. When the action is complete, the "/home" page renders the response (orview).

Steps:

1. URL Action Mappings are configured in the Web Controller. If the PAMController isn't already open,double click on it to open the Web Controller editor.

Page 55: Introduction to Skyway Builder Tutorial · 2011. 11. 8. · 1 Chapter 1. Introduction Welcome to the Introduction to Skyway Builder tutorial. This document is a step-by-step guide

Web Layer

47

2. From the URL Action Mapping tab, the following mapping should be configured.

Table 5.6. Action Implementation: ValidateAppraisal Action

URL Action View

/index.jsp /PAM/PAMController/PerformanceManagement/InitConversation

/home

/PAM/PAMController/PerformanceManagement/InitNewAppraisal

/PAM/PAMController/PerformanceManagement/InitNewAppraisal

/edit

/PAM/PAMController/PerformanceManagement/ValidateAppraisal

/PAM/PAMController/PerformanceManagement/ValidateAppraisal

${project.page}

/PAM/PAMController/PerformanceManagement/SaveAppraisal

/PAM/PAMController/PerformanceManagement/SaveAppraisal

/home

Figure 5.31. URL Action Mapping

Page 56: Introduction to Skyway Builder Tutorial · 2011. 11. 8. · 1 Chapter 1. Introduction Welcome to the Introduction to Skyway Builder tutorial. This document is a step-by-step guide

48

Chapter 6. Deployment

Here is a brief description of the setup of the runtime environment. This topic is described in greater detailin the Sandbox Setup guide that is available in the Resources section of the Skyway Community Portal[http://www.skywayperspectives.org].

1. Configure Database

1.1. Add Data SourceIn Eclipse you will add a data source that you will use for your running applications. This can be doneusing the Data Source Explorer view in Eclipse. For the beta version of Skyway, it is recommended thatyou use Postgres or MySQL for the database.

1.2. Configure Data Store in ProjectFor the AppraisalDS Data Store in the project, go to Database Configuration tab and configure thedatabase connection with the data source you created in the Data Source Explorer.

2. Configure Server

2.1. Add ServerIn Eclipse you will add a Server that you will use for your running applications. This can be done usingthe Servers view in Eclipse. For the beta version of Skyway, it is recommended that you use a vanillaApache Tomcat instance.

2.2. Add PAM Project to ServerThe project can be added to the server by right-clicking on the Server at selecting the "Add and RemoveProjects" menu item. The PAM project should be added to the server.

3. Run Application

3.1. Start ServerWhen you start the server, the application should be deployed to the server.

Page 57: Introduction to Skyway Builder Tutorial · 2011. 11. 8. · 1 Chapter 1. Introduction Welcome to the Introduction to Skyway Builder tutorial. This document is a step-by-step guide

Deployment

49

3.2. Run ApplicationRight-click on the index.jsp, and select "Run On Server".

If you get stuck or need help, there is a forum on the Skyway Community portal dedicated to the SkywayTutorials [www.skywayperspectives.org/portal/web/guest/174/message_boards/category/10960].