(Fx)ComboBox architecture

Report · Feb 15, 2009

Hi,

I was unable to attend i11 meeting but I have fund that you are going to implement (Fx)ComboBox during this iteration. As I have very mixed feelings about ComboBase in Flex 3 I would like to share my comments before FxComboBox is implemented.

Generally:
FxComboBase should focus on displaying the textfield/button and handling dropdown (including dropdown creation, showing, hiding, effects etc.). It should be easy to put any components inside the dropdown.

In Flex 3 every subclass of ComboBase(ComboBox, ColorPicker, DatieField) implemented dropdown handling separately, while ComboBase was playing around with iterators, selectedItem/Index and UIDs stuff which is specific to ComboBox not a ComboBase.
As a result of that when I needed to create a custom Combo-like component with TextInupt and Tree inside a dropdown I found that it was easier to create it from scratch than to extend ComboBase.

My idea on how it should be changed:

FxComboBase:
- It should contain 3 skin parts: text field (optional), button and dropdown
- Dropdown should be a Group so that subclasses could put any components inside it (probably FxComboBase could extend FxContainer)
- It should implement methods responsible for showing/hiding the dropdown as well as variables indicating if dropdown is shown
- selectedItem/selectedIndex properties should not be included in FxComboBase as they are not common for all of its subclasses.

FxComboBox:
- FxComboBox should extend FxComboBase
- Single selection FxList should be placed inside dropdown
- All functions like get/set selectedIndex/selectedItem etc. should be mapped to FxList functions
- Default property should point to FxLists dataProvider
- Selected items label should be mapped as buttons label

CustomComboComponent:
- It should extend FxComboBase
- A number of components should be placed inside dropdown
- Button label should be set
- Only CustomComboComponents specific logic should be added without need to think about stuff like showing or hiding dropdown.

What do you think about this concept?
Could you publish FxComboBox specification draft before it is implemented so that we can discuss it?

Cheers,
Iwo Banas

Report · Feb 15, 2009

The spec will hopefully go live this week. I think it probably matches up with most of your thoughts.

On 2/15/09 7:02 AM, "Iwo Banas" < member@adobeforums.com> wrote:

A new discussion was started by Iwo Banas in

Developers --

(Fx)ComboBox architecture

Hi,

I was unable to attend i11 meeting but I have fund that you are going to implement (Fx)ComboBox during this iteration. As I have very mixed feelings about ComboBase in Flex 3 I would like to share my comments before FxComboBox is implemented.

Generally:

FxComboBase should focus on displaying the textfield/button and handling dropdown (including dropdown creation, showing, hiding, effects etc.). It should be easy to put any components inside the dropdown.

In Flex 3 every subclass of ComboBase(ComboBox, ColorPicker, DatieField) implemented dropdown handling separately, while ComboBase was playing around with iterators, selectedItem/Index and UIDs stuff which is specific to ComboBox not a ComboBase.

As a result of that when I needed to create a custom Combo-like component with TextInupt and Tree inside a dropdown I found that it was easier to create it from scratch than to extend ComboBase.

My idea on how it should be changed:

FxComboBase:

- It should contain 3 skin parts: text field (optional), button and dropdown

- Dropdown should be a Group so that subclasses could put any components inside it (probably FxComboBase could extend FxContainer)

- It should implement methods responsible for showing/hiding the dropdown as well as variables indicating if dropdown is shown

- selectedItem/selectedIndex properties should not be included in FxComboBase as they are not common for all of its subclasses.

FxComboBox:

- FxComboBox should extend FxComboBase

- Single selection FxList should be placed inside dropdown

- All functions like get/set selectedIndex/selectedItem etc. should be mapped to FxList functions

- Default property should point to FxLists dataProvider

- Selected items label should be mapped as button’s label

CustomComboComponent:

- It should extend FxComboBase

- A number of components should be placed inside dropdown

- Button label should be set

- Only CustomComboComponents specific logic should be added without need to think about stuff like showing or hiding dropdown.

What do you think about this concept?

Could you publish FxComboBox specification draft before it is implemented so that we can discuss it?

Cheers,

Iwo Banas

View/reply at (Fx)ComboBox architecture < http://www.adobeforums.com/webx?13@@.59b7eed4>

Replies by email are OK.

Use the unsubscribe < http://www.adobeforums.com/webx?280@@.59b7eed4!folder=.3c060fa3> form to cancel your email subscription.

Report · Mar 17, 2009

This is just a suggestion.

It would be nice to have a searchable option for combobox. Google mail has a very nice way of filtering dropdown components. We can filter the labels by doing a search on it (top dropdowns in google mail).

As a developer i would expect the following properties for the combobox:
searchable = true|false
filterFunction = Function

(Filter function should be able to return a data provider for the combobox)

Thanks,
Jakes.

Report · Mar 17, 2009

Thanks for the suggestion Jakes. Please file an enhancement request.

Report · Mar 17, 2009

<div class=Section1> color:#1F497D'>Typically, we have folks filter the dataprovider. Not sure we’d bake all of that into a basic ComboBox. Third-parties are welcome to supply one that integrates filtering as there are many UI’s for doing so.<o:p></o:p> color:#1F497D'><o:p> </o:p> color:#1F497D'>Alex Harui<o:p></o:p> color:#1F497D'>Flex SDK Developer<o:p></o:p> color:#1F497D'><a href="http://www.adobe.com/">Adobe Systems Inc.</a><o:p></o:p> color:#1F497D'>Blog: <a href="http://blogs.adobe.com/aharui"><span style='color:blue'>http://blogs.adobe.com/aharui</a><o:p></o:p> color:#1F497D'><o:p> </o:p> <div style='border:none;border-top:solid #B5C4DF 1.0pt;padding:3.0pt 0in 0in 0in'> From:<span style='font-size:10.0pt;font-family:"Tahoma","sans-serif"'> vera carr [mailto:member@adobeforums.com] Sent: Tuesday, March 17, 2009 10:40 AM To: flexsdk-dev@adobeforums.com Subject: Re: (Fx)ComboBox architecture<o:p></o:p> </div> <o:p> </o:p> A new message was posted by vera carr in Developers -- (Fx)ComboBox architecture Thanks for the suggestion Jakes. Please file an enhancement request. <o:p></o:p> <div class=MsoNormal> <hr size=2 width=200 style='width:150.0pt' align=left> </div> View/reply at <a href="http://www.adobeforums.com/webx?13@@.59b7eed4/2">(Fx)ComboBox architecture</a> Replies by email are OK. Use the <a href="http://www.adobeforums.com/webx?280@@.59b7eed4!folder=.3c060fa3">unsubscribe</a> form to cancel your email subscription.<o:p></o:p> </div>

Report · Mar 18, 2009

On Wednesday 18 Mar 2009, Alex Harui wrote:

> Typically, we have folks filter the dataprovider. Not sure wed bake all

> of that into a basic ComboBox. Third-parties are welcome to supply one

> that integrates filtering as there are many UIs for doing so.

Async. filtering is also a pain, UX wise - should you stop the user entering

anymore letters while you make the server call, for instance.

--

Tom Chiverton

Helping to autoschediastically evolve distributed cross-platform B2B

convergence as part of the IT team of the year, '09 and '08

****************************************************

This email is sent for and on behalf of Halliwells LLP.

Halliwells LLP is a limited liability partnership registered in England and Wales under registered number OC307980 whose registered office address is at Halliwells LLP, 3 Hardman Square, Spinningfields, Manchester, M3 3EB. A list of members is available for inspection at the registered office together with a list of those non members who are referred to as partners. We use the word partner to refer to a member of the LLP, or an employee or consultant with equivalent standing and qualifications. Regulated by the Solicitors Regulation Authority.

CONFIDENTIALITY

This email is intended only for the use of the addressee named above and may be confidential or legally privileged. If you are not the addressee you must not read it and must not use any information contained in nor copy it nor inform any person other than Halliwells LLP or the addressee of its existence or contents. If you have received this email in error please delete it and notify Halliwells LLP IT Department on 0870 365 2500.

For more information about Halliwells LLP visit www.halliwells.com.

Report · Mar 18, 2009

Jakes,

I'm working on this exact functionality for a Flextras component . I've been calling it AutoComplete as opposed to searchable.

You can view our presentation of the first prerelease here http://experts.na3.acrobat.com/p28173821/ .

The prerelease in the hands of beta testers, and you can join the beta by creating an account at http://www.flextras.com/?c=105 and selecting the join the beta link from the account menu.

As Alex suggested, the component works by filtering the dataProvider. We provide a default function baked into the component, but you could also provide your own filter mechanism by setting the filterFunction property.

We expect to release a 2nd prerelease version before the end of the month; with a production release before the end of April.

Jeffry Houser
www.flextras.com

Report · Mar 25, 2009

The spec has been posted here: http://opensource.adobe.com/wiki/display/flexsdk/DropDownList

Iwo, let us know if the design satisfies your requests.

Jason Szeto
Flex SDK Developer

Report · Mar 26, 2009

Hi Jason,

At first look documentation looks really nice.
I like many thinks in your proposal:
+ Simple interface of DropDownBase.
+ Nice idea to use transitions for animations.
+ PopUp skin component is really great.

What I dont like about it is proxying all List functions in DropDownList / all DataChooser functions in DatePicker etc. (My original idea posted on this forum assumed usage of the proxy design pattern as well.) When I realized the fact that recreation of dropDown (List) implies that proxy methods cannot simply call dropDown.proxyMethod() I began to be terrified. It smells like horrible code duplication which must lead to frequent errors.

I think I have found an alternative solutin in which DropDownList will inherit from List and contain DropDownButton which will force us only to map few DropDown methods. I will write a simple prototype to check if it makes any sense. I will post a result this evening (GMT+1).

Cheers,
Iwo Banas

Report · Mar 26, 2009

WOW! Gumbo architecture is great!
My DropDown proto is working :-)

Below you can find my idea of more Gumboish DropDown architecture:

General idea

DropDownList IS A List displayed as DropDown.
DatePicker IS A DateChooser displayed as DropDown.

Considering these sentences we can say that:
- there should be ISA relation (inheritance) between DropDownList and a List
- DropDown nature of a component is mostly visual modification so it should be applied in a skin

All dropdowns should have common interface to handle opening/closing so IDropDown interface should be created.

Implementation

DropDownContainer <- SkinnableContainer class with contentGroup skinPart placed inside PopUp and additional button skinPart which opens/closes PopUp with content.

DropDownContainer could be used by both application and component developers.

Application developer should be able to create component with dropdown content e.g. "More details" button.

Component developers should be able to:
- Create custom component inheriting from other component (e.g. List) and implementing IDropDown.
- In the skin use DropDownContainer to add dropdown appearance.
- Implement IDropDown by passing open/close logic to DropDownContainer skinPart.

My prototype implementation:
http://opensource.adobe.com/svn/opensource/flex/sdk/sandbox/iwo/trunk/frameworks/projects/flex4/src/spark/components/IDropDown.as

http://opensource.adobe.com/svn/opensource/flex/sdk/sandbox/iwo/trunk/frameworks/projects/flex4/src/spark/components/DropDownContainer.as

http://opensource.adobe.com/svn/opensource/flex/sdk/sandbox/iwo/trunk/frameworks/projects/flex4/src/spark/skins/default/DropDownContainerSkin.mxml

As most DropDown components will have the same IDropDown implementation we can move it to ActionScript file which will be included by DropDown components.

My prototype implementation:
http://opensource.adobe.com/svn/opensource/flex/sdk/sandbox/iwo/trunk/frameworks/projects/flex4/src/spark/components/supportClasses/DefaultDropDownImplementation.as

So to create DropDownList we just extend List:
http://opensource.adobe.com/svn/opensource/flex/sdk/sandbox/iwo/trunk/frameworks/projects/flex4/src/spark/components/DropDownList2.as

And modify its skin:
http://opensource.adobe.com/svn/opensource/flex/sdk/sandbox/iwo/trunk/frameworks/projects/flex4/src/spark/skins/default/DropDownList2Skin.mxml

The same refers to DropDownSlider:
http://opensource.adobe.com/svn/opensource/flex/sdk/sandbox/iwo/trunk/frameworks/projects/flex4/src/spark/components/DropDownSlider.as

http://opensource.adobe.com/svn/opensource/flex/sdk/sandbox/iwo/trunk/frameworks/projects/flex4/src/spark/skins/default/DropDownSliderSkin.mxml

Example below demonstrates usage of DropDownContainer to create inline (not skinnable) DropDown components:
http://opensource.adobe.com/svn/opensource/flex/sdk/sandbox/iwo/workspace/DropDownExamples/src/DropDownExamples.mxml

What do you think about this approach to Gumbo DropDown?

I know it is very different from Halo, yours design and my earlier proposal but maybe Gumbo is a chance to make such fundamental changes.

Cheers,
Iwo Banas

Report · Mar 26, 2009

Of course attached sources are dirty prototype code so don't expect nice comments of perfect code formatting.
I hope this is enough to understand the concept.
If you have any questions don't hesitate to ask.

Report · Mar 27, 2009

Iwo,

This is an interesting idea. Thank you for the contribution. I'm going to spend some time playing around with the design to see if it supports all of the functionality we need.

One thing that is harder to do in this design is to only commit the changed value when the drop down closes. For example, a DropDownList should only change its selectedIndex when the dropDown has closed (via mouse click or pressing the ENTER key). It should also have the ability to throw away the change (if the ESCAPE key is pressed). The current implementation changes the selectedIndex when you use the arrow keys to select the item.

On the other hand, the code savings are significant and it makes it simpler to create other drop down components.

Good work!

Jason

Report · Mar 31, 2009

Iwo,

A personal and hearty thank you for your excellent suggestion and your detailed notes and prototype.

The community process of open source Flex works because of you, who improve our thinking and help us iron out ideas in public.

We're quite seriously evaluating your idea and will get back to you when we have a revised specification.

Thanks again!!!

Dave Story
VP Developer Tools
Adobe Systems, Inc.

Report · Apr 01, 2009

If I had known that VP will read my posts I would have checked spelling twice ;-)

Anyway, thanks for recognition and for great SDK to work on!

I strongly believe that the open source community process can be more than just fixing bugs and I hope we will prove it soon.

Iwo

Adobe Community

(Fx)ComboBox architecture