Accéder au contenu principal

Adding a list view to Boxes

A list view was a requested feature for Boxes, I decided to commit myself to implement this during this GSoC.

March: exploring the idea

I started working on adding a list view to Boxes in march 2015. By that time, the expected columns for the list view where:

  • the thumbnail;
  • the machine's name;
  • a system monitor;
  • the machine's IP;
  • the OS' icon;
  • an icon to display show a favorite machine.

Implementing such a view using libgd's MainView (the same widget responsible of the icon view) required me:

  • to learn how to write a custom GtkCellRenderer for the system monitor;
  • to find how to get a machine's IP adress;
  • to find how to OS icons are retrieved in Boxes.

Unfortunately, I had to pause the implementation of this feature to focus on my studies.

July 6–12: designing the list view

I joined a chat on Google Hangout where Alan Day, Jakub Steiner and Zeeshan Ali on july 8th. During this talk, Zeeshan stated its desire to stop using libgd—suggesting to use GtkFlowBox and GtkListBox to implement the icon view and the list view respectively—and Jakub produced the following mockup. Even though I didn't talked much (if at all), it was really enriching to follow such a discussion.

As you can see, there is no system monitor nor the OS' logo, and columns to show the machine's state and a selection state have been added. I then scrapped the system monitor cell renderer I implemented and integrated the previous days.

With this new design, I had enough material to start implementing the list view.

I needed the content of the widget to be sortable and filterable, hence I implemented the BoxesSortedListModel and BoxesListModelFilter classes to allow me to do so, as I didn't notice at that time that both GtkFlowBox and GtkListBox offered such capabilities.

I started producing the BoxesCollectionItemListView widget to render a collection item in the list view and the BoxesCollectionListView to implement the list view. By that time, most of the expected features worked but annoying bugs were remaining and the look was far from being polished.

July 13–19: polishing the list view

I removed the ListModelFilter and SortedListModel classes to favoritize GtkListBox's filtering and sorting functionalities.

The theme have been refined using CSS, the selection mode have been added and several bugs have been discovered and fixed.

Bug #752615 in GtkListBox have been discovered, a workaround have been added in Boxed.

July 20th: submitting patches

On july 20th, I reorganized the patches and polished their logs to look nicer, then I attached them to bug #733252. Their review is in progress and I hope they will be committed before the UI freeze.

GUADEC: reworking the thumbnails

During the 2015 edition of the GUADEC, I've been able to meet my mentor, Zeeshan, to more easily discuss the design of my code and more importantly, the disturbance created by the changes I made.

Following is a list of the problems I encountered and how I tried to solve them.

    • Problem: The MachineThumbnailer class have been created because the icon view needed a GdkPixbuf as a thumbnail, and the list view's thumbnail is expected to have a different style than the one harcoded in MachineThumbnailer.
    • Solution: Create the custom MachineThumbnail widget, responsible of rendering a machine's thumbnail, taking advantage of the CSS styling and the states to offer a more refined view.
    • Problem: We now have two very close yet slightly different objects, some refactoring may be a good idea.
    • Solution: Add and use the MachineThumbnailDrawer class, allowing to draw a thumbnail on any Cairo context — hence on a GdkPixbuf or a widget — and with a given style and state. The MachineThumbnail and MachineThumbnailer classes used it to draw.
    • Problem: MachineThumbnail have different behaviours depending on its states, while MachineThumbnailer always draw with the same style.
    • Solution: Use the same style for MachineThumbnail, whatever its state is.
    • Problem: We now have two objects with a really close behaviour now, it may be simpler to only use one.
    • Solution: Make MachineThumbnailer customizable enough to be able to render pixbufs for both thumbnails, and make the list view's thumbnail a simple GtkImage.
    • Problem: The list view thumbnail's spinner make the whole thumbnail spin now!
    • Solution: Use a proper GtkSpinner and switch between it and the real thumbnail when needed.

Conclusion

This feature have been really interesting to implement, it improved my understanding of what behaviours are good to have when introducing new code, and even if I still struggle to write really good commit messages, I feel like I nonetheless got better at it.

I also learned an awful lot about GTK+: I learned:

  • how to use GListModel,
  • how to use GtkListBox,
  • how to use GtkFlowBox,
  • how to implement custom spinners,
  • how to theme a widget with CSS,
  • how to use the widget states,
  • and so many more!

Commentaires

Posts les plus consultés de ce blog

GTK+ Apps on Phones

As some of you may already know, I recently joined Purism to help developing GTK+ apps for the upcoming Librem 5 phone.Purism and GNOME share a lot of ideas and values, so the GNOME HIG and GNOME apps are what we will focus on primarily: we will do all we can to not fork nor to reinvent the wheel but to help allowing existing GTK+ applications to work on phones.How Fit are Existing GTK+ Apps?Phones are very different from laptops and even tablets: their screen is very small and their main input method is a single thumb on a touchscreen. Luckily, many GNOME applications are touch-friendly and are fit for small screens. Many applications present you a tree of information you can browse and I see two main layouts used by for GNOME applications to let you navigate it.A first kind of layout is found in applications like Documents, I'll call it stack UI: it uses all the available space to display the collection of information sources (in that case, documents), clicking an element from t…

One Widget to Adapt Them All and to The Librem 5 Port Them

In my previous article I shared my plans to help porting existing GTK+ applications to Purism's upcoming Librem 5 phone without having to fork them. This article will present the GTK+ widget I developed for Purism to make this happen.For more information on what Purism is working on for the Librem 5, please check Nicole Faerber's latest article.C'est pas sorcierThe underlying idea is to allow applications to dynamically switch between the two main GNOME application layouts: a row of panels — each panel being the view of an element from the previous one — and a stack of panels. The goal isn't to changes applications using the stack paradigm but the ones using the row one, allowing them to reach smaller sizes and to be usable on constrained sizes while keeping their initial paradigm and design when the screen space is sufficient. The development cost to port the applications to this adaptive design should be as low as possible.To achieve that, I wrote a GTK+ widget which…

Adaptive GNOME Web

I started working on making GNOME Web work well on the Librem 5; to be sure it fits a phone's screen I want the windows to fit in a 360 points width, which is definitely small. To do so I started with the advices from Tobias Bernard to make Web have two modes that I named normal and narrow. The normal mode is Web as you know it, while the narrow mode moves all buttons from the header bar but the hamburger menu to a new action bar at the bottom, letting the windows reach yet unreachable widths. Web autmatically adapting to small sizes. And now, with device rotation on a tablet. The code is overall ready, I still need to break it into reviewable bits before submitting it upstream.Once this get merged:we want to not show tabs in narrow mode and instead to display a popover listing the available pages,we want to make the search bar shrink rather than to limit the minimum window size,we consider migrating away from the application menu model.A quick layout test of the pages popover. P.S.…