Building UI with

jQuery & Wijmo

Chris Bannon

about:me

Chris BannonProduct Manager@b4nn0n

jQuery

• Makes JavaScript easy• Same code in every browser• Uses CSS selectors to find elements• Simplifies Ajax requests

Duh…

jQuery UI

• Easily apply animation effects• Widget library– Turns HTML into interactive UI– As easy to use as jQuery– Pre-themed with CSS– Function in every browser– Falls back to semantic HTML markup

Wijmo

• Builds on jQuery UI (not replaces it)– Adds features to jQuery UI widgets• Slider, Progressbar, etc.

– Adds new widgets to jQuery UI• Grid, Charts, Tree, etc.

• Themeroller-ready• As easy to use as jQuery• HTML5, CSS3 and SVG

Wijmo Complete

• Complete kit of jQuery UI widgets• Focused on app-centric UI– Data Visualization

• Charts (Bar, Line, Pie)

– Grid– Tree– Data Entry

• Input (Masked, Numeric, Date)• ComboBox

• Commercial license

Wijmo Open

• Focused on common UI elements– Navigation

• Menu• Tabs

– Forms• Textbox, Checkbox, Radio

– Calendar– Tooltip – Layout

• Accordion, Splitter, SuperPanel

– Open Source License

How it Works

HTML Wijmofy! Widget

CSSJava-ScriptHTML

In Other Words

$(“ul”).wijmenu();

$(“code”).show();

Finally

PROTIPSjQuery UI

Use CSS Framework Classes

$("fieldset") .addClass("ui-widget") .addClass("ui-corner-all");

Make Generic UI Builders

$("button").button(); $("input[type='text").wijtextbox();

Use the Pseudo Selector

$("input[type='text") .not(":wijmo-wijinputdate") .wijtextbox();

Create Option Sets

var optionStore = {};optionStore.slideMenu = {             orientation: "vertical",             mode: "sliding" };optionStore.toolbarMenu = {             orientation: "horizontal",             trigger: ".wijmo-wijmenu-item",             triggerEvent: "click" };

Resources

Wijmo: http://wijmo.com jQuery: http://jquery.comjQueryUI: http://jqueryui.comThemeroller: http://jqueryui.com/themeroller/Me: http://twitter.com/b4nn0n

Thanks!

$(this).end();

Goodbye!