Skip to content
Find file
Fetching contributors…
Cannot retrieve contributors at this time
executable file 3289 lines (2368 sloc) 50.9 KB
#LyX 2.0 created this file. For more info see http://www.lyx.org/
\lyxformat 413
\begin_document
\begin_header
\textclass hobo
\use_default_options true
\begin_modules
logicalmkup
\end_modules
\maintain_unincluded_children false
\language english
\language_package default
\inputencoding auto
\fontencoding global
\font_roman default
\font_sans default
\font_typewriter default
\font_default_family default
\use_non_tex_fonts false
\font_sc false
\font_osf false
\font_sf_scale 100
\font_tt_scale 100
\graphics default
\default_output_format default
\output_sync 0
\bibtex_command default
\index_command default
\float_placement H
\paperfontsize default
\spacing single
\use_hyperref true
\pdf_bookmarks true
\pdf_bookmarksnumbered false
\pdf_bookmarksopen false
\pdf_bookmarksopenlevel 1
\pdf_breaklinks false
\pdf_pdfborder false
\pdf_colorlinks true
\pdf_backref false
\pdf_pdfusetitle true
\papersize default
\use_geometry false
\use_amsmath 0
\use_esint 0
\use_mhchem 1
\use_mathdots 1
\cite_engine basic
\use_bibtopic false
\use_indices false
\paperorientation portrait
\suppress_date true
\use_refstyle 0
\boxbgcolor #e0e0e8
\index Index
\shortcut idx
\color #008000
\end_index
\secnumdepth -1
\tocdepth 2
\paragraph_separation skip
\defskip medskip
\quotes_language english
\papercolumns 1
\papersides 2
\paperpagestyle default
\tracking_changes false
\output_changes false
\html_math_output 0
\html_css_as_file 0
\html_be_strict false
\end_header
\begin_body
\begin_layout Section
Tutorial 9
\begin_inset Newline newline
\end_inset
Editing Auto-Generated Tags
\end_layout
\begin_layout Standard
In this tutorial, you will learn about Hobo’s auto-generated tags that render
views in response to controller actions.
You will find your way around Hobo’s Rapid directories and files where
the auto-generated tags are stored.
You will also learn how to make minor edits to the auto-generated tags
to prepare you for making tags from tags and redefining tags in later tutorials.
\end_layout
\begin_layout Standard
Hobo’s Rapid component handles the generation of an application’s auto-generated
tags.
The auto-generated tags are built from both HTML and Hobo’s internal library
of XML tags called the Rapid Library.
\end_layout
\begin_layout Standard
The most important lesson you will learn in this tutorial is how Hobo associates
its fundamental auto-generated tags with the four fundamental controller
actions:
\end_layout
\begin_layout Itemize
index for listing collections of records
\end_layout
\begin_layout Itemize
show for displaying a single record
\end_layout
\begin_layout Itemize
new for creating records
\end_layout
\begin_layout Itemize
edit for editing a single record
\end_layout
\begin_layout Standard
The other fundamental actions of saving new and edited records and deleting
records are embedded within these fundamental tags as links because they
do not need their own web pages.
In addition to these four main tags, there is also a navigation tag that
defines certain parts of the navigation interface.
\end_layout
\begin_layout Subsubsection*
Topics
\end_layout
\begin_layout Itemize
Edit an index page tag
\end_layout
\begin_layout Itemize
Edit a card tag
\end_layout
\begin_layout Itemize
Edit a form tag
\end_layout
\begin_layout Itemize
Edit the Navigation tags
\end_layout
\begin_layout Subsubsection*
Tutorial Application:
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
four_table
\end_layout
\end_inset
\end_layout
\begin_layout Standard
\end_layout
\begin_layout Subsubsection*
Steps
\end_layout
\begin_layout Standard
1.
\begin_inset Flex Strong
status collapsed
\begin_layout Plain Layout
Start your web server
\end_layout
\end_inset
.
We are going to continue on from Chapter 3 and use the
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
four_table
\end_layout
\end_inset
application.
If you don’t have it started, navigate to your
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
four_table
\end_layout
\end_inset
directory, in
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
tutorials/four_table
\end_layout
\end_inset
, and start the application.
\end_layout
\begin_layout Standard
\begin_inset Box Shadowbox
position "t"
hor_pos "c"
has_inner_box 1
inner_pos "t"
use_parbox 0
use_makebox 0
width "100col%"
special "none"
height "1in"
height_special "totalheight"
status open
\begin_layout LyX-Code
\backslash
four_table> rails server
\end_layout
\end_inset
\end_layout
\begin_layout Standard
You should now have a UI that looks like this:
\end_layout
\begin_layout Standard
\begin_inset Float figure
wide false
sideways false
status open
\begin_layout Plain Layout
\begin_inset Graphics
filename figures/figure115.png
width 90col%
\end_inset
\end_layout
\begin_layout Plain Layout
\begin_inset Caption
\begin_layout Plain Layout
Front page view of the Four Table application
\end_layout
\end_inset
\end_layout
\begin_layout Plain Layout
\end_layout
\end_inset
\end_layout
\begin_layout Standard
Now open your editor and navigate to the
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
views/taglibs/auto/rapid
\end_layout
\end_inset
directory:
\end_layout
\begin_layout Standard
\begin_inset Float figure
wide false
sideways false
status open
\begin_layout Plain Layout
\begin_inset Graphics
filename figures/figure116.png
width 90col%
\end_inset
\end_layout
\begin_layout Plain Layout
\begin_inset Caption
\begin_layout Plain Layout
Folder view of the rapid DRYML files
\end_layout
\end_inset
\end_layout
\begin_layout Plain Layout
\end_layout
\end_inset
\end_layout
\begin_layout Standard
Take a look at this directory structure.
Focus on the files in the
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
views/taglibs/auto/rapid
\end_layout
\end_inset
directory.
The Rapid auto-generated tags are stored in these files.
Hobo updates the three Rapid directory files,
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
pages.dryml
\end_layout
\end_inset
,
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
forms.dryml
\end_layout
\end_inset
and
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
cards.dryml
\end_layout
\end_inset
every time you run a hobo g migration.
Don’t edit these files because Hobo will overwrite them.
You can copy and paste pieces, and therefore override them, with code
placed in either the
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
application.dryml
\end_layout
\end_inset
file or in a template file in a view directory named for a specific model,
e.g.,
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
views/recipes
\end_layout
\end_inset
.
This will be explained below in this tutorial.
\end_layout
\begin_layout Standard
2.
\begin_inset Flex Strong
status collapsed
\begin_layout Plain Layout
Familiarize yourself with the Rapid auto-generated files
\end_layout
\end_inset
.
Let’s look at the
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
pages.dryml
\end_layout
\end_inset
file first.
Open up the
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
views/taglibs/auto/rapid/pages.dryml
\end_layout
\end_inset
file.
You will see a series of tag definitions.
Look through the file.
Notice that there is a
\begin_inset Flex Emph
status collapsed
\begin_layout Plain Layout
Main Navigation
\end_layout
\end_inset
section, a
\begin_inset Flex Emph
status collapsed
\begin_layout Plain Layout
Recipes
\end_layout
\end_inset
section and a
\begin_inset Flex Emph
status collapsed
\begin_layout Plain Layout
Users
\end_layout
\end_inset
section.
There are also sections related to the app’s other models.
\end_layout
\begin_layout Standard
We will be talking about the
\begin_inset Flex Emph
status collapsed
\begin_layout Plain Layout
Recipes
\end_layout
\end_inset
and
\begin_inset Flex Emph
status collapsed
\begin_layout Plain Layout
Navigation
\end_layout
\end_inset
section in this tutorial.
\end_layout
\begin_layout Standard
Open up the
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
forms.dryml
\end_layout
\end_inset
and
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
cards.dryml
\end_layout
\end_inset
files and page through them.
You will see similar structures.
You will see a section describing
\begin_inset Flex Emph
status collapsed
\begin_layout Plain Layout
Recipes
\end_layout
\end_inset
and the other models we have built so far.
\end_layout
\begin_layout Standard
Now that you have familiarized yourself with the three Rapid auto-generated
tag files, go back to the
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
pages.dryml
\end_layout
\end_inset
file.
\end_layout
\begin_layout Standard
3.
\begin_inset Flex Strong
status collapsed
\begin_layout Plain Layout
Understanding the
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
pages.dryml
\end_layout
\end_inset
file
\end_layout
\end_inset
.
We are not going to explain every detail about what you see in
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
pages.dryml
\end_layout
\end_inset
at this point.
In subsequent tutorials in this chapter, you will learn most of the key
points.
The goal in this tutorial is to get some familiarity with the tag structures
and how Hobo uses and overrides them.
\end_layout
\begin_layout Standard
Now focus in on the
\begin_inset Flex Emph
status collapsed
\begin_layout Plain Layout
Recipes
\end_layout
\end_inset
section.
You will see four tag definitions: <index-page>, <show-page>, <new-page>
and <edit-page>:
\end_layout
\begin_layout Standard
\begin_inset Box Shadowbox
position "t"
hor_pos "c"
has_inner_box 1
inner_pos "t"
use_parbox 0
use_makebox 0
width "100col%"
special "none"
height "1in"
height_special "totalheight"
status open
\begin_layout Code
<!-- ====== Recipe Pages ====== -->
\end_layout
\begin_layout Code
<def tag="index-page" for="Recipe"> .
.
.
\end_layout
\begin_layout Code
</def>
\end_layout
\begin_layout Code
<def tag="new-page" for="Recipe"> .
.
.
\end_layout
\begin_layout Code
</def>
\end_layout
\begin_layout Code
<def tag="show-page" for="Recipe"> .
.
.
\end_layout
\begin_layout Code
</def>
\end_layout
\begin_layout Code
<def tag="edit-page" for="Recipe"> .
.
.
\end_layout
\begin_layout Code
</def>
\end_layout
\end_inset
\end_layout
\begin_layout Standard
The following table explains what each of these does.
Rapid automatically creates this set of four tags for each model in your
application.
\end_layout
\begin_layout Standard
\begin_inset Float table
wide false
sideways false
status open
\begin_layout Plain Layout
\begin_inset Tabular
<lyxtabular version="3" rows="5" columns="5">
<features tabularvalignment="middle">
<column alignment="center" valignment="top" width="22col%">
<column alignment="center" valignment="top" width="23col%">
<column alignment="center" valignment="top" width="10col%">
<column alignment="center" valignment="top" width="15col%">
<column alignment="center" valignment="top" width="30col%">
<row>
<cell alignment="center" valignment="top" topline="true" bottomline="true" leftline="true" usebox="none">
\begin_inset Text
\begin_layout Plain Layout
\begin_inset Flex Strong
status collapsed
\begin_layout Plain Layout
Tag
\end_layout
\end_inset
\end_layout
\end_inset
</cell>
<cell alignment="center" valignment="top" topline="true" bottomline="true" leftline="true" usebox="none">
\begin_inset Text
\begin_layout Plain Layout
\begin_inset Flex Strong
status collapsed
\begin_layout Plain Layout
Meaning
\end_layout
\end_inset
\end_layout
\end_inset
</cell>
<cell alignment="center" valignment="top" topline="true" bottomline="true" leftline="true" usebox="none">
\begin_inset Text
\begin_layout Plain Layout
\begin_inset Flex Strong
status collapsed
\begin_layout Plain Layout
Calls
\end_layout
\end_inset
\end_layout
\end_inset
</cell>
<cell alignment="center" valignment="top" topline="true" bottomline="true" leftline="true" usebox="none">
\begin_inset Text
\begin_layout Plain Layout
\begin_inset Flex Strong
status collapsed
\begin_layout Plain Layout
Controller Action
\end_layout
\end_inset
\end_layout
\end_inset
</cell>
<cell alignment="center" valignment="top" topline="true" bottomline="true" leftline="true" rightline="true" usebox="none">
\begin_inset Text
\begin_layout Plain Layout
\begin_inset Flex Strong
status collapsed
\begin_layout Plain Layout
Route(URL)
\end_layout
\end_inset
\end_layout
\end_inset
</cell>
</row>
<row>
<cell alignment="center" valignment="top" topline="true" leftline="true" usebox="none">
\begin_inset Text
\begin_layout Plain Layout
<index-page>
\end_layout
\end_inset
</cell>
<cell alignment="center" valignment="top" topline="true" leftline="true" usebox="none">
\begin_inset Text
\begin_layout Plain Layout
renders a list of model records
\end_layout
\end_inset
</cell>
<cell alignment="center" valignment="top" topline="true" leftline="true" usebox="none">
\begin_inset Text
\begin_layout Plain Layout
Cards
\end_layout
\end_inset
</cell>
<cell alignment="center" valignment="top" topline="true" leftline="true" usebox="none">
\begin_inset Text
\begin_layout Plain Layout
index
\end_layout
\end_inset
</cell>
<cell alignment="center" valignment="top" topline="true" leftline="true" rightline="true" usebox="none">
\begin_inset Text
\begin_layout Plain Layout
*/model_name(plural)
\end_layout
\end_inset
</cell>
</row>
<row>
<cell alignment="center" valignment="top" topline="true" leftline="true" usebox="none">
\begin_inset Text
\begin_layout Plain Layout
<new-page>
\end_layout
\end_inset
</cell>
<cell alignment="center" valignment="top" topline="true" leftline="true" usebox="none">
\begin_inset Text
\begin_layout Plain Layout
renders a data entry for a new record
\end_layout
\end_inset
</cell>
<cell alignment="center" valignment="top" topline="true" leftline="true" usebox="none">
\begin_inset Text
\begin_layout Plain Layout
Forms
\end_layout
\end_inset
</cell>
<cell alignment="center" valignment="top" topline="true" leftline="true" usebox="none">
\begin_inset Text
\begin_layout Plain Layout
new
\end_layout
\end_inset
</cell>
<cell alignment="center" valignment="top" topline="true" leftline="true" rightline="true" usebox="none">
\begin_inset Text
\begin_layout Plain Layout
*/model_name/new
\end_layout
\end_inset
</cell>
</row>
<row>
<cell alignment="center" valignment="top" topline="true" leftline="true" usebox="none">
\begin_inset Text
\begin_layout Plain Layout
<show-page>
\end_layout
\end_inset
</cell>
<cell alignment="center" valignment="top" topline="true" leftline="true" usebox="none">
\begin_inset Text
\begin_layout Plain Layout
renders a single record
\end_layout
\end_inset
</cell>
<cell alignment="center" valignment="top" topline="true" leftline="true" usebox="none">
\begin_inset Text
\begin_layout Plain Layout
None
\end_layout
\end_inset
</cell>
<cell alignment="center" valignment="top" topline="true" leftline="true" usebox="none">
\begin_inset Text
\begin_layout Plain Layout
show
\end_layout
\end_inset
</cell>
<cell alignment="center" valignment="top" topline="true" leftline="true" rightline="true" usebox="none">
\begin_inset Text
\begin_layout Plain Layout
*/model_name/ID-record_name
\end_layout
\end_inset
</cell>
</row>
<row>
<cell alignment="center" valignment="top" topline="true" bottomline="true" leftline="true" usebox="none">
\begin_inset Text
\begin_layout Plain Layout
<edit-page>
\end_layout
\end_inset
</cell>
<cell alignment="center" valignment="top" topline="true" bottomline="true" leftline="true" usebox="none">
\begin_inset Text
\begin_layout Plain Layout
renders a data entry for an existing record
\end_layout
\end_inset
</cell>
<cell alignment="center" valignment="top" topline="true" bottomline="true" leftline="true" usebox="none">
\begin_inset Text
\begin_layout Plain Layout
Forms
\end_layout
\end_inset
</cell>
<cell alignment="center" valignment="top" topline="true" bottomline="true" leftline="true" usebox="none">
\begin_inset Text
\begin_layout Plain Layout
edit
\end_layout
\end_inset
</cell>
<cell alignment="center" valignment="top" topline="true" bottomline="true" leftline="true" rightline="true" usebox="none">
\begin_inset Text
\begin_layout Plain Layout
*/model_name/edit/ID-record_name
\end_layout
\end_inset
</cell>
</row>
</lyxtabular>
\end_inset
\end_layout
\begin_layout Plain Layout
\end_layout
\begin_layout Plain Layout
\begin_inset Caption
\begin_layout Plain Layout
Hobo Page Action Tag Definitions
\end_layout
\end_inset
\end_layout
\end_inset
\end_layout
\begin_layout Standard
You cannot see it explicitly in the
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
pages.dryml
\end_layout
\end_inset
file, but the <index-page> tag calls the Recipe <card> tag.
We will demonstrate this by editing them shortly.
The <new-page> and <edit-page> tags call the Recipe <form> tags.
\end_layout
\begin_layout Standard
These auto-generated tags, each of the four tags above as well as the <form>
and <card> tags, are built from tags defined in the Rapid library of tags.
The four
\begin_inset Flex Emph
status collapsed
\begin_layout Plain Layout
page
\end_layout
\end_inset
tags are built from the Rapid <page> tag, the form tag from the Rapid <form>
tag and the card tag from the Rapid <card> tag.
\end_layout
\begin_layout Standard
You might be confused at first because the auto-generated tags <form> and
<card> have the same names as the Rapid auto-generated tags.
What Hobo is really doing is redefining these tags and using the same tag
name in the redefined tag.
\end_layout
\begin_layout Standard
The last important point to realize is that there is a one-to-one association
between these four tags and both controller actions and their associated
routes.
Routes are the URLs related to the web pages resulting from a particular
controller action.
Hobo automatically defines the routes, although they can be user-defined
and customized too.
\end_layout
\begin_layout Standard
The controller action can be executed by navigating to the browser route
URL listed in the figure at the top of this page.
\end_layout
\begin_layout Standard
\begin_inset Box Shaded
position "t"
hor_pos "c"
has_inner_box 1
inner_pos "t"
use_parbox 0
use_makebox 0
width "100col%"
special "none"
height "1in"
height_special "totalheight"
status open
\begin_layout Description
Note: The asterisk (*) refers to the route URL for your app, which is usually
http://localhost:3000 for Ruby on Rails development setups.
\end_layout
\end_inset
\end_layout
\begin_layout Standard
4.
\begin_inset Flex Strong
status collapsed
\begin_layout Plain Layout
Edit the index page (method 1)
\end_layout
\end_inset
.
Open up the
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
pages.dryml
\end_layout
\end_inset
file and look at the
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
<index-page>
\end_layout
\end_inset
tag definition.
Here is what it looks like:
\end_layout
\begin_layout Standard
\begin_inset Float figure
wide false
sideways false
status open
\begin_layout Plain Layout
\begin_inset Graphics
filename figures/figure117.png
width 90col%
\end_inset
\end_layout
\begin_layout Plain Layout
\begin_inset Caption
\begin_layout Plain Layout
The Hobo Rapid <index-page> tag definition in the pages.dryml file
\end_layout
\end_inset
\end_layout
\begin_layout Plain Layout
\end_layout
\end_inset
\end_layout
\begin_layout Standard
You invoke the index action by clicking on a tab with a particular model
name, which is
\begin_inset Flex Emph
status collapsed
\begin_layout Plain Layout
Recipes
\end_layout
\end_inset
in this example.
Go ahead and click the Recipes tab to remind yourself where you left off
in Tutorial 6 of Chapter 3:
\end_layout
\begin_layout Standard
\begin_inset Float figure
wide false
sideways false
status open
\begin_layout Plain Layout
\begin_inset Graphics
filename figures/figure118.png
width 90col%
\end_inset
\end_layout
\begin_layout Plain Layout
\begin_inset Caption
\begin_layout Plain Layout
The Recipes Index page
\end_layout
\end_inset
\end_layout
\begin_layout Plain Layout
\end_layout
\end_inset
\end_layout
\begin_layout Standard
Note that the URL that generates the “Recipes Index” page,
\begin_inset CommandInset href
LatexCommand href
target "http://localhost:3000/recipes"
\end_inset
, has the form of an
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
index
\end_layout
\end_inset
action.
(Refer to the Hobo Page Action Tag definitions figure earlier in this tutorial.)
You can see three lines of text in the body of the tab beginning with the
‘Recipes’ title, then ‘There are 3 Recipes’, a ‘New Recipe’ hyperlink,
and finally the list of recipes.
\end_layout
\begin_layout Standard
There are three levels of overriding.
Hobo handles these by checking sequentially in three directories for the
tags or tag definitions it will use to render a view template.
\end_layout
\begin_layout Standard
The first place Hobo looks to find the information it needs to render a
view template corresponding to a particular model is the
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
/views
\end_layout
\end_inset
directory corresponding to that model.
\end_layout
\begin_layout Standard
\begin_inset Box Shaded
position "t"
hor_pos "c"
has_inner_box 1
inner_pos "t"
use_parbox 0
use_makebox 0
width "100col%"
special "none"
height "1in"
height_special "totalheight"
status open
\begin_layout Description
Note: Prior to Hobo 1.3, a view folder for each generated model was created.
This is no longer the case.
In the figure below, the categories, countries, and recipes folders were
created manually.
\end_layout
\end_inset
\end_layout
\begin_layout Standard
In this case, note that
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
/views/recipes
\end_layout
\end_inset
is empty.
\end_layout
\begin_layout Standard
\begin_inset Float figure
wide false
sideways false
status open
\begin_layout Plain Layout
\begin_inset Graphics
filename figures/figure119.png
width 90col%
\end_inset
\end_layout
\begin_layout Plain Layout
\begin_inset Caption
\begin_layout Plain Layout
View of the taglibs/auto/rapid folder
\end_layout
\end_inset
\end_layout
\begin_layout Plain Layout
\end_layout
\end_inset
\end_layout
\begin_layout Standard
The next place Hobo goes is the
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
views/taglibs/application.dryml
\end_layout
\end_inset
file.
The last place Hobo goes is the
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
views/taglibs/auto/rapid/pages.dryml
\end_layout
\end_inset
file.
\end_layout
\begin_layout Standard
You are going to put the recipe index tag definition in
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
application.dryml
\end_layout
\end_inset
causing Hobo to use level 2.
So take the code above from
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
pages.dryml
\end_layout
\end_inset
beginning with
\end_layout
\begin_layout Standard
\begin_inset Box Shadowbox
position "t"
hor_pos "c"
has_inner_box 1
inner_pos "t"
use_parbox 0
use_makebox 0
width "100col%"
special "none"
height "1in"
height_special "totalheight"
status open
\begin_layout LyX-Code
<def tag="index-page" for="Recipe">
\end_layout
\end_inset
\end_layout
\begin_layout Standard
and paste it into
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
/views/taglibs/application.dryml
\end_layout
\end_inset
file.
Paste it below the following code in
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
views/taglibs/application.dryml
\end_layout
\end_inset
file.
\end_layout
\begin_layout Standard
\begin_inset Box Shadowbox
position "t"
hor_pos "c"
has_inner_box 1
inner_pos "t"
use_parbox 0
use_makebox 0
width "100col%"
special "none"
height "1in"
height_special "totalheight"
status open
\begin_layout Code
<include src="rapid" plugin="hobo"/>
\end_layout
\begin_layout Code
\end_layout
\begin_layout Code
<include src="taglibs/auto/rapid/cards"/>
\end_layout
\begin_layout Code
<include src="taglibs/auto/rapid/pages"/>
\end_layout
\begin_layout Code
<include src="taglibs/auto/rapid/forms"/>
\end_layout
\begin_layout Code
\end_layout
\begin_layout Code
<set-theme name="clean"/>
\end_layout
\begin_layout Plain Layout
\begin_inset Flex Strong
status collapsed
\begin_layout Plain Layout
<def tag="index-page" for="Recipe">
\end_layout
\end_inset
\end_layout
\begin_layout Code
.
.
.
\end_layout
\end_inset
\end_layout
\begin_layout Standard
The line in
\begin_inset Flex Strong
status collapsed
\begin_layout Plain Layout
\begin_inset Flex Emph
status collapsed
\begin_layout Plain Layout
bold italics
\end_layout
\end_inset
\end_layout
\end_inset
above is the first line from your copied code.
\end_layout
\begin_layout Standard
\begin_inset Float figure
wide false
sideways false
status open
\begin_layout Plain Layout
\begin_inset Graphics
filename figures/figure120.png
width 90col%
\end_inset
\end_layout
\begin_layout Plain Layout
\begin_inset Caption
\begin_layout Plain Layout
Adding the definition of index-page into the application.dryml file
\end_layout
\end_inset
\end_layout
\begin_layout Plain Layout
\end_layout
\end_inset
\end_layout
\begin_layout Standard
\begin_inset Box Shaded
position "t"
hor_pos "c"
has_inner_box 1
inner_pos "t"
use_parbox 0
use_makebox 0
width "100col%"
special "none"
height "1in"
height_special "totalheight"
status open
\begin_layout Description
Note: As you learn Hobo you might get confused between tag definitions and
tags.
This is often the case because Hobo does not need you to specifically invoke
the tags that are defined in the Rapid files (
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
pages.dryml,forms.dryml
\end_layout
\end_inset
etc…) or in the
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
application.dryml
\end_layout
\end_inset
file.
If the tags have the default names “index”, “new”,” show”, or “edit”, then
Hobo creates the template on the fly.
You do not have to put tag code in a template yourself unless you do not
want to use Hobo’s default template.
\end_layout
\end_inset
\end_layout
\begin_layout Standard
First, refresh your browser to confirm that the UI has not changed.
Simply copying a tag definition from
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
pages.dryml
\end_layout
\end_inset
to
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
application.dryml
\end_layout
\end_inset
with no changes to the tag definition should not change the page rendering.
It is a good idea to double check in case you copied something wrong so
you won’t confuse a copy mistake with a coding mistake.
\end_layout
\begin_layout Standard
Let’s make a minor change to convince you that this is what is happening.
Note that the line in
\color red
\begin_inset Flex Emph
status collapsed
\begin_layout Plain Layout
\color red
red italics
\end_layout
\end_inset
\color inherit
below is what has changed.
\end_layout
\begin_layout Standard
\begin_inset Box Shadowbox
position "t"
hor_pos "c"
has_inner_box 1
inner_pos "t"
use_parbox 0
use_makebox 0
width "100col%"
special "none"
height "1in"
height_special "totalheight"
status open
\begin_layout Code
<def tag="index-page" for="Recipe">
\end_layout
\begin_layout Code
<page merge title="#{ht 'recipe.index.title',
\end_layout
\begin_layout Code
:default=>[model.model_name.human(:count=>100)] }">
\end_layout
\begin_layout Code
<body: class="index-page recipe" param/>
\end_layout
\begin_layout Code
<content: param>
\end_layout
\begin_layout Code
<header param="content-header">
\end_layout
\begin_layout Code
\color red
\begin_inset Flex Emph
status collapsed
\begin_layout Plain Layout
\color red
<h2 param="heading">
\end_layout
\end_inset
\end_layout
\begin_layout Code
\color red
\begin_inset Flex Emph
status collapsed
\begin_layout Plain Layout
\color red
My Recipes
\end_layout
\end_inset
\end_layout
\begin_layout Code
\color red
\begin_inset Flex Emph
status collapsed
\begin_layout Plain Layout
\color red
</h2>
\end_layout
\end_inset
\end_layout
\begin_layout Code
<p param="count" if>
\end_layout
\begin_layout Code
<ht key="recipe.collection.count"
\end_layout
\begin_layout Code
count="&this.size">
\end_layout
\begin_layout Code
<count summary/>
\end_layout
\begin_layout Code
</ht>
\end_layout
\begin_layout Code
</p>
\end_layout
\begin_layout Code
</header>
\end_layout
\begin_layout Code
<section param="content-body">
\end_layout
\begin_layout Code
<a action="new" to="&model" param="new-link">
\end_layout
\begin_layout Code
<ht key="recipe.actions.new">New Recipe</ht>
\end_layout
\begin_layout Code
</a>
\end_layout
\begin_layout Code
<page-nav param="top-page-nav"/>
\end_layout
\begin_layout Code
<collection param/>
\end_layout
\begin_layout Code
<page-nav param="bottom-page-nav"/>
\end_layout
\begin_layout Code
</section>
\end_layout
\begin_layout Code
</content:>
\end_layout
\begin_layout Code
</page>
\end_layout
\begin_layout Code
</def>
\end_layout
\end_inset
\end_layout
\begin_layout Standard
Now refresh your browser and you will see that Hobo has changed the template
it generated dynamically:
\end_layout
\begin_layout Standard
\begin_inset Float figure
wide false
sideways false
status open
\begin_layout Plain Layout
\begin_inset Graphics
filename figures/figure121.png
width 90col%
\end_inset
\end_layout
\begin_layout Plain Layout
\begin_inset Caption
\begin_layout Plain Layout
Page view of "My Recipes" after modifying the <index-page> tag
\end_layout
\end_inset
\end_layout
\begin_layout Plain Layout
\end_layout
\end_inset
\end_layout
\begin_layout Standard
You should see that the first line of the page has changed from “Recipes”
to “My Recipes”.
\end_layout
\begin_layout Standard
Let us describe what happened.
\end_layout
\begin_layout Itemize
Step 1: Hobo looked for a template in the
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
views/recipes/
\end_layout
\end_inset
directory called
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
index.dryml
\end_layout
\end_inset
.
\end_layout
\begin_layout Itemize
Step 2: Since
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
views/recipes/index.dryml
\end_layout
\end_inset
did not exist, Hobo next looked in
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
views/taglib/application.dryml
\end_layout
\end_inset
where it found the tag definition for the index page.
\end_layout
\begin_layout Itemize
Step 3: Hobo used this tag definition to generate the contents of the “index”
page.
\end_layout
\begin_layout Standard
5.
\begin_inset Flex Strong
status collapsed
\begin_layout Plain Layout
Change the index page(method 2)
\end_layout
\end_inset
.
If you want to change the index page directly, you can create a new file
in the
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
views/recipes
\end_layout
\end_inset
directory called
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
index.dryml
\end_layout
\end_inset
.
\end_layout
\begin_layout Standard
We haven’t given you enough information for you to build your own
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
index.dryml
\end_layout
\end_inset
template using Hobo’s tag library yet.
We said above that Hobo will look there first for a page to render when
the index action is invoked.
\end_layout
\begin_layout Standard
So if you place an empty file here, you get a blank page rendered.
Go ahead and create a file called
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
index.dryml
\end_layout
\end_inset
in the
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
views/recipes
\end_layout
\end_inset
directory.
Confirm for yourself that you get a blank page.
\end_layout
\begin_layout Standard
Now let’s do something a little more useful.
Add the single line of code below to the
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
index.dryml
\end_layout
\end_inset
file:
\end_layout
\begin_layout Standard
\begin_inset Box Shadowbox
position "t"
hor_pos "c"
has_inner_box 1
inner_pos "t"
use_parbox 0
use_makebox 0
width "100col%"
special "none"
height "1in"
height_special "totalheight"
status open
\begin_layout LyX-Code
<index-page/>
\end_layout
\end_inset
\end_layout
\begin_layout Standard
\begin_inset Float figure
wide false
sideways false
status open
\begin_layout Plain Layout
\begin_inset Graphics
filename figures/figure122.png
width 90col%
\end_inset
\end_layout
\begin_layout Plain Layout
\begin_inset Caption
\begin_layout Plain Layout
Adding the <index-page/> tag to index.dryml
\end_layout
\end_inset
\end_layout
\begin_layout Plain Layout
\end_layout
\end_inset
\end_layout
\begin_layout Standard
\begin_inset Box Shaded
position "t"
hor_pos "c"
has_inner_box 1
inner_pos "t"
use_parbox 0
use_makebox 0
width "100col%"
special "none"
height "1in"
height_special "totalheight"
status open
\begin_layout Description
Note: The Hobo tag syntax is just like you would expect from HTML or XML.
The code
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
<index-page/>
\end_layout
\end_inset
is equivalent to
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
<index-page></index-page>
\end_layout
\end_inset
.
Watch your placement of “/”.
It was our most frequent error when we started with DRYML.
\end_layout
\end_inset
\end_layout
\begin_layout Standard
Now refresh your browser and you will see the same page rendered as in Step
4.
What has happened is that Hobo has checked in the
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
views/recipes
\end_layout
\end_inset
directory for a file called
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
index.dryml
\end_layout
\end_inset
, found one and rendered it.
When it encountered the
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
<index-page/>
\end_layout
\end_inset
tag, it first checked in
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
index.dryml
\end_layout
\end_inset
for a tag definition.
Not finding one there, it checked in application.dryml where it found one
to use in rendering the
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
<index-page/>
\end_layout
\end_inset
tag in
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
index.dryml
\end_layout
\end_inset
.
If it had not found a tag definition in
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
application.dryml
\end_layout
\end_inset
, Hobo would have gone back to
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
pages.dryml
\end_layout
\end_inset
for the default
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
<index-page>
\end_layout
\end_inset
definition.
\end_layout
\begin_layout Standard
\begin_inset Box Shaded
position "t"
hor_pos "c"
has_inner_box 1
inner_pos "t"
use_parbox 0
use_makebox 0
width "100col%"
special "none"
height "1in"
height_special "totalheight"
status open
\begin_layout Description
Note: You can put a tag definition in either a view template file or in
application.dryml but Hobo will ignore tags in application.dryml.
The application.dryml file is for tag definitions only.
\end_layout
\end_inset
\end_layout
\begin_layout Standard
6.
\begin_inset Flex Strong
status collapsed
\begin_layout Plain Layout
Edit an individual record’s view in the index page.
\end_layout
\end_inset
By now, you should have entered a couple of recipes.
Be sure to do that if you have not.
\end_layout
\begin_layout Standard
In Table 1 above, we indicated that the
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
<index-page>
\end_layout
\end_inset
tag calls
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
<card>
\end_layout
\end_inset
tags to render individual records.
We can demonstrate this process by changing a
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
<card>
\end_layout
\end_inset
tag.
Go to the
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
cards.dryml
\end_layout
\end_inset
file in the rapid directory and copy the
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
<card>
\end_layout
\end_inset
definition for recipe cards into the
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
application.dryml
\end_layout
\end_inset
file below the
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
<index-page>
\end_layout
\end_inset
definition.
Hobo will now use this version of the
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
<card>
\end_layout
\end_inset
tag when it uses the
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
<index-page>
\end_layout
\end_inset
.
\end_layout
\begin_layout Standard
\begin_inset Box Shadowbox
position "t"
hor_pos "c"
has_inner_box 1
inner_pos "t"
use_parbox 0
use_makebox 0
width "100col%"
special "none"
height "1in"
height_special "totalheight"
status open
\begin_layout Code
<def tag="card" for="Recipe">
\end_layout
\begin_layout Code
<card class="recipe" param="default" merge>
\end_layout
\begin_layout Code
<header: param>
\end_layout
\begin_layout Code
<h4 param="heading"><a><name/></a></h4>
\end_layout
\begin_layout Code
</header:>
\end_layout
\begin_layout Code
<body: param>
\end_layout
\begin_layout Code
<ht key="category.collection.count"
\end_layout
\begin_layout Code
count="&this.categories.size">
\end_layout
\begin_layout Code
<count:categories param/>
\end_layout
\begin_layout Code
</ht>
\end_layout
\begin_layout Code
</body:>
\end_layout
\begin_layout Code
</card>
\end_layout
\begin_layout Code
</def>
\end_layout
\end_inset
\end_layout
\begin_layout Standard
Again, we will not explain the detailed syntax of this tag yet.
Let’s just make a simple change (in
\color red
\begin_inset Flex Emph
status collapsed
\begin_layout Plain Layout
\color red
red italics
\end_layout
\end_inset
\color inherit
below) to demonstrate how Hobo works:
\end_layout
\begin_layout Standard
\begin_inset Box Shadowbox
position "t"
hor_pos "c"
has_inner_box 1
inner_pos "t"
use_parbox 0
use_makebox 0
width "100col%"
special "none"
height "1in"
height_special "totalheight"
status open
\begin_layout Code
<def tag="card" for="Recipe">
\end_layout
\begin_layout Code
<card class="recipe" param="default" merge>
\end_layout
\begin_layout Code
<header: param>
\end_layout
\begin_layout Code
\family typewriter
\color red
\begin_inset Flex Emph
status collapsed
\begin_layout Plain Layout
\color red
<h4 param="heading"><a><name/></a>…test</h4>
\end_layout
\end_inset
\end_layout
\begin_layout Code
</header:>
\end_layout
\begin_layout Code
<body: param>
\end_layout
\begin_layout Code
<ht key="category.collection.count"
\end_layout
\begin_layout Code
count="&this.categories.size">
\end_layout
\begin_layout Code
<count:categories param/>
\end_layout
\begin_layout Code
</ht>
\end_layout
\begin_layout Code
</body:>
\end_layout
\begin_layout Code
</card>
\end_layout
\begin_layout Code
</def>
\end_layout
\end_inset
\end_layout
\begin_layout Standard
Now refresh your browser.
Click the ‘Recipes’ tab to invoke the index action using the
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
<index-page>
\end_layout
\end_inset
tag.
\end_layout
\begin_layout Standard
\begin_inset Float figure
wide false
sideways false
status open
\begin_layout Plain Layout
\begin_inset Graphics
filename figures/figure123.png
width 90col%
\end_inset
\end_layout
\begin_layout Plain Layout
\begin_inset Caption
\begin_layout Plain Layout
How a change to the <index-page> tag affects a collection
\end_layout
\end_inset
\end_layout
\begin_layout Plain Layout
\end_layout
\end_inset
\end_layout
\begin_layout Standard
You see how each record displayed has been changed.
You didn’t need to iterate through a loop.
Iterating through all records in a collection is built in to Hobo’s tag
processing.
If you look back to Step 4 to see the
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
<index-page>
\end_layout
\end_inset
tag definition, you will see the following line:
\end_layout
\begin_layout Standard
\begin_inset Box Shadowbox
position "t"
hor_pos "c"
has_inner_box 1
inner_pos "t"
use_parbox 0
use_makebox 0
width "100col%"
special "none"
height "1in"
height_special "totalheight"
status open
\begin_layout LyX-Code
<collection param/>
\end_layout
\end_inset
\end_layout
\begin_layout Standard
It is here that the
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
<card>
\end_layout
\end_inset
tag is called.
The
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
<collection>
\end_layout
\end_inset
tag refers to a collection of records from a data model.
\end_layout
\begin_layout Standard
Now click on one of the recipe name hyperlinks, which will invoke the
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
<show-page>
\end_layout
\end_inset
tag in
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
pages.dryml
\end_layout
\end_inset
.
Since you haven’t changed this tag and since it does not use the
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
<card>
\end_layout
\end_inset
tag, you will NOT see ‘....test’ appended to recipe names as you do when Hobo
lists recipes using the
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
<index-page>
\end_layout
\end_inset
tag.
\end_layout
\begin_layout Standard
To finish up this step, remove the text ‘....test’ to keep things looking nice.
\end_layout
\begin_layout Standard
6.
\begin_inset Flex Strong
status collapsed
\begin_layout Plain Layout
Editing a form
\end_layout
\end_inset
.
To modify a form, you can do something similar to editing the
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
<card>
\end_layout
\end_inset
tag above.
In this case, the relevant page tag is the
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
<new-page>
\end_layout
\end_inset
tag in
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
pages.dryml
\end_layout
\end_inset
.
It calls the
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
<form>
\end_layout
\end_inset
tag.
You can see that in the
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
forms.dryml
\end_layout
\end_inset
file.
\end_layout
\begin_layout Standard
7.
\begin_inset Flex Strong
status collapsed
\begin_layout Plain Layout
Editing navigation tabs and their order
\end_layout
\end_inset
.
As you have seen, Hobo provides a predefined tab-based user interface.
By default, it arranges the tabs alphabetically by model.
This is probably not what you want.
You more than likely want to set up an order that makes sense for your
application.
\end_layout
\begin_layout Standard
This is readily done.
Find the
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
<main-nav>
\end_layout
\end_inset
tag definition in the
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
pages.dryml
\end_layout
\end_inset
file and copy it into
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
application.dryml
\end_layout
\end_inset
right after the
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
<app-name>
\end_layout
\end_inset
tag definition.
\end_layout
\begin_layout Standard
\begin_inset Box Shadowbox
position "t"
hor_pos "c"
has_inner_box 1
inner_pos "t"
use_parbox 0
use_makebox 0
width "100col%"
special "none"
height "1in"
height_special "totalheight"
status open
\begin_layout Code
<def tag="main-nav">
\end_layout
\begin_layout Code
<navigation class="main-nav" merge-attrs param="default">
\end_layout
\begin_layout Code
<nav-item href="#{base_url}/">Home</nav-item>
\end_layout
\begin_layout Code
<nav-item with="&Category"><ht key="category.nav_item"
\end_layout
\begin_layout Code
count="100"><model-name-human count="100"/></ht></nav-item>
\end_layout
\begin_layout Code
<nav-item with="&Country"><ht key="country.nav_item"
\end_layout
\begin_layout Code
count="100"><model-name-human count="100"/></ht></nav-item>
\end_layout
\begin_layout Code
<nav-item with="&Recipe"><ht key="recipe.nav_item"
\end_layout
\begin_layout Code
count="100"><model-name-human count="100"/></ht></nav-item>
\end_layout
\begin_layout Code
</navigation>
\end_layout
\begin_layout Code
</def>
\end_layout
\end_inset
\end_layout
\begin_layout Standard
Now let’s change the order of the tabs in your UI.
Change the order of your tabs by moving the Recipes tab up to the position
noted below in
\color red
\begin_inset Flex Emph
status collapsed
\begin_layout Plain Layout
\color red
red italics
\end_layout
\end_inset
\color inherit
.
\end_layout
\begin_layout Standard
\begin_inset Box Shadowbox
position "t"
hor_pos "c"
has_inner_box 1
inner_pos "t"
use_parbox 0
use_makebox 0
width "100col%"
special "none"
height "1in"
height_special "totalheight"
status open
\begin_layout Code
<def tag="main-nav">
\end_layout
\begin_layout Code
<navigation class="main-nav" merge-attrs param="default">
\end_layout
\begin_layout Code
<nav-item href="#{base_url}/">Home</nav-item>
\end_layout
\begin_layout Code
\family typewriter
\color red
\begin_inset Flex Emph
status collapsed
\begin_layout Plain Layout
\color red
<nav-item with="&Recipe"><ht key="recipe.nav_item" count="100"><model-name-human
count="100"/></ht></nav-item>
\end_layout
\end_inset
\end_layout
\begin_layout Code
<nav-item with="&Category"><ht key="category.nav_item"
\end_layout
\begin_layout Code
count="100"><model-name-human count="100"/></ht></nav-item>
\end_layout
\begin_layout Code
<nav-item with="&Country"><ht key="country.nav_item"
\end_layout
\begin_layout Code
count="100"><model-name-human count="100"/></ht></nav-item>
\end_layout
\begin_layout Code
</navigation>
\end_layout
\begin_layout Code
</def>
\end_layout
\end_inset
\end_layout
\begin_layout Standard
Now refresh your browser and you will see the new tab order:
\end_layout
\begin_layout Standard
\begin_inset Float figure
wide false
sideways false
status open
\begin_layout Plain Layout
\begin_inset Graphics
filename figures/figure124.png
width 90col%
\end_inset
\end_layout
\begin_layout Plain Layout
\begin_inset Caption
\begin_layout Plain Layout
Changing the tab order for the main navigation menus
\end_layout
\end_inset
\end_layout
\begin_layout Plain Layout
\end_layout
\end_inset
\end_layout
\begin_layout Standard
8.
\begin_inset Flex Strong
status collapsed
\begin_layout Plain Layout
Editing an application name
\end_layout
\end_inset
.
If you want to change the name of the application that appears on all the
UI web pages, you can do this easily also.
The
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
config.hobo.app_name
\end_layout
\end_inset
key is found in the
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
config/application.rb
\end_layout
\end_inset
file and can be edited to change the application name.
Make the following change, then restart the application, and then refresh
your browser:
\end_layout
\begin_layout Standard
\begin_inset Box Shadowbox
position "t"
hor_pos "c"
has_inner_box 1
inner_pos "t"
use_parbox 0
use_makebox 0
width "100col%"
special "none"
height "1in"
height_special "totalheight"
status open
\begin_layout LyX-Code
config.hobo.app_name = "Four Tables, No Waiting"
\end_layout
\end_inset
\end_layout
\begin_layout Standard
\begin_inset Float figure
wide false
sideways false
status open
\begin_layout Plain Layout
\begin_inset Graphics
filename figures/figure125.png
width 90col%
\end_inset
\end_layout
\begin_layout Plain Layout
\begin_inset Caption
\begin_layout Plain Layout
Changing the application name with the app-name tag
\end_layout
\end_inset
\end_layout
\begin_layout Plain Layout
\end_layout
\end_inset
\end_layout
\begin_layout Standard
9.
\begin_inset Flex Strong
status collapsed
\begin_layout Plain Layout
Summary
\end_layout
\end_inset
.
The Hobo Rapid generator creates tag definitions and places them in the
files of the Rapid directory.
The programmer overrides, redefines, and defines new tags in
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
application.dryml
\end_layout
\end_inset
.
These definitions are available throughout the application.
So far, you have just learned how to override tags.
\end_layout
\begin_layout Standard
There are no tag calls in
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
application.dryml
\end_layout
\end_inset
except within a tag definition because
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
application.dryml
\end_layout
\end_inset
is NOT a template file (see it as a library file).
The programmer invokes--that is--calls tags in template files placed in
the
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
view/<model_name>
\end_layout
\end_inset
directories.
\end_layout
\begin_layout Standard
The programmer may also override, redefine, or define a new tag within a
template, but this modification is local (e.g., only available within that
template).
\end_layout
\begin_layout Standard
\begin_inset Box Shaded
position "t"
hor_pos "c"
has_inner_box 1
inner_pos "t"
use_parbox 0
use_makebox 0
width "100col%"
special "none"
height "1in"
height_special "totalheight"
status open
\begin_layout Description
Note: A new feature of Hobo 1.3 is that application tag definitions can be
organized into multiple dryml files as long as they reside in the
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
app/views/application
\end_layout
\end_inset
directory.
\end_layout
\begin_layout Plain Layout
So instead of having one large
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
application.dryml
\end_layout
\end_inset
file, you can organize your application specific tag definitions into multiple
files and place them in the
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
app/views/application
\end_layout
\end_inset
directory.
\end_layout
\end_inset
\end_layout
\end_body
\end_document
Something went wrong with that request. Please try again.