Ribbons for MonoDevelop

Update : This post is now formated correctly.

Wow, it is quite impressing that Miguel proposed to use the ribbon in MonoDevelop in his last post. When I started the project, I looked for ways to test my ribbon. One of my idea was also to redesign MonoDevelop, but I started with a tiny sample because it was much simpler 😀

Redesigning MonoDevelop remained one of my secret target, but it never happened due to lack of time or caffeine…

Below is the content of ribbons I imaginated 2-3 months ago:

Solution
+Version Control
++Checkout
+Solution
++Build
++Rebuild
++Clean
+Project
++Build
++Rebuild
++Clean
Testing
+Execution
++Run
++Debug
Test Units
+Coverage
++Test class
++Test project
++Test solution
+Mono
++Compability check
Release
+Documentation
++Generate
+Deploying
++Deploy
++Deploy to
++Configure targets
+Version Control
++Commit
++Build patch

I did also thought of some contextual ribbons:

Source code
+File
++New
++Open
++Save
+Printing
++Print
++Print Preview
+Editing
++Undo
++Redo
++Copy
++Paste
++Cut
+Search
++Search
++Previous
++Next
++Replace
++Go to Line
++Go to Matching Bracket
+Bookmarks
++Toggle
++Previous
++Next
++Clear all
Namespace
+Refactoring
++Rename
Class
+Refactoring
++Rename
++Change namespace
Method
+Refactoring
++Rename
++Move up
++Move down
Field
+Refactoring
++Rename
++Encapsulate

I am sure that this is not optimal, but I think it is not too bad. The problem is that plugins would also have to use the ribbon. Consequently, there is a lot of code to update.

SoC :: Ribbons :: Summary

Hi,

My previous post covered my last week of development and my feeling of the SoC program. Now, I think it would be a good idea to write a summary. The objective of my project was to implement the ribbon paradigm for Gtk# using managed code only. Since this is a GU library, a tiny sample application had to be created to show the implemented features.

During the SoC program, I have implemented the following classes:

• Ribbon: This is the main ribbon, which displays tabs and pages. This is similar to a notebook, but more using the Ribbon way of doing (drawing) things. Each page has a label widget placed in the corresponding tab, and a widget displayed as the page.
• RibbonGroup: This is more like a decoration. It draws a frame around its child, and a label. It may also display a special button, next to the label, to ‘expand’ the group. Expanding a group means displaying a window with more options.
• Gallery: This is used to display a table of tiles. The user has the ability to select a tile. The developer may draw whatever he want in the tile.
• GalleryPopupWindow: This is a popup window which is really convenient to display more tiles than it would be possible using the Gallery. This popup is opened by clicking on a particular button of the Gallery. The developer does not need to care about this popup.
• Button: I required a button that could work in three mode: click only, drop down menu only, or click and separate drop down menu. In addition I had to be able to easily change its design (ask it not to draw its background when the mouse is not over).
• ToggleButton: Its visual appearance is similar to the button described above, except that it is a toggle button.
• BaseButton: Since Button and ToggleButton share a lot of common behavior, a class had to be created to contain that behavior.
• ToolPack: This is used to pack several Button’s or ToggleButton’s together in a single (visual) block. It is only used to visual purposes.
• FlowLayoutContainer: This container layouts its children using a flow layout. It has not be throughly tested, and the code should be optimized to handle cases where the heigh is fixed better.
• ToolBox: This is similar to FlowLayoutContainer, except that all rows have the same height, and children are scaled to fit the height of the row.
• Theme: It is used to draw the appearance of all widgets above. The objective is to be able to change the theme used by a widget to customize the appearance of the application.
• ColorScheme: It is supposed to represents some variants (dark, bright, etc) of a color (bluish, gray, black theme).

The documentation of the classes is included in the classes themselves using the XML syntax because

1. It is more convenient for me since I can update the documentation whenever I change the API.
2. There is less files, and consequently, the structures of folders is simpler.
3. Many developers are used to it since it is the standard way of documenting code.
4. Newcomer can read the code, and the corresponding documentation in a single window, instead of switching between multiple windows.

In addition, I had to imagine a special mechanism to work with windowless widgets easily. Indeed, next-gen widgets needs to be transparent because they have all kind of shapes, shadows, etc. Gtk windowed widgets can only enable this if the desktop supports compositing. Some may suggests using compositing where available, and using opaque widgets else. However, this is not an option because I would have to design two themes. Consequently, the resulting applications would not have the same style depending on the computer it runs on. It would look rather awkward to the end-user I think. Therefore, I have used windowless widgets. The disadvantages of such widgets is that the only event that is propagated is expose. That event is used to tell the widget to render its content. Thus, I have built a special window which propagates other events to windowless widgets. This mechanism is implemented in the SyntheticWindow class.

In addition to the transparency problem with Gtk, I have also experienced troubles because Gtk does not seem to support size negotiations between a container in its children.

I think that I have implemented most features required to use a ribbon, and using the Gtk phylosophy.  On the other side, I would have liked to provide a more complete sample. Nevertheless, it presents almost all features of my library. It is now up to you to build a usefull application using it.

Remember that the code can be obtained at http://mono-soc-2007.googlecode.com/svn/trunk/laurent/src/.

SoC :: Ribbons :: Weekly Report #12

Hi,

The pencil is down, tomorrow is the official commit date for Summer of Code.

This week has been pretty productive. Since last week, the following stuff have been completed:

• The gallery is now completed.
• Popup gallery, a gallery can be expanded in a popup window. On the other side, I could not find a way to detect when the mouse click on another window in order to close the popup. Consequently, the popup is closed as soon as a tile is clicked.
• I have implemented a toggle button, and created a BaseButton which is used to share methods common to both ToggleButton and Button.
• ToolBox and FlowLayoutContainer have been completed. The former is used to layout child widgets across several rows, but all widgets receives the same height. This height corresponds to the height of the tallest child. The FlowLayoutContainer does not have that limitation, but is less space efficient when the height of the container is fixed (using HeightRequest).
• The theme of Button has been greatly improved.
• Several bug fixes.

I would like to say that the Summer of Code has been a fantastic experience. I would have liked to build a better sample application, but I have experimented more difficulties than expected while developing the library.

For those who worry about the platform compatibility, I have only tested it on two development desktops on Arch Linux, Linux 2.6, GNOME 2.18, X.org. One has Beryl, while the other does not.

I hope that I have answered to all questions in a meaningful way during the development. I know that I have not communicated much, except through weekly reports, but from my past experience with open source, I know that the Read The F****** Manual is a really important rule to let developers work instead of answering to dumb questions.

In the screencast below, you may notice flickering in the selected tile. I think it is a bug in Cairo because by replacing the following lines in Ribbon\Theme.cs:

LinearGradient grad = new LinearGradient (bodyAllocation.X, bodyAllocation.Y, bodyAllocation.X, bodyAllocation.Y + bodyAllocation.Height);
grad.AddColorStop (0.00, new Color (0.9922, 0.7373, 0.4353));
grad.AddColorStop (0.27, new Color (0.9961, 0.8039, 0.5569));
grad.AddColorStop (0.33, new Color (0.9961, 0.7255, 0.4078));
grad.AddColorStop (1.00, new Color (0.9843, 0.8980, 0.6313));
cr.Pattern = grad;
cr.Rectangle (bodyAllocation);
cr.Fill ();

by

cr.Color = new Color (0.99, 0.80, 0.50);
cr.Rectangle (bodyAllocation);
cr.Fill ();

The flickering vanishes.

A screenshot of the latest sample can be found at Ribbons-20070819

A screencast is available at http://mono-soc-2007.googlegroups.com/web/Ribbons-final.ogg

It is time to relax a little bit now 😀

Laurent Debacker.

SoC :: Ribbons :: Weekly Report #11

Hello,

As I explained in my previous post, this report is a bit late because I was on holiday with no internet connection.

Since the last report I have been working on the following things:

• Bugfix: drawing issue with Tiles (due to incorrect coordinates).
• Bugfix: unexpected exposition event sent to hidden tiles.
• I have added a Theme property to relevant widgets in order to change the theme used to draw them.
• It is now possible to select a tile in a gallery.
• GalleryPopupWindow (used to expand a galley in a popup window), and FlowLayoutContainer (intented to layout Tookpacks in a RibbonGroup) have been started, but are still in early stage however.

I hope to finish the last two bits as soon as possible. However I plan to be less efficient due to technical problem with my computer (PSU making strange noises).

Laurent.

SoC :: Ribbons :: Weekly Report #10

Hi,

Tasks accomplished this week:

• Some fixed to the layout computations of Gallery.
• Basic background drawing of Gallery.
• Initial implementation of Tile, and a sample derivate of it.
• Ability to enable/disable a Button (I’ve not figured how to make the child Widget gray yet)
• Enable/disable up/down buttons of Gallery when required.

This is not much, but some social activities, hot wave on Europe, and unavailability of gtk.org for 2 days haven’t helped much.

TODO:

• Figure out how to display a popup window on top of my Gallery (read MonoDevelop soure code?)
• Test Gallery with multiple lines.
• Implement the selection of tiles in Gallery.
• Implement a flow layout like container.

The mandatory screenshot: Ribbons 2007-08-05

The weekly report of next week will likely be a day or two late, because I will  go to the beach (I will work on Ribbons there, though).

Laurent.