What is Interface Builder (IB)?

Interface Builder helps to render a page or content to load in the control panel under the access control procedure. It can be a user-defined page or a CMS or Framework defined object.

How does it work?

The Interface Builder primarily defines a tab and creates or accepts requests to add a submenu. When content is applied to render the ACL (Access Control Limit) module, authentication is applied automatically. Below are the methods to create an interface builder.

Method 1: Definition of XML

This is the primary process for creating an interface builder. Below is the default path for XML files: 

development/definition/interface_builder

Each XML file can contain one or multiple definitions of tabs to be rendered by the system during boot. Each node belongs to the XML tag called <navigation>.

Find a sample XML file below.

<?xml version="1.0" encoding="utf-8"?> <InterfaceBuilder> <navigation name="usermanagement"> <parent> <title>User Management</title> <action>/admin/manage</action> <submenu /> <acl> <group>superadmin</group> </acl> <sort_order>7</sort_order> <icon>/themeroot/admin/images/icons/usermanagement.png</icon> </parent> <child> <menu> <title>Manage Group</title> <items> <item> <title>Add New Group</title> <link>/admin/managegroup/add</link> </item> <item> <title>Manage Group</title> <link>/admin/managegroup</link> </item> </items> <adminicon> <type>FilePath</type> <location>/themeroot/admin/images/icons/icon.png</location> </adminicon> </menu> </child> </navigation> </InterfaceBuilder>

Create the above XML file and place it in the development/definition/interface_builder directory, then a tab will be available in the admin panel.

The interface builder is very important because when any CMS or framework content needs to be rendered, that object needs to mention the tab name to enter the content in the control panel. However, in this manner, the construction of the admin panel becomes easier, rather than struggling with manual coding.

Method 2: Call Back

This section is more meaningful when working with components. In the component, the interface builder needs to keep it within its own scope so it can move during migration. The following steps are required to complete the process:

Step 1: Create the Interface Builder XML, and this time copy this file inside the component folder. Generally, it is created in the “interface_builder” directory. For example, if the component directory name is inventory, then the file location will be

component/inventory/interface_builder/menu.xml

Step 2: After the file creation is done, the callback needs to register in the component so that the core system can request to include the new interface builder. The Hook module is utilized to register the callback in the init() function of the component. See the below example, considering the component name is inventory.

<?php class Component_Inventory_Register extends appRain_Base_Component { public function init() { App::Module("Hook") ->setHookName("InterfaceBuilder") ->setAction("register_definition") ->Register(get_class($this), "register_interface_builder_defination"); } }

In the above code, the hook name is register_interface_builder_definition. The user-defined function must exist in the class mentioned in the first argument. Generally, it is placed in the same class.

Step 3: This is the final step to return the interface builder definition to the core system to include during control panel construction. According to steps 1 and 2, here is the example.

<?php class Component_Inventory_Register extends appRain_Base_Component { public function register_interface_builder_defination() { $srcpaths = Array(); $srcpaths[] = $this->attachMyPath("interface_builder/menu.xml"); return array("filepaths" => $srcpaths); } }


This method returns an array of interface builder definitions.

Note: The attachMyPath method looks for the file inside the component directory.

Method 3: Call Back for Submenu

This section explains how to include a submenu in existing interface builder. For example, a voucher component is required to create a submenu in an existing menu registered by another component called “Accounting System”. In that case the existing interface builder is required to modify by a call back “update_definition”.

Step1: First the call back needs to register by below example:

<?php class Component_Voucher_Register extends appRain_Base_Component { public function init() { App::Module("Hook") ->setHookName("InterfaceBuilder") ->setAction("update_definition") ->Register(get_class($this),"interfacebuilder_update_definition"); } }

Step 2: In second step the new submenu need to add in existing definition according to below example

<?php class Component_Voucher_Register extends appRain_Base_Component { public function interfacebuilder_update_definition($send) { if(isset($send["accounts"]["child"])) { $send["accounts"]["child"][] = Array ( "title"=>"Voucher", "items"=>Array ( array( "title"=>"Search Voucher", "link"=>"/searchexpert/do/voucher" ) ), "adminicon"=> array ( "type"=>"filePath", "location"=>"/component/voucher/icon.jpg" ) ); return $send; } } }

So far this section explained how to work with interface to create options in admin pane. Important to keep in main that whenever any page or object need to render under any of the section then the navigation name in the XML is required to set as tab name.