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 as you said use" gradient background"

 

i already used that

Background listHeaderBackgroundColor = BackgroundFactory.createSolidBackground(Color.WHITESMOKE);
 
		header.setBackground(headerBackgroundColor);

As color i am facing two problem
1) In my real view (First column is Reddish) but when i set my color it look like Brown and Pinkish.
Please help me in resolving this issue

2) scrolling issue in List Field
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 

Today i work only on scrolling issue and able to solve that.When i talk individual  VFM .and and manager.scroll in listfield VFM .it works..May i correct .? 

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.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 listField;
	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(){
		
		VerticalFieldManager headerMangaer=new VerticalFieldManager();
		
		VerticalFieldManager secondHeadermanager=new VerticalFieldManager();
		
		VerticalFieldManager listFieldHeaderManager=new VerticalFieldManager();
		
        VerticalFieldManager listFieldManager=new VerticalFieldManager(Manager.VERTICAL_SCROLL|Manager.VERTICAL_SCROLLBAR|FOCUSABLE){
			
			protected void sublayout(int maxWidth, int maxHeight) {
				// TODO Auto-generated method stub
				super.sublayout(maxWidth, maxHeight);
				setExtent(maxWidth, 5*listField.getRowHeight());
			}
		};

		   v=new Vector();
		for (int i = 0; i < _elements.length; i++) {
			
			v.addElement(_elements[i]);
			
		}
		
		
		     

	
		
		   
		
		Background headerBackgroundColor = BackgroundFactory.createSolidBackground(Color.GREEN);
		Background listHeaderBackgroundColor = BackgroundFactory.createSolidBackground(Color.WHITESMOKE);


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

		
		 listField =new ListField(){
				
				protected void drawFocus(Graphics graphics, boolean on) {
					
					hasFocus = on;
					super.drawFocus(graphics, on);
					hasFocus = false;
					
				};
				
		};

		
		listField.setCallback(this);
		listField.setSize(v.size());
		
		Font listFieldFont = Font.getDefault().derive(Font.PLAIN,17);
		listheaderLabels.setFont(listFieldFont);
		listField.setFont(titleFont);

		
		secondHeadermanager.setMargin(20,20,0,20);
		listFieldHeaderManager.setMargin(0,20,0,20);
        listFieldManager.setMargin(0,20,0,20);
		
		headerMangaer.add(header);
		secondHeadermanager.add(secondHeader);
        listFieldHeaderManager.add(listheaderLabels);
		listFieldManager.add(listField);

		add(headerMangaer);
		add(secondHeadermanager);
		add(listFieldHeaderManager);
		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 Display.getWidth();
	}

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


}

 This is my  original code ...

 

9700-01.png

I think main problem is color of first column ..? and Header image and BackgroundFactory.

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

Re: suggest me how to make this type of view

[ Edited ]

The code that you have looks like it should work OK.  But I am a little frustrated.  I did not tell you to add that many Managers.  You are over complicating things and not doing what I ask.  This makes it more difficult for me to help you.  You should not just put things in because you think that might be a good idea.  You should put things in because they are needed. 

 

Now let us get rid of the Managers you don't need. 

 

1) You should use the MainScreen function setTitle(..) or setBanner.  Use this to put your header at the top of the screen.  and then set the Background on header.  If you do this you do away with headerMangaer

 

2) You should put the Background on the secondHeader, so you should have

secondHeader.setBackground(headerBackgroundColor);

not

secondHeadermanager.setBackground(headerBackgroundColor);

 

3) You are aware that you can multiple Fields to a VFM?

So you can so away with listFieldHeaderManager.  Just add remove it and replace this

listFieldHeaderManager.add(listheaderLabels);

with this

secondHeadermanager.add(listheaderLabels);

 

4) In a previous post you said

".If there is lot of data in list than list should be scroll for fixed area."

This is a new requirement that I was not aware of.  The way you have got this working, by overriding sublayout for the Manager and restricting its height, is correct, well done.

 

But here again, this Manager should just be added to your secondHeadermanager, and then it will pick its width from that.  So replace this:

add(listFieldManager);

with this

secondHeadermanager.add(listFieldManager);

 

remove the code that sets the Margins for listFieldManager.

 

You now have code that has 2 VFMs, secondHeadermanager to manage the stuff that is indented from the sides, and listFieldManager to manage the number of rows of the ListField you display at once. 

 

Regarding the background images, you original requirement was to have a gradient background, not a solid color.  So I assumed that you would use the BackgroundFactory method createLinearGradientBackground(int, int, int, int) to replicate that look. 

 

Anyway have a go at the above and let us know how you get on. 

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 done my correction.

 

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.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 listField;
	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(){
		   Background bg = BackgroundFactory.createSolidBackground(Color.GREEN);

		MyLabel header=new MyLabel();
		header.setText("Assignments");
		header.setBackground(bg);
		setBanner(header);
		    
		
		VerticalFieldManager HeaderManager=new VerticalFieldManager();
		
		
        VerticalFieldManager listFieldManager=new VerticalFieldManager(Manager.VERTICAL_SCROLL|Manager.VERTICAL_SCROLLBAR|FOCUSABLE){
			
			protected void sublayout(int maxWidth, int maxHeight) {
				super.sublayout(maxWidth, maxHeight);
				setExtent(maxWidth, 5*listField.getRowHeight());
			}
		};

		   v=new Vector();
		for (int i = 0; i < _elements.length; i++) {
			
			v.addElement(_elements[i]);
			
		}
		
		
		     

	
		
		   
		
		Background headerBackgroundColor = BackgroundFactory.createSolidBackground(Color.GREEN);
		Background listHeaderBackgroundColor = BackgroundFactory.createSolidBackground(Color.WHITESMOKE);


		
		
		
		
		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,17);
		listheaderLabels.setFont(titleFont);

		
		 listField =new ListField(){
				
				protected void drawFocus(Graphics graphics, boolean on) {
					
					hasFocus = on;
					super.drawFocus(graphics, on);
					hasFocus = false;
					
				};
				
		};

		
		listField.setCallback(this);
		listField.setSize(v.size());
		
		Font listFieldFont = Font.getDefault().derive(Font.PLAIN,17);
		listheaderLabels.setFont(listFieldFont);
		listField.setFont(titleFont);

		
		HeaderManager.setMargin(20,20,0,20);
		
		HeaderManager.add(secondHeader);
		HeaderManager.add(listheaderLabels);
		listFieldManager.add(listField);
		HeaderManager.add(listFieldManager);
		add(HeaderManager);
	}
	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 Display.getWidth();
	}

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


}

 Everry thing is fine.But can you please solve my color issue.

in my list my first colomn is Redish color(original view ) but when i put it it look like brownish 9700.png.

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

Re: suggest me how to make this type of view

Background b = BackgroundFactory.createLinearGradientBackground(
Color.GREEN,Color.GREEN,Color.GREEN, Color.GREEN);
// Background bg = BackgroundFactory.createSolidBackground(Color.GREEN);

MyLabel header=new MyLabel();
header.setText("Assignments");
header.setBackground(b);
setBanner(header);

 

Is this a way to use createSolidBackground method()

?

 

Thanks

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

Re: suggest me how to make this type of view

You do not need my help with either of these issues.  Read the documentation, try things and test, you should figure it out.

 

Note that Color.WHITE, is just a quick way of specifying 0x00FFFFFF.  Colors are expressed using RGB values, in hex, so 0x00FF0000 is Red, 0x000000FF00 is Green and 0x000000FF is Blue.  Play with the colors to get your gradient and your colors in the ListField working as you want.  I never use the Color. values. 

 

The final bit of the puzzle is the image.  You already have code to display an image, in your paint method from away back.  So to display the image in the header you just need to change that specoifc Header Field so that it knows about the image, and then paint the image in the paint() method. 

 

I will leave this to you too.

 

Now I think it is time for you to read some learning stuff.  Here is what you should review.  This will extend your knowledge further.

 

http://supportforums.blackberry.com/t5/Java-Development/Create-custom-fields/ta-p/444962

 

http://supportforums.blackberry.com/t5/Java-Development/Create-a-custom-layout-manager-for-a-screen/...

 

http://supportforums.blackberry.com/t5/Java-Development/How-to-Extend-Manager/ta-p/446749

 

http://supportforums.blackberry.com/t5/Java-Development/Implement-advanced-buttons-fields-and-manage...

 

http://supportforums.blackberry.com/t5/Java-Development/MainScreen-explained/ta-p/606644

 

Have fun. 

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

Re: suggest me how to make this type of view

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

Re: suggest me how to make this type of view

landing-page.jpg

 

 

Thanks Sir i lear lot of thinf from that view ..can you please advice me for this view also..?

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

Re: suggest me how to make this type of view

Instead of me telling you, how about you tell me?

 

Start with the Managers, what Managers will you add, how will they be nested?

 

FYI, I would use 4 Mangers

 

Then what Fields will you need to use?  You already have one for the green gradient, You need another LabelField with grey background - you know how to do that.  So the only tricky areas are the Phone Number Panel and the Provisioning Status Panel. 

 

But you can do the rest with what you know already.

 

I would create special VFMs to lay out the Phone Number panel and the Provisioning status panel.  Once you have reviewed the documentation I have given you, you should understand how to do these.  But if not then start a new Thread with these specifically.