Does my DIV look big in this?

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

“The only thing I’m
addicted to right now is
winning.”

Since we’re talking…
Sort out the DRY up
mess of JS event Resources,
handling… Forms & Nav…

JavaScript HTML

CSS
DRY 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…

https://github.com/glenasmith/shameless

See Food Diet
Account

Meal

Picture

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 Essentials
1. DEFINE (/grails-app/conf/MyAppResources.groovy *)
2. TEMPLATE (<r:layoutResources/> in head and body)
3. REQUIRE (target page <r:require modules=“growl”/>)

1. Define Modules
modules = {
growl {
dependsOn 'jquery‘
// order is important
resource url:'/css/growl/growl.css'
resource url:'/js/growl/growl.js'
}
}

Also: Disposition Tricks

resource 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 Chrome
X-Grails-Resources-Original-Src:
/bundle-bundle_jqplot_defer.js, /js/jqplot/exca
nvas.js, /js/jqplot/jquery.jqplot.js, /js/jqplot/jqp
lot.pieRenderer.js, /js/jqplot/jqplot.barRenderer.
js, /js/jqplot/jqplot.categoryAxisRenderer.js, /js
/jqplot/jqplot.pointLabels.js

Lesser Known Goodness
• <r:img>
• <r:external>
• <r:script disposition=“head”>
• Module overrides

Debugging Resources
?_debugResources=y
grails.resources.debug = true

Tools that play nice…
• Cached-Resources
• Zipped-Resources
• And millions of 3 rd party library

ones (blueprint, 960gs)

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>

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>

With bean-fields…

<bean:form
beanName=“account”
properties=“name,email”/>

Or Probably…
<bean:form beanName=“account”>
<bean:field property=“name”/>
<bean:field property=“email”/>

</bean:form>

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'}"><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>

Get DRY with Controllers
static 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="${item.active ? 'active' : ''}">
<g:link controller="${item.controller}"
action="${item.action}">${item.title}
</g:link>
</li>
</nav:eachItem>

I mean, what could be
better than 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 browser
myfile.css

Compiling Less

grails 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); }

Doing this stuff by hand
…is for bozos

It’s time to get
really, really,
ridiculously
good 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

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!)

Getting Jiggy with UI
You’re going to like this…

What we’ve learned…
Sort out the DRY up
mess of JS event Resources,
handling… Forms & Nav…

JavaScript HTML

CSS
DRY up CSS and
standardise
fonts/layout..

Thanks for Coming!
@glen_a_smith

blogs.bytecode.com.au/glen

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

Does my DIV look big in this?

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (19)

Destacado

Destacado (15)

Similar a Does my DIV look big in this?

Similar a Does my DIV look big in this? (20)

Último

Último (20)

Does my DIV look big in this?