Getting Started Part 1

From Lianjapedia
(Redirected from Getting Started Part 1)
Jump to: navigation, search

This article provides an overall introduction to Lianja and the Lianja App Builder. The target audience is for beginners who know nothing about Lianja at all and want to gain an understanding of the Lianja Application Platform and how to develop Apps using the Lianja App Builder.

See Also

Getting Started Part 2

Getting Started Part 3

Getting Started Part 4

Lianja App Builder

The Lianja App Builder is contained inside a single window consisting of several workspace panels that can be activated by clicking on the selection tabs in the Modebar.

You start in the App Center in the Home tab. Here you have one-click access to your published Apps, key App development actions, online documentation and the Lianja Application Repository.

Lianja App Builder - Home

To load the lianjademo sample App, click on its tile (Lianja Demo) in the App Center. The Pages workspace is automatically selected and the lianjademo App loaded into the Page Builder.

Open Lianja Demo App

Page Builder

The focal point for building desktop and web Apps in Lianja is the visual design and development workspace panel known as the Page Builder and this is what we are going to concentrate on in this tutorial.

Pages Workspace

If the App Inspector is not displayed, click the 'eye' toolbutton in the Headerbar to open it.

Using the Page Builder you can visually build a data-centric app that can combine data and other interesting content from a wide variety of data sources; databases, web services using REST, and other custom data sources.

If you are a non-programmer with a good knowledge of your business domain you will most likely be able to build an app that requires no programming to be done at all.

How is this possible you may ask? You will find out during the course of these tutorials how Lianja takes a radically different view of the application development process compared to other database and web development tools.

In Lianja, apps are made up of a variety of visual elements. Using the Page Builder, you arrange these visual elements into an app. The base visual element is a Page. Pages are made up of Sections.

There are various types of pre-built commonly used sections to help speed up your development: Form, Grid, Webview, Image Strip, Canvas and Tabview. Form sections are made up of Fields and Gadgets.

For professional developers, you can also develop Custom sections and Custom gadgets in Recital, Visual FoxPro, JavaScript, PHP or Python and reuse them across many apps that you build.


To make it easier to build apps that will run native on the desktop and also in a web browser, Lianja has a feature complete Application Framework. This application framework is an implementation of the Visual FoxPro 9 application framework. It has been extensively extended to provide more modern and easier to use components that are cross-platform, language and UI independent.

You can build custom sections and gadgets using the Lianja Application Framework in Recital, Visual FoxPro, JavaScript, PHP and Python. For complete details of the Lianja Application Framework see the documentation in the Home Workspace.

Creating your first Lianja App

The easiest way to show you the power and simplicity of Lianja is to to build an App!

Create an App

Go back to the App Center in the Home Workspace by clicking on the Home Selection Tab located in the Modebar on the left of the main window or the Home toolbutton in the Headerbar. You can switch back and forth between the different workspace panels at any time. Now click the Create an App Tile.

Create an App

The Apps Workspace will be automatically selected and the Lianja App Wizard displayed.

Click Next to continue.

Lianja App Wizard: Introduction

Tip: You can also start the Lianja App Wizard from the Apps Workspace using the New App toolbutton in the Headerbar or by clicking on the + button in the Actionbar of the Apps Panel.

Enter a name for your App.

You can also select the type or types of client your App will run on. The types can also be modified in the App Settings later on if required.

Leave all types selected and click Next to continue.

Lianja App Wizard: Name and App Types

Select your preferred Scripting Language. For Web and Mobile Apps, select 'JavaScript' as the client Scripting Language.

This is the App's default Scripting Language, it does not mean that all scripts in the App need to be written in that language or that your App need include any scripting at all.

Select JavaScript and click Next to continue.

Lianja App Wizard: Scripting Language

Python Support

From Lianja v7.2 Web/Mobile client side code can be written in Python as well as Javascript.

Note: for Desktop only Apps, you can select from the full range of supported Scripting Languages.

Lianja App Wizard: Scripting Language

Optionally choose a database to use.

The 'southwind' database is a sample database included in the distribution and used extensively in the tutorials and documentation.

Select southwind and click Next to continue.

Lianja App Wizard: Database

Now you can choose to start with a blank App or use a previously created or downloaded Template.

Select Blank and click Next to continue.

Lianja App Wizard: Template

The final Wizard page displays a summary of your App settings.

Click Done to continue.

Lianja App Wizard

Lianja Apps are made up of pages

Now the Pages workspace panel will be displayed and a blank page 'page1' will be created.

Pages are the base visual elements of an App and are, in turn, made up of Sections.


Adding form sections to pages

Switch to the Data tab in the App Inspector and the Tables explorer will list the tables from the southwind database.

If you can't see the tables, switch to the Databases explorer and double-click on 'southwind'.

Click the customers table and drag it onto the empty Page to create a Form section and populate it with the columns from the table.

Don't worry about the order in which the fields are added to the form section as these can be reordered or removed completely later. Let's just get a default form laid out first.

Add Customers Form Section

Multi-row Grid Sections can also be created using drag and drop when pressing the Shift key - we will see that in a moment. First, let's look at the Section Wizard, which takes you step by step through creating a new Section.

Section Wizard

Click on the Sections button in the Form Tools then select Grid.

Section Wizard

The Section Wizard will start with the Layout screen. Change the Section Header Caption to Orders then click Next.

Section Wizard

The Appearance screen allows you to change the colors of certain elements of the new Section. Click Next.

Section Wizard

In the Data Source screen, select orders in the first column, then click the double arrow to select all the fields from the orders table.

Section Wizard

Click Next.

Section Wizard

The Search screen allows you to set search fields, which we will look at later. For now, just click Done to create and populate the new Section.

Section Wizard

Tip: The Section Wizard can also be used to create a blank Form or Grid Section - just click Done before selecting the data.

Section Wizard

Then drag and drop individual fields from the Column Names explorer into the new Section.

Section Wizard

Drag and Drop Grid Section

Press the Shift key as you drag the order_details table on to an empty part of the Page and a new Grid Section will be added and populated.

Drag and Drop Grid

Relating sections together

Now that you have a basic page containing three pre-built sections you can relate the customer in the customers form to their orders in the orders grid and then each order to its order details.

In Lianja this is simple: each Section can be related visually to other sections on the page using the Relationship Builder.

Click on the + sign in the Relationship Builder panel next to the parent section. Then click on the section header for the child section that you want to relate to.

Relationship Builder

Note for advanced developers. Relational joins made easy and super-fast. If the primary and foreign keys chosen by Lianja are not what you want, they can be specified manually by changing them in the section attributes.

Visual Relationship Builder

You will now see that the Relationship Builder displays a relationship diagram between the sections.

Each section can relate to one or more child sections, which can be of any type: Form, Grid, Webview, Image strip, Tabview, Attachments or Custom.

Add further relationships between sections by clicking the + next to the parent then clicking the child section header.

If you want to make a change, you can disconnect a relationship by clicking on the - sign.

Relationship Builder

Visually relate as many sections as you want. One-to-one or one-to-many relationships fully supported. No programming required.

Customizing page attributes

To customize the appearance of a page, you set its attributes.

The App Inspector Attributes tab has internal tabs for Page, Section, Formitem and Grid Column.

Click on your Page's header and the App Inspector will switch to that Page in the Attributes tab.

Accessing Attributes in the App Inspector

The App Inspector can be undocked into its own floating window by clicking the icon in the top right corner. Double-click its window title to redock or click the corner x to close it completely.

Floating App Inspector

To learn more about using the App Inspector, see here.

Set the Title and the Caption for the Page.

Editing Page Attributes in the App Inspector

Attributes Dialog

If the App Inspector is closed, double-click in the Page Headerbar or click the Cog toolbutton to access the Page Attributes.

For sections and gadgets, double click on their header. In the case of Form Fields, dividers, and column separators, double-click on the caption.

Accessing Attributes (App Inspector closed)

The Attributes dialog for the selected UI component will slide in from the right hand side of the main window.

Attributes Dialog (App Inspector closed)

Customizing a section

To customize the appearance of the sections, click on the Customers Section and it will be selected in the App Inspector.

(If the App Inspector is closed, double-click the Section header and the Section Attributes dialog will slide in.)

Change the Section Caption to Customers, then repeat the same process for the orders section and the order_details section.

Editing Section Attributes in the App Inspector

Ready to run

Now the page should look like this.

Section Captions Updated

Desktop App View

To view the app in runtime view, just click the Desktop App View icon in the Headerbar.

Accessing Desktop App View

Desktop App View and Development View

Now you see the App running! It's as simple as that.

You can move between records using the navigation controls in the Actionbar.

To switch back into Development view just click the icon in the Headerbar.

Desktop App View

Getting Started Part 2