This example uses a simple two-page form to enter data for a simulated email message.
Start the example here.
Although a two-page form does not make sense for three fields when run from a desktop browser, this demonstrates how the Flow makes it easy to keep track of the user's "position" in the application flow. Just imagine you're working on a tiny mobile device for a minute.
We won't use Cocoon Forms here, but simply bind a JavaScript object to our form manually.
Notice how little code is needed to keep state while the user can freely move between the pages without losing data.
There's nothing new in the sitemap, our use of variables allows the exact same sitemap to be reused for both our Flow examples.
The only specific thing is the importing of the multi-page.js Flowscript, but this was already present for the previous example:
Here's the Flowscript which drives the multi-page form example:
0002 * Licensed to the Apache Software Foundation (ASF) under one or more
0003 * contributor license agreements. See the NOTICE file distributed with
0004 * this work for additional information regarding copyright ownership.
0005 * The ASF licenses this file to You under the Apache License, Version 2.0
0006 * (the "License"); you may not use this file except in compliance with
0007 * the License. You may obtain a copy of the License at
0008 *
0009 * http://www.apache.org/licenses/LICENSE-2.0
0010 *
0011 * Unless required by applicable law or agreed to in writing, software
0012 * distributed under the License is distributed on an "AS IS" BASIS,
0013 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
0014 * See the License for the specific language governing permissions and
0015 * limitations under the License.
0016 */
0018 // Multi-page Flow example
0019 // Simple multi-page form, without using Cocoon Forms
0021 var date = new Packages.java.util.Date();
0023 // simulated email message data
0024 function MessageData() {
0025 this.sender = "you@somewhere.com";
0026 this.subject = "Type the subject here";
0027 this.text = "Type the text of your message here";
0028 }
0030 // page flow
0031 function public_startMultiPage() {
0032 var message = new MessageData();
0034 while(true) {
0036 // decide which page to show based on request parameters
0037 var page = "page1";
0038 if(cocoon.request.getParameter("action_send") != null) {
0039 break;
0040 } else if(cocoon.request.getParameter("action_page2") != null) {
0041 page = "page2";
0042 }
0044 // show form and wait for results
0045 cocoon.sendPageAndWait("multi-page/views/" + page, { "message" : message, "date" :
date });
0047 // now for the boring part: copy form data into message
0048 // that's where Forms bindings would help
0049 var tmp = cocoon.request.getParameter("sender");
0050 if(tmp != null) message.sender = tmp;
0052 tmp = cocoon.request.getParameter("subject");
0053 if(tmp != null) message.subject = tmp;
0055 tmp = cocoon.request.getParameter("text");
0056 if(tmp != null) message.text = tmp;
0057 }
0059 // user selected "send", show message contents
0060 cocoon.sendPage("multi-page/views/result", { "message" : message });
0061 }
It is not more complicated than the previous example, but slightly longer due to the (boring) copying of request parameters into the message object. This boring part is where Cocoon Forms will come into play, by making it easier to bind data to values edited in a form.
By copying values into the message object after each submission, we allow the user to freely move between pages without losing data.
Nothing special in the form view, this is very similar to the previous example.
We're only using two submit buttons, one to move between pages and one to actually submit the data and go to the result page.
This is page 1. The page 2 is similar but shows the text field instead of the fields present on page 1.