In the current version of my beloved wife’s application, I used a ComboxBox to fake the Application StatusBar and log information, action results… whatever that I wanted to provide to my dear user. As I’m working on an update of this app, I wanted to clean the code and refactor a little bit. Then, I decided to extend the Flex ComboBox to enhance the logging capabilities of this application.
The LogComboBox extends the Flex ComboBox, providing new properties and methods to turn it to a place where you can log anything to give to the user some feedbacks or just information on what the app does and results of user actionts.
The component is demonstrated below, used in the Panel ControlBar.
The component:
The LogComboBox is made up with a few other classes:
- Data are rendered using an external itemRenderer displaying the log type icon, the timestamp, the text. Long logs are truncated but can be seen in the tooltip of the item.
- a Formatter is used to format dates according to TimeStamps
- 2 enumeration classes:
- TimeStamp.as : defining the timestamps formats
- LogType.as : defining the types of logs items
- An interface: as I use the component embeded in a Container, I wanted to define an interface to ease the access to its methods.
Customization:
You can continue to customize your LogComboBox by adding new types of logs : I provide instructions to do so in the LogType.as class.
And you can, of course, change the included icons (originally from famfamfam), or just style it using a css file or skin it (using Inkscape for example 
).
Version 1.0
First release
Version 1.1
Added :
- Icon in the ComboBox, on the left of the textInput
Changed :
- text and value setters are overriden
- the definition of the icon classes and the function ‘Icon’ have been moved from the LogRenderer class
Version 1.2
- Interface no more needed
- Fixed performance issue with functions clear(), commitProperties() (commitProperties() is removed)
- Fixed bug when the combo is refreshed : showLastLog(), setComboText() and updateDisplayList() functions are modified
1. The use of percentWidth to size the component may lead to “over” size with long strings
Workaround :
- use width property if you face this issue.
- I have also read that you can catch the resize event of the container and then recalculate the ComboBox width during this event. I haven’t tested yet but I don’t feel this solution very smart, but if it works, why not …
So if someone has an idea to fix this behavior, I would appreciate any information …
2. The resizing of the Combo doesn’t behave correctly if you use icons with different size. The droplist has strange behavior also (size, can’t reach the last loggued item)
Workaround : use icons with same size to illustrate each log type.
Download:
Downloaded a total of 415 times
Licence:
This component is free for use, modification and distribution under the following condition:
Just mention the name and the url of the author in a part of your product that is visible to the user (about section, documentation…)
Next step:
As I said in the introduction, I faked the StatusBar of an AIR application to use this kind of component. In a coming article, I will show how to extend the StatusBar of an AIR application, including the LogComboBox.
Related posts
Written by Arnaud
Tags: AIR, Component, Flex
(1 votes, average: 1 out of 5)
Loading ...Comments are closed.
