Difference between revisions of "Deprecated: Understanding Live Preview in Lianja"
Yvonne.milne (Talk | contribs) |
Yvonne.milne (Talk | contribs) (→Overview) |
||
Line 5: | Line 5: | ||
=Overview= | =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. | ||
+ | |||
[[{{ns:file}}:lp_dev1.png|450px|thumb|left|link={{filepath:lp_dev1.png}}|Development View]] | [[{{ns:file}}:lp_dev1.png|450px|thumb|left|link={{filepath:lp_dev1.png}}|Development View]] | ||
+ | Development View in the Pages workspace in the Lianja App Builder: visually creating Apps and interacting with real data. | ||
<br clear=all> | <br clear=all> | ||
+ | |||
+ | 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= | =Desktop Apps= |
Revision as of 12:14, 31 October 2017
Under Construction
Contents
See Also
App Inspector, Building Lianja Mobile business database Apps, Getting Started Part 1, 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.
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
Use Desktop App View to interact with your App as you would in the Lianja Desktop client.
Click the toolbutton in the header to access Desktop App View.
Click the toolbutton in the header to return to Development View.
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.
Web Apps
Web App View
Use Web App View to interact with your App as you would in the Lianja Web client.
Click the toolbutton in the header to access Web App View.
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 then Preview to preview live in your default browser.
Alternatively, from Lianja v4.1, click the Preview live in browser toolbutton in the headerbar to carry out both these operations.
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 ...
Tablet App View
Use Tablet App View to interact with your App as you would in the Lianja Mobile client on a tablet.
Click the toolbutton in the header to access Tablet App View.
Phone App View
Use Phone App View to interact with your App as you would in the Lianja Mobile client on a phone.
Click the toolbutton in the header to access Phone App View.
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.
Click Dismiss to clear the information message - the Server will continue to run and the window title displays its 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.