Application Template

This page provides a functional skeleton for a new CMEM Web application. It assumes that your application will involve input from an HTML form, validation of that input, and server-side processing that returns results formatted in HTML, which is then displayed below the input. The form below implements this basic functionality -- submit some data to see it work.

Follow These Steps:

  1. Copy
    • Copy this wiki topic to a new wiki topic ('More topic actions -> Copy topic'). Choose a topic name that begins with 'Analysis' (e.g. AnalysisPrimerSelection).
    • Download the my_application.css and my_application.js files attached to this topic and attach them to the new topic.
  2. Interface
    • Plan your interface using a grid (8 rows by 5 columns).
    • Edit the styling in my_application.css to change the dimensions of rows and columns and other cosmetic properties, such as borders and colors.
    • Copy and paste from the 'Example widgets' section as needed.
    • Make adjustments to your form attributes to perform client-side validation. See the examples below.
  3. Application
    • Design your server-side program to receive the input submitted through the form and return HTML-formatted results.
    • Most any programming language can be used. There is an attached template program written in Perl.
    • It is essential to have rigorous server-side validation in your application.
  4. Documentation
    • Click on the help next to the application name. This is a link that will create a new help topic for your application.
  5. Release
    • Delete these directions and make any other final cosmetic changes.
    • Adjust the citation line under the application name so that you can be credited for your contribution.
    • You will need to coordinate with MartyBrandon to load the application onto the server.


Example widgets

Copy and paste widgets from this section for your application.

Field:

Textbox:

yes no


Form Validation

Client-side form validation can be implemented by editing the attributes of your form widgets.

Examples:

Make a value required:
  <input type="text" name="myInput" size="20" class="foswikiInputField required" value="" />

Make a value a required email address:
  <input type="text" name="myInput" size="20" class="foswikiInputField required email" value="" />
Also works for 'date'.


Set a minimum length:
  <input type="text" name="myInput" size="20" class="foswikiInputField" minlength="2" value="" />
Also works for 'maxlength'.


Others:
min="1"
max="100"
class="url"
class="number"


See the JQuery Validate plugin website for more information.






Application Name help

Citing this application:
Jones, John; Smith, Sally 2010. Application Name, http://mitomaster.bio.uci.edu/foswiki/MITOMASTER/ApplicationTemplate

Input: A2 A3 A4 A5
B2 B3 B4 B5
C1 C2 C3 C4 C5
D1 D2 D3 D4 D5
E1 E2 E3 E4 E5
F1 F2 F3 F4 F5
G1 G2 G3 G4 G5
H1 H2 H3 H4 H5


Output:

Topic attachments
I Attachment Action Size DateSorted ascending Who Comment
my_application.pl.txttxt my_application.pl.txt manage 3 K 18 Aug 2009 - 18:41 UnknownUser Skeleton of perl executable that will be called by the form. Copy and modify this.
my_application.csscss my_application.css manage 1 K 25 Feb 2010 - 21:32 UnknownUser Skeleton CSS file that defines layout and style. Copy and modify this to suit your needs.
my_application.jsjs my_application.js manage 984 bytes 26 Feb 2010 - 00:47 UnknownUser Javascript providing client-side validation and AJAX remote procedure call.
Topic revision: r1 - 12 Feb 2016, MartyBrandon

This site is powered by FoswikiCopyright © by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding Foswiki? Send feedback