model view command pattern
TRANSCRIPT
![Page 1: Model View Command Pattern](https://reader036.vdocuments.site/reader036/viewer/2022062419/558a1a8dd8b42ab0618b45d2/html5/thumbnails/1.jpg)
Model View CommandCOMMAND CHAIN PATTERN
![Page 2: Model View Command Pattern](https://reader036.vdocuments.site/reader036/viewer/2022062419/558a1a8dd8b42ab0618b45d2/html5/thumbnails/2.jpg)
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
![Page 3: Model View Command Pattern](https://reader036.vdocuments.site/reader036/viewer/2022062419/558a1a8dd8b42ab0618b45d2/html5/thumbnails/3.jpg)
State Machine Pattern
• Data Entry
• HTTP Post
Next
• Upload File
Next • Refresh List
null
![Page 4: Model View Command Pattern](https://reader036.vdocuments.site/reader036/viewer/2022062419/558a1a8dd8b42ab0618b45d2/html5/thumbnails/4.jpg)
Next is Bindable Property
Is Search Text Empty?
Yes, Is Contact Text Empty?
Yes, Bind QueryByContact
Command
No, Bind QueryByAny CommandNo, Bind
QueryByName Command
![Page 5: Model View Command Pattern](https://reader036.vdocuments.site/reader036/viewer/2022062419/558a1a8dd8b42ab0618b45d2/html5/thumbnails/5.jpg)
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
![Page 6: Model View Command Pattern](https://reader036.vdocuments.site/reader036/viewer/2022062419/558a1a8dd8b42ab0618b45d2/html5/thumbnails/6.jpg)
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}”/>
![Page 7: Model View Command Pattern](https://reader036.vdocuments.site/reader036/viewer/2022062419/558a1a8dd8b42ab0618b45d2/html5/thumbnails/7.jpg)
Reference to Scope Function
// definition within the scope
({
callMe: function(scope,sender){
}
})
<button
atom-type=“AtomButton”
atom-next=“{$scope.callMe}”/>
![Page 8: Model View Command Pattern](https://reader036.vdocuments.site/reader036/viewer/2022062419/558a1a8dd8b42ab0618b45d2/html5/thumbnails/8.jpg)
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 } } }”/>
![Page 9: Model View Command Pattern](https://reader036.vdocuments.site/reader036/viewer/2022062419/558a1a8dd8b42ab0618b45d2/html5/thumbnails/9.jpg)
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 ]”
/>
![Page 10: Model View Command Pattern](https://reader036.vdocuments.site/reader036/viewer/2022062419/558a1a8dd8b42ab0618b45d2/html5/thumbnails/10.jpg)
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
![Page 11: Model View Command Pattern](https://reader036.vdocuments.site/reader036/viewer/2022062419/558a1a8dd8b42ab0618b45d2/html5/thumbnails/11.jpg)
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] ]”
![Page 12: Model View Command Pattern](https://reader036.vdocuments.site/reader036/viewer/2022062419/558a1a8dd8b42ab0618b45d2/html5/thumbnails/12.jpg)
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
![Page 13: Model View Command Pattern](https://reader036.vdocuments.site/reader036/viewer/2022062419/558a1a8dd8b42ab0618b45d2/html5/thumbnails/13.jpg)
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