Here comes just another JavaScript framework, well new complicated syntax, lots of new methods and lots of complex JavaScript files to manage? Certainly not, pain of JavaScript is real, and it is also the only option.

Mission of Web Atoms

  1. Not to Invent a New Language
  2. Use more Markup and Less Code (Less Script)
  3. Component Driven Development to increase reusability
  4. Help Existing Apache Flex developers to migrate to HTML5
  5. Integrate Features of Flex and Silverlight into JavaScript

Features

  • Declarative UI Bindings
  • Automatic UI Refresh (One way and Two way Binding)
  • Template Engine
  • Ready to use Business Controls
  • Command Chaining (Advanced MVC)
  • Private Scope Isolation for Components
  • Most Simple form of AJAX Ever (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>

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">
    ({
        view: 'red',
        list: [
            { label: 'Oranges', value: 'orange' },
            { label: 'Apples', value: 'red' },
            { label: 'Grapes', value: 'green' }
        ],
        display: function (item) {
            if (!item)
                return '';
            return item.label + ' are ' + item.value;
        }
    })
</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.view, $scope.list and $scope.display 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.

<div
    atom-type="AtomListBox"
    atom-items="{ AtomPromise.json('movie-list.json') }"
    atom-name="movieList"
    atom-auto-select-on-click="{ false }"
    >
    <div
        atom-template="itemTemplate">
        <button atom-type="AtomItemSelector">Select</button>
        <span atom-text="{ ($scope.item_index + 1) + ') ' }"></span>
        <span atom-text="{ $data.MovieName }"></span>
    </div>
</div>

Style Binding

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

<script type="text/javascript">
    ({
        list: [
            { label: 'Orange', itemColor: 'orange', itemWidth: 100 },
            { label: 'Apple', itemColor: 'red', itemWidth: 200 }
        ]
    })
</script>

<div
    atom-type="AtomItemsControl"
    atom-items="{ $scope.list }"
    >
    <div
        atom-template="itemTemplate"
        atom-text="{$data.label}"
        style-color="#000000"
        style-background-color="{$data.itemColor}"
        style-width="{ $data.itemWidth + 'px' }"
        >
    </div>
</div>

Style binding is useful when your style is available in the form of Data. Assuming in above example, list is populated from Data.

Licensing

Web Atoms JS is licensed in the following types, please note, license is applicable to the page of the site which uses Web Atoms JS Library.

  1. Free – Attributed License – Commercial or Non Commercial – Requires a back link in bottom right corner of every page to http://webatomsjs.neurospeech.com and Requires Registration with Our Site Directory.
  2. Non Commercial – Open Source Projects – Any open source free apps built and distributed under GPL, BSD, Apache or MIT license can use Web Atoms – Requires Registration with Our Site Directory.
  3. Yearly Subscription – Site License – Single Domain that can be hosted on any number of servers with yearly subscription of $99/year.
  4. Yearly Subscription – Server License – Single Server that can hosted any number of Sites with yearly subscription of $299/year.
  5. Site Perpetual License
    • $999 per Site for hosting on One Server
    • $1999 per Site for hosting on 10 Load Balancer Server
    • $4999 per Site to host on unlimited number of servers or CDN
  6. Server Perpetual License
    • $1999 per Server to host 10 Sites
    • $4999 per Server to host unlimited sites
    • $9999 Data Center License to host unlimited sites on unlimited servers

Documentation

To learn and explore Web Atoms in detail, please visit http://neurospeech.com/webatoms/docs

Share
Tagged with:  

NeuroSpeech releases XamlGenerator 1.0

On September 28, 2010, in Programming, Technology, by Akash Kava

XamlGenerator is Code Behind source code Generator for Xaml.

Xaml Code Behind Generator makes it easier to generate Code Behind designer code from XAML, where code can be used at places where Xaml Services are not accessible.
Features

  1. Using XAML 2009 in Silverlight and WPF
  2. Reusing Xaml Business Pages in Silverlight and WPF
  3. Support for User Controls derived from any Control
  4. Using Complied code instead of BAML
  5. Improving speed of XAML runtime
  6. Using XAML to generate code to be used in ASP.NET, Server Core etc, where XAML Services are not available
  7. Generated code is pure .NET 2.0 compliant, and you can target xaml objects to run in earlier .NET version too.
  8. You can also create Xaml for WinForms and use it for your .NET 2.0 projects, however please notice, the features of WPF will not be available, it can only create object hierarchies based on XAML, but it can not give you binding etc features.
  9. x:Name support for Resources, very useful for MVVM Pattern
  10. Support for Custom Extension with Custom Code Generator

Xaml Code Generator

.Net 4 introduces Xaml Services that can load Xaml Object Trees and it provides great deal in terms of intellisense and code behind facilities, however this can only be used where Xaml Services are installed. Also it is quite painful to debug and hide the generated baml resources, that actually is quite easy to disassemble and view the source.
Xaml Code Generator can easily solve these problems by creating source code equivalent to loading object via Xaml Services. Instead, once generated, the performance of source code is quite faster then baml and xaml. Since ASP.NET and WinForms, code behind files did serve great support to link the UI and Code. However in WPF and Silverlight does not support simple references to code behind objects except events. There are work arounds, but we decided to create Xaml Code Generator that will solve lot of problems.

Benefits to WPF and Silverlight

  1. Xaml pages can now use x:Reference markup extension
  2. Xaml pages can support generic type parameters
  3. Xaml page can now derive from any control/panel
  4. Xaml can easily reference any expression that involves code behind operation including "this" keyword
  5. By using custom Xaml markup extensions, you can reuse Xaml between WPF and Silverlight

Known limitations with Xaml Code Generated files

  1. Control Templates and Styles must use respective WPF/Silverlight markup only
  2. No code behind files can be generated for Control Templates and Styles
  3. Xaml pages can not be used with Navigation Urls
  4. Instead code generated files are simply source code equivalent of Xaml, and they should be treated as .Net CLR Objects instead of Xaml Pages and there exists no equivalent baml resources

So how to use benefits of Code Generator as well as XAML

We recommend following pattern to make use of best of both the worlds

  1. Create Main Application Window/Page as regular Xaml
  2. Instead of User Controls, use Xaml derived from Equivalent controls, such as StackPanel, Grid etc, and use them in Main Window/Pages
  3. In this pattern, generated CLR objects of xaml will perform exactly same

Why Generate source code from XAML?

Xaml and Xaml Services are great, they give a huge benefit in terms of runtime model loading and behaviour. For larger systems, and for complex enterprise applications Xaml is perfect. But we still have lot of code in .NET 2.0 and applications that are still heavily dependent on the components that do not support Xaml Services.
Plus, shift of paradigm from code behind to view model is quite painful. Infact ability to use more code behind features is quite needed for current generation.
Debugging Xaml is quite painful still, we still have lot of logic that lies in functional code and there is little more time still before we reach to completely modelled code.
Here are few benefits outlined of generated code,

  1. View Model can be replaced by Code behind, as we can easily reference xc:This and xc:Ref extensions
  2. Debugging c# code can be easier which involves more complex UI designs
  3. Xaml Generated can generate anything, even non UI code
  4. You can even use Xaml Generator in your DSL tool

For more details, please visit, http://xamlgenerator.codeplex.com/

Share
Tagged with: