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>

    • 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 :
Advertisements

About Anindita
Anindita Basak is working as Big Data Cloud Consultant in Microsoft. Worked in multiple MNCs as Developer & Senior Developer on Microsoft Azure, Data Platform, IoT & BI , Data Visualization, Data warehousing & ETL & of course in Hadoop platform.She played both as FTE & v- employee in Azure platform teams of Microsoft.Passionate about .NET , Java, Python & Data Science. She is also an active Big Data & Cloud Trainer & would love share her experience in IT Training Industry. She is an author, forum contributor, blogger & technical reviewer of various books on Big Data Hadoop, HDInsight, IoT & Data Science, SQL Server PDW & PowerBI.

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

  1. Pingback: My Homepage

Leave a Reply

Please log in using one of these methods to post your comment:

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

%d bloggers like this: