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 attached my view ,In view .i cleared what i want to say ..That defualt blue  shoud be same width of row width not whole device width..

 

Thanks

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

Re: suggest me how to make this type of view

What determines the width of the List Header?

Ans :i take vertical manager and add customlabel in it .Do the set margin of vertical manager.

 

But when i do same with the listfield , add with verticalfield .and set margin of vertical manager .it is not shifted from left and right.

 

 

 

Thanks

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

Re: suggest me how to make this type of view

"But when i do same with the listfield , add with verticalfield .and set margin of vertical manager .it is not shifted from left and right."

 

Has to be.  the vfm has been told to leave a margin on the left.  Are you adding the ListField to the correct VFM?

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

Re: suggest me how to make this type of view

Thanks Sir by mistake i do that

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

Re: suggest me how to make this type of view

[ Edited ]

Note that you only want to add the ListField, nothing else.  So don't add it to its own VerticalFieldManager.  And nothing fancy in there like the code you used previously to try to set the width.  So no layout or anything like that,  In drawListRow(..), just use the width that comes in, not the width you have calculated.  In preferredWidth() you can return Display.getWidth().  This won't be used anyway. 

 

So at this time you screen should contain a LabelField as the Title, a VerticalFieldManager.  Inside the VFM, you should have your Header, your List Header and the ListField.  That is all.

 

And you have nothing that tries to set any widths. 

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

Re: suggest me how to make this type of view

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.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.HORIZONTAL_SCROLL|Manager.VERTICAL_SCROLL|Manager.VERTICAL_SCROLLBAR|FOCUSABLE);
		
		      lstField =new ListField((int) USE_ALL_WIDTH){
				
				protected void layout(int width, int height) {
					
					
					super.layout(width,height);
					setExtent(width, 3*lstField.getRowHeight());
				}
				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);
		listFieldManager.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.png

I am using this code .only there is problem scrolling if user want to scroll list how he can do ? i write in constructor  

Manager.scroll but did not work.

 

Now it look like this.

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

Re: suggest me how to make this type of view

[ Edited ]

Please refer to my previous post, which I edited while you were posting.

 

You are over complicating things - don't add Managers or extra Fields or set widths etc unless you know the effect that this will have.  And make sure you do your tests logically, one step at a time.  And do the simple thing first. 

 

Also note the VFM you are using should do nothing special, no special style bits or anything like that.  It should have NO style settings. 

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

Re: suggest me how to make this type of view

BTW, this is your problem:

 

protected void layout(int width, int height) {
 super.layout(width,height);
setExtent(width, 3*lstField.getRowHeight());
}

 

Why did you code this?  Remove it. 

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

Re: suggest me how to make this type of view

I am going to be off for a while.

 

Remember you should have a screen with a Label field as its title, One VFM added to it, the VFM with setMargins, then added to this VFM is another header FIeld, a list headerField and the listField.  .

 

Once you have done this I think you are nearly there.  The only things left are;

 

1) The gradient background - I am leaving this up to you

2) The icon in the first Heading.  We can discuss this tomorrow. 

 

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

Hello sir 

protected void layout(int width, int height) {
 super.layout(width,height);
setExtent(width, 3*lstField.getRowHeight());
}

 

I used this code for scrolling the listfield .If there is lot of data in list than list should be scroll for fixed area. but i am not able to do that.

 

Now my latest code is look like this.

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 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(){
		VerticalFieldManager listFieldManager=new VerticalFieldManager(Manager.VERTICAL_SCROLL|Manager.VERTICAL_SCROLLBAR|FOCUSABLE);

		   v=new Vector();
		for (int i = 0; i < _elements.length; i++) {
			
			v.addElement(_elements[i]);
			
		}
		
		
		      lstField =new ListField(){
			
				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();
		   
		
		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,17);
		listheaderLabels.setFont(titleFont);


		listFieldManager.setMargin(20,20,0,20);

		listFieldManager.add(secondHeader);

		Font listFieldFont = Font.getDefault().derive(Font.PLAIN,17);
		listheaderLabels.setFont(listFieldFont);
		lstField.setFont(titleFont);

		
		headerMangaer.add(header);
		listFieldManager.add(listheaderLabels);
		listFieldManager.add(lstField);

		add(headerMangaer);
		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);
	}


}

 9700.png