Trace:
Differences ¶
This shows you the differences between two versions of the page.
Next revision | Previous revisionNext revisionBoth sides next revision | ||
en:tutorials:simple-jforms-example [2008/03/04 12:58] – created laurent | en:tutorials:simple-jforms-example [2012/02/01 10:19] – laurent | ||
---|---|---|---|
Line 1: | Line 1: | ||
- | ====== Simple jForms example ====== | + | ====== Simple jForms example |
- | Here is a little tutorial to show you how jForms is a powerful form system. | + | Here is a little tutorial to demonstrate |
- | ===== Creating the application ===== | ||
- | First, let's create | + | |
+ | ===== Create your application ===== | ||
+ | |||
+ | First, let's create | ||
<code bash> | <code bash> | ||
- | ./jelix --myapp createapp | + | |
</ | </ | ||
- | We don't forget to change rights on '' | + | Don't forget to change rights on @@F@< |
- | Here is the skeleton | + | An application |
* myapp/ | * myapp/ | ||
Line 20: | Line 22: | ||
* classes/ | * classes/ | ||
* controllers/ | * controllers/ | ||
- | | + | * default.classic.php |
* dao/ | * dao/ | ||
* forms/ | * forms/ | ||
Line 30: | Line 32: | ||
* var/ | * var/ | ||
* www/ | * www/ | ||
- | * lib/ (jelix libraries) | + | * lib/ (Jelix libraries) |
* temp/ | * temp/ | ||
- | There is //myapp/// directory, which contains all files of the application. | + | @@F@myapp/@@ directory contains all files of your application. |
- | Then we copy the content of //lib/ | + | Last, copy the content of @@F@lib/ |
- | ! The contact form | + | ===== The contact form ===== |
- | Now we're going to create a form. The only thing to do, is to create one xml file in the //forms/// directory. We 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 @@Fforms/@@ directory. Call it @@F@contact.form.xml@@. Here is its content: | ||
+ | |||
+ | <code xml> | ||
<? | <? | ||
- | <forms xmlns=" | + | <form xmlns=" |
< | < | ||
Line 66: | Line 70: | ||
< | < | ||
</ | </ | ||
- | </forms> | + | </form> |
+ | </code> | ||
- | You can see that it is a declarative format. | + | You can see that it is a declarative format. |
- | ! Displaying the form | ||
- | Now we're going to display | + | ===== Displaying |
+ | Now you're going to display the form. First, modify the default controller, @@F@default.classic.php@@: | ||
+ | |||
+ | <code php> | ||
class defaultCtrl extends jController { | class defaultCtrl extends jController { | ||
Line 82: | Line 89: | ||
$f = jForms:: | $f = jForms:: | ||
- | $view->tpl-> | + | $view->body-> |
return $view; | return $view; | ||
} | } | ||
} | } | ||
+ | </ | ||
- | At the first line, we retrieve an HTML view (a jHtmlResponse object) with the **getResponse()** method. | + | On the first line, you retrieve an HTML view (a @@C@jHtmlResponse@@ object) with the @@M@getResponse()@@ method. |
- | In the **bodyTpl**, we indicate the template to use for the main content of the page (the content of the body tag of a html page; the html header is generated automatically by the view). The given string is called a __selector__ in Jelix. A selector specifies a resource in a module. Its syntax is " | + | In the @@P@bodyTpl@@ property, |
- | Next, in the **$f** variable, | + | Next, in the @@V@$f@@ variable, |
- | Then we pass the **$f** variable to an instance of a template engine (jTpl which works like smarty) stored in **$view->body**, which will generate the page with the given template file, //main.tpl//. | + | You pass @@V@$f@@ variable to an instance of a template engine (jTpl which works like smarty). It is stored in @@$view-> |
- | At the end, we return the **$view** object and Jelix will end the job : the view will generate the final page. | + | Last line returns @@V@$view@@ object and Jelix **finishes |
- | Second, we create | + | Let' |
+ | <code php> | ||
< | < | ||
< | < | ||
| | ||
+ | </ | ||
- | We use the template plugin | + | It uses the **formfull** |
- | 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: | ||
- | When testing this form, you can see that a check is done on fields before the submit : some javascript code are generated automatically. | + | When testing this form, notice the check done on fields before the submit: some javascript code is generated automatically |
- | <form action="/ | + | <code html> |
- | < | + | <form action="/ |
- | <input type=" | + | < |
- | <input type=" | + | |
- | </ | + | |
< | < | ||
//< | //< | ||
Line 123: | Line 131: | ||
| | ||
| | ||
- | | + | |
- | | + | |
// (snip other javascript code...) | // (snip other javascript code...) | ||
// | // | ||
Line 154: | Line 162: | ||
</ | </ | ||
</ | </ | ||
+ | </ | ||
+ | |||
+ | Note also that form elements have CSS classes or IDs assigned to ease their design. | ||
- | Note that some CSS classes facilitate the designing of the form. **formfull** plugin | + | The **formfull** plugin |
+ | <code html> | ||
< | < | ||
- | {form $form, " | + | {form $form, " |
< | < | ||
< | < | ||
Line 170: | Line 182: | ||
< | < | ||
| | ||
+ | </ | ||
- | We use here the **form** plugin instead of **formfull**. Its arguments are same. **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 : | ||
- | !! Handle datas after a submit | + | {{en: |
- | Now we're going to create the save method indicated in the arguments of the **form** plugin. We add this methods in default.classic.php. | ||
+ | |||
+ | |||
+ | |||
+ | ===== 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 ' | ||
+ | |||
+ | <code php> | ||
function save() { | function save() { | ||
$view = $this-> | $view = $this-> | ||
Line 186: | Line 206: | ||
$f = jForms:: | $f = jForms:: | ||
if(!$f || !$f-> | if(!$f || !$f-> | ||
- | $rep = $this-> | + | $view = $this-> |
- | $rep-> | + | $view-> |
- | return $rep; | + | return $view; |
} | } | ||
Line 195: | Line 215: | ||
return $view; | return $view; | ||
} | } | ||
+ | </ | ||
- | To get the instance of the form, and by the same time to fill it with submitted | + | To get the instance of the form, and by the same time to fill it with submitted |
+ | <code php> | ||
$f = jForms:: | $f = jForms:: | ||
if(!$f) | if(!$f) | ||
$f = jForms:: | $f = jForms:: | ||
+ | </ | ||
- | So here, we try to get an existing | + | Instead of just creating a new instance of the contact |
- | In **save** method, after the test, this is the opportunity to execute | + | Back to @@M@save()@@ method. After the @@$f-> |
+ | |||
+ | <code php> | ||
+ | if(!$f || !$f-> | ||
$alldatas = $f-> | $alldatas = $f-> | ||
+ | // or | ||
$firstname = $f-> | $firstname = $f-> | ||
- | // etc. | + | |
+ | | ||
+ | } | ||
+ | // and so on. | ||
+ | </ | ||
- | And at the end of the process, we could display submitted | + | Finally, you could display submitted |
+ | <code html> | ||
< | < | ||
< | < | ||
- | < | + | < |
< | < | ||
{formcontrols $form, array(' | {formcontrols $form, array(' | ||
Line 225: | Line 256: | ||
</ | </ | ||
- | <p>We will contact | + | <p>We will contact you. Thanks!</p> |
+ | </ | ||
+ | |||
+ | Use again the **formcontrols** plugin, but in a standalone manner (not with a **form** plugin). Indicate as arguments your form object (@@$form@@), | ||
+ | |||
+ | {{en: | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | ===== Conclusion ===== | ||
+ | |||
+ | |||
+ | That's all! It is really easy to use jForms, isn't it? You can: | ||
- | We use again the **formcontrols** plugin, but in a standalone manner (so not with a **form** plugin). We indicate as arguments the jFormsBase object (**$form**), and the list of controls to display | + | |
+ | | ||
+ | | ||
+ | | ||
+ | * display the form again with errors | ||
- | !! Conclusion | + | With only one xml file and few lines of code! |
- | That's all ! We saw how it is easy with jForms : | + | And jForms |
- | * to create | + | |
- | * to show a form | + | * specify your own error messages |
- | * to retrieve submitted datas | + | * localize everything |
- | * to validate submitted datas (this is done automatically | + | * manage how error messages are displayed |
- | * to show the form again with errors | + | * display helps and tooltips |
+ | * fill menulist, listbox, | ||
+ | * read and store data automatically still using a jDao object | ||
+ | * 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: **< | ||
- | Notice that jForms has many other features, which allow you : | ||
- | * to create your own form " | ||
- | * to specify your own error messages | ||
- | * to manage how error messages are displayed | ||
- | * to display helps and tooltip | ||
- | * to fill menulist, listbox etc automatically, | ||
- | * to store automatically datas with a jDao object | ||
- | * to create quickly a CRUD controller, by using the jControllerDaoCrud controller (only indicate a jforms file, a jdao file, and that's all !) | ||
- | * and many other controls are availabled: **< | ||
- | * some others will be available soon: **< |