Chloroform_HeliumRenderer

2019-07-26 -> 2021-03-05

A bootstrap 4 renderer for Chloroform.

Install

Using the planet installer via light-cli

lt install Ling.Chloroform_HeliumRenderer

Using the uni command.

uni import Ling/Chloroform_HeliumRenderer

Or just download it and place it where you want otherwise.

Summary

Chloroform_HeliumRenderer api (generated with DocTools)
What is it?
- Implemented fields
- Implemented js validators
How to use
Related
History Log

What is it?

2019-07-26 -> 2020-09-22

Chloroform Helium demo here.

Image 1

Image 2

This is my second Chloroform renderer attempt.

It basically renders a Chloroform form, using bootstrap 4 framework.

It's compliant with the clever form initiative.

It also provides js validation for free.

The js validation is based on the Chloroform validators.

This means you don't have to type a single line of javascript, the HeliumRenderer takes care of that for you.

Quick note about validation

2019-07-26

Note: I found the bootstrap form validation class confusing to use, so I recreated them, inspired by them.

Basically, the form has the helium class. When the form is submitted, it gets the helium-was-validated class.

Error messages are contained in elements with class .helium-invalid-feedback. The .helium-invalid-feedback is not displayed unless the form has the helium-was-validated class, in which case it's displayed in red color.

Similarly, form-control elements receive the helium-is-invalid class if they hold an error (and again this class takes effect only if the form has class helium-was-validated).

Implemented fields

2019-07-26

The Helium renderer can render the following fields:

StringField
TextField
NumberField
HiddenField
CSRFField
ColorField
DateField
TimeField
DateTimeField
SelectField
CheckboxField
RadioField
FileField
PasswordField
DecorativeField

See the Chloroform available fields for the complete list of fields.

Implemented js validators

2019-07-26 -> 2020-08-11

The Helium renderer's js layer will handle the following validators:

IsIntegerValidator
IsNumberValidator
IsMysqlDateValidator
IsMysqlDatetimeValidator
MinMaxCharValidator
MinMaxNumberValidator
MinMaxDateValidator
MinMaxItemValidator
MinMaxFileSizeValidator
FileMimeTypeValidator
RequiredValidator
RequiredDateValidator
RequiredDatetimeValidator
PasswordConfirmValidator

See the complete list of Chloroform validators here.

How to use

2019-07-26

You first need to import the assets. The HeliumRenderer depends on the following assets:

bootstrap 4 (you can use a cdn for instance)
jquery (you can use a cdn for instance)
the helium.js file provided with this planet (must be called AFTER jquery)
the helium.css file provided with this planet

Once the assets are imported, you instantiate the HeliumRenderer with some options, and then call the render method.

For more details about the options, see the HeliumRenderer class documentation.

Below is a full working example:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
          integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <title>Bootstrap Theme</title>
</head>

<body>

<?php


use Ling\Chloroform\Field\CheckboxField;
use Ling\Chloroform\Field\ColorField;
use Ling\Chloroform\Field\CSRFField;
use Ling\Chloroform\Field\DateField;
use Ling\Chloroform\Field\DateTimeField;
use Ling\Chloroform\Field\FileField;
use Ling\Chloroform\Field\HiddenField;
use Ling\Chloroform\Field\NumberField;
use Ling\Chloroform\Field\PasswordField;
use Ling\Chloroform\Field\RadioField;
use Ling\Chloroform\Field\SelectField;
use Ling\Chloroform\Field\StringField;
use Ling\Chloroform\Field\TextField;
use Ling\Chloroform\Field\TimeField;
use Ling\Chloroform\Form\Chloroform;
use Ling\Chloroform\FormNotification\ErrorFormNotification;
use Ling\Chloroform\FormNotification\SuccessFormNotification;
use Ling\Chloroform\Validator\CSRFValidator;
use Ling\Chloroform\Validator\FileMimeTypeValidator;
use Ling\Chloroform\Validator\MinMaxCharValidator;
use Ling\Chloroform\Validator\MinMaxDateValidator;
use Ling\Chloroform\Validator\MinMaxFileSizeValidator;
use Ling\Chloroform\Validator\MinMaxItemValidator;
use Ling\Chloroform\Validator\MinMaxNumberValidator;
use Ling\Chloroform\Validator\PasswordConfirmValidator;
use Ling\Chloroform\Validator\PasswordValidator;
use Ling\Chloroform\Validator\RequiredDateValidator;
use Ling\Chloroform\Validator\RequiredValidator;
use Ling\Chloroform_HeliumRenderer\HeliumRenderer;



//--------------------------------------------
// Creating the form
//--------------------------------------------
$form = new Chloroform();
$form->addField(StringField::create("First name"), [RequiredValidator::create()]);
$form->addField(TextField::create("Description"), [RequiredValidator::create(), MinMaxCharValidator::create()->setMin(2)]);
$form->addField(NumberField::create("Age"), [RequiredValidator::create(), MinMaxNumberValidator::create()->setMin(0)->setMax(150)]);
$form->addField(HiddenField::create("nathalie_je_t_aime")->setValue("158"));
$form->addField(CSRFField::create("csrf_token"), [CSRFValidator::create()]);
$form->addField(ColorField::create("Background color"));
$form->addField(DateField::create("Birthday"), [MinMaxDateValidator::create()->setMax(date("Y-m-d"))]);
$form->addField(TimeField::create("What time do you go to bed?", [
    "useSecond" => false,
])->setId("bedtime"));
$form->addField(DateTimeField::create("When exactly was the last time you ate a burger at MacDonalds?")
    ->setErrorName("eat time")
    ->setId("eattime"), [RequiredDateValidator::create()]);


$form->addField(SelectField::create("Country")->setItems([
    "france" => "France",
    "germany" => "Germany",
    "italy" => "Italy",
    "japan" => "Japan",
]));


$form->addField(SelectField::create("Animal")->setItems([
    'Dog' => [
        'labrador_retriever' => "Labrador Retriever",
        'bulldog' => "Bulldog",
        'german_shepherd' => "German Shepherd",
    ],
    'Cat' => [
        'persian_cat' => "Persian cat",
        'maine_coon' => "Maine Coon",
        'siamese_cat' => "Siamese cat",
    ],
]));

$form->addField(SelectField::create("Favorite colors", ["multiple" => true,])->setItems([
    "red" => "Red",
    "blue" => "Blue",
    "green" => "Green",
    "yellow" => "Yellow",
]));


$form->addField(CheckboxField::create("Do you like sushis?")->setItems([
    "yes" => "Yes",
]));

$form->addField(CheckboxField::create("Favorite sports")->setItems([
    "judo" => "Judo",
    "karate" => "Karate",
    "basket" => "Basket-ball",
]), [RequiredValidator::create(), MinMaxItemValidator::create()->setMax(2)]);


$form->addField(RadioField::create("Favorite Cameron movie")->setItems([
    "avatar" => "Avatar",
    "alita" => "Alita",
    "alien" => "Alien",
]));


$form->addField(FileField::create("Upload your avatar")->setId("avatar")
    ->setErrorName("avatar")
    ->setHint("Should be an image (jpeg, gif or png)"), [
    MinMaxFileSizeValidator::create()->setMax("2M"),
    FileMimeTypeValidator::create()->setMimeTypes(["image/jpeg", 'image/png', 'image/gif'])
]);
$form->addField(PasswordField::create("Password")
    ->setHint("It should contain at least one letter, one digit, and one special character"), [PasswordValidator::create()
    ->setNbAlpha(3)
    ->setNbDigits(2)
    ->setNbSpecial(1)
]);
$form->addField(PasswordField::create("Confirm the password"), [PasswordConfirmValidator::create()->setOtherFieldId("password")]);


//--------------------------------------------
// Posting the form and validating data
//--------------------------------------------
if (true === $form->isPosted()) {
    if (true === $form->validates()) {
        $form->addNotification(SuccessFormNotification::create("ok"));
        // do something with $postedData;
        $postedData = $form->getPostedData();
    } else {
        $form->addNotification(ErrorFormNotification::create("There was a problem."));
    }
} else {
    $valuesFromDb = []; // get the values from the database if necessary...
    $form->injectValues($valuesFromDb);
}


//--------------------------------------------
// Template part
//--------------------------------------------
$formArray = $form->toArray();


?>
<link rel="stylesheet" href="libs/universe/Ling/Chloroform_HeliumRenderer/helium.css">


<script
        src="https://code.jquery.com/jquery-3.4.0.min.js"
        integrity="sha256-BJeo0qm959uMBGb65z40ejJYGSgR7REI4+CW1fNKwOg="
        crossorigin="anonymous"></script>
<script src="libs/universe/Ling/Chloroform_HeliumRenderer/helium.js"></script>


<div class="container mb-5 mt-5">
    <div class="row">
        <div class="col-8 m-auto">
            <div class="card">
                <div class="card-header">
                    <h5>HeliumRenderer: Bootstrap4 form</h5>
                </div>
                <div class="card-body">

                    <?php
                    $renderer = new HeliumRenderer([
                        "useEnctypeMultiformData" => true,
                        "renderPrintsJsHandler" => false,
                    ]);
                    echo $renderer->render($form->toArray());


                    ?>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
        crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>


<?php  $renderer->printJsHandler(); ?>


</body>

</html>

Chloroform, the library to create the form structure
Chloroform Hydrogen renderer, another renderer for chloroform
Chloroform_HeliumLightRenderer, the light version of the Chloroform Helium renderer

History Log

1.19.14 -- 2021-05-31
- Removing trailing plus in lpi-deps file (to work with Light_PlanetInstaller:2.0.0 api
1.19.13 -- 2021-03-05
- update README.md, add install alternative
1.19.12 -- 2020-12-08
- Fix lpi-deps not using natsort.
1.19.11 -- 2020-12-04
- Add lpi-deps.byml file
1.19.10 -- 2020-12-01
- fix HeliumRenderer, not handling checkbox default value with checkboxes of type bool
1.19.9 -- 2020-12-01
- update HeliumRenderer, now uses custom checkboxes instead of regular checkboxes
1.19.8 -- 2020-10-01
- fix typo in HeliumRenderer's error message
1.19.7 -- 2020-09-29
- update Chloroform_HeliumRenderer->printCheckboxField, now handles default if items is an array
1.19.6 -- 2020-09-25
- update Chloroform_HeliumRenderer->printInputField, now accepts htmlAttributes property
1.19.5 -- 2020-09-25
- fix Chloroform_HeliumRenderer->prepare setting cssId even if it's null
1.19.4 -- 2020-09-22
- now Chloroform_HeliumRenderer is compliant with the clever form initiative
1.19.3 -- 2020-09-22
- fix HeliumRenderer._formCssId not being synced with the chloroform cssId
1.19.2 -- 2020-09-17
- update HeliumRenderer->printSelectField, now accepts the size parameter
1.19.1 -- 2020-09-14
- add support for chloroform's RequiredDatetimeValidator
1.19.0 -- 2020-08-13
- update HeliumRenderer->printNotifications, now also accepts an array of FormNotificationInterface
1.18.0 -- 2020-08-11
- update helium.js, now supports IsMysqlDateValidator and IsMysqlDatetimeValidator
1.17.0 -- 2020-08-11
- update helium.js, now supports isIntegerValidator.mode option
1.16.0 -- 2020-08-11
- update helium.js, add support for isIntegerValidator and isNumberValidator
1.15.0 -- 2020-03-11
- update helium.js to ensure that the form submit event handler is bound first
1.14.2 -- 2020-02-27
- fix HeliumRenderer->printJsHandler assuming that jquery is loaded right away
1.14.1 -- 2020-02-27
- fix HeliumRenderer->printDateTimeField not having a default value for useSecond property
1.14.0 -- 2020-01-09
- update HeliumRenderer->printCustomScripts, is now empty
1.13.2 -- 2019-12-13
- update HeliumRenderer->__construct, now accepts the cssId option
1.13.1 -- 2019-12-13
- update HeliumRenderer->printCustomScripts, is now public
1.13.0 -- 2019-12-13
- add HeliumRenderer->printCustomScripts
1.12.0 -- 2019-12-09
- update HeliumRenderer->printCheckboxField, now accepts htmlAttr property
1.11.0 -- 2019-12-06
- update HeliumRenderer, now can handle chloroform.cssId property
1.10.0 -- 2019-12-06
- update HeliumRenderer, now can handle chloroform.jsCode property
1.9.0 -- 2019-12-06
- add HeliumRenderer->printDecorativeField
1.8.0 -- 2019-12-04
- update HeliumRenderer->printSelectField, now handles arrays
1.7.0 -- 2019-11-25
- update HeliumRenderer->printFormContent, now can handle basic iframe-signal property
1.6.1 -- 2019-11-18
- fix HeliumRenderer->printHiddenField, not printing the css id like the input field
1.6.0 -- 2019-11-18
- update HeliumRenderer->printSelectField, now converts all keys in strings
1.5.0 -- 2019-11-18
- update HeliumRenderer, now input accepts icon option (using bootstrap input groups)
1.4.1 -- 2019-10-24
- add link in README.md
1.4.0 -- 2019-10-17
- add HeliumRenderer->printField method
1.3.0 -- 2019-10-16
- updating css location so that it imports automatically when the planet is imported (https://github.com/lingtalfi/NotationFan/blob/master/universe-assets.md).
1.2.0 -- 2019-07-30
- update css, rendering file looks a bit better now
1.1.0 -- 2019-07-30
- add prepare, printFormTagOpening, printFormTagClosing and printFormContent methods
- move renderPrintsJsHandler option to printJsHandler option
- add printSubmitButton and printFormTag options
1.0.1 -- 2019-07-26
- update doc
1.0.0 -- 2019-07-26
- initial commit

lingtalfi/Chloroform_HeliumRenderer

Chloroform_HeliumRenderer

Install

Summary

What is it?

Quick note about validation

Implemented fields

Implemented js validators

How to use

Related

History Log