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: 777
Registered: ‎07-21-2012
My Device: 9810
My Carrier: 0

Re: suggest me how to make this type of view

Hello sir i made a custum component of header . 

import net.rim.device.api.ui.DrawStyle;
import net.rim.device.api.ui.Font;
import net.rim.device.api.ui.Graphics;
import net.rim.device.api.ui.container.VerticalFieldManager;

public class HeaderScreen extends VerticalFieldManager {
    private String headerText;
	private final Font font;
	private int bgColor = Color.GREEN;
	private int textColor = Color.WHITE;
	private int headerTextFontSize = 20;
	private int yCoodinateOfHeaderText = 30;
	private Bitmap backgroundBitmap;

	public HeaderScreen(String headerText, int textColor) {
		this.headerText = headerText;
		font = Font.getDefault().derive(Font.BOLD,
				Utilities.getAdjustWidth(headerTextFontSize));
		this.bgColor = Color.GREEN;
		this.textColor = textColor;
		//backgroundBitmap = Bitmap.getBitmapResource("telus.png");
	}

	/**
	 * 
	 * @param headerText
	 *            which you want to add on the top screen.
	 */
	public HeaderScreen(String headerText) {
		this.headerText = headerText;
		font = Font.getDefault().derive(Font.BOLD,
				Utilities.getAdjustWidth(headerTextFontSize));
	}

	protected void sublayout(int maxWidth, int maxHeight) {
		super.sublayout(Global.SCREEN_WIDTH, Global.HEADER_HEIGHT);
		setExtent(Global.SCREEN_WIDTH,Utilities.getAdjustWidth(7));
	}

	protected void paint(Graphics graphics) {
		graphics.setColor(bgColor);
		graphics.fillRect(0, 0, Global.SCREEN_WIDTH,
				Utilities.getAdjustWidth(9));
	//	graphics.drawBitmap(0, Utilities.getAdjustWidth(25), backgroundBitmap.getWidth(), backgroundBitmap.getHeight(), backgroundBitmap, 0, 0);
		graphics.setColor(textColor);
		graphics.setFont(font);
		//graphics.drawText(headerText, 0, Utilities.getAdjustWidth(30)
				//, DrawStyle.HCENTER
				//| DrawStyle.ELLIPSIS, Global.SCREEN_WIDTH);
		graphics.drawText(headerText, Utilities.getAdjustWidth(8), Utilities.getAdjustWidth(30)
				, 0, Global.SCREEN_WIDTH);
	}

	/**
	 * This method is used to change the title of header.
	 * 
	 * @param title
	 *            which you want to print on the top screen.
	 */
	public void setTitle(String title) {
		headerText = title;
		invalidate();
	}
}

 And use this on my Real screen .

package com.black.applicationloader;

import net.rim.device.api.ui.Color;
import net.rim.device.api.ui.Font;
import net.rim.device.api.ui.Graphics;
import net.rim.device.api.ui.container.VerticalFieldManager;

import com.black.Global.Global;
import com.black.common.BaseScreen;
import com.black.common.HeaderScreen;
import com.black.utility.Utilities;

public class BlackFirstScreen extends BaseScreen {
	
	
	BlackFirstScreen(){
		
		
		HeaderScreen screenHeader =new HeaderScreen("Assigment");
		
		
		add(screenHeader);
		VerticalFieldManager listFieldManager =new VerticalFieldManager(){
			
			
			protected void sublayout(int maxWidth, int maxHeight) {
			
				super.sublayout(Global.SCREEN_WIDTH, Global.HEADER_HEIGHT);
				setExtent(Global.SCREEN_WIDTH-Utilities.getAdjustWidth(50),Utilities.getAdjustWidth(10));
			}
			
			protected void paint(Graphics graphics) {
				graphics.setColor(Color.GREEN);
				graphics.fillRect(Utilities.getAdjustWidth(50), 0, Global.SCREEN_WIDTH,
						Utilities.getAdjustWidth(9));
				graphics.setColor(Color.WHITE);
				graphics.setFont(Font.getDefault().derive(Font.BOLD,
						Utilities.getAdjustWidth(30)));
				//graphics.drawText(headerText, 0, Utilities.getAdjustWidth(30)
						//, DrawStyle.HCENTER
						//| DrawStyle.ELLIPSIS, Global.SCREEN_WIDTH);
				graphics.drawText("Provisioning Status(FMS,NETP,NETC)", Utilities.getAdjustWidth(8), Utilities.getAdjustWidth(30)
						, 0, Global.SCREEN_WIDTH);
				super.paint(graphics);
			}
		};
		
		add(listFieldManager);
		
		
	}

}

 But  how to prepare Header of list field mean (FMS ,NETP ,NETC ) white one.

 

upper part of list field ?

 

till now i am correct?

Developer
Posts: 777
Registered: ‎07-21-2012
My Device: 9810
My Carrier: 0

Re: suggest me how to make this type of view

hello sir ..This is my whole screen i want to shift my list some space from left and i want to make header of the list (White One  , FMS ,METP,METC).

 

all i implement  ..Here is my code.

package com.black.applicationloader;

import java.util.Vector;

import net.rim.device.api.system.Display;
import net.rim.device.api.ui.Color;
import net.rim.device.api.ui.Font;
import net.rim.device.api.ui.Graphics;
import net.rim.device.api.ui.Manager;
import net.rim.device.api.ui.component.ListField;
import net.rim.device.api.ui.component.ListFieldCallback;
import net.rim.device.api.ui.container.VerticalFieldManager;

import com.black.Global.Global;
import com.black.common.BaseScreen;
import com.black.common.HeaderScreen;
import com.black.utility.Utilities;

public class BlackFirstScreen extends BaseScreen implements ListFieldCallback{
	Vector v;
	ListField lstField;
	private static final String[] _elements = {"First element", "Second element", "Third element", "Fourth element", "Fifth element","First element", "Second element", "Third element", "Fourth element", "Fifth element"};
	private boolean hasFocus;

	BlackFirstScreen(){
		
		v=new Vector();
	for (int i = 0; i < _elements.length; i++) {
		
		v.addElement(_elements[i]);
		
	}
		HeaderScreen screenHeader =new HeaderScreen("Assigment");
		
		
		add(screenHeader);
		VerticalFieldManager secondHeader =new VerticalFieldManager(){
			
			
			protected void sublayout(int maxWidth, int maxHeight) {
			
				super.sublayout(Global.SCREEN_WIDTH, Global.HEADER_HEIGHT);
				setExtent(Global.SCREEN_WIDTH-Utilities.getAdjustWidth(50),Utilities.getAdjustWidth(10));
			}
			
			protected void paint(Graphics graphics) {
				graphics.setColor(Color.GREEN);
				graphics.fillRect(Utilities.getAdjustWidth(50), 0, Global.SCREEN_WIDTH,
						Utilities.getAdjustWidth(9));
				graphics.setColor(Color.WHITE);
				graphics.setFont(Font.getDefault().derive(Font.BOLD,
						Utilities.getAdjustWidth(30)));
				//graphics.drawText(headerText, 0, Utilities.getAdjustWidth(30)
						//, DrawStyle.HCENTER
						//| DrawStyle.ELLIPSIS, Global.SCREEN_WIDTH);
				graphics.drawText("Provisioning Status(FMS,NETP,NETC)", Utilities.getAdjustWidth(8), Utilities.getAdjustWidth(30)
						, 0, Global.SCREEN_WIDTH);
				super.paint(graphics);
			}
		};
		
		
		
		VerticalFieldManager listFieldManager=new VerticalFieldManager(Manager.HORIZONTAL_SCROLL|Manager.VERTICAL_SCROLL|Manager.VERTICAL_SCROLLBAR|Manager.HORIZONTAL_SCROLLBAR|FOCUSABLE){
			
			protected void sublayout(int maxWidth, int maxHeight) {
				// TODO Auto-generated method stub
				//super.sublayout(Global.SCREEN_WIDTH, maxHeight/100);
			//	setExtent(Global.SCREEN_WIDTH-Utilities.getAdjustWidth(50),maxHeight/100);
				super.sublayout(Global.SCREEN_WIDTH, 5*lstField.getRowHeight());
				setExtent(Global.SCREEN_WIDTH-Utilities.getAdjustWidth(50),5*lstField.getRowHeight());
			}
			
			
		};
		
		 lstField =new ListField(){
			
			/*protected void layout(int width, int height) {
				
				
				super.layout(Global.SCREEN_WIDTH,height/100);
				setExtent(Global.SCREEN_WIDTH-Utilities.getAdjustWidth(50),height/100);
			}*/
			protected void drawFocus(Graphics graphics, boolean on) {
				
				hasFocus = on;
				super.drawFocus(graphics, on);
				hasFocus = false;
				
			};
			
				};
		lstField.setCallback(this);
		lstField.setSize(v.size());
		
		add(secondHeader);
		
		listFieldManager.add(lstField);
		add(listFieldManager);
		
	}

	public void drawListRow(ListField listField, Graphics graphics, int index,
			int y, int width) {
		int columnWidth=Display.getWidth()/3;
		
		 if(!hasFocus){
			    if(index%2  == 0){
				
				graphics.setColor(Color.LIGHTGRAY); 
				graphics.fillRect(0, y, width, listField.getRowHeight());
				graphics.setColor(Color.PINK); 
				
				}else{
				graphics.setColor(Color.WHITE); 
				graphics.fillRect(0, y, width, listField.getRowHeight());
				graphics.setColor(Color.DARKRED); 
				}
			    }
		
		System.out.println("*****columnWidth*************"+columnWidth);
	
		int xpos = 0;
	
		graphics.drawText("column1"+index,Utilities.getAdjustWidth(50)+xpos,y);
		xpos +=  columnWidth;
		graphics.setColor(Color.BLACK); 
		graphics.drawText("column2"+index,xpos,y);
		xpos +=  columnWidth;
		graphics.drawText("column3"+index,xpos,y);
		xpos +=  columnWidth;
		 
		graphics.drawText("column4"+index,xpos,y);
		
	
	}

	public Object get(ListField listField, int index) {
		
		 return v.elementAt(index);
	}

	public int getPreferredWidth(ListField listField) {
	
		return Global.SCREEN_WIDTH-Utilities.getAdjustWidth(50);
	}

	public int indexOfList(ListField listField, String prefix, int start) {
		
		return v.indexOf(prefix, start);
	}

}

 

Developer
Posts: 777
Registered: ‎07-21-2012
My Device: 9810
My Carrier: 0

Re: suggest me how to make this type of view

Hello sir after using this i solve my problem .

graphics.fillRect(Utilities.getAdjustWidth(50), y, width, listField.getRowHeight());

 

list field is shift left side but the one problem came ..Focus on the row display on the whole width (Blue one defult one).

 

if i want  to display only upto the width of listfield how to do that,...

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

Re: suggest me how to make this type of view

In my opinion, you are trying to do too much at once and not understanding enough to make it all work.

 

Let us start with the simple things and get them working properly..  Then when you understand that, you can do the more complicated things.

 

I suggest we start with the two green header Fields.  You have two, one at the top of the screen, and one at the top of the area containing the list.

 

You should be able to use the same Field for both of these.  I would use a standard LabelField because that has some of the attributes you want.  So start with just that.  So create a customField called, say MyLabelField.  In MyLabelField, extend LabelField.  You will initially, only make one change to this, that is you will give the label a color background.  So override paint() in MyLabelField and add code like the following:

protected void paint(Graphics g) {

int currentColor = g.getColor();

g.setColor(0x00C0C0C0);

g.drawFilledRect(0, 0, this.getWidth(), this.getHeight());

g.setColor(currentColor);

super.paint(g);

}

// code is from memory, I am sure you can fix up anything that is wrong. 

 

Create a MyLabelField, with the heading text, and use setTitle() to add this MyLabelField as the title of the screen.

 

Now add a VerticalFieldManager to the screen,

Set the margins of the VerticalFieldManager to 20 for all the margins, top, bottom and sides. 

Create a new MyLabelField, with the text for the second title area, and add this to the VerticalFieldManager.

Then add the VerticalFieldManager to the screen.

 

And see what happens when you display that screen.

 

Then change the style for the MyLabelFields to USE_ALL_WIDTH.  And try it again.

 

I hope that doing this exercise you will start to understand the mechanics of Managers. 

 

Once we get this working with a full width label at the top of the screen and a LabelField that is a little bit smaller underneath, we can move on to the other parts of your processing. 

 

If you have any problems, you should have at most, 30 lines of code, including the Screen you are creating and MyLabelField.  Post it all here along with the problem you are having.  And we will take it from there.

 

Good luck. 

Developer
Posts: 777
Registered: ‎07-21-2012
My Device: 9810
My Carrier: 0

Re: suggest me how to make this type of view

9700.jpg

package mypackage;
 
import net.rim.device.api.system.Display;
import net.rim.device.api.ui.Color;
import net.rim.device.api.ui.Graphics;
import net.rim.device.api.ui.component.LabelField;
 
public class MyLabel extends LabelField {
 
 
protected void paint(Graphics g) {
// TODO Auto-generated method stub
 
int currentColor = g.getColor();
g.setColor(Color.GREEN);
g.fillRect(0, 0, Display.getWidth(),this.getContentHeight());
g.setColor(currentColor);
super.paint(g);
}
protected void layout(int width, int height) {
// TODO Auto-generated method stub
super.layout(width, height);
setExtent(Display.getWidth(),getContentHeight());
}
 
}
 
package mypackage;

import net.rim.device.api.ui.container.MainScreen;
import net.rim.device.api.ui.container.VerticalFieldManager;

public class Firstscreen extends MainScreen{
	
	
	Firstscreen(){
		VerticalFieldManager headerMangaer=new VerticalFieldManager();
		VerticalFieldManager secondHeaderManger=new VerticalFieldManager();

		MyLabel header=new MyLabel();
		header.setText("Assignments");
		
		MyLabel secondHeader=new MyLabel();
		secondHeader.setText("provisioning Status (FMS,NETP,NETC)");
		secondHeaderManger.add(secondHeader);
		secondHeaderManger.setMargin(20,20,20,20);

		
		headerMangaer.add(header);
		add(headerMangaer);
		add(secondHeaderManger);
	}

}

 

Developer
Posts: 777
Registered: ‎07-21-2012
My Device: 9810
My Carrier: 0

Re: suggest me how to make this type of view

Till now it is ok .But i need "Assigmnet " in header should be right some pixl (be vertically centre to Green header).

2)width of the green rectantangular should me more in both cases.

 

Then please tell how to procede next..?

Developer
Posts: 16,932
Registered: ‎07-29-2008
My Device: Z10 LE, Z30, Passport
My Carrier: O2 Germany

Re: suggest me how to make this type of view

you can set margins or padding on the labelfield in the title.
to increase the height of the green you can use a container, make it bigger and set green as the background color.
----------------------------------------------------------
feel free to press the like button on the right side to thank the user that helped you.
please mark posts as solved if you found a solution.
@SimonHain on twitter
Developer
Posts: 777
Registered: ‎07-21-2012
My Device: 9810
My Carrier: 0

Re: suggest me how to make this type of view

How ? can you change my code

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

Re: suggest me how to make this type of view

[ Edited ]

Sorry you have NOT done what I asked you to do. 

 

1) Please remove your layout code in MyLabel.  It is currently:

protected void layout(int width, int height) {
// TODO Auto-generated method stub
super.layout(width, height);
setExtent(Display.getWidth(),getContentHeight());
}
you can remove it completely or just change it to:
protected void layout(int width, int height) {
// TODO Auto-generated method stub
super.layout(width, height);
}

 

2) in your paint(), you have specified

g.fillRect(0, 0, Display.getWidth(),this.getContentHeight());

This is not correct and not what I said.  So please change this to what I said.  

 

 And you will notice that in both cases, the Display.getWidth() is being ignored or at least overridden.  If it was used, then the "provisioning status' Label would use the full width and it is clearly not.

 

You need to see my original minimal code working correctly.  Currently I think you have no idea what these statements are doing, they are just magic incantations that you think you need to get what you want.  The point of the exercise I am taking you through is to get you to understand what you are doing.  I want to minimize redundant code so you know what is happening, and you are not just blindly putting in bits of code that you hope will work.  In addition, you will create a general screen that works OK regardless off device, not one that is specific to one particular device. 

 

You have said: "

Till now it is ok .But i need "Assigmnet " in header should be right some pixl (be vertically centre to Green header).

2)width of the green rectantangular should me more in both cases."

 

Now I am sorry I do not understand what you are saying here.  Can I suggest that you spell check your posts before you make them.  Then at least we can be sure that the words you use are English and there is less chance for confusion.  And for point (2), did you really mean width?

 

I am going to ignore this for the moment,  But let us move on a little anyway.  The next thing we want to do is get your Text painted in white and in the horizontal and vertical centre of the Label. 

 

To do this you will take over painting the text from the labelField.  So instead of called super.paint() in your paint method, you will  paint the text yourself.  Your added code will look like:

 

String myText = this.getLabel();

Font myFont = g.getFont();

int labelWidth = myFont.getAdvance(myText);

// Now we know how wide we will be painting. 

// We know how high we want because that is the height of the Font

int textX = (this.getWidth() - labelWidth()) / 2;

int textY = (this.getHeight() - myFont.getHeight())/2;

this.setColor(Color.WHITE);

int currentColor = g.getColor();

try {

this.drawText(myText, textX, textY);

finally {

g.setColor(currentColor);

}

 

This all replaces super.paint();

 

This is coded from memory, not tested, you get the idea. 

 

So there you have general purpose code that will paint a single line of text in the middle of the area that the Field has.  Please just fix up any issues you find, do NOT use anything like Display.getWidth() or any of your fancy utility pixel code in here.  You don't need them and it just makes your code less flexible. 

 

And I have introduced the try/finally, which a good way to make sure that your code has no side effects.  You change the color of the graphics object with setColor, you should really change it back.  The try/finally makes sure you do and makes it obvious that was what you were trying to do.  The code I suggested that does the same thing for MyLabelField is not so obvious. 

 

Anyway. let us know how you get on with this. 

Developer
Posts: 777
Registered: ‎07-21-2012
My Device: 9810
My Carrier: 0

Re: suggest me how to make this type of view

Hello sir ..

 

Sorry , it will not repeat again.

 

package mypackage;

import javax.microedition.lcdui.Font;

import net.rim.device.api.system.Display;
import net.rim.device.api.ui.Color;
import net.rim.device.api.ui.Graphics;
import net.rim.device.api.ui.component.LabelField;

public class MyLabel extends LabelField {
	
	
	protected void paint(Graphics g) {
		// TODO Auto-generated method stub
		
		int currentColor = g.getColor();
		g.setColor(Color.GREEN);
		g.fillRect(0, 0, this.getWidth(), this.getHeight());

		//g.fillRect(0, 0, Display.getWidth(),this.getContentHeight());
		g.setColor(currentColor);
		

		
		super.paint(g);
	}
	protected void layout(int width, int height) {
		// TODO Auto-generated method stub
		super.layout(width, height);
		//setExtent(Display.getWidth(),getContentHeight());
	}

}

 is this oK..?

i am not able to use this code

String myText = this.getLabel();

Font myFont = g.getFont();

int labelWidth = myFont.getAdvance(myText);

// Now we know how wide we will be painting. 

// We know how high we want because that is the height of the Font

int textX = (this.getWidth() - labelWidth()) / 2;

int textY = (this.getHeight() - myFont.getHeight())/2;

this.setColor(Color.WHITE);

int currentColor = g.getColor();

try {

this.drawText(myText, textX, textY);

finally {

g.setColor(currentColor);

}