Does my DIV look big in this?
Upcoming SlideShare
Loading in...5

Does my DIV look big in this?



A small set of Grails UI refactors that make it easier to manage the view tier.

A small set of Grails UI refactors that make it easier to manage the view tier.



Total Views
Views on SlideShare
Embed Views



3 Embeds 695 685 8 2



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Does my DIV look big in this? Does my DIV look big in this? Presentation Transcript

  • Does my <div/>look big in this? Putting some DRY in Grails UI with Glen Smith
  • Ancient Hacker Wisdom…If the ax is dull and its edge unsharpened, more strength is needed, but skill will bring success. Solomon, Ecclesiastes 10:10
  • Why this talk?
  • “The only thing I’maddicted to right now is winning.”
  • Since we’re talking… Sort out the DRY upmess of JS event Resources, handling… Forms & Nav… JavaScript HTML CSSDRY up CSS and standardise fonts/layout..
  • Best Case Outcomes• Learn Grails Resources• Pickup some UI Plugin Love• Try Less CSS & Twitter Bootstrap• Swap stories & have fun!
  • Could be handy…
  • App Demo
  • See Food DietAccount Meal Picture
  • <html>
  • Refactoring Resources
  • Benefits• Much DRYer Grails views• Dependency management of view tier stuff• Bundle and Minify/Compress automagically• Stops duplicate inclusions• Defers JS for performance• Caching forever (intelligent hashing)• Makes plugins for UI play nice (standardised)• Blah, Blah, Blah, it’s worth it, ok?
  • The 3 Essentials1. DEFINE (/grails-app/conf/MyAppResources.groovy *)2. TEMPLATE (<r:layoutResources/> in head and body)3. REQUIRE (target page <r:require modules=“growl”/>)
  • 1. Define Modulesmodules = { growl { dependsOn jquery‘ // order is important resource url:/css/growl/growl.css resource url:/js/growl/growl.js }}
  • Also: Disposition Tricksresource url:/js/growl/growl.js, disposition: ‘head
  • 2. Change the Template <r:layoutResources/>
  • 3. Change the Page<r:require modules=“a,b,c”/>
  • Look at the ChromeX-Grails-Resources-Original-Src:/bundle-bundle_jqplot_defer.js, /js/jqplot/excanvas.js, /js/jqplot/jquery.jqplot.js, /js/jqplot/jqplot.pieRenderer.js, /js/jqplot/jqplot.barRenderer.js, /js/jqplot/jqplot.categoryAxisRenderer.js, /js/jqplot/jqplot.pointLabels.js
  • Resources Demo
  • Lesser Known Goodness• <r:img>• <r:external>• <r:script disposition=“head”>• Module overrides
  • Debugging Resources?_debugResources=ygrails.resources.debug = true
  • Tools that play nice…• Cached-Resources• Zipped-Resources• And millions of 3 rd party library ones (blueprint, 960gs)
  • DRY Forms
  • Coming in Grails 2.x…
  • bean-fieldsUNTIL THEN…
  • A Typical Grails form…<ul class="errors" role="alert"><g:eachError bean="${authorInstance}" var="error"> <li <g:if test="${error inorg.springframework.validation.FieldError}">data-field-id="${error.field}"</g:if>><g:messageerror="${error}"/></li></g:eachError></ul>
  • Add tons of field code…<tr class="prop"> <td valign="top" class="name"> <label for="name"><g:messagecode="" default="Name"/></label> </td> <td valign="top" class="value${hasErrors(bean: accountInstance, field:name, errors)}"> <g:textField name="name"maxlength="200"value="${accountInstance?.name}" /> </td></tr>
  • With bean-fields…<bean:form beanName=“account” properties=“name,email”/>
  • Or Probably…<bean:form beanName=“account”> <bean:field property=“name”/> <bean:field property=“email”/> <!-- etc --></bean:form>
  • Customisation…
  • Beans Demo
  • Strategy• Create a GSP that contains all your <bean:xxxxTemplate> tags.• In your layout do <g:render template=“/common/formconf"/>• This will set up all your field styling for your pages.
  • TAMING THE DREADED…navigation
  • Geez, you don’t want…<div id="tabs"> <ul> <li id="${request.forwardURI =~ /entries/recent/ ? current : notcurrent}"><ahref="<g:createLink controller=entries action=recent/>">Just In</a></li> <li id="${request.forwardURI =~ /entries/popular/ ? current : notcurrent}"><ahref="<g:createLink controller=entries action=popular/>">Popular</a></li> <li id="${request.forwardURI =~ /entries/lists/ ? current : notcurrent}"><ahref="<g:createLink controller=entries action=lists/>">The Lists</a></li> <li id="${request.forwardURI =~ /account/ ? current : notcurrent}"><ahref="<g:createLink controller=account action=edit/>">My Blogs</a></li> <ul></div>
  • Get DRY with Controllersstatic navigation = [ group:tabs, order:99, title:Admin, action:index, isVisible: {SpringSecurityUtils.ifAnyGranted("ROLE_ADMIN") } ]
  • And the markup…<html> <head><nav:resources/></head><body> <div id="menu"> <nav:render group="tabs"/> </div> <g:layoutBody/></body> </html>
  • Going Custom<nav:eachItem group="tabs" var="item"> <li class="${ ? active : }"> <g:link controller="${item.controller}" action="${item.action}">${item.title} </g:link> </li></nav:eachItem>
  • Navigation Demo
  • .css
  • I mean, what could be better than css?
  • CSS:the deathof 1,000cuts
  • How about Less css!?!?
  • Enter Less.css• Variables• Mixins (with parameters!)• Nested Rules• Functions & Operators• Compiles to real CSS (or use as .less files with JS)
  • How It Works • Write source.less using variables,myfile.less mixins & nesting • Precompile (or use JavaScript compiler Lessc or less.js straight from the DOM) • Generate .css file for your browsermyfile.css
  • Compiling Lessgrails install-plugin lesscss-resources
  • Variables@color: #4D926F;#header { color: @color;}h2 { color: @color;}
  • Nested Resources#header { h1 { font-size: 26px; font-weight: bold; } p { font-size: 12px; a { text-decoration: none; &:hover { border-width: 1px } } }}
  • Mixins.rounded-corners (@radius: 5px) { border-radius: @radius; -webkit-border-radius: @radius; -moz-border-radius: @radius;}#header { .rounded-corners; }#footer { .rounded-corners(10px); }
  • Less.css Demo
  • Doing this stuff by hand …is for bozos
  • It’s time to get really, really, ridiculouslygood looking…
  • Meet Twitter Bootstrap• Grid system• Fonts & Styling• Forms• Nav• Alerts
  • Everything* you need to know .span16 .row.container OR .container-fluid .span12 .span4 .row .span4 .span6 .span6 .row .offset4 * For very small values of everything
  • You do design on paper?
  • Integration Options1. Plugin (but you’re stuck with updates)2. CSS (but it’s hard to tweak)3. LESS files (like a complete boss!)
  • Getting Jiggy with UI You’re going to like this…
  • </wrap>
  • What we’ve learned… Sort out the DRY upmess of JS event Resources, handling… Forms & Nav… JavaScript HTML CSSDRY up CSS and standardise fonts/layout..
  • Thanks for Coming!
  • Image Credits• Hipster -• The Knives -• Giant Backbone -• Tangled Wires -