Web AtomsMore Markup Less Code

HTML as Universal UI Language

HTML

Mobile

PCTablets

Camera

TV

• Each device has different UI Elements and Different way of Interaction

• Each device has different scale and screen measurement

• Each device needs different programming language expertise

• Each device has its own set of APIs• Emerge of Unified HTML Device Programming

like PhoneGap• UI is complex to write, and is even more

complex to rewrite for different platforms• Web is truly a unified version of User Interface

Development Nightmares with JavaScript

• Easy to write

• Difficult to maintain

• Difficult to Refractor

• Difficult to understand our own code• Can not blame anyone for my own code

• Difficult to visualize UI Hierarchy• How does my UI Looks?

• And this is what code looks at the end

Markup MXML, XAML, XUL

• Markups are easy to write and visualize

• Easy to divide

• Easy to reuse

• Flex, Silverlight and XUL• Can create Custom Elements• Extend existing Elements• Collapse/Expand nodes to visualize• Easy to refractor

HTML Problems

• Unable to create Custom Elements (Components/Controls)

• Unable to extend elements

• HTML and JavaScript are independent

• Conflicting IDs of Elements

• Scripts and Elements are loosely coupled

• Cross Browser Problems (Fixed with jQuery)• Too much of jQuery leads to Complex Code

Web Atoms – Brings Best of Flex/Silverlight

Web Atoms

Silverlight• DockPanel• Templates

Flex• Controls• Bindings

More Markup Less Code

• Many ready to use Controls

• Simple Binding Expressions• One Time Binding• One Way Binding• Two Way Binding

• Style Binding

• CSS Customization

• Control Templates

• Scope Isolation

Simple Installation/Start

• Add following in HTML• jQuery (1.7 Onwards)• WebAtoms.js• WebAtoms.css• Customized Web Atoms Classes CSS (Optional)• AppConfig.js (Optional-Just a Config that changes default WebAtoms

Behaviour such as common AJAX headers, Image path)

• Define one Div as AtomApplication• Every child element is now part of Web Atoms Framework

Easy to Debug

• Every Web Atoms Control is assigned an unique HTML ID

• .atomControl property exposes control associated with element

• waXXX.atomControl.get_propertyName() returns value in console

• .atomControl.bindings hold AtomBinding, which• Contain reference of element to change• Contain key (path of property) of element to change• Contain property path of source• Contain last set value for debugging

Atom.set, Atom.get (Only in JS Code)

• JavaScript objects did not allow property accessors/mutators• Some does now, but IE does not, till 10.0, we still have many to support

• AtomControls define property as get_/set_ set of methods• Value property is defined as get_value and set_value functions

• JSON retrieved from AJAX contains direct named members

• Atom.set, Atom.get methods first check if get_/set_ methods exist on target, otherwise access member with same name

• Atom.set also updates the UI

• Binding expressions take care of Atom.set/Atom.get Automatically

Templates

• You can customize templates by designating one element as atom-template

• Control expects templates to represent data

• Learning Silverlight will help you in understanding how templates interact

• Templates can change look and feel of existing controls completely

Line of Business Controls

• AtomItemsControl• Hosts list of data objects• Displays data with

itemTemplate• Allows filtering/sorting

• AtomNavigatorList• Simplified Master-Detail View• iPhone/iPad type of Detail/Back

Navigation• Supports Data Paging

• AtomWindow• Modal Window to host

content/iframe

• AtomWizard• Ready to use Control to

implement multi step process

More…

• Web Atoms Website• http://webatoms.neurospeech.com

• Web Atoms Documentation• http://neurospeech.com/webatoms/docs

• FaceBook Page• http://facebook.com/webatoms

• Twitter Page• http://twitter.com/akashkava