As I have been working on plenty of projects of late I have decided to start making bits and pieces of the source available. I will not make the whole thing available however I do hope to make the learning curve less for others than it was for me. Below is an OS 6.0+ class which is similar to the BlackBerry native application Social Feeds. I have condensed the default way of invoking a PaneView into an easily customized basic class. As the default way uses the MVC pattern it can be a little convoluted if you are simply looking for a basic “pretty” view.

Included in this post:

ColoredLabelField.java

BasicPaneManagerView.java

Below is the BasicPaneView class. This is by no means a perfect implementation. This code is simply what I threw together last night and as I finish this application it may improve in quality. Any of those updates will be updated in this post.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
package ca.dftr.calendar.ui.components;
 
import net.rim.device.api.ui.Field;
import net.rim.device.api.ui.Manager;
import net.rim.device.api.ui.component.pane.HorizontalScrollableController;
import net.rim.device.api.ui.component.pane.Pane;
import net.rim.device.api.ui.component.pane.PaneManagerController;
import net.rim.device.api.ui.component.pane.PaneManagerModel;
import net.rim.device.api.ui.component.pane.PaneManagerView;
import net.rim.device.api.ui.component.pane.PaneView;
import net.rim.device.api.ui.component.pane.TitleView;
 
/**
 * A simplified way of creating a PaneView style of UI
 * @author deforbes
 */
public class BasicPaneManagerView extends PaneManagerView{
	private TitleView _header;
	private PaneManagerModel _model;
	private int _currentlySelectedIndex = 0;
	private boolean _curSelectedBeenSet = false;
 
	/**
	 * Pane View Constructor
	 * @param enableLooping Do the panes loop. (i.e. In UI with 3 panes, can you swipe left from 1-3)
	 * @param style Field Styles. (Good idea to pass in Field.FOCUSABLE for example)
	 * @param title The header style. The container that will house the pane titles.
	 */
	public BasicPaneManagerView(boolean enableLooping, long style, TitleView title){
		super(style, title, new PaneView(0));
		_header = title;;
 
		_model = new PaneManagerModel();
		_model.enableLooping(enableLooping);
		title.setModel(_model);
		PaneManagerController controller = null;
		controller = new HorizontalScrollableController();
		controller.setModel(_model);
		controller.setView(this);
		_model.setController(controller);
		this.setController(controller);
 
		PaneView paneView = new PaneView(Field.FOCUSABLE);
		paneView.setModel(_model);
		super.setPane(paneView);
 
		this.setModel(_model);
		_model.setView(this);
	}
 
	/**
	 * Get TitleView header associated with this Pane Manager
	 * @return TitleView header associated with this Pane Manager
	 */
	public TitleView getHeader(){
		return _header;
	}
 
	/**
	 * Add a pane to the pane collection
	 * @param paneToAdd Insert pane into manager
	 */
	public void addPane(Pane paneToAdd){
		_model.addPane(paneToAdd);
		if (!_curSelectedBeenSet){
			this.setCurrentlySelectedIndex(_currentlySelectedIndex);
		}
	}
 
	/**
	 * Set the start pane. By default it will be set to the first pane added to the collection
	 * @param currentlySelected Which pane will appear to user first on paint.
	 */
	public void setCurrentlySelectedIndex(int currentlySelected){
		_model.setCurrentlySelectedIndex(currentlySelected);
	}
 
	/**
	 * Create a default pane
	 * @param title Title to appear in the TitleView header
	 * @param field The content handler for layout within the pane body. (i.e VerticalFieldManager or HorizontalFieldManager)
	 * @param titleColor Color of the text to appear in the header.
	 * @return A new unattached Pane
	 */
	public static Pane CreatePane(String title, Manager field, int titleColor){
		ColoredLabelField paneTitle = new ColoredLabelField(title, Field.FOCUSABLE | Field.FIELD_HCENTER, titleColor);
		Pane pane = new Pane(paneTitle, field);
		return pane;
	}
}

And now for the usage. Obviously this is done within the class you are using to build a UI and not just pasted into a file:

1
2
3
4
5
6
7
TitleView header1 = new HorizontalScrollableTitleView(Field.FOCUSABLE);
BasicPaneManagerView paneView = new BasicPaneManagerView(false, Field.FOCUSABLE | BasicPaneManagerView.DIRECTION_NONE , header1);
paneView.addPane(createFirstPane());
paneView.addPane(createSecondPane());
paneView.addPane(createThirdPane());
 
add(paneView);

And finally, to create a pane and add it to the PaneViewManager we just created:

1
2
3
4
5
6
7
8
9
private Pane createFirstPane(){
        //Manager for content
	VerticalFieldManager vfm = new VerticalFieldManager(Field.USE_ALL_HEIGHT);
	//Add the content
        ButtonField buttonField_1 = new ButtonField( "Content first pane", ButtonField.CONSUME_CLICK | ButtonField.FIELD_RIGHT );
        vfm.add( buttonField_1 );
        //Create the pane
	return BasicPaneManagerView.CreatePane("Calendars", vfm, Color.WHITE);
}

Optionally you can style your header and panes to look pretty. After the line:

TitleView header1 = new HorizontalScrollableTitleView(Field.FOCUSABLE);

You can optionally put:

1
2
header1.setBackground(BackgroundFactory.createSolidBackground(Color.BLACK));
header1.setBorder(BorderFactory.createBevelBorder(new XYEdges(10, 10, 10, 10), new XYEdges(0,0,0,0), new XYEdges(0,0,0,0)));

To style the title to look like this.

Feel free to comment on this. I always love to improve my code.

-Devin

Related Posts: