Parent & Child Node with different images & Clickable Event - Treeview Blackberry - blackberry

Question

I am using tree view in app to show the client server data in blackberry. Same thing i achieved in android app by using expandable listview items. But here i'm facing two issues
One is:
I want to add parent node icon like a folder icon & Child node must have different icon. For example if Parent item is images then child nodes must have Images icon, if parent item is video Then child have video icons.
Second:
When i click on any child node (Like image child node), this node opens in new screen & shows the clickable item whether i click on image or video.
Here is my code that i used to Get the desired result:
class CustomTreeFieldCallback implements TreeFieldCallback {
public void drawTreeItem(TreeField _tree, Graphics g, int node, int y,
int width, int indent) {
// FontFamily
FontFamily fontFamily[] = FontFamily.getFontFamilies();
Font font = fontFamily[1].getFont(FontFamily.CBTF_FONT, 18);
g.setFont(font);
String text = (String) _tree.getCookie(node);
Bitmap b = Bitmap.getBitmapResource("images.png");
g.drawText(text, indent + b.getWidth(), y);
g.drawBitmap(indent, y - 15, b.getWidth(), b.getHeight(), b, 0, 0);
}
}
and
public class FilesManager extends MainScreen {
public FilesManager() {
// Set the linear background.
Bitmap background = Bitmap.getBitmapResource("background.png");
Background bg = BackgroundFactory.createBitmapBackground(background);
this.getMainManager().setBackground(bg);
String parentNode = new String("Images");
String firstChild = new String("first child");
String secondChild = new String("second child");
String thirdChild = new String("third child");
CustomTreeFieldCallback myCallback = new CustomTreeFieldCallback();
myTree = new TreeField(myCallback, Field.FOCUSABLE);
int node2 = myTree.addChildNode(0, parentNode);
myTree.addChildNode(node2, firstChild);
myTree.addChildNode(node2, secondChild);
myTree.addChildNode(node2, thirdChild);
add(myTree);
}
}
I also attached the screenShot that i made in android. Any one give me guideline to achieve this thing in BB?

Answer 1

You are off to a good start.
To get the right icons, you just need to detect which tree "nodes" are folders, movies, songs, images, etc. Do that either with TreeField#getFirstChild() or by checking the cookie/text, for each node, inside drawTreeItem().
To handle clicks on the movie, image, or song rows, override navigationClick().
For example, starting with the TreeFieldDemo from BlackBerry:
class TreeFieldDemoScreen extends MainScreen
{
private final Bitmap openIcon = Bitmap.getBitmapResource("folder-open.png");
private final Bitmap closedIcon = Bitmap.getBitmapResource("folder-closed.png");
private final Bitmap movieIcon = Bitmap.getBitmapResource("movie.png");
private final Bitmap songIcon = Bitmap.getBitmapResource("song.png");
private final Bitmap playIcon = Bitmap.getBitmapResource("play.png");
public TreeFieldDemoScreen()
{
setTitle("Tree Field Demo");
TreeCallback myCallback = new TreeCallback();
TreeField myTree = new TreeField(myCallback, Field.FOCUSABLE) {
protected boolean navigationClick(int status, int time) {
// We'll only override unvarnished navigation click behavior
if ((status & KeypadListener.STATUS_ALT) == 0 &&
(status & KeypadListener.STATUS_SHIFT) == 0)
{
final int node = getCurrentNode();
if (getFirstChild(node) == -1) {
// Click is on a leaf node. Do some default action or else fall through.
// Note: this will also detect empty folders, which might or
// might not be something your app has to handle
Dialog.alert("clicked " + getCookie(node));
// TODO: open player screen, etc.
return true;
}
}
return super.navigationClick(status, time);
}
};
myTree.setDefaultExpanded(false);
myTree.setRowHeight(openIcon.getHeight());
String nodeOne = new String("Video"); // folder
String nodeTwo = new String("Music"); // folder
String nodeThree = new String("Images"); // folder
String nodeFour = new String("song.mp3");
String nodeFive = new String("movie.m4v");
int node1 = myTree.addChildNode(0, nodeOne);
int node2 = myTree.addChildNode(0, nodeTwo);
int node3 = myTree.addChildNode(0, nodeThree);
int node4 = myTree.addChildNode(node2, nodeFour);
int node5 = myTree.addChildNode(node1, nodeFive);
add(myTree);
}
private class TreeCallback implements TreeFieldCallback
{
public void drawTreeItem(TreeField _tree, Graphics g, int node, int y, int width, int indent)
{
final int PAD = 8;
String text = (String)_tree.getCookie(node);
Bitmap icon = closedIcon;
if (text.endsWith(".mp3")) {
icon = songIcon;
} else if (text.endsWith(".m4v")) {
icon = movieIcon;
} else if (_tree.getExpanded(node)) {
icon = openIcon;
}
g.drawBitmap(indent, y, icon.getWidth(), icon.getHeight(), icon, 0, 0);
// This assumes filenames all contain '.' character!
if (text.indexOf(".") > 0) {
// Leaf node, so this is a playable item (movie or song)
g.drawBitmap(_tree.getWidth() - playIcon.getWidth() - PAD, y + PAD,
playIcon.getWidth(), playIcon.getHeight(), playIcon, 0, 0);
}
int fontHeight = getFont().getHeight();
g.drawText(text, indent + icon.getWidth() + PAD, y + (_tree.getRowHeight() - fontHeight)/2);
}
}
}
My navigation click handler is coded to accept clicks on the entire movie or song row, not just the "play" button itself. I think this is easier on touch devices, since the user's finger doesn't have to hit a small touch target. You can change this if you like, though.
Results
Note: I didn't bother to hook up an icon for image files ... you should be able to do that now.