Building RhoMobile MVC application with HTML 5 , JQuery for iPhone,iPad, Windows Phone, Android,BlackBerry

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”>

    <h1>Storemanager</h1>

    <%if SyncEngine::logged_in > 0 %>

    <a href=“<%=url_for:controller=>:Settings,:action=>:do_sync%>”class=“ui-btn-left” data-icon=“refresh”>

      Sync

    </a>

    <a href=“<%=url_for:controller=>:Settings,:action=>:logout%>”class=“ui-btn-right” data-icon=“star”>

    Logout

</a>

    <%else %>

        <a href=“<%=url_for:controller=>:Settings,:action=>:login%>”class=“ui-btn-right” data-icon=“star”>Login</a>

    <%end%>

</div>

<div data-role=“content”>

    <ul data-role=“listview”>

      <li><a href=“Product”>

      <span class=“title”>Products </span>

      </a></li>

    </ul>

</div>

</div>