How to Create a BabyGekko Application
This tutorial aims to give you a quick getting started guide for writing a BabyGekko application. This article requires PHP knowledge and some basic knowledge of object-oriented PHP programming. Before we begin, let’s take a look at the following illustration about the core application and administration (backend) application classes in BabyGekko. All BabyGekko applications are derived from the following objects:
Now, let’s suppose we want to create an application called “sample”. For simplicity sake, we will derive this class from blog, which is derived from basicApplicationNestedCategories. The sample application is available for download here: app_sample.zip.
1. Directory Structure
All extension applications will be store under /apps/ and /admin/apps/. Let’s begin by creating a new folder called “sample” under /apps/ and /admin/apps/.
Inside /apps/sample/, we will create a PHP file called “sample.class.php”. The file name of the class should be exactly the same as the directory name and the class name. Inside /admin/apps/sample/, we will create the backend class, which is called sample.admin.class.php. The backend directory should at least contain an admin class file and a javascript containing the table columns and data definition. Additional items such as language file, install/uninstall SQL file, main page template file, logo (48 x 48 PNG file) and editor template files can be added later on.
2. File content
As shown in the source code below, sample.class.php inherits the class “blog”, which is derived from basicApplicationNestedCategories. If you want to further customize how it outputs the item and category display, you can copy view_itemdetails.template.php and view_nestedcategorylist.template.php to /apps/sample/ directory and edit it.
include_app_class('blog');
class sample extends blog
{
public function __construct()
{
$data_items = createDataArray ('id','status','category_id','title','summary','description','virtual_filename','date_available','date_expiry','date_created','date_modified','sort_order','permission_write','permission_read','options','meta_key','meta_description');
$data_categories = createDataArray ('cid','status','items_per_page','parent_id','title','summary','description','sort_order','virtual_filename','date_available','date_expiry','date_created','date_modified','permission_write','permission_read','options');
basicApplicationNestedCategories::__construct('sample','Sample','gk_sample_items', 'id', $data_items, 'gk_sample_categories', 'cid', $data_categories);
}
//_______________________________________________________________________________________________________________//
public function displayMainPage()
{
echo H1('Hello World');
}
//_______________________________________________________________________________________________________________//
public function Run($command)
{
switch ($command['action'])
{
case 'viewitem': $this->displayItemByID($command['id'],$this->cache);break;
case 'viewcategory': $this->displayItemsInCategoryByID($command['id'],$command['pg'],'date_created','DESC',$this->cache);break;
default: return parent::Run($command);
}
return true;
}
}
Now, let’s take a look at the administration application, which can be located under /admin/apps/sample/. The class name sample.admin.class.php and sample.js. The class name of the frontend should be sampleAdmin (the Admin prefix must be added).
//++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++//
// Sample Application - Admin Backend - sample.admin.class.php
//++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++//
include_app_class('sample');
include_admin_class('blog');
//+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++//
class sampleAdmin extends blogAdmin {
//_________________________________________________________________________//
public function __construct()
{
$appname = 'sample';
$datatype = 'basicnestedcategory';
// the following is required so that your methods/action can be displayed in Menu Administration
$methods = array ('standard_main_app' => 'Main Application Page',
'standard_browse' => 'View a specific item/category',
'rss' => 'View RSS 2.0'
);
basicAdministrationNestedCategories::__construct($appname, $datatype, $methods);
}
}
The Javascript sample.js is inherited from /admin/js/admin.js and at the very least, you are required to define the table columns and type. You also have to specify the application name. As shown in the constructor, despite the fact that sampleAdmin inherits from blogAdmin, it calls the basicApplicationNestedCategories constructor so it can customize options that could not be customized if you inherit it directly from blogAdmin. Also, it is recommended that in the Javascript part you inherit Admin.Sample rather than Admin.Blog directly from the basic Administration classes with YAHOO.lang.extend. There is no restriction in the naming but it is recommended to keep it the same for consistency sake.
//++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++//
// Gekko Web Builder - Copyright (C) Baby Gekko. Coded by Prana.
//++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++//
var app_name = "sample";
var app_description = "sample";
// ********************************************************************************************************************************************
Admin.Sample = function (class_name)
{
this.constructor.superclass.constructor.call(this,class_name);
};
///////////////////////////////////////////////////////////
YAHOO.lang.extend(Admin.Sample, Admin.BasicNestedCategories);
///////////////////////////////////////////////////////////
Admin.Sample.prototype.buildDataColumnDefinitionAndResponseSchema = function()
{
var status_array = [{value:0, label: "Inactive"}, {value:1, label: "Active"} ];
this.columnDefinition = [
{key:"check", label: '', formatter:this.formatSelectionCheckBox}, // use the built-in checkbox formatter (shortcut)
{key:"button", label:"ID", sortable:true, formatter:this.formatIcon}, // use the built-in button formatter
{key: this.field_category_id, hidden:true, sortable:false, formatter:"number"},
{key: this.field_id, hidden:true, sortable:false, formatter:"number"},
{key: this.field_item_title, label: 'Title', sortable:true, formatter:this.formatEditLink}, // use the built-in currency formatter
{key:"virtual_filename", label: 'Shortcut', sortable:true, formatter:this.formatShortcut}, // use the built-in currency formatter
{key:"status", label: 'Status', sortable:true, formatter:this.formatStatus, editor: new YAHOO.widget.DropdownCellEditor({dropdownOptions:status_array,disableBtns:false}) },
{key:"sort_order", label: 'Sort Order', sortable:true, formatter:"number", editor: new YAHOO.widget.TextboxCellEditor({validator:YAHOO.widget.DataTable.validateNumber,disableBtns:false})},
// {key:"date_available", label: 'Date Available', sortable:true, formatter:this.formatDate, editor: new YAHOO.widget.DateCellEditor({disableBtns:false})}, // use the built-in date
{key:"date_created", label: 'Date Created', sortable:true, formatter:this.formatDate, editor: new YAHOO.widget.DateCellEditor({disableBtns:false})}, // use the built-in date
{key:"date_modified", label: 'Date Modified', sortable:true, formatter:this.formatDate, editor: new YAHOO.widget.DateCellEditor({disableBtns:false})} // use the built-in date
];
this.dataResponseSchema = {
resultsList: "data",
// Use the parse methods to populate the RecordSet with the right data types
fields: [
{key:this.field_category_id, parser:"number"},
{key:this.field_id, parser:"number"},
{key:this.field_item_title, parser:"string"},
{key:"virtual_filename", parser:"string"},
{key:"status", parser:"number"},
{key:"sort_order", parser:"number"},
{key:"virtual_filename", parser:"string"},
{key:"date_created", parser:"date"},
{key:"date_modified", parser:"date"}
]
};
}
///////////////////////////////////////////////////////////
var start_Sample = function()
{
gekko_app = new Admin.Sample (app_name,app_description);
gekko_app.Run();
}
YAHOO.util.Event.addListener(window,'load',start_Sample);
The install.sql and uninstall.sql will be executed upon installation/uninstallation.
The lang_.php contains definition of languages.
If the application has an item, you can use editoritem.template.php. The mainpage.template.php contains the main application button and you can also add config.template.php to further customize your application option.
4. Packaging your application
An application is distributed as a ZIP file. Before you create the ZIP file, create a directory called "sample" and create a two subfolders called app_files for the frontend and appadmin_files for the backend. Then put the files from your application inside those two subfolders. To package your application, go up one directory level and zip the whole folder your_application_name. The top directory "sample" at the top must not be ignored. Also, it it highly recommended to use lowercase for all the name for convenience of cross-platform development between developers using different OS (Windows, OS X, Linux)
5. Testing your application
To test the installation of your package, go to the Administration site, and click Applications and upload the ZIP file.
