Understanding Live Preview

From Lianjapedia
Jump to: navigation, search
Bm-noteicon.png
Quick Start Guide

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



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.

Desktop App View: Toolbutton



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.



Desktop App View Toolbutton



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.

Desktop App View with undocked App Inspector



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.


Bm-noteicon.png
Pro Tip

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

Web App View: Toolbutton



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

Preview live in browser: Server connection lost



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.


Quick Deploy



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.


Deploy Workspace



Check the box next to the name of your database.

Then switch back to the Pages workspace.


Quick Deploy



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

Deploy and Preview



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.


Preview live in browser: Login



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.


Web Client App Center



Once logged in, click the tile for your App.


Run App in Browser



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

Tablet App View: Toolbutton



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

Phone App View: Toolbutton



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.

Tablet App View: Preview



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.


Phone App View: Preview



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.

Tablet App View: LiveView



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.


Phone App View: LiveView



And here's the PhoneGap LiveView Server started for access from an Android phone.

See below for LiveView for iOS tablets and phones.


Tablet App View: Select OS



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.


Phone App View: Select OS



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