PDA

View Full Version : Get to know Bootstrap and Knockout.js to spice up your Lianja WebViewWidgets



barrymavin
2013-03-10, 04:13
As you probably have gathered by now, Lianja WebViewWidgets are extremely powerful as they provide a two-way interaction between an HTML/JavaScript UI WebViewWidget component and the Lianja engine running on the desktop or Cloud.

When building WebViewWidgets in Lianja you have the complete Lianja/VFP scripting language available to you inside Lianja .rsp pages. These .rsp pages will look familiar to anyone who has developed in .asp or .php as .rsp pages borrow a great deal of their functionality but allow you to code in VFP -- a great data-centric scripting language, right in the page with no pre-compilation required. They are dynamic, fast and highly responsive as the .rsp files get compiled dynamically and only get recompiled when the page has been modified.

To further provide a high degree of scaleability the compiled .rsp files (.rso object files) are loaded into shared memory segments allowing one instance of them to be shared across all concurrent users running them. This results in sub-second response times in the order of milliseconds in most cases. There is no need to mess about configuring and tuning caches, it's all done for you automagically.

When building Lianja WebViewWidgets I highly recommend you look at the following which can be used inside your .rsp pages and are included in the Lianja distribution so there is no need to download them. Just familiarize yourself with them and use them.

Bootstrap (simple to use)
http://twitter.github.com/bootstrap/components.html

Knockout.js (very nice indeed)
http://knockoutjs.com

Enjoy and... Happy App building.

hmischel@diligentsystems.com
2013-03-10, 12:35
Hi Barry,

Is it possible for someone to put together a real quick example of an app that uses a jquey grid based off of a value in Form? I'd like to see how the components all interact.
This is pretty exciting.

Thanks.

Herb

barrymavin
2013-03-10, 19:21
Hi Barry,

Is it possible for someone to put together a real quick example of an app that uses a jquey grid based off of a value in Form? I'd like to see how the components all interact.
This is pretty exciting.

Thanks.

Herb

Herb, if you look at the lianjademo on the employees page, both the calendar and the HTML editor are WebViewWidgets that work with the engine. The code is all in the library directory. All you have to do is work with the Lianja Object Model. Grids can be populated with JSON which can be generated in one SQL Select statement.

barrymavin
2013-03-10, 20:16
Hi Barry,

Is it possible for someone to put together a real quick example of an app that uses a jquey grid based off of a value in Form? I'd like to see how the components all interact.
This is pretty exciting.

Thanks.

Herb

I should also mention that jquery is in fact included in the Lianja distro also.

WebKit is an embedded component in Lianja in the form of a WebView section and WebView gadget so you can in fact integrate jquery components in with Lianja apps.

The Lianja system object is available inside WebViews (in JavaScript) as well as in Lianja/VFP, Python and PHP.

This is designed to appear seamless. You can make calls inside JavaScript to the core methods of the Lianja system object, traverse the LOM (Lianja Object Model), execute (client and server-side) commands, evaluate expressions, fetch data, and all the other power of that seamless integration between client and server.

Lianja has been designed in such a way as to separate the presentation UI from the middleware business logic and the database access logic.

I'd also like to point out that the Lianja Web Client handles a lot of this for you as it handles the standard sections and automagically handles CRUD operations, fetching data on demand (large data sets) and provides most of what you need to deploy your Apps in the cloud. This is also the case with the Lianja Mobile Client but i'd rather not talk too much about what we are doing with that and how it renders Apps in small screens. You will see soon enough :)

hmischel@diligentsystems.com
2013-03-10, 20:46
Hi Barry,

Now you have me thinking.
If I am not someone that has in the past used Jquery, Bootstrap or Knockout. Do I spend the time coming up to speed on these technologies, or will the Lianja web client have the equivalent functionality?

Thanks.
Herb

barrymavin
2013-03-10, 21:04
No it is not required as the Lianja Web Client and the Lianja Mobile Client has this functionality.

I have enabled all this integration if you feel developers would like to use them -- not a prerequisite. My objective is to provide a data centric platform where you write less code not more.

I used some of these technologies internally inside Lianja but that is transparent to Lianja developers.

I personally like the WebViewWidget architecture primarily because I use it in the product -- so i keep plugging it.

hmischel@diligentsystems.com
2013-03-10, 21:17
I cant imagine an easier way to display a Rich-Text Editor. You just make the webViewWidget a varchar field as a source and it knows what to do.

Pretty cool.

Thanks.

barrymavin
2013-03-10, 21:28
I cant imagine an easier way to display a Rich-Text Editor. You just make the webViewWidget a varchar field as a source and it knows what to do.

Pretty cool.

Thanks.

Yes thats all the data binding which is inherent in Lianja.

In fact just drag a VarChar field onto the page and it will set everything up for you and make it editable. You can also specify in the attributes whether to edit on "Click" or edit on "Double-Click".

Now in RC4 with data mapping things are getting even more interesting. When you get the next RC4 build there are several example apps in it.

datamapping_example
catalogview_example

Take a look at them. NoCode required.

I will be adding more small apps with the postfix "_example" so that you can see how these things all work.

In the future (not v1.0) I will be adding a "Rules Wizard" similar to what you see in Microsoft Outlook. This will allow you to build the UI then just tell it how to transition as different "Actions" occur within the app while the end-user is using it. e.g.

"When the field "Customername" is empty "Hide the 'Customer details' section" otherwise "Show the 'Customer details' section". This allows the app to be built and affect "state changes" without having to write code to do it.

This is all possible due to the Lianja ART engine and the addition of the "UI States Editor" in RC4.

barrymavin
2013-03-10, 21:33
I cant imagine an easier way to display a Rich-Text Editor. You just make the webViewWidget a varchar field as a source and it knows what to do.

Pretty cool.

Thanks.

Above reply is also true for "Images". If you drag the "Photograph" field from the "Employees" table Lianja will automagically create an "Image Strip".

The ability to "Relate" sections together is extremely powerful. This is essentially relational databases taken to a higher level of abstraction where you can think of Lianja "Sections" as "Tables" and join then visually.

Thats the basis behind it.