RubyGems - rmobio - Versions diffs - 1.1.31 → 1.1.32 - Mend

rmobio 1.1.31 → 1.1.32

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (522) hide show

data/lib/rmobio/doc/index.html ADDED Viewed

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!DOCTYPE html
+     PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
+     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
+<!--
+    RDoc Documentation
+  -->
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+  <title>RDoc Documentation</title>
+  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
+</head>
+<frameset rows="20%, 80%">
+    <frameset cols="25%,35%,45%">
+        <frame src="fr_file_index.html"   title="Files" name="Files" />
+        <frame src="fr_class_index.html"  name="Classes" />
+        <frame src="fr_method_index.html" name="Methods" />
+    </frameset>
+    <frame src="files/rxml/xforms_transformer_rb.html" name="docwin" />
+</frameset>
+</html>

data/lib/rmobio/doc/rdoc-style.css ADDED Viewed

@@ -0,0 +1,208 @@
+body {
+    font-family: Verdana,Arial,Helvetica,sans-serif;
+    font-size:   90%;
+    margin: 0;
+    margin-left: 40px;
+    padding: 0;
+    background: white;
+}
+h1,h2,h3,h4 { margin: 0; color: #efefef; background: transparent; }
+h1 { font-size: 150%; }
+h2,h3,h4 { margin-top: 1em; }
+a { background: #eef; color: #039; text-decoration: none; }
+a:hover { background: #039; color: #eef; }
+/* Override the base stylesheet's Anchor inside a table cell */
+td > a {
+  background: transparent;
+  color: #039;
+  text-decoration: none;
+}
+/* and inside a section title */
+.section-title > a {
+  background: transparent;
+  color: #eee;
+  text-decoration: none;
+}
+/* === Structural elements =================================== */
+div#index {
+    margin: 0;
+    margin-left: -40px;
+    padding: 0;
+    font-size: 90%;
+}
+div#index a {
+    margin-left: 0.7em;
+}
+div#index .section-bar {
+   margin-left: 0px;
+   padding-left: 0.7em;
+   background: #ccc;
+   font-size: small;
+}
+div#classHeader, div#fileHeader {
+    width: auto;
+    color: white;
+    padding: 0.5em 1.5em 0.5em 1.5em;
+    margin: 0;
+    margin-left: -40px;
+    border-bottom: 3px solid #006;
+}
+div#classHeader a, div#fileHeader a {
+    background: inherit;
+    color: white;
+}
+div#classHeader td, div#fileHeader td {
+    background: inherit;
+    color: white;
+}
+div#fileHeader {
+    background: #057;
+}
+div#classHeader {
+    background: #048;
+}
+.class-name-in-header {
+  font-size:  180%;
+  font-weight: bold;
+}
+div#bodyContent {
+    padding: 0 1.5em 0 1.5em;
+}
+div#description {
+    padding: 0.5em 1.5em;
+    background: #efefef;
+    border: 1px dotted #999;
+}
+div#description h1,h2,h3,h4,h5,h6 {
+    color: #125;;
+    background: transparent;
+}
+div#validator-badges {
+    text-align: center;
+}
+div#validator-badges img { border: 0; }
+div#copyright {
+    color: #333;
+    background: #efefef;
+    font: 0.75em sans-serif;
+    margin-top: 5em;
+    margin-bottom: 0;
+    padding: 0.5em 2em;
+}
+/* === Classes =================================== */
+table.header-table {
+    color: white;
+    font-size: small;
+}
+.type-note {
+    font-size: small;
+    color: #DEDEDE;
+}
+.xxsection-bar {
+    background: #eee;
+    color: #333;
+    padding: 3px;
+}
+.section-bar {
+   color: #333;
+   border-bottom: 1px solid #999;
+    margin-left: -20px;
+}
+.section-title {
+    background: #79a;
+    color: #eee;
+    padding: 3px;
+    margin-top: 2em;
+    margin-left: -30px;
+    border: 1px solid #999;
+}
+.top-aligned-row {  vertical-align: top }
+.bottom-aligned-row { vertical-align: bottom }
+/* --- Context section classes ----------------------- */
+.context-row { }
+.context-item-name { font-family: monospace; font-weight: bold; color: black; }
+.context-item-value { font-size: small; color: #448; }
+.context-item-desc { color: #333; padding-left: 2em; }
+/* --- Method classes -------------------------- */
+.method-detail {
+    background: #efefef;
+    padding: 0;
+    margin-top: 0.5em;
+    margin-bottom: 1em;
+    border: 1px dotted #ccc;
+}
+.method-heading {
+  color: black;
+  background: #ccc;
+  border-bottom: 1px solid #666;
+  padding: 0.2em 0.5em 0 0.5em;
+}
+.method-signature { color: black; background: inherit; }
+.method-name { font-weight: bold; }
+.method-args { font-style: italic; }
+.method-description { padding: 0 0.5em 0 0.5em; }
+/* --- Source code sections -------------------- */
+a.source-toggle { font-size: 90%; }
+div.method-source-code {
+    background: #262626;
+    color: #ffdead;
+    margin: 1em;
+    padding: 0.5em;
+    border: 1px dashed #999;
+    overflow: hidden;
+}
+div.method-source-code pre { color: #ffdead; overflow: hidden; }
+/* --- Ruby keyword styles --------------------- */
+.standalone-code { background: #221111; color: #ffdead; overflow: hidden; }
+.ruby-constant  { color: #7fffd4; background: transparent; }
+.ruby-keyword { color: #00ffff; background: transparent; }
+.ruby-ivar    { color: #eedd82; background: transparent; }
+.ruby-operator  { color: #00ffee; background: transparent; }
+.ruby-identifier { color: #ffdead; background: transparent; }
+.ruby-node    { color: #ffa07a; background: transparent; }
+.ruby-comment { color: #b22222; font-weight: bold; background: transparent; }
+.ruby-regexp  { color: #ffa07a; background: transparent; }
+.ruby-value   { color: #7fffd4; background: transparent; }

data/lib/rmobio/rxml/base_transformer.rb CHANGED Viewed

@@ -184,11 +184,11 @@ The above code generates the following xhtml in Firefox:
       #
       #==== Examples
       #
-      #  @xml.textare(body, "some text",
+      #  @xml.output(body, "some text",
       #     :style=>'class="white"', :xstyle=>'height="3ex" style="white"')
       #generates the following xhtml code:
       #    <textarea class="white" name="">some text</textarea>
-      def textarea(doc, txt="", options={})
+      def textoutput(doc, txt="", options={})
         doc << "\n<textarea #{options[:style]} name=\"#{options[:id]}\">" << txt << "</textarea>"
       end
@@ -217,7 +217,10 @@ The above code generates the following xhtml in Firefox:
       def input(doc, id, value, type, options={})
         doc << "\n<input #{options[:style]} type=\"" << type << "\" name=\"" << id << "\" value=\"" << value << "\"/>\n"
       end
+      #Create a multi-line textarea, same as textoutput tag
+      def textarea(doc, id, value, type, options={})
+        doc << "\n<textarea #{options[:style]} name=\"#{id}\">" << value << "</textarea>"
+      end
       def submit_tag()
         # do nothing, only implemented in xforms
       end
@@ -298,35 +301,36 @@ The above code generates the following xhtml in Firefox:
         yield doc
       end
       #Create table tag
-      #1. style:  html styles
-      #2. xstyle: xforms styles
-      def table(doc, style="", xstyle="")
-        doc << "\n<table #{style}>"
+      #==== Options
+      #* <tt>:style</tt> -- specifies html, xhtml style attributes as a string
+      #* <tt>:xstyle</tt> -- specifies xforms style attributes as a string
+      def table(doc, options={})
+        doc << "\n<table #{options[:style]}>"
         yield doc
         doc << '</table>'
       end
-      def row(doc, id=nil, nodeset=nil, style="", xstyle="")
-        doc << "<tr #{style}>"
+      def row(doc, id=nil, nodeset=nil, options={})
+        doc << "<tr #{options[:style]}>"
         yield doc
         doc << '</tr>'
       end
-      def row_list(doc, id=nil, style="", xstyle="")
-        doc << "<tr #{style}>"
+      def row_list(doc, id=nil, options={})
+        doc << "<tr #{options[:style]}>"
         yield doc
         doc << '</tr>'
       end
-      def itemset(doc, id, nodeset, style="", xstyle="")
+      def itemset(doc, id, nodeset, options={})
         yield doc
       end
-      def itemlist(doc, id, style=nil, xstyle=nil)
+      def itemlist(doc, id, options={})
         yield doc
       end
-      def cell(doc, style=nil, xstyle=nil)
-        doc << "<td #{style}>"
+      def cell(doc, options={})
+        doc << "<td #{options[:style]}>"
         yield doc
         doc << '</td>'
       end
-      def list(doc, style=nil, xstyle=nil)
+      def list(doc, options={})
         yield doc
       end
       # The following tags are only supported by xforms client

data/lib/rmobio/rxml/xforms_transformer.rb CHANGED Viewed

@@ -49,9 +49,9 @@ The above code generates the following xforms for Mobio runner:
         xmlns:xsd="http://www.w3.org/2001/XMLSchema"
 	xmlns:ev="http://www.w3.org/2001/xml-events">
    <head>
-   <model></model></head>
+   <xf:model></xf:model></head>
-   <body style="body">
+   <body">
    <m:image height="5ex" width="100%">http://localhost:3000/images/rails.png</m:image>
    <m:hstack height="1ex"/>
    <m:output height="1ex">My test app</m:output></body></html>
@@ -74,12 +74,12 @@ A rails icon and some text will be displayed on Mobio runner when you load the r
 	xmlns:ev="http://www.w3.org/2001/xml-events">'
         @model_buffer = '<head>'
-        @model_buffer << "\n<model>"
+        @model_buffer << "\n<xf:model>"
         # basic_styles
         yield xml
-        @model_buffer << "</model></head>\n"
+        @model_buffer << "\n</xf:model></head>\n"
         xml << @model_buffer << @view_buffer
         xml << "</html>"
         @view_buffer = ""
@@ -113,9 +113,9 @@ A rails icon and some text will be displayed on Mobio runner when you load the r
       def body(doc, title="", style=nil)
         # xforms style is external style
         @view_buffer << '<style xmlns="http://www.mobio.com/ext" src="' << style << '"/>' if style
-        @view_buffer << "\n<body style=\"body\">"
+        @view_buffer << "\n<body>"
         yield doc
-        @view_buffer << '<m:footer style="footer" />'
+        @view_buffer << '<m:footer/>'
         @view_buffer << "</body>"
       end
       #Produce a text string. The text displayed can be the _txt_ argument if there's
@@ -134,7 +134,9 @@ A rails icon and some text will be displayed on Mobio runner when you load the r
       #and the text widget displays the data in that xpath.
       #* <tt>:xpath</tt> -- specifies the xpath of the text string in the instance model.\
       #If :id is not specified, it assumes a relative path for the text node. \
-      #See the 3rd example.
+      #See the 3rd example. \
+      #* <tt>:value</tt> -- specifies the value attribute of text widget. \
+      #See the last example
       #==== Examples
       #* Text widget displays the string of _txt_ argument without creating an instance:
       #    @xml.text(body, 'My test', :xstyle=>'style="white"')
@@ -157,16 +159,21 @@ A rails icon and some text will be displayed on Mobio runner when you load the r
       #     <m:output height="1ex" ref="instance('txt1')/images/id"/>
       #* Text widget displays string from a pre defined instance in a relative path:
       #   @xml.itemset(list, 'tb1', "instance('audios')/items/item") do |row|
-      #    @xml.cell(row) do |cell|
+      #    @xml.cell(row)do |cell|
       #     @xml.text(cell, "", :xpath=>'@name')
       #    end
       #   end
       #generates the following xforms:
       #     <m:itemset id="tb1" nodeset="instance('audios')/items/item" >
-      #      <m:item style="item">
-      #       <m:output style="label" ref="@name"/>
+      #      <m:item>
+      #       <m:output ref="@name"/>
       #      </m:item>
       #     </m:itemset>
+      #* Text widget displays a string in value attribute:
+      #     @xml.text(cell, "", :value=>"concat('tel:', instance('phones')/number)")
+      #generates the following xforms:
+      #       <m:output height="1ex" value="concat('tel:', instance('phones')/number)"/>
+      #
       def text(doc, txt="", options={})
         # If there's id but no xpath, we will create a default instance data for
         # the textoutput.
@@ -187,6 +194,8 @@ A rails icon and some text will be displayed on Mobio runner when you load the r
           # If there's an xpath but no id, this is a relative pace, don't create any instance.
           if options[:xpath]
             @view_buffer << ' ref="' << options[:xpath] << '"/>'
+          elsif options[:value]
+            @view_buffer << " value=\"#{options[:value]}\"/>"
           else
             @view_buffer << ">" << txt << "</m:output>"
           end
@@ -211,7 +220,7 @@ A rails icon and some text will be displayed on Mobio runner when you load the r
       #* <tt>:xpath</tt> -- specifies the xpath of the text string in the instance model.
       #
       #==== Examples
-      #    @xml.textarea(body, 'My test', {:xstyle=>'style="white" height="2ex"'})
+      #    @xml.textoutput(body, 'My test', {:xstyle=>'style="white" height="2ex"'})
       #
       #generates the following xforms:
       #    <m:textoutput style="white" height="5ex">My test</m:textoutput>
@@ -219,12 +228,12 @@ A rails icon and some text will be displayed on Mobio runner when you load the r
       #
       #==== Examples
       #* Text widget displays the string of _txt_ argument without creating an instance:
-      #    @xml.textarea(body, 'My test box', :xstyle=>'height="3ex"')
+      #    @xml.textoutput(body, 'My test box', :xstyle=>'height="3ex"')
       #
       #generates a 3 line text box:
       #    <m:textoutput height="3ex">My test box</m:textoutput>
       #* Text widget creates a model instance and displays the string from the new instance:
-      #    @xml.textarea(body, 'My test box',
+      #    @xml.textoutput(body, 'My test box',
       #     :id=>'txt1', :xstyle=>'height="3ex"')
       #generates the following xforms:
       #In model:
@@ -232,12 +241,12 @@ A rails icon and some text will be displayed on Mobio runner when you load the r
       #In view:
       #     <m:textoutput height="3ex" ref="instance('txt1')/txt"/>
       #* Text widget displays string from a pre defined instance:
-      #     @xml.textarea(body, 'My test', :id=>'txt1', :xpath=>'images/id',
+      #     @xml.textoutput(body, 'My test', :id=>'txt1', :xpath=>'images/id',
       #       :xstyle=>'height="5ex" width="50%"')
       #generates the following xforms:
       #     <m:textoutput height="5ex" width="50%" ref="instance('txt1')/images/id"/>
       #
-      def textarea(doc, txt="", options={})
+      def textoutput(doc, txt="", options={})
         # If there's id but no xpath, we will create a default instance data for
         # the textoutput.
         if options[:id] and options[:xpath].nil?
@@ -257,7 +266,8 @@ A rails icon and some text will be displayed on Mobio runner when you load the r
         else
           @view_buffer << ">" << txt << "</m:textoutput>"
         end
-      end # textarea
+      end # end textoutput
       #
       #Create user input field.
       #1. id:    The instance id that will be associated with this input field. An instance data \
@@ -314,8 +324,65 @@ A rails icon and some text will be displayed on Mobio runner when you load the r
         else
           @view_buffer << options[:xpath] << "\"/>"
         end
-      end
+      end # end input
+      #Create multi lines input area. Similar to input tag except input tag only
+      #allow a single input line.
+      #1. id:    The instance id that will be associated with this input field. An instance data \
+      #will be created automatically in the model if options[:xpath] is not specified. \
+      #The instance is created with only one tag: 'txt'.
+      #2. value: initial value that will be displayed when ui is loaded
+      #3. type:  not used for xforms client
+      #==== Options
+      #* <tt>:xstyle</tt> -- specifies xforms style attributes as a string
+      #* <tt>:xpath</tt> -- specifies the xpath of the input data in the model
+      #==== Examples
+      #* Create a simple textarea:
+      #   @xml.textarea(body, "name", "john", "text")
+      #generates the following xforms:
+      #
+      #In Model section of the form:
+      #   <xf:instance id="name">
+      #     <data xmlns=""><txt>john</txt></data>
+      #   </xf:instance>
+      #In View section of the form:
+      #   <m:textarea  height="1ex" ref="instance('name')/txt"/>
+      #Notice the instance data is created automatically because the rxml tag
+      #didn't specify the :xpath argument. Mobio runner will display an input box with default
+      #value "john" in the box when the page is launched. User can edit the
+      #string in the box and the value will be assinged to the model instance('name')/txt.
+      #
+      #* The next example shows how to create a textarea tag with predefined instance data:
+      #Note, create the options hash before the beginning of the document)
+      # options = {
+      #   :style=> 'style="white"',
+      #   :xstyle=>'height="3ex"',
+      #   :xpath=>"images/id"}
+      #    @xml.doctype(xml) do |x|
+      #      @xml.body(x, 'mobio', 'default_style.xml') do|body|
+      #        @xml.textarea(body, "img", "", "text", options)
+      #      end
+      #    end
+      #
+      #The above rxml generates only the view part in the xforms:
+      #   <m:textarea height="3ex" ref="instance('img')/images/id/>
+      #It assumes you already defined an instance 'img' in the model with tag /images/id.
+      #If the instance data is not defined, you will see a blank text box but you can't
+      #move focus to the box and you can't enter any text. If the instance model
+      #is defined, the text box will an initial value set in the instance data.
+      def textarea(doc, id, value, type, options={})
+        # Create model instance only when there's no xpath
+        if options[:xpath].nil?
+          @model_buffer << "\n" << '<xf:instance id="' << id << '"><data xmlns=""><txt>' << value << "</txt></data></xf:instance>\n"
+        end
+        @view_buffer << "\n<m:textarea #{options[:xstyle]} ref=" << "\"instance('" << id << "')/"
+        if options[:xpath].nil?
+          @view_buffer << "txt\"/>"
+        else
+          @view_buffer << options[:xpath] << "\"/>"
+        end
+      end # end textarea
       #Implement xforms <xf:send> in view buffer and <xf:submission> tag in model buffer
       #If argument 'create_instance' is set to true, it will create an <xf:submission> instance
       #based on the attributes (see options). Otherwise, it assumes an instance is
@@ -618,14 +685,31 @@ A rails icon and some text will be displayed on Mobio runner when you load the r
       #       <email id ="2" date="4/2" read="0" check="" from="admin@foo.com">Meeting reminder</email>
       #       <email id ="3" date="4/2" read="1" check="" from="customerservice@amazon.com">Your account activities</email>
       #     </data>
-      #
+      #
+      #* Create an instance with multiple layers:
+      #
+      #   @xml.instance_tag(body, "photos") do |x|
+      #     @xml.items do |y|
+      #       @xml.item("image1")
+      #       @xml.item("image2")
+      #     end
+      #   end
+      #generates the following instance in xforms model:
+      #   <xf:instance id="photos">
+      #     <data xmlns="">
+      #       <items>
+      #         <item>image1</item>
+      #         <item>image2</item>
+      #       </items>
+      #     </data>
+      #     </xf:instance>
       def instance_tag(doc, id, src=nil, &block)
         if src.nil?
-          @model_buffer << "\n<xf:instance id=\"#{id}\"><data xmlns=\"\">"
+          @model_buffer << "\n<xf:instance id=\"#{id}\">\n<data xmlns=\"\">\n"
           if block
             yield doc
           end
-          @model_buffer << '</data></xf:instance>'
+          @model_buffer << "\n</data></xf:instance>"
         else
           @model_buffer << "\n<xf:instance src=\"#{src}\"/>"
         end
@@ -640,50 +724,116 @@ A rails icon and some text will be displayed on Mobio runner when you load the r
         yield doc
         @view_buffer << "</m:hstack>"
       end
-      #Create grid control, similar to table in html
-      #1. style:  html styles
-      #2. xstyle: xforms styles
-      def table(doc, style="", xstyle="")
-        @view_buffer << "\n<m:grid #{xstyle}>"
+      #Create grid control, similar to table in html.
+      #==== Options
+      #* <tt>:style</tt> -- specifies html, xhtml style attributes as a string
+      #* <tt>:xstyle</tt> -- specifies xforms style attributes as a string
+      #==== Examples
+      #   Create photos instance:
+      #   @xml.instance_tag(body, "photos") do |x|
+      #     @xml.items do |y|
+      #       @xml.item("image1", :val=>'1')
+      #       @xml.item("image2", :val=>'2')
+      #     end
+      #   end
+      #
+      #   Create grid widget:
+      #   @xml.table(body) do |tbl|
+      #     @xml.row(tbl, "mylist", "instance('photos')/items/item", :xstyle=>'col="auto"') do |row|
+      #       @xml.cell(row) do |td|
+      #         @xml.text(td, "", :xpath=>'.')
+      #         @xml.text(td, "", :xpath=>'@val')
+      #       end
+      #     end
+      #   end
+      #Generates the following xforms:
+      #In the model:
+      #   <xf:instance id="photos">
+      #     <data xmlns="">
+      #       <items><item val="1">image1</item><item val="2">image2</item></items>
+      #     </data>
+      #     </xf:instance>
+      #
+      #In the view:
+      #     <m:grid>
+      #       <m:rowset id="mylist" nodeset="instance('photos')/items/item"  col="auto">
+      #         <m:item>
+      #           <m:output height="1ex" ref="."/>
+      #           <m:output height="1ex" ref="@val"/>
+      #         </m:item>
+      #       </m:rowset>
+      #     </m:grid>
+      #The UI is a table with 2 columns and 2 rows of text data.
+      def table(doc, options={})
+        @view_buffer << "\n<m:grid #{options[:xstyle]}>"
         yield doc
-        @view_buffer << '</m:grid>'
+        @view_buffer << "\n</m:grid>"
       end
-      def row(doc, id, nodeset, style=nil, xstyle='col="auto"')
-        @view_buffer << "<m:rowset id=\"#{id}\" nodeset=\"#{nodeset}\" #{xstyle}>"
+      #Create grid rowset control, similar to <tr> in html.
+      #1. id - the widget id
+      #2. nodeset - the xpath to the instance data
+      #==== Options
+      #* <tt>:style</tt> -- specifies html, xhtml style attributes as a string
+      #* <tt>:xstyle</tt> -- specifies xforms style attributes as a string
+      def row(doc, id=nil, nodeset=nil, options={})
+        @view_buffer << "<m:rowset id=\"#{id}\" nodeset=\"#{nodeset}\" "
+        options[:xstyle] = 'col="auto"' if #{options[:xstyle]}.nil?
+        @view_buffer << " #{options[:xstyle]}>"
         yield doc
         @view_buffer << '</m:rowset>'
       end
-      def row_list(doc, id, style="", xstyle="")
-        @view_buffer << "<m:rowlist id=\"#{id}\" #{xstyle}>"
+      #Create grid rowlist control. similar to <tr> in html.
+      #1. id - the widget id
+      #==== Options
+      #* <tt>:style</tt> -- specifies html, xhtml style attributes as a string
+      #* <tt>:xstyle</tt> -- specifies xforms style attributes as a string
+      def row_list(doc, id, options={})
+        @view_buffer << "<m:rowlist id=\"#{id}\" #{options[:xstyle]}>"
         yield doc
         @view_buffer << '</m:rowlist>'
       end
-      def itemset(doc, id, nodeset, style="", xstyle="")
-        @view_buffer << "<m:itemset id=\"#{id}\" nodeset=\"#{nodeset}\" #{xstyle}>"
+      #Create <m:itemset> control which takes a nodeset attribute and iterates
+      #items in the nodese
+      #1. id - the widget id
+      #2. nodset - the xpath to the instance data
+      #==== Options
+      #* <tt>:style</tt> -- specifies html, xhtml style attributes as a string
+      #* <tt>:xstyle</tt> -- specifies xforms style attributes as a string
+      def itemset(doc, id, nodeset, options={})
+        @view_buffer << "\n<m:itemset id=\"#{id}\" nodeset=\"#{nodeset}\" #{options[:xstyle]}>"
         yield doc
-        @view_buffer << '</m:itemset>'
+        @view_buffer << "\n</m:itemset>"
       end
-      def itemlist(doc, id, style=nil, xstyle=nil)
-        @view_buffer << "<m:itemlist id=\"#{id}\" #{xstyle}>"
+      #Create <m:itemlist> control with static data.
+      #1. id - the widget id
+      #==== Options
+      #* <tt>:style</tt> -- specifies html, xhtml style attributes as a string
+      #* <tt>:xstyle</tt> -- specifies xforms style attributes as a string
+      def itemlist(doc, id, options={})
+        @view_buffer << "\n<m:itemlist id=\"#{id}\" #{options[:xstyle]}>"
         yield doc
-        @view_buffer << '</m:itemlist>'
+        @view_buffer << "\n</m:itemlist>"
       end
-      def cell(doc, style=nil, xstyle='style="item"')
-        @view_buffer << "<m:item #{xstyle}>"
+      #Create <m:item> control.
+      #==== Options
+      #* <tt>:style</tt> -- specifies html, xhtml style attributes as a string
+      #* <tt>:xstyle</tt> -- specifies xforms style attributes as a string
+      def cell(doc, options={})
+        @view_buffer << "\n<m:item #{options[:xstyle]}>"
         yield doc
-        @view_buffer << '</m:item>'
+        @view_buffer << "\n</m:item>"
       end
-      #Create slist control.
-      def list(doc, style=nil, xstyle='style="slist"')
-        @view_buffer << "\n<m:slist #{xstyle}>"
+      #Create <m:slist> control.
+      #==== Options
+      #* <tt>:style</tt> -- specifies html, xhtml style attributes as a string
+      #* <tt>:xstyle</tt> -- specifies xforms style attributes as a string
+      def list(doc, options={})
+        @view_buffer << "\n<m:slist #{options[:xstyle]}>"
         yield doc
-        @view_buffer << '</m:slist>'
+        @view_buffer << "\n</m:slist>"
       end
       #Create a Tab control
-      #1. xstyle: the xforms style string. If xstyle is not specified, the default\
-      # value 'height="100% width="100% style="tabbody"' will be used. You need to \
-      # define a style class "tabbody" if you want to style the widget. \
+      #1. xstyle: the xforms style string.
       # The tag is always followed by several xcase tags to create a complete UI \
       # for Tabs.
       #
@@ -699,8 +849,8 @@ A rails icon and some text will be displayed on Mobio runner when you load the r
       #    end
       #  end
       #generates the following xforms in the view:
-      #   <m:tab width="100%" height="100%" style="tabbody">
-      #     <m:case id="first" label="Current Match" >
+      #   <m:tab width="100%" height="100%">
+      #     <m:case id="first" label="Current Match" style="tab">
       #       <m:output height="1ex">hello world!</m:output>
       #     </m:case>
       #     <m:case id="2nd" label="future" style="tab">
@@ -708,10 +858,10 @@ A rails icon and some text will be displayed on Mobio runner when you load the r
       #     </m:case>
       #   </m:tab>
       #
-      def tab(doc, xstyle='width="100%" height="100%" style="tabbody"')
-        @view_buffer << "<m:tab #{xstyle}>"
+      def tab(doc, xstyle='width="100%" height="100%"')
+        @view_buffer << "\n<m:tab #{xstyle}>"
         yield doc
-        @view_buffer << '</m:tab>'
+        @view_buffer << "\n</m:tab>"
       end
       #Create swtich case control, similar to Tab control but without the tab UI.
@@ -739,9 +889,9 @@ A rails icon and some text will be displayed on Mobio runner when you load the r
       #    </m:case>
       #  </m:switch>
       def switch(doc)
-        @view_buffer << "<m:switch>"
+        @view_buffer << "\n<m:switch>"
         yield doc
-        @view_buffer << '</m:switch>'
+        @view_buffer << "\n</m:switch>"
       end
       #Create a case control. This tag cannot act along. It has to be wrapped in
@@ -749,18 +899,11 @@ A rails icon and some text will be displayed on Mobio runner when you load the r
       #See the document and examples in tab and switch tag.
       #1. id: the case reference id
       #2. label: what is displayed in the tab header (only needed in tab case)
-      #3. xstyle: the xforms style string for the case (only needed in tab case).\
-      #if not defined, default style="tab" will be applied.
+      #3. xstyle: the xforms style string for the case (only needed in tab case).
       def xcase(doc, id, label=nil, xstyle=nil)
-        @view_buffer << "<m:case id=\"#{id}\" label=\"#{label}\""
-        if xstyle
-          @view_buffer << " #{xstyle}"
-        else
-          @view_buffer << ' style="tab"'
-        end
-        @view_buffer << '>'
+        @view_buffer << "\n<m:case id=\"#{id}\" label=\"#{label}\" #{xstyle}>"
         yield doc
-        @view_buffer << '</m:case>'
+        @view_buffer << "\n</m:case>"
       end
       #Create a softkey menu.
@@ -804,24 +947,24 @@ A rails icon and some text will be displayed on Mobio runner when you load the r
       #   <m:show-popup refid="menu1" ev:event="DOMActivate" />
       #  </m:softkey>
       #
-      #  <m:menu id="menu1" height="0" width="40%" style="popup-menu">
-      #   <m:hstack height="1ex" style="title"><m:icon>jar://img/option.png</m:icon>
-      #     <m:output style="option">Options</m:output>
+      #  <m:menu id="menu1" height="0" width="40%">
+      #   <m:hstack height="1ex"><m:icon>jar://img/option.png</m:icon>
+      #     <m:output>Options</m:output>
       #   </m:hstack>
-      #   <m:itemlist height="0" style="menu">
-      #     <m:item style="optionmenu" height="1ex" accesskey="1">
-      #       <m:output style="label">move1</m:output>
+      #   <m:itemlist height="0">
+      #     <m:item height="1ex" accesskey="1">
+      #       <m:output>move1</m:output>
       #       <xf:load resource="foo1.xml" ev:event="DOMActivate"/>
       #     </m:item>
-      #     <m:item style="optionmenu" height="1ex" accesskey="2">
-      #       <m:output style="label">move2</m:output>
+      #     <m:item height="1ex" accesskey="2">
+      #       <m:output>move2</m:output>
       #       <xf:load resource="foo2.xml" ev:event="DOMActivate"/>
       #     </m:item>
-      #     <m:item style="optionmenu" height="1ex" accesskey="3">
-      #       <m:output style="label">move3</m:output>
+      #     <m:item height="1ex" accesskey="3">
+      #       <m:output>move3</m:output>
       #     </m:item>
-      #     <m:item style="optionmenu" height="1ex" accesskey="0">
-      #       <m:output style="label">exit</m:output>
+      #     <m:item height="1ex" accesskey="0">
+      #       <m:output>exit</m:output>
       #       <m:exit ev:event="DOMActivate"/>
       #     </m:item>
       #   </m:itemlist>
@@ -833,7 +976,7 @@ A rails icon and some text will be displayed on Mobio runner when you load the r
       #   </m:softkey>
       #  </m:menu>
       def softkey(doc, position="1", label="", refid=nil, &block)
-        @view_buffer << "<m:softkey position=\"#{position}\"><m:label>#{label}</m:label>"
+        @view_buffer << "\n<m:softkey position=\"#{position}\"><m:label>#{label}</m:label>"
         # If we have a refid, setup a popup for the child menus; otherwise, execute
         # the proc to take action.
@@ -842,7 +985,7 @@ A rails icon and some text will be displayed on Mobio runner when you load the r
         else
           @view_buffer << "<m:show-popup refid=\"#{refid}\" ev:event=\"DOMActivate\" />"
         end
-        @view_buffer << '</m:softkey>'
+        @view_buffer << "\n</m:softkey>"
       end
       #A holders for a popup menu.
       #1. id: the widget's reference id. The id is used by softkey to trigger the popup\
@@ -850,27 +993,25 @@ A rails icon and some text will be displayed on Mobio runner when you load the r
       #2. label: what is displayed on the title of the popup window. Default label \
       #is "Options".
       #3. xstyle: the xforms style string for the popup window. If xstyle is not \
-      #specified, default style string "width='40%' style='popup-menu'" is used.
+      #specified, default style string "width='40%'" is used.
       #==== Examples
       #Refer to softkey examples
       def menus(doc, id, label="Options", xstyle=nil)
-        @view_buffer << "<m:menu id=\"#{id}\" height=\"0\""
+        @view_buffer << "\n<m:menu id=\"#{id}\" height=\"0\""
         if xstyle
-          @view_buffer << " #{xstyle}>"
+          @view_buffer << " #{xstyle}>" if xstyle
         else
-          @view_buffer << " width=\"40%\" style=\"popup-menu\">"
+          @view_buffer << " width=\"40%\">"
         end
-        @view_buffer << "<m:hstack height=\"1ex\" style=\"title\"><m:icon>jar://img/option.png</m:icon>"
-        @view_buffer <<  "<m:output style=\"option\">#{label}</m:output></m:hstack>"
+        @view_buffer << "\n<m:hstack height=\"1ex\" style=\"title\"><m:icon>jar://img/option.png</m:icon>"
+        @view_buffer <<  "\n<m:output style=\"option\">#{label}</m:output></m:hstack>"
         @accesskey=0
-        @view_buffer << "<m:itemlist height=\"0\" style=\"menu\"> "
+        @view_buffer << "\n<m:itemlist height=\"0\" style=\"menu\"> "
         yield doc
-        @view_buffer << "</m:itemlist>"
-        @view_buffer << "<m:softkey position=\"3\"/>
-          <m:softkey position=\"1\"><m:hide-popup ev:event=\"DOMActivate\" refid=\"#{id}\" />
-          <m:label>Close</m:label></m:softkey></m:menu>"
+        @view_buffer << "\n</m:itemlist>"
+        @view_buffer << "\n<m:softkey position=\"3\"/>\n<m:softkey position=\"1\">\n\t<m:hide-popup ev:event=\"DOMActivate\" refid=\"#{id}\" />\n\t<m:label>Close</m:label>\n</m:softkey>\n</m:menu>"
       end
@@ -879,28 +1020,23 @@ A rails icon and some text will be displayed on Mobio runner when you load the r
       #is "Options".
       #2. accesskey: A short cut key (0-9) that is assigned to this menu item. If \
       #not specified, it is asssinged a number sequentially.
-      #3. xstyle: the xforms style string for the menu item. If xstyle is not \
-      #specified, default style string "style='optionmenu'" is used.
+      #3. xstyle: the xforms style string for the menu item.
       #==== Examples
       #Refer to softkey examples
       def menu(doc, label, accesskey=nil, xstyle=nil, &block)
-        @view_buffer << "<m:item height=\"1ex\" accesskey=\""
+        @view_buffer << "\n<m:item height=\"1ex\" accesskey=\""
         if accesskey
           @view_buffer << accesskey
         else
           @view_buffer << "#{@accesskey+=1}"
         end
+        @view_buffer << " style=\"#{xstyle}\"" if xstyle
         @view_buffer << "\">"
-        if xstyle
-          @view_buffer << " style=\"#{xstyle}\""
-        else
-          @view_buffer << " style=\"optionmenu\""
-        end
-        @view_buffer << "<m:output style=\"label\">" << label << "</m:output>"
+        @view_buffer << "\n<m:output style=\"label\">" << label << "</m:output>"
         if block
           yield doc
         end
-        @view_buffer << "</m:item>"
+        @view_buffer << "\n</m:item>"
       end
       #Create <xf:load> control to do a HTTP get for a new form. Default event
@@ -918,7 +1054,7 @@ A rails icon and some text will be displayed on Mobio runner when you load the r
       #  </m:softkey>
       #
       def load_tag(doc, resource)
-        @view_buffer << "<xf:load resource=\"#{resource}\" ev:event=\"DOMActivate\"/>"
+        @view_buffer << "\n<xf:load resource=\"#{resource}\" ev:event=\"DOMActivate\"/>"
       end
       #Create syscall control. Refer to mobio client user manual for details usage
@@ -991,14 +1127,14 @@ A rails icon and some text will be displayed on Mobio runner when you load the r
       #         <m:param name="ringtone" ref="instance('store')/ringtone"/>
       #       </m:syscall>
       #     </m:button>
-     def syscall(doc, name, params={})
-        @view_buffer << "<m:syscall name=\"#{name}\" ev:event=\"DOMActivate\">"
+      def syscall(doc, name, params={})
+        @view_buffer << "\n<m:syscall name=\"#{name}\" ev:event=\"DOMActivate\">"
         if not params.nil?
           params.keys.each do |x|
-            @view_buffer << "<m:param name=\"#{x}\" ref=\"#{params[x.to_sym]}\"/>"
+            @view_buffer << "\n\t<m:param name=\"#{x}\" ref=\"#{params[x.to_sym]}\"/>"
           end
         end
-        @view_buffer << '</m:syscall>'
+        @view_buffer << "\n</m:syscall>"
       end
       #Generate a click2call syscall control to a phone number
@@ -1016,7 +1152,7 @@ A rails icon and some text will be displayed on Mobio runner when you load the r
       #         <m:param name="address">tel:4085551212</m:param>
       #       </m:syscall>
       def click2call(doc, phone)
-        @view_buffer << "<m:syscall name=\"click2call\" ev:event=\"DOMActivate\"><m:param name=\"address\">tel:#{phone}</m:param></m:syscall>"
+        @view_buffer << "\n<m:syscall name=\"click2call\" ev:event=\"DOMActivate\">\n\t<m:param name=\"address\">tel:#{phone}</m:param>\n</m:syscall>"
       end
       #Create Action control. Default event is "DOMActivate" if event argument is
@@ -1037,9 +1173,9 @@ A rails icon and some text will be displayed on Mobio runner when you load the r
       #     </xf:action>
       #
       def action_tag(doc, event="DOMActivate")
-        @view_buffer << "<xf:action ev:event=\"#{event}\">"
+        @view_buffer << "\n<xf:action ev:event=\"#{event}\">"
         yield doc
-        @view_buffer << '</xf:action>'
+        @view_buffer << "\n</xf:action>"
       end
       #Create exit control to exit the client.
       #==== Examples
@@ -1052,7 +1188,7 @@ A rails icon and some text will be displayed on Mobio runner when you load the r
       #       <m:exit ev:event="DOMActivate"/>
       #     </m:softkey>
       def exit_tag(doc)
-        @view_buffer << "<m:exit ev:event=\"DOMActivate\"/>"
+        @view_buffer << "\n<m:exit ev:event=\"DOMActivate\"/>"
       end
       #Create back control to go back to previous page.
@@ -1066,7 +1202,7 @@ A rails icon and some text will be displayed on Mobio runner when you load the r
       #       <m:back ev:event="DOMActivate"/>
       #     </m:softkey>
       def back_tag(doc)
-        @view_buffer << "<m:back ev:event=\"DOMActivate\"/>"
+        @view_buffer << "\n<m:back ev:event=\"DOMActivate\"/>"
       end
       #Create toggle control
       #1. name: the toggle case name, default is "main" if not defined.
@@ -1084,7 +1220,7 @@ A rails icon and some text will be displayed on Mobio runner when you load the r
       #     <xf:toggle case="view" ev:event="DOMActivate"/>
       #
       def toggle_tag(doc, name="main")
-        @view_buffer << "<xf:toggle case=\"#{name}\" ev:event=\"DOMActivate\"/>"
+        @view_buffer << "\n<xf:toggle case=\"#{name}\" ev:event=\"DOMActivate\"/>"
       end
       #Override builder method_missing method to send output to model buffer so we
@@ -1174,7 +1310,7 @@ A rails icon and some text will be displayed on Mobio runner when you load the r
       # Put some default styles if user doesn't specify any
       def basic_styles
         #@model_buffer << "<m:style xmlns=\"http://www.mobio.com/ext\">"
-         # took out all basic styles because client has provided a default style
+        # took out all basic styles because client has provided a default style
         #@model_buffer << "</m:style>"
       end