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
patilajayr
Posts: 410
Registered: ‎07-28-2010
My Device: 8000
My Carrier: hi

How should i design this screen?

Hello friends,

                        I am doing login screen. i want to design that this way in any screen height width it work fine. i am doing application for 5.0 and above os.

                        Please help me. i am attaching image please help me for that// here i want to use lable field and edit field. but i want horizental background like that.. 

                          any one tell me how should i do that scree like that?

 

SC20120306-175013.jpeg

Please use plain text.
Developer
peter_strange
Posts: 19,603
Registered: ‎07-14-2008
My Device: Not Specified

Re: How should i design this screen?

There is quite a lot in this screen.  I suggest you take it bit at a time and ask about specific parts that you try to replicate and it doesn't work..

 

For the main body of the screen, you could use Background to set the black background and Border to set the curved corner border, or you could do the same using paintBackground.  You can look up the API for information on this and there are examples in the forum. 

 

For the positioning of the input Fields you are better creating your own custom Manager to centre the panel.  I seem to remember there is a centering manager sample on the forum so search fior it or you can create your own.

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

 

The fields and buttons look similar to things you will find here

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

 

For your header area, there is a KB article which supplied code that replicates the standard header Fields for most devices, sorry I can't seem to find it atm.  But search the Developer Zone and you should find it.

 

Have fun. 

 

Please use plain text.
Developer
patilajayr
Posts: 410
Registered: ‎07-28-2010
My Device: 8000
My Carrier: hi

Re: How should i design this screen?

thanks for reply me. you clear my many problem. i just want to ask you one thing means my application one build for all screen sizes. 

                   i dint get how should i do center panle means it will set all screen sizes? how sould i solve panel issue?

Please use plain text.
Developer
simon_hain
Posts: 16,113
Registered: ‎07-29-2008
My Device: Z10 LE, Z30, Passport
My Carrier: O2 Germany

Re: How should i design this screen?

use http://www.blackberry.com/developers/docs/7.1.0api/net/rim/device/api/system/Display.html#getWidth() to retrieve the available width, then calculate the width of your manager and place it accordingly.
----------------------------------------------------------
feel free to press the like button on the right side to thank the user that helped you.
please mark posts as solved if you found a solution.
@SimonHain on twitter
Please use plain text.
Developer
fwest
Posts: 67
Registered: ‎10-14-2009
My Device: Not Specified

Re: How should i design this screen?

instead of wrapping your head around the manager code, you can first try the xmlLayout library that i released yesterday

http://supportforums.blackberry.com/t5/Java-Development/xmlLayout-1-0-0-OS-5-BSD-License/td-p/160932...

if it does not work out, you can still use all the manager related code, as this will have 0 impact on your existing code.

-------------
blog: http://coding.westreicher.org
twitter: http://www.twitter.com/meredrica
Please use plain text.
Developer
patilajayr
Posts: 410
Registered: ‎07-28-2010
My Device: 8000
My Carrier: hi

Re: How should i design this screen?

Hello

          i download your exmaple folder and try to run it but it doesnt work. means first i copy your example folder and past the folder to workspace. and run the project but not working this project. please help me.

 

thanks and regards,

       Ajay patil.

Please use plain text.
Developer
fwest
Posts: 67
Registered: ‎10-14-2009
My Device: Not Specified

Re: How should i design this screen?

well you obviously need the library too.

those are 2 eclipse projects, dont paste them in your workspace, use the import feature from eclipse.

-------------
blog: http://coding.westreicher.org
twitter: http://www.twitter.com/meredrica
Please use plain text.
Developer
patilajayr
Posts: 410
Registered: ‎07-28-2010
My Device: 8000
My Carrier: hi

Re: How should i design this screen?

Thanks for reply me. i create one panel on that login name and password field. but dont come to know how should i create edite field 

        how should i add lable fied and edit field on panel?

 

//#preprocess
/*
 * ListStyleButtonField.java
 *
 */

package com.txla.component;

import net.rim.device.api.system.*;
import net.rim.device.api.ui.*;
import net.rim.device.api.ui.component.*;
import net.rim.device.api.ui.container.HorizontalFieldManager;

    
public class ListStyleButtonField extends Field
{
    public static int DRAWPOSITION_TOP = 0;
    public static int DRAWPOSITION_BOTTOM = 1;
    public static int DRAWPOSITION_MIDDLE = 2;
    public static int DRAWPOSITION_SINGLE = 3;
    
    private static final int CORNER_RADIUS = 18;
    
    private static final int HPADDING = Display.getWidth() <= 320 ? 6 : 8;
    private static final int VPADDING = 4;
    
    private static final int COLOR_BACKGROUND = 14013909;//0xFFFFFF;
    private static final int COLOR_BORDER = 0xBBBBBB;
    private static final int COLOR_BACKGROUND_FOCUS =14013909; //0x186DEF;
    
    
    private MyLabelField _labelField;
    private Bitmap _leftIcon;
    private Bitmap _actionIcon;
    
    private int _targetHeight;
    private int _rightOffset;
    private int _leftOffset;
    private int _labelHeight;
    
    private int _drawPosition = -1;
    
    public ListStyleButtonField( String label, long style )
    {
        this( label, null, style );
    }
    public ListStyleButtonField(String label, Field ed1){
    
    }
//    public ListStyleButtonField( String label, String editfield, long style )
//    {
//        this( label, null,null, style );
//    }
    public ListStyleButtonField( String label, Bitmap actionIcon )
    {
        this( label, actionIcon, 0 );
    }
    
    public ListStyleButtonField( String label, Bitmap actionIcon, long style )
    {
        this( null, label, actionIcon, style );
    }
    
    public ListStyleButtonField( Bitmap icon, String label, long style )
    {
        this( icon, label, null, style );
    }
    
    public ListStyleButtonField( Bitmap icon, String label, Bitmap actionIcon, long style )
    {
        super( USE_ALL_WIDTH | Field.FOCUSABLE );
               
        _labelField = new MyLabelField( label, style );
        _actionIcon = actionIcon;
        _leftIcon = icon;
    }
    
    /**
     * DRAWPOSITION_TOP | DRAWPOSITION_BOTTOM | DRAWPOSITION_MIDDLE
     * Determins how the field is drawn (borders)
     * If none is set, then no borders are drawn
     */
    public void setDrawPosition( int drawPosition )
    {
        _drawPosition = drawPosition;
    }
    
    public String toString()
    {
        return _labelField.toString();
    }
    
    public void layout( int width, int height )
    {

        _targetHeight = getFont().getHeight() / 2 * 3 + 2 * VPADDING;
//#ifndef VER_4.6.1 | VER_4.6.0 | VER_4.5.0 | VER_4.2.1 | VER_4.2.0
        if( Touchscreen.isSupported() ) {
            _targetHeight = getFont().getHeight() * 2 + 2 * VPADDING;
        }
//#endif
    	
        _leftOffset = HPADDING;
        if( _leftIcon != null ) {
            _leftOffset += _leftIcon.getWidth() + HPADDING;
        }
        
        _rightOffset = HPADDING;
        if( _actionIcon != null ) {
            _rightOffset += _actionIcon.getWidth() + HPADDING;
        }
        
        _labelField.layout( width - _leftOffset - _rightOffset, height );
        _labelHeight = _labelField.getHeight();
        int labelWidth = _labelField.getWidth();
        
        if( _labelField.isStyle( DrawStyle.HCENTER ) ) {
            _leftOffset = ( width - labelWidth ) / 2;
        } else if ( _labelField.isStyle( DrawStyle.RIGHT ) ) {
            _leftOffset = width - labelWidth - HPADDING - _rightOffset;
        }
        
        int extraVPaddingNeeded = 0;
        if( _labelHeight < _targetHeight ) {
            // Make sure that they are at least 1.5 times font height
            extraVPaddingNeeded =  ( _targetHeight - _labelHeight ) / 2;
        }
        
        setExtent( width, _labelHeight + 2 * extraVPaddingNeeded );
    }
    
    public void setText( String text )
    {
        _labelField.setText( text );
        updateLayout();
    }
    
    protected void paint( Graphics g )
    {
        // Left Bitmap
        if( _leftIcon != null ) {
            g.drawBitmap( HPADDING, VPADDING, _leftIcon.getWidth(), _leftIcon.getHeight(), _leftIcon, 0, 0 );
        }
        
        // Text
        try {
            g.pushRegion( _leftOffset, ( getHeight() - _labelHeight ) / 2, getWidth() - _leftOffset - _rightOffset, _labelHeight, 0, 0 );
            _labelField.paint( g );
        } finally {
            g.popContext();
        }
        
        // Right (Action) Bitmap
        if( _actionIcon != null ) {
            g.drawBitmap( getWidth() - HPADDING - _actionIcon.getWidth(), ( getHeight() - _actionIcon.getHeight() ) / 2, _actionIcon.getWidth(), _actionIcon.getHeight(), _actionIcon, 0, 0 );
        }
    }
    
    protected void paintBackground( Graphics g )
    {
        if( _drawPosition < 0 ) {
            // it's like a list field, let the default background be drawn
            super.paintBackground( g );
            return;
        }
        
        int oldColour = g.getColor();
        
        int background = g.isDrawingStyleSet( Graphics.DRAWSTYLE_FOCUS ) ? COLOR_BACKGROUND_FOCUS : COLOR_BACKGROUND;
        try {
            if( _drawPosition == 0 ) {
                // Top
                g.setColor( background );
                g.fillRoundRect( 0, 0, getWidth(), getHeight() + CORNER_RADIUS, CORNER_RADIUS, CORNER_RADIUS );
                g.setColor( COLOR_BORDER );
                g.drawRoundRect( 0, 0, getWidth(), getHeight() + CORNER_RADIUS, CORNER_RADIUS, CORNER_RADIUS );
                g.drawLine( 0, getHeight() - 1, getWidth(), getHeight() - 1 );
            } else if( _drawPosition == 1 ) {
                // Bottom 
                g.setColor( background );
                g.fillRoundRect( 0, -CORNER_RADIUS, getWidth(), getHeight() + CORNER_RADIUS, CORNER_RADIUS, CORNER_RADIUS );
                g.setColor( COLOR_BORDER );
                g.drawRoundRect( 0, -CORNER_RADIUS, getWidth(), getHeight() + CORNER_RADIUS, CORNER_RADIUS, CORNER_RADIUS );
            } else if( _drawPosition == 2 ) {
                // Middle
                g.setColor( background );
                g.fillRoundRect( 0, -CORNER_RADIUS, getWidth(), getHeight() + 2 * CORNER_RADIUS, CORNER_RADIUS, CORNER_RADIUS );
                g.setColor( COLOR_BORDER );
                g.drawRoundRect( 0, -CORNER_RADIUS, getWidth(), getHeight() + 2 * CORNER_RADIUS, CORNER_RADIUS, CORNER_RADIUS );
                g.drawLine( 0, getHeight() - 1, getWidth(), getHeight() - 1 );
            } else {
                // Single
                g.setColor( background );
                g.fillRoundRect( 0, 0, getWidth(), getHeight(), CORNER_RADIUS, CORNER_RADIUS );
                g.setColor( COLOR_BORDER );
                g.drawRoundRect( 0, 0, getWidth(), getHeight(), CORNER_RADIUS, CORNER_RADIUS );
            }
        } finally {
            g.setColor( oldColour );
        }
    }
    
    protected void drawFocus( Graphics g, boolean on )
    {
        if( _drawPosition < 0 ) {
            super.drawFocus( g, on );
        } else {
            boolean oldDrawStyleFocus = g.isDrawingStyleSet( Graphics.DRAWSTYLE_FOCUS );
            try {
                if( on ) {
                    g.setDrawingStyle( Graphics.DRAWSTYLE_FOCUS, true );
                }
                paintBackground( g );
                paint( g );
            } finally {
                g.setDrawingStyle( Graphics.DRAWSTYLE_FOCUS, oldDrawStyleFocus );
            }
        }
    }
    
    protected boolean keyChar( char character, int status, int time ) 
    {
        if( character == Characters.ENTER ) {
            clickButton();
            return true;
        }
        return super.keyChar( character, status, time );
    }
    
    protected boolean navigationClick( int status, int time ) 
    {
        clickButton(); 
        return true;    
    }
    
    protected boolean trackwheelClick( int status, int time )
    {        
        clickButton();    
        return true;
    }
    
    //#ifndef VER_4.1.0 | 4.0.0
        protected boolean invokeAction( int action ) 
        {
            switch( action ) {
                case ACTION_INVOKE: {
                    clickButton(); 
                    return true;
                }
            }
            return super.invokeAction( action );
        }
    //#endif        
         
    /**
     * A public way to click this button
     */
    public void clickButton() 
    {
        fieldChangeNotify( 0 );
    }
       
//#ifndef VER_4.6.1 | VER_4.6.0 | VER_4.5.0 | VER_4.2.1 | VER_4.2.0
    protected boolean touchEvent( TouchEvent message )
    {
        int x = message.getX( 1 );
        int y = message.getY( 1 );
        if( x < 0 || y < 0 || x > getExtent().width || y > getExtent().height ) {
            // Outside the field
            return false;
        }
        switch( message.getEvent() ) {
       
            case TouchEvent.UNCLICK:
                clickButton();
                return true;
        }
        return super.touchEvent( message );
    }
//#endif 

    public void setDirty( boolean dirty ) {}
    public void setMuddy( boolean muddy ) {}
    
    
    private static class MyLabelField extends LabelField
    {
        
        public MyLabelField( String text, long style )
        {
            super( text, style );
        }
    
        public void layout( int width, int height )
        {   
            super.layout( width, height );
        }   
        
        public void paint( Graphics g ) 
        {
            super.paint( g );
        }
    }
}


 

Please use plain text.