Question

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?

Answer 1

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/