If you have an existing web application and wish to enable hardware features or other RhoMobile APIs, then you will need to create a RhoMobile application and point it to your website. This will allow you to deliver a true native application client experience for your web app as well as enable hardware features that you can’t get with standard browsers running on the device.
Here are the steps that you need to follow
In order to create your own RhoMobile web app container, you must first install RhoMobile Suite. This will give you the abiltity to create the application and complete the rest of the steps.
Follow the Rhomobile Suite Installation Instruction and then return to this section to continue to the next step.
RhoMobile applications rely on having the target platform SDKs installed on your laptop so that the native runtime container can be built. For example, if you want to build a Android web app container, you will need to have the Android development environment installed and linked to RhoMobile Suite.
Follow the instructions for setting up target platforms SDKs and then return to this section to continue to the next step.
Follow the instructions for creating a project to create a simple skeleton for a RhoMobile project. You can optionally remove the public
folder as this contains default JavaScript and CSS files that you will not be using since all of your application files will be running from your web server.
By default this application is configured to start with loclly availble files. You need to change the application so that it starts from your web application instead. Edit the rhoconfig.txt
file and change the start_path
parameter to point to the url for your web server.
For example, if my web application was at http://www.mydomain.com/mywebapp then my start_path
parameter in rhoconfig.txt
would look like:
# startup page for your application start_path = 'http://www.mydomain.com/mywebapp'
When this application is launched on the device, it will attempt to connect to this URL.
By default not all RhoMobile APIs are available to your application. APIs and capabilities are included by defining extensions
in the build.yml
file.
By default the following APIs are included when building any application: Application, Database, RhoFile, Log, NativeMenubar, NativeTabbar, NativeToolbar, Navbar, Network, Notification, Orm, OrmModel, System, Webview
These APIs are noted on their individual API reference pages under the extension: coreapi
. You do not need to specify including this as it will automatically be included
The following APIs are not included by default and can be included by specifying the proper extension
in the build.yml
:
extensions: ["mediaplayer"]
extensions: ["screenorientation"]
extensions: ["sensor"]
If you would like your application to include RhoConnect capabilities then you will need to include the proper settings in the build.yml
file:
extensions: ["rhoconnect-client"]
extensions: ["rhoconnect-push", "rhoconnect-client"]
as well as capabilities: ["push"]
needs to be added as a seperate line in the build.yml
fileIf you would like to give you application the true native experience, you should change the default behavior for the application name, icons used, and splash screen
Follow the steps in this guide and then return here to continue to the next step.
Now that you have configured your application behavior, it is time to build the RhoMobile web app container. Depending on the target platform being used will determine the specific steps that you need to follow. Overall, the goal is to produce an installation package that can run on the target native platform (i.e. .cab for Windows Mobile, .apk for Android, etc)
Follow the steps for the target platform and return here to contuinue
Now that you have a RhoMobile Web App container pointed to your web server, you need to configure your web application on your server to enable the RhoMobile JavaScript APIs. In order to do this, you must:
a) Generate the rhoapi-modules.js
file
In a command prompt from the RhoMobile project folder you created, execute the following command: :::ruby # optionally change ‘all’ below to an individual platform # if your devices are all running on the same platform # may be: win32, wm, android, iphone, wp8 rake update_rho_modules_js[all]
b) Copy this file onto your server
Typically this will be in the same location you have other JavaScript files.
c) Link to the file
From your web application HTML files link to the rhoapi-modules.js
file you copied to your web server
For example if you placed rhoapi-modules.js
in [webserver app root]\js\
then in your html files you would link to the rhoapi-modules.js
using:
<script src="js/rhoapi-modules.js" type="text/javascript"></script>
d) JS ORM
If you are going to be using the JS ORM API, you’ll also need to include this line in any files that will be using it:
<script type="text/javascript" charset="utf-8" src="/public/api/rhoapi-modules-ORM.js"></script>