Developing Custom UI Gadgets in JavaScript

From Lianjapedia
Jump to: navigation, search

Overview

In this tutorial we will see how to build Custom Gadgets 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).

Bm-noteicon.png
Pro Tip

We recommend you use Lianja UI Layouts to help you build a responsive UI. These can be used in any of the supported scripting languages.

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 Framework Classes.

Building a Custom Gadget

Custom Gadgets differ from Custom Sections in that they are inside a Form Section, which can contain other Gadgets and Fields. Let's get started and build a simple Custom Section that takes user text input and converts the case on the click of a button. Firstly, open or create an App and add a Form Section to a blank page.

New Form Section


Next, add a Custom Gadget to the Form Section, making sure your Form Section is still selected (blue border is displayed around the selected Section).

New Custom Gadget


Editing the Custom Gadget code

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

Edit Custom Gadget Code


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

The Apps workspace panel will then be displayed and your Gadget script will be open in the Editor.

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 Gadget on the page. You continue this process iteratively until the Custom Gadget UI is complete.

Switch to Pages Workspace


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 Gadget

Seeing that we are building a Custom Gadget in this tutorial, let's take a look at the code for a Custom Gadget which consists of a Textbox for data entry, Labels for textual display and a CommandButton which causes the case of the data entered to be changed when it is clicked.

Bm-noteicon.png
Pro Tip

To help debug your JavaScript code just place the following command in your code and the JavaScript debugger will be activated:
debugger;

//
// Lianja custom gadget for page "page1" section "section1" gadget "gadget2"
// 
//-------------------------------------------------------------------------- 
// Create the gadget object and add controls
gadget2 = createobject("gadget2","gadget"); 
gadget2.addobject("howto", "label");
gadget2.addobject("lowertext", "textbox");
gadget2.addobject("converted", "label");
gadget2.addobject("upbutton", "commandbutton");
howto.text = "Text to convert to upper case:";
upbutton.caption = "Convert to upper case";
 
//-------------------------------------------------------------------------- 
// Handle the button click() event
upbutton.click = function()
{
    lowstring = lowertext.text;
    converted.text = lowstring.toUpperCase();
};
 
//-------------------------------------------------------------------------- 
// Return the gadget back to Lianja
returnvalue = gadget2;
Custom Gadget in Pages Workspace


Modifying the properties of the objects we have added to the Gadget allows us to alter their appearance. This includes the stylesheet property, which can be assigned a text string containing CSS settings or the name of a CSS file. For example:

howto.stylesheet = "color: white; background-color: orange; border: " +
	"2px groove black; border-radius: 10px; opacity: 1; padding: 2px 4px";
howto.alignment = 2;
howto.borderstyle = 1;
lowertext.fixedheight = 50;
lowertext.stylesheet = "app:/textbox.css";
converted.fixedheight = 50;
converted.stylesheet = "color: black; background-color: white; border: " +
	"2px groove gray; border-radius: 10px; opacity: 1; padding: 2px 4px";
upbutton.fixedheight = 50;
upbutton.fontsize = 14;
upbutton.stylesheet = "app:/button.css";

Page, Section and Gadget attributes such as Title, Caption and colors can be set in their Attributes dialogs - double-click the header or use the Cog button on Pages and Sections.

There are example css files in the lianjacustomcanvas demo App. The 'app:/' prefix means the file is in the App directory and you can create new css files in your App using the 'New' button in the footer of the Files Explorer in the Apps Workspace. You can also create css files in a similar way in the Library workspace and prefix them with 'lib:/' in your properties.

Finally, remember you can add other controls to your Form Section along with your Custom Gadget. You can still drag fields from an open table in the Sidebar, and add Fields, Dividers and other Gadgets using the Form Tools.

Form Section with 2 Custom Gadgets and Fields from a Table