-
Notifications
You must be signed in to change notification settings - Fork 237
/
bb-css.txt
209 lines (132 loc) · 9.27 KB
/
bb-css.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
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.