Developing Lianja Custom Sections in JavaScript

PDF Print E-mail

About this tutorial

In this tutorial we will see how to build Custom Sections in JavaScript. The target audience is for intermediate developers who have read through and understood the Getting Started with Lianja tutorial.

The Lianja App Development process

As you should recall from the Getting Started with Lianja tutorial, developing apps in the Lianja App Builder is an iterative process.
Let's just quickly review that process.

  • You visually build a Lianja App using the Lianja App Builder. For non-programmers, the Lianja App Builder providers a wide range of pre-built templates to assist you in building an App quickly and easily.
  • Lianja Apps are made up of Pages. Pages are made up of Sections. Sections are made up of Fields and Gadgets.
  • You can group pages into Page Collections.

If you require to build a more complex App with a custom UI, you do this by building Custom Sections and/or Custom Gadgets in any of the following scripting languages which are integrated into the Lianja App Builder:

  • Visual FoxPro
  • JavaScript
  • Python
  • PHP

Seeing that the Lianja App Builder has an embedded database built into it, you do not need to install any other software to be able to build multi-user high performance database apps for the desktop, web and mobile devices.

The Lianja embedded database engine is highly compatible with Visual FoxPro. It includes a feature-complete cross platform implementation on the Visual FoxPro scripting and database engine.

Python, JavaScript and PHP are seamlessly integrated on top of this database engine, allowing you to build custom UI sections and custom UI gadgets in Visual FoxPro, JavaScript, Python or PHP and make full use of the power of this high performance database engine with local cursors and complete SQL and noSQL database support.

To facilitate the development of custom UI sections and gadgets, Lianja comes with a cross-platform, UI independent application framework called the Lianja UI Framework.

Lianja UI Framework

The Lianja UI Framework is a feature rich application framework used to build custom UI elements for the desktop, web and mobile devices. The classes, methods and properties in the framework are compatible with those in Visual FoxPro 9.0 but have been extensively extended to make it easier to build UIs for Apps that will run on the desktop, web and mobile devices. In particular, it has complete Layout Manager support, and provides the ability for each UI component to be skinned using CSS attributes (the Stylesheet property).

You use Visual FoxPro, JavaScript, Python or PHP with the Lianja UI Framework to build Custom Sections and Custom Gadgets.  All Lianja UI Framework Classes provide integrated data binding to the underlying Lianja embedded database (the Controlsource property).

For details of the classes available in the Lianja UI Framework see the Lianja Documentation Wiki.

Building a Custom Section

Let's get started and build a simple Custom Section that displays some data from a database in a Grid.  Firstly, open or create an App and add a Custom Section to a blank page.

New Custom Section

Editing the Custom Section code

To edit the code for the Custom Section move the mouse cursor over the Section header and click the Keyboard icon.

Edit Custom Section Code

Note that you use this same procedure to edit both Custom Sections and Custom Gadgets but in the case of Gadgets you move the mouse over the Gadget header.

The Apps workspace panel will then be displayed and the template code for the Custom Section will be generated and available for you to edit.

Script Editor Template

After you complete the code editing, just click on the Switch to Pages workspace toolbutton. This causes the code you edited to be saved, compiled and reloaded into the custom section on the page. You continue this process iteratively until the custom section UI is complete.

Using the Lianja UI Framework

As stated earlier you build Custom Sections and Gadgets using the Lianja UI Framework. When building a Custom Section you should subclass the Section class. When building a Custom Gadget you should subclass the Gadget class.

Creating a Custom Section

Seeing that we are building a Custom Section in this tutorial, let's take a look at the code for a Custom Section which consists of a tabbed PageFrame containing a Grid with a simple address book style navigation ListBox that populates the Grid with data when the ListBox is clicked.

//
// Lianja custom JavaScript section "page1_section1"
//
//--------------------------------------------------------------------------
// Step 1: Create the custom section object
// Note that the CreateObject() function needs two args: objectname, classname
oSection = createobject("oSection", "section");
 
//--------------------------------------------------------------------------
// Step 2: Create a PageFrame class and add it to the Section
oSection.addobject("ui_tabs", "pageframe");
 
//--------------------------------------------------------------------------
// Step 3: Add a Page to the PageFrame class and set some of its properties
ui_tabs.addobject("ui_tab_customers", "page");
ui_tab_customers.caption = "Customers";
 
//--------------------------------------------------------------------------
// Step 4: Add a Container to the Page and set some of its properties
// the AddObject() method takes the object name as the first arg then the 
// class name as the second.
ui_tab_customers.addobject("ui_cont", "container") ;	
ui_cont.autosize = 1;
ui_cont.backcolor = "lightblue";
ui_cont.layout = "horizontal";
ui_cont.margin = 5;
ui_cont.spacing = 5;
 
//--------------------------------------------------------------------------
// Step 5: Add a ListBox to the Container and set some of its properties
ui_cont.addobject("ui_listbox", "Listbox");
ui_listbox.fixedwidth = 200;
 
//--------------------------------------------------------------------------
// Step 6: Declare event callbacks for objects using JavaScript closures
// like this:
ui_listbox.click = function( )
{
    ui_grid.clear( );
    // Note how the AddItems method of Grid, LisBbox and ComboBox can take 
    // a SQL SELECT statement as an argument
    if (ui_listbox.text.trim( ) == "All")
    {
        ui_grid.additems('select * from southwind!example where last_name != " "'); 
    } 
    else 
    {
        ui_grid.additems('select * from southwind!example where ' +
                    'upper(left(last_name,1)) = "' + ui_listbox.text.trim( ) + '"');
    }
    ui_grid.refresh( );
};
 
//--------------------------------------------------------------------------
// Step 7: Invoke the AddItems method with a comma-separated list of items
// to add to the Listbox
ui_listbox.additems("All,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z");
 
//--------------------------------------------------------------------------
// Step 8: Add a Grid to the Container
ui_cont.addobject("ui_grid", "grid");
ui_grid.show( );
ui_grid.rowheight = 20;
ui_grid.readonly = 1;
ui_grid.recordmark = 0;
ui_grid.closable = 0;
ui_grid.caption = "Sample data";
ui_grid.additems('select * from southwind!example where last_name != " "');
ui_grid.autofit( );
ui_grid.refresh( );
 
//--------------------------------------------------------------------------
// Step 9: Add a few more Page classes to the PageFrame
ui_tabs.addobject("ui_tab_orders", "page");
ui_tab_orders.caption = "Orders";
ui_tabs.addobject("ui_tab_shippers", "page");
ui_tab_shippers.caption = "Shippers";
 
//--------------------------------------------------------------------------
// Step 10: Now return the section back to the Lianja. We accomplish
// this by assigning it to the returnvalue variable.
returnvalue = oSection;

Custom Section in Pages Workspace

For details of the classes available in the Lianja UI Framework see the Lianja Documentation Wiki.

Global functions available to your JavaScript code

When you develop a Custom Section or Gadget in JavaScript, the Lianja UI Framework makes available several built-in global JavaScript functions to enable you to interact with Lianja and the embedded Lianja database. This provides you with a embedded JavaScript database with full SQL and noSQL data access.

  • createObject(objectname, classname)
  • openDatabase(dbname)
  • showMessage(messagetext)
  • execute(lianjacommandstring)
  • evaluate(lianjaexpression)
  • require(filename)
  • require_once(filename)
  • include(filename)
  • include_once(filename)

Containers, Components and Utility classes

The Lianja UI Framework has a wide range of classes available for you to use in Custom Sections and Custom Gadgets. These classes are categorized as Containers, Components or Utility classes.

Container classes available in the Lianja UI Framework

Container classes are UI classes that can have other UI classes (Containers or Components) added to them to construct a hierarchical tree of visual elements. You add objects to existing objects using the AddObject( ) method of a container. The first argument is the name of the object you want to create and the second is the name of the class that you want to instantiate e.g.

// create a new object called "myobj" which is a "Container"
myobj = createObject("myobj", "Container");
 
// add a new object variable called "mygrid" which is a "Grid" 
myobj.addObject("mygrid", "grid");


Container classes are UI classes that can have other UI classes added to them and include the following.

  • CommandGroup
  • Container
  • Control
  • Gadget
  • Grid
  • Page
  • PageFrame
  • Section
  • Splitter
  • Tree

Component classes available in the Lianja UI Framework

Component classes are UI classes that cannot have other UI classes added to them and include the following.

  • ActionBar
  • CheckBox
  • Column
  • ComboBox
  • CommandButton
  • DateTextBox
  • DateTimeTextBox
  • Editbox
  • Header
  • Hyperlink
  • Image
  • ImageStrip
  • Label
  • LCDNumber
  • Line
  • ListBox
  • OptionButton
  • OptionGroup
  • PopupMenu
  • ProgressBar
  • Separator
  • Shape
  • Spinner
  • Splitter
  • TextBox
  • ToolBar
  • ToolBox
  • TreeItem
  • WebView

Utility classes available in the Lianja UI Framework

  • Collection
  • Database
  • Timer

Object Methods, Properties and Events

All classes in the Lianja UI Framework have Methods and Properties. Methods are procedures that control the behavior of the object and Properties are attributes that control the appearance and functionality of the object. All classes in the framework have a common set of Properties and Methods and others that are specific to the class. e.g.

Some common properties:

  • Left
  • Top
  • Width
  • Height
  • BackColor
  • ForeColor

Some common methods:

  • show
  • hide

Events are actions that are triggered when an object is affected by some external action e.g. clicking a CommandButton or editing a TextBox.

By subclassing the Lianja UI Framework classes you can define your own Event procedures that will be called when an event is triggered. e.g. let's declare a class that subclasses a CommandButton and responds to the click event.

myobj = createobject("myobj", "Commandbutton");
// You declare event callbacks for objects using javascript closures like this:
myobj.click = function( )
{
        // place your event handler here
};

Summary

As you can see from this tutorial, it is easy to extend Lianja by building Custom Sections and Gadgets in JavaScript. JavaScript has been integrated into Lianja as a first class citizen. The Lianja UI Framework is a very high level cross-platform object-oriented framework that makes it easy to build applications that can be deployed on the desktop, web and mobile devices with the UI all coded in JavaScript.

See Also

Lianja Developers Guide
Lianja Documentation Wiki