In second part, we talked about the methods that need to be overridden while creating custom components. There is no silver bullet to kill all the confusions, writing custom component comes by going through some good examples and by practicing them. Let us consider one example where I want to create a simple breadcrumb navigator. One example is below:
So lets do some brain storming. First assumption is the number of breadcrumb items will be known in advance. All the items must reside in some sort of container, so one suggestion would be to extend SkinnableContainer or may be Border Container. Which one shall we choose depends on our requirements? What capabilities do we need for our container etc. Moreover BorderContainer extends SkinnableContainer and has some additional benefit of quickly setting up border.
Second, we can use buttons to represent our breadcrumb items. We can write custom skins for the buttons. First button and last button may have different skins, rest will have same sort of skin. We can also add event listener to all the buttons in partAdded() method, and they will also be removed in partRemoved() method. The click action can be handled in respective click handler method defined for the click event on every button. We can dispatch an event also from here. We can define that event as metadata tag on the top of the component. One detailed example can be found here.
We need to understand one thing very clearly. If we want any component to be skin part (in simple terms, somehow available in the visual appearance of the component), then the best place to add all the event handlers to that component is partAdded() method. We seldom need to override updateDisplayList() method etc for Spark components. But that happens when component need to know some particular positioning information etc. of a skin part, e.g. in Slider component. Otherwise all the components follow up some standard conventions. Based on user action we want visual appearance of the component to change, for that we can use getCurrentSkinState() method that will provide the current state of the skin (and not the component, component state and skin state are two different things).
It is difficult to cover all the aspects here, so I am giving some useful links below:
http://saturnboy.com/2010/06/drawer-component-flex-4/
http://flexponential.com/2010/01/24/custom-focusskin-for-spark-components-in-flex-4/
http://weblog.mrinalwadhwa.com/2009/12/01/custom-components-in-flex-4/
So lets do some brain storming. First assumption is the number of breadcrumb items will be known in advance. All the items must reside in some sort of container, so one suggestion would be to extend SkinnableContainer or may be Border Container. Which one shall we choose depends on our requirements? What capabilities do we need for our container etc. Moreover BorderContainer extends SkinnableContainer and has some additional benefit of quickly setting up border.
Second, we can use buttons to represent our breadcrumb items. We can write custom skins for the buttons. First button and last button may have different skins, rest will have same sort of skin. We can also add event listener to all the buttons in partAdded() method, and they will also be removed in partRemoved() method. The click action can be handled in respective click handler method defined for the click event on every button. We can dispatch an event also from here. We can define that event as metadata tag on the top of the component. One detailed example can be found here.
We need to understand one thing very clearly. If we want any component to be skin part (in simple terms, somehow available in the visual appearance of the component), then the best place to add all the event handlers to that component is partAdded() method. We seldom need to override updateDisplayList() method etc for Spark components. But that happens when component need to know some particular positioning information etc. of a skin part, e.g. in Slider component. Otherwise all the components follow up some standard conventions. Based on user action we want visual appearance of the component to change, for that we can use getCurrentSkinState() method that will provide the current state of the skin (and not the component, component state and skin state are two different things).
It is difficult to cover all the aspects here, so I am giving some useful links below:
http://saturnboy.com/2010/06/drawer-component-flex-4/
http://flexponential.com/2010/01/24/custom-focusskin-for-spark-components-in-flex-4/
http://weblog.mrinalwadhwa.com/2009/12/01/custom-components-in-flex-4/
No comments:
Post a Comment