Transcript
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
top related