Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Java Development

Reply
Developer
Posts: 141
Registered: ‎08-06-2008
My Device: Not Specified
Accepted Solution

Image listfield implementation and submenu

I want to make a listfield which only have image which mean list member will be made of image.

 

ex)

 

[image1]         [image2]       [image3]

[image4]         [image6]       [image7]

[image7]         [image8]       [image9]

 

If I click image one then show sub-list.

 

How can do this kind of thing?

Any example or way to do it.

 

Thanks,

DK.

Developer
Posts: 19,636
Registered: ‎07-14-2008
My Device: Not Specified

Re: Image listfield implementation and submenu

1) Are the images all the same size?

2) Do you always want to display 3 images on each row, or do you perhaps want 2 in a row in a device like the Pearl and 4 in the Bold?

3) Do the Images have some way to show focus (perhaps a transparent region, I think this will be 'reversed' automatically when the image has focus)

4) When you say SubList/submenu, do you mean context sensitive menus that apply to each image, or are you trying to create some special menu selection, or do you want to go onto another screen with the subset applicable to the icon selected..

 

I'd like the answers to the above before giving you a more complete response, but here are some ideas anyway. 

 

I don't think a ListField is a good choice for this, because it displays a whole row, and it is not easy to have focus only on part of the row.

 

I would start by trying to create an extension of the BitmapField, that was a fixed size, and paint the image in the centre (never tied to do this, you might have to paint it yourself, or perhaps some Style options will get it there).  Then I would have this Field adjust its 'size' so that the images displayed nicely on the screen,  So if the screen was wide enough to take three, it would have a width of Display.getScreenWidth()/3.  Add these to a FlowFieldManager and you should get the images displaying nicely on the screen, each individually focusable.  Then you just need these objects to create a Context Sensitive Menu, if you want that.  Alternatively override navigationClick() and display a second screen.

 

Hope this helps.

Developer
Posts: 141
Registered: ‎08-06-2008
My Device: Not Specified

Re: Image listfield implementation and submenu

Hi Peter,

 

1) image will be same

2) actually 4 in each row

3) I wish to show certain focus like default in when the image has focus. 

4) For the menu when the image is select, I want to show list of menu in the middle of screen. And by selecting on of submenu goes to next screen.

 

Thanks,

DK. 

Developer
Posts: 19,636
Registered: ‎07-14-2008
My Device: Not Specified

Re: Image listfield implementation and submenu

From your reply, I think the basics of what I originally suggested will work (not guaranteeing it is the best way, but I think it is a good start).

 

So start by try extending the BitmapField so that it has a fixed width (of Display.getScreenWidth()/4), adding a few of these to a FlowFieldManager and adding the FlowFieldManager to your screen.  You will get hints on fixing the width of the BitmapField if you look at posts in this forum that have attempted to add two or more Fields to a HorizontalFieldManager and have them appear on the same line.

 

I don't understand 3.  Can you explain that again.

 

4. I take it that you want this Submenu to happen when you press something, while you have focus on the Bitmap.  What are press you going to use to trigger this submenu.  Remember if you use the Pearl or Menu key, you might make it difficult for the user to get at the standard menus for the screen, like 'Close'.  Once you have chosen how your users will use to bring up this submenu, we need to think about your submenu display.  Since you seen to want to have this different to a standard menu, the easiest thing to do is to push a PopupScreen, or a Dialog, using the Dialog.LIST Style,  I suspect that you want to have a fully floating menu like one gets with Windows, and that is possible, but I'm not sure how pretty it is and more importantly, I think you need to have these basics sorted out before you start getting too complicated.

 

This should be enough to get you started.  If you are struggling with any points, please ask for specific guidance.

Developer
Posts: 141
Registered: ‎08-06-2008
My Device: Not Specified

Re: Image listfield implementation and submenu

Peter,

 

By your idea, I used FlowFieldManager and BitmapField(Focusable) and make them in line in two rows.

 

But how can I highlight the icon that has focus?  3) is the question that how I can highlight the selected icon.

 

Many Thanks.

BlackBerry Development Advisor
Posts: 15,784
Registered: ‎07-09-2008
My Device: BlackBerry PRIV
My Carrier: Bell

Re: Image listfield implementation and submenu

Please see the following link.

 

How To - Show focus changes using BitmapField
Article Number: DB-00427

http://www.blackberry.com/knowledgecenterpublic/livelink.exe/fetch/2000/348583/800332/800505/800345/...

Mark Sohm
BlackBerry Development Advisor

Please refrain from posting new questions in solved threads.
Problem solved? Click the Accept As Solution button.
Found a bug? Report it using Issue Tracker
Developer
Posts: 19,636
Registered: ‎07-14-2008
My Device: Not Specified

Re: Image listfield implementation and submenu

I like the KB article that Mark has pointed you at.   

 

But, if I was doing this, I would try to put a blank 'border' round the images, to space them out a bit.  Then I would do something like what the Bold does with its icons, and draw a 'box' round the one with the current focus.  You can probably do this with the Border control in 4.6 (don't know, haven't looked), but you can certainly do this using paint() and it will work in 4.0 and later too!

 

Just an idea, cos I like the way the Bold does it.

 

If you struggle with this, let me know. 

Developer
Posts: 141
Registered: ‎08-06-2008
My Device: Not Specified

Re: Image listfield implementation and submenu

Peter,

First of all thank you. 

I was able to browse icons in FlowFieldManager.

 

HorizontalFieldManager[] hIconMan = new HorizontalFieldManager[btmFiles.length];

FlowFieldManager hfmIcon = new FlowFieldManager(HorizontalFieldManager.HORIZONTAL_SCROLL | HorizontalFieldManager.FIELD_HCENTER | HorizontalFieldManager.HIGHLIGHT_FOCUS|

HorizontalFieldManager.FOCUSABLE )

 btmIcons = new BitmapField[btmFiles.length];

icons = new Bitmap[btmFiles.length];

for (int i=0; i< 8; i++)

{

cnt = i;

icons[i] = Bitmap.getBitmapResource(btmFiles[i]);

btmIcons[i] = new BitmapField(icons[i], BitmapField.FOCUSABLE/*|BitmapField.HIGHLIGHT_FOCUS|BitmapField.HIGHLIGHT_SELECT*/)

{

 protected void paint(Graphics g)

{

  if (g.getBackgroundColor() != 3098850)

{

XYRect xy = g.getClippingRect();

g.setBackgroundColor(Color.
BLUE);g.fillRect(xy.x,xy.y,xy.width,xy.height);

g.clear();

}

super.paint(g);

}

protected void drawFocus(Graphics g, boolean on){

XYRect rect = g.getClippingRect();

int h = getHeight(); int w = getWidth();

getFocusRect(rect);

 

System.
out.println(cnt + "In BitmapField..."+ "h=" + h + ", w=" + w + ",rect.x=" + rect.width + ", rect.y=" + rect.height);g.setColor(Color.DARKRED);

g.drawRect(0, 0, w, h);

g.drawRect(1, 1, w-3, h-3);

}

};

hIconMan[i] = new HorizontalFieldManager();  

};

hIconMan[i].add(
btmIcons[i]);

hfmIcon.add(hIconMan[i]);

}

 

add(hfmIcon);


Above code is actually drawing box for fucused iamge.

 

But in here how can I get the index of the image in the images? 

for ex) fourth image is focused, my app need to know the index so that application can do something for that, like tool tip thing or other.

 

Please give me some ideas for this.

 

Thanks,

DK.  

Developer
Posts: 19,636
Registered: ‎07-14-2008
My Device: Not Specified

Re: Image listfield implementation and submenu

I don't fully understand the construction you have used here with you adding the BitmapFields to a HorizontalFieldManager, then adding the HorizontalFieldManager to a the FlowFieldManager, but if it works, then that is great.

 

Anyway, the easiest code I think you can use goes as follows (where this is the screen you are adding hfmIcon to).  Note this code is not compiled, but is similar to code that I use in places so should be OK. 

 

(Note the inset code icon, which is two too the left of the emoticon, is used to add formatted code.  I find this easier to read than non indented code like you posted - despite the pretty colors!).

 

Field f = this.getLeafFieldWithFocus(); if ( f instanceOf BitmapField ) { for ( int i = 0; i < btmIcons.length; i++ ) { if ( f == btmIcons[i]; // Found your match... } } }