Making Twitter mobile client with Ruby using Rhodes And Rhosync (Part 4)

01Mar09

Previously

• Part One – Syncing public Tweet on Rhosync server
• Part Two – Displaying public Tweet on iPhone Simulator
• Part Three – Posting your Tweet via Rhosync Simulator

At the previous post, we created MyTimeline to display your friends tweet as well as posting your own tweet from Rhosync server.

Today’s tutorial to show and post tweet from iPhone simulator through Rhodes. This is similar to Part2, but I will also cover how to change and debug views.

rhogen model

We already created an app called Twitter, so we can go straight into making model. If you haven’t done so, go back to Part2

  $cd Twitter 
  $rhogen model MyTimeLine "http://localhost:3000/apps/6/sources/12" 12 text,user_screen_name,user_name,user_profile_image_url,source
  Generating with model generator:
    [ADDED]  MyTimeLine/config.rb
    [ADDED]  MyTimeLine/index.erb
    [ADDED]  MyTimeLine/edit.erb
    [ADDED]  MyTimeLine/new.erb
    [ADDED]  MyTimeLine/show.erb
    [ADDED]  MyTimeLine/controller.rb

As you did at Part2, let’s insert link to the “MyTimeLine/index” and “MyTimeLine/new” pages at at “Twitter/index.erb” like below.

  <ul id="home" selected="true" title="Twitter">
    <li>Something interesting here...</li>
    <li><a  href="MyTimeLine"> My Tweet</a></li>
    <li><a  href="MyTimeLine/new"> New Tweet</a></li>

View

Next part is a view. This is index page. Rhodes uses iui javascript/css library which shows UI just like iPhone. This is great to get instant iPhone like look & feel. As I look further into the css of iUi, I learnt that iUi offers very basic layout and does not have anything extra to adjust font size and so on. As you saw at Part2, all tweet messages are in big bold font. I added extra css to make date, user name and source field smaller.

/apps/Twitter/MyTimeline/index.erb

<ul id="MyTimeLines" title="MyTimeLines">
<%@MyTimeLines.each do |x|%>

<li class ="row">
  <div class ="photo">
    <img src=<%= x.user_profile_image_url %> alt=<%= x.user_screen_name %> />
  </div>
  <div class ="status">
    <div class ="text">
     <%= x.text %>
    </div>
    <div class ="user">
     <%= x.user_name %> <%= x.created_at %> via <%= x.source %>
    </div>
  </div>
</li>
<%end%>
</ul>

/apps/Twitter/shared/css/common.css

  .photo{
    float: left;
  }
  .status{
    margin-top: 5px;
    margin-left: 10px;
    width: 290px;

  /*  float : left; */
  }
  .text{}
  .user {
  /*  float: left;*/
    color:#999999;
    font-size:13px;
    font-weight:normal;
  }

You can put the above css under /apps/shared/css or combine with /apps/shared/js/iui/iui.css. I personally prefer to put css into my directory (Twitter), so that I can put only Twitter directory into versioning system, but it’s up to you. If you follow the same path as mine, don’t forget to import the file you just created at /apps/Twitter/layout.erb

  <style type="text/css" media="screen">
    @import "/shared/js/iui/iui.css"; 
    @import "/shared/css/rho.css";
    @import "/Twitter/shared/css/common.css"; 
  </style>

/apps/Twitter/MyTimeline/new.erb

At new page, I got rid of all input besides “text”, as all other attributes are going to be created by Twitter when the post is created.

  <form title="New MyTimeLine" 
      class="panel"
      id="MyTimeLine_new_form" 
      method="POST" 
      action="<%=url_for(:action => :create)%>">
    <fieldset>
        <input type="hidden" name="id" value="<%=@MyTimeLine.object%>"/>

          <div class="row">
              <label>Text: </label>
              <input type="text" name="MyTimeLine[text]"/>
          </div>

    </fieldset>
    <input type="submit" value="Create"/>
  </form>

Displaying on Emulator

Now it’s time to open the project at Xcode and do the build. As we did at Part2, make sure you reset iPhone simulator and Xcode, so that you can do clean build.

Top page

Show page

Create page

New Tweet on Twitter

Debugging view.

When I first added some styling, I kept doing “reset iPhone, clean Xcode target, Build & Go”, just to see minor view change. This drove me crazy!!

Then I copied view logic from erb to normal html and started debugging using Firefox & Firebug. After I completed my view change, I discovered that I can see the exactly same view from my browser just hitting http://localhost:8080

Next

Next, I will try utilizaing mobile system’s GPS capability. I will fetch geo location and list tweets around your area. A few function to achieve this is not implemented at 0.3, so I will use 1.0 which is still at unstable release.

About these ads

Filed under: Uncategorized   |  3 Comments