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!