COB-INF.flow.docs.multi-page.xml Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of cocoon-tour-sample
The newest version!
<?xml version="1.0" encoding="iso-8859-1"?>

<!--
  Licensed to the Apache Software Foundation (ASF) under one or more
  contributor license agreements.  See the NOTICE file distributed with
  this work for additional information regarding copyright ownership.
  The ASF licenses this file to You under the Apache License, Version 2.0
  (the "License"); you may not use this file except in compliance with
  the License.  You may obtain a copy of the License at

      http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
-->

<page
    xmlns:cinclude="http://apache.org/cocoon/include/1.0"
>
    <content>
        <p>
            This example uses a simple two-page form to enter data for a simulated
            email message.
        </p>
        <p>
            Start the example <a href="../multiPageForm/startMultiPage">here</a>.
        </p>
        <p>
            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.
        </p>
        <p>
            We won't use Cocoon Forms here, but simply bind a JavaScript object
            to our form manually.
        </p>
        <p>
            Notice how little code is needed to keep state while the user
            can freely move between the pages without losing data.
        </p>

        <h2>The sitemap</h2>
        <p>
            There's nothing new in the sitemap, our use of
            variables allows the exact same sitemap to be reused for
            both our Flow examples.
        </p>
        <p>
            The only specific thing is the importing of the multi-page.js
            Flowscript, but this was already present for the previous
            example:
            <cinclude:include element="xml-code" src="cocoon:/xml-element/flow/sitemap.xmap/flow"/>
        </p>

        <h2>Flowscript code</h2>
        <p>
            Here's the Flowscript which drives the multi-page form example:
            <cinclude:include element="flowscript-code" src="cocoon:/text-file/flow/multi-page/multi-page.js"/>
        </p>
        <p>
            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 <em>bind</em> data to
            values edited in a form.
        </p>
        <p>
            By copying values into the <em>message</em> object after each
            submission, we allow the user to freely move between pages
            without losing data.
        </p>

        <h2>JXTemplate view</h2>
        <p>
            Nothing special in the form view, this is very similar to the
            previous example.
        </p>
        <p>
            We're only using two submit buttons, one to move between pages
            and one to actually submit the data and go to the <em>result</em>
            page.
        </p>
        <cinclude:include element="xml-code" src="cocoon:/xml-element/flow/multi-page/page1.xml/page"/>
        <p>
            This is page 1. The page 2 is similar but shows the <em>text</em>
            field instead of the fields present on page 1.
        </p>
    </content>
</page>