Howto: make your own app
- Home
- Howto: quick start
- Howto: make your own app
- Howto: more advanced markups
- Howto: configure with a database
- Howto: deploy on Heroku.com
- Howto: localize messages
- Howto: serve static files
You can make a new app by simply putting “index.html” in a new directory under bike/skin/. This page gives you a basic guidance on composing the index.html with a bit of special classes and tags.
index.html should include at least one “app” block. An app block is a HTML block tag with a class indicating its workflow:
| class | workflow description |
|---|---|
| app-blog | Only admin or a member of the group can post, Everybody can read |
| app-contact | Everybody can post, Only admin or a member of the group can read |
| app-forum | Everybody who logged in can read and post |
For example, index.html of a typical contact form will look like:
<html> ... <ul id="main" class="app-contact"> <li>(the model goes here)</li> </ul> ... </html>
The <ul> is the app, which has a workflow “app-contact”.
“model” blocks reside in app blocks, define fields of the items which will be created / read / updated.
By default, everything in the app block is regarded as a model block.
<ul class="app-forum"> <li>$(name = text)</li> </ul>
Here, the whole <li> block is the model block. When the app is loaded with items, it will look like:
<ul class="app-forum"> <li>frank</li> <li>carl</li> ... </ul>
Alternatively, you can indicate which part inside the app block is the model by appending “model” class to it.
<table class="app-forum"> <tr><th>This is not a part of the model.</th></tr> <tr class="model"><td>$(name = text)</td></tr> </table>
When the app is loaded, it will look like:
<table class="app-forum"> <tr><th>This is not a part of the model.</th></tr> <tr class="model"><td>frank</td></tr> <tr class="model"><td>carl</td></tr> ... </table>
Notice the first <tr> is not repeated, as it is not included in the model (“model” class).
Field tags define each fields inside a model block.
<table class="app-forum">
<tr>
<td>$(name = text 1..32)</td>
<td>$(gender = radio male,female mandatory)</td>
<td>$(country = select US,GB,JP)</td>
<td>$(comment = textarea 50*10 ..4096)</td>
</tr>
</table>
Here, we defined four fields (“name”, “gender”, “country” and “comment”) inside the model. They are rendered as an form element or a representation of the current value according to the given action.
$(FIELD-NAME = ELEMENT-TYPE [OPTION]*)
FIELD-NAME should be unique in the current model block. ELEMENT-TYPE should be one of the following:
- text
- textarea
- textarea-pre
- textarea-wiki
- checkbox
- file
- img
- radio
- select
For example,
$(foo = text 8 1..16)
indicates:
- the name of the field is “foo”
- the field is
<input type="text" ... /> - the field size is 8.
<input name="foo" type="text" size="8" ... /> - 1 character at minimum (thus it is mandatory)
- 16 character at maximum
You get the idea.
SIZE
text, file and img can take a numeric option as their size attribute.
$(foo = text 12)
MIN..MAX
text, textarea (and its brothers), file and img can take a range option. It defines the minimum / maximum size of field values.
It act a bit different on checkbox, radio and select. Instead of the minimum / maximum, it defines the numeric options. For example,
$(bar = select 1..3)
will be:
<select name="bar"> <option>1</option> <option>2</option> <option>3</option> </select>
MIN*MAX
textarea (and its brothers) and img can take a dimension option. On textareas, it define cols and rows. On imgs, it defines width and height of the thumbnail on pixels.
OPTION, OPTION, OPTION ...
“options” option can be used on checkbox, radio and select.
$(baz = checkbox foo, bar, "you should quote the option with spaces")
:DEFAULT
This syntax is valid for text, textarea (and its brothers), and select.
$(foo = text :hello)
The field will be loaded with “hello” by default.
checkbox and radio can take multiple values as the default. The syntax is:
$(qux = radio 1..5 2;3;5)
The radio buttons will be checked on “2”, “3” and “5” by default.
http://github.com/afunai/bike/blob/master/skel/skin/examples/blog/index.html
http://github.com/afunai/bike/blob/master/skel/skin/examples/contact/index.html
http://github.com/afunai/bike/blob/master/skel/skin/examples/forum/index.html
Various widgets such as page navigation, links to create / update items or directory crumbs can be included in index.html. A widget looks like a field tag, but is pre-defined. Plus, you can use them outside the app block.
<ul id="main" class="app-blog"> <li>...</li> </ul> <div class="sidebar"> $(.action_signup) $(.me) $(main.action_create) $(main.view_ym) </div>