PhoneGap

Posted: 2017-01-21 in PhoneGap

The two main features in v2.0 for mobile app developers are:

1. PhoneGap Live App View

and

2. PhoneGap cloud build


I’ve had several people ask me about PhoneGap building of Apps. Here are some of the questions:

Question 1: If I build a Lianja mobile App and use the PhoneGap build cloud service can I still use WebView sections and populate them dynamically by referencing a .rsp or .jssp page on a remote Lianja Cloud Server.

Answer: Yes. A WebView is a standard built-in section that can be generated dynamically.


Question 2: Can that WebView section contain my own UI components that I build out of third party components?

Answer: Yes of course. When a WebView is loaded it also has access to the Lianja system object globally within the browser tab or the mobile App instance. This lets you manipulate other parts of the UI in your App.


Question 3: If I use PhoneGap do I have any access to the camera?

Answer: Yes, that’s the whole point of PhoneGap. It provides a layer of abstraction above the device platform (iOS or Android) so that you can build cross platform Apps.


Question 4: What is the advantage of using Lianja for building a PhoneGap App rather than hand coding it all myself.

Answer: Lianja is a platform. It provides a client side framework and server side data connectivity as well as the ability to generate dynamic content on the server that is injected into the client app at runtime.
All CRUD operations are handled automatically for you as well as image/photo uploads and document editing.
And let’s not forget the UI navigation which is all embedded within the mobile app. In summary, Lianja is a complete platform for building business Apps.


When building a PhoneGap mobile App in Lianja you build a database-oriented business App that you submit to the Apple App Store or Google Play.

The mobile App runs on your phone or tablet. It connects to a remote Lianja Cloud Server to access data, generate dynamic webview content and run business procedures on the server.

You can build mobile apps that require no authentication and run as a guest user or require the user to authenticate (login) first.

If you check the “Login required” attribute in the App Settings, Lianja looks for a page in the App which is a “Login Page” (new attribute in the Page Settings).

This becomes the first page to be made visible when you run the App on a mobile device. If no “Login Page” is found then Lianja will create a default one for you that you use to sign in.

Once authenticated, the “Initial Page” (as defined in the App Settings) is made visible. To logout and return to the “Login Page” touch the “Home” icon in the page headerbar.


ability to build native PhoneGap mobile apps for iOS, Android and WinPhone.


PhoneGap LiveView all working as expected now.
Clearly this saves a lot of time as you do not need to build your app using the adobe PhoneGap build service every time you make a small change.
All you need to do is build your mobile App using best practices, click the “Phone App View” icon in the page header bar then click the “LiveView” icon in the “Phone App View”.
You can then run the “PhoneGap Developer App” (which is a free download from the various app stores) and test your Mobile App live on a Phone or Tablet.

Bear in mind that the PhoneGap developer app that you download and install from the app store (Google Play or Apple App store) only includes the core plugins, so if you need anything above and beyond them you will still need to build using the PhoneGap build service and install on your mobile device. For most common business Apps the core plugins should be sufficient but the “PhoneGap” workspace does provide the ability to specify custom plugins if you need them.


Apps in that project. Open them one a time then select “Phone App View” and in that “LiveView” and you can run them on your mobile devices without needing to build in PhoneGap Build (PGP).


You build Native Mobile Apps in the “PhoneGap” workspace.

When building an App you can configure all the plugins and preferences for PhoneGap in that workspace.

For those interested the packaging of PhoneGap apps that are uploaded to Adobe PhoneGap Build is performed by firstly copying a template directory structure in the mobileapps\apps\appname\platform directory.

The template files can be found in:

c:\lianja\mobileapps\templates\ios\phone\www
c:\lianja\mobileapps\templates\ios\tablet\www
c:\lianja\mobileapps\templates\android\phone\www
c:\lianja\mobileapps\templates\android\tablet\www

If you so desire you can customize these template files to add your own splash screens, setup your own config.xml defaults etc.

We’ve attempted to to do all of the heavy lifting for you. So, you should just design your mobile apps visually as you do desktop apps using the Lianja App Builder visual development tools.


Tip: To be able to debug mobile apps don’t forget to enable “Debug” in the App settings.
When in release mode Lianja will automatically minify the JavaScript components and disable debugging in the App that is generated by the Phonegap Build Service.


customizing the login page for mobile Apps you can customize it yourself.
The default HTML for the login page that is embedded into a mobile App that requires authentication can be found at:
c:\library\mobilelogin\login_phone.html
and
c:\library\mobilelogin\login_tablet.html
If login_phone.html (phones) or login_tablet.html (tablets) exists in the App being built then this will be used rather than the default login page. Look at the defaults to see how authentication is achieved.


Tip: To slide in a DialogPanel from the left set the width argument as a negative number e.g. -500. Positive slides in from the right. On a phone, DialogPanels slide across the whole of the viewport (responsive UI).
Also note that on a phone a popup dialog will automatically slide in as a DialogPanel due to space limitations.


The data type of a field or grid column is auto detected and when you edit on a mobile device (phone or tablet) the native iOS or Android “pickers” for dates, date times, and choice lists are automatically used for data input.
Also note that in Lianja 2.0 editing grid rows is a much better experience as a DialogPanel will slide in from the right which contains a form to edit the current row in the grid. In Web apps you just need to double click on a row. In mobile apps just touch the row then touch the “Edit” button in the header of the grid.



Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s