ch4tut16.lyx

#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 16 
\begin_inset Newline newline
\end_inset

The <a> Hyperlink Tag 
\end_layout

\begin_layout Standard
In this tutorial you will learn to develop sophisticated data-driven hyperlinks
 in you Hobo pages.
 
\end_layout

\begin_layout Subsubsection
Tutorial Application: four_table
\end_layout

\begin_layout Subsubsection
Topics
\end_layout

\begin_layout Itemize
The 
\begin_inset Flex Code
status collapsed

\begin_layout Plain Layout
<a>
\begin_inset Index idx
status collapsed

\begin_layout Plain Layout
Tags!<a>
\end_layout

\end_inset


\end_layout

\end_inset

 “hyperlink” tag for calling data-driven pages
\end_layout

\begin_layout Subsubsection
Steps
\end_layout

\begin_layout Standard
Step 1.
 
\begin_inset Flex Strong
status collapsed

\begin_layout Plain Layout
Review the 
\begin_inset Flex Code
status collapsed

\begin_layout Plain Layout
<a>
\end_layout

\end_inset

 tag usage within Hobo’s auto-generated tags
\end_layout

\end_inset

.
 Let’s take a look at the 
\begin_inset Flex Code
status collapsed

\begin_layout Plain Layout
<a>
\end_layout

\end_inset

 tag usage in the auto-generated tags for the 
\begin_inset Flex Emph
status collapsed

\begin_layout Plain Layout
Recipe
\end_layout

\end_inset

 model.
\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
<!--New Page Link from the Index Page Tag-->
\end_layout

\begin_layout Code
<a action="new" to="&model" param="new-link"/>
\end_layout

\end_inset


\end_layout

\begin_layout Standard
This tag results in the ‘New Recipe’ hyperlink with the route ‘
\begin_inset CommandInset href
LatexCommand href
target "http://localhost:3000/recipes/new"

\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
<!--Edit Page Link from the Show Page Tag-->
\end_layout

\begin_layout Code
<a action="edit" if="&can_edit?" param="edit-link">Edit 
\end_layout

\begin_layout Code
      Recipe</a>
\end_layout

\end_inset


\end_layout

\begin_layout Standard
This tag results in the ‘Edit Recipe’ hyperlink with a route like 
\begin_inset CommandInset href
LatexCommand href
target "http://localhost:3000/recipes/2-omelette/edit"

\end_inset

.
\end_layout

\begin_layout Standard
Step 2.
 
\begin_inset Flex Strong
status collapsed

\begin_layout Plain Layout
Construct a link to an index (record listing) page
\end_layout

\end_inset

.
 Let’s work in the home page in the file 
\begin_inset Flex Code
status collapsed

\begin_layout Plain Layout
views/front/index.html
\end_layout

\end_inset

.
 We will place our test code after the “Congratulations .
 .
 .
 “ message.
 
\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
<br/><h4>
\end_layout

\begin_layout Code
<a to="&Country" action="index" >List My     
\end_layout

\begin_layout Code
      Countries</a><br/>
\end_layout

\begin_layout Code
</h4>
\end_layout

\end_inset


\end_layout

\begin_layout Standard
This code will generate a link to a listing of countries in your database.
 
\end_layout

\begin_layout Standard
\begin_inset Float figure
wide false
sideways false
status open

\begin_layout Plain Layout
\begin_inset Graphics
	filename figures/figure167.png
	width 90col%

\end_inset


\end_layout

\begin_layout Plain Layout
\begin_inset Caption

\begin_layout Plain Layout
Generating an active link to a list of Countries
\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 
\begin_inset Flex Emph
status collapsed

\begin_layout Plain Layout
to
\end_layout

\end_inset

 attribute
\begin_inset Index idx
status collapsed

\begin_layout Plain Layout
to attribute
\end_layout

\end_inset

 defines the model to be used in the listing.
 It is always prefixed by the 
\begin_inset Quotes eld
\end_inset

&
\begin_inset Quotes erd
\end_inset

 character.
 The 
\begin_inset Flex Emph
status collapsed

\begin_layout Plain Layout
action
\end_layout

\end_inset

 attribute
\begin_inset Index idx
status collapsed

\begin_layout Plain Layout
Tags!<a>!action attribute
\end_layout

\end_inset

 defines the controller action which in the above case uses Hobo’s built-in
 
\begin_inset Flex Emph
status collapsed

\begin_layout Plain Layout
index
\end_layout

\end_inset

 action.
 As you get more sophisticated, you will learn to define your own controller
 actions.
 These can also be referred to by the action attribute.
\end_layout

\end_inset


\end_layout

\begin_layout Standard
Of course, if you click on the ‘List My Countries’ link, you will now see
 a listing of countries.
\end_layout

\begin_layout Standard
\begin_inset Float figure
wide false
sideways false
status open

\begin_layout Plain Layout
\begin_inset Graphics
	filename figures/figure168.png
	width 90col%

\end_inset


\end_layout

\begin_layout Plain Layout
\begin_inset Caption

\begin_layout Plain Layout
The Countries index page activated by your custom link
\end_layout

\end_inset


\end_layout

\begin_layout Plain Layout

\end_layout

\end_inset


\end_layout

\begin_layout Standard
Step 3.	
\begin_inset Flex Strong
status collapsed

\begin_layout Plain Layout
Construct a link to a new record page
\end_layout

\end_inset

.
 We can construct a link to create new countries in much the same way.
\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
<a to="&Country" action="new" >New Country</a><br/>
\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/figure169.png
	width 90col%

\end_inset


\end_layout

\begin_layout Plain Layout
\begin_inset Caption

\begin_layout Plain Layout
Constructing a custom link to the 
\begin_inset Quotes eld
\end_inset

New County
\begin_inset Quotes erd
\end_inset

 page
\end_layout

\end_inset


\end_layout

\begin_layout Plain Layout

\end_layout

\end_inset


\end_layout

\begin_layout Standard
Now, you’ve got another link to try out.
\end_layout

\begin_layout Standard
Step4.	
\begin_inset Flex Strong
status collapsed

\begin_layout Plain Layout
Construct a link to an edit record page
\end_layout

\end_inset

.
 If you want to create a custom link to an edit page, you have to be sure
 you are in the right context.
 Hobo can implicitly figure out which record you wish to edit, but only
 if you are displaying a particular record.
\end_layout

\begin_layout Standard
In the example from Step 1 above, the ‘edit page’ link occurs in a 
\begin_inset Flex Code
status collapsed

\begin_layout Plain Layout
<show-page>
\end_layout

\end_inset

 tag definition so Hobo knows what record you want to edit.
\end_layout

\begin_layout Standard
Let’s create our own link on the 
\begin_inset Flex Emph
status collapsed

\begin_layout Plain Layout
Country
\end_layout

\end_inset

 
\begin_inset Flex Code
status collapsed

\begin_layout Plain Layout
<show-page>
\end_layout

\end_inset

 tag by using the 
\begin_inset Flex Code
status collapsed

\begin_layout Plain Layout
<content-body:>
\end_layout

\end_inset

 parameter tag that is defined in the auto-generated 
\begin_inset Flex Code
status collapsed

\begin_layout Plain Layout
<show-page>
\end_layout

\end_inset

 tag for the 
\begin_inset Flex Emph
status collapsed

\begin_layout Plain Layout
Country
\end_layout

\end_inset

 model and create a new file called 
\begin_inset Flex Code
status collapsed

\begin_layout Plain Layout
show.dryml
\end_layout

\end_inset

 in your 
\begin_inset Flex Code
status collapsed

\begin_layout Plain Layout
views/countries
\end_layout

\end_inset

 directory.
\end_layout

\begin_layout Standard
You need to use the parameter tag or Hobo will ignore your code.
 This is just how the 
\begin_inset Flex Code
status collapsed

\begin_layout Plain Layout
<show-page>
\end_layout

\end_inset

 tag was defined.
\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
<show-page>
\end_layout

\begin_layout Code
  <content-body:>
\end_layout

\begin_layout Code
    <a action="edit" >Edit My Country</a><br/>
\end_layout

\begin_layout Code
  </content-body:>
\end_layout

\begin_layout Code
</show-page>
\end_layout

\end_inset


\end_layout

\begin_layout Standard
Go ahead and refresh your browser, click on the ‘Country’ tab and click
 on a country and you will see your new link to edit it on the bottom left.
\end_layout

\begin_layout Standard
\begin_inset Float figure
wide false
sideways false
status open

\begin_layout Plain Layout
\begin_inset Graphics
	filename figures/figure170.png
	width 90col%

\end_inset


\end_layout

\begin_layout Plain Layout
\begin_inset Caption

\begin_layout Plain Layout
Page view of custom <show-page> tag
\end_layout

\end_inset


\end_layout

\begin_layout Plain Layout

\end_layout

\end_inset


\end_layout

\begin_layout Standard
Step 5.
   
\begin_inset Flex Strong
status collapsed

\begin_layout Plain Layout
Construct a link to a specific record
\end_layout

\end_inset

.
 In general, Hobo takes care of linking to specific records for you by setting
 up the links implicitly in the 
\begin_inset Flex Code
status collapsed

\begin_layout Plain Layout
<index-page>
\end_layout

\end_inset

.
 If you need to link to a specific record, that will require a little Ruby
 to address a specific record in the database.
 
\end_layout

\end_body
\end_document