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

Re: suggest me how to make this type of view

Hi 

 

i used your code .but struck in between.This is my custom label code.it look like this .but it is not same to actual requirement .

package mypackage;


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.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);
		
		String myText = this.getText();
		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;
		g.setColor(Color.WHITE);
		int currentColor = g.getColor();
		try {
		g.drawText(myText, textX, textY);
		}
		finally {
		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());
	}

}

 9700.jpg

Please use plain text.
Developer
peter_strange
Posts: 19,601
Registered: ‎07-14-2008
My Device: Not Specified

Re: suggest me how to make this type of view

[ Edited ]

Your MyLabel paint method currently looks like this:

 

 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);
}

 

With the next set of changes I suggested it would look like this:

 

protected void paint(Graphics g) {
  int currentColor = g.getColor();
  try {
    g.setColor(Color.GREEN);
    g.fillRect(0, 0, this.getWidth(), this.getHeight());
    g.setColor(currentColor);
    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);
    this.drawText(myText, textX, textY);
  } finally {
    g.setColor(currentColor);
  }
}

 

Now every line in that paint is important and before we move on, you should understand exactly what they are are doing. 

 

Having put these lines in, you should see centered white text.  And then we can move on. 

 

Give it a try and let us know what happens. 

 

I don't mind you coding something different to what I suggest.  But you have to understand what you are doing. 

 

Edit:

 

I have just noticed your screen shot.  Again, can I refer to you my original post.  In that I said you had to do it once, and then do it again after changing the Style for the LabelField to 'USE_ALL_WIDTH'.  Try that and see what difference it makes.  This was a lesson for you.  Can I emphasise that you should do what I tell you and everything I tell you.  Otherwise you will not learn the lesson. 

Please use plain text.
Developer
ravi1989
Posts: 773
Registered: ‎07-21-2012
My Device: 9810
My Carrier: 0

Re: suggest me how to make this type of view

Thanks sir ...got it .i will show you .please tell me may i correct or not?

 

i have 2 question 

1) if user want some pixel from left (not in centre ) as in my view (real image).than what he do?

2) header is ok .it should be same as in real image.

package mypackage;


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.component.LabelField;

public class MyLabel extends LabelField {
	MyLabel(){
		
		super(null, USE_ALL_WIDTH);
	}
	
	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);
		
		String myText = this.getText();
		System.out.println("Width"+this.getWidth());
		
		Font myFont = g.getFont();
		System.out.println("Font"+myFont);
		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;
		System.out.println("textX"+textX);
		int textY = (this.getHeight() - myFont.getHeight())/2;
		System.out.println("textX"+textY);

		g.setColor(Color.WHITE);
		int currentColor = g.getColor();
		try {
		g.drawText(myText, textX, textY);
		}
		finally {
		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());
	}

}

 

 

9700-01.jpg

Please use plain text.
Developer
ravi1989
Posts: 773
Registered: ‎07-21-2012
My Device: 9810
My Carrier: 0

Re: suggest me how to make this type of view

How to do next step?

1) List header (white One)

2)List 

Please use plain text.
Developer
peter_strange
Posts: 19,601
Registered: ‎07-14-2008
My Device: Not Specified

Re: suggest me how to make this type of view

[ Edited ]

Sorry once again, you have not used my code.  Look at the code I posted in my last post. Compare that with what you have coded.  What difference are there and why did I make those changes?

 

I appreciate that the code you have implements my preceding posts, but you need to read and understand everything.....

 

Also there was no need to create a constructor for your LabelField to set USE_ALL_WIDTH.  You can use the existing LabelField constructors.  In your code you probably have this:

MyLabel titleField = new MyLabelField();

you could change this to

MyLabel titleField = new MyLabelField(null, Field.USE_ALL_WIDTH);

 

For me this is a better solution because you can then change the style to get, say, a focusable MyLabel, by coding

MyLabel titleField = new MyLabelField(null, Field.USE_ALL_WIDTH | Field.FOCUSABLE);

So can you remove your constructor override and put the USE_ALL_WIDTH in your program. 

 

So, having got this far, is there anything in the code you have so far that looks like 'magic', or that you don't understand?  If so ask now, it just gets more complicated to ask later.

 

Let us now change the Header to (a) use your real Font, (b) change its height, (c) use the real background.  We will add the icon another time.

 

a) Firstly to set the Font. From a previous post, you have used this code to set the font for the title header:

graphics.setFont(Font.getDefault().derive(Font.BOLD, Utilities.getAdjustWidth(30)));

 

To do this when you create the Label, set its Font.  So once you have created your Field

MyLabel titleField = new MyLabelField(null, Field.USE_ALL_WIDTH);

you can set the Font

Font titleFont = Font.getDefault().derive(Font.BOLD, Utilities.getAdjustWidth(30));

titleField.setFont(titleFont);

 

Same thing for your other Header.

 

b) Now the height:

 

It looks like you want to have a little more space around the text than labelField gives you by default.  Now we are getting to change the layout.  Your current layout looks like this:

 

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

 

This means you are just taking the size specified by the LabelField.  But we want to do something different.  So let us increase the height it gives us a little:

 

So change the layout to this:

 

 protected void layout(int width, int height) {
 super.layout(width, height);
 setExtent(getWidth(),(getHeight() * 3) / 2);
}

 

Now as soon as we start playing with a standard Field's layout, we are potentially confusing things.  In this case I know we are safe because we override the paint() method.  We probably should have started by creating a completely custom Field.  But that could have confused you more.  So we can stick with LabelField.

 

So we now have a Header that has more height, but the same width.

 

c) So the final thing is the Background.  Here you need to do some research yourself.  You can use BackgroundFactory and Background to set the background for your Field, and using these I think you should be able to replicate the gradient background that you have.  Have a look at the API doc for BackgroundFactory and Background and see what options take your fancy.  The general process is to use BackgroundFactory to create your background, the just do a 'setBackground' for your Fields.  You can use the same Background for both the Fields.  There is a good KB article that describes using these and a number of samples on the forum.  Search for more information. 

 

Once you have done a setBackground, you will have to remove the fillRect form the paint method for MyLabel otherwise you will just overpaint the background! 

 

You ask about the 'white' Header.  I hope by now you know enough to start coding this for yourself.  I would start with a completely different class, that also extends LabelField.  In this case you will need to provide the Field with a constructor that accepts 3 Strings, but only uses one of these Strings to set the Label for the LabelField.  Then in paint, you calculate x and y positions for each of the Strings and then use drawText exactly as we have already done.  You will also set a different background.  Basically the list header is very similar technically to what you have already done, with the one change - you have 3 Strings to paint. 

 

I do not plan to create any sample code for this list header.  You have enough already to do this by yourself.  But make the positions for the header text flexible - in other words, provide a method that can set the 'x' position for each of the header texts.  You will ned that later. 

 

ListField comes once you have list Header sorted. 

 

Edit:

I have fixed some typos.

 

Can you please reduce the size of your image and we only need the LCD - if you are using the Simulator you can get the LCD only. 

Please use plain text.
Developer
ravi1989
Posts: 773
Registered: ‎07-21-2012
My Device: 9810
My Carrier: 0

Re: suggest me how to make this type of view

As you said i write this code but when i write this code .it will show error.

MyLabel header=new MyLabel(null,Field.USE_ALL_WIDTH);

 

it say create a constructor on MyLabel class.

 

thanks

Please use plain text.
Developer
ravi1989
Posts: 773
Registered: ‎07-21-2012
My Device: 9810
My Carrier: 0

Re: suggest me how to make this type of view

Hello sir ..Thanks Till now i implement this .please check may i correct ? this is my second header screen 

package mypackage;

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.component.LabelField;

public class MySecondLabel  extends LabelField{
	String firstText;
	String secondText;
	String thirdText;
	
	MySecondLabel(String firstText,String secondText,String thirdText){
		
		super(null,USE_ALL_WIDTH);
		this.firstText=firstText;
		this.secondText=secondText;
		this.thirdText=thirdText;
		
		

		
	}
protected void paint(Graphics g) {
	// TODO Auto-generated method stub
	
	  g.setColor(Color.WHITE);
	//  g.fillRect(0, 0, this.getWidth(), this.getHeight());
		
		String myText = this.getText();
		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;
		System.out.println("textX"+textX);
		int textY = (this.getHeight() - myFont.getHeight())/2;
		System.out.println("textX"+textY);

		g.setColor(Color.BLACK);
		int currentColor = g.getColor();
		try {
		g.drawText(myText, textX, textY);
		g.drawText(this.secondText, textX+60, textY);
		g.drawText(this.thirdText, textX+120, textY);

		}
		finally {
		g.setColor(currentColor);
		}
}

protected void layout(int width, int height) {
	// TODO Auto-generated method stub
	super.layout(width, height);
	setExtent(getWidth(),(getHeight() * 3) / 2);
}
}

 1)  i used this Hard corded .It is not good . can you suggest me diffent way to do the same thing.

 

g.drawText(myText, textX, textY);
		g.drawText(this.secondText, textX+60, textY);
		g.drawText(this.thirdText, textX+120, textY);

 

9700-01.png

 

 

package mypackage;

import net.rim.device.api.ui.Color;
import net.rim.device.api.ui.Field;
import net.rim.device.api.ui.Font;
import net.rim.device.api.ui.container.MainScreen;
import net.rim.device.api.ui.container.VerticalFieldManager;
import net.rim.device.api.ui.decor.Background;
import net.rim.device.api.ui.decor.BackgroundFactory;

public class Firstscreen extends MainScreen{
	
	
	Firstscreen(){
		VerticalFieldManager headerMangaer=new VerticalFieldManager();
		VerticalFieldManager secondHeaderManger=new VerticalFieldManager();
		VerticalFieldManager listheaderManager=new VerticalFieldManager();
		   
		
		Background headerBackgroundColor = BackgroundFactory.createSolidBackground(Color.GREEN);
		Background listHeaderBackgroundColor = BackgroundFactory.createSolidBackground(Color.WHITESMOKE);


		MyLabel header=new MyLabel();
		header.setText("Assignments");
		header.setBackground(headerBackgroundColor);
		
		
		MyLabel secondHeader=new MyLabel();
		secondHeader.setText("provisioning Status (FMS,NETP,NETC)");
		secondHeader.setBackground(headerBackgroundColor);
		
		
		MySecondLabel listheaderLabels=new MySecondLabel("FMS", "NETP", "NETC");
		listheaderLabels.setBackground(listHeaderBackgroundColor);
		listheaderLabels.setText("FMS");
		Font titleFont = Font.getDefault().derive(Font.BOLD,15);
		listheaderLabels.setFont(titleFont);



		secondHeaderManger.add(secondHeader);
		secondHeaderManger.setMargin(20,20,0,20);
		listheaderManager.setMargin(0,20,0,20);


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

}

 

Please use plain text.
Developer
peter_strange
Posts: 19,601
Registered: ‎07-14-2008
My Device: Not Specified

Re: suggest me how to make this type of view

I will check out the constructor thing, probably I am just being stupid.

 

Regarding seting the positins of the headers - that is up to you. You are creating the class, so you could add a method to set these positions, or set them as percentages or whatever.  I wouldn't worry about them to much until we get to the ListField, beucase the positins will need to match that. 

 

I see you have managed the font and the height changes but not the gradient background.  Kepep working on that. 

 

You can now add your ListField to the Manager you have added the proviosning status header to.  How does it look?

Please use plain text.
Developer
ravi1989
Posts: 773
Registered: ‎07-21-2012
My Device: 9810
My Carrier: 0

Re: suggest me how to make this type of view

Hello sir i add list field.But there is problem in implementing this field

1)Row of listfield should be same as list field header.

2)Blue default focus should come only row of list not outside from the row.

package mypackage;

import java.util.Vector;

import net.rim.device.api.system.Display;
import net.rim.device.api.ui.Color;
import net.rim.device.api.ui.Field;
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.MainScreen;
import net.rim.device.api.ui.container.VerticalFieldManager;
import net.rim.device.api.ui.decor.Background;
import net.rim.device.api.ui.decor.BackgroundFactory;

public class Firstscreen extends MainScreen 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;
	Firstscreen(){
		
		v=new Vector();
		for (int i = 0; i < _elements.length; i++) {
			
			v.addElement(_elements[i]);
			
		}
		
VerticalFieldManager listFieldManager=new VerticalFieldManager(Manager.VERTICAL_SCROLL|Manager.VERTICAL_SCROLLBAR|FOCUSABLE);
		
		      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());
		
		VerticalFieldManager headerMangaer=new VerticalFieldManager();
		VerticalFieldManager secondHeaderManger=new VerticalFieldManager();
		VerticalFieldManager listheaderManager=new VerticalFieldManager();
		   
		
		Background headerBackgroundColor = BackgroundFactory.createSolidBackground(Color.GREEN);
		Background listHeaderBackgroundColor = BackgroundFactory.createSolidBackground(Color.WHITESMOKE);


		MyLabel header=new MyLabel();
		header.setText("Assignments");
		header.setBackground(headerBackgroundColor);
		
		
		MyLabel secondHeader=new MyLabel();
		secondHeader.setText("provisioning Status (FMS,NETP,NETC)");
		secondHeader.setBackground(headerBackgroundColor);
		
		
		MySecondLabel listheaderLabels=new MySecondLabel("FMS", "NETP", "NETC");
		listheaderLabels.setBackground(listHeaderBackgroundColor);
		listheaderLabels.setText("FMS");
		Font titleFont = Font.getDefault().derive(Font.BOLD,15);
		listheaderLabels.setFont(titleFont);



		secondHeaderManger.add(secondHeader);
		secondHeaderManger.setMargin(20,20,0,20);
		listheaderManager.setMargin(0,20,0,20);

		listFieldManager.add(lstField);
		Font listFieldFont = Font.getDefault().derive(Font.PLAIN,17);
		listheaderLabels.setFont(listFieldFont);
		lstField.setFont(titleFont);
		listheaderManager.setMargin(0,20,0,20);

		
		headerMangaer.add(header);
		listheaderManager.add(listheaderLabels);
		add(headerMangaer);
		add(secondHeaderManger);
		add(listheaderManager);
		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,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 getContentWidth();
	}

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


}

 9700-02.png

Please use plain text.
Developer
peter_strange
Posts: 19,601
Registered: ‎07-14-2008
My Device: Not Specified

Re: suggest me how to make this type of view

[ Edited ]

1) You have not understood one the points I was making.  What determines the width of the List Header?  What determines the width of the seocnd green header?  So what should determine the width of your ListField?  Think about this and you should figure it out.  UNtil you do, there is no point moving on. 

2) Sorry I have no idea what you are trying to say here

"Blue default focus should come only row of list not outside from the row"

 

I expect to see a gradient background added to the green headers.  Look at the API for BackgroundFactory and Background.  Search on the forum for more information if you need it. 

Please use plain text.