Clickframes

You may define a default destination when users first access your application, like a web site's "index" page. Use the defaultPage attribute in the appspec element.

<appspec defaultPage="home"> ... </appspec>

Inputs of type checkbox, radio, dropdown, or multiple should contain one or more option elements, specifying the options available for the user to select.

<input type="radio">
  <title>Your Favorite Ice Cream Flavor</title>
  <option value="chocolate">Double Chocolate Chunk</option>
  <option value="vanilla">French Vanilla Bean</option>
  <option value="strawberry">Sweet Summer Strawberry</option>
  <default value="chocolate" />
</input>

Use the default tag to specify an option to be selected by default. For inputs of type dropdown and radio, Clickframes will assume the first option is default if a default is not explicitly specified.

User-supplied data may be validated against rules you define within each input element using the validation tag. Validations must define a type attribute:

<input type="text">
  <title>Your E-mail Address</title>
  <validations>
    <validation type="required" />
    <validation type="email" />
  </validations>
</input>

Each validation may also include a description attribute to specify the message to display when the validation fails.

<input type="password">
  <title>New Password</title>
  <validations>
    <validation type="required" description="Please enter a new password." />
  </validations>
</input>

Validations of type length and regex require additional parameters provided within parentheses as part of the type definition. Length validations may include the min or max parameters, or both. Regular expression validators must include a regular expression within the parentheses.

<input type="text">
  <title>Username</title>
  <validations>
    <validation type="regex(/^[a-z0-9_\.-]+$/i)"
      description="Username must contain only alphanumeric characters, underscores, dots, and dashes" />
  </validations>
</input>

<input type="password">
  <title>Password</title>\
  <validations>
    <validation type="length(min=6,max=12)"
      description="Password must be between six and twelve characters." />
  </validations>
</input>

<input type="textarea">
  <title>Enter Description of Task</title>
  <validations>
    <validation type="length(max=255)"
      description="Keep your description within 255 characters, please." />
  </validations>
</input>

An outcome describes one possible consequence of an action. Outcomes may cause the following to occur:

Additional tasks to perform within an outcome may be described as facts.

An outcome must contain an id, a title and an internal or external page reference (see previous section on links). The following outcome would send the user to a page identified as systemDashboard.

<outcome id="accountCreated">
  <title>New account created</title>
  <pageRef>userProfile</pageRef>
</outcome>

Optionally, an outcome may have a description to provide any additional detail related to the performance of the action.

To display a message on the destination page, include a message tag:

<outcome id="accountCreated">
  <title>New account created</title>
  <pageRef>userProfile</pageRef>
  <message>Welcome, your account has been created.</message>
</outcome>

To send an e-mail, include an emailRef tag with a reference to an email specified elsewhere within your appspec.

<outcome id="accountCreated">
  <title>New account created</title>
  <pageRef>userProfile</pageRef>
  <message>Welcome, your account has been created.</message>
  <emailRef>newAccountMessage</emailRef>
</outcome>

An outcome may also be modified by the negative attribute to indicate that outcome is a negative case, e.g. form submission failure, as shown in this complete action/outcome example:

<action id="createAccount">
  <title>Create Account</title>
  <outcomes>
    <outcome id="accountCreated">
      <title>New account created</title>
      <pageRef>userProfile</pageRef>
      <message>Welcome, your account has been created.</message>
      <emailRef>newAccountMessage</emailRef>
    </outcome>
    <outcome id="usernameExists" negative="true">
      <title>Desired username already exists</title>
      <description>
        User is shown an explanatory error message
        and asked to try again.
      </description>
      <pageRef>newAccount</pageRef>
      <message>Sorry, that username is already in use. Please choose another.</message>
    </outcome>
  </outcomes>
</action>

Clickframes provides a series of action types to help you define common user activities. In particular, Clickframes code generators can leverage these action types to great effect.

Action types are described in greater detail in the sections on User Authentication and CRUD.

Once defined, a linkSet may be referenced in each page on which it will appear.

<page id="newProject">
  ...
  <linkSetRef id="projectNavigation" />
</page>
<page id="projects">
  ...
  <linkSetRef id="projectNavigation" />
</page>

You may define a linkSet that will appear on every page in your application, known as global navigation, by adding the global attribute.

<linkSet id="siteNavigation" global="true">
  ...
</linkSet>

Global navigation does not need per-page linkSet references.