Implementation of Online Application Forms with OpenPetra

Current situation

• At the moment, we use ext.js for the forms.
• All forms are generated based on yaml files, very similar to our generation of Winforms.
• The main template file is in csharp\ICT\PetraTools\Templates\ExtJs\submitForm.js

• At the moment (December 2010), the development happens in a branch, ie. the main trunk of the source does not contain the latest webforms yet.
  • checkout this branch from bazaar: bzr checkout http://bzr.openpetra.org:8008/openpetra/webformsTimotheus

Commands to use

generate all webforms in openpetraorg/webserver/OpenPetraOrg.ext

nant generateWebforms

generate all webforms in openpetraorg/webserver/OpenPetraOrg.ext/Samples/SimpleForm

nant generateWebform -D:file=Samples/SimpleForm

start the webserver, using xsp2 from Mono (make sure you got installed Mono on your Windows machine, and the path to Mono is set in the OpenPetra.build.config file):

nant startWebServer

Visit the demo and samples page:

http://localhost:8081

Existing demo applications and forms

• Simple form: very simple, to understand the yaml file etc
• Multi Country and Language: depending on the country-id parameter, a different form is loaded and also in a different language.

TODO: Controls to be implemented and tested

• Date time picker for birthday, limiting to certain years (custom validation)
• Multi Language form that displays a different HTML text inside an iframe
• File upload with server side validation of image dimensions and file size (extra web service for that?)
• Navigation between several pages, with final submission button

Server-side functionality

• main project is in \csharp\ICT\Petra\Server\app\WebService
• TODO: store the data in the OpenPetra database
• TODO: possibly: allow user to come back and modify his own data
• TODO: generate PDF, send Email

Ext.js hints and tricks

show all properties of an element:

//alert(MainForm.cards.length);
for(prop in MainForm.cards[1]){
  value = MainForm.cards[1][prop].toString();
  if (value.indexOf("\n") > 0)
  {
    value = value.substr(0, value.indexOf("\n"));
  }

  console.log(prop + " " + value);
}
for(prop in Ext.ux.Wiz.Card.superclass){
  console.log(prop + " " + Ext.ux.Wiz.Card.superclass[prop]);
}

get the ext.js object of a control

• Ext.get("myControl") will only get you the HTML object
• use Ext.ComponentMgr.get('chkCLS'), which eg. gives you the .checked property of Ext.js