Putting the V in MVC
-
Upload
chris-bannon -
Category
Technology
-
view
103 -
download
0
description
Transcript of Putting the V in MVC
www.mvcConf.com
Putting the V in MVC
Using jQuery UI & Wijmo
www.mvcConf.com
about:me
Chris BannonProduct Manager
@b4nn0n
Hello!
www.mvcConf.com
The Big V
• V stands for View• It is the “Presentation Layer”• Responsible for the UI• Consists of HTML• HTML rendered via HTML Helpers
www.mvcConf.com
HTML Helpers
• “Help” us create HTML• Provide Helpers for simple elements
– TextBoxes, HyperLinks, etc.
• In the end, they just return a String• Complex HTML Helpers can get messy
– Menu, Grid, Tree, etc.
www.mvcConf.com
“If only there were a way to turn simple HTML into a rich UI…”
?
www.mvcConf.com
Enter jQuery UI
• Widget library– Turns HTML into interactive UI– As easy to use as jQuery– Pre-themed with CSS– Works in every browser– Falls back to semantic HTML markup
• Easily apply animation effects
www.mvcConf.com
“If only there were more of these awesome jQuery UI widgets…”
…
www.mvcConf.com
Enter Wijmo
• Extends jQuery UI (not replaces it)– Adds features to jQuery UI widgets
• Slider, Progressbar, etc.
– Adds new widgets to jQuery UI– Grid, Charts, Tree, etc.
• Works in every browser (even IE6)• Themeroller-ready• As easy to use as jQuery• HTML5, CSS3 and SVG
www.mvcConf.com
The Ultimate View
HTML jQuery!Widgets
CSSJava-ScriptHTML
www.mvcConf.com
In Other Words
$(“ul”).wijmenu();
www.mvcConf.com
$(“code”).show();
www.mvcConf.com
Benefits of “The Ultimate View”
• Take control over your markup– Clean & lean HTML– Maintainable markup
• Highly interactive UI• Easily integrates jQuery.ajax()• Themeroller support
www.mvcConf.com
Resources
Wijmo: http://wijmo.com
jQuery: http://jquery.com
jQueryUI: http://jqueryui.com
Themeroller: http://jqueryui.com/themeroller/
Me: http://twitter.com/b4nn0nThanks!
www.mvcConf.com
$(this).end();
l8r!