Model View CommandCOMMAND CHAIN PATTERN

Command vs. Controller

Command Controller

Command is Next Action to be Invoked

Controller is a set of methods packed in a class

Next action is a function or an Action Set

Contains method for particular operation

Command can be in different component

Unless tightly coupled, difficult to access different controller

Easy to visualize Logic as State Machine

Difficult to visualize Controller Logic

Easy to perform Command binding for Conditional Logic based on Data

Difficult to route different command based on Conditional Data

State Machine Pattern

• Data Entry

• HTTP Post

Next

• Upload File

Next • Refresh List

null

Next is Bindable Property

Is Search Text Empty?

Yes, Is Contact Text Empty?

Yes, Bind QueryByContact

Command

No, Bind QueryByAny CommandNo, Bind

QueryByName Command

Next is an Action Set (Instruction Set)

Action Set is a reference to Function

Or Action Set is an anonymous object with fields to modify properties

Or Action Set is an array of Action Set

Object with data property merges data properties to current control’s data property

Object with scope property merges scope properties to current object’s scope property

Object with appScope property merges scope properties to application scope

Reference to Function

// this is global JavaScript Function

function callMe(scope,sender){

//scope is current scope of caller

//sender is control

}

<button

atom-type=“AtomButton”

atom-next=“{callMe}”/>

Reference to Scope Function

// definition within the scope

({

callMe: function(scope,sender){

}

})

<button

atom-type=“AtomButton”

atom-next=“{$scope.callMe}”/>

Action Set to Modify Data

// anonymous object literal with data property will

// update name and id properties of data associated with

// the control

<button

atom-type=“AtomButton”

atom-next=“{ { data: { name:’Sample’, id: 0 } } }”/>

Binding Commands

// assuming we have two different forms for different

// genders, and we want to submit them

// according to the selected gender

<button

atom-type=“AtomButton”

atom-next=“[ $scope.gender == ‘male’ ? $scope.maleForm.submitCommand :

$scope.femaleForm.submitCommand ]”

/>

Bindable Commands

// following button command will increment count

// on every click

<button

atom-type=“AtomButton”

atom-next=“[ { scope: { counter: $scope.counter + 1 } } ]”/>

// Outer brackets signify one way binding, as after

// counter changes, next has to change as well

Array of Action Sets

// Notice, outer Square Brackets determine it is a

// One Way Binding

<button

atom-type=“AtomButton”

atom-next=“[ [$scope.callMe, $scope.theForm.submitCommand] ]”

Single UI Component

Model View Command separates everything, but everything still remains in one page

Easy to access UI Hierarchy

Easy to Isolate Visual Components as Controls

You can easily create chain of commands

More about Web Atoms

Web Atoms Web Site

http://webatoms.neurospeech.com

Web Atoms Documentation

http://neurospeech.com/webatoms/docs

Web Atoms Facebook Page

http://facebook.com/webatoms

Web Atoms Twitter Page

http://twitter.com/akashkava