ch5tut22.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 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
\begin_inset Index idx
status collapsed

\begin_layout Plain Layout
create a plugin
\end_layout

\end_inset

.
 
\end_layout

\begin_layout Standard
The plugin will contain:
\end_layout

\begin_layout Itemize
A DRYML taglib
\begin_inset Index idx
status collapsed

\begin_layout Plain Layout
DRYML taglib
\end_layout

\end_inset

 with all of our tag definitions
\end_layout

\begin_layout Itemize
A Public directory, containing our images and stylesheets
\end_layout

\begin_layout Standard
The idea of “creating a plugin” seems like a big deal, but there’s really
 nothing to it.
 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.
 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