Trace:
Differences ¶
This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revisionNext revisionBoth sides next revision | ||
en:tutorials:simple-jforms-example [2008/03/04 14:18] – bibo | en:tutorials:simple-jforms-example [2008/11/19 15:02] – external edit 127.0.0.1 | ||
---|---|---|---|
Line 10: | Line 10: | ||
===== Create your application ===== | ===== Create your application ===== | ||
- | First, let's create your application. After donwloading | + | First, let's create your application. After downloading |
<code bash> | <code bash> | ||
Line 16: | Line 16: | ||
</ | </ | ||
- | Don't forget to change rights on ''< | + | Don't forget to change rights on ''< |
- | An application skeleton is created. Your local tree structure | + | An application skeleton is created. Your local tree structure |
* myapp/ | * myapp/ | ||
Line 35: | Line 35: | ||
* var/ | * var/ | ||
* www/ | * www/ | ||
- | * lib/ (jelix libraries) | + | * lib/ (Jelix libraries) |
* temp/ | * temp/ | ||
Line 48: | Line 48: | ||
- | Now you're going to create a form. The only thing to do, is to create one xml file in the //forms/// directory. Call it contact.form.xml. Here is its content: | + | Now you're going to create a form. The only thing to do, is to create one XML file in the //forms/// directory. Call it contact.form.xml. Here is its content: |
<code xml> | <code xml> | ||
<? | <? | ||
- | <forms xmlns=" | + | <form xmlns=" |
< | < | ||
Line 75: | Line 75: | ||
< | < | ||
</ | </ | ||
- | </forms> | + | </form> |
</ | </ | ||
You can see that it is a declarative format. It is easy to read and edit. | You can see that it is a declarative format. It is easy to read and edit. | ||
+ | |||
+ | |||
Line 94: | Line 96: | ||
$f = jForms:: | $f = jForms:: | ||
- | $view->tpl-> | + | $view->body-> |
return $view; | return $view; | ||
Line 102: | Line 104: | ||
On the first line, you retrieve an HTML view (a jHtmlResponse object) with the **getResponse()** method. Next, you set the title of the page (**$view-> | On the first line, you retrieve an HTML view (a jHtmlResponse object) with the **getResponse()** method. Next, you set the title of the page (**$view-> | ||
- | In the **bodyTpl** property, | + | In the **bodyTpl** property, |
Next, in the **$f** variable, you put an instance of the contact form. //jForms// creates dynamically a class from the content of contact.form.xml and //create// static method returns an instance of this class. Note that this class inherits from the // | Next, in the **$f** variable, you put an instance of the contact form. //jForms// creates dynamically a class from the content of contact.form.xml and //create// static method returns an instance of this class. Note that this class inherits from the // | ||
Line 123: | Line 125: | ||
thing because this action is the default one of the application), | thing because this action is the default one of the application), | ||
+ | {{en: | ||
When testing this form, notice the check done on fields before submit : some javascript code is generated automatically on this purpose. Anyway, here is the generated html code : | When testing this form, notice the check done on fields before submit : some javascript code is generated automatically on this purpose. Anyway, here is the generated html code : | ||
Line 139: | Line 142: | ||
| | ||
| | ||
- | | + | |
- | | + | |
// (snip other javascript code...) | // (snip other javascript code...) | ||
// | // | ||
Line 172: | Line 175: | ||
</ | </ | ||
- | Note also that elements have CSS classes or IDs assigned to ease the design | + | Note also that form elements have CSS classes or IDs assigned to ease their design. |
**formfull** plugin generates the form in an HTML table. Of course there are alternatives. By using other plugins, Jelix allows you to control precisely the html generated. Let's change that in the main.tpl file. | **formfull** plugin generates the form in an HTML table. Of course there are alternatives. By using other plugins, Jelix allows you to control precisely the html generated. Let's change that in the main.tpl file. | ||
Line 195: | Line 198: | ||
Here is the result of this template : | Here is the result of this template : | ||
+ | |||
+ | |||
+ | {{en: | ||
+ | |||
+ | |||
Line 200: | Line 208: | ||
===== Handling submitted data ===== | ===== Handling submitted data ===== | ||
- | Now you're going to create the action method indicated in the arguments of the **form** plugin. | + | Now you're going to create the action method indicated in the arguments of the **form** plugin. |
<code php> | <code php> | ||
Line 209: | Line 217: | ||
$f = jForms:: | $f = jForms:: | ||
if(!$f || !$f-> | if(!$f || !$f-> | ||
- | $rep = $this-> | + | $view = $this-> |
- | $rep-> | + | $view-> |
- | return $rep; | + | return $view; |
} | } | ||
Line 228: | Line 236: | ||
</ | </ | ||
- | Instead of just creating a new instance of the contact form, check before if there is an existing one. | + | Instead of just creating a new instance of the contact form, check before if there is an existing one. So HTML fields will be filled with datas previously submitted. |
Back to **save** method. After the **$f-> | Back to **save** method. After the **$f-> | ||
Line 236: | Line 244: | ||
$alldatas = $f-> | $alldatas = $f-> | ||
+ | // or | ||
$firstname = $f-> | $firstname = $f-> | ||
- | if ($firstname==' | + | if ($firstname==' |
// and so on. | // and so on. | ||
</ | </ | ||
Line 260: | Line 269: | ||
Use again the **formcontrols** plugin, but in a standalone manner (not with a **form** plugin). Indicate as arguments the jFormsBase object (**$form**), | Use again the **formcontrols** plugin, but in a standalone manner (not with a **form** plugin). Indicate as arguments the jFormsBase object (**$form**), | ||
+ | |||
+ | {{en: | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
===== Conclusion ===== | ===== Conclusion ===== | ||
- | That's all ! We saw how it is easy with jForms : | + | That's all ! It is really |
+ | |||
+ | * create a form | ||
+ | * display a form | ||
+ | * retrieve submitted data | ||
+ | * validate submitted data (this is done automatically !) | ||
+ | * display the form again with errors | ||
- | * to create a form | + | With only one xml file and few lines of code ! |
- | * to show a form | + | |
- | * to retrieve submitted datas | + | |
- | * to validate submitted datas (this is done automatically | + | |
- | * to show the form again with errors | + | |
- | Notice that jForms has many other features, | + | And jForms has many other features, |
- | * to create your own form " | + | * create your own form " |
- | * to specify your own error messages | + | * specify your own error messages |
- | * to manage how error messages are displayed | + | * localize everything |
- | * to display helps and tooltip | + | * manage how error messages are displayed |
- | * to fill menulist, listbox | + | * display helps and tooltips |
- | * to store automatically | + | * fill menulist, listbox, (and so on) choices |
- | * to create quickly a CRUD controller, by using the jControllerDaoCrud controller (only indicate a jforms file, a jdao file, and that's all !) | + | * read and store data automatically |
- | * and many other controls are availabled: **< | + | * create quickly a CRUD controller, by using the jControllerDaoCrud controller (only indicate a jforms file, a jdao file, and that's all !) |
- | * some others will be available soon: **< | + | * and many other controls are availabled: **< |
+ | * some others will be available soon in Jelix 1.1 : **< | ||