does my div look big in this?
DESCRIPTION
A small set of Grails UI refactors that make it easier to manage the view tier.TRANSCRIPT
![Page 1: Does my DIV look big in this?](https://reader035.vdocuments.mx/reader035/viewer/2022062307/555707c7d8b42a274d8b4cc1/html5/thumbnails/1.jpg)
Does my <div/> look big in this?
Putting some DRY in Grails UI with Glen Smith
![Page 2: Does my DIV look big in this?](https://reader035.vdocuments.mx/reader035/viewer/2022062307/555707c7d8b42a274d8b4cc1/html5/thumbnails/2.jpg)
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
![Page 3: Does my DIV look big in this?](https://reader035.vdocuments.mx/reader035/viewer/2022062307/555707c7d8b42a274d8b4cc1/html5/thumbnails/3.jpg)
Why this talk?
![Page 4: Does my DIV look big in this?](https://reader035.vdocuments.mx/reader035/viewer/2022062307/555707c7d8b42a274d8b4cc1/html5/thumbnails/4.jpg)
“The only thing I’m addicted to right now is
winning.”
![Page 5: Does my DIV look big in this?](https://reader035.vdocuments.mx/reader035/viewer/2022062307/555707c7d8b42a274d8b4cc1/html5/thumbnails/5.jpg)
Since we’re talking…
HTML
CSS
JavaScript
DRY up Resources,
Forms & Nav…
DRY up CSS and standardise
fonts/layout..
Sort out the mess of JS event
handling…
![Page 6: Does my DIV look big in this?](https://reader035.vdocuments.mx/reader035/viewer/2022062307/555707c7d8b42a274d8b4cc1/html5/thumbnails/6.jpg)
![Page 7: Does my DIV look big in this?](https://reader035.vdocuments.mx/reader035/viewer/2022062307/555707c7d8b42a274d8b4cc1/html5/thumbnails/7.jpg)
Best Case Outcomes • Learn Grails Resources
•Pickup some UI Plugin Love
•Try Less CSS & Twitter Bootstrap
•Swap stories & have fun!
![Page 8: Does my DIV look big in this?](https://reader035.vdocuments.mx/reader035/viewer/2022062307/555707c7d8b42a274d8b4cc1/html5/thumbnails/8.jpg)
Could be handy…
https://github.com/glenasmith/shameless
![Page 9: Does my DIV look big in this?](https://reader035.vdocuments.mx/reader035/viewer/2022062307/555707c7d8b42a274d8b4cc1/html5/thumbnails/9.jpg)
App Demo
![Page 10: Does my DIV look big in this?](https://reader035.vdocuments.mx/reader035/viewer/2022062307/555707c7d8b42a274d8b4cc1/html5/thumbnails/10.jpg)
See Food Diet Account
Meal
Picture
![Page 11: Does my DIV look big in this?](https://reader035.vdocuments.mx/reader035/viewer/2022062307/555707c7d8b42a274d8b4cc1/html5/thumbnails/11.jpg)
<html>
![Page 12: Does my DIV look big in this?](https://reader035.vdocuments.mx/reader035/viewer/2022062307/555707c7d8b42a274d8b4cc1/html5/thumbnails/12.jpg)
![Page 13: Does my DIV look big in this?](https://reader035.vdocuments.mx/reader035/viewer/2022062307/555707c7d8b42a274d8b4cc1/html5/thumbnails/13.jpg)
Refactoring Resources
![Page 14: Does my DIV look big in this?](https://reader035.vdocuments.mx/reader035/viewer/2022062307/555707c7d8b42a274d8b4cc1/html5/thumbnails/14.jpg)
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?
![Page 15: Does my DIV look big in this?](https://reader035.vdocuments.mx/reader035/viewer/2022062307/555707c7d8b42a274d8b4cc1/html5/thumbnails/15.jpg)
The 3 Essentials 1. DEFINE (/grails-app/conf/MyAppResources.groovy *)
2. TEMPLATE (<r:layoutResources/> in head and body)
3. REQUIRE (target page <r:require modules=“growl”/>)
![Page 16: Does my DIV look big in this?](https://reader035.vdocuments.mx/reader035/viewer/2022062307/555707c7d8b42a274d8b4cc1/html5/thumbnails/16.jpg)
1. Define Modules
modules = {
growl {
dependsOn 'jquery‘
// order is important
resource url:'/css/growl/growl.css'
resource url:'/js/growl/growl.js'
}
}
![Page 17: Does my DIV look big in this?](https://reader035.vdocuments.mx/reader035/viewer/2022062307/555707c7d8b42a274d8b4cc1/html5/thumbnails/17.jpg)
![Page 18: Does my DIV look big in this?](https://reader035.vdocuments.mx/reader035/viewer/2022062307/555707c7d8b42a274d8b4cc1/html5/thumbnails/18.jpg)
![Page 19: Does my DIV look big in this?](https://reader035.vdocuments.mx/reader035/viewer/2022062307/555707c7d8b42a274d8b4cc1/html5/thumbnails/19.jpg)
Also: Disposition Tricks
resource url:'/js/growl/growl.js', disposition: ‘head'
![Page 20: Does my DIV look big in this?](https://reader035.vdocuments.mx/reader035/viewer/2022062307/555707c7d8b42a274d8b4cc1/html5/thumbnails/20.jpg)
2. Change the Template
<r:layoutResources/>
![Page 21: Does my DIV look big in this?](https://reader035.vdocuments.mx/reader035/viewer/2022062307/555707c7d8b42a274d8b4cc1/html5/thumbnails/21.jpg)
3. Change the Page
<r:require modules=“a,b,c”/>
![Page 22: Does my DIV look big in this?](https://reader035.vdocuments.mx/reader035/viewer/2022062307/555707c7d8b42a274d8b4cc1/html5/thumbnails/22.jpg)
Look at the Chrome
X-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
![Page 23: Does my DIV look big in this?](https://reader035.vdocuments.mx/reader035/viewer/2022062307/555707c7d8b42a274d8b4cc1/html5/thumbnails/23.jpg)
Resources Demo
![Page 24: Does my DIV look big in this?](https://reader035.vdocuments.mx/reader035/viewer/2022062307/555707c7d8b42a274d8b4cc1/html5/thumbnails/24.jpg)
Lesser Known Goodness •<r:img>
•<r:external>
•<r:script disposition=“head”>
•Module overrides
![Page 25: Does my DIV look big in this?](https://reader035.vdocuments.mx/reader035/viewer/2022062307/555707c7d8b42a274d8b4cc1/html5/thumbnails/25.jpg)
Debugging Resources ?_debugResources=y
grails.resources.debug = true
![Page 26: Does my DIV look big in this?](https://reader035.vdocuments.mx/reader035/viewer/2022062307/555707c7d8b42a274d8b4cc1/html5/thumbnails/26.jpg)
Tools that play nice… •Cached-Resources
•Zipped-Resources
•And millions of 3rd party library
ones (blueprint, 960gs)
![Page 27: Does my DIV look big in this?](https://reader035.vdocuments.mx/reader035/viewer/2022062307/555707c7d8b42a274d8b4cc1/html5/thumbnails/27.jpg)
DRY Forms
![Page 28: Does my DIV look big in this?](https://reader035.vdocuments.mx/reader035/viewer/2022062307/555707c7d8b42a274d8b4cc1/html5/thumbnails/28.jpg)
Coming in Grails 2.x…
![Page 29: Does my DIV look big in this?](https://reader035.vdocuments.mx/reader035/viewer/2022062307/555707c7d8b42a274d8b4cc1/html5/thumbnails/29.jpg)
UNTIL THEN… bean-fields
![Page 30: Does my DIV look big in this?](https://reader035.vdocuments.mx/reader035/viewer/2022062307/555707c7d8b42a274d8b4cc1/html5/thumbnails/30.jpg)
A Typical Grails form…
<ul class="errors" role="alert">
<g:eachError bean="${authorInstance}" var="error">
<li <g:if test="${error in
org.springframework.validation.FieldError}">data-
field-id="${error.field}"</g:if>><g:message
error="${error}"/></li>
</g:eachError>
</ul>
![Page 31: Does my DIV look big in this?](https://reader035.vdocuments.mx/reader035/viewer/2022062307/555707c7d8b42a274d8b4cc1/html5/thumbnails/31.jpg)
Add tons of field code… <tr class="prop">
<td valign="top" class="name">
<label for="name"><g:message code="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>
![Page 32: Does my DIV look big in this?](https://reader035.vdocuments.mx/reader035/viewer/2022062307/555707c7d8b42a274d8b4cc1/html5/thumbnails/32.jpg)
With bean-fields…
<bean:form
beanName=“account”
properties=“name,email”/>
![Page 33: Does my DIV look big in this?](https://reader035.vdocuments.mx/reader035/viewer/2022062307/555707c7d8b42a274d8b4cc1/html5/thumbnails/33.jpg)
Or Probably…
<bean:form beanName=“account”>
<bean:field property=“name”/>
<bean:field property=“email”/>
<!-- etc -->
</bean:form>
![Page 34: Does my DIV look big in this?](https://reader035.vdocuments.mx/reader035/viewer/2022062307/555707c7d8b42a274d8b4cc1/html5/thumbnails/34.jpg)
Customisation…
![Page 35: Does my DIV look big in this?](https://reader035.vdocuments.mx/reader035/viewer/2022062307/555707c7d8b42a274d8b4cc1/html5/thumbnails/35.jpg)
Beans Demo
![Page 36: Does my DIV look big in this?](https://reader035.vdocuments.mx/reader035/viewer/2022062307/555707c7d8b42a274d8b4cc1/html5/thumbnails/36.jpg)
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.
![Page 37: Does my DIV look big in this?](https://reader035.vdocuments.mx/reader035/viewer/2022062307/555707c7d8b42a274d8b4cc1/html5/thumbnails/37.jpg)
TAMING THE DREADED…
navigation
![Page 38: Does my DIV look big in this?](https://reader035.vdocuments.mx/reader035/viewer/2022062307/555707c7d8b42a274d8b4cc1/html5/thumbnails/38.jpg)
![Page 39: Does my DIV look big in this?](https://reader035.vdocuments.mx/reader035/viewer/2022062307/555707c7d8b42a274d8b4cc1/html5/thumbnails/39.jpg)
Geez, you don’t want…
<div id="tabs">
<ul>
<li id="${request.forwardURI =~ /entries\/recent/ ? 'current' : 'notcurrent'}"><a href="<g:createLink controller='entries' action='recent'/>">Just In</a></li>
<li id="${request.forwardURI =~ /entries\/popular/ ? 'current' : 'notcurrent'}"><a href="<g:createLink controller='entries' action='popular'/>">Popular</a></li>
<li id="${request.forwardURI =~ /entries\/lists/ ? 'current' : 'notcurrent'}"><a href="<g:createLink controller='entries' action='lists'/>">The Lists</a></li>
<li id="${request.forwardURI =~ /account/ ? 'current' : 'notcurrent'}"><a href="<g:createLink controller='account' action='edit'/>">My Blogs</a></li>
<ul>
</div>
![Page 40: Does my DIV look big in this?](https://reader035.vdocuments.mx/reader035/viewer/2022062307/555707c7d8b42a274d8b4cc1/html5/thumbnails/40.jpg)
Get DRY with Controllers static navigation = [
group:'tabs',
order:99,
title:'Admin',
action:'index',
isVisible: { SpringSecurityUtils.ifAnyGranted("ROLE_ADMIN") }
]
![Page 41: Does my DIV look big in this?](https://reader035.vdocuments.mx/reader035/viewer/2022062307/555707c7d8b42a274d8b4cc1/html5/thumbnails/41.jpg)
And the markup… <html> <head><nav:resources/></head> <body>
<div id="menu">
<nav:render group="tabs"/>
</div>
<g:layoutBody/>
</body> </html>
![Page 42: Does my DIV look big in this?](https://reader035.vdocuments.mx/reader035/viewer/2022062307/555707c7d8b42a274d8b4cc1/html5/thumbnails/42.jpg)
![Page 43: Does my DIV look big in this?](https://reader035.vdocuments.mx/reader035/viewer/2022062307/555707c7d8b42a274d8b4cc1/html5/thumbnails/43.jpg)
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>
![Page 44: Does my DIV look big in this?](https://reader035.vdocuments.mx/reader035/viewer/2022062307/555707c7d8b42a274d8b4cc1/html5/thumbnails/44.jpg)
Navigation Demo
![Page 45: Does my DIV look big in this?](https://reader035.vdocuments.mx/reader035/viewer/2022062307/555707c7d8b42a274d8b4cc1/html5/thumbnails/45.jpg)
.css
![Page 46: Does my DIV look big in this?](https://reader035.vdocuments.mx/reader035/viewer/2022062307/555707c7d8b42a274d8b4cc1/html5/thumbnails/46.jpg)
![Page 47: Does my DIV look big in this?](https://reader035.vdocuments.mx/reader035/viewer/2022062307/555707c7d8b42a274d8b4cc1/html5/thumbnails/47.jpg)
I mean, what could be
better than css?
![Page 48: Does my DIV look big in this?](https://reader035.vdocuments.mx/reader035/viewer/2022062307/555707c7d8b42a274d8b4cc1/html5/thumbnails/48.jpg)
CSS:
the death
of 1,000
cuts
![Page 49: Does my DIV look big in this?](https://reader035.vdocuments.mx/reader035/viewer/2022062307/555707c7d8b42a274d8b4cc1/html5/thumbnails/49.jpg)
How about Less css!?!?
![Page 50: Does my DIV look big in this?](https://reader035.vdocuments.mx/reader035/viewer/2022062307/555707c7d8b42a274d8b4cc1/html5/thumbnails/50.jpg)
Enter Less.css • Variables
• Mixins (with parameters!)
• Nested Rules
• Functions & Operators
• Compiles to real CSS (or use as .less files with JS)
![Page 51: Does my DIV look big in this?](https://reader035.vdocuments.mx/reader035/viewer/2022062307/555707c7d8b42a274d8b4cc1/html5/thumbnails/51.jpg)
How It Works myfile.less
• Write source.less using variables, mixins & nesting
Lessc or less.js
• Precompile (or use JavaScript compiler straight from the DOM)
myfile.css • Generate .css file for your browser
![Page 52: Does my DIV look big in this?](https://reader035.vdocuments.mx/reader035/viewer/2022062307/555707c7d8b42a274d8b4cc1/html5/thumbnails/52.jpg)
Compiling Less
grails install-plugin lesscss-resources
![Page 53: Does my DIV look big in this?](https://reader035.vdocuments.mx/reader035/viewer/2022062307/555707c7d8b42a274d8b4cc1/html5/thumbnails/53.jpg)
Variables @color: #4D926F;
#header {
color: @color;
}
h2 {
color: @color;
}
![Page 54: Does my DIV look big in this?](https://reader035.vdocuments.mx/reader035/viewer/2022062307/555707c7d8b42a274d8b4cc1/html5/thumbnails/54.jpg)
Nested Resources #header {
h1 {
font-size: 26px;
font-weight: bold;
}
p { font-size: 12px;
a { text-decoration: none;
&:hover { border-width: 1px }
}
}
}
![Page 55: Does my DIV look big in this?](https://reader035.vdocuments.mx/reader035/viewer/2022062307/555707c7d8b42a274d8b4cc1/html5/thumbnails/55.jpg)
Mixins .rounded-corners (@radius: 5px) {
border-radius: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
}
#header { .rounded-corners; }
#footer { .rounded-corners(10px); }
![Page 56: Does my DIV look big in this?](https://reader035.vdocuments.mx/reader035/viewer/2022062307/555707c7d8b42a274d8b4cc1/html5/thumbnails/56.jpg)
Less.css Demo
![Page 57: Does my DIV look big in this?](https://reader035.vdocuments.mx/reader035/viewer/2022062307/555707c7d8b42a274d8b4cc1/html5/thumbnails/57.jpg)
Doing this stuff by hand …is for bozos
![Page 58: Does my DIV look big in this?](https://reader035.vdocuments.mx/reader035/viewer/2022062307/555707c7d8b42a274d8b4cc1/html5/thumbnails/58.jpg)
It’s time to get
really, really,
ridiculously
good looking…
![Page 59: Does my DIV look big in this?](https://reader035.vdocuments.mx/reader035/viewer/2022062307/555707c7d8b42a274d8b4cc1/html5/thumbnails/59.jpg)
Meet Twitter Bootstrap • Grid system
• Fonts & Styling
• Forms
•Nav
• Alerts
![Page 60: Does my DIV look big in this?](https://reader035.vdocuments.mx/reader035/viewer/2022062307/555707c7d8b42a274d8b4cc1/html5/thumbnails/60.jpg)
![Page 61: Does my DIV look big in this?](https://reader035.vdocuments.mx/reader035/viewer/2022062307/555707c7d8b42a274d8b4cc1/html5/thumbnails/61.jpg)
Everything* you need to know
.span16
.span12
.span6 .span6
.span4
.span4 .offset4
.co
nta
iner
OR
.co
nta
iner
-flu
id
.ro
w
.ro
w
.ro
w
* For very small values of everything
![Page 62: Does my DIV look big in this?](https://reader035.vdocuments.mx/reader035/viewer/2022062307/555707c7d8b42a274d8b4cc1/html5/thumbnails/62.jpg)
You do design on paper?
![Page 63: Does my DIV look big in this?](https://reader035.vdocuments.mx/reader035/viewer/2022062307/555707c7d8b42a274d8b4cc1/html5/thumbnails/63.jpg)
Integration Options 1. Plugin (but you’re stuck with updates)
2. CSS (but it’s hard to tweak)
3. LESS files (like a complete boss!)
![Page 64: Does my DIV look big in this?](https://reader035.vdocuments.mx/reader035/viewer/2022062307/555707c7d8b42a274d8b4cc1/html5/thumbnails/64.jpg)
Getting Jiggy with UI You’re going to like this…
![Page 65: Does my DIV look big in this?](https://reader035.vdocuments.mx/reader035/viewer/2022062307/555707c7d8b42a274d8b4cc1/html5/thumbnails/65.jpg)
</wrap>
![Page 66: Does my DIV look big in this?](https://reader035.vdocuments.mx/reader035/viewer/2022062307/555707c7d8b42a274d8b4cc1/html5/thumbnails/66.jpg)
What we’ve learned…
HTML
CSS
JavaScript
DRY up Resources,
Forms & Nav…
DRY up CSS and standardise
fonts/layout..
Sort out the mess of JS event
handling…
![Page 67: Does my DIV look big in this?](https://reader035.vdocuments.mx/reader035/viewer/2022062307/555707c7d8b42a274d8b4cc1/html5/thumbnails/67.jpg)
Thanks for Coming!
@glen_a_smith
blogs.bytecode.com.au/glen
![Page 68: Does my DIV look big in this?](https://reader035.vdocuments.mx/reader035/viewer/2022062307/555707c7d8b42a274d8b4cc1/html5/thumbnails/68.jpg)
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