i am developing custom toolbar manager, but i want to adjust the fields alignment to be centered not aligned to the left , any advice
below is the code of toolbar
package galaxy.bb.ui.container;
import net.rim.device.api.ui.Color;
import net.rim.device.api.ui.Graphics;
import net.rim.device.api.ui.XYEdges;
import net.rim.device.api.ui.container.HorizontalFieldManager;
import net.rim.device.api.ui.decor.Background;
import net.rim.device.api.ui.decor.BackgroundFactory;
import net.rim.device.api.ui.decor.Border;
import net.rim.device.api.ui.decor.BorderFactory;
public class ToolBarManager extends HorizontalFieldManager {
private int bgColor = Color.BLACK;
private int borderColor = Color.WHITE;
private int borderStyle= Border.STYLE_FILLED;
public ToolBarManager(){
super(USE_ALL_WIDTH);
}
public ToolBarManager(int bgColor) {
super(USE_ALL_WIDTH);
this.bgColor = bgColor;
}
public ToolBarManager(int bgColor, int borderStyle) {
super(USE_ALL_WIDTH);
this.bgColor = bgColor;
this.borderStyle = borderStyle;
}
public int getBgColor() {
return bgColor;
}
public void setBgColor(int bgColor) {
this.bgColor = bgColor;
}
public int getBorderColor() {
return borderColor;
}
public void setBorderColor(int borderColor) {
this.borderColor = borderColor;
}
public int getBorderStyle() {
return borderStyle;
}
public void setBorderStyle(int borderStyle) {
this.borderStyle = borderStyle;
}
protected void paint(Graphics graphics) {
super.paint(graphics);
XYEdges padding = new XYEdges(5, 5, 5, 5);
Border roundedBorder = BorderFactory.createRoundedBorder(padding,
borderColor, borderStyle);
this.setBorder(roundedBorder);
Background bg = BackgroundFactory.createSolidBackground(bgColor);
this.setBackground(bg);
}
}
You can force the fields to be displayed in the center by specifying FIELD_HCENTER when creating each field. Or by using FIELD_HCENTER when creating the manager. In the latter case, the manager will be center itself, but each fields in it will be left-adjusted. It is mostly the same end results, but under some conditions it may be displayed differently.
You can go ahead with the positioning of the contents at the center position
for eg:
When i want to place any field at the center of screen then i do
(Display.getWidth()-field.getWidth())/2
You can try positioning like this,if it helps in your case.
Related
I have created a CustomToolTip with reference to
earlier questions i asked on stack
Custom pop Up
and
Dialog creation
Now , i have created a CustomisedToolTip like as follows
But the issue is the whole screen gets displayed or occupied the space
i need such that the TextField on the previous screen be Active for that moment
The code for Customised Tool Tip i generated is as follows
import net.rim.device.api.system.Bitmap;
import net.rim.device.api.system.Characters;
import net.rim.device.api.ui.Color;
import net.rim.device.api.ui.Graphics;
import net.rim.device.api.ui.Manager;
import net.rim.device.api.ui.UiApplication;
import net.rim.device.api.ui.component.BitmapField;
import net.rim.device.api.ui.component.ButtonField;
import net.rim.device.api.ui.component.LabelField;
import net.rim.device.api.ui.container.PopupScreen;
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 ToolTip extends PopupScreen{
protected void applyTheme() {
}
private static VerticalFieldManager vfm=new VerticalFieldManager(Manager.NON_FOCUSABLE|Manager.FIELD_HCENTER){
protected void paint(Graphics graphics) {
graphics.setColor(0x00FFFFFF);
graphics.fillRect(0,0,getWidth(),getHeight());
graphics.setColor(0x00000000);
graphics.drawRect(0,0,getWidth(),getHeight());
super.paint(graphics);
}
};
private LabelField lbl;
private static int xPosition;
private static int yPosition;
private String message;
private static Bitmap toolTipImg;
private static BitmapField toolTipBmpFld;
private static ButtonField button;
public ToolTip(final String message,int xPos,int yPos,final Bitmap toolTipImg){
super(vfm);
this.xPosition=xPos;
this.yPosition=yPos;
this.message=message;
this.toolTipImg=toolTipImg;
button=new ButtonField(message,ButtonField.NON_FOCUSABLE){
protected void paint(Graphics graphics) {
graphics.drawBitmap(0,0, toolTipImg.getWidth(), toolTipImg.getHeight(), toolTipImg, 0, 0);
super.paint(graphics);
}
protected void layout(int width, int height) {
super.layout(width, height);
setExtent( toolTipImg.getWidth(), toolTipImg.getHeight());
}
};
vfm.add(button);
}
protected void sublayout(int width, int height) {
super.sublayout(width, height);
setPosition(xPosition, yPosition);
}
protected boolean keyChar(char c, int status, int time) {
// TODO Auto-generated method stub
if(c==Characters.ESCAPE)
{
UiApplication.getUiApplication().popScreen(UiApplication.getUiApplication().getActiveScreen());
}
return super.keyChar(c, status, time);
}
}
Can i get a pop up like this in Blackberry
Overriding the protected void paint(Graphics graphics) method of MainScreen can be helpful in this case.
When a Field get focus, you can tell the MainScreen (parent screen) to draw a tooltip on specified position after it completes it own drawing. And when the Field lost focus, you can avoid tooltip painting. Also a timer can be introduced for removing the tooltip after some time.
Check following implementation. The implementation needs to be improved, currently it's only represents my idea.
public final class MyScreen extends MainScreen implements TooltipProtocol {
private TooltipProtocol tooltipProtocolInstance;
public MyScreen() {
tooltipProtocolInstance = this;
ButtonField bfOne = getButtonField("ButtonField One", "Tooltip One", 200, 20);
ButtonField bfTwo = getButtonField("ButtonField Two", "Tooltip Two", 200, 60);
add(bfOne);
add(bfTwo);
}
private ButtonField getButtonField(String text, final String tooltiptext, final int x, final int y) {
ButtonField bf = new ButtonField(text) {
protected void onFocus(int direction) {
tooltipProtocolInstance.showToolTipText(tooltiptext, x, y);
super.onFocus(direction);
}
protected void onUnfocus() {
tooltipProtocolInstance.hideToolTipText();
super.onUnfocus();
}
};
return bf;
}
private String toolTipText;
private int xTooptip;
private int yTooptip;
private Timer tooltipTimer;
public void showToolTipText(String text, int x, int y) {
toolTipText = text;
xTooptip = x;
yTooptip = y;
if (tooltipTimer != null) {
tooltipTimer.cancel();
tooltipTimer = null;
}
tooltipTimer = new Timer();
tooltipTimer.schedule(new TimerTask() {
public void run() {
hideToolTipText();
}
}, 2000);
invalidate();
}
public void hideToolTipText() {
toolTipText = null;
invalidate();
}
protected void paint(Graphics graphics) {
super.paint(graphics);
if (toolTipText != null) {
int oldColor = graphics.getColor();
graphics.setColor(Color.GREEN);
graphics.drawText(toolTipText, xTooptip, yTooptip);
graphics.setColor(oldColor);
}
}
}
interface TooltipProtocol {
public void showToolTipText(String text, int x, int y);
public void hideToolTipText();
}
Following are output of the above code:
When first button got focus
When first button lost focus, second button got focus
When timer hides tooltip of the second button
As far I understand the question, you want to create a tool tip kind popup screen, but you want user to interact with your LoginScreen UI elements without blocking the whole screen by the tool tip.
This cannot be achievable in Blackberry. PropupScreen acts like a dialog. As we are pushing the instance of the popup screen to the screen stack to make it visually appear, it always block the delegate screen. Unless you remove the popup from the screen stack you cannot interact with your LoginScreen UI components, though they are visually available.
Visit Blackberry java docs for more details: http://www.blackberry.com/developers/docs/6.0.0api/net/rim/device/api/ui/container/PopupScreen.html
Edit:1
You can create a ToolTip screen giving the timer. You can google around and i am sure you will get many code samples. I have listed one link below.
http://v4ks1n.wordpress.com/2011/01/28/tooltips-class-for-blackberry/
Hi, I want to create a Login Screen which has a Username and Password
and a Sign in Button
But when a user fails to enter correct information inside the TextField of Username or Password a pop up like the image chat dialog should pop up from corner of TextField's right side displaying appropriate message How can this Customization be achieved?
i am giving you a simple way. If it is not perfect to your question you just ignore this answer.
Here i made logic like following. i gave you two buttons
1)Login
2)remove
I think you know how to validate your text fields right or wrong; keep one if condition ,write your logic if right no need any field
else wrong then you have three conditions
1)id is wrong
2)password is wrong
or 3)both wrong
according two that condition you can add particular tooltip box on above text field .
I am providing sample for both wrong condition and remove condition also
make it as your requirements
Resources :
chat.png image is required for background
Sample code:
package mypackage;
import net.rim.device.api.system.Bitmap;
import net.rim.device.api.ui.Field;
import net.rim.device.api.ui.FieldChangeListener;
import net.rim.device.api.ui.UiApplication;
import net.rim.device.api.ui.XYEdges;
import net.rim.device.api.ui.component.BasicEditField;
import net.rim.device.api.ui.component.ButtonField;
import net.rim.device.api.ui.container.MainScreen;
import net.rim.device.api.ui.container.VerticalFieldManager;
import net.rim.device.api.ui.decor.Border;
import net.rim.device.api.ui.decor.BorderFactory;
/**
* A class extending the MainScreen class, which provides default standard
* behavior for BlackBerry GUI applications.
*/
public final class MyScreen extends MainScreen implements FieldChangeListener
{
/**
* Creates a new MyScreen object
*/
private BasicEditField id,password;
private ButtonField login,cancel;
private VerticalFieldManager id_mgr,pass_mgr;
private PopupField id_hint,pass_hint;
public static Bitmap img;
public MyScreen()
{
img=Bitmap.getBitmapResource("chat.png");
// Set the displayed title of the screen
setTitle("Login Page");
Border b=BorderFactory.createRoundedBorder(new XYEdges(5, 5, 5, 5), Border.STYLE_SOLID);
id_hint=new PopupField("Wrong Id", img);
pass_hint=new PopupField("Wrong password", img);
id_mgr=new VerticalFieldManager();
id=new BasicEditField(){
protected void layout(int width, int height) {
super.layout(120, 40);
setExtent(120, 40);
}
};
id.setBorder(b);
add(id_mgr);
add(id);
pass_mgr=new VerticalFieldManager();
password=new BasicEditField(){
protected void layout(int width, int height) {
super.layout(120, 40);
setExtent(120, 40);
}
};
password.setBorder(b);
add(pass_mgr);
add(password);
login=new ButtonField("Login");
login.setChangeListener(this);
add(login);
cancel=new ButtonField("Remove");
cancel.setChangeListener(this);
add(cancel);
}
public void fieldChanged(Field field, int context) {
if(field==login)
{
try {
// id_mgr.add(new NullField(Field.FOCUSABLE));
id_mgr.add(id_hint);
id_mgr.setPadding(0, 0, 0, 50);
pass_mgr.add(pass_hint);
pass_mgr.setPadding(0, 0, 0, 50);
id_hint.setFocus();
} catch (IllegalStateException e) {
return;
}
}else if(cancel==field)
{
synchronized (UiApplication.getEventLock()) {
id_mgr.deleteAll();
pass_mgr.deleteAll();
}
}
}
}
and class for PopupField.java is
package mypackage;
import net.rim.device.api.system.Bitmap;
import net.rim.device.api.ui.Color;
import net.rim.device.api.ui.Graphics;
import net.rim.device.api.ui.component.BitmapField;
public class PopupField extends BitmapField{
private Bitmap img,scalled_img;
private String message;
private int layout_width;
public PopupField(String message,Bitmap img)
{
this.message=message;
layout_width=this.getFont().getAdvance(message)+40;
scalled_img=new Bitmap(layout_width, img.getHeight());
img.scaleInto(scalled_img, Bitmap.FILTER_BILINEAR);
this.img=scalled_img;
}
protected void layout(int width, int height) {
super.layout(img.getWidth(), img.getHeight());
setExtent(img.getWidth(), img.getHeight());
}
protected void paint(Graphics graphics) {
graphics.drawBitmap(0, 0, img.getWidth(), img.getHeight(), img,0,0);
graphics.setColor(Color.RED);
graphics.drawText(message,20,20);
super.paint(graphics);
}
}
output image :
keep helping to others
Other solution is this link will tell you
http://v4ks1n.wordpress.com/2011/01/28/tooltips-class-for-blackberry/
I have listfield which contains several rows.
It is working fine when i am using in blackberry torch(I can scroll the listfield and can select(click) any row).
But the same application when i am using for blackberry storm 9500 I can not scroll because as soon as i am trying to scroll the row is getting selected(click).please tell me the reason why it is happening or the way to use listfield in storm
thank you
My lisfield class is
import net.rim.device.api.system.Bitmap;
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.UiApplication;
import net.rim.device.api.ui.XYRect;
import net.rim.device.api.ui.component.Dialog;
import net.rim.device.api.ui.component.ListField;
import net.rim.device.api.ui.component.ListFieldCallback;
public class SpeakersList implements ListFieldCallback
{
private String[] products;
private int rgb=Color.BLACK;
Bitmap arraow;
Bitmap placeholder;
Bitmap holder[];
int i=0;
ImageLoad load;
public Bitmap _bmap;
ListField listField;
TaskWorker taskWorker;
public SpeakersList(String[] products)
{
this.products=products;
arraow= Bitmap.getBitmapResource("arrow.png");
DynamicImages images=new DynamicImages();
placeholder=Bitmap.getBitmapResource(images.defaultimage);
holder=new Bitmap[QandAScreen.imglist.length];
taskWorker = new TaskWorker();
taskWorker.addTask(new ImageDowload());
}
public void drawListRow(ListField listField, Graphics graphics, int index,
int y, int width)
{
this.listField=listField;
final String text=(String) get(listField, index);
if (graphics.isDrawingStyleSet(Graphics.DRAWSTYLE_FOCUS))
{
if(holder[index]==null)
{
holder[index]=placeholder;
}
graphics.setColor(0xC0C0C0);
graphics.fillRect(0,y+0,480,59);
graphics.setColor(rgb);
graphics.setFont(Utility.getBigFont(15));
graphics.drawBitmap(3,y+7,placeholder.getWidth(), placeholder.getHeight(),holder[index], 0, 0);
graphics.drawText(text,70,y+20);
if(Display.getWidth()==480){
graphics.drawBitmap(460,y+20,arraow.getWidth(), arraow.getHeight(),arraow, 0, 0);
}
else if(Display.getWidth()==360)
{
graphics.drawBitmap(330,y+20,arraow.getWidth(), arraow.getHeight(),arraow, 0, 0);
}
else
{
graphics.drawBitmap(300,y+20,arraow.getWidth(), arraow.getHeight(),arraow, 0, 0);
}
graphics.drawLine(0, y+59, Display.getWidth(), y+59);
}
else
{
if(holder[index]==null)
{
holder[index]=placeholder;
}
graphics.setColor(rgb);
graphics.setFont(Utility.getBigFont(15));
graphics.drawBitmap(3,y+7,placeholder.getWidth(), placeholder.getHeight(),holder[index], 0, 0);
graphics.drawText(text,70,y+20);
if(Display.getWidth()==480){
graphics.drawBitmap(460,y+20,arraow.getWidth(), arraow.getHeight(),arraow, 0, 0);
}
else if(Display.getWidth()==360)
{
graphics.drawBitmap(330,y+20,arraow.getWidth(), arraow.getHeight(),arraow, 0, 0);
}
else
{
graphics.drawBitmap(300,y+20,arraow.getWidth(), arraow.getHeight(),arraow, 0, 0);
}
graphics.drawLine(0, y+59, Display.getWidth(), y+59);
}
}
public Object get(ListField listField, int index)
{
return products[index];
}
public int getPreferredWidth(ListField listField)
{
return Display.getWidth()+10;
}
public int indexOfList(ListField listField, String prefix, int start)
{
return -1;
}
class ImageDowload extends Task
{
void doTask()
{
for(;i<QandAScreen.imglist.length;i++)
{
String imgpath=QandAScreen.imglist[i];
if(imgpath==null || imgpath.length()==0)
{
continue;
}
load=new ImageLoad(QandAScreen.imglist[i]+Const.getExtra());
if(load.getData()!=null)
{
UiApplication.getUiApplication().invokeLater(new Runnable()
{
public void run()
{
_bmap=load.getBitmap(40,40);
listField.invalidate(i-1);
holder[i-1]=_bmap;
}
});
}
}
}
}
}
Are you testing with the simulators or real devices? If my memory serves, the 9500 Storm uses the SureClick -display, where the display actually has a small microswitch underneath it, so it can detect touch and clicking (pressing the display) as separate actions. In the simulator, you need to use right mouse button to simulate touch and left to simulate click (or was it the other way around?). Torch (9800) hasn't got the SureClick-thingamabob, so the list can be scrolled with both right and left mouse buttons in the simulator (although they did have some distinction, other worked as touch and other sends continuous 'taps' to the screen or something).
I have created a very basic custom layout to set out a menu made up of ButtonFields.
To position them vertically, i split the screen into 6 and then put them at divides 2,3,4 and 5 as is shown in the code.
So for the emulator, the Torch, a Height of 480 would see buttons at 160,240,320 and 400.
However, when I check them, they are all 24 pixels below this, and there seems no obvious reason unless this is just a typical convention I have missed!
package Test;
import net.rim.device.api.system.Display;
import net.rim.device.api.ui.Field;
import net.rim.device.api.ui.container.VerticalFieldManager;
class MenuLayoutManager extends VerticalFieldManager{
public MenuLayoutManager()
{
super();
}
public int getPreferredWidth()
{
int preferredWidth = Display.getWidth();
return preferredWidth;
}
protected void sublayout(int inMaxWidth, int inMaxHeight)
{
int xCentre = Display.getWidth()/2;
int yGap = Display.getHeight() / 6;
int xPos = 0;
int yPos = yGap * 2;
int fieldNo = this.getFieldCount();
for(int index = 0; index<fieldNo; index++)
{
Field aField = this.getField(index);
this.layoutChild(aField, inMaxWidth, inMaxHeight);
xPos = xCentre - (aField.getWidth() / 2);
this.setPositionChild(aField, xPos, yPos);
yPos += yGap;
}
this.setExtent(inMaxWidth, inMaxHeight);
}
}
------Entry point and button creation----
package Test;
import net.rim.device.api.ui.component.ButtonField;
import net.rim.device.api.ui.container.MainScreen;
class MyScreen extends MainScreen
{
public MyScreen(){
super(MainScreen.NO_VERTICAL_SCROLL|MainScreen.NO_VERTICAL_SCROLLBAR);
this.initialize();
}
private void initialize()
{
// Set the displayed title of the screen
this.setTitle(String.valueOf("Ben's Menu"));
MenuLayoutManager mlm = new MenuLayoutManager();
ButtonField Button1 = new ButtonField("New Game");
ButtonField Button2 = new ButtonField("High Scores");
ButtonField Button3 = new ButtonField("Instructions");
ButtonField Button4 = new ButtonField("Exit");
mlm.add(Button1);
mlm.add(Button2);
mlm.add(Button3);
mlm.add(Button4);
this.add(mlm);
}
}
With a MainScreen, you don't get the full display height allocated to the screen contents. (At a minimum, IIRC, there's the title and a separator.) Try using a FullScreen instead and see what happens.
Below class is a textbox field. Can this be modified so that when the textbox is filled with text and user keeps type the text then scrolls ? Whats happening now is that once the textbox is filled with text any subsequent text that is typed is not being displayed.
Thanks
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.EditField;
public class CustomEditField extends EditField {
// private members of the CustomEditField class
private Font defaultFont;
// used to get the default font
private String text;
// used to specify the default width of the table cells
// constructor calls the super class constructor
public CustomEditField(String label, String initialValue, int maxNumChars,
long style) {
super(label, initialValue, maxNumChars, style);
}
// overrides the default getPreferredWidth functionality to return a fixed
// width
public int getPreferredWidth() {
defaultFont = Font.getDefault();
text = "0000000000";
return defaultFont.getAdvance(text);
}
// overrides the default layout functionality to set the width of the table
// cell
protected void layout(int width, int height) {
width = getPreferredWidth();
height = super.getPreferredHeight();
super.layout(width, height);
// uses the super class' layout functionality
// after the width and the height are set
super.setExtent(width, height);
// uses the super class' setExtent functionality
// after the width and the height are set
}
public void paint(Graphics graphics){
graphics.setBackgroundColor(Color.LIGHTBLUE);
super.paint(graphics);
}
}
This will help you to get started. It is a simplified version of the ScrollableEditField that I am using. I coded it before touch BlackBerry devices became available, therefore some additional work is required here to support TouchEvents.
class ScrollableEditField extends Manager {
private final static int DEFAULT_TOP_PADDING = 1;
private final static int DEFAULT_BOTTOM_PADDING = 1;
private final static int DEFAULT_LEFT_PADDING = 1;
private final static int DEFAULT_RIGHT_PADDING = 1;
private int TOTAL_VERTICAL_PADDING = DEFAULT_TOP_PADDING + DEFAULT_BOTTOM_PADDING;
private int TOTAL_HORIZONTAL_PADDDING = DEFAULT_LEFT_PADDING + DEFAULT_RIGHT_PADDING;
private int width = -1;
private int height = -1;
private HorizontalFieldManager hfm = new HorizontalFieldManager(HORIZONTAL_SCROLL);
private EditField ef;
public ScrollableEditField(String label, String initialValue, int maxNumChars, long innerEditFieldStyle) {
super(NO_HORIZONTAL_SCROLL);
ef = new EditField(label, initialValue, maxNumChars, innerEditFieldStyle);
hfm.add(ef);
add(hfm);
}
protected void sublayout(int width, int height) {
if (this.width != -1) {
width = this.width;
}
if (this.height != -1) {
height = this.height;
} else {
height = ef.getFont().getHeight();
}
layoutChild(hfm, width-TOTAL_HORIZONTAL_PADDDING, height-TOTAL_VERTICAL_PADDING);
setPositionChild(hfm, DEFAULT_LEFT_PADDING, DEFAULT_TOP_PADDING);
setExtent(width, height);
}
public EditField getEditField() {
return ef;
}
public void setWidth(int width) {
this.width = width;
}
protected void onFocus(int direction) {
super.onFocus(direction);
ef.setCursorPosition(0);
}
protected void onUnfocus() {
hfm.setHorizontalScroll(0);
super.onUnfocus();
}
};
public class ScrollableEditFieldScreen extends MainScreen {
public ScrollableEditFieldScreen() {
super(NO_VERTICAL_SCROLL);
setTitle("ScrollableEditField");
// hfm1 and hfm2 are here just to position the ScrollableEditField in the center of the screen
HorizontalFieldManager hfm1 = new HorizontalFieldManager(USE_ALL_HEIGHT | FIELD_HCENTER);
HorizontalFieldManager hfm2 = new HorizontalFieldManager(FIELD_VCENTER);
// instantiating the scrollable edit field and adding border
ScrollableEditField sef = new ScrollableEditField("", "", 50, 0);
sef.setBorder(BorderFactory.createRoundedBorder(new XYEdges(5,5,5,5)));
sef.setWidth(sef.getFont().getAdvance('0')*10);
hfm2.add(sef);
hfm1.add(hfm2);
add(hfm1);
}
}