Implementation of Online Application Forms with OpenPetra: Difference between revisions

From OpenPetra Wiki
Jump to navigation Jump to search
No edit summary
 
(3 intermediate revisions by the same user not shown)
Line 40: Line 40:
<pre>//alert(MainForm.cards.length);
<pre>//alert(MainForm.cards.length);
for(prop in MainForm.cards[1]){
for(prop in MainForm.cards[1]){
   //console.log(prop + " " + MainForm.cards[1][prop]);
   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){
for(prop in Ext.ux.Wiz.Card.superclass){
   //console.log(prop + " " + Ext.ux.Wiz.Card.superclass[prop]);
   console.log(prop + " " + Ext.ux.Wiz.Card.superclass[prop]);
}</pre>
}</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’