Trace:
Differences ¶
This shows you the differences between two versions of the page.
| Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
| en:tutorials:simple-jforms-example [2008/03/05 09:39] – laurent | en:tutorials:simple-jforms-example [2012/12/06 20:38] (current) – [Simple jForms example for Jelix 1.3] laurent | ||
|---|---|---|---|
| Line 1: | Line 1: | ||
| - | ====== Simple jForms example ====== | + | ====== Simple jForms example |
| - | + | ||
| - | Here is a little tutorial to demonstrate how powerful is jForms, the Jelix form system. | + | |
| - | + | ||
| + | Here is a little tutorial to demonstrate how powerful is jForms, the Jelix form system. This tutorial is compatible with Jelix 1.3 and 1.4. | ||
| Line 13: | Line 10: | ||
| <code bash> | <code bash> | ||
| - | ./jelix --myapp createapp | + | |
| </ | </ | ||
| - | Don't forget to change rights on '' | + | Don't forget to change rights on @@F@<jelix folder>/ |
| An application skeleton is created. Your local tree structure should look like: | An application skeleton is created. Your local tree structure should look like: | ||
| Line 25: | Line 22: | ||
| * classes/ | * classes/ | ||
| * controllers/ | * controllers/ | ||
| - | | + | * default.classic.php |
| * dao/ | * dao/ | ||
| * forms/ | * forms/ | ||
| Line 39: | Line 36: | ||
| - | //myapp/// directory contains all files of your application. Note that there is another | + | @@F@myapp/@@ directory contains all files of your application. Note that there is another |
| - | + | ||
| - | Last, copy the content of // | + | |
| + | Last, copy the content of @@F@lib/ | ||
| ===== The contact form ===== | ===== The contact form ===== | ||
| - | 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 @@F@forms/@@ directory. Call it @@F@contact.form.xml@@. Here is its content: |
| <code xml> | <code xml> | ||
| <? | <? | ||
| - | <forms xmlns=" | + | <form xmlns=" |
| < | < | ||
| Line 75: | Line 70: | ||
| < | < | ||
| </ | </ | ||
| - | </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. | ||
| - | |||
| - | |||
| ===== Displaying the form ===== | ===== Displaying the form ===== | ||
| - | Now you're going to display the form. First, modify the default controller, | + | Now you're going to display the form. First, modify the default controller, |
| <code php> | <code php> | ||
| Line 103: | Line 96: | ||
| </ | </ | ||
| - | 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 @@C@jHtmlResponse@@ object) with the @@M@getResponse()@@ method. Next, you set the title of the page (@@$view-> |
| - | In the **bodyTpl** property, | + | In the @@P@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 // | + | Next, in the @@V@$f@@ variable, you put an instance of the contact form. jForms creates dynamically a class from the content of @@F@contact.form.xml@@ and the static method |
| - | You pass **$f** variable to an instance of a template engine (jTpl which works like smarty). It is stored in **$view-> | + | You pass @@V@$f@@ variable to an instance of a template engine (jTpl which works like smarty). It is stored in @@$view-> |
| - | Last line returns | + | Last line returns |
| - | Let's create this template in //myapp/ | + | Let's create this template in @@F@myapp/ |
| <code php> | <code php> | ||
| Line 120: | Line 113: | ||
| </ | </ | ||
| - | It uses **formfull** template plugin, which accepts as arguments, a **jFormsBase** object, and a selector of action. this is the action to be called after a submit on the form. | + | It uses the **formfull** template plugin, which accepts as arguments, a @@C@jFormsBase@@ object, and a selector of action. this is the action to be called after a submit on the form. |
| - | At this step, you can execute the action, | + | At this step, you can execute the action, |
| - | thing because this action is the default one of the application), | + | |
| {{en: | {{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 |
| <code html> | <code html> | ||
| - | < | + | < |
| - | < | + | < |
| - | <input type=" | + | |
| - | <input type=" | + | |
| - | </ | + | |
| < | < | ||
| //< | //< | ||
| Line 177: | Line 166: | ||
| Note also that form elements have CSS classes or IDs assigned to ease their 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. | + | The **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. |
| <code html> | <code html> | ||
| < | < | ||
| - | {form $form, " | + | {form $form, " |
| < | < | ||
| < | < | ||
| Line 195: | Line 184: | ||
| </ | </ | ||
| - | The template above use **form** plugin instead of **formfull**. Its arguments are identical. **formcontrols** plugin do a loop over the fields declared in the contact.form.xml (except submit and reset controls), and you can display the label and the field with **ctrl_label** and **ctrl_control**. **formsubmit** displays all submit controls. | + | The template above use the **form** plugin instead of **formfull**. Its arguments are identicals. The **formcontrols** plugin do a loop over the fields declared in the @@F@contact.form.xml@@ file (except submit and reset controls), and you can display the label and the field with **ctrl_label** and **ctrl_control**. **formsubmit** displays all submit controls. |
| Here is the result of this template : | Here is the result of this template : | ||
| Line 208: | Line 197: | ||
| ===== Handling submitted data ===== | ===== Handling submitted data ===== | ||
| - | Now you're going to create the action method indicated in the arguments of the **form** plugin. In the templates above, it is called ' | + | Now you're going to create the action method indicated in the arguments of the **form** plugin. In the templates above, it is called ' |
| <code php> | <code php> | ||
| Line 228: | Line 217: | ||
| </ | </ | ||
| - | To get the instance of the form, and by the same time to fill it with submitted data, use the **fill** method. Then, test if this instance doesn' | + | To get the instance of the form, and by the same time to fill it with submitted data, use the @@M@fill()@@ method. Then, test if this instance doesn' |
| <code php> | <code php> | ||
| Line 236: | Line 225: | ||
| </ | </ | ||
| - | 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. | + | 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 @@M@save()@@ method. After the @@$f-> |
| <code php> | <code php> | ||
| Line 246: | Line 235: | ||
| // or | // or | ||
| $firstname = $f-> | $firstname = $f-> | ||
| - | if ($firstname==' | + | if ($firstname == 'E.T.') { |
| + | | ||
| + | | ||
| // and so on. | // and so on. | ||
| </ | </ | ||
| - | Finally, you could display submitted data and thanks the user. Here is the contact_ok.tpl file: | + | Finally, you could display submitted data and thanks the user. Here is the @@F@contact_ok.tpl@@ file: |
| <code html> | <code html> | ||
| Line 268: | Line 259: | ||
| </ | </ | ||
| - | Use again the **formcontrols** plugin, but in a standalone manner (not with a **form** plugin). Indicate as arguments | + | Use again the **formcontrols** plugin, but in a standalone manner (not with a **form** plugin). Indicate as arguments |
| {{en: | {{en: | ||
| + | |||
| Line 279: | Line 271: | ||
| - | That's all ! It is really easy to use jForms, isn't it? You can : | + | That's all! It is really easy to use jForms, isn't it? You can: |
| * create a form | * create a form | ||
| Line 287: | Line 279: | ||
| * display the form again with errors | * display the form again with errors | ||
| - | With only one xml file and few lines of code ! | + | With only one xml file and few lines of code! |
| - | And jForms has many other features, such as : | + | And jForms has many other features, such as: |
| - | * create your own form " | + | * create your own form " |
| * specify your own error messages | * specify your own error messages | ||
| * localize everything | * localize everything | ||
| * manage how error messages are displayed | * manage how error messages are displayed | ||
| * display helps and tooltips | * display helps and tooltips | ||
| - | * fill menulist, listbox, (and so on) choices automatically, | + | * fill menulist, listbox, (and so on) choices automatically, |
| * read and store data automatically still using a jDao object | * read and store data automatically still using a jDao object | ||
| - | * create quickly a CRUD controller, by using the jControllerDaoCrud controller (only indicate a jforms file, a jdao file, and that's all !) | + | * create quickly a CRUD controller, by using the @@C@jControllerDaoCrud@@ controller (only indicate a jforms file, a jdao file, and that's all !) |
| - | * and many other controls are availabled: **< | + | * and many other controls are availabled: **< |
| - | | + | |
