Quick links: Content - sections - sub sections
EN FR

As noted in display jforms chapter, you can select which plugin will generate forms content (in HTML, javascript and so on..) sent to clients.

You have two kind of plugins: those that build a whole form, generators, and plugins for the 'html' generator, to generate only a control.

Generators plugin

To create a such plugin, you should of course pick a name, say "moreforms". Then:

  • Create a formbuilder/moreforms directory in a plugins repository.
  • Create a moreforms.jformsbuilder.php in it
  • In it, declare a moreformsFormBuilder class inheriting from \jelix\forms\Builder\BuilderBase or from \jelix\forms\Builder\HtmlBuilder if you want to generate a form similaire to the default html generator.

moreformsFormBuilder should implement following list of methods. Those methods display different form parts and don't return any value (they call echo). They are called through jForms template plugins.

After each modification of your generator, don't forget to clear your temp directory (by using the command app:cleartemp for example).



    /**
     * called during the meta content processing in templates
     * This method should set things on the response, like adding
     * css styles, javascript links etc.
     * @param \jTpl $tpl the template object
     */
    abstract public function outputMetaContent($tpl);

    /**
     * output the header content of the form
     */
    abstract public function outputHeader();

    /**
     * output the footer content of the form
     */
    abstract public function outputFooter();

    /**
     * displays all the form. outputMetaContent, outputHeader and outputFooters are also called 
     */
    abstract public function outputAllControls();

    /**
     * displays the content corresponding of the given control
     * @param jFormsControl $ctrl the control to display
     * @param array $attributes  attribute to add on the generated code (html attributes for example)
     */
    abstract public function outputControl($ctrl, $attributes=array());

    /**
     * displays the label corresponding of the given control
     * @param jFormsControl $ctrl the control to display
     */
    abstract public function outputControlLabel($ctrl, $format = '', $editMode = true);

    /**
     * displays the value of the control (without the control)
     * @param \jFormsControl $ctrl the control to display
     * @param array $attributes  attribute to add on the generated code (html attributes for example)
     */
    abstract public function outputControlValue($ctrl, $attributes=array());

outputMetaContent()

Use the controller response object to specify CSS stylesheets, javascript files to be included in the final response. Example:


   public function outputMetaContent($t) {

        $resp= jApp::coord()->response;
        if ($resp === null) {
            return;
        }
        // si les fichiers sont dans le répertoire jelix
        $www = jApp::urlJelixWWWPath();
        // ou si les fichiers sont dans un répertoire à vous dans www
        $www = jApp::urlBasePath();

        $resp->addJSLink($www.'js/fichier.js');
        $resp->addCSSLink($www.'design/fichier.css');

        $resp->addAssets('my_web_assets');

        //we loop on root control has they fill call the outputMetaContent recursively
        foreach( $this->_form->getRootControls() as $ctrlref=>$ctrl) {
            if($ctrl->type == 'hidden') continue;
            if(!$this->_form->isActivated($ctrlref)) continue;

            $widget = $this->getWidget($ctrl, $this->rootWidget);
            $widget->outputMetaContent($resp);
        }
   }

This method is the first called.

outputHeader()

This one generates tags declaring your form and other useful form contents. OutputHeader opens a <form> tag, optionally displays error messages, generates hidden fields and adds some javascript.

outputFooter()

This is the last method called by template plugins. As for HTML, outputFooter closes the form tags </form> and adds some javascript.

outputAllControls()

This one is called by {formfull} template plugin. It has to generate all controls (apart of those generated by outputHeader() and outputFooter()).

outputControlLabel()

Called by the {form} template block for fields labels, it generates labels tags.

As argument, it receives a jFormsControl object defining the control associated.

In the HTML generator, it calls the widget plugin corresponding to the control, to display the label.

outputControl()

Called by the {form} template block for controls, it generates control elements.

As argument, it receives a jFormsControl object defining the control associated, and the list of html attributes to add or other informations.

In the HTML generator, it calls the widget plugin corresponding to the control, to display the field.

outputControlValue()

Called by the {formdata} template block for fields values, it only output the value of a control.

As argument, it receives a jFormsControl object defining the control associated.

In the HTML generator, it calls the widget plugin corresponding to the control, to display the value.

Using a generator

If you want to use the same generator in the whole application, you should indicate the generator name into this configuration parameter:


[tplplugins]
defaultJformsBuilder = myformbuilder

If you want to use a generator only on some forms, you can indicate the generator in the {form} or {formfull} template plugin:


  {formfull $form, 'mymodule~default:save', array(), 'myformbuilder'}

Widget plugin

The generator provided by Jelix is a plugin, that is itself extensible and use other type of plugins, "formwidget", to generate controls.

A "formwidget" plugin generates the code of a specific control. You can provide your own formwidget plugin and use it for a particular control, if you want to have a different HTML construction.

A "formwidget" should follow the jelix\forms\HtmlWidget\WidgetInterface interface, and so, it should provide these methods:

  • getId(): return the id of the HTML element
  • getName(): return the name of the HTML element
  • getValue(): return the value of the HTML field
  • outputMetaContent($resp): add the CSS and javascript link
  • outputHelp(): displays the help of the form field
  • outputLabel($format = '', $editMode = true): displays the form field label
  • outputControl(): displays the form field itself
  • setAttributes($attributes): set attributes to add on the HTML element

The plugin could inherits from the jelix\forms\HtmlWidget\WidgetBase class so only few methods are needed to be implemented.

The plugin should have a name. It should be stored into a file plugins/formwidget/{name}/{name}.formwidget.php.

See all existing plugins into lib/jelix/plugins/formwidget/ to know more about how it should be implemented.

Note that there is a specific widget, the "root" widget, which can generate more HTML, in addition of HTML generated by widgets and the main generator. It has the same name of the generator. For example, the root widget of the HTML generator, it is the plugin plugins/formwidget/html/html.formwidget.php.

For you own html generator called for example "myhtml", it will be plugins/formwidget/monhtml/monhtml.formwidget.php.

Declaring a widget plugin

After creating the widget class, you should declare it so it can be used.

Depending of the context, you would choose one of these solutions.

If you want to use a specific plugin in a specific form, indicate it in the options of the generator, in the template :


 {form $form, 'action', array(), 'html',
    array('plugins' => array ('birthdaydate' => 'mydateplugin')) }
    ...
 {/form}

 {formfull $form, 'action', array(), 'html',
    array('plugins' => array ('birthdaydate' => 'mydateplugin')) }

Here you indicate that for the control which has the name 'birthdaydate', the widget 'mydateplugin' will be used. So it will be plugins/formwidget/mydateplugin/mydateplugin.formwidget.php.

If you want to use the same plugin for all forms, you should indicate into the configuration, the plugin name to use with a specific type of control:


[jforms_builder_html]
;<control type> = <plugin name>
date = mydateplugin

Here, the "mydateplugin" widget will be used for all jforms date control.

If you create your own builder inheriting from the html generator, the generator will try automatically to use widgets for which the name will be end with the builder name: <controle_type>_<builder_type>.

So if you create a builder "htmlbootstrap", it will try to use widgets plugins having the name ending with "_htmlbootstrap" (date_htmlbootstrap for all date controls for example).

And if in your generator, there are some plugins having a name which doesn't follow the convention, you can indicate it into a property of your generator:


protected $pluginsConf = array(
    'control type' => 'widget name'
);