0
@@ -15,7 +15,7 @@ A simple classified adverts app.
0
 
0
 ## [Part 3 - Customizing Views with DRYML](3-customizing-views-with-dryml)
0
 
0
-1. application.dryml
0
-2. Customizing the front page
0
-3. Customizing a show page
0
-4. Tweaking the theme
0
+1. [application.dryml](3-customizing-views-with-dryml/#application-dryml)
0
+2. [Customizing the front page](3-customizing-views-with-dryml/#customizing-front-page)
0
+3. [Customizing a show page](3-customizing-views-with-dryml/#customizing-show-page)
0
+4. [Tweaking the theme](3-customizing-views-with-dryml/#tweaking-theme)

0
@@ -315,6 +315,4 @@ Refresh the browser and you should see:
0
 
0
 <img src="/images/tutorial/front-with-models.png">
0
 
0
-TODO: bigger tour of the generated app, explain the routes created by model controllers, explain the first signed up user is admin
0
-
0
 Next: [Part 2. Customizing Models and Controllers](/pod-tutorial/2-customizing-models-and-controllers)
0
\ No newline at end of file

0
@@ -5,14 +5,16 @@ already be quite close to what you want, other parts will not. Now it is time to
0
 the app to your needs. 
0
 
0
 Your initial inclination might be to dive in to `app/views` and start modifying the individual 
0
-page views. However, you will soon find that initially there are no files for the individual 
0
-pages in the generic app. Hobo doesn't generate the generic views in your app, they are being rendered using a set of generic page tags provided by the Hobo Rapid library. DRYML allows these page tags to be customized in powerful ways without having to re-define parts of the page that you don't want to change. 
0
+page views. However, you will soon find that initially there are very few files for the individual 
0
+pages in the generic app. With the exception of the front page, Hobo doesn't generate the generic views in your app. They are being rendered using a set of generic page tags provided by the Hobo Rapid library. DRYML allows these page tags to be customized in powerful ways without having to re-define parts of the page that you don't want to change. 
0
 
0
 But before we dive into DRYML we can change the behavior of the generated UI in several ways by making changes to our models and controllers, and these are a good place to start.
0
 
0
 1. [Model Layer](#model-layer)
0
 2. [Resource Controllers](#resource-controllers)
0
 
0
+---
0
+
0
 ## <a name="model-layer">Model Layer</a>
0
 
0
 ### Adding permissions
0
@@ -22,7 +24,7 @@ they are designed to give you model level integrity they are also used by many o
0
 tags. This means that the generic views automatically change based on the permissions of the
0
 current user.
0
 
0
-#### The administrator role
0
+### The administrator role
0
 
0
 By default, permissions for categories are defined like this:
0
 
0
@@ -151,6 +153,26 @@ The app is looking pretty good now, despite the fact we haven't done any work at
0
 
0
 ## Annotating The Model
0
 
0
+### Specifying the creator
0
+
0
+By annotating an association we can specify the creator model. For example, "users" create "adverts".
0
+
0
+In `app/models/advert.rb`, change `belongs_to :user` to
0
+
0
+    belongs_to :user, :creator => true
0
+{: .ruby}
0
+
0
+This special association is picked up by Hobo's generic tags in several places. For example on an advert show page the creator is now displayed in the heading.
0
+
0
+#### Before
0
+
0
+<img src="/images/tutorial/creator_before.png">
0
+
0
+#### After
0
+
0
+<img src="/images/tutorial/creator_after.png">
0
+
0
+
0
 ### Model Hierarchy
0
 
0
 **NOTE: These ideas are very experimental! They might change in a future Hobo release.**
0
@@ -206,10 +228,12 @@ File: `app/controllers/adverts_controller.rb`
0
       auto_actions :all
0
 
0
     end
0
+{: .ruby}
0
     
0
 There's a couple of things to note here. Firstly, the `hobo_model_controller` declaration upgrades this controller with Hobo features. We could specify the model that this controller looks after by passing the model to `hobo_model_controller`:
0
 
0
     hobo_model_controller Advert
0
+{: .ruby}
0
     
0
 But we don't need to because by default Hobo infers the model from the name of the controller class.
0
 
0
@@ -220,6 +244,7 @@ The `auto_actions` declaration can be given an `:except` clause to eliminate spe
0
 File: `app/controllers/adverts_controller.rb`
0
 
0
     auto_actions :all, :except => :index
0
+{: .ruby}
0
     
0
 and then refreshing the browser. You should see the "Adverts" link disappear from the main nav (and from the front page too).
0
 
0
@@ -234,8 +259,18 @@ Step one is to remove the "New Category" page. Modify the `auto_actions` in the
0
 File: `app/controllers/categories_controller.rb`
0
 
0
     auto_actions :all, :except => :new
0
+{: .ruby}
0
     
0
 There is no step two :-) The automatic index page detects the absence of a new page and gives us an in-line form.
0
+You'll need to restart the server for this change to take affect because Hobo's automatic routes are only loaded at
0
+start time, even in development mode.
0
+
0
+The categories index page should now look like this:
0
+
0
+<img src="/images/tutorial/removing_new_page.png"/>
0
+
0
+
0
+---
0
 
0
 ### Moving on
0
 

0
@@ -6,7 +6,205 @@ Without writing any view layer code at all, the POD application is already in a
0
  
0
  * DRYML has a unique and powerful *paramaterisation* mechanism. All those automatic pages that are *almost but not quite* what you want -- you won't have to throw away any of it. DRYML will allow you to make very specific changes, small or large. Mark-up that you don't want to change will remain.
0
 
0
-1. application.dryml
0
-2. Customizing the front page
0
-3. Customizing a show page
0
-4. Tweaking the theme
0
+ 1. [application.dryml](#application-dryml)
0
+ 2. [Customizing the front page](#customizing-front-page)
0
+ 3. [Customizing a show page](#customizing-show-page)
0
+ 4. [Tweaking the theme](#tweaking-theme)
0
+
0
+---
0
+
0
+## <a name="application-dryml">application.dryml</a>
0
+
0
+In `app/views/taglibs/application.dryml` you can define your own application-wide tags and re-define existing tags to suit your needs. The file is pre-generated by Hobo.
0
+
0
+### App-name
0
+
0
+Initially you will see:
0
+
0
+    <def tag="app-name">Pod</def>
0
+
0
+This defines a tag called `<app-name>` that is used to display the application's name in the page header.
0
+
0
+Change the definition to the following:
0
+
0
+    <def tag="app-name">POD Classifieds</def>
0
+    
0
+You will see that the page header changes to reflect this.
0
+
0
+### Page
0
+
0
+The `<page>` tag provides the basic structure of your pages and is used by the generic page tags in Rapid. It is possible to define your own version of `<page>` but typically you can customize the existing definition to suit your needs with less effort. This is described in more detail elsewhere but for now we will show a short example of customizing the `<page>` tag.
0
+  
0
+Add the following to `app/views/taglibs/application.dryml`:
0
+
0
+    <def tag="page" extend-with="my-app">
0
+      <page-without-my-app merge>
0
+        <footer:>Copyright 2008 Acme Ltd.</footer:>
0
+      </page-without-my-app>
0
+    </def>  
0
+{: .dryml}
0
+
0
+Here we are providing some content to the page footer. You should see "Copyright 2008 Acme Ltd." appear at the bottom of every page. `footer:` is a named parameter provided by the `<page>` tag. For a full list of the parameters see the Rapid Pages documentation.
0
+
0
+### Changing the page layout
0
+
0
+Page layouts provide a number of named parameters within the body of a page in a given structure. Rapid uses "simple-layout" as the default page layout and provides "aside-layout" as an option.
0
+
0
+To switch to an aside layout by default for all pages, change the line above that reads `<page-without-my-app merge>` to:
0
+
0
+    <page-without-my-app layout="aside" merge>
0
+    
0
+Your pages should now look like this:
0
+
0
+<img src="/images/tutorial/aside_layout.png"/>
0
+
0
+---
0
+
0
+## <a name="customizing-front-page">Customizing the front page</a>
0
+
0
+It is now time to begin editing individual pages, we will begin with the application's front page.
0
+
0
+The front page in `app/views/front/index.dryml` is one of the few pages automatically generated by Hobo.
0
+
0
+You will initially a `<page>` tag with "body", "content-header" and "content-body" parameters. Start by removing
0
+everything inside the content-header and content-body parameters so that the file looks like this:
0
+
0
+    <page>
0
+      <body: class="front-page"/>
0
+
0
+      <content-header:>
0
+      </content-header:>
0
+
0
+      <content-body:>
0
+      </content-body:>
0
+    </page>
0
+{: .dryml}
0
+
0
+We want to add an image to the top of the page. Change content-header to the following:
0
+
0
+    <content-header:>
0
+      <img src="http://hobocentral.net/images/trolley.jpg" alt="List It! Sell It! Fast!"/>
0
+    </content-header:>
0
+{: .dryml}
0
+
0
+Next, we want to fill out the main part of the page with a summary of "recent adverts".
0
+
0
+Change content-body to the following:
0
+
0
+    <content-body:>
0
+      <section>
0
+        <h2>Recent Adverts</h2>
0
+      
0
+        <collection with="&Advert.recent.all"/>
0
+      </section>
0
+      <a with="&Advert">Show all</a>
0
+    </content-body:>
0
+{: .dryml}
0
+
0
+This will display a list of recent adverts.
0
+
0
+Now we want to populate our aside with lists of categories and users. 
0
+
0
+Our page layout provides a parameter called "aside", we can add this inside our `<page>` to add our content to the side part of the page.
0
+
0
+    <aside:>
0
+      <section>
0
+        <h2>Categories</h2>
0
+        <ul with="&Category.all">
0
+          <li:><a/> (<count:adverts/>)</li:>
0
+        </ul>
0
+      </section>
0
+
0
+      <section>
0
+        <h2>Users</h2>
0
+        <ul with="&User.all">
0
+          <li:><a/></li:>
0
+        </ul>
0
+      </section>
0
+    </aside:>
0
+{: .dryml}
0
+
0
+Your front page should now look like this:
0
+
0
+<img src="/images/tutorial/front-page-finished.png"/>
0
+
0
+---
0
+
0
+## <a name="customizing-show-page">Customizing a show page</a>
0
+
0
+Now we are going to edit an advert's "show page" which is the page that displays details on a single advert such as /adverts/1.
0
+
0
+The page already looks quite good, but we decide that we would like a list of categories in the aside. We've already written the code to display the categories on the front page so the first thing to do is to refactor this code into a tag so that we can use it in both places.
0
+
0
+Add the following to `app/views/taglibs/application.dryml`:
0
+
0
+    <def tag="list-categories">
0
+      <section>
0
+        <h2>Categories</h2>
0
+        <ul with="&Category.all">
0
+          <li:><a/> (<count:adverts/>)</li:>
0
+        </ul>
0
+      </section>
0
+    </def>      
0
+{: .dryml}
0
+
0
+Now that we've defined a tag we can replace the code in `app/views/front/index.dryml` that displays the list of categories with `<list-categories/>`.
0
+
0
+We would like to add the same list of categories to the aside on our advert show pages. To do this we will 
0
+need to edit `app/views/adverts/show.dryml`. Initially you will see that this file doesn't even exist. When
0
+a view file isn't present, Hobo will automatically try to use a tag `<"action-name"-page>`, in this case `<show-page>`, to render the page instead. `<show-page>` is a tag defined in Rapid pages which on it's own renders a generic view
0
+of our advert.
0
+
0
+Create the file `app/views/adverts/show.dryml`. Now that there's a file in place we'll need to call `<show-page>`
0
+ourselves by making the contents of the file:
0
+
0
+    <show-page/>
0
+{: .dryml}
0
+
0
+If you reload `/adverts/1` you will see that nothing has changed yet, but now we are in a position to make changes
0
+to the page by providing parameters to `<show-page>`.
0
+
0
+Change the contents of `show.dryml` to the following:
0
+
0
+    <show-page>
0
+      <aside:>
0
+        <list-categories/>
0
+      </aside:>
0
+    </show-page>
0
+{: .dryml}
0
+
0
+The categories should now be listed in the side column. 
0
+
0
+---
0
+
0
+## <a name="tweaking-theme">Tweaking the theme</a>
0
+
0
+The default Hobo theme "clean" provides comprehensive but minimal styling for all of
0
+Hobo's generic pages and tags. When styling your app you have a choice between creating your own theme from
0
+scratch or tweaking an existing theme to suit your needs. 
0
+
0
+In many cases tweaking the existing theme is sufficient. By adding style rules to `public/stylesheets/application.css`
0
+we can override the theme's styling since our application stylesheet is loaded and applied last.
0
+
0
+Here is a simple example of tweaking the "clean" theme. Add the following to `public/stylesheets/application.css`:
0
+
0
+    html {background: #0f2639;}
0
+    .page-header {padding: 0; margin-top: 25px; margin-bottom: 0;}
0
+    .page-header {
0
+      width: 100%;
0
+      background-color: #47718F;
0
+    }
0
+    .page-header h1 {padding: 30px 40px;}
0
+    .page-footer {background-color: #0f2639;} 
0
+    .aside-content {background: #DAEFF2;}
0
+
0
+    .page-header .nav {margin: 0; background: #101d27;}
0
+    .main-nav {padding-left: 20px;}
0
+    .main-nav a {padding: 7px 8px 8px; border: none; background: none;}
0
+    .main-nav a:hover {border:none; background: black;}
0
+    .account-nav {top: -20px;}
0
+{: .css}
0
+
0
+This will make the pages blue and apply a different styling to the main navigation bar.
0
+
0
+<img src="/images/tutorial/blue_theme.png"/>
0
\ No newline at end of file