Web Atoms

Web Atoms is a JavaScript library and framework that provides UI data binding and Web template system which are inspired from Apache Flex and Microsoft Silverlight. Web Atoms was written to focus more on Markup language like HTML rather than the Code JavaScript.

Key Focus of Web Atoms

• Use more Markup and Less Code
• Component Driven Development to increase Reusability
• Help existing Apache Flex developers to migrate to HTML
• Not to invent new language

Features

Web Atoms includes the following features:

• Declarative bindings
• Automatic UI refresh (One way and Two way binding)
• Template Engine
• Ready to use Business Controls
• Command Chaining
• Private Scope Isolation for Components
• Simple One Line of AJAX with AtomPromise

Simple Example

<div
    atom-type="AtomListBox"
    atom-items="{ AtomPromise.json('movie-list.json') }"
    atom-name="movieList"
    atom-auto-select-on-click="{ false }"
    atom-allow-multiple-selection="true"
    atom-value-path="MovieName"
    >
    <table>
        <thead>
            <tr>
                <th>
                    <input
                        type="checkbox"
                        atom-type="AtomCheckBox"
                        atom-is-checked="$[scope.movieList.selectAll]"/>
                </th>
                <th>
                    Movie
                </th>
                <th>
                    Category
                </th>
            </tr>
        </thead>
        <tbody
            atom-presenter="itemsPresenter">
            <tr atom-template="itemTemplate">
                <td><input type="checkbox" atom-type="AtomItemSelector"/></td>
                <td atom-text="{ $data.MovieName }"></td>
                <td atom-text="{ $data.MovieCategory }"></td>
            </tr>
        </tbody>
    </table>
</div>
 
<div>
    <span>Selected Movies: </span>
    <span atom-text="[($scope.movieList.value || '')]" ></span>
</div>

The above code contains a List Box with set of attributes that customizes its behavior. The above sample fetches list of countries from given URL, and then it displays in the table format. Child element of List Box element is template which defines visual layout of List Box. Web Atoms evaluates expressions with $ sign and performs UI Data Binding against those items.

Binding Convention

• A valid JavaScript Expression between curly braces {} is considered as One Time Binding and it is evaluated only once during initialization of component/element or control.
• A valid JavaScript Expression between square brackets [] is considered as One Way Binding (UI refreshes when target data changes) and $ determines beginning of source of change.
• A property path between square brackets [] prefixed with $ is considered as Two way binding in which Data Source is updated as well in response to user interaction.

Scope Isolation

Scope is an object store associated with UI Component or UI Control referred as AtomControl, which provides an isolated storage as per its position in UI Hierarchy. Every UI Control in Web Atoms has a property with name scope, appScope and localScope. Each property gives you access to scopes available at current Scope, Global Application Scope (Global Scope for every component to share data) and a private Local Scope. Scope and Global Scope are maintained by Web Atoms and developers can not control them, however developers can create Local Scope and every children is now part of new Local Scope and is isolated from other Scope.

By giving Name to UI Control, control and its properties become accessible through the scope.

Scope also lets you put functions in it, and different scopes never interfere with same named items. By convention, Scope initialization is written differently than conventional JavaScript.

<script type="text/javascript">
   ({
          start: 0,
          size: 20, 
          infoCommand: function(){
              alert('Done');
          }
    })
</script>

The above script is actually an harmless code, which does nothing when it is parsed and executed by browser. However, the library removes this script and stores it for execution on later stage. And when the controls are initialized, Web Atoms will setup scope corresponding to its position in UI Hierarchy. After setup, these values are available as $scope.start, $scope.size and $scope.infoCommand respectively. By accessing through scope property, it provides isolation needed for multi component hosting on one page.

Following sample illustrates use of local scope.

<div 
    atom-type="AtomControl"
    atom-local-scope="true"
    atom-abs-pos="100,100,500,200">
    <script type="text/javascript">
       ({
          name: "Scope 1",
          run: function (scope, sender) {
              alert("Called in Control with " + scope.name);
          }
        })
    </script>
 
    <button
        atom-event-click="{$localScope.run}">
        Execute <span atom-text="{$localScope.name}"></span></button>
</div>
 
<div 
    atom-type="AtomControl"
    atom-local-scope="true"
    atom-abs-pos="600,100,500,200">
    <script type="text/javascript">
       ({
          name: "Scope 2",
          run: function (scope, sender) {
              alert("Called in Control with " + scope.name);
          }
        })
    </script>
 
    <button
        atom-event-click="{$localScope.run}">
        Execute <span atom-text="{$localScope.name}"></span></button>
</div>

Simple AJAX (AtomPromise)

In order to provide simple interface to JavaScript promises to implement AJAX and similar asynchronous functionality, Web Atoms has incorporated AtomPromise in the property system, which lets us assign promise in simple expression, but it will do the complex event wiring automatically. In following example, you can see that we are assigning a JSON promise, and it looks like data from url is fetched and assigned to Combo Box. But in reality, we are only assigning a promise, and only if the result of promise will be successful, than actual items from the promise will be assigned in future.

The following example is pretty self-explanatory that we are loading list of countries from the given url 'country-list.json'

<select
    atom-name="countryCombo"
    atom-type="AtomComboBox"
    atom-items="{ AtomPromise.json('country-list.json') }"
    atom-value="$[scope.view]"
    >
</select>
 
<span 
    atom-text="['Selected Country Code is ' + $scope.countryCombo.value]" >
</span>

Templates

In order to achieve true separation of Data and UI, Web Atoms comes with simple DOM Node Templates, which uses UI Data Binding to display contents. And various controls define various templates that can be easily customized by changing Style and other properties of HTML Element. By simply applying an element with atom-template attribute, element is removed from UI Hierarchy and used as template to display the data.

<!-- List Box with Customized Item Template -->
 
<div 
    atom-type="AtomItemsControl"
    atom-items="{AtomPromise.json('/config/countries')}">
    <div
        atom-template="itemTemplate"
        style-background-color="{$data.value}"
        style-border-color="black"
        style-border-width="1px"
        style-border-style="solid"
        style-padding="5px">
        <span atom-text="{$data.label}"></span>
    </div>
</div>

Web Atoms provides extended mechanism of defining and binding individual style properties, which increases granularity of markup.

External links

• Official website