1. WebFlow example: Online Purchase Process

2. Control-Unit Modeling level Implementation level *** Struts code *** Control Unit Application Action Send Warning: “No Such Artist” If search returns empty result Development level Buy product / checkout High-Level Workflow Ship product Search by artist Add product to cart Cart content (Jsp page) Search page (Jsp page) Artist, Genre Identify type of search Search by genre Search results (Jsp page) Product ID, Quantity Search products and add to cart X Backorder product Not in stock In stock If Artist is not null If Genre is not null Warning: “No Such Artist” Data preparation true false Yannis Papakonstantinou: In Data Retrieval Unit display the tables and variables textually, see comment later Yannis Papakonstantinou: In Data Retrieval Unit display the tables and variables textually, see comment later Yannis Papakonstantinou: Let’s use for different shapes for the data retrieval, application, condition and dispatch, so that one can understand which one is which without needing to read text (we also save space) Yannis Papakonstantinou: Let’s use for different shapes for the data retrieval, application, condition and dispatch, so that one can understand which one is which without needing to read text (we also save space)

3. 2. Drill-down operation Interactive demo Click on the elements marked with to zoom in Click

4. Workflow diagram Interactive demo Buy product / checkout Ship product Search products and add to cart X Backorder product Not in stock In stock Click

5. Search products activity Back to WF You are here: Interactive demo Buy product / checkout Ship product Search products and add to cart X Backorder product Not in stock In stock Search by artist Add product to cart Cart content (Jsp) Search page (Jsp) Artist, Genre Verify type of search Search by genre Search results (Jsp) ProductID, Quantity Search products and add to cart Click If Artist is not null If Genre is not null Click

6. Check product availability Back to WF Interactive demo You are here: Click Buy product / checkout Ship product Search products and add to cart X Backorder product Not in stock In stock

7. Search by artist control unit Data Retrieval: Action: none Dispatch: Data prepar. Back to WF Back to units Interactive demo You are here: Data retrieval consists in QBE-like queries Click Buy product / checkout Ship product Search products and add to cart X Backorder product Not in stock In stock Products IDTitle……  Yannis Papakonstantinou: On the Data Retrieval let’s simply list in text the tables, variables and their types. We waste too much space by drawing tables. I suggest: TABLE Products(ID Integer, Title VARCHAR(255),…) And similarly for the variables: String Artist; Yannis Papakonstantinou: On the Data Retrieval let’s simply list in text the tables, variables and their types. We waste too much space by drawing tables. I suggest: TABLE Products(ID Integer, Title VARCHAR(255),…) And similarly for the variables: String Artist;

8. Check product availability unit Control unit Data Retrieval: Action: none Dispatching Data prepar. Back to WF Back to units Interactive demo You are here: Data prepar. Click Data retrieval consists in QBE-like queries. Dispatching conditions can be built by drag and drop from the Data retrieval step and from the activity in the workflow Buy product / checkout Ship product Search products and add to cart X Backorder product Not in stock In stock Products IDTitle…… 

9. SearchResults.jsp page Back to WF Interactive demo You are here: JSP pages are opened and developed with commercial editors (e.g. Macromedia Dreamweaver, Microsoft Frontpage,…) Back to units Buy product / checkout Ship product Search products and add to cart X Backorder product Not in stock In stock

10. Dispatching condition editor Example: Product.Availability >= OrderedQuantity Back to WF You are here: Back to unit Buy product / checkout Ship product Search products and add to cart X Backorder product Not in stock In stock Interactive demo

11. SQL visual data retrieval Back to WF You are here: Back to unit Buy product / checkout Ship product Search products and add to cart X Backorder product Not in stock In stock Variables $Artist $Genre $User … Interactive demo

12. XML visual data retrieval Back to WF You are here: Back to unit Buy product / checkout Ship product Search products and add to cart X Backorder product Not in stock In stock Interactive demo