Generating a Model

Rhodes also includes a script to generate code that implements the Model-ViewController (MVC) pattern, similar to the Rails scaffold command. This will implement common actions to display a list of items, show an individual item's details, create, update, and delete. To create a model and the corresponding views and controller actions, use the "rhogen model" command. Note: more information about rhogen is available at Just as with the "rhogen app" command, you can also create the files by hand. Typically, your app will have one or more models.

The model for the application that is detailed in this tutorial will be called "Product" (see Listing 6-4). A product has attributes: brand, name, price, quantity, and sku. Issue "rhogen model Product name,description,done" to generate the Product model for your application.

Listing 6-4. Generating a model with views and a controller

$ rhogen model product brand,name,price,quantity,sku Generating with model generator: [ADDED] app/Product/index.erb

[ADDED] app/Product/edit.erb [ADDED] app/Product/new.erb [ADDED] app/Product/show.erb

[ADDED] app/Product/

[ADDED] app/Product/

[ADDED] app/Product/

[ADDED] app/Product/

[ADDED] app/Product/product_controller.rb

[ADDED] app/Product/product.rb

[ADDED] app/test/product_spec.rb

As you can see, more files have been added to the file system. Each model is defined in its own subdirectory of the /app folder. The new files include the views for the default controller actions, the configuration file for the model, and the controller.

In the model's directory you will find product_controller.rb, which implements the controller for the model. You will also see .erb files for all of the views associated with the model. Finally, there is a product.rb file that sets properties on the model. Each Rhodes controller implements actions to perform basic CRUD (create, read, update, and delete) on the object generated by default by the scaffold. The template views generated are shown in Table 6-4.

Table 6-4. Default views for Rhodes Model View Purpose index new edit show lists all of the objects displays the form to enter attributes for creating a new object displays a form for editing object attributes displays the object attributes

The controller for the model (/app/Product/product_controller.rb) is very similar to a Ruby on Rails controller in the sense that it contains all the basic CRUD actions with consistent naming conventions. Most actions defined in the controller correspond to view files in the same directory that have the action name with an .erb file type.

Now that you have the scaffold of the application and a basic understanding of the structure, it's time to finish our application by connecting the model's view to our start screen.

To do this you need to edit your application index by opening app/index.erb. If you were to compile the application in its current state, you would still see the same start screen that you saw when you first ran the application that displays "Add links here...", with no way to view the UI for the model you just created. The code for the page should currently look like Listing 6-5. The Sync and Login buttons in the toolbar are connected to RhoSync by default (covered in the next chapter). You can delete them or modify the Settings controller to use a web service rather than RhoSync.

Listing 6-5. Default start screen (app/index.erb)

<div id="pageTitle">

<div id="toolbar">

<div id="leftItem" class="blueButton">

<%= link_to "Sync", :controller => :Settings, :action => :do_sync %>

<% if SyncEngine::logged_in > 0 %> <div id="rightItem" class="regularButton">

<%= link_to "Logout", :controller => :Settings, :action => :logout %> </div> <% else %>

<div id="rightItem" class="regularButton">

<%= link_to "Login", :controller => :Settings, :action => :login %></div> <% end %> </div>

<span class="title">Add Links Here...</span> <span class="disclosure_indicator"></span>

To add a connection to your Product model, change the title "Add links here..." to "Products" and href to "Product" as shown in Listing 6-6. This will create a link to the Product model's index page: app/Product/index.erb-just with most web servers, the default page for a URL is index and the relative URL will look for a sibling page to index.erb that is also in the app folder. Note that most of the page is pure HTML and you could put other links here or add graphics with an <img> tag or add text. The part of the page that is embedded Ruby code is inside <% ... %>.

Listing 6-6. Modified start screen (app/index.erb)

<div class="toolbar">

<h1 id="pageTitle"> Products

<ul id="home" selected="true" title="Products"> <li><a href="Product">Product</a></li>

Rhodes links work by assuming the /app directory is the root directory of your application. In the example you just wrote "Product" as the reference for the link. This is because "Product" is a subdirectory of /app and since you didn't specify a file in that directory, it uses the default: the index page. This linking convention can be used throughout your application.

Now that you have your model index page hooked up to your application index you are ready to build the application for one of the Rhodes supported platforms. Simply use the appropriate "rake:run" command for your platform of choice. See Figures 6-4 to 6-8 to see how all of the screens appear on the iPhone. The functionality is identical across platforms; however, the visual details conform to the target platform.

Figure 6-4. Modified start screen (app/index.erb) as seen on iPhone

Figure 6-5. Tasks list page (app/Product/index.erb), empty and with items in the list
Figure 6-6. Tasks new page (app/Prodiiot/new.erb)
Figure 6-7. Task details page (app/Produot/show.erb)
Figure 6-8. Product edit page (app/Product/edit.erb)

Was this article helpful?

0 0
Living With Android

Living With Android

Get All The Support And Guidance You Need To Finally Be A Success At Using Android. This Book Is One Of The Most Valuable Resources In The World When It Comes To Playing With the Hottest Android Tablet.

Get My Free Ebook

Post a comment