Skip to content

Core Html

The HTML component provides the ability to generate HTML output from the controller part of a component while preserving a strict separation to the view layer.

Autogenerated Views

The most powerful toolset are Autogenerated Views which provides a ready-to-use GUI for the management (view, list, add, edit, copy, delete, sort, filter) of any entity.

Manual Views

As the model and controller elements of a component must not directly contain any HTML code, the HTML component provides the following helpers to programatically generate HTML-output:

Helper Purpose Example
\Cx\Core\Html\Model\Entity\TextElement Raw text (without any markup) Code: 
$text = new \Cx\Core\Html\Model\Entity\TextElement('hello world');
echo $text;

Generated output: 

hello world
\Cx\Core\Html\Model\Entity\HtmlElement Any HTML-element Code: 
$div = new \Cx\Core\Html\Model\Entity\HtmlElement('div');
$div->setAttribute('id', 'my-div');
$div->setClass('my-style');
$div->addChild(new \Cx\Core\Html\Model\Entity\TextElement('hello world'));
echo $div;

Generated output: 

<div id="my-div" class="my-style">hello world</div>
\Cx\Core\Html\Model\Entity\DataElement A HTML form field element (input/select) Code: 
$input = new \Cx\Core\Html\Model\Entity\DataElement(
    'my-field',
    'somevalue',
    \Cx\Core\Html\Model\Entity\DataElement:TYPE_INPUT
);
echo $input;

Generated output: 

<input type="text" name="my-field" value="somevalue" />
\Cx\Core\Html\Model\Entity\DataElementGroup A HTML form field collection of radio or checkbox elements Code: 
$group = new \Cx\Core\Html\Model\Entity\DataElementGroup(
    'my-group',
    array(
        'mon' => 'Monday',
        'fri' => 'Friday',
    ),
    'mon',
    \Cx\Core\Html\Model\Entity\DataElementGroup::TYPE_CHECKBOX
);
echo $group;

Generated output: 

<div name="my-group">
    <input type="checkbox" name="my-group" id="data-element-group-1-0" value="Monday" checked="checked" />
    <label for="data-element-group-1-0">Monday</label>
    <input type="checkbox" name="my-group" id="data-element-group-1-1" value="Friday" />
    <label for="data-element-group-1-1">Friday</label>
</div>
\Cx\Core\Html\Model\Entity\FieldsetElement A HTML form fieldset element Code: 
$fieldset = new \Cx\Core\Html\Model\Entity\FieldsetElement();
echo $fieldset;

Generated output: 

<fieldset></fieldset>
\Cx\Core\Html\Model\Entity\FormElement A HTML form Code: 
$form = new \Cx\Core\Html\Model\Entity\FormElement(
    new \Cx\Core\Routing\Url::fromBackend('MyComponent', 'MyCmd')
);
$input = new \Cx\Core\Html\Model\Entity\DataElement(
    'my-field',
    'somevalue'
);
$form->addChild($input);
echo $form;

Generated output: 

<form action="/cadmin/MyComponent/MyCmd">
    <fieldset>
        <input type="text" name="my-field" value="somevalue" />
    </fieldset>
    <fieldset class="actions">
        <input type="submit" value="Save" />
    </fieldset>
</form>
\Cx\Core\Html\Model\Entity\RangeSliderElement A range slider element (using jQuery Range Slider) Code: 
$slider = new \Cx\Core\Html\Model\Entity\RangeSliderElement(
    'my-slider',
    'my-slider',
    '0',
    '100',
    '0',
    '90',
    '10'
);
echo $slider;

Generated output:

Range-element.png