Skyway Builder 6.3 Spring Web Flow Tutorial

Transcription

1 Skyway Builder 6.3 Spring Web Flow Tutorial /21/2009 Skyway Software

2 Skyway Builder Spring MVC Tutorial: /21/2009 Skyway Software Published Copyright 2008 Skyway Software Abstract This document is a step-by-step guide for developing a Spring Web Flow application using Skyway Builder. The most recent version of all Skyway Builder tutorials can always be found at 2

3

4 Table of Contents 1. Introduction What's Covered Suggested Audience Prerequisite Software What are we going to build? User Story Support Spring DSL Artifacts Application Layers Implementation Overview Development Process Development Steps Skyway Project TASK: Create Skyway Project for PAM Data Layer Model TASK: Add org.pam.tutorial.domain Model Package TASK: Add Appraisal Domain Object Persistence TASK: Add org.pam.tutorial.dao Model Package TASK: Add AppraisalDAO Data Access Object Named Queries TASK: Add FindAllAppraisals Named Query to Data Access Object Service Layer Model TASK: Add org.pam.tutorial.service Model Package TASK: Add AppraisalService to Project TASK: Add SaveAppraisal Operation TASK: Define Operation Input/Output Variables TASK: Create Save Action Web Layer Flow TASK: Add org.pam.tutorial.web Model Package TASK: Add appraisalentry Web Flow TASK: Add Instance Variables TASK: Add listappraisals View State TASK: Add edit View State TASK: Add validate Decision State TASK: Add confirm View State TASK: Add save Action State View - JSP Pages TASK: Create listappraisals.jsp Page TASK: Implement edit.jsp Page TASK: Implement confirm.jsp Page Deployment Configure Database Add Data Source Configure Data Access Object in Project Configure Server Add Server Add PAM Project to Server iv

5 Skyway Builder 6.3 Spring Web Flow Tutorial 3. Run Application Start Server Run Application v

6 List of Figures 1.1. Project Meta-Data Model End-User View of Application Developer View of Application (Web Flow Diagram) Skyway Builder - Create Skyway Project PAM - Create a Skyway Project Wizard: Skyway Project PAM - Create a Skyway Project Wizard: Folder Names PAM - Create a Skyway Project Wizard: Artifact Category Mappings Skyway Builder - Create New Model Package org.pam.tutorial.domain - New Model Package Wizard: Model Package Skyway Builder - Create New Domain Object Appraisal - New Domain Object Wizard: New Data Object Appraisal - Domain Object Editor: Overview Appraisal - Domain Object: Appraisal Fields org.pam.tutorial.dao - New Model Package Wizard: Model Package AppraisalDAO - New Data Access Object Wizard: New Data Store AppraisalDAO - New Data Access Object Wizard: Select Domain Object AppraisalDAO - New Data Access Object Wizard: Add Domain Objects AppraisalDAO - Data Access Object Editor: Overview AppraisalDAO - Data Access Object Editor: Database Configuration FindAllAppraisals - New Named Query Wizard: New Named Query FindAllAppraisals - Named Query Editor: Overview FindAllAppraisals - Named Query Editor: Inputs/Outputs FindAllAppraisals - Named Query Editor: Query Text org.pam.tutorial.service - New Model Package Wizard: Model Package Skyway Builder - New Service AppraisalService - New Skyway Service Wizard: New Service SaveAppraisal - New Operation Wizard: New Skyway Operation SaveAppraisal - New Operation Wizard: Operation Options SaveAppraisal - Operation Editor: Overview Select Type SaveAppraisal - Operation Editor: Inputs/Outputs Open Action Editor Step Palette SaveAppraisal (Save Action) - Action Editor Properties: Modify Data Access Object Step - Modify org.pam.tutorial.web - New Model Package Wizard: Model Package appraisalentry - New Web Flow Wizard: New Web Flow appraisalentry - New Web Flow Wizard: Create Webflow Domain Model appraisalentry - Web Flow Editor (Blank) AppraisalEntryController - Controller Editor: Variables Adding Events listappraisals - On Entry Action Block listappraisals - Evaluate Action edit - On Entry Action Block Transition - listappraisals to edit validate - If Expression Adding Events Transitions - edit to validate Transition - listappraisals to edit save - Complete save - Complete vi

7 Skyway Builder 6.3 Spring Web Flow Tutorial PAM - Web Flow Diagram listappraisals.jsp - runtime view listappraisals.jsp - New JavaServer Page Wizard: JavaServer Page listappraisals.jsp - New JavaServer Page Wizard: Select JSP Template listappraisals.jsp - full listing edit.jsp - runtime view edit.jsp - full listing confirm.jsp - runtime view confirm.jsp - full listing... vii

8 List of Tables 2.1. Project Wizard Configuration Domain Object: Appraisal Fields Named Query Outputs: FindAllAppraisals Named Query Text: FindAllAppraisals Operation Wizard Configuration: SaveAppraisal Operation Inputs: SaveAppraisal Action Implementation: SaveAppraisal.DefaultAction Flow Instance Variables View State - listappraisals listappraisals - On Entry Actions View State - edit listappraisals - On Entry Actions Decision State - validate Decision State - If Expression View State - confirm Action State - save save - Action Block viii

9 Chapter 1. Introduction 1. What's Covered Welcome to the Skyway Builder Spring Web Flow Tutorial, a step-by-step guide on how to develop a Spring Web Flow application from scratch using Skyway Builder. If you are instead interested in developing a Spring MVC application, please check out the Skyway Builder Spring MVC Tutorial. Both tutorials build the exact same application, but each one leverages a different Spring Framework (Web Flow or MVC) and different set of code generation capabilities from Skyway Builder. The Spring Web Flow tutorial will re-use portions of the Spring MVC tutorial, specifically the data and service layers. Therefore Chapters 2 thru 4 of both tutorials are identical. If you've already completed the Spring MVC tutorial, you can re-use that project for this tutorial and skip directly to Chapter 5 (Web Layer). 2. Suggested Audience This tutorial is intended for developers with familiarity with Java-based web development, Spring Web Flow and Eclipse. It is assumed that the developer has basic experience with running a JEE Application Server and a database management system. 3. Prerequisite Software The prerequisites for completing this tutorial are: Skyway Builder 6.3 Community Edition or 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 the Skyway Builder Sandbox Setup guide or Video Tutorial that can found in the Resources section of the Skyway Community Portal1. 4. What are we going to build? The goal of this tutorial is to provide a step-by-step example of building a Spring Web Flow application using Skyway Builder. This tutorial isn't making use of any Skyway Builder Enterprise Edition features. So this tutorial is applicable to all versions of Skyway Builder, Community Edition (open source) and Enterprise Edition. While the sample application is intentionally limited in scope, it introduces new users to application development using Skyway Builder. The web application that will be implemented is a tool for managing the performance reviews of team members, and the application is called Performance Appraisal Management (PAM) User Story Here's a description of the requirements of PAM using user stories: 1 1

10 Introduction User Stories Reviewer can list all performance appraisals. Reviewer can add a performance appraisal. An appraisal has employee first name, last name, and employee number. An appraisal covers three topics: design, programming, testing. An optional comment can be included for each appraisal. There are three appraisal ratings: 3-does not meet expectations, 2-meets expectations, 1-exceeds expectations. 5. Support If you need help, there is a forum on the Skyway Community portal dedicated to the Skyway Tutorials2. 6. Spring DSL Artifacts Application development using Skyway Builder is accomplished by using (assembling and configuring) Spring DSL artifacts: Figure 1.1. Project Meta-Data Model Within Skyway Builder, there are graphical (and abstract) representations of application components. These components have direct correlations to Java, Spring, JPA, and JEE artifacts

11 Introduction Summary of Spring DSL Artifacts Projects are the top level artifact within the developer's workspace. All other Spring DSL artifacts must be made within a Skyway modeling project. A Model Package is a Spring DSL artifact for namespacing and grouping related Spring DSL components. A model package can contain any top-level Spring DSL elements, including other model packages. Model packages correlate directly to java packages (and UML packages), and Spring DSL artifacts created in a model package will be generated into a matching Java package. A Domain Object is a Spring DSL artifact that defines the domain model of the application. By default a domain object is generated into a plain old java object (POJO). If a domain object is associated with a data access object, then the domain object is annotated as (JPA) annotated class, and it's associated with a primary key class (@IdClass). Fields can be added to domain objects by using the basic data types, and a domain object can have relationships to other domain objects. A Data Access Object (DAO) is a Spring DSL artifact used to separate data access logic from application logic. A DAO manages the persistence of domain objects, and it is generated annotated Spring components, a specialized stereotype for data access layer components. A DAO can also contain predefined queries called Named Queries. A Named Query is a Spring DSL artifact creating predefined queries for the data access objects (DAOs). Named queries are defined using either SQL or JPQL (Java Persistence Query Language), and Named Queries are generated annotations in components. A Service is a Spring DSL artifact that defines a service layer component, and it gets generated into annotated Spring component, a specialized stereotype for service layer components. A Service contains a set of Operations which are generated into Service methods. A Web Controller is a Spring DSL artifact that defines the web layer of an application using Spring MVC. Web Controllers get generated into annotated Spring component, a specialized stereotype for web layer components. A Web Controller contains a set of Operations which are generated into methods for handling web requests. An Operation is a Spring DSL artifact that defines methods for both Services and Controllers. Operations represent application logic, and they use inputs and outputs for exchanging data. Operations are generated directly in the respective Service and Controller classes, and they are generated slightly differently to account for the different implementations needed for the Spring stereotypes. An Actions is a Spring DSL artifact for implementing operations using model-driven development. They are used to implement service and controller operations in Java using drag-n-drop steps that are sequenced together into functionality. A Component is a Spring DSL artifact that defines a generic container for data. A component gets generated into annotated Spring component, a generic stereotype for Spring managed components with configurable scope. Components are typically used as data transfer objects (DTO) and form backing objects. A Flow is used to implement the web layer of an application using Spring Web Flow. Java Server Pages (JSP) are used to implement the Presentation layer of an applicaiton. JSPs are used for both Spring MVC and Spring Web Flow applications. An Exception is a Spring DSL artifact that defines custom exceptions. Exceptions are generated into exception classes in Java. 3

12 Introduction 7. Application Layers This application will be implemented in three layers: The web layer (also referred to as the UI layer) is primarily concerned with presenting the user interface and handling user interactions/events. The Spring DSL artifacts for implementing the web layer of a Spring MVC application are the Controller, Operation, Component, Action, Steps and JSP pages. The Spring DSL artifacts for implementing the web layer of a Spring Web Flow application are the Flows and JSP pages. (This tutorial is concerned with developing a Spring Web Flow application.) The service layer (also referred to as the logic layer or business layer) represents the core functionality of the application being built. The Spring DSL 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 domain model; a distinct set of inter-related application objects that embody the functionality and characteristics of the system being built. This layer also encompasses the persistence of the domain model to and from a database. The Spring DSL artifacts for implementing the data layer are the Domain Object, Data Access Object and Named Query artifacts. 8. Implementation Overview Figure 1.2. End-User View of Application End-User View of Application Step 1: End-user goes to index.html, the starting page of the application. From here the user will see a list of performance appraisals in the database. There is also a New Appraisal hyperlink that the user can click on to start the new appraisal process. 4

13 Introduction Step 2: Clicking on the New Appraisal hyperlink loads the edit page, the appraisal entry form. The enduser enters all the data, and clicks the Next button. Step 3: After clicking on the Next button, the appraisal will be validated on the server. If the appraisal passes validation, the confirm page will load. If the appraisal doesn't pass validation, the edit page will be reloaded. Step 4: From the confirm page, the end-user will confirm that the appraisal should be submitted to PAM system. Step 5: Upon a successful save, the user will be returned to the index page. Figure 1.3. Developer View of Application (Web Flow Diagram) Developer View of Application using Skyway Builder Step 1: Prior to the listappraisals view state (listappraisals.jsp) rendering, there is some data loading that needs to occur. This is accomplished using an On Entry event that calls the findallappraisals named query, and the results are stored in a flowscoped variable called appraisals. Step 2: The "New Appraisal" hyperlink on the listappraisals.jsp page is configured to generate a new event, which will direct the user to the edit view state (edit.jsp). Prior to the view state rendering, a new appraisal object needs to be initialized. This is accomplished using an On Entry event that sets a flow variable called appraisal to "new org.pam.tutorial.domain.appraisal();". Step 3: The end-user will press the "Next" button when finished filling in the appraisal form. The "Next" button is configured to generate a next event, which will direct the flow to the decision state called validate, that will verify that all the required information was entered by the end-user. If all the required info is specified, the end-user will be directed to either the confirm view state (confirm.jsp). Otherwise the end user will return to the edit view state. Step 4: The "Confirm" button on the confirm.jsp page is configured to generate a save event, which will flow to the save action state and call the SaveAppraisal service. Step 5: Upon completion of the save, theend-user will be directed back to the listappraisals view state. Use the following Project Exploter screenshot as a guideline for implementing the project. This screenshot also shows the AppraisalEntryController that is part of the Spring MVC implementation of PAM, but it's not required for the Spring Web Flow implementation. 5

14 Introduction 9. Development Process 9.1. Development Steps Application development with Skyway Builder generally consists of five steps, and this tutorial is structured according to these steps. 6

15 Introduction 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 Deploy - deploy the project 7

16 Chapter 2. Skyway Project This chapter will outline the steps for creating the PAM project. 1. TASK: Create Skyway Project for PAM Skyway Projects are the top level development artifact within Skyway Builder. All other Skyway artifacts must reside inside a Skyway Project. The target project is the project that contains the actual Spring application, a standard Eclipse dynamic web project. The code generated from the Skyway artifacts is generated to the configured target project(s). In many cases (as is the case with PAM) a web application is implemented as a single web project, which contains any and all code and configuration needed to provide its functionality.. 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 the Create Skyway Project Wizard, which is used to specify a name, location and sub-folders to be used for the project. Figure 2.1. Skyway Builder - Create Skyway Project 3. Configure the Create Skyway Project Wizard as follows: 8

17 Skyway Project 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 models: models (default) Artifact Category Mappings Use Maven to create projects for generated code no (default) Figure 2.2. PAM - Create a Skyway Project Wizard: Skyway Project Figure 2.3. PAM - Create a Skyway Project Wizard: Folder Names 9

18 Skyway Project Figure 2.4. PAM - Create a Skyway Project Wizard: Artifact Category Mappings 4. When done, click Finish. You should now have two Eclipse projects: 1. PAM - a modeling project for storing the Skyway models 2. PAM-Web - a dynamic web module project for storing and deploying the generated Spring application 10

19 Chapter 3. Data Layer The data layer (also referred to as the persistence layer or domain object layer) is represented by a domain model; a distinct set of inter-related application objects that embody the functionality and characteristics of the system being built. This layer also encompasses the persistence of the domain model to and from a database. The Spring DSL artifacts for implementing the data layer are the Domain Object and Data Access Object artifacts. This chapter will outline the steps for implementing the data layer for PAM. 1. Model 1.1. TASK: Add org.pam.tutorial.domain Model Package Model Packages are used for grouping related development artifacts into namespaces. Model packages correlate directly to java packages. Spring DSL artifacts created in a model package will be generated into a matching Java package. Steps: 1. Right click on the Spring DSL node in the PAM project, and select New-->Model Package Figure 3.1. Skyway Builder - Create New Model Package 2. From the New Model Package Wizard, enter "org.pam.tutorial.domain" as the package. This will be the name of the new Model Package. 11

20 Data Layer Figure 3.2. org.pam.tutorial.domain - New Model Package Wizard: Model Package 3. When done, click Finish TASK: Add Appraisal Domain Object Domain Objects are used to define domain objects that will be utilized within an application. You can add object attributes by using the basic Domain Objects, and you can also specify relationships to other Domain Objects and their cardinality. Steps: 1. Righ click on the org.pam.tutorial.domain model package, and select New-->Domain Object Figure 3.3. Skyway Builder - Create New Domain Object 2. From the New Domain Object Wizard, enter "Appraisal" for the filename. This will be the name of the new Domain Object. 12

21 Data Layer Figure 3.4. Appraisal - New Domain Object Wizard: New Data Object 3. When done, click Finish. This will open the Domain Object editor. Figure 3.5. Appraisal - Domain Object Editor: Overview 4. From the Overview tab of the Domain Object editor, add the following fields. Table 3.1. Domain Object: Appraisal Fields Display Name Type employeeno Text lastname Text firstname Text ratingdesign Integer Primary Key Yes 13

22 Data Layer Display Name Type ratingprogramming Integer ratingtesting Integer comments LargeText Primary Key Figure 3.6. Appraisal - Domain Object: Appraisal Fields 5. Save the Domain Object using File-->Save. You may also close the editor. 2. Persistence 2.1. TASK: Add org.pam.tutorial.dao Model Package Model Packages are used for grouping related development artifacts into namespaces. Model packages correlate directly to java packages. Spring DSL artifacts created in a model package will be generated into a matching Java package. Steps: 1. Righ click on the Spring DSL node in the PAM project, and select New-->Model Package 2. From the New Model Package Wizard, enter "org.pam.tutorial.dao" as the package. This will be the name of the new Model Package. 14

23 Data Layer Figure 3.7. org.pam.tutorial.dao - New Model Package Wizard: Model Package 3. When done, click Finish TASK: Add AppraisalDAO Data Access Object Data Access Objects are abstract representations of real databases (or persistence mechanisms), and they manage persistence for a set of Domain Objects. When designing the models there is no need to know the detail of the database (vendor, version, IP, etc.), but simply a need to know that one exists for modeling database activity. When models are deployed, the developer late binds each Data Store to a real, physical implementation of a database. Steps: 1. Right click on the org.pam.tutorial.dao model package, and select New-->Data Access Object 2. From the New Data Access Object Wizard, enter "AppraisalDAO" for the filename. This will be the name of the new Data Access Object. Clicking Next to go to the next panel. 15

24 Data Layer Figure 3.8. AppraisalDAO - New Data Access Object Wizard: New Data Store 3. From the Add Domain Object panel, click the Add button, and select the "Appraisal" domain object from the Domain Objects list. Figure 3.9. AppraisalDAO - New Data Access Object Wizard: Select Domain Object 16

25 Data Layer Figure AppraisalDAO - New Data Access Object Wizard: Add Domain Objects 4. When done, click Finish. This will open the Data Access Object editor. Figure AppraisalDAO - Data Access Object Editor: Overview 5. On the Database Configuration tab the database connection should be defaulted to the data connection you created when you performed the Sandbox setup prerequisites. Per the sandbox setup guide, the db connection is called SkywayDB. If you haven't created a connection yet, you can create a new connection from here. 17

26 Data Layer Figure AppraisalDAO - Data Access Object Editor: Database Configuration 6. Save the Data Access Object using File-->Save. 3. Named Queries 3.1. TASK: Add FindAllAppraisals Named Query to Data Access Object Named Queries are a mechanism for predefining queries for the Domain Objects associated with a Data Access Object. Named queries are defined using either SQL or JPQL (Java Persistence Query Language). The benefits of named queries is that the queries are centralized and they can more easily be re-used. Steps: 1. Right click on the AppraisalDAO, and select New-->Named Query 2. From the New Named Query Wizard, enter "FindAllAppraisals" for the name. This will be the name of the new named query. 18

27 Data Layer Figure FindAllAppraisals - New Named Query Wizard: New Named Query 3. When done, click Finish. This will open the Named Query editor. Figure FindAllAppraisals - Named Query Editor: Overview 4. The signature of the named query is specified on the Inputs/Outputs tab. Add an output variable per the following table. Adding input or output variables is very similar to adding variables to a project. As you add variables, the type picker will show you the Skyway Basic types plus the Domain Objects of any open Skyway projects. Table 3.2. Named Query Outputs: FindAllAppraisals Name appraisals Type Appraisal 19 Collection Yes

28 Data Layer Figure FindAllAppraisals - Named Query Editor: Inputs/Outputs 5. The query is specified on the Query Text tab, and it defines the query in either SQL or JPQL.. Configure the query according to the following table. Table 3.3. Named Query Text: FindAllAppraisals Field Value Query Type JPQL Query Text select allappraisals from Appraisal allappraisals Figure FindAllAppraisals - Named Query Editor: Query Text 6. Save the named query using File-->Save. 20

29 Chapter 4. Service Layer The service layer (also referred to as the logic layer or business layer) represents the core functionality of the application being built. The Spring DSL 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 is intended to handle all persistence logic associated with saving an appraisal. For the tutorial the logic is very basic; the appraisal will simply be persisted to a database. However as the application requirements change in the future, you can add additional functionality (i.e. checking for duplicate entries, sending notifications, updating HR system). 1. Model 1.1. TASK: Add org.pam.tutorial.service Model Package Model Packages are used for grouping related development artifacts into namespaces. Model packages correlate directly to java packages. Spring DSL artifacts created in a model package will be generated into a matching Java package. Steps: 1. Righ click on the Spring DSL node in the PAM project, and select New-->Model Package 2. From the New Model Package Wizard, enter "org.pam.tutorial.service" as the package. This will be the name of the new Model Package. 21

30 Service Layer Figure 4.1. org.pam.tutorial.service - New Model Package Wizard: Model Package 3. When done, click Finish TASK: Add AppraisalService to Project A Skyway Service is a container for logic. Before defining an implementing the logice, the Service needs to be created. Steps: 1. Right click on org.pam.tutorial.service model package, and select New-->Service Figure 4.2. Skyway Builder - New Service 2. From the New Skyway Service Wizard, enter "AppraisalService" for the filename. This will be the name of the new service. The container for this service should be the project (PAM). If the project is not highlighted, then select the project. 22

31 Service Layer Figure 4.3. AppraisalService - New Skyway Service Wizard: New Service 3. When done, click Finish TASK: Add SaveAppraisal Operation Service functions are specified as Operations, which represent stateless application logic. In addition to a name and description, the operation definition consists of an operation interface and operation resources. The actual application logic of an operation is implemented using Actions (which will be covered in a later task). In the case of PAM, the approval logic is implemented as a Service. It could have been implemented in the web layer, but it would have (a) limited the reusability of the logic, and (b) not given you a chance to implement a Service. Steps: 1. Right click on the AppraisalService service, and select New-->Operation 2. Configure the Create Skyway Operation 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: DefaultAction 23

32 Service Layer Figure 4.4. SaveAppraisal - New Operation Wizard: New Skyway Operation Figure 4.5. SaveAppraisal - New Operation Wizard: Operation Options 3. When done, click Finish. This will open the Operation editor. 24

33 Service Layer Figure 4.6. SaveAppraisal - 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 or more 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, and you can also have the action preconfigured as the entry point TASK: Define Operation Input/Output Variables Inputs and Output variables partly define the operation contract. When another application artifact wants to call an operation, it must pass in the input variables and accept the output variables. In the case of the SaveAppraisal operaton, 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 input and output variables is very similar to adding variables to a project. As you add variables, the type picker will show you the Skyway Basic types plus the Domain Objects of any open Skyway projects. 25

34 Service Layer Figure 4.7. Select Type Table 4.2. Operation Inputs: SaveAppraisal Name inappraisal Type Appraisal Collection No Figure 4.8. SaveAppraisal - Operation Editor: Inputs/Outputs 2. Save the operation using File-->Save. 26

35 Service Layer 1.5. TASK: Create Save Action While the operation defines the interface and resources needed for an application function, the functionality is actually implemented using Actions. The developer defines the logic to be performed by sequencing steps together. Adding actions to the an operation is normally accomplished by right-clicking on the Operation, and selectidng "New-->Action". However during the creation of the operation, we were given the option to have an action automatically created and preconfigured as the entry point. If you expand the SaveAppraisal operation, you will see the "DefaultAction" action. Steps: 1. Open the Save action by double-clicking on the action in the Project Explorer. This will open the Action editor. Figure 4.9. Open Action Editor 2. From here you will model the implementation of the operation. In this case the operation will be implemented with one step, so it can be modeled using only the entry-point action. However in other cases, as described earlier, you may choose to decompose the logic into multiple actions that are strung together by the entry-point action. To implement the Action, open the step palette. 27

36 Service Layer Figure Step Palette 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 Access Object step and then click 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 open the step properties. Configure the step properties using the following table as a reference. Table 4.3. Action Implementation: SaveAppraisal.DefaultAction Step Name Step Type Persist Appraisal Configuration Properties-->Modify Tab Data Access Object: AppraisalDAO Modify Data Access Object Operation: Update Operation Input: inappraisal Stop Stop Note Optional Text: "This action persists the appraisal to the data source." 28

37 Service Layer 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 SaveAppraisal (Save Action) - Action Editor Figure Properties: Modify Data Access Object Step - Modify 29

38 Chapter 5. Web Layer The web layer (also referred to as the UI layer) is primarily concerned with presenting the user interface and implementing the behavior of the application. The Spring DSL artifacts for implementing the web layer of a Spring Web Flow application are Web Flows and JSP pages. A Spring MVC application uses a different set of artifacts (see the Skyway Builder Spring MVC Tutorial). This chapter will outline the steps for implementing the web layer of PAM using Spring Web Flow. 1. Flow 1.1. TASK: Add org.pam.tutorial.web Model Package Model Packages are used for grouping related development artifacts into namespaces. Model packages correlate directly to java packages. Spring DSL artifacts created in a model package are typically generated into a matching Java package. Steps: 1. Righ click on the Spring DSL node in the PAM project, and select New-->Model Package 2. From the New Model Package Wizard, enter "org.pam.tutorial.web" as the package. This will be the name of the new Model Package. 30

39 Web Layer Figure 5.1. org.pam.tutorial.web - New Model Package Wizard: Model Package 3. When done, click Finish TASK: Add appraisalentry Web Flow As described earlier Web Flows 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 the web layer, and Web Flows handle the orchestration of the web application. Steps: 1. Create a folder for storing the flow domain model. In the WEB-INF folder create a folder called flows. In the flows folder create a folder called appraisalentry. The new flow will be stored in WebContent \WEB-INF\flows\appraisalentry. 2. Right click on org.pam.tutorial.web project, and select New-->Web Flow 3. From the New Web Flow Wizard, enter "appraisalentry" for the filename. This will be the name of the web flow diagram. The container for this flow should be the project (PAM). If the project is not highlighted, then select the project. When done, click Next. 31

40 Web Layer Figure 5.2. appraisalentry - New Web Flow Wizard: New Web Flow 4. From the Create Webflow Domain Model panel, you are prompted for the name and location of the domain model. As you make changes to the web flow diagram, the flow domain model will be updated with Spring Web Flow specific content. The domain model is what's deployed with your application and interpretted by the Spring Web Flow framework. That's why it must be located in the directory created in step 1. 32

41 Web Layer Figure 5.3. appraisalentry - New Web Flow Wizard: Create Webflow Domain Model 5. When done, click Finish. This will open the Web Flow editor. Figure 5.4. appraisalentry - Web Flow Editor (Blank) 1.3. TASK: Add Instance Variables Instance variables are variables that are allocated when the flow starts, and they are for specifying data that can be shared across all steps in a flow. For PAM we need a single instance variable for storing the appraisal being entered. Steps: 1. From the Flow configuration element, add an Instance variable (Variables) according to the following table. Variables are added by press the + symbol beside Variables. 33

42 Web Layer Table 5.1. Flow Instance Variables Name Class appraisal 2. org.pam.tutorial.domain.appraisal Figure 5.5. AppraisalEntryController - Controller Editor: Variables TASK: Add listappraisals View State A View state defines a step of the flow that renders a view, and the view state is configured with the JSP that will render the view. The first view of the application is listappraisals that will display a table of previously save appraisals. However before listappraisals can be rendered, the appraisal data must be loaded. This is accomplished by setting an On Entry event on the view state that will make a direct call to the DAO to retrieve the data. The listappraisals view state is configured with the JSP that will render the view. The actual implementation of the JSP will be covered in a later section. Steps: 1. Click on the View State in the Web Flow States drawer of the Web Flow palette, and then click on the location of the flow diagram where you want to place it. 2. Configure the View State according the following table Table 5.2. View State - listappraisals Relevant Attributes Configuration Name listappraisals View listappraisals.jsp Description the jsp that will render the view 3. Next you need to add an On Entry event to listappraisals view state. Start by clicking on the Event arrow from the Web Flow palette. Next single click on the view state you want to add an entry event to, and then click anywhere outside the view state. You will be presented with a list of events that are available to the selected state. In the case of a View State, you can add an On Entry, On Render and On Exit events.. 34

43 Web Layer Figure 5.6. Adding Events 4. Click on the Create On Entry Event. An action block will be placed on the diagram, and it is used for defining any on entry actions you want to perform. The action block can relocated by dragging to other areas of diagram. Figure 5.7. listappraisals - On Entry Action Block 5. At the top right hand corner of an action block are three icons for adding adding either evaluate, set or render actions. For listappraisals you need to add an evaluate action (first icon), and the action needs to be configured according to the following table: Table 5.3. listappraisals - On Entry Actions Action Type Configuration evaluate Expression: AppraisalDAO.findAllAppraisals(0,-1) Result: flowscope.appraisals Type: <blank> 35

44 Web Layer Figure 5.8. listappraisals - Evaluate Action 6. The listappraisals View State has been configured TASK: Add edit View State The second step of the flow is another View State called edit, which is where the end-user will be prompted to enter the details of a new appraisal. Prior to the view state rendering, a new appraisal object needs to be initialized. This is accomplished using by setting an On Entry event on the view state, very similar to the listappraisals state. The edit view state isn't configured with a JSP to render the view. If a JSP isn't specified, Spring Web Flow will by default find and use a JSP with the same name in the same folder that the flow domain model (appraisalentry.xml) is located. This is great example of Spring Web Flow's use of convention over configuration. Of course if you want to use a different JSP, you can configure it. The actual implementation of the edit.jsp will be covered in a later section. Steps: 1. Click on the View State in the Web Flow States drawer of the Web Flow palette, and then click on the location of the flow diagram where you want to place it. 2. Configure the View State according the following table Table 5.4. View State - edit Relevant Attributes Name Configuration Description edit 3. Next you need to add an On Entry event to the edit view state. Refer back to listappraisals view state for detailed instructions on adding and configuring On Event actions. 4. Add the following actions to the On Entry action block. Table 5.5. listappraisals - On Entry Actions Action Type Configuration set Name: appraisal 36

45 Web Layer Action Type Configuration Value: new org.pam.tutorial.domain.appraisal() Type: <blank> Figure 5.9. edit - On Entry Action Block 5. The edit View State has been configured. While there are still more steps in the flow, now is a good time to define the transitions in the listappraisals state that will navigate the end-user to the edit state. To add a transition, click on the Transition arrow from the Web Flow palette. Next single click on the listappraisals state and then click on the edit state. This will create a transition line between the two states to represents the transition. The only left to configure is the event id for this transition. Web controls on the JSP that render a View State are configured to fire events (using an event id) as the end-user interacts with the application. Spring Web Flow uses the event ids to determine the flow of the application. The event id for this transition line is called new. Therefore the event id on the transition line should be new. Figure Transition - listappraisals to edit 1.6. TASK: Add validate Decision State A Decision state is a step for routing the flow based on the result of an if/else expression. In PAM a decision state will be used to verify that an employee number was entered by the end-user. If so, the decision state will progress to the next step of the flow (confirm). If not, the decision state will return to the edit state. 37

46 Web Layer Steps: 1. Click on the Decision State in the Web Flow States drawer of the Web Flow palette, and then click on the location of the flow diagram where you want to place it. 2. Configure the Decision State according the following table Table 5.6. Decision State - validate Relevant Attributes Name Configuration Description validate 3. Next you will need to an if expression to the decision state. If expressions are added by press the + symbol beside If. Configure the if expression according the following table: Table 5.7. Decision State - If Expression Expression appraisal.employeeno!= "" Figure validate - If Expression 4. The validate Decision State has been configured. Next add a next transition from edit to validate states. In the scenario where the decision state expression evaluates to false, you also need to configure the decision states else transition to edit state. When you configure a transition from a decision state, you won't be prompted to type in an event id. Instead you will presented with an option for each if expression added to the decision state and an else option. Figure Adding Events 38

47 Web Layer Figure Transitions - edit to validate 1.7. TASK: Add confirm View State The fourth step of the flow is another View State called confirm, which is where the end-user will be asked to reverify the data they've entered (that has passed validation by the application) prior to persisting it to the database. The confirm view state isn't configured with a JSP to render the view. Spring Web Flow will look for a JSP called confirm.jsp in the same folder as the flow domain model (appraisalentry.xml) is located. Steps: 1. Click on the View State in the Web Flow States drawer of the Web Flow palette, and then click on the location of the flow diagram where you want to place it. 2. Configure the View State according the following table Table 5.8. View State - confirm Relevant Attributes Name Configuration Description confirm The confirm View State has been configured. Next add another transition from the validate state to the confirm state. There is only one remaining transition line available from the decision state, and it corresponds to the if expression (appraisal.employeeno!= ""). 39

48 Web Layer Figure Transition - listappraisals to edit 1.8. TASK: Add save Action State An Action state is a step for invoking an action and routing to another state based on the result of the action. For the PAM application, the Action State will persist the flow using the SaveAppraisal operation defined earlier in the tutorial. Upon completion, the Action State will transition to the listappraisals state. Steps: 1. Click on the Action State in the Web Flow States drawer of the Web Flow palette, and then click on the location of the flow diagram where you want to place it. 2. Configure the Action State according the following table Table 5.9. Action State - save Relevant Attributes Name Configuration Description save 3. At the top right hand corner of an action state element three are icons for adding adding either evaluate, set or render actions. For save step need to add an evaluate action (first icon), and the action needs to be configured according to the following table: Table save - Action Block Action Type Configuration evaluate Expression: AppraisalService.saveAppraisal(appraisal) Result: <blank> Type: <blank> 40

49 Web Layer Figure save - Complete 4. The save Action State has been configured. There are still two transitions that need to be configured. Add a save transition from confirm state to save state, and add a success transition from the save state to listappraisals state. Figure save - Complete 5. The flow is complete and can be save. If you prefer you can change the background colors for each of the steps. Here's the completed flow diagram. Figure PAM - Web Flow Diagram 41

50 Web Layer 2. View - JSP Pages The 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 Components that were defined in 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 TASK: Create listappraisals.jsp Page The following figure shows how the listappraisals.jsp page will look to the end-user of PAM. Figure listappraisals.jsp - runtime view Steps for creating listappraisals.jsp: 1. Right click on WebContent\WEB-INF\flows\appraisals folder of the PAM-Web project, and select New-->JSP. This will open the New JavaServer Page Wizard. 2. Enter listappraisals.jsp as the filename, and click the Next button. 42

51 Web Layer Figure listappraisals.jsp - New JavaServer Page Wizard: JavaServer Page 3. Select Skyway JSP File (html) as the template, and click the Finish button. Figure listappraisals.jsp - New JavaServer Page Wizard: Select JSP Template 43

52 Web Layer 4. The pages are comprised of a combination of html and Skyway web controls. Using the Web Control palette, build the page according to the following listing. Following the listing there 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 "{flowexecutionurl}", a Spring Web Flow variable that resolves to the URI of the current view state. <skyway:form action="${flowexecutionurl}" commandname="">...form Contents... </skyway:form> HTML Input ( <input> ) - used to provide the user a button to click. The type should be set to "submit". The value attribute is configured with "New", the title of the button. To configure the button to fire the new event that was defined for the listappraisals state, the name should be set to "_eventid_new". <input type="submit" name="_eventid_new" value="new" /> Skyway Iterator ( <skyway:iterator> ) - used to define a fragment that should be repeated for as many objects that exist in the collection. This is very useful for listing the contents of a collection. The items attribute is configured with "${appraisals}", the flowscope variable that was defined in the On Entry event for storing the results of the findallappraisals query. The var attribute is configured to "current", a variable that is used by embedded web controls (see label) to reference an individual object as the collection is iterated. <skyway:iterator items="${appraisals}" var="current"> Skyway Label ( <skyway:label> ) - used to output the value of a variable. The value attribute is configured with the variable that should be output. Since this label is referencing a variable from an iterated collection, the variable is referenced as "current.", the var attribute from the iterator web control. <skyway:label value="${current.employeeno}"></skyway:label> 44

53 Web Layer Figure listappraisals.jsp - full listing <%@taglib uri=" prefix="skyway"%> <%@ page language="java" contenttype="text/html; charset=iso " pageencoding="iso "%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso "> <title>insert title here</title> </head> <body> <skyway:form action="${flowexecutionurl}" commandname=""> <input type="submit" name="_eventid_new" value="new" /> </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="${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> 2.2. TASK: Implement edit.jsp Page The following figure shows how the edit.jsp page will look to the end-user of PAM. Figure edit.jsp - runtime view 45

54 Web Layer Steps for implementing edit.jsp: 1. Create another JSP page called edit.jsp using Skyway JSP File (html) as the template. 2. Using the Web Control palette, build the page according to the following listing. Following the listing there 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 "{flowexecutionurl}", a Spring Web Flow variable that resolves to the URI of the current view state. The commandname is configured with appraisal, the instance variable that was created in the flow that represents the command object for this form. <skyway:form action="${flowexecutionurl}" commandname="appraisal">...form Contents... </skyway:form> Skyway Input ( <skyway:input> ) - used to solicit input from the user. The path attribute is the path of the variable that the field should be bound to. It should be an attribute of the command object configured on the form. (i.e. appraisal.employeeno) <skyway:input path="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 field should be bound to. Once again, it should be an attribute of the command object configured on the form. (i.e. appraisal.ratingdesign). <skyway:dropdown path="ratingdesign">...options... </skyway:dropdown> Skyway Option ( <skyway:option> ) - used to specify a preset value for the dropdown control. The label attribute is displayed to the end user, and the value attribute is the value that's submitted for the 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 is the path of the variable that the field should be bound to. (i.e. appraisal.comments) <skyway:textarea path="comments"></skyway:textarea> HTML Input ( <input> ) - used to provide the user a button to click. The type should be set to "submit". The value attribute is configured with "Next", the title of the button. To configure the button to fire the next event that was defined for the listappraisals state, the name should be set to "_eventid_next". <input type="submit" name="_eventid_next" value="next" /> 46

55 Web Layer Figure edit.jsp - full listing <%@ page language="java" iselignored="false" contenttype="text/html; charset=iso " pageencoding="iso "%> <%@taglib uri=" prefix="skyway"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso "> <title>insert title here</title> <skyway:javascript src="prototype.js"/> <skyway:javascript src="skyway-internal.js"/> <skyway:javascript src="skyway.js"/> </head> <body> <skyway:form action="${flowexecutionurl}" commandname="appraisal"> Employee No <skyway:input path="employeeno"></skyway:input> <br> Last Name <skyway:input path="lastname"></skyway:input> <br> First Name <skyway:input path="firstname"></skyway:input> <h2>ratings:</h2> Design <skyway:dropdown path="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="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="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="comments"></skyway:textarea> <br> <input type="submit" name="_eventid_next" value="next" /> </skyway:form> </body> </html> 2.3. TASK: Implement confirm.jsp Page The following figure shows how the confirm.jsp page will look to the end-user of PAM. 47

56 Web Layer Figure confirm.jsp - runtime view Steps for implementing confirm.jsp: 1. Create another JSP page called confirm.jsp using Skyway JSP File (html) as the template 2. Using the Web Control palette, build the page according to the following listing. Following the listing there 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 "{flowexecutionurl}", a Spring Web Flow variable that resolves to the URI of the current view state. <skyway:form action="${flowexecutionurl}" commandname="">...form... </skyway:form> HTML Input ( <input> ) - used to provide the user a button to click. The type should be set to "submit". The value attribute is configured with "Nexy", the title of the button. To configure the button to fire the next event that was defined for the listappraisals state, the name should be set to "_eventid_next". <input type="submit" name="_eventid_save" value="save" /> Skyway Label ( <skyway:label> ) - used to output the value of a variable. The value attribute is configured with the variable that should be output. This label is referencing a flow-scoped variable called appraisal. <skyway:label value="${appraisal.firstname}"></skyway:label> 48

57 Web Layer Figure confirm.jsp - full listing <%@ page language="java" contenttype="text/html; charset=iso " pageencoding="iso "%> <%@taglib uri=" prefix="skyway"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso "> <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="${appraisal.firstname}"></skyway:label> <skyway:label value="${appraisal.lastname}"></skyway:label> <br> <skyway:form action="${flowexecutionurl}" commandname=""> <input type="submit" name="_eventid_save" value="save" /> </skyway:form> </body> </html> 49

58 Chapter 6. Deployment Here is a brief description of the setup of the runtime environment. This topic is described in greater detail in the Sandbox Setup guide that is available in the Resources section of the Skyway Community Portal1. 1. Configure Database 1.1. Add Data Source In Eclipse you will add a data source that you will use for your running applications. This can be done using the Data Source Explorer view in Eclipse Configure Data Access Object in Project For the AppraisalDAO Data Access Object in the project, go to Database Configuration tab and configure the database connection with the data source you created in the Data Source Explorer. 2. Configure Server 2.1. Add Server In Eclipse you will add a Server that you will use for your running applications. This can be done using the Servers view in Eclipse Add PAM Project to Server The project can be added to the server by right-clicking on the Server at selecting the "Add and Remove Projects" menu item. The PAM project should be added to the server. 3. Run Application 3.1. Start Server When you start the server, the application should be deployed to the server Run Application Here's the URL for the application: