Cider 7

Two new controls on the way. First, the TabBar returns in iOS 7ish form

This uses a format similar to other Cider7 controls. To define this example bar…

    tabs = TabBar("Play;Record;Speak;Add", 0, 500, WIDTH, 80)
    tabs:setIcon(1, "Cargo Bot:Play Solution Icon")
    tabs:setIcon(2, "Cargo Bot:Record Solution Icon")
    tabs:setIcon(3, "Small World:Dialog Icon")
    tabs:setIcon(4, "Space Art:Star")

Since the TabBar uses tint() to set colors, it works best with icons that are white on a transparent background.

The next control is a new one: ListView. The ListView presents a scrolling list with the contents of a table.

ListView looks much like any other control, but also takes a data table as one of its parameters.

    data = {}
    data[1] = {["first"]="Aaron", ["last"]="Aardvark", 
    ["city"]="Ankorage", ["state"]="AK"}
    data[2] = {["first"]="Barbara", ["last"]="Bongo", 
    ["city"]="Baltimore", ["state"]="MA"}
    data[3] = {["first"]="Calvin", ["last"]="Cool", 
    ["city"]="Caron City", ["state"]="NV"}
    data[4] = {["first"]="Donald", ["last"]="Dandruff", 
    ["city"]="Denver", ["state"]="CO"}
    data[5] = {["first"]="Elton", ["last"]="Englebert", 
    ["city"]="Elysium", ["state"]="LEO"}
    data[6] = {["first"]="Finly", ["last"]="Fergle", 
    ["city"]="Fort Worth", ["state"]="TX"}
    
    lv = ListView("first;last;city;state", 0, 100, WIDTH, 400, data)
    lv.header[1] = "State"
    lv:setColumnAlignment(2, LEFT)
    lv:setColumnAlignment(1, LEFT)
    lv:setColumnWidth(1, 90)
    lv:setColumnWidth(2, 180)

In the example the first few lines are used to define an example table called “data,” but really just about any table should work (warning: tables that contain tables will not display properly – think of the ListView like a shallow copy). Data is then used in the init for the ListView. The column names in the ListView init define the order in which items will appear in the table. If you don’t care, just enter an empty string. Once the ListView is defined, you can change the header text, set column alignment, and change the default column width.

Note that ListView doesn’t actually lose the left most pixel, that was just me cropping the image. Oh, and people of Anchorage, I apologize for the typo in the example.

Glad you added a ListView, that and a decent textbox are the two major pains for user created controls.

In Cider2 I did an editable DataGrid - could you consider extending your ListView to allow an editable data grid? All I did was replace the Label with a TextBox when the user touched the cell.

It’s a good idea. I’d probably derive the DataGrid control from the ListView and keep the ListView as a simple, row-oriented control.

And yeah, I keep meaning to work on that TextBox, but… it’s a lot to bite off.

I rewrote the text box 3 times before I got one that I was acceptably happy with for performance. But the code was ABBYSMAL to support.

Cider Controls 7 Release 2
Includes TabBar and ListView

https://gist.github.com/devilstower/6274785

Woohoo! Great job.

@Mark question on your drop down list in cider 7, when I start and create one inside cider and add the text directly to the control list and then run it, it works the list drops down and can be scrolled, but when I created a new app so to speak and include the cider controls the drop down list does not drop it just scrolls through the data on the single line. Any ideas where I am going wrong.
Cheers

@Jazmal Can you show me the init for the DropList?

One quick note for everyone: I made an elementary slip-up and left some print statements in the code that I had been using as debugs. Do a quick search and cut those lines to improve performance.

I’ll have it cleaned up in the next release.

nice man, very nice

dpl1 = DropList(‘List’, 10, 790, 600, 40, test_Clicked)
dpl1.background = color(255, 255, 255, 255)
dpl1.highlightColor = color(0, 0, 0, 0)
dpl1.highlightedTextColor = color(0, 50, 255, 255)

I think that’s what your after @Mark

@Mark I only found 2 print statements 1 in each file.

Try something like…

dpl1 = DropList('Item 1;Item 2;Item 3;Item 4', 10, 790, 600, 40, test_Clicked)

@Mark tried your solution and it worked, messed around with mine with different data and it worked so tried various other stuff and found if I had the drop box not so wide it works. Thanks for your help in this matter. Keep Cider going …

Mark did you mention about some documentation for your wonderful Cider …

Again thanks for all your hard work making this a handy little app.
I still say this should be included with Codea samples.

Also I have found that the line drop down equal the amount of lines in the init part . Any way to alter this so you can set the amount of lines to show.

@Jazmal Changing the value maxHeight should allow you to clip the control. So, for example, if you have a DropList called dpl1 with a dozen items in it, you should be able to use dpl1.maxHeight = 160 to restrict the size of the list to about four items at a time (using the default itemHeight). You’ll get the top and bottom dots to show that the list can be scrolled. You can also fiddle with itemHeight, but getting it to look and feel right can be difficult with reduced font / itemHeight sizes.

Let me know if this works out for you.

@Mark have tried your maxHeight but nothing changes, I have even went into the cider controls and changed it in there but still nothing changes. I tried to change the h value in the open function and then the box changed size but the top was off the top screen so I could not scroll back up.
Will still be trying to go through this more over the weekend if I can get some time to thing.

@Mark wow this looks brilliant, I like how the controls are implemented and the way they’re initialised as well, it looks professional too!

@Jazmal Sorry, I should have made this neater. Right now it’s a two step process as in this example.

    dropList2 = DropList("Washington;Adams;Jefferson;Madison;Monroe;"..
    "Adams;Jackson;Van Buren;Harrison;Tyler;Polk;Taylor;Fillmore;"..
    "Pierce;Buchanan;Lincoln;Johnson;Grant",
    500, 550, 180, 40, callback)
    dropList2.maxHeight = 200
    dropList2:setOpenRect()

@Mark your a wonderful person and your solution worked perfectly and I can adjust the drop of the box to suit the display. Thanks again.

What is Cider?