Model View Command Pattern
Download as PPTX, PDF2 likes1,026 views
The document discusses the Command pattern and how it compares to the Controller pattern. It explains that a Command represents the next action to invoke, while a Controller contains methods for particular operations. The document also describes how to use Next as a bindable property or action set to modify data or scope properties. It provides examples of binding commands conditionally and arrays of action sets. Overall, the Command pattern separates logic into individual commands that can be executed as a chain to perform operations.
![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 ]”
/>](https://image.slidesharecdn.com/model-view-command-web-atoms-130325045304-phpapp02/85/Model-View-Command-Pattern-9-320.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](https://image.slidesharecdn.com/model-view-command-web-atoms-130325045304-phpapp02/85/Model-View-Command-Pattern-10-320.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] ]”](https://image.slidesharecdn.com/model-view-command-web-atoms-130325045304-phpapp02/85/Model-View-Command-Pattern-11-320.jpg)
Model View Command Pattern
- 1. Model View Command COMMAND CHAIN PATTERN
- 2. Command vs. Controller Command Controller Command is Next Action to be Controller is a set of methods packed Invoked in a class Next action is a function or an Action Contains method for particular Set operation Command can be in different Unless tightly coupled, difficult to component access different controller Easy to visualize Logic as State Difficult to visualize Controller Logic Machine Easy to perform Command binding for Difficult to route different command Conditional Logic based on Data based on Conditional Data
- 3. State Machine Pattern • Data Entry Next • Refresh • HTTP Post • Upload List File Next null
- 4. Next is Bindable Property Yes, Bind QueryByContact Command Yes, Is Contact Text Empty? No, Bind Is Search Text QueryByAny Empty? No, Bind Command QueryByName Command
- 5. 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
- 6. 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}”/>
- 7. Reference to Scope Function // definition within the scope ({ callMe: function(scope,sender){ } }) <button atom-type=“AtomButton” atom-next=“{$scope.callMe}”/>
- 8. 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 } } }”/>
- 9. 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 ]” />
- 10. 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
- 11. 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] ]”
- 12. 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
- 13. 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