Appzio Platform provides a really easy “HTML like” way for creating complex and fully functional layouts. All the platform is fully compiled to native client code. The principles of creating a structure of a certain view are really similar to what developers are used to see and do in a HTML document.
Just like in a standard markup language, Appzio views consist of 3 main logical dividers: header, scroll, footer. If you need to append an element to a certain part of the View, you could do it the following way:
// Append an element to header
$this->layout->header[] = {some element}
// Append an element to the 'body' of the view
$this->layout->scroll[] = {some element}
// Append an element to footer
$this->layout->footer[] = {some element}
Respectfully, elements, attached to the “header” of your layout would stick to the top part of the View; elements attached to “footer”, would be appended to the bottom. As the name suggests, all elements attached to the “scroll” would take the space between the header and the footer. Note that you could append as many elements as you wish, without worrying about the performance of your app. Overflowing is also natively supported, so a vertical scrollbar would appear when needed.
Special layout elements:
– overlay – allows you to attach floating elements/components. As the name suggests, such elements would appear above the others ( just like the absolutely positioned HTML elements in a browser ).
– onload – provides a way to attach events, which would be executed upon initializing your View
Examples:
$this->layout->overlay[] = $this->getComponentImage('icon-learning-circle.png', array(
'layout' => $layout,
'onclick' => $onclick,
));
$layout = new \stdClass();
$layout->top = 80;
$layout->bottom = 0;
$layout->left = 0;
$layout->right = 0;
$this->layout->onload[] = $this->getOnclickShowDiv($divId, array(
'background' => 'blur',
'tap_to_close' => 1,
'transition' => 'from-bottom',
'layout' => $layout
));
All Appzio Views share common layout principles. Therefore, you could produce a meaningful layout just by using a few of our build-in components:
– Text – the simplest way to display some text content on your view.
$this->layout->scroll[] = $this->getComponentText('some text')
– Image – displays an image within the context of your view. The component supports both dynamic URL based paths and local image names.
$this->layout->scroll[] = $this->getComponentImage('flower.png')
– Rows and Columns – those native client components take the complexity a bit further and provide a way to create nested layouts and more complex views. Their behavior is really similar to HTML’s table tr ( table row ) and td ( table data ) tags. Therefore, in order to achieve best results, we recommend nesting your Columns inside a Row, so your logical structure tree should be the following:
– Row
— Column
— Row
—- Text component
—- Image component
— Column
— Row
—- Text component
—- Image component
Note that you should follow the logical principle that a Row should always contain a Column.
$this->layout->scroll[] = $this->getComponentRow([
$this->getComponentColumn([
$this->getComponentRow([
$this->getComponentText('Left selection: ', ['style' => 'uikit_slider_hint']),
$this->getComponentText('20', ['variable' => 'double-slider-1', 'style' => 'uikit_slider_hint']),
])
], [], [
'width' => '50%',
'text-align' => 'left',
]),
$this->getComponentColumn([
$this->getComponentRow([
$this->getComponentText('Right selection: ', ['style' => 'uikit_slider_hint']),
$this->getComponentText('80', ['variable' => 'double-slider-2', 'style' => 'uikit_slider_hint']),
])
], [], [
'width' => '50%',
'text-align' => 'right'
]),
], [
'style' => 'uikit_slider_hintrow'
]);
You could browse a full list of our components right here.
We built the Appzio platform with the idea that it should be as familiar and as easy to use for Web developers as possible. Therefore, our components “understand” the majority of the standard CSS 2 notations. This means that you could simply use familiar notations such:
– width and height
– margin and padding
– color and background-color
– vertical-align and text-align
– border-radius, border-width and border-color
– opacity
You could find a list of all supported style notations here