Navigation in Web Pals - Working with Workflow

From ContractPal

This is an application note on using ContractPal to achieve certain things. It is not intended to be a comprehensive solution.

This application note shows how implement a simple navigation scheme in a Web Pal using standard HTML and Web work flow. Of course, you can implement a lot more challenging and satisfying navigation schemes using HTML, CSS and JavaScript. Web Pals pretty much let you do whatever you want on the client while leveraging ContractPal to serve up your pages. While you could implement full blown web sites using Web Pals, they are intended primarily to provide a mechanism to market services that result in ContractPal transactions.

Anyway, let's get started. Suppose I wanted to display a very simple page with a navigation menu that allows a user to choose from Menu 1 and Menu 2. When a Menu is selected, the menu would show content specific to that menu. Let's start with our main page, we'll call in index.html:

<html xmlns:c="contractpal">
<head>
<title>index</title>
</head>
<body>
    <c:fragment name="menu"/>
    <div>
        <c:fragment name="1" test="${menu=='1'}"/>
        <c:fragment name="2" test="${menu=='2'}"/>
    </div>
</body>
</html>

Note that we are using three fragments. Fragments are snippets of xHTML. Our first fragment includes our menu. Here's the code:

<div xmlns:c="contractpal">
    <a href="show.html?menu=1">Menu1</a> <a href="show.html?menu=2">Menu2</a>
</div>

The "xmlns" reference is added by ContractPal to allow ContractPal to handle it's specific tags (e.g., <c: />). The anchor is a standard anchor with, perhaps, the exception of the href. In our case, we want to pass to our web work flow either menu 1 or menu 2 depending on which link is clicked by the user. We do that by passing in a page, which could be pretty much anything - in our case we have chosen show.html. This is simply passing data on the query string in a standard manner. You will recall that the query string containing the values to be passed is separated from the address of the page (our show.hmtl page for example) that we are passing the parameters to by a question mark (?), each parameter being passed is separated from the next by an ampersand (&), the name of each field is separated from the value of the field by an equals sign (=), and any non alphanumeric characters in the field values are "escaped" (e.g. spaces are replaced by %20).

So, in our case, we're going to pass the name/value pairs of "menu" equals "1" for the first link and "menu" equals "2" for the second link.

Now, let's move on to showing the right content based upon the user selecting either menu 1 or menu 2. In our case, we're going to implement the content using fragments. Again, our fragment references (from index.html) are as follows:

<c:fragment name="1" test="${menu=='1'}"/>
<c:fragment name="2" test="${menu=='2'}"/>

And, the content of our fragments is very simple. Fragment "1":

<div style="color:blue;font-size:24pt" xmlns:c="contractpal">
    This is menu 1
</div>

And Fragment "2":P

<div style="color:red;font-size:18pt" xmlns:c="contractpal">
    This is menu 2
</div>

Now, let's turn to our work flow. Our work flow brings everything together. It displays the page, shows the menu and then based upon which link is clicked, returns a page to the browser with want we want the user to see. Here's our work flow:

 1:  var c;
 2:  function run(controller)
 3:  {
 4:    c = controller;
 5:    var page = c.getPage("index");
 6:    var menu = c.getRequest().getValue("menu");
 7:    if (menu==null)
 8:    {
 9:        menu="1";
10:    }
11:    page.setValue("menu",menu);
12:    return page;
13:  }

Pretty simple, right? Let's go through it, line by line:

1: This sets a variable so we can tie the variable to the web pal controller.
2: This is our main run function. It is called every time a page is requested from the ContractPal server farm.
4: We set the web controller to "c" so we can reference ContractPal created objects simply by "c" instead of "controller." You don't have to do this but it allows the Webstart client to provide code completion for work flow.
5: We get our main page here.
6: Here we get the data in the page. We use the work flow request object and we key of our "menu" name/value pair.
7-10: We check to see if when the page loads, menu has no value. When index.html is rendered for the first time, it will have no value. By doing this, we make sure that Menu 1 is displayed the first time.
11: Here's where the "magic" happens. We use the page object to set a page value for "menu." ContractPal gets the value from our anchors through the request object. For example, if the user clicks the "Menu 1" link, the page name/value pair for menu is "menu" = "1". Using the page object, the test="${menu=='1'}" and test="${menu=='2'}" parts of our fragments are evaluated and replaced as the page is served up with the contents of the appropriate content.

We hope that this application note has been helpful.

Thanks for using ContractPal!

Retrieved from "http://devhelp.contractpal.com/Navigation_in_Web_Pals_-_Working_with_Workflow"