Putting the V in MVCChris Bannon
about:me
Chris BannonProduct Manager
@b4nn0n
Hello!
The Big V
• V stands for View• It is the “Presentation Layer”• Responsible for the UI• Consists of HTML• HTML rendered via HTML Helpers
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.
“If only there were a way to turn simple HTML into a rich UI…”
?
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
“If only there were more of these awesome jQuery UI widgets…”
…
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
That’s me!
The Ultimate View
HTML jQuery!Widgets
CSSJava-ScriptHTML
Boom
In Other Words
$(“ul”).wijmenu();
$(“code”).show();
Benefits of “The Ultimate View”
• Take control over your markup– Clean & lean HTML–Maintainable markup
• Highly interactive UI• Easily integrates jQuery.ajax()• Themeroller support
ComponentOne’s Web Stack
MVC made easy!
Resources
Wijmo: http://wijmo.com jQuery: http://jquery.comjQueryUI: http://jqueryui.comThemeroller: http://jqueryui.com/themeroller/Me: http://twitter.com/b4nn0n
Thanks!
$(this).end();
l8r!
