PDA

View Full Version : Create Custom DropDown Widget


jrlewis
09-11-2010, 01:32 PM
The templates provided demonstrate how to create "dropdown widgets" within the CQC user interface. There are two examples.

The first example is the DropDowns template and it shows a series of dropdowns that are basically the same. They just differ in size and the first two demonstrate using a slider to show the list position as well as for use in scrolling the list. Using a slider in conjunction with a list is klunky under the best of conditions and is only easily implemented if you know the size of the list ahead of time. If the ability to include tokens in the limits for creating GVar's is allowed (it may be...I can't remember if that was added or not) then it can be done dynamically, but requires a little work.

The second example consists of two templates: DropDown Modal and DropDown Modal Popup. The first dropdown is the same as in the previous example, while the second one shows how you would go about making the dropdown a modal dialog. This is one of the situations in interface development where I feel a modal popup should be used.

The dropdowns are configured such that you selelct the down arrow to show the dropdown and then you can scroll and select an item from the list. You then select the close (X) to hide the dropdown. If you wanted to you could add the close action to the list selection action and do away with the Close button.

In all cases the widgets that make up the dropdowns are either static or variable based, but this could be used with field based widgets as well. With minimal effort these can be adpated for different color schemes. Always remember that PrintScreen and Paint are your friends.

The two images below show screen shots of the two templates.

http://www.bobwithab.net/cqc/images/templates/examples/dropdowns.png

http://www.bobwithab.net/cqc/images/templates/examples/modal_dropdowns.png

greymatter
06-15-2011, 07:19 PM
Hi There JR!

First off I have to say thanks for these, they have been very helpful to me in learning the ropes of making interfaces.

I have a question in regards to implementing the scrollbar, I have made use of the non scrolling drop downs for some larger lists I am using as well as some scrollbar based samples in an instance where my list was only ten items and they are all working great. However I have a drop down for a template I made that originally only had say 20 items which wasn't too awful to scroll down using the arrows, but that list has since expanded to 165 items and I figure this is perfect time to figure out how to set the limits to allow for larger lists using the scrollbars. Any chance you could point me the right direction on how to accomplish this?

here is a export of the template I am working on, it might help to explain what I am trying to do better than I seem to be able too... :roll:

Thanks!

Todd

jrlewis
08-05-2011, 08:26 AM
Missed this one. It has been a while since I have looked at this. I will have to look to see exactly what I was doing. There may have been some extra features added to list browsers that would make this easier.