Difference between revisions of "Getting Started Part 1"

From Lianjapedia
Redirect page
Jump to: navigation, search
(→‎Desktop App View and Development View)
(Redirected page to Lianja 5 Getting Started 1)
 
(15 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 +
#REDIRECT [[Lianja 5 Getting Started 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.
 
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==
 
==See Also==
−
[http://videos.lianja.com/video/71411227 Watch the video]
+
[[Getting Started (Video)]]
  
 
[[Introducción Parte 1|Lea ésto en español]]
 
[[Introducción Parte 1|Lea ésto en español]]
 +
 +
[[Getting Started Part 2]]
 +
 +
[[Getting Started Part 3]]
 +
 +
[[Getting Started Part 4]]
  
 
==Lianja App Builder==
 
==Lianja App Builder==
 +
[[{{ns:file}}:getstart1_1.png|450px|thumb|left|link={{filepath:getstart1_1.png}}|Lianja App Builder - Home]]
 +
  
−
[[{{ns:file}}:gs1_1.png|450px|thumb|left|link={{filepath:gs1_1.png}}|Lianja App Builder - Home]]
 
  
  
 
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.   
 
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 and key App development actions.
+
You start in the App Center in the Home tab.  Here you have one-click access to your published Apps, online documentation and key App development actions.
  
 
<br clear=all>
 
<br clear=all>
  
−
===Page Builder===
+
[[{{ns:file}}:getstart1_1b.png|450px|thumb|left|link={{filepath:getstart1_1b.png}}|Open Lianja Demo App]]
  
−
[[{{ns:file}}:gs1_2.png|450px|thumb|left|link={{filepath:gs1_2.png}}|Pages Workspace - 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.
 
  
 
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.
 
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.
Line 28: Line 34:
 
<br clear=all>
 
<br clear=all>
  
−
===Page Builder page===
+
===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.  
−
[[{{ns:file}}:gs1_3.png|450px|thumb|left|link={{filepath:gs1_3.png}}|Pages Workspace - 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.  
 
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.  
Line 39: Line 43:
 
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.
 
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.
  
−
<br clear=all>
+
[[{{ns:file}}:getstart1_2.png|450px|thumb|left|link={{filepath:getstart1_2.png}}|Pages Workspace]]
  
−
===Page components===
 
  
−
[[{{ns:file}}:gs1_4.png|450px|thumb|left|link={{filepath:gs1_4.png}}|Page Components]]
 
  
  
Line 49: Line 51:
  
 
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.
 
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.
 +
<br clear=all>
  
−
<br clear=all>
+
[[{{ns:file}}:getstart1_3.png|450px|thumb|left|link={{filepath:getstart1_3.png}}|Page]]
  
−
===Form section components===
 
  
−
[[{{ns:file}}:gs1_5.png|450px|thumb|left|link={{filepath:gs1_5.png}}|Form Section Components]]
 
  
  
Line 67: Line 68:
 
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.
 
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.
  
−
==Build your first Lianja App==
+
==Creating your first Lianja App==
  
 
The easiest way to show you the power and simplicity of Lianja is to to build an App!
 
The easiest way to show you the power and simplicity of Lianja is to to build an App!
Line 74: Line 75:
  
 
===Create an App===
 
===Create an App===
 +
[[{{ns:file}}:getstart1_6.png|450px|thumb|left|link={{filepath:getstart1_6.png}}|Create an App]]
 +
  
−
[[{{ns:file}}:gs1_6.png|450px|thumb|left|link={{filepath:gs1_6.png}}|Create an App]]
 
  
  
 
Now click the Create an App Tile.  
 
Now click the Create an App Tile.  
  
−
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.
+
You can also create Apps from the Apps Workspace Panel by clicking on the + button in the Actionbar of the Apps Panel.
  
 
<br clear=all>
 
<br clear=all>
  
−
[[{{ns:file}}:gs1_7.png|450px|thumb|left|link={{filepath:gs1_7.png}}|Name new App]]
+
[[{{ns:file}}:getstart1_7.png|450px|thumb|left|link={{filepath:getstart1_7.png}}|Lianja App Wizard: Introduction]]
  
  
−
The Create an App dialog will slide out from the left of the main window.  
+
The Apps Workspace will be automatically selected and the Lianja App Wizard displayed.
  
−
Type the name of the App that you want to create and hit Enter or click the Create button.
+
Click 'Next' to continue.
  
 
<br clear=all>
 
<br clear=all>
  
 +
[[{{ns:file}}:getstart1_7b.png|450px|thumb|left|link={{filepath:getstart1_7b.png}}|Lianja App Wizard: Name and App Types]]
  
−
===Lianja Apps are made up of pages===
 
  
−
[[{{ns:file}}:gs1_8.png|450px|thumb|left|link={{filepath:gs1_8.png}}|New App - Open Database]]
 
  
  
−
Now the Pages workspace panel will be displayed and a blank page will be created.  
+
Enter a name for your App.  
  
−
Pages are the base visual elements of an App and are, in turn, made up of Sections.
+
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.
  
−
Double-click on the southwind database in the sidebar Databases tab panel.  
+
Leave all types selected and click 'Next' to continue.
  
−
You will notice that the tables contained in the southwind database are now listed in the automatically selected Tables tab panel.  
+
<br clear=all>
 +
 
 +
[[{{ns:file}}:getstart1_7c.png|450px|thumb|left|link={{filepath:getstart1_7c.png}}|Lianja App Wizard: Scripting Language]]
 +
 
 +
 
 +
 
 +
 
 +
Select your preferred Scripting Language.  For Web and Mobile Apps, select 'JavaScript'.
 +
 
 +
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.
  
 
<br clear=all>
 
<br clear=all>
  
 +
[[{{ns:file}}:getstart1_7d.png|450px|thumb|left|link={{filepath:getstart1_7d.png}}|Lianja App Wizard: Database]]
 +
 +
 +
 +
 +
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.
 +
 +
<br clear=all>
 +
 +
[[{{ns:file}}:getstart1_7e.png|450px|thumb|left|link={{filepath:getstart1_7e.png}}|Lianja App Wizard]]
 +
 +
 +
 +
 +
The final Wizard page displays a summary of your App settings.
 +
 +
Click 'Finish' to continue.
 +
 +
<br clear=all>
 +
 +
===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.
 +
 +
The App Inspector will have the 'Pages Files' tab selected 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'.
  
 
===Adding form sections to pages===
 
===Adding form sections to pages===
 +
[[{{ns:file}}:getstart1_9.png|450px|thumb|left|link={{filepath:getstart1_9.png}}|Add Customers Form Section]]
 +
 +
  
−
[[{{ns:file}}:gs1_9.png|450px|thumb|left|link={{filepath:gs1_9.png}}|Drag and Drop Form Section]]
 
  
  
Line 119: Line 165:
 
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.
 
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.
  
−
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.
+
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.
  
 
<br clear=all>
 
<br clear=all>
Line 125: Line 171:
 
===Adding grid sections to pages===
 
===Adding grid sections to pages===
  
−
[[{{ns:file}}:gs1_10.png|450px|thumb|left|link={{filepath:gs1_10.png}}|Add Grid Section]]
 
  
 +
[[{{ns:file}}:getstart1_10.png|450px|thumb|left|link={{filepath:getstart1_10.png}}|Add 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.
+
 
 +
 
 +
 
 +
Click on the Sections button in the [[Form Tools]]. Select Grid, and an empty grid section will be added to the page.
  
 
<br clear=all>
 
<br clear=all>
Line 134: Line 183:
 
===Populating a grid with data===
 
===Populating a grid with data===
  
−
[[{{ns:file}}:gs1_11.png|450px|thumb|left|link={{filepath:gs1_11.png}}|Populate Grid Section]]
+
[[{{ns:file}}:getstart1_11.png|450px|thumb|left|link={{filepath:getstart1_11.png}}|Populate a Grid Section]]
 +
 
 +
 
  
  
 
Click to select the orders table in the Tables panel and drag it into the grid section you have just created. The grid will be populated with the columns from the orders table.
 
Click to select the orders table in the Tables panel and drag it into the grid section you have just created. The grid will be populated with the columns from the orders table.
  
−
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.  
+
The grid columns can be moved around by dragging and dropping the grid column headers.  
 +
 
 +
Individual columns can be customized in the column attributes in the App Inspector.  
 +
 
 +
Right-clicking on the column header allows you to insert or remove a column or reset hidden columns.  
  
 
Note also that the data you are working with is all live so you are seeing exactly how the app will look at runtime.
 
Note also that the data you are working with is all live so you are seeing exactly how the app will look at runtime.
  
 +
<br clear=all>
 +
Note: from Lianja v4.2 'Move Column Left' and 'Move Column Right' are also available from the context menu when you right-click on a column header.
 +
[[{{ns:file}}:gridcolumnrightclick.png|left|link={{filepath:gridcolumnrightclick.png}}|Right-click Context Menu]]
 
<br clear=all>
 
<br clear=all>
  
 
===Drag and drop grid sections===
 
===Drag and drop grid sections===
  
−
[[{{ns:file}}:gs1_12.png|450px|thumb|left|link={{filepath:gs1_12.png}}|Drag and Drop Grid Section]]
+
[[{{ns:file}}:getstart1_12.png|450px|thumb|left|link={{filepath:getstart1_12.png}}|Add Order Details Grid Section]]
 +
 
 +
 
  
  
−
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.
+
Grid Sections can also be created using drag and drop.  Just 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.
  
 
<br clear=all>
 
<br clear=all>
Line 156: Line 216:
 
===Relating sections together===
 
===Relating sections together===
  
−
[[{{ns:file}}:gs1_13.png|450px|thumb|left|link={{filepath:gs1_13.png}}|Relationship Builder]]
+
[[{{ns:file}}:getstart1_13.png|450px|thumb|left|link={{filepath:getstart1_13.png}}|Relationship Builder]]
 +
 
 +
 
  
  
Line 167: Line 229:
 
<br clear=all>
 
<br clear=all>
  
−
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.
+
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===
 
===Visual Relationship Builder===
  
−
[[{{ns:file}}:gs1_14.png|450px|thumb|left|link={{filepath:gs1_14.png}}|Relationship Builder contd.]]
+
[[{{ns:file}}:getstart1_14.png|450px|thumb|left|link={{filepath:getstart1_14.png}}|Relationship Builder]]
 +
 
 +
 
  
  
Line 188: Line 252:
 
===Customizing page attributes===
 
===Customizing page attributes===
  
−
[[{{ns:file}}:gs1_15.png|450px|thumb|left|link={{filepath:gs1_15.png}}|Page Attributes]]
+
[[{{ns:file}}:getstart1_15.png|450px|thumb|left|link={{filepath:getstart1_15.png}}|Accessing Attributes in the App Inspector]]
  
  
−
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.
+
 
 +
To customize the appearance of a page, you set its attributes.
 +
 
 +
Click on the Page's header and the App Inspector will switch to the 'Attributes' tab.
 +
 
 +
Inside the 'Attributes' tab there are internal tabs for Page, Section, Formitem and GridColumn.
  
 
<br clear=all>
 
<br clear=all>
  
−
[[{{ns:file}}:gs1_16.png|450px|thumb|left|link={{filepath:gs1_16.png}}|Page Attributes contd.]]
+
[[{{ns:file}}:getstart1_15b.png|450px|thumb|left|link={{filepath:getstart1_15b.png}}|Floating Attributes in the App Inspector]]
  
  
−
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.
+
 
 +
Double-clicking on the vertical 'Attributes' tab caption opens the Attributes tab in a floating window.
 +
 
 +
To learn more about using the App Inspector, see the [[Lianja 3 App Inspector (Video)|video here]].
 +
 
 +
<br clear=all>
 +
 
 +
[[{{ns:file}}:getstart1_15c.png|450px|thumb|left|link={{filepath:getstart1_15c.png}}|Accessing Attributes (App Inspector closed)]]
 +
 
 +
 
 +
 
 +
 
 +
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.
 +
 
 +
<br clear=all>
 +
 
 +
[[{{ns:file}}:getstart1_15d.png|450px|thumb|left|link={{filepath:getstart1_15d.png}}|Attributes Dialog (App Inspector closed)]]
 +
 
 +
 
 +
 
 +
 
 +
The Attributes dialog for the selected UI component will slide in from the right hand side of the main window.
 +
 
 +
<br clear=all>
 +
 
 +
[[{{ns:file}}:getstart1_16.png|450px|thumb|left|link={{filepath:getstart1_16.png}}|Editing Page Attributes in the App Inspector]]
 +
 
 +
 
 +
 
 +
 
 +
Set the Title and the Caption for the Page.
  
 
<br clear=all>
 
<br clear=all>
Line 208: Line 307:
 
===Customizing a section===
 
===Customizing a section===
  
−
[[{{ns:file}}:gs1_17.png|450px|thumb|left|link={{filepath:gs1_17.png}}|Section Attributes]]
+
[[{{ns:file}}:getstart1_17.png|450px|thumb|left|link={{filepath:getstart1_17.png}}|Editing Section Attributes in the App Inspector]]
 +
 
 +
 
  
 +
To customize the appearance of the sections, click on the Customers Section and it will be selected in the Attributes tab of the App Inspector.
  
−
To customize the appearance of the sections, double-click the Section header and the Section Attributes dialog will slide in.  
+
(If the App Inspector is closed, 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.
+
Change the Section Caption to Customers, then repeat the same process for the orders section and the order_details section.
  
 
<br clear=all>
 
<br clear=all>
Line 219: Line 321:
 
===Ready to run===
 
===Ready to run===
  
−
[[{{ns:file}}:gs1_18.png|450px|thumb|left|link={{filepath:gs1_18.png}}|Complete Pages]]
+
[[{{ns:file}}:getstart1_18.png|450px|thumb|left|link={{filepath:getstart1_18.png}}|Section Captions Updated]]
 +
 
  
  
Line 228: Line 331:
 
===Desktop App View===
 
===Desktop App View===
  
−
[[{{ns:file}}:gs1_19.png|450px|thumb|left|link={{filepath:gs1_19.png}}|Desktop App View]]
+
[[{{ns:file}}:getstart1_19.png|450px|thumb|left|link={{filepath:getstart1_19.png}}|Accessing Desktop App View]]
  
  
Line 237: Line 340:
 
===Desktop App View and Development View===
 
===Desktop App View and Development View===
  
−
[[{{ns:file}}:gs1_20.png|450px|thumb|left|link={{filepath:gs1_20.png}}|Return to Development View]]
+
[[{{ns:file}}:getstart1_20.png|450px|thumb|left|link={{filepath:getstart1_20.png}}|Desktop App View]]
  
  
Line 247: Line 350:
  
 
<br clear=all>
 
<br clear=all>
 +
 +
[[Getting Started Part 2]]
  
 
[[Category:Getting Started]]
 
[[Category:Getting Started]]

Latest revision as of 08:43, 6 December 2019

#REDIRECTLianja 5 Getting Started 1
Retrieved from "https://www.lianja.com/doc/index.php?title=Getting_Started_Part_1&oldid=22474"