Your SlideShare is downloading. ×
Does my DIV look big in this?
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Does my DIV look big in this?

2,097

Published on

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.

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,097
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
18
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Does my <div/>look big in this? Putting some DRY in Grails UI with Glen Smith
  • 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. Why this talk?
  • 4. “The only thing I’maddicted to right now is winning.”
  • 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. Best Case Outcomes• Learn Grails Resources• Pickup some UI Plugin Love• Try Less CSS & Twitter Bootstrap• Swap stories & have fun!
  • 7. Could be handy…https://github.com/glenasmith/shameless
  • 8. App Demo
  • 9. See Food DietAccount Meal Picture
  • 10. <html>
  • 11. Refactoring Resources
  • 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. 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. 1. Define Modulesmodules = { growl { dependsOn jquery‘ // order is important resource url:/css/growl/growl.css resource url:/js/growl/growl.js }}
  • 15. Also: Disposition Tricksresource url:/js/growl/growl.js, disposition: ‘head
  • 16. 2. Change the Template <r:layoutResources/>
  • 17. 3. Change the Page<r:require modules=“a,b,c”/>
  • 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. Resources Demo
  • 20. Lesser Known Goodness• <r:img>• <r:external>• <r:script disposition=“head”>• Module overrides
  • 21. Debugging Resources?_debugResources=ygrails.resources.debug = true
  • 22. Tools that play nice…• Cached-Resources• Zipped-Resources• And millions of 3 rd party library ones (blueprint, 960gs)
  • 23. DRY Forms
  • 24. Coming in Grails 2.x…
  • 25. bean-fieldsUNTIL THEN…
  • 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. 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. With bean-fields…<bean:form beanName=“account” properties=“name,email”/>
  • 29. Or Probably…<bean:form beanName=“account”> <bean:field property=“name”/> <bean:field property=“email”/> <!-- etc --></bean:form>
  • 30. Customisation…
  • 31. Beans Demo
  • 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. TAMING THE DREADED…navigation
  • 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. Get DRY with Controllersstatic navigation = [ group:tabs, order:99, title:Admin, action:index, isVisible: {SpringSecurityUtils.ifAnyGranted("ROLE_ADMIN") } ]
  • 36. And the markup…<html> <head><nav:resources/></head><body> <div id="menu"> <nav:render group="tabs"/> </div> <g:layoutBody/></body> </html>
  • 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. Navigation Demo
  • 39. .css
  • 40. I mean, what could be better than css?
  • 41. CSS:the deathof 1,000cuts
  • 42. How about Less css!?!?
  • 43. Enter Less.css• Variables• Mixins (with parameters!)• Nested Rules• Functions & Operators• Compiles to real CSS (or use as .less files with JS)
  • 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. Compiling Lessgrails install-plugin lesscss-resources
  • 46. Variables@color: #4D926F;#header { color: @color;}h2 { color: @color;}
  • 47. Nested Resources#header { h1 { font-size: 26px; font-weight: bold; } p { font-size: 12px; a { text-decoration: none; &:hover { border-width: 1px } } }}
  • 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. Less.css Demo
  • 50. Doing this stuff by hand …is for bozos
  • 51. It’s time to get really, really, ridiculouslygood looking…
  • 52. Meet Twitter Bootstrap• Grid system• Fonts & Styling• Forms• Nav• Alerts
  • 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. You do design on paper?
  • 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. Getting Jiggy with UI You’re going to like this…
  • 57. </wrap>
  • 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. Thanks for Coming! @glen_a_smithblogs.bytecode.com.au/glen
  • 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

×