Understanding Live Preview
While developing an App you can switch to a "Live View" of it as Desktop, Web, Tablet or Phone App by clicking the appropriate icon in the top right of the "Pages" workspace.
See Also
App Inspector, Building Lianja Mobile business database Apps, Getting Started Part 1, Getting Started Part 2, Getting Started Part 3, Getting Started Part 4, Understanding UI Personalities in Lianja
Overview
As you develop in the Lianja App Builder, your App immediately comes to life.
Dragging and dropping tables and fields onto Pages and Sections displays the actual data and allows you to interact with it: navigating, filtering, adding, editing and deleting.
As your App grows you can see what your users will see and test and refine without the delay and effort of a compile and build cycle for every minor change.
Development View in the Pages workspace in the Lianja App Builder.
Visually creating Apps and interacting with real data.
Here the lianjademo (Lianja Demo) App: filtering with an Instant Selection and editing data.
From the Pages workspace you also have viewers allowing you to instantly see your App running as it will be on alternative devices and Lianja clients.
The following viewers can be accessed from the headerbar toolbuttons:
- Desktop App View
- Web App View
- Tablet App View
- Phone App View
Desktop Apps
In Development View, you can undock the App Inspector and hide the Form Tools, Modebar and Sidebar using the View menu in the System Menu to see your App without the development tools, but even simpler than that: just switch to Desktop App View.
Click the toolbutton in the header to access Desktop App View.
Use Desktop App View to interact with your App as you would in the Lianja Desktop client.
Click the toolbutton in the header to return to Development View.
Desktop App View also allows you to see certain display elements and behavior only active in 'runtime', e.g.
- Hidden headers
- Stacked Accordion displays
- Timers
- UI Presentation Rules: 'Readonly when' and 'Visible when'
- UI States
Note that if you have the App Inspector undocked, you will be able to access the App Inspector tabs.
For example here, the Events tab reports events in the App and the Console tab allows use of the command windows.
To speed up development, live view icons for Desktop/Web/Tablet/Phone are also included in the HeaderBar
in the App and Library workspaces (from v4.1).
Web Apps
To test your App in the Lianja Web Client, use Web App View. This opens your web App in a separate window that can remain open as you modify your App.
It also gives you options to Deploy your App for your local Lianja Cloud Server (this generates the HTML5 index file and copies the App's files to the deployment path) and to Preview the App running in your default browser.
Web App View
Click the toolbutton in the header to access Web App View.
Use Web App View to interact with your App as you would in the Lianja Web client.
If you modify your App in the App Builder, just click the Web App View toolbutton again, or click the Refresh button in the viewer window to see the changes.
Data Deployment
From Web App View you can also click Deploy and Preview to run the App in your default browser.
Note that Web App View runs using the database in the development path, but Preview runs using the database in the deployment path), so the data must be deployed prior to running in the browser.
If you are testing with the sample Apps from the distribution, or your own Apps using the southwind sample database, then you do not need to deploy the database as it is already available in the deployment path).
If you see a Server connection lost error when you Preview in the browser, the most likely reason is that the App's database has not been deployed.
To deploy the database, click the Quick Deploy toolbutton in the headerbar.
Click Setup to go to the Deploy workspace to select the files to be deployed.
You will only need to select the files once, then deploy them as required.
Redeployment of data is only needed if you make structural changes or want to copy data changes made in the development environment.
Check the box next to the name of your database.
Then switch back to the Pages workspace.
Click the Quick Deploy toolbutton in the headerbar.
Then click Commit.
You can preview the file to be deployed prior to committing by clicking on the Preview button in the Quick Deploy dialog.
Preview live in browser
Once the database is deployed, click Deploy in Web App View to generate the HTML5 index file and copy the App's files to the deployment path.
Then click Preview to preview live in your default browser.
Alternatively, from Lianja v4.1, use the Preview live in browser toolbutton in the headerbar to Deploy and Preview with a single click.
Login to the Web Client App Center - you will only need to do this once per browser session. The default username is admin and the default password is admin.
Once logged in, click the tile for your App.
The App can now be run in the browser.
Mobile Apps
Tablet App View and Mobile App View each give you three ways of viewing and testing your App. They each open in a separate window, showing how your App will look in your chosen device and allowing you to interact with it.
As with Web Apps above, you also have the option to Deploy (generate the HTML5 index file for your chosen device: tablet/phone and copy the files to the deployment path)) and Preview (run the App in your default browser).
Additionally, Tablet App View and Mobile App View allow you to run the PhoneGap LiveView Server and connect to the Lianja Cloud Server on your development machine from your Android or iOS device.
Tablet App View
Click the toolbutton in the header to access Tablet App View.
Use Tablet App View to interact with your App as you would in the Lianja Mobile client on a tablet.
If you modify your App in the App Builder, just click the Tablet App View toolbutton again, or click the Refresh button in the viewer window to see the changes.
Phone App View
Click the toolbutton in the header to access Phone App View.
Use Phone App View to interact with your App as you would in the Lianja Mobile client on a phone.
If you modify your App in the App Builder, just click the Phone App View toolbutton again, or click the Refresh button in the viewer window to see the changes.
Preview
From Tablet App View and Phone App View you can also click Deploy and Preview to run the App in your default browser.
Note that Tablet App View and Phone App View run using the database in the development path, but Preview runs using the database in the deployment path), so the data must be deployed prior to running in the browser.
See Data Deployment above for how to do this.
Click Deploy then Preview to run the App in your default browser.
The first time you Preview, login and click the App's tile in the Lianja App Center as in Preview live in browser above.
For subsequent previews in the same browser session, you will go straight to the App.
Note that the App will run with Tablet UI personality.
Click Deploy then Preview to run the App in your default browser.
The first time you Preview, login and click the App's tile in the Lianja App Center as in Preview live in browser above.
For subsequent previews in the same browser session, you will go straight to the App.
Note that the App will run with Phone UI personality.
LiveView
LiveView allows you to connect from your mobile device using the Adobe PhoneGap Developer app (App Store / Google Play) and run your Lianja App.
As with Preview, LiveView runs using the database in the deployment path), so the data must be deployed prior to running in the browser.
See Data Deployment above for how to do this.
When you click LiveView the PhoneGap LiveView Server will be started on your development machine.
The information message displays the IP address to enter connection box in the Adobe PhoneGap Developer app on your mobile device. Your mobile device must have network access to this address.
The PhoneGap Server runs on port 3000 and the Lianja Cloud Server on port 8001 - make sure your firewall is not blocking access to these ports.
You can click Dismiss to clear the information message - the Server will continue to run and the window title displays the server running status and connection IP address.
And here's the PhoneGap LiveView Server started for access from an Android phone.
See below for LiveView for iOS tablets and phones.
For an iOS tablet, click the ComboBox at the top of the viewer and select iOS.
The code will be generated automatically and the PhoneGap LiveView Server restarted for iOS.
Similarly in Phone App View, click the ComboBox at the top of the viewer and select iOS for an iOS phone.
The code will be generated automatically and the PhoneGap LiveView Server restarted for iOS.
Default Directories
Using the standard installation settings, these are the default directories:
Development Directories
Windows
| Files | Location |
|---|---|
| App | C:\lianja\apps |
| Databases | C:\lianja\data |
| Library | C:\lianja\library |
Linux
| Files | Location |
|---|---|
| App | /opt/lianja/apps |
| Databases | /opt/lianja/data |
| Library | /opt/lianja/library |
Mac
| Files | Location |
|---|---|
| App | /Users/<username>/Library/Application Support/Lianja/apps |
| Databases | /Users/<username>/Library/Application Support/Lianja/data |
| Library | /Users/<username>/Library/Application Support/Lianja/library |
Deployment Directories
Lianja App Center (for Desktop Apps)
Windows
| Files | Location |
|---|---|
| App | C:\lianja\cloudserver\tenants\public\apps |
| Databases | C:\lianja\cloudserver\tenants\public\data |
| Library | C:\lianja\cloudserver\tenants\public\library |
Linux
| Files | Location |
|---|---|
| App | /opt/lianja/cloudserver/tenants/public/apps |
| Databases | /opt/lianja/cloudserver/tenants/public/data |
| Library | /opt/lianja/cloudserver/tenants/public/library |
Mac
| Files | Location |
|---|---|
| App | /Users/<username>/Library/Application Support/Lianja/cloudserver/tenants/public/apps |
| Databases | /Users/<username>/Library/Application Support/Lianja/cloudserver/tenants/public/data |
| Library | /Users/<username>/Library/Application Support/Lianja/cloudserver/tenants/public/library |
Lianja Cloud Server (for Web/Mobile Apps)
Windows
| Files | Location |
|---|---|
| App | C:\lianja\cloudserver\tenants\public\wwwroot\apps |
| Databases | C:\lianja\cloudserver\tenants\public\data |
| Library | C:\lianja\cloudserver\tenants\public\wwwroot\library |
Linux
| Files | Location |
|---|---|
| App | /opt/lianja/cloudserver/tenants/public/wwwroot/apps |
| Databases | /opt/lianja/cloudserver/tenants/public/data |
| Library | /opt/lianja/cloudserver/tenants/public/wwwroot/library |
Mac
| Files | Location |
|---|---|
| App | /Users/<username>/Library/Application Support/Lianja/cloudserver/tenants/public/wwwroot/apps Note: /usr/local/lianja/cloudserver is a symbolic link to /Users/<username>/Library/Application Support/Lianja/cloudserver |
| Databases | /Users/<username>/Library/Application Support/Lianja/cloudserver/tenants/public/data Note: /usr/local/lianja/cloudserver is a symbolic link to /Users/<username>/Library/Application Support/Lianja/cloudserver |
| Library | /Users/<username>/Library/Application Support/Lianja/cloudserver/tenants/public/wwwroot/library Note: /usr/local/lianja/cloudserver is a symbolic link to /Users/<username>/Library/Application Support/Lianja/cloudserver |
