Development Core Html
Introduction
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.
Note: This documentation refers to version 5 or newer. For older versions of Cloudrexx, please refer to HTML V4.
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:
|
