Git, Patches and new Contributors

I have recently committed in the Eclipse BPEL Designer some patches that were contributed in our Bugzilla. This fact itself is not important. However, I used the Git command apply and kept the author name in the commit. I had never used this feature before, but it is extremely powerful. And very convenient to track activities and propose new committers on a project.

I let some traces in this article (as an example and for me, for later).
Notice that the apply command did not work with EGit, I had to use the command line. I guess it will be fixed in a future version.

• First, we need a patch, given as a diff file, e.g. in a bug entry.
• As a committer, you should apply and check this patch. So, you first need to copy the patch in your (cloned) Git repository.
• Get some stats about the patch :

  git apply --stat myPatchFile

• Make sure the patch can be applied :

  git apply --check myPatchFile

• Apply the patch :

  git apply myPatchFile

• Delete the patch file.

Then, you can check that the patch works and then commit it, before pushing the modification.
One important thing is to keep the author’s name in the commit. The author and the committer are different. And both can be kept in the commit and in the history. Here is an example in the command line:

git commit -a --author="authorUsername <author.mail.address@sth.com>"

After the push, both the author and commiter names will appear in the repository.

I don’t know if everyone in Eclipse projects uses this feature, but from the community perspective, this is very interesting (IMO).

Enhanced Tabs thanks to ScrolledPageBook

With SWT, tab folders are a way to integrate in a same container several widgets. However, it appears to be quite limited in terms of design and creativity. I here propose some alternatives for sexier user interfaces.

Tab Folder

This is our witness section.
Here is a snippet (the full code is avilable at the end of the article)…

public void createTabs( Composite parent ) {

	final TabFolder tabFolder = new TabFolder( parent, SWT.NONE );
	tabFolder.setLayoutData( new GridData( GridData.FILL_BOTH ));

	for( int i=0; i<=4; i++) {
		TabItem tabItem = new TabItem( tabFolder, SWT.NONE );
		tabItem.setText( "Item " + i );
		tabItem.setControl( createTabContent( tabFolder ));
	}
}

private Composite createTabContent( Composite parent ) {

	Composite c = new Composite( parent, SWT.NONE );
	c.setLayout( new GridLayout( 2, false ));
	String[] properties = { "First Name:", "Last Name:", "Nick Name:" };

	for( String property : properties ) {
		new Label( c, SWT.NONE ).setText( property );
		new Text( c, SWT.SINGLE | SWT.BORDER ).setLayoutData( new GridData( GridData.FILL_HORIZONTAL ));
	}

	return c;
}

And here is a screenshot.

As you can see, everything is centered, except the tabs.
And that’s not cool at all.

Custom Tab Folder

The CTabFolder class is a little more powerful, but similar limitations appear quickly. It is not possible to center the tabs. And they are either above or below the content, never on side.

public void createTabs( Composite parent ) {

	final CTabFolder tabFolder = new CTabFolder( parent, SWT.BORDER );
	tabFolder.setLayoutData( new GridData( GridData.FILL_BOTH ));
	tabFolder.setSimple( false );

	for( int i=0; i<=4; i++ ) {
		CTabItem tabItem = new CTabItem( tabFolder, SWT.NONE );
		tabItem.setText( " Item " + i + " " );
		tabItem.setControl( createTabContent( tabFolder ));
	}
}

Note that you can add images on the tab.

Scrolled Page Book

An alternative to these classes is ScrolledPageBook.
It can be used in Eclipse plugins, but also in standalone applications. In addition to SWT bundles, you only have to add org.eclipse.ui.forms to your classpath. No need to be in a form to use it.

Let’s see a first illustration, with navigation labels and not (yet) tabs.
The principle is simple: you have a set of labels and a scrolled page book. When the user clicks on a label, we change the displayed page in the book.

public void createTabs( Composite parent ) {

	// Add the container for navigation labels
	final int tabCpt = 5;
	Composite container = new Composite( parent, SWT.NONE );
	container.setLayout( new GridLayout( tabCpt, true ));
	container.setLayoutData( new GridData( SWT.CENTER, SWT.DEFAULT, true, false ));

	// Add the page book
	final ScrolledPageBook pageBook = new ScrolledPageBook( parent );
	pageBook.setLayoutData( new GridData( GridData.FILL_BOTH ));

	// The listener when the user clicks on a "tab"
	Listener listener = new Listener() {
		@Override
		public void handleEvent( Event event ) {
			pageBook.showPage( event.widget.getData());
		}
	};

	// Register the pages and bind it all
	for( int i=0; i<=4; i++ ) {
		Label l = new Label( container, SWT.BORDER );
		l.setText( "Item " + i );
		l.setData( i );

		pageBook.registerPage( i, createTabContent( pageBook.getContainer(), i ));
		l.addListener( SWT.MouseDown, listener );
	}

	// Force to display the first tab
	pageBook.showPage( 0 );
}

And here is a preview.

Ugly, isn’t it?
But we can fix it.

Tabs with a Scrolled Page Book

To have a real tab’s look & feel, we have to reduce the margin between the content and the labels. We also need make our labels look better. Partial borders will be added around the labels thanks to a paint listener.

Here is the code (it’s a little bit longer than before).

/**
 * Remember the selected index.
 */
private Integer selectedIndex = 0;

/**
 * Creates the tabs.
 * @param parent the parent
 */
public void createTabs( Composite parent ) {

	// Add the container for navigation labels
	final int tabCpt = 5;
	Composite container = new Composite( parent, SWT.NONE );
	GridLayout layout = new GridLayout( tabCpt, true );
	layout.marginHeight = 0;
	container.setLayout( layout );
	container.setLayoutData( new GridData( SWT.CENTER, SWT.DEFAULT, true, false ));

	// Add the page book
	final ScrolledPageBook pageBook = new ScrolledPageBook( parent );
	pageBook.setLayoutData( new GridData( GridData.FILL_BOTH ));

	// The listener when the user clicks on a "tab"
	final List<Label> navigationLabels = new ArrayList<Label> ();
	Listener listener = new Listener() {
		@Override
		public void handleEvent( Event event ) {
			pageBook.showPage( event.widget.getData());

			// Remember the last selected index
			TabsWithScrolledPageBookSnippet.this.selectedIndex = (Integer) event.widget.getData();

			// Highlight the selected tab
			for( Label l : navigationLabels ) {
				Color color;
				if( l != event.widget && l.getParent() != event.widget )
					color = Display.getDefault().getSystemColor( SWT.COLOR_WIDGET_BACKGROUND );
				else
					color = Display.getDefault().getSystemColor( SWT.COLOR_WHITE );

				l.setBackground( color );
				l.getParent().setBackground( color );
			}
		}
	};

	// The paint listener, to paint partial borders
	PaintListener paintListener = new PaintListener() {
		@Override
		public void paintControl( PaintEvent event ) {

			Color color;
			if( TabsWithScrolledPageBookSnippet.this.selectedIndex.equals( event.widget.getData()))
				color = Display.getDefault().getSystemColor( SWT.COLOR_GRAY );
			else
				color = Display.getDefault().getSystemColor( SWT.COLOR_WIDGET_DARK_SHADOW );

			Rectangle rect = ((Composite) event.widget).getBounds();
			event.gc.setForeground( color );
			event.gc.setAntialias( SWT.ON );
			event.gc.drawLine( 0, 0, rect.width - 1, 0 );
			event.gc.drawLine( 0, 0, 0, rect.height - 1 );
			event.gc.drawLine( rect.width - 1, 0, rect.width - 1, rect.height - 1 );
		}
	};

	// Register the pages and bind it all
	for( int i=0; i<tabCpt; i++ ) {
		Label l = createTabLabel( i, container, paintListener, listener );
		navigationLabels.add( l );
		pageBook.registerPage( i, createTabContent( pageBook.getContainer(), i ));
	}

	// Force to display the first tab (and force it to be highlighted)
	navigationLabels.get( 0 ).notifyListeners( SWT.MouseDown, new Event());
}

/**
 * Creates a label for the tab (wrapped in a composite for better display).
 * @param index the tab index
 * @param parent the container for the label
 * @param paintListener the paint listener for the label's container (to paint partial borders)
 * @param mouseDownListener the listener for when a tab is selected
 * @return the created label
 */
private Label createTabLabel( int index, Composite parent, PaintListener paintListener, Listener mouseDownListener ) {

	// Wrap the labels in a composite
	Composite c = new Composite( parent, SWT.NONE );
	c.setLayout( new GridLayout());
	c.setLayoutData( new GridData( 80, 25 ));
	c.setData( index );

	// To paint partial borders
	c.addPaintListener( paintListener );

	// Deal with the content
	Label l = new Label( c, SWT.NONE );
	l.setLayoutData( new GridData( SWT.CENTER, SWT.CENTER, true, true ));
	l.setText( "Item " + index );
	l.setData( index );

	// The click listener
	l.addListener( SWT.MouseDown, mouseDownListener );
	c.addListener( SWT.MouseDown, mouseDownListener );

	return l;
}

Horizontal Tabs

By playing with the previous example, we can also obtain a result similar to the Eclipse tabbed properties. In the following example, the navigation labels are placed on the left of the content. I hardly changed the code (about 10 lines, it is just about the layout).

The code is available in the archive below.

Conclusion

I hope these snippets (and screenshots) will help some of you.
They also illustrate the use of the Scrolled Page Book class. Obviously, this could be used to create a custom and reusable widget (as an example shared in the Nebula project). No need to say that it would be more simple with a HTML and CSS approach. E4 may help in such an approach.

The complete source code for the snippets is available on GitHub.