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.  ...
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,  h...
Best Case Outcomes• Learn Grails Resources• Pickup some UI Plugin Love• Try Less CSS & Twitter Bootstrap• Swap stories & h...
Could be handy…https://github.com/glenasmith/shameless
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 automagicall...
The 3 Essentials1. DEFINE (/grails-app/conf/MyAppResources.groovy *)2. TEMPLATE (<r:layoutResources/> in head and body)3. ...
1. Define Modulesmodules = {     growl {          dependsOn jquery‘          // order is important          resource url:/...
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/jquer...
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=...
Add tons of field code…<tr class="prop">    <td valign="top" class="name">        <label for="name"><g:messagecode="accoun...
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 ...
Customisation…
Beans Demo
Strategy• Create a GSP that contains all your  <bean:xxxxTemplate> tags.• In your layout do <g:render  template=“/common/f...
TAMING THE DREADED…navigation
Geez, you don’t want…<div id="tabs">  <ul>            <li id="${request.forwardURI =~ /entries/recent/ ? current : notcurr...
Get DRY with Controllersstatic navigation = [              group:tabs,              order:99,              title:Admin,   ...
And the markup…<html> <head><nav:resources/></head><body>     <div id="menu">           <nav:render group="tabs"/>     </d...
Going Custom<nav:eachItem group="tabs" var="item">  <li class="${item.active ? active : }">       <g:link controller="${it...
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...
How It Works              • Write source.less using variables,myfile.less     mixins & nesting              • Precompile (...
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:...
Mixins.rounded-corners (@radius: 5px) {     border-radius: @radius;     -webkit-border-radius: @radius;     -moz-border-ra...
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....
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 ...
Getting Jiggy with UI  You’re going to like this…
</wrap>
What we’ve learned… Sort out the                             DRY upmess of JS event                         Resources,  ha...
Thanks for Coming!          @glen_a_smithblogs.bytecode.com.au/glen
Image Credits•   Hipster - http://www.flickr.com/photos/another_point_in_time/4743084835•   The Knives - http://www.flickr...
Does my DIV look big in this?
Does my DIV look big in this?
Does my DIV look big in this?
Does my DIV look big in this?
Does my DIV look big in this?
Does my DIV look big in this?
Does my DIV look big in this?
Does my DIV look big in this?
Upcoming SlideShare
Loading in...5
×

Does my DIV look big in this?

2,131

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,131
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
19
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Does my DIV look big in this?

  1. 1. Does my <div/>look big in this? Putting some DRY in Grails UI with Glen Smith
  2. 2. 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
  3. 3. Why this talk?
  4. 4. “The only thing I’maddicted to right now is winning.”
  5. 5. 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..
  6. 6. Best Case Outcomes• Learn Grails Resources• Pickup some UI Plugin Love• Try Less CSS & Twitter Bootstrap• Swap stories & have fun!
  7. 7. Could be handy…https://github.com/glenasmith/shameless
  8. 8. App Demo
  9. 9. See Food DietAccount Meal Picture
  10. 10. <html>
  11. 11. Refactoring Resources
  12. 12. 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?
  13. 13. 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”/>)
  14. 14. 1. Define Modulesmodules = { growl { dependsOn jquery‘ // order is important resource url:/css/growl/growl.css resource url:/js/growl/growl.js }}
  15. 15. Also: Disposition Tricksresource url:/js/growl/growl.js, disposition: ‘head
  16. 16. 2. Change the Template <r:layoutResources/>
  17. 17. 3. Change the Page<r:require modules=“a,b,c”/>
  18. 18. 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
  19. 19. Resources Demo
  20. 20. Lesser Known Goodness• <r:img>• <r:external>• <r:script disposition=“head”>• Module overrides
  21. 21. Debugging Resources?_debugResources=ygrails.resources.debug = true
  22. 22. Tools that play nice…• Cached-Resources• Zipped-Resources• And millions of 3 rd party library ones (blueprint, 960gs)
  23. 23. DRY Forms
  24. 24. Coming in Grails 2.x…
  25. 25. bean-fieldsUNTIL THEN…
  26. 26. 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>
  27. 27. Add tons of field code…<tr class="prop"> <td valign="top" class="name"> <label for="name"><g:messagecode="account.name.label" 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>
  28. 28. With bean-fields…<bean:form beanName=“account” properties=“name,email”/>
  29. 29. Or Probably…<bean:form beanName=“account”> <bean:field property=“name”/> <bean:field property=“email”/> <!-- etc --></bean:form>
  30. 30. Customisation…
  31. 31. Beans Demo
  32. 32. 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.
  33. 33. TAMING THE DREADED…navigation
  34. 34. 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>
  35. 35. Get DRY with Controllersstatic navigation = [ group:tabs, order:99, title:Admin, action:index, isVisible: {SpringSecurityUtils.ifAnyGranted("ROLE_ADMIN") } ]
  36. 36. And the markup…<html> <head><nav:resources/></head><body> <div id="menu"> <nav:render group="tabs"/> </div> <g:layoutBody/></body> </html>
  37. 37. Going Custom<nav:eachItem group="tabs" var="item"> <li class="${item.active ? active : }"> <g:link controller="${item.controller}" action="${item.action}">${item.title} </g:link> </li></nav:eachItem>
  38. 38. Navigation Demo
  39. 39. .css
  40. 40. I mean, what could be better than css?
  41. 41. CSS:the deathof 1,000cuts
  42. 42. How about Less css!?!?
  43. 43. Enter Less.css• Variables• Mixins (with parameters!)• Nested Rules• Functions & Operators• Compiles to real CSS (or use as .less files with JS)
  44. 44. 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
  45. 45. Compiling Lessgrails install-plugin lesscss-resources
  46. 46. Variables@color: #4D926F;#header { color: @color;}h2 { color: @color;}
  47. 47. Nested Resources#header { h1 { font-size: 26px; font-weight: bold; } p { font-size: 12px; a { text-decoration: none; &:hover { border-width: 1px } } }}
  48. 48. Mixins.rounded-corners (@radius: 5px) { border-radius: @radius; -webkit-border-radius: @radius; -moz-border-radius: @radius;}#header { .rounded-corners; }#footer { .rounded-corners(10px); }
  49. 49. Less.css Demo
  50. 50. Doing this stuff by hand …is for bozos
  51. 51. It’s time to get really, really, ridiculouslygood looking…
  52. 52. Meet Twitter Bootstrap• Grid system• Fonts & Styling• Forms• Nav• Alerts
  53. 53. 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
  54. 54. You do design on paper?
  55. 55. Integration Options1. Plugin (but you’re stuck with updates)2. CSS (but it’s hard to tweak)3. LESS files (like a complete boss!)
  56. 56. Getting Jiggy with UI You’re going to like this…
  57. 57. </wrap>
  58. 58. 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..
  59. 59. Thanks for Coming! @glen_a_smithblogs.bytecode.com.au/glen
  60. 60. Image Credits• Hipster - http://www.flickr.com/photos/another_point_in_time/4743084835• The Knives - http://www.flickr.com/photos/mcdnry/2347884938• Giant Backbone - http://www.flickr.com/photos/25289142@N05/4559842516• Tangled Wires - http://www.flickr.com/photos/randomurl/440190706
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×