Building RhoMobile MVC application with HTML 5 , JQuery for iPhone,iPad, Windows Phone, Android,BlackBerry
December 26, 2011 1 Comment
RhoMobile is an alternative native application environment for smartphones other than PhoneGap. To build applications with RhoMobile , you need to download RhStudio from http://rhomobile.com/products/rhostudio/ & choose your appropriate version for Windows or Mac.
- Next to create smartphone applications with Rhomobile, you need to install Rhodes , RhoSync, RhoConnect , Gits. The four Rhomobile products – Rhodes, Rhosync, RhoHub, and Rhogallery – provide a complete toolkit for creating a mobile application. Rhomobile is cross-platform and so allows you to build your application for many different types of smartphone – including iPhone and Blackberry – just with a single codebase. This makes it the most preferred and quickest way of developing mobile apps. As you create a native Rhomobile application, you can use the built-in device features such as GPS, Push, and Camera, all with offline capabilities.
- Select File-> New Project-> Rhodes Application-> Select your Project name.
- Set out the Rhodes Model of the application by right clicking on the project of the Project Explorer & Select Rhodes Model. Provide Name & Controllers.
- Next , you will find three types files inside the app folder of your project & after setting the Models , a seperate folder named as your Model name will be created.
- The files created as default are basically of three types :
- product.erb -> This is the Model file, which contains the Model Definition.
- product_controller.rb -> This file contains the business logic relates to our Model.
- *.erb-> The .erb files are the html view template files.
- Lets the controller view of Rhodes Views for smartphones:
- Lets edit the Views as ‘Index.erb’ in HTML 5 for Rhodes application for smartdevices.
<div data-role=“page” data-url=“<%=Rho::RhoConfig.start_path%>/”>
<div data-role=“header” data-position=“inline”>
<%if SyncEngine::logged_in > 0 %>
<a href=“<%=url_for:controller=>:Settings,:action=>:do_sync%>”class=“ui-btn-left” data-icon=“refresh”>
<a href=“<%=url_for:controller=>:Settings,:action=>:logout%>”class=“ui-btn-right” data-icon=“star”>
<a href=“<%=url_for:controller=>:Settings,:action=>:login%>”class=“ui-btn-right” data-icon=“star”>Login</a>
<span class=“title”>Products </span>
Run the Project by right clicking project -> Run Configuration -> Right Click on RhodesMobile-> Select New -> Select your simulator Environment.
Select your RhoMobile Simulator as iPhone & check the application output native iPhone platform.
Web – Inspector View for HTML 5 , JQuery Mobile Codes.
Products Sample Entry Screen with MVC HTML 5 , JQuery Mobile in iPhone.
Check the Project View in Android Platform:
Product Samples Screen in Android:
Windows Mobile View for RhoMobile :