Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Branch: master
Fetching contributors…

Cannot retrieve contributors at this time

executable file 1137 lines (834 sloc) 15.983 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 22
\begin_inset Newline newline
\end_inset
Creating a “Look and Feel” Plugin
\end_layout
\begin_layout Standard
\begin_inset Flex Emph
status collapsed
\begin_layout Plain Layout
By Tom Locke
\end_layout
\end_inset
\end_layout
\begin_layout Standard
In this tutorial we will start with the results of Tutorial 21.
To re-use this work across many apps, we’ll use the standard Rails technique
- create a plugin.
\end_layout
\begin_layout Standard
The plugin will contain:
\end_layout
\begin_layout Itemize
A DRYML taglib with all of our tag definitions
\end_layout
\begin_layout Itemize
A Public directory, containing our images and stylesheets
\end_layout
\begin_layout Standard
Somehow the idea of “creating a plugin” seems like a big deal, but it’s
there’s really nothing to it.
Pretty much all we’re going to do is move a few files into different places.
\end_layout
\begin_layout Standard
Here is the content of a batch file to create the folders and move the files:
\end_layout
\begin_layout Standard
\begin_inset Float figure
wide false
sideways false
status open
\begin_layout Plain Layout
\begin_inset Graphics
filename figures/ch5/plugin_batch_file.png
width 100col%
\end_inset
\end_layout
\begin_layout Plain Layout
\begin_inset Caption
\begin_layout Plain Layout
Batch file with commands to create the plugin folders and content
\end_layout
\end_inset
\end_layout
\begin_layout Plain Layout
\end_layout
\end_inset
\end_layout
\begin_layout Standard
Or, as individual commands:
\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
> md vendor
\backslash
plugins
\backslash
nifa
\end_layout
\begin_layout Code
> cd vendor
\backslash
plugins
\backslash
nifa
\end_layout
\begin_layout Code
> md taglibs
\end_layout
\begin_layout Code
> md public
\end_layout
\begin_layout Code
> md public
\backslash
nifa
\end_layout
\begin_layout Code
> md public
\backslash
nifa
\backslash
stylesheets
\end_layout
\begin_layout Code
> md public
\backslash
nifa
\backslash
images
\end_layout
\begin_layout Code
> cd ..
\backslash
..
\backslash
..
\end_layout
\begin_layout Code
> copy app
\backslash
views
\backslash
taglibs
\backslash
application.dryml
\backslash
\end_layout
\begin_layout Code
vendor
\backslash
plugins
\backslash
nifa
\backslash
taglibs
\backslash
nifa.dryml
\end_layout
\begin_layout Code
> copy public
\backslash
stylesheets
\backslash
application.css
\backslash
\end_layout
\begin_layout Code
vendor
\backslash
plugins
\backslash
nifa
\backslash
public
\backslash
stylesheets
\backslash
nifa.css
\end_layout
\begin_layout Code
> copy public
\backslash
images
\backslash
* vendor
\backslash
plugins
\backslash
nifa
\backslash
public
\backslash
nifa
\backslash
images
\end_layout
\end_inset
\end_layout
\begin_layout Standard
(That last command will also copy
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
rails.png
\end_layout
\end_inset
into the plugin, which you probably want to delete).
\end_layout
\begin_layout Standard
We’ve copied the whole of
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
application.dryml
\end_layout
\end_inset
into our plugin, because nearly everything in there belongs in the plugin,
but it does need some editing:
\end_layout
\begin_layout Standard
At the top, remove all of the includes, the
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
<set-theme>
\end_layout
\end_inset
and the definition of
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
<app-name>
\end_layout
\end_inset
\end_layout
\begin_layout Standard
We need to make sure our stylesheet gets included, so add the following
parameter to the call to
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
<old-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
<append-stylesheets:>
\end_layout
\begin_layout Code
<stylesheet name="
\backslash
nifa
\backslash
stylesheets
\backslash
nifa.css"/>
\end_layout
\begin_layout Code
</append-stylesheets:>
\end_layout
\end_inset
\end_layout
\begin_layout Standard
The new
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
nifa.dryml
\end_layout
\end_inset
will be:
\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
\size footnotesize
# Add this remove the live search and add sidebars
\end_layout
\begin_layout Code
\size footnotesize
<extend tag="page">
\end_layout
\begin_layout Code
\size footnotesize
<old-page merge without-live-search>
\end_layout
\begin_layout Code
\size footnotesize
\end_layout
\begin_layout Code
\size footnotesize
# need this to acces the nifa.css stylesheet
\end_layout
\begin_layout Code
\size footnotesize
<append-stylesheets:>
\end_layout
\begin_layout Code
\size footnotesize
<stylesheet name="
\backslash
nifa
\backslash
stylesheets
\backslash
nifa.css"/>
\end_layout
\begin_layout Code
\size footnotesize
</append-stylesheets:>
\end_layout
\begin_layout Code
\size footnotesize
#
\end_layout
\begin_layout Code
\size footnotesize
<content: replace>
\end_layout
\begin_layout Code
\size footnotesize
<section-group class="page-content">
\end_layout
\begin_layout Code
\size footnotesize
<aside param="aside1"><search-and-browse/></aside>
\end_layout
\begin_layout Code
\size footnotesize
<section param="content"/>
\end_layout
\begin_layout Code
\size footnotesize
<aside param="aside2"/>
\end_layout
\begin_layout Code
\size footnotesize
</section-group>
\end_layout
\begin_layout Code
\size footnotesize
</content:>
\end_layout
\begin_layout Code
\size footnotesize
<footer: param><footer-nav/></footer:>
\end_layout
\begin_layout Code
\size footnotesize
</old-page>
\end_layout
\begin_layout Code
\size footnotesize
</extend>
\end_layout
\begin_layout Code
\size footnotesize
# Replace the default navigation bar
\end_layout
\begin_layout Code
\size footnotesize
<def tag="main-nav">
\end_layout
\begin_layout Code
\size footnotesize
<navigation class="main-nav">
\end_layout
\begin_layout Code
\size footnotesize
<nav-item href="">Home</nav-item>
\end_layout
\begin_layout Code
\size footnotesize
<nav-item href="">About Us</nav-item>
\end_layout
\begin_layout Code
\size footnotesize
<nav-item href="">Grants</nav-item>
\end_layout
\begin_layout Code
\size footnotesize
<nav-item href="">Forms</nav-item>
\end_layout
\begin_layout Code
\size footnotesize
<nav-item href="">Newsroom</nav-item>
\end_layout
\begin_layout Code
\size footnotesize
<nav-item href="">Help</nav-item>
\end_layout
\begin_layout Code
\size footnotesize
<nav-item href="">Contact Us</nav-item>
\end_layout
\begin_layout Code
\size footnotesize
</navigation>
\end_layout
\begin_layout Code
\size footnotesize
</def>
\end_layout
\begin_layout Code
\size footnotesize
# new tag
\end_layout
\begin_layout Code
\size footnotesize
<def tag="search-and-browse" attrs="current-subject">
\end_layout
\begin_layout Code
\size footnotesize
<div class="search-and-browse">
\end_layout
\begin_layout Code
\size footnotesize
<div param="search">
\end_layout
\begin_layout Code
\size footnotesize
<h3>Search CSREES</h3>
\end_layout
\begin_layout Code
\size footnotesize
<form action="">
\end_layout
\begin_layout Code
\size footnotesize
<input type="text" class="search-field"/>
\end_layout
\begin_layout Code
\size footnotesize
<submit label="Go"/>
\end_layout
\begin_layout Code
\size footnotesize
</form>
\end_layout
\begin_layout Code
\size footnotesize
<p class="help"><a href="">Search Help</a></p>
\end_layout
\begin_layout Code
\size footnotesize
</div>
\end_layout
\begin_layout Code
\size footnotesize
<div param="browse-by-audience">
\end_layout
\begin_layout Code
\size footnotesize
<h3>Browse by Audience</h3>
\end_layout
\begin_layout Code
\size footnotesize
<select-menu first-option="Information for..." options="&[]"/>
\end_layout
\begin_layout Code
\size footnotesize
</div>
\end_layout
\begin_layout Code
\size footnotesize
<div param="browse-by-subject">
\end_layout
\begin_layout Code
\size footnotesize
<h3>Browse by Subject</h3>
\end_layout
\begin_layout Code
\size footnotesize
<navigation current="&current_subject">
\end_layout
\begin_layout Code
\size footnotesize
<nav-item href="/">Agricultural &amp; Food Biosecurity</nav-item>
\end_layout
\begin_layout Code
\size footnotesize
<nav-item href="/">Agricultural Systems</nav-item>
\end_layout
\begin_layout Code
\size footnotesize
<nav-item href="/">Animals &amp; Animal Products</nav-item>
\end_layout
\begin_layout Code
\size footnotesize
<nav-item href="/">Biotechnology &amp; Geneomics</nav-item>
\end_layout
\begin_layout Code
\size footnotesize
<nav-item href="/">Economy &amp; Commerce</nav-item>
\end_layout
\begin_layout Code
\size footnotesize
<nav-item href="/">Education</nav-item>
\end_layout
\begin_layout Code
\size footnotesize
<nav-item href="/">Families, Youth &amp; Communities</nav-item>
\end_layout
\begin_layout Code
\size footnotesize
</navigation>
\end_layout
\begin_layout Code
\size footnotesize
</div>
\end_layout
\begin_layout Code
\size footnotesize
</div>
\end_layout
\begin_layout Code
\size footnotesize
</def>
\end_layout
\end_inset
\end_layout
\begin_layout Standard
\size footnotesize
\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
\size footnotesize
# Parameterized panel
\end_layout
\begin_layout Code
\size footnotesize
<def tag="nav-panel">
\end_layout
\begin_layout Code
\size footnotesize
<div class="nav-panel" param="default">
\end_layout
\begin_layout Code
\size footnotesize
<h3 param="heading"></h3>
\end_layout
\begin_layout Code
\size footnotesize
<div param="body">
\end_layout
\begin_layout Code
\size footnotesize
<ul param="items"/>
\end_layout
\begin_layout Code
\size footnotesize
</div>
\end_layout
\begin_layout Code
\size footnotesize
</div>
\end_layout
\begin_layout Code
\size footnotesize
</def>
\end_layout
\begin_layout Code
\size footnotesize
# Footer parameterized tag
\end_layout
\begin_layout Code
\size footnotesize
<def tag="footer-nav">
\end_layout
\begin_layout Code
\size footnotesize
<ul>
\end_layout
\begin_layout Code
\size footnotesize
<nav-item href="/">NIFA</nav-item>
\end_layout
\begin_layout Code
\size footnotesize
<nav-item href="/">USDA.gov</nav-item>
\end_layout
\begin_layout Code
\size footnotesize
<nav-item href="/">Site Map</nav-item>
\end_layout
\begin_layout Code
\size footnotesize
<nav-item href="/">Policies</nav-item>
\end_layout
\begin_layout Code
\size footnotesize
<nav-item href="/">Grants.gov</nav-item>
\end_layout
\begin_layout Code
\size footnotesize
<nav-item href="/">CRIS</nav-item>
\end_layout
\begin_layout Code
\size footnotesize
<nav-item href="/">REEIS</nav-item>
\end_layout
\begin_layout Code
\size footnotesize
<nav-item href="/">Leadership Management Dashboard</nav-item>
\end_layout
\begin_layout Code
\size footnotesize
<nav-item href="/">eXension</nav-item>
\end_layout
\begin_layout Code
\size footnotesize
<nav-item href="/">RSS</nav-item>
\end_layout
\begin_layout Code
\size footnotesize
</ul>
\end_layout
\begin_layout Code
\size footnotesize
</def>
\end_layout
\end_inset
\end_layout
\begin_layout Subsubsection*
Using the plugin
\end_layout
\begin_layout Standard
To try out the plugin, create a new blank Hobo app.
There are then three steps to install and setup the plugin:
\end_layout
\begin_layout Paragraph*
Step 1.
\end_layout
\begin_layout Standard
Copy
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
vendor
\backslash
plugins
\backslash
nifa
\end_layout
\end_inset
from nifa-demo into
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
vendor
\backslash
plugins
\end_layout
\end_inset
in the new app.
\end_layout
\begin_layout Paragraph*
Step 2.
\end_layout
\begin_layout Standard
To install the taglib add:
\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="nifa" plugin="nifa"/>
\end_layout
\end_inset
\end_layout
\begin_layout Standard
to
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
application.dryml
\end_layout
\end_inset
.
It must be added after the
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
<set-theme>
\end_layout
\end_inset
tag.
\end_layout
\begin_layout Paragraph*
Step 3.
\end_layout
\begin_layout Standard
To install the public assets:
\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
> copy vendor
\backslash
plugins
\backslash
nifa
\backslash
public
\backslash
* public
\end_layout
\end_inset
\end_layout
\begin_layout Standard
That should be it.
Your new app will now look like the NIFA website, and the tags we defined,
such as
\begin_inset Flex Code
status collapsed
\begin_layout Plain Layout
<nav-panel>
\end_layout
\end_inset
will be available in every template.
\end_layout
\end_body
\end_document
Jump to Line
Something went wrong with that request. Please try again.