Layout

Basic Page Layouting

Appzio separates the screen into three parts – the Header, the Scroll and the Footer. The header and the footer are pretty self-explanatory, they take the upper and lower parts of the screen and they are static (they don’t move while scrolling). The scroll, on the other hand is dynamic – it is scrollable and will contain most of the elements on the screen.

The header, scroll and footer are all arrays and are available in the data property on the controller. Adding elements to them will display them each on a separate line in the order that you have attached them. Similarly to how block elements work in html. The best practice is to add elements directly to the scroll whenever you can.

$this->data->scroll[] = $this->getText('Hello World!');
$this->data->scroll[] = $this->getText('This is a text on e separate line');

The above example will render the two strings on separate lines. However, you may want to fix certain elements to the top or the bottom of the page. This is where you can take advantage of the header and footer arrays. By default, elements added to them are going to be fixed either to the top or bottom. This is a plus when you want a title or buttons to be available to the user without the need of scrolling

$this->data->header[] = $this->getText('Application Title');
$this->data->scroll[] = $this->getText('This is the scrollable part of the screen');
$this->data->footer[] = $this->getTextbutton('Action', array('id' => 'take-action'));

Here we’ve got a title that will constantly appear on top of the screen, text added to the scroll and an action button that will be fixed on the bottom of the screen. You can use all available elements and they will be rendered on separate lines.

Advanced Page Layouting

Appzio provides you with a simple way to arrange elements in the different parts of the screen out of the box. However, you will often need to create more complex layouts and grids, so the platform provides you with other built in methods – rows and columns. The concept of dividing content in rows and columns is used in many frameworks like Bootstrap. Similarly to them, the Appzio platform allows you to use the same concept to create really complex layouts.

Rows are used to arrange elements horiontally – All elements inside will be fitted on a single line if possible. Columns on the other hand are used to format elements vertically and all elements inside a column will be on a new line. Both structures can contain elements and images, but you can also nest them to produce grids.

getRow

Used to arrange elements on a single line. Accepts text, images, columns or nested rows.

content

params

$this->data->scroll[] = $this->getRow(array(
    $this->getText('First element'),
    $this->getText('Second element'),
    $this->getText('Third element')
));

getColumn

Used to arrange elements on separate lines

content

params

$this->data->scroll[] = $this->getColumn(array(
    $this->getText('My Profile'),
    $this->getImage('profile_image.png'),
    $this->getTextbutton('Edit Profile', array('id' => 'edit-profile'))
));

Nested Layouts

As mentioned above, nesting rows and columns provide you with the ability to create complex grids and layouts. In the previous examples, the elements were added inline in order to simplify the code, but in more complex situations you will have to add more than a couple of text elements which will result in high levels of indentation. In order to avoid that you could separate them into different variables, providing better code readability and allowing you to reuse them if necessary.

This example from our codebase is used to create a simple grid for the user’s profile pictures. Variable names are named that way in order to get a better understanding of what is going on.

// Add the user's profile picture to an array
$row[] = $this->getProfileImage('profilepic',true);
// Add an element representing empty space, used for margin
$row[] = $this->getVerticalSpacer($this->margin);

// Fill another array with user images and blank space
$column[] = $this->getProfileImage('profilepic2');
$column[] = $this->getSpacer($this->margin);
$column[] = $this->getProfileImage('profilepic3');

// Add a column to the first array
$row[] = $this->getColumn($column);

// Add a row to the scroll
$this->data->scroll[] = $this->getRow($column);
// Adds whitespace as an element underneath the row
$this->data->scroll[] = $this->getSpacer($this->margin);

unset($column);
unset($row);

// Row array is empty, fill it with the rest of the profile images and blank spaces between them
$row[] = $this->getProfileImage('profilepic4');
$row[] = $this->getVerticalSpacer($this->margin);
$row[] = $this->getProfileImage('profilepic5');
$row[] = $this->getVerticalSpacer($this->margin);
$row[] = $this->getProfileImage('profilepic6');

// Add another row to the scroll
$this->data->scroll[] = $this->getRow($row);