Page 1 of 2 1 2
Reply
Thread Tools
code177
2009-10-20 , 05:07
Guest | Posts: n/a | Thanked: 0 times | Joined on
#1
I'm trying to figure out how to make the list style below. Yerga suggested the use of GTK TreeView, which I tried, but sadly it doesn't come out anything like this.

So we need to identify:
  • What collection of widgets produces the style of list below.
  • How it works.




If we're going to make apps that include lists which arent just a big ladder of hildon buttons, we need to know what this is and how it's done.

Any ideas?

Edit: see also:



and


Last edited by code177; 2009-10-20 at 05:18.
 

The Following User Says Thank You to For This Useful Post:
code177
2009-10-20 , 05:48
Guest | Posts: n/a | Thanked: 0 times | Joined on
#2
I've been chatting to tigert in #maemo and he's narrowed it down to Hildon Touch List.. Now we/i/someone just have to find it in the reference manuals..
 
msoini is offline msoini
2009-10-20 , 09:06
Posts: 20 | Thanked: 71 times | Joined on Sep 2009
#3
Originally Posted by code177 View Post
I've been chatting to tigert in #maemo and he's narrowed it down to Hildon Touch List.. Now we/i/someone just have to find it in the reference manuals..
the "hildon touch list" is the ui specification term for the list. See Hildon 2.2 Widget UI Specification for the mapping between terms and implementation.

Read the details from the doc in the link, but essentially you want to use hildon_pannable_area_new() and put hildon_gtk_treeview_new() inside it.

the list item layout is done as normal for gtktreeview. For more elaborate stuff, you use CustomCellRenderer. See opensource Maemo 5 apps on how to use it, or look up in gtktreeview documentation.
 

The Following 3 Users Say Thank You to msoini For This Useful Post:
yerga's Avatar
yerga is offline yerga
2009-10-20 , 11:18
Posts: 696 | Thanked: 1,012 times | Joined on Mar 2006 @ Asturies, Spain
#4
A example in Python code:

Code:
import hildon, gobject, gtk

class UI:

    def __init__(self):
        self.window = hildon.Window()
        self.window.connect("destroy", gtk.main_quit)

        parea = hildon.PannableArea()

        # gtk.HILDON_UI_MODE_NORMAL -> not selection in the treeview
        # gtk.HILDON_UI_MODE_EDIT -> selection in the treeview
        treeview = hildon.GtkTreeView(gtk.HILDON_UI_MODE_NORMAL)

        model = self.create_model()
        treeview.set_model(model)

        self.add_columns_to_treeview(treeview)

        parea.add(treeview)

        self.window.add(parea)
        self.window.show_all()

    def create_model(self):
        lstore = gtk.ListStore(gtk.gdk.Pixbuf, gobject.TYPE_STRING)

        data = ["Blue color", "Red color"]
        colors = ["blue.png", "red.png"]

        iconlist = []
        for i in range(len(colors))*10:
            iconlist.append([data[i], colors[i]])

        for item in iconlist:
            liter = lstore.append()
            lstore.set(liter, 1, item[0], 0, self.set_pix(item[1]))

        return lstore

    def set_pix(self, filename):
        pixbuf = gtk.gdk.pixbuf_new_from_file(filename)
        return pixbuf

    def add_columns_to_treeview(self, treeview):
        #Column 0 for the treeview
        renderer = gtk.CellRendererPixbuf()
        column = gtk.TreeViewColumn()
        column.pack_start(renderer, True)
        column.add_attribute(renderer, "pixbuf", 0)
        treeview.append_column(column)

        #Column 1 for the treeview
        renderer = gtk.CellRendererText()
        column = gtk.TreeViewColumn('title', renderer, text=1)
        column.set_property("expand", True)
        treeview.append_column(column)


if __name__ == "__main__":
    UI()
    gtk.main()
Put the blue and red squares in the same directory where the script and call them blue.png and red.png (or you can change the script to use your own images and data).

If you want put the images in a HildonTouchSelector, the code is a bit different than in the Treeview from the example. If you need it ask for it ;-)
Attached Images
   
__________________
Daniel Martín Yerga
maemo.org profile
Twitter
 

The Following 8 Users Say Thank You to yerga For This Useful Post:
thp's Avatar
thp is offline thp
2009-10-20 , 11:29
Posts: 1,391 | Thanked: 4,272 times | Joined on Sep 2007 @ Vienna, Austria
#5
In order to get the correct text style for the secondary text (the font size and the color - see the browser bookmarks screenshot above), you can use functions from this module (in Python; for C, there's hildon-helper.c in the Hildon source code):

http://repo.or.cz/w/gpodder.git?a=bl...rmntl/style.py

An example of how I used this to get the correct style for a ListStore:

http://repo.or.cz/w/gpodder.git?a=bl...frmntl/opml.py

The final result can look like this:

 

The Following 10 Users Say Thank You to thp For This Useful Post:
code177
2009-10-20 , 17:40
Guest | Posts: n/a | Thanked: 0 times | Joined on
#6
You guys are awesome! I'm going to try these out tonight and see if it works.
 
code177
2009-10-21 , 01:18
Guest | Posts: n/a | Thanked: 0 times | Joined on
#7
Originally Posted by thp View Post
In order to get the correct text style for the secondary text (the font size and the color - see the browser bookmarks screenshot above), you can use functions from this module (in Python; for C, there's hildon-helper.c in the Hildon source code):

http://repo.or.cz/w/gpodder.git?a=bl...rmntl/style.py

An example of how I used this to get the correct style for a ListStore:

http://repo.or.cz/w/gpodder.git?a=bl...frmntl/opml.py
There's a step I'm missing here, maybe somebody can point me in the right direction:

How do i turn output of "<span font_desc="Nokia Sans 18" foreground="<GdkColor at 0x9xx..." into Nicely-Formatted-Text-String?
 
code177
2009-10-21 , 03:19
Guest | Posts: n/a | Thanked: 0 times | Joined on
#8
The solution to this:

Code:
set 
Gtk.TreeViewColumn('title', renderer, text=1)
to
Gtk.TreeViewColumn('title', renderer, markup=1)
and make sure the string you're appending is escaped (import cgi, cgi.escape) for bad characters.

Thanks!
 

The Following 3 Users Say Thank You to For This Useful Post:
mattaustin is offline mattaustin
2010-01-08 , 14:20
Posts: 120 | Thanked: 279 times | Joined on Sep 2009 @ Perth, Australia
#9
Although I have dabbled in python, it's my first time playing with anything GTK/GUI related.

I have created and populated a treeview no problems - mostly thanks to the info above (thanks!).

Are there any example of how to filter the treeview when the user types on the keyboard? Kind-of how the contacts list works. I hope its easy, as I am only just getting the hang of what I've done already!

Cheers!
 
hmaki is offline hmaki
2010-02-15 , 09:21
Posts: 7 | Thanked: 0 times | Joined on May 2008
#10
Originally Posted by yerga View Post
A example in Python code:

(code snippet removed, see above)

Put the blue and red squares in the same directory where the script and call them blue.png and red.png (or you can change the script to use your own images and data).

If you want put the images in a HildonTouchSelector, the code is a bit different than in the Treeview from the example. If you need it ask for it ;-)
Thanks for your example. I'm coding a remote controller app for Squeezebox with python, and I need a window that can display the current playlist. I was prototyping the layout, and the one that I thought to use is a list with

- note symbol on the left showing the currently played track
- track name + "\n" + artist
- track duration

I can show note symbol and track name/artist, but not duration. On the column showing the duration I was get a copy of track name/artist column's content. Why this happens? What I'm doing wrong?

Code:
import hildon, gobject, gtk

class UI:

    def __init__(self):
        self.window = hildon.Window()
        self.window.connect("destroy", gtk.main_quit)

        parea = hildon.PannableArea()

        # gtk.HILDON_UI_MODE_NORMAL -> not selection in the treeview
        # gtk.HILDON_UI_MODE_EDIT -> selection in the treeview
        treeview = hildon.GtkTreeView(gtk.HILDON_UI_MODE_NORMAL)

        self.add_columns_to_treeview(treeview)

        model = self.create_model()
        treeview.set_model(model)


        parea.add(treeview)

        self.window.add(parea)
        self.window.show_all()

    def create_model(self):
        lstore = gtk.ListStore(gtk.gdk.Pixbuf, str, str)

        lstore.append([None, "6. Arie. Buss und Reu\n<small>Andreas Scholl</small>", "3:23"])
        lstore.append([self.set_pix("note.png"), "35. Arie. Geduld, Geduld!\n<small>Werner Gura</small>", "2:49"])

        return lstore

    def set_pix(self, filename):
        pixbuf = gtk.gdk.pixbuf_new_from_file(filename)
        return pixbuf

    def add_columns_to_treeview(self, treeview):
        #Column 0 for the treeview
        renderer = gtk.CellRendererPixbuf()
        column = gtk.TreeViewColumn()
        column.pack_start(renderer, False)
        column.add_attribute(renderer, "pixbuf", 0)
        column.set_min_width(40)
        treeview.append_column(column)

        #Column 1 for the treeview
        renderer = gtk.CellRendererText()
        column = gtk.TreeViewColumn("title", renderer, markup=1)
        column.set_property("expand", True)
        treeview.append_column(column)

        #Column 2 for the treeview
        renderer = gtk.CellRendererText()
        column = gtk.TreeViewColumn("times", renderer, markup=1)
        treeview.append_column(column)

if __name__ == "__main__":
    UI()
    gtk.main()
Screenshot below:
Name: screenshot.jpg Views: 998 Size: 19.7 KB

And here the note.png used by the code:
Name: note.png Views: 931 Size: 508 Bytes
 
Reply
Page 1 of 2 1 2

Tags
gtk, list, maemo 5, unknown widgets

« Previous Thread | Next Thread »
Thread Tools

 
Forum Jump


All times are GMT. The time now is 21:24.

Contact Us - Home - Archive - Top