Skip to content

Commit

Permalink
latest round of docs
Browse files Browse the repository at this point in the history
  • Loading branch information
@larsburgess
larsburgess committed Jan 13, 2011
1 parent 9ed87d7 commit d6e6edb
Show file tree
Hide file tree
Showing 19 changed files with 2,397 additions and 566 deletions.
32 changes: 10 additions & 22 deletions docs/rhodes/application.txt
View file
@@ -1,7 +1,7 @@
# Rhodes Application

## App structure
The Rhodes application generator generates a basic application from the "rhodes app" option. It will generate subdirectories and controller and template files when specifying a model and actions. Please refer to the [Rhodes generator](rhodes_generator) documentation for more detailed information about the Rhodes directory structure.
The Rhodes application generator generates a basic application from the "rhodes app" option. It will generate subdirectories and controller and template files when specifying a model and actions. Please refer to the [Rhodes generator](generator) documentation for more detailed information about the Rhodes directory structure.

### Example Directory Structure
As an example, /sugar could be the root folder for an application that provides mobile access to SugarCRM. The app's root directory will contain a few .erb files, depending on the app's functionality. At the very least there will be an index.erb file that serves as the default landing page. This default landing page will typically have links to the controllers for some of the data models, and is not associated with any specific controller. In case the application needs a default landing page associated with a controller, it is recommended to create a model/controller/view folder and use an action on this controller as a default start path. To do that, edit the start_path property in the [Configuration]() framework configuration file.
Expand Down Expand Up @@ -61,7 +61,7 @@ Each controller action usually associated with a View template. The .erb files m
* show.erb - shows the object's attribute values
* new.erb - creates a new object

These files are all created by the [rhodes generator](rhodes_generator). Inside the template, any valid HTML, JavaScript, and Ruby can be used, with Ruby code enclosed in <% and %> tags. See more information about ERB [here](http://www.ruby-doc.org/stdlib/libdoc/erb/rdoc/).
These files are all created by the [rhodes generator](generator). Inside the template, any valid HTML, JavaScript, and Ruby can be used, with Ruby code enclosed in <% and %> tags. See more information about ERB [here](http://www.ruby-doc.org/stdlib/libdoc/erb/rdoc/).

To send View to the browser, use render method in your controller. For example, to render list.erb, make following call in your controller:

Expand Down Expand Up @@ -112,26 +112,6 @@ Method on_config_conflicts may be called after application was upgraded. If appl
# puts "on_config_conflicts: #{conflicts}"
end

## View Layouts

Rhodes supports a layout mechanism based on ERB templates. The default layout template is called "layout.erb" and is located in the application root folder. Unless overridden, this layout is rendered on all non-Ajax requests.

### Customizing Layouts

If you would like to override or customize layout behavior, you can call the render function with the following parameters:

:::ruby
render :action => 'index', :layout => 'mycustomlayout', :use_layout_on_ajax => false

The first argument is the action you would like to render. Next is the (optional) layout name, which assumes the application root as a base directory. In the above example, Rhodes would look for a file called "mycustomlayout.erb" in the application root directory (you also may use :layout => false to disable the use of a layout template). The use_layout_on_ajax argument tells Rhodes whether or not to use the layout on Ajax calls (default is false).

You can call the layout method on the controller to overwrite the default layout name:

:::ruby
layout :mycustomlayout

This will force the render call to use mycustomlayout.erb in place of the default layout file for all actions of this controller.

## Application Helpers
Few helper methods defined as part of the Rhodes framework. There are just a few of them because Rhodes framework designed for mobile environment where size is still of some concern and we tried to keep framework as tight as possible.

Expand Down Expand Up @@ -212,6 +192,14 @@ For example, if the application name or model are not specified in the call para
url_for :action => :show, :id => '{12}', :fragment => "an-anchor"
==> /app/model/{12}/show#an-anchor

## Error handlers(400,500)

Rhodes can display the following error pages: app\E400.erb and app\E500.erb

* error 400 occurs when there's a Rho::RecordNotFound exception (for example, when you search for a non-existent objectID)
* error 500 occurs for any other unhanded exception

To get exception object use $! or Rho::RHO.current_exception

## Per Platform Files

Expand Down
209 changes: 209 additions & 0 deletions docs/rhodes/bb-css.txt
View file
@@ -0,0 +1,209 @@
# Blackberry HTML And CSS

## Introduction
The BlackBerry Browser version 4.2 - the version available to native BlackBerry applications - has extremely limited support for modern css. Most notably, several key styles that are used in the standard views (like divs with floats) are not supported in the BlackBerry browser.

In order to take advantage of the features found in the modern browsers on other supported devices, it is necessary to provide alternate view files with a structure that mitigates BlackBerry's limited support for modern css styles. Instead, table-based view files are loaded when Rhodes applications are run in the BlackBerry device.

View files customized for the BlackBerry are found in the same directory as their standard counterparts, and can be distinguished from standard view files by the replacement of the standard .erb extension with '.bb.erb'. In order to load at runtime, these view files must have the same name as their standard counterparts.

As with the other platforms, the default styles of the BlackBerry stylesheet can be found in the <code>pageTitle</code>, <code>toolbar</code> and <code>content</code> divs.

If you wish to include additional styles in your BlackBerry views, you may wish to refer to the [BlackBerry Browser Version 4.2 Content Developer Guide](http://docs.blackberry.com/en/developers/deliverables/1143/browser_devguide.pdf)


## HTML Structure

### pageTitle (\<div id="pageTitle"\>)

The pageTitle div contains the title of the current page, wrapped in an h1 tag. The page title will be displayed at the top of each application view.

:::html
<div id="pageTitle">
<h1>Things</h1>
</div>


### toolbar (\<div id="toolbar"\>)

The toolbar div contains contains interaction elements that allow users to perform actions and navigate through the application. On the BlackBerry, these elements are styled as a series of inline links.

:::html
<div id="toolbar">
<%= link_to "Back", :action => :index %>
<%= link_to "Edit", :action => :edit, :id => @uiformdemo.object %>
</div>

The toolbar div is displayed directly below the pageTitle div.

### Content (\<div id="content"\>)

As in standard smartphones, lists, forms, and other content must be placed inside the content div in order to make use of the styles contained in the generated stylesheets.

#### Lists

Simple lists of items or links can be displayed on the BlackBerry.

:::html
<ul>
<li><%= url_for :controller => :Product %></li>
<li><%= url_for :controller => :Inventory %></li>
<li><%= url_for :controller => :Location %></li>
<li><%= url_for :controller => :Purchase %></li>
</ul>


Examples can be found in the generated application and model index files.

#### Tables

Any content that requires precise alignment of containers should be placed in tables.

BlackBerry Browser 4.2 does not support defining table data cell widths through css. If you wish to maintain evenly-spaced columns throughout your form, you must manually define the width of one column in every row. Typically, setting the width of the label-containing cell to 125 (width="125") provides sufficient width for a descriptive label without compromising the space available for user input.

Examples of tables with a defined width can be found in generated model new.bb.erb files. Examples of tables with no width defined can be seen in generated model show.bb.erb files.


## Forms

### Creating a custom "New" Form for BlackBerry

You can create native-styled forms by organizing form fields in one or more tables inside a view's "content" div.

Include a form tag inside the \<div id="content"\> tag. The form should use the post method to submit to the current controller's "create" action.

:::html
<form method="POST" action="<%= url_for :action => :create %>">
</form>


Add a \<table\> tag inside your form. To break your fields into multiple groupings, include one \<table\> tag to contain each group as described above.<br/>
**NOTE: to append a label to a group of fields, include the label inside a \<h2 class="groupTitle"\> tag immediately before the table containing those fields. **


Add one \<tr\> tag inside the \<table\> tag for each input field/field label. You must adhere to the syntax found in the examples below to access the appropriate styles for the BlackBerry.<br/>
**NOTE: each checkbox and radio button must be contained inside its own row. Further discussion of the formatting can be found later in this document. **


To include a "submit" button, immediately below the last closing \</table\> tag and immediately above the closing \</form\> tag.
**NOTE: the button should ''not'' be contained inside an \<tr\> tag. **

:::ruby
<input type="submit" value="Create" />


### Creating a custom "Edit" Form for BlackBerry

You can create native-styled forms by organizing form fields in one or more tables inside a view's "content" div.


Include a form tag inside the \<div id="content"\> tag. The form should use the post method to submit to the current controller's "create" or "update" actions.

:::html
<form method="POST" action="<%= url_for :action => : update %>">
</form>

Add a \<table\> tag inside your form. To break your fields into multiple groupings, include one \<table\> tag to contain each group as described above.<br/>
**NOTE: to append a label to a group of fields, include the label inside a \<h2 class="groupTitle"\> tag immediately before the table containing those fields. **


When creating an edit form, it should include a hidden field that contains the id of the object being edited.

:::html
<input type="hidden" name="id" value="<%= @model_name.object %>"/>


Add one \<tr\> tag inside the \<table\> tag for each input field/field label. You must adhere to the syntax found in the examples below to access the appropriate styles for the BlackBerry.<br/>
**NOTE: each checkbox and radio button must be contained inside its own row. Further discussion of the formatting can be found later in this document. **


To include a "submit" button, immediately below the last closing <nowiki></table></nowiki> tag and immediately above the closing <nowiki></form></nowiki> tag.
**NOTE: the button should ''not'' be contained inside an <nowiki><tr></nowiki> tag. **

:::html
<input type="submit" value="Update" />

## Form elements

Each form element will take up a full table row. Note: each checkbox and radio button will need to be contained inside its own list item.

BlackBerry Browser 4.2 does not support defining table data cell widths through css. If you wish to maintain evenly-spaced columns throughout your form, you must manually define the width of one column in every row. Typically, setting the width of the label-containing cell to 125 (width="125") provides sufficient width for a descriptive label without compromising the space available for user input.

### Text fields

:::html
<tr>
<td width="125">Textbox1: </td>
<td><input type="text" name="uiformdemo[textbox1]"/></td>
</tr>


### Checkboxes/Switches

:::html
<tr>
<td width="125">Checkbox1: </td>
<td><input type="text" name="uiformdemo[checkbox1]"/></td>
</tr>

### Radio Buttons

:::html
<h2 class="groupTitle">Radio Button</h2>
<table>
<tr>
<td width="125">Radiobutton1: </td>
<td><input type="text" name="uiformdemo[radiobutton]" value="radiobutton1" /></td>
</tr>

<tr>
<td width="125">Radiobutton2: </td>
<td><input type="text" name="uiformdemo[radiobutton]" value="radiobutton2" /></td>
</tr>

<tr>
<td width="125">Radiobutton3: </td>
<td><input type="text" name="uiformdemo[radiobutton]" value="radiobutton3" /></td>
</tr>
</table>

### Select boxes

:::html
<h2 class="groupTitle">Select Box</h2>
<table>
<tr>
<td width="125">Select device</td>
<td>
<select name="uiformdemo[selectbox]">
<option selected>Please select</option>
<option value="apple">iPhone</option>
<option value="android">Android</option>
<option value="blackberry">BlackBerry</option>
<option value="winmo">Windows Mobile</option>
</select>
</td>
</tr>
</table

### Text areas

Each textarea tag must include attributes for the number of rows and columns. The recommended values for rows and columns can be found below. Additionally, each textarea tag must have both an opening \<textarea\> and closing \</textarea\> tag: self-closing textarea tags will not be displayed properly in your application.


:::html
<tr>
<td width="125">Textarea: </td>
<td><textarea name="uiformdemo[textarea]" rows="5" cols="30"></textarea></td>
</tr>

### Buttons

Buttons involved in form submission should be created as input tags, type submit. Buttons should be placed directly between the last closing \</table\> tag and the closing \</form\> tag, and should not be contained inside an \<table\>,\<tr\>, or \<td\> tag.

Links used to perform actions related to the form but not involved in form submission (e.g., Delete, Cancel) should be located in the top toolbar instead.

:::html
<input type="submit" class="standardButton" value="Create"/>

\<button\> elements are not supported on the BlackBerry platforms.

0 comments on commit d6e6edb

Please sign in to comment.