Difference between revisions of "Getting Started Part 1"

==Lianja App Builder General Overview==

[[{{ns:file}}:gs1_1.png|450px|thumb|left|link={{filepath:gs1_1.png}}|Lianja App Builder - Home]]

===Page Builder General Overview===

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. 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.

===Page Builder Page===

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.

===Page Components===

As mentioned previously, using the Page Builder you visually build a data-centric app. 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.

===Form Section Components===

==Build your first Lianja App==

You can also create Apps from the Apps Workspace Panel by clicking on the + button in the Actionbar of the Apps Panel located in the Apps Sidebar.

[[{{ns:file}}:gs1_7.png|450px|thumb|left|link={{filepath:gs1_7.png}}|Name new App]]

The Create an App dialog will slide out from the left of the main window. Type the name of the App that you want to create and hit Enter or click the Create button.

Now the Pages workspace panel will be displayed and a blank page will be created. Pages are the base visual elements of an App and are, in turn, made up of Sections.

Double-click on the southwind database in the sidebar Databases tab panel. You will notice that the tables contained in the southwind database are now listed in the automatically selected Tables tab panel.  

You can also add a Form Section from the Form Tools and drag the table or individual fields into it to populate it.  Let's see how that's done with a Grid Section.

Click on the Sections button in the Form tools. Select Grid, and an empty grid section will be added to the page.

===Populating A Grid With data===

The grid columns can be moved around by dragging and dropping the grid column headers. Individual columns can be customized by double-clicking on the column header. Right-clicking on the column header allows you to hide a column. Note also that the data you are working with is all live so you are seeing exactly how the app will look at runtime.

Grid Sections can also be created using drag and drop.  Just press the Ctrl 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.

[[{{ns:file}}:gs1_13.png|450px|thumb|left|link={{filepath:gs1_13.png}}|Relationship Builder]]

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.

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 double-clicking on the appropriate section header and changing them in the section attributes dialog.

[[{{ns:file}}:gs1_14.png|450px|thumb|left|link={{filepath:gs1_14.png}}|Relationship Builder contd.]]

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.

[[{{ns:file}}:gs1_15.png|450px|thumb|left|link={{filepath:gs1_15.png}}|Page Attributes]]

To customize the appearance of a page, double-click in the Page Headerbar or click the Cog toolbutton.

You can customize the appearance of sections and gadgets by double clicking on their header. In the case of Form Fields, dividers, and column separators, double-click on the caption.

[[{{ns:file}}:gs1_16.png|450px|thumb|left|link={{filepath:gs1_16.png}}|Page Attributes contd.]]

The Page Attributes dialog will slide in from the right hand side of the main window. Now change the Page Title and the Header Caption as shown.

===Customizing a Section===

[[{{ns:file}}:gs1_17.png|450px|thumb|left|link={{filepath:gs1_17.png}}|Section Attributes]]

To customize the appearance of the sections, double-click the Section header and the Section Attributes dialog will slide in. Change the Section Title to Customers, then repeat the same process for the orders section and the order_details section.

[[{{ns:file}}:gs1_18.png|450px|thumb|left|link={{filepath:gs1_18.png}}|Complete Pages]]

[[{{ns:file}}:gs1_19.png|450px|thumb|left|link={{filepath:gs1_19.png}}|Desktop App View]]

===Runtime view and development view===

[[{{ns:file}}:gs1_20.png|450px|thumb|left|link={{filepath:gs1_209.png}}|Return to 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.