building ui with jquery and wijmo
DESCRIPTION
Chris Bannon shows how jQuery can be used to build powerful UI’s for the Web. Discover the benefits of using jQuery to create interfaces, including a separation from which server-side technology you choose. You’ll walk away with knowledge on how to leverage jQuery & Wijmo when building Web apps.TRANSCRIPT
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!