Pixi* SDK Ui Library Documentation

Pixi* Ui Library is used for generating Ui objects in the application. Ui library has multiple objects that lavrage fast creation of Ui elements in your views.

Ui elements

Menu
Table
Form
Dropdown
Info
Log ...

Download API

API zip file

Icons

The Template comes with a lot of icons, you can see the list of all available icons here: http://fontawesome.io/icons/

public function generateMenu()
{

    $mainMenu = new Menu();
    $mainMenu->addMenuItem(new MenuItem('demo/dashboard', 'Dashboard', 'fa-tachometer'));
    $mainMenu->addMenuItem(new MenuItem('demo/api', 'API Library', 'fa-random'));
    $mainMenu->addMenuItem(new MenuItem('', 'UI Library', 'fa-edit', new Menu(array(
        new MenuItem('demo/uilibrary/tables', 'Tables'),
        new MenuItem('demo/uilibrary/charts', 'Charts'),
        new MenuItem('demo/uilibrary/payments', 'Payments Dropdown'),
        new MenuItem('demo/uilibrary/forms', 'Forms')
    ))));

    return $mainMenu;
}

Table creation example

Table example

At the end of the method we call the loadMainView method from PixiController which generates the content with coresponding layout.

public function countries()
{
    $result = $this->api->pixiGetCountries();

    $demoTable = new Table('List of all Countries');
    $demoTable->addColumn('CntCode', 'ISO Code', DataFormat::FORMAT_STRING);
    $demoTable->addColumn('CntName', 'Country Name', DataFormat::FORMAT_STRING);
    $demoTable->addColumn('DefShipCosts', 'Std Shipping Costs', DataFormat::FORMAT_MONEY);
    $demoTable->addRows($result->getResultset());


    $this->loadMainView('Welcome to the pixi* SDK', 'pixi SDK - Welcome Sample Page', $demoTable);

}

Chart creation example

Chart example

To display the chart we create new \Pixi\Ui\Chart\Chart instance and give it an ID to the constructor. After that we add columns (fields) to the chart. In the next step we populate chart with the data and finally load the main view.

public function example()
{
    // Chart data, two columns 
    $data = array(
            array('country' => 'Germany', 'population' => 81890000),
            array('country' => 'Slovenia', 'population' => 2000000),
            array('country' => 'Austria', 'population' => 8460000)
    );

    // Create new chart and add ID
    $el = new \Pixi\Ui\Chart\Chart('Statistics');

    // Add columns to chart, must match data indexes
    $el->addColumn('country', 'Country');
    $el->addColumn('population', 'Population', 'number');

    // Fill chart with data
    $el->addRows($data);

    // Load main view
    $this->loadMainView('Statistics', 'Statistics', array($el));
}

Data List creation example

DataList example

DataList element looks like two column table, where the first column is the label of the data and the second one shows values. To create the DataList element first gather the data into array, then create new \Pixi\Ui\DataList\DataList instance. Pass the title into the constructor. Add Elements (which are actually rows). Populate DataList with values and pass the DataList element to the main view.

public function example()
{

    // The data to display
    $data = array('country' => 'Germany', 'population' => 81890000);

    // Create new DataList Element
    $el = new \Pixi\Ui\DataList\DataList('Countries and population');

    // Add DataList fields
    $el->addElement('country', DataFormat::FORMAT_STRING, 'Country');
    $el->addElement('population', DataFormat::FORMAT_NUMBER, 'Population');

    // Fill DataList with values
    $el->addValues($data);

    // Display the DataList Element
    $this->loadMainView('Data List Example', 'Data list example', array($el));        
}

Example of the Payments drop down element

Payment example

Payments drop down element automatically generates available payment types for you. Use it like in the example bellow.

public function example() 
{

    // Create payments dropdown 
    $el = new Pixi\Ui\Dropdown\PaymentsDropdown(null,null,'payments','paypal');

    // Send it to main view
    $this->loadMainView('Data List Example', 'Data list example', array($el));
}

Example of Form element.

Form example

Form Ui element generates HTML form. Form works the same as other Ui elements. Find the example in the following listing.

public function example() 
{

    $form = new Form('/welcome/example', 'Add new ship');
    $form->addElement('name', FormElement::ElementTypeString , 'Ship Name');
    $form->addElement('speed', FormElement::ElementTypeString , 'Ship Speed');
    $form->addElement('range', FormElement::ElementTypeString , 'Ship range');


    if ($this->input->post())  {
        $p = $this->input->post();
        if ( empty($p['name']) ) {

            $this->addMessage('Please write the Ship name!', PixiController::MessageError);
            $form->addValues($p);
        } else {
            // Save the ship
            $this->load->model('ship');
            $this->ship->saveShip($p);

            // do the redirect
            $this->load->helper('url');
            redirect('/welcome/example');
        }

    }

    // Load main view
    $this->loadMainView('Add new Ship', ' add new ship', array($form));
}

Example of the Info element

Info Element example

Info element displays box with icon, info title and text title. Icons can be found on bootstrap page: This link

public function example() 
{

    // Create new Info Element
    $el = new \Pixi\Ui\Info\Info('Title of the Info');

    // Add Info
    $el->addElement(new \Pixi\Ui\Info\InfoElement('Info Title', 'Subinfo title', 'fa-heart', 'green', ''));

    // Load main view
    $this->loadMainView('Add new Ship', ' add new ship', array($el));
}

Example of Time Line element

Timeline example

Timeline Ui element generates you cronological ordered logs. See the example bellow:

public function example() 
{

    $el = new Pixi\Ui\Timeline\Timeline('Timeline example');

    $el->addElement(new Pixi\Ui\Timeline\TimelineElement(
            'First event', 
            'This is the description of the first element', 
            '2014-09-23 12:06', 
            null, 
            'asterisk'
    ));

    $el->addElement(new Pixi\Ui\Timeline\TimelineElement(
            'First event', 
            'This is the description of the first element', 
            '2014-09-23 12:06', 
            null, 
            'music',
            'http://www.music.com', 
            'red'
    ));

    // Load main view
    $this->loadMainView('Timeline example', 'small example', array($el));
}

Example of ReleaseNote Element

ReleaseNote is a class to display release notes. They will show in a box, with 2 buttons: more and "don't show again".

#!php


use Pixi\Ui\ReleaseNote\ReleaseNote;
use Pixi\Ui\ReleaseNote\ReleaseNoteElement;

$ReleaseNote = new ReleaseNote('');
//     $ReleaseNote->addElement($Title, $SubTitle, $Version, $URL = "", $MoreButton = "", $HideButton = "Nicht mehr anzeigen")
$ReleaseNote->addElement(new ReleaseNoteElement('Neue Version 1.14', '<ul><li><strong>Artikel nachfüllen</strong> - Sie können die Picklisten App nun auch zum Nachfüllen des Lagerbestands zwischen verschiedenen Locations verwenden. <A href="'.site_url('/refill').'">Funktion aufrufen</a><li><strong>Picken nach Farben</strong> - machen Sie es sich leichter, den richtigen Lagerplatz zu finden, indem Sie eine Farbkodierung für Ihre Lagerplätze einführen. Die Picklisten App markiert die Lagerplatznamen mit der zugehörigen Farbe.</ul>', '1.1', 'https://help.pixi.eu', 'Mehr Infos, Release Notes'));


-- show the HTML generated

var_dump($ReleaseNote->generateHTML());

$this->loadMainView('Item Importer', 'Please choose and upload your CSV file. ', array($ReleaseNote,$html));

class_releasenote preview.png

Wiki

pixi* SDK UI / Home