Design Pattern: Composite Pattern
As you all know Design Pattern has great applications in the programming world. Perhaps many of you are not familiar with it so you can follow the next post to get an overview of Design Pattern and command pattern examples.
In today’s article, I will introduce the Composite Pattern
Still will like the article above I will follow 3 parts:
- Composite pattern
- How to use Composite Pattern
- Application of Composite Pattern in IOS programming
Composite Pattern
Composite is a design belonging to the Structural Pattern group. Composite Pattern is a combination of components related to each other to create a larger component. It allows to perform interactions with all objects in the same sample. Below is a diagram depicting this pattern. Composite Pattern includes the following components:
- Component protocol : Ensures all components in the tree are handled in the same direction.
- Leaf : A component in the tree but has no children.
- Composite : A container containing leaf objects and other composites .
All composite and leaf nodes derive from the component protocol. We can organize several different leaf layers in the composite object.
How to use Composite Pattern
Composite Pattern is used when we need to handle a similar group of objects in a way that handles an object. The composite pattern arranges objects according to a tree structure to explain one part as well as the entire hierarchy. This pattern creates a class containing its own object group. This class provides ways to modify groups of the same object. This pattern allows clients to write the same code to interact with this composite object, regardless of whether it is an individual object or a collection of objects.
A simple example can be seen that is: Array is a composite with main component is Array. This composite is a container to contain leaf objects, with each leaf being an Int or String type or whatever you add to the array.
Above is how to use but certainly quite vague, right ?. Let’s go to implement it right away.
First we initialize a View class that acts as a Component Protocol with all the methods of initializing, adding and removing to perform additional operations and delete child views in it. In addition, View also has names and may have superView, childViews, so we declare these additional properties in View.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <span class="token keyword">class</span> <span class="token class-name">View</span> <span class="token punctuation">:</span> <span class="token builtin">NSObject</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> children <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token builtin">View</span> <span class="token punctuation">]</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token keyword">var</span> parent <span class="token punctuation">:</span> <span class="token builtin">View</span> <span class="token operator">?</span> <span class="token keyword">var</span> name <span class="token punctuation">:</span> <span class="token builtin">String</span> <span class="token keyword">init</span> <span class="token punctuation">(</span> name <span class="token punctuation">:</span> <span class="token builtin">String</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">self</span> <span class="token punctuation">.</span> name <span class="token operator">=</span> name <span class="token keyword">super</span> <span class="token punctuation">.</span> <span class="token keyword">init</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token keyword">func</span> <span class="token function">add</span> <span class="token punctuation">(</span> view <span class="token punctuation">:</span> <span class="token builtin">View</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> children <span class="token punctuation">.</span> <span class="token function">append</span> <span class="token punctuation">(</span> view <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token keyword">func</span> <span class="token function">remove</span> <span class="token punctuation">(</span> view <span class="token punctuation">:</span> <span class="token builtin">View</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">for</span> <span class="token punctuation">(</span> index <span class="token punctuation">,</span> child <span class="token punctuation">)</span> <span class="token keyword">in</span> <span class="token function">enumerate</span> <span class="token punctuation">(</span> children <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> child <span class="token operator">===</span> view <span class="token punctuation">{</span> children <span class="token punctuation">.</span> <span class="token function">removeAtIndex</span> <span class="token punctuation">(</span> index <span class="token punctuation">)</span> <span class="token keyword">break</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
Initiate the initialization of Leaf Buttons and Label implementations of methods and properties of Component Protocol View.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <span class="token keyword">class</span> <span class="token class-name">Button</span> <span class="token punctuation">:</span> <span class="token builtin">View</span> <span class="token punctuation">{</span> <span class="token keyword">override</span> <span class="token keyword">func</span> <span class="token function">add</span> <span class="token punctuation">(</span> view <span class="token punctuation">:</span> <span class="token builtin">View</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> <span class="token keyword">override</span> <span class="token keyword">func</span> <span class="token function">remove</span> <span class="token punctuation">(</span> view <span class="token punctuation">:</span> <span class="token builtin">View</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token keyword">class</span> <span class="token class-name">Label</span> <span class="token punctuation">:</span> <span class="token builtin">View</span> <span class="token punctuation">{</span> <span class="token keyword">override</span> <span class="token keyword">func</span> <span class="token function">add</span> <span class="token punctuation">(</span> view <span class="token punctuation">:</span> <span class="token builtin">View</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> <span class="token keyword">override</span> <span class="token keyword">func</span> <span class="token function">remove</span> <span class="token punctuation">(</span> view <span class="token punctuation">:</span> <span class="token builtin">View</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
We try to create a Dialog that acts as a Composite containing leaves and implement the method of Component Protocol View and try a little as follows:
1 2 3 4 5 6 7 8 9 10 11 | <span class="token keyword">class</span> <span class="token class-name">Dialog</span> <span class="token punctuation">:</span> <span class="token builtin">View</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> <span class="token keyword">var</span> button <span class="token operator">=</span> <span class="token function">Button</span> <span class="token punctuation">(</span> name <span class="token punctuation">:</span> <span class="token string">"button"</span> <span class="token punctuation">)</span> <span class="token keyword">var</span> label <span class="token operator">=</span> <span class="token function">Label</span> <span class="token punctuation">(</span> name <span class="token punctuation">:</span> <span class="token string">"label"</span> <span class="token punctuation">)</span> <span class="token keyword">var</span> dialog <span class="token operator">=</span> <span class="token function">Dialog</span> <span class="token punctuation">(</span> name <span class="token punctuation">:</span> <span class="token string">"dialog"</span> <span class="token punctuation">)</span> dialog <span class="token punctuation">.</span> <span class="token function">add</span> <span class="token punctuation">(</span> button <span class="token punctuation">)</span> dialog <span class="token punctuation">.</span> <span class="token function">add</span> <span class="token punctuation">(</span> label <span class="token punctuation">)</span> dialog <span class="token punctuation">.</span> <span class="token function">remove</span> <span class="token punctuation">(</span> button <span class="token punctuation">)</span> |
As we can see it is quite simple, isn’t it.
However, when will we use the Composite Pattern?
- Composite Pattern should only be applied when the object group must act as a single object (in the same way).
- Composite Pattern can be used to create a tree-like structure.
Application of Composite Pattern in IOS programming
The basic View example we just made is the greatest demonstration of the application of the Composite pattern in ios programming.
Above is the Composite Pattern and its usage and application in IOS programming. Hopefully, this will be of some help to new students who are learning about design patterns. See you in the next post sharing.