Solution - UI Component Design

Solution Ė UI Component Design

I hope we all know the basic rule that whenever there is a complex problem that is to be solved, it is always better to break it down to sub problems and try solving the sub problem individually and then synthesizing the solution. So letís apply the same rule here as well. Break the problem into sub problem.

The first part of the problem is to come out with a Class Diagram which represents a whole part structure. The second part of the problem is to eliminate the difference between the Whole and the Part.

So letís draw a Class Diagram which represents a Whole Part Structure. Ok. Let me show you one more view of any whole part structure.

Figure- Figure

This is the runtime structure of any whole part structure.

So you will see that any Whole Part structure will have Root nodes, Intermediate nodes and Leaf nodes. Leaf nodes are the nodes that do not contain any other nodes, while Root nodes and Intermediate nodes can contain other nodes.

So letís come out with a Class Diagram. Where do we start? Your Class Diagram should have three classes. One for the Root nodes, one for the Leaf nodes and one for the Intermediate nodes

Now find out the inter relationship between the same. In this case we cannot have association or parent child relationship. The only relationship which is possible between these diagrams is a whole part relationship. So letís draw these whole part relationships between these classes.

Figure- Figure

If you can see this is a Class diagram of a complete Whole Part structure.

Can you tell me what is the technical difference between Root nodes and Intermediate nodes?

Both the RN and IN can hold other nodes but a RN will never be contained within any other nodes while an IN will be contained within any node.

But this distinction as to whether the RN or the IN has a parent or not, doesnít play role within the context of the problem that we are trying to solve. Hence we will generalize this diagram and instead of explicitly saying RN and IN, we will call them Composite Nodes. Composite nodes can have multiple nodes within it.

So now I will come out with a generalized class diagram, eliminating the difference between RN and IN.

Figure- Figure

It is the same as the previous figure but with Composite nodes used here.

So our first part of the problem is solved. Now letís solve the second part of the problem wherein we need to eliminate the difference between the Whole and the Part or between RN and IN.

So how do you eliminate the difference between two objects? Think about it. How did u eliminate the difference between you and your friend while giving a proxy?

I assume that you did it by making sure that you have the same interface as that of your friend. I hope you remember the concept?

So apply the same rule. Here you need to eliminate the difference between CN and IN. This can be achieved by making them implement the same interface.

Lets say the Whole part structure is a user interface so we make both the CN and IN implement the basic interface UI component which has a method called Paint ().

Figure- Figure

Now the moment I make CN and IN implement a basic interface UI component, there are some specific relationship in this figure which can be generalized, so spot that specific relationship and generalize are the same.

Ok. I will give you a clue. The moment we say that CN and IN implement the same interface UI component, we can also say that UI component can be of two types. Either it is a CN or it could be a Leaf node. So can I now change the figure like this?

Figure- Figure

previously we were explicitly saying that a CN is a collection of IN and Composite nodes is a collection of Composite nodes. But the moment we say that CN and IN implement the basic interface called UI Component, we can say a CN is a collection of UI components which can be either a CN or a Leaf node. The meaning remains the same.

So once we have understood this now we need to think as to what should be the implementation of the Paint() method of the Leaf node and what should be the implementation of the Paint() method of the CN.

The implementation of the Paint () method of the Leaf node should be as to how the Leaf node should be painted. For example, the Leaf node can be a Button, Text Box, Text area or any UI element which is discreet.

So the Paint () method of all the Leaf node should be as to how the Leaf node should be parted.

And what should be the Paint () method of CN? Simple. We know that a CN is a collection of UI Components and every UI Component has a method called Paint (). So the implementation of Paint () method of CN is nothing but to iterate through all the UI components in the collection and call Paint () on each of the UI component.

Letís say the collection is implemented as an array.

So the implementation of Paint () on the CN will be to call the Paint () on all UI Components in the collection.

Figure- Figure

Letís look into the code of the renderer.

UI component comp= null;

If (){

Comp= new window component ()

}

Comp. paint ();

Whenever a UI application needs to be rendered, the application provides the renderer with an object which implements the UI component interface.

The rendererís job is to just call the Paint () method of any object which implements the UI Component interface.

Letís say the object provided to the renderer is the top level window component which is the object of CN.

The renderer blindly calls the Paint () method on the window component which calls the Paint () method of CN where the implementation is to call the Paint () method of all child UI components which in turn recursively calls the Paint () of each of the CNs and this keeps happening till the Paint () of all the CNs are called and thatís where the User Interface is rendered.

This pattern can be considered like the Composite Design Pattern.

A Composite Design Pattern should be used whenever you want to design a Whole part structure eliminating the difference between Whole and Part.

 
Hemant Jha
Founder - VPlanSolutions
Researcher, Trainer

www.VPlanSolutions.co.in