[Hobo Users] DRYML layout

[Dimitri Roschkowski]

Hi,

I try to code my first RoR project using hobo, but I have some
problems with dryml. In a normal RoR application, I define my layout
in the layouts/application.html.erb file. I simply can cut & paste the
html code, the designer gave me to the file and define some areas for
dynamic code. But how can I do this with dryml?

Well, I created my project. When I run the server, hobo generates the
default index page for me. In the tutorials and docs in the hobo
homepage is only mentioned, how I can adjust some elements on the
page. But I need to change nearly everything, starting with the
doctype. I don’t need the tons of JS, or the default css files.

So is there a way to start from scratch or how can I just get the same
code generated, the designer gave me?

--
You received this message because you are subscribed to the Google Groups "Hobo Users" group.
To post to this group, send email to hobo...@googlegroups.com.
To unsubscribe from this group, send email to hobousers+...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/hobousers?hl=en.

[Bryan Larsen]

The Hobo method is superior to using "layouts", in my opinion.

All of the default Hobo pages use the "page" tag as their base. If you
extend or redefine the page tag, they'll use that instead of the default.

Here's an example from one of my apps that does not use the clean theme
(or any theme at all):


<extend tag="page">
<old-page merge>
<stylesheets:>
<stylesheet name="screen.css" type="text/css" media="screen,
projection"/>
<stylesheet name="print.css" type="text/css" media="print"/>
<!--[if lt IE 8]><link rel="stylesheet" href="css/ie.css"
type="text/css" media="screen, projection"><![endif]-->
<stylesheet name="styles.css" type="text/css" media="screen,
projection" />
<stylesheet name="ui-lightness/jquery-ui-1.7.2.custom.css"
type="text/css" />
</stylesheets:>
<scripts:>
<javascript name='prototype, effects, dragdrop, controls, lowpro,
hobo-rapid' param/>
<javascript name="jquery-1.3.2.min.js"/>
<script type="text/javascript">
jQuery.noConflict();
</script>
<javascript name="jquery.livequery.js"/>
<javascript name="jquery-ui-1.7.2.custom.min.js"/>
<javascript name="jquery.form.js"/>
<javascript name="json2.js"/>
<!-- javascript name="grasshillfoods.js" / -->
<javascript name="application.js" />
</scripts:>
<header: replace>
<div id="ajax-progress"><div><span
id="ajax-progress-text"></span></div></div>
<div id="header">
<div class="container">
<h1>Grass Hill Foods</h1>
<h3>Naturally Nutritious</h3>
</div>
</div>
<div class="container menu">
<navigation class="main-nav">
<nav-item href="/"><img src="/assets/home.png"
alt="Home"></img></nav-item>
<nav-item href="/pages/faq"><img src="/assets/faq.png"
alt="FAQ"></img></nav-item>
<nav-item href="/pages/about"><img src="/assets/about.png"
alt="About"></img></nav-item>
<nav-item href="http://blog.grasshillfoods.ca/"><img
src="/assets/blog.png" alt="Blog"></img></nav-item>
<if test="&current_user.guest?">
<nav-item href="#{guest_orders_path}"><img
src="/assets/order.png" alt="Order"></img></nav-item>
</if>
<else>
<set
current-order="&Order.user_is(current_user.id).unconfirmed.first"/>
<if test="&current_order">
<nav-item action="edit" with="&current_order"><img
src="/assets/order.png" alt="Order"></img></nav-item>
</if>
<else>
<nav-item action="initiate" with="&Order"><img
src="/assets/order.png" alt="Order"></img></nav-item>
</else>
</else>
</navigation>
<div class="clear">&nbsp;</div>
</div>
<div class="container subhead">
<account-nav without-logged-in-as param>
<account:><a class="ui-state-default ui-corner-left"
href="#{user_account_url(:id => current_user.id)}">Edit my
Account</a></account:>
<log-out:><a class="ui-state-default ui-corner-right"
href="#{user_logout_url}">Log Out</a></log-out:>
<log-in:><a class="ui-state-default ui-corner-left"
href="#{user_login_url}">Log In</a></log-in:>
<sign-up:><a class="ui-state-default ui-corner-right signup"
href="#{signup_url}">Create an Account</a></sign-up:>
</account-nav>
</div>
</header:>
<content: class="container main clear"/>
<footer: replace>
<div id="footer" class="container prepend-top">
<p class="span-12 bottom-nav">
<a href="/pages/about#objectives" class="ui-state-default
ui-corner-left">Objectives</a>
<a href="/pages/about#guarantee"
class="ui-state-default">Guarantee</a>
<a href="/pages/ordering_delivery_payment#ordering"
class="ui-state-default">Ordering</a>
<a href="/pages/ordering_delivery_payment#delivery"
class="ui-state-default ">Delivery</a>
<a href="/pages/ordering_delivery_payment#payment"
class="ui-state-default ui-corner-right">Payment</a>
</p>

<p class="span-12">Grass Hill Foods Copyright © 2010, header
image via <a
href="http://www.flickr.com/photos/kevincollins/115305184/">kevincollins</a></p>
</div>
</footer:>
</old-page>
</extend>


Bryan

[Matt Jones]

On Apr 18, 2010, at 8:34 AM, Dimitri Roschkowski wrote:
>
> So is there a way to start from scratch or how can I just get the same
> code generated, the designer gave me?

I typically go one step further than Bryan, and just define the page
tag from scratch in application.dryml. Here's an example:

http://gist.github.com/371023

Some additional nav hackery going on in there that will eventually get
documented...

--Matt Jones