Developing Custom WebViews in Visual FoxPro
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:
- Visual FoxPro
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.
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
Open or create an App and add a WebView Section to a page.
Editing the WebView Section code
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 - Visual FoxPro.
You can then either type a name in the Custom filename field - this should be a .rsp 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
Open or create an App and add a Form Section to a page.
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
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.
Save the Attributes (Done button) then switch to the Apps workspace and create a new script with your filename.
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 - Visual FoxPro - with HTML output using the ? command.
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 Visual FoxPro ? command. View the whole script here.
Setting this script as the Custom filename of a WebView Section gives this.
and here's the WebView Gadget.