Developing Custom WebViews in JavaScript

From Lianjapedia
Jump to: navigation, search


In this tutorial we will see how to build Custom WebView Sections and Gadgets in Visual FoxPro. 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 provides 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:

  • Lianja/VFP (Visual FoxPro compatible)
  • 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.

Custom WebView Sections and Gadgets

Previously, we have seen how to build Custom Sections and Custom Gadgets where the Lianja UI Framework Section and Gadget classes are subclassed, customized, populated and returned to Lianja to be rendered in the custom container. Custom Sections and Gadgets can also be rendered as Lianja WebView containers for WebKit HTML5 web content; ideal for hybrid desktop/cloud Apps. Simply combine non-UI scripting in your chosen language with output of the HTML to be displayed.

Building a Custom WebView Section

New WebView Section

Open or create an App and add a WebView Section to a page.

Editing the WebView Section code

Scripting Language choice

To edit the code for the WebView Section, open up the Section Attributes dialog and make sure the Scripting Language is set to your chosen language - JavaScript.

You can then either type a name in the Custom filename field - this should be a .jssp file - or click on the [...] button for Lianja to automatically create a script for you and take you into the Apps workspace panel with your script open in the Editor.

Once your WebView Scripting language is selected, you can also go straight to editing your script by clicking on the keyboard icon in the WebView Section header.

Building a Custom WebView Gadget

New Form Section

Open or create an App and add a Form Section to a page.

New WebView Gadget

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

Editing the WebView Gadget code

Assign Script filename

To edit the code for the Webview Gadget, open the Gadget Attributes dialog, scroll down and enter the name of your script in the URL attribute.

New Script

Save the Attributes (Done button) then switch to the Apps workspace and create a new script with your filename.

Switch to Pages workspace

Once the script has been created, double-click its name in the Files explorer to open it in the Editor.

After you complete the code editing for your WebView Section or WebView Gadget, just click on the Switch to Pages workspace toolbutton to save the code and return to the Page Builder.

Creating a Custom WebView Section or Gadget

As stated earlier you build Custom Webview Sections and Gadgets by combining non-UI scripting in the language of your choice - JavaScript - with HTML output using the print command.

JavaScript Custom WebView Script

Let's take a look at the code for a Custom WebView. This code can be used in a Section or a Gadget (remember, Gadgets can share their Section with other Gadgets and Fields). The script opens a database then traverses a table, displaying the data in the WebView along with HTML formatting using the JavaScript print command. View the whole script here.

Custom JavaScript WebView Section

Setting this script as the Custom filename of a WebView Section gives this.

Custom JavaScript WebView Gadget

and here's the WebView Gadget.