0

I am using the built in field manager from RIM. (SDK 7.0)

Yet the effects are shocking. The layout is dreadful, and Ive no idea how to customise it. You can see the difference to my app against facebook app. Did they use the built in stuff, if so how? and if not how do I do similar?

How would I go about making my forms look so much better. Ive tried modifying the Styles parameter in many ways.

enter image description here

Current code:

    final BasicEditField UserID = new BasicEditField( "User ID:", "example");
    final BasicEditField UserName = new BasicEditField( "Username:", "");
    final BasicEditField Password = new PasswordEditField( "Password:", "example" );

    VerticalFieldManager loginFields = new VerticalFieldManager(FIELD_HCENTER |FIELD_VCENTER );
    loginFields.add( UserID ); 
    loginFields.add( UserName ); 
    loginFields.add( Password ); 

    ButtonField Login = new ButtonField( "Login", ButtonField.CONSUME_CLICK | ButtonField.FIELD_HCENTER );
    loginFields.add( Login );
IAmGroot
  • 13,760
  • 18
  • 84
  • 154
  • 2
    One hint might be the size of the Facebook app, 3MB. There is a lot of work both graphics and software involved in makeing a unique UI. – Richard Mar 13 '12 at 20:15

2 Answers2

2

you can use the following code as starting point to create a fancy login screen:

public loginScreen() {

    super(MainScreen.VERTICAL_SCROLL | MainScreen.VERTICAL_SCROLLBAR);

    vMgr = (VerticalFieldManager)getMainManager();

    XYEdges mgrThickPadding = new XYEdges(4, 4, 4, 4);
    Border mgrRoundedBorder = BorderFactory.createRoundedBorder(mgrThickPadding, Border.STYLE_SOLID);
    Background bg = BackgroundFactory.createSolidBackground(Color.LIGHTSTEELBLUE);
    vMgr.setBackground(bg);
    vMgr.setBorder(mgrRoundedBorder);

    setTitle("Login Screen");

    XYEdges thickPadding = new XYEdges(4, 4, 4, 4);
    Border roundedBorder = BorderFactory.createRoundedBorder(thickPadding, Border.STYLE_SOLID);

    Background solidBackground = BackgroundFactory.createSolidBackground(Color.LIGHTGRAY);
    this.setBackground(solidBackground);


    usernameFld = new EditField("Username: ","", 20, BasicEditField.NO_NEWLINE);
    usernameFld.setBorder(roundedBorder);
    usernameFld.setBackground(solidBackground);

    passwordFld = new PasswordEditField("Password: ","", 20, 0); 
    passwordFld.setBorder(roundedBorder);
    passwordFld.setBackground(solidBackground);

    FieldChangeListener listener = new FieldChangeListener() {

        public void fieldChanged(Field field, int context) {
            ButtonField buttonField = (ButtonField) field;
            System.out.println("Button pressed: " + buttonField.getLabel());

            if (field == loginBtn)
            {
                // Do Login actions
            }
        }
    };

    loginBtn.setMinimalWidth(200);
    loginBtn.setChangeListener(listener);

    vMgr.add(usernameFld);
    vMgr.add(passwordFld);           
    vMgr.add(loginBtn);
}
rosco
  • 939
  • 9
  • 16
  • Just given your code a try, with a few tweaks to get it running. I must say, its much better! Definately useable on my standard forms. Im going to play around with it, and try and centre it etc. Thanks alot! :) – IAmGroot Mar 14 '12 at 09:34
1

You should use custom components create UI like this. Also you can use setBorder and setBackgound properties of field.

This SO link gives moe details about Blackberry User Interface Design. it Should help you.

Community
  • 1
  • 1
Stack User 5674
  • 1,548
  • 1
  • 20
  • 44