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



    <%else %>

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



  <div data-role=“content”>

    <ul data-role=“listview”>

      <li><a href=“Product”>

      <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 :
%d bloggers like this: