Creating UI - First Step

GUI-v1 is a Tendoo Library very useful to create quickly interface for your modules and themes. It must be used only in backend.php file for both apps (themes/modules).

As you may know, "backend.php" has the app controller class. This class help you to handle views and models. We assume that you already know how to create a basic module or basic theme. So within you controller header [ref to app header], you must load gui library first in order to use it.

Here is how you can process :

backend.php

<?php
custom_plugin_namespace_backend extends Libraries
{
		function __construct()
    {
    		parent::__construct(); // in order to herists Libraries Helpers
        __extends( $this ); // in order to herists Core functionnalities
        
        $this->load->library( 'gui' ); // here is how you can load gui library.
    }
}

When gui is loaded. You can now within your views files generate UI. First you have to load a view within public method of your plugin.

Here is how you can process :

backend.php

<?php
// ... 
	public function hello_world()
  {
  		// Here is how to load view in module controller.
  		$this->load->the_view( module_include( 'custom-plugin-namespace' , '/views/hello-world.php' ) ); 
      
  }

How to set Cols Width

When your view file is also loaded. You can start generating UI using gui method, which was added to module/theme controller after having being loaded.

To generate UI, you must first define cols width, using "cols_width" method which accepts as first parameter the id of the cols and the second parameter is the width of the cols (multiplied by 3).
Notice : This gui is using "col-lg-x" from bootstrap".

Here is how :

hello-world.php

<?php
$this->gui->cols_width( 1 , 2 ); // settings cols width

Gui has 4 cols availables and each cols can have up to "3" as width. The maximum width for all those columns multiplied by 3 cannot exceed 12. Overflowed columns won't be displayed.

Here is an example :

hello-world.php

<?php
$this->gui->cols_width( 1 , 2 ); // is displayed 6
$this->gui->cols_width( 1 , 2 ); // is displayed 6 + 6 = 12
$this->gui->cols_width( 1 , 1 ); // is not displayed 6 + 6 + 3 > 12

How to add meta box to a specific col

Now that how know how to set width for each columns, it's time to add meta boxes. There are two main types of meta boxes : panel and unwrapped. For each types, there is sub-types which has significant differences.

If "unwrapped" type doesn't have any sub-type, it's not the case of panel, which has three sub-types. The first is :

"panel" itself, which is the base sub-type. This type ouput a collapsible meta box,

"panel-ho" which ouput a collapsible meta box with only a head, and not the body. This option allow user to handle meta box body.

"panel-footer" and footer section to "panel" meta-box style.

Here is how to add meta-box to a column :

hello-world.php

<?php
$meta_namespace = "custom"; // custom namespace for a specific meta. you can use core_meta_namespace() to generate metabox almost unique namespace.

$meta_title			=	__( 'Custom meta' );

$meta_type			=	"panel" or "panel-ho" or "panel-footer" or "unwrapped"; // pick up one type.
$this->gui->set_meta( $meta_namespace, $meta_title, $meta_type );

Now, a meta box has been created, but not yet added to a column. To add this meta box to a specific column, you can chain "push_to" method to "set_meta" like this :

hello-world.php

<?php
$this->gui->set_meta( /* your data */ )->push_to( 1 );
// this code will add this meta box to column 1

$this->gui->set_meta( /* your data */ )->push_to( 2 );
// this code will add this meta box to column 2

$this->gui->set_meta( /* your data */ )->push_to( 4 );
// this code will add this meta box to column 4