Getting Started Part 1
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.
- 1 See Also
- 2 Lianja App Builder
- 3 Creating your first Lianja App
- 3.1 Create an App
- 3.2 Lianja Apps are made up of pages
- 3.3 Adding form sections to pages
- 3.4 Section Wizard
- 3.5 Drag and Drop Grid Section
- 3.6 Relating sections together
- 3.7 Visual Relationship Builder
- 3.8 Customizing page attributes
- 3.9 Customizing a section
- 3.10 Ready to run
- 3.11 Desktop App View
- 3.12 Desktop App View and Development View
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.
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.
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.
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.
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.
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.
The Apps Workspace will be automatically selected and the Lianja App Wizard displayed.
Click Next to continue.
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.
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.
Note: for Desktop only Apps, you can select from the full range of supported Scripting Languages.
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.
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.
The final Wizard page displays a summary of your App settings.
Click Done to continue.
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.
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.
Click on the Sections button in the Form Tools then select Grid.
The Section Wizard will start with the Layout screen. Change the Section Header Caption to Orders then click Next.
The Appearance screen allows you to change the colors of certain elements of the new Section. Click Next.
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.
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.
Tip: The Section Wizard can also be used to create a blank Form or Grid Section - just click Done before selecting the data.
Then drag and drop individual fields from the Column Names explorer into the new Section.
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.
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.
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.
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.
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.
To learn more about using the App Inspector, see here.
Set the Title and the Caption for the Page.
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.
The Attributes dialog for the selected UI component will slide in from the right hand side of the main window.
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.
Ready to run
Now the page should look like this.
Desktop App View
To view the app in runtime view, just click the Desktop App View icon in the Headerbar.
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.