Difference between revisions of "Understanding Data Binding"

From Lianjapedia
Jump to: navigation, search
(Lianja UI Framework)
(Lianja UI Framework)
 
(9 intermediate revisions by the same user not shown)
Line 1: Line 1:
<div style="margin-bottom:5px;padding:5px;border:0px solid orange;border-left:5px solid orange;background:#fff8dc;vertical-align:middle;position:relative;">
+
<div style="height:50px;margin-bottom:5px;padding:5px;border:0px solid orange;border-left:5px solid orange;background:#fff8dc;vertical-align:middle;position:relative;">
[[File:bm-noteicon.png|top|40px|link=]]<div style="position:absolute;top:3px;margin-bottom;bottom:5px;margin-left:50px;"><b> Before you start</b>
+
[[File:bm-noteicon.png|top|40px|link=]]<div style="position:absolute;top:3px;margin-bottom;bottom:5px;margin-left:50px;"><b> Quick Start Guide</b>
To understand this article it is recommended that you are comfortable with JavaScript or Lianja/VFP.
+
You specify data binding in the "Data Source" in the "Attributes" Tab of the "Pages" workspace.<br/>
 
</div>
 
</div>
 
<span style="height:6px;"> </span>
 
<span style="height:6px;"> </span>
Line 15: Line 15:
 
As you navigate between data the “Data source” is automatically updated in the UI.
 
As you navigate between data the “Data source” is automatically updated in the UI.
  
As you edit data the “Data source” is automatically updated. There is no coding required to accomplish display and editing of fields or gadgets.
+
As you edit data the “Data source” is automatically updated in the database. There is no coding required to accomplish display and editing of fields or gadgets.
 +
 
 +
<div style="height:38px;margin-top:15px;padding:5px;border:0px solid orange;border-left:5px solid orange;background:#fff8dc;vertical-align:middle;position:relative;">
 +
[[File:bm-noteicon.png|top|40px|link=]]<div style="position:absolute;top:7px;bottom:5px;margin-left:50px;">
 +
Data binding works across Desktop, Web and Mobile Apps. No coding required.
 +
</div>
 +
</div>
  
 
=Lianja UI Framework=
 
=Lianja UI Framework=
  
The [[:Category:Framework Classes|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).  
+
The [[:Category:Framework Classes|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 [[Understanding_UI_Layouts|Layout Manager support]], and provides the ability for each UI component to be skinned using CSS attributes (the Stylesheet property).  
  
<div style="margin-bottom:5px;padding:5px;border:0px solid orange;border-left:5px solid orange;background:#fff8dc;vertical-align:middle;position:relative;">
+
<div style="height:80px;margin-bottom:5px;padding:5px;border:0px solid orange;border-left:5px solid orange;background:#fff8dc;vertical-align:middle;position:relative;">
[[File:bm-noteicon.png|top|40px|link=]]<div style="position:absolute;top:3px;margin-bottom;bottom:5px;margin-left:50px;"><b> Pro tip</b>
+
[[File:bm-noteicon.png|top|40px|link=]]<div style="position:absolute;top:3px;margin-bottom:5px;bottom:5px;margin-left:50px;"><b> Pro Tip</b>
We recommend you use [[Understanding_UI_Layouts|Lianja UI Layouts]] to help you build a responsive UI. These can be used in any of the supported scripting languages.
+
We recommend you use [[Understanding_UI_Layouts|Lianja UI Layouts]] to help you build a responsive UI. <br>
 +
These can be used in any of the supported scripting languages.
 
</div>
 
</div>
 
<span style="height:6px;"> </span>
 
<span style="height:6px;"> </span>
Line 39: Line 46:
 
tb.controlsource = "{expression}"  
 
tb.controlsource = "{expression}"  
 
</code>
 
</code>
 +
 +
<div style="height:38px;margin-top:15px;padding:5px;border:0px solid orange;border-left:5px solid orange;background:#fff8dc;vertical-align:middle;position:relative;">
 +
[[File:bm-noteicon.png|top|40px|link=]]<div style="position:absolute;top:7px;bottom:5px;margin-left:50px;">
 +
When data binding is specified as an expression, the UI control will be non editable.
 +
</div>
 +
</div>

Latest revision as of 11:12, 7 December 2017

Bm-noteicon.png
Quick Start Guide

You specify data binding in the "Data Source" in the "Attributes" Tab of the "Pages" workspace.

Formitem Attributes

Form, Canvas and Grid sections are typically bound to a table in a database. The table specified can be a native Lianja table or a “Virtual Table”.

Each formitem (Field or Gadget) can be bound to a table.column in the “Data source” attribute.

Typically the database, table and “Data source” are set automatically when you drag a table or column onto the page.

As you navigate between data the “Data source” is automatically updated in the UI.

As you edit data the “Data source” is automatically updated in the database. There is no coding required to accomplish display and editing of fields or gadgets.

Bm-noteicon.png

Data binding works across Desktop, Web and Mobile Apps. No coding required.

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 Lianja/VFP (Visual FoxPro compatible), JavaScript, TypeScript, Babel, 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).

tb = createObject("textbox")
// table.column
tb.controlsource = "customer.lastname"
// a function call
tb.controlsource = "myfunc()"
// a macro expression
tb.controlsource = "{expression}"
Bm-noteicon.png

When data binding is specified as an expression, the UI control will be non editable.