Implementation of Online Application Forms with OpenPetra: Difference between revisions

From OpenPetra Wiki
Jump to navigation Jump to search
 
(6 intermediate revisions by the same user not shown)
Line 3: Line 3:
* All forms are generated based on yaml files, very similar to our generation of Winforms.
* All forms are generated based on yaml files, very similar to our generation of Winforms.
* The main template file is in <code>csharp\ICT\PetraTools\Templates\ExtJs\submitForm.js</code>
* The main template file is in <code>csharp\ICT\PetraTools\Templates\ExtJs\submitForm.js</code>
* 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 ==
== Commands to use ==
Line 11: Line 14:
  nant generateWebform -D:file=Samples/SimpleForm
  nant generateWebform -D:file=Samples/SimpleForm


start the webserver, using xsp2 from Mono:
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
  nant startWebServer


Line 32: Line 35:
* TODO: possibly: allow user to come back and modify his own data
* TODO: possibly: allow user to come back and modify his own data
* TODO: generate PDF, send Email
* TODO: generate PDF, send Email
== Ext.js hints and tricks ==
show all properties of an element:
<pre>//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]);
}</pre>
== 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

Latest revision as of 14:06, 21 Ocak 2011

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

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
Retrieved from ‘https://wiki.openpetra.org/index.php?title=Implementation_of_Online_Application_Forms_with_OpenPetra&oldid=1634’