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
Contributor
maheshqtech
Posts: 43
Registered: ‎11-24-2011
My Device: Perl

Custome text box

Hi, I create a Custome Text Field where I inseert a company name if the company name is less than 15 character then I scroll back and edit any charater but if the name is more than 15 character then I can't scroll back and edit the character

 

help me about it  code as foloowes:

package com;

import net.rim.device.api.ui.Color;
import net.rim.device.api.ui.Manager;
import net.rim.device.api.

ui.Field;
import net.rim.device.api.ui.component.EditField;
import net.rim.device.api.ui.component.BasicEditField;
import net.rim.device.api.ui.component.RichTextField;
import net.rim.device.api.system.EncodedImage;
import net.rim.device.api.system.Bitmap;
import net.rim.device.api.system.Display;
import net.rim.device.api.ui.Graphics;
import net.rim.device.api.system.Characters;
import net.rim.device.api.math.Fixed32;
import net.rim.device.api.ui.DrawStyle;
import net.rim.device.api.ui.Font;

public class CustomTextBox extends Manager {

    /**
     * Default margins
     */
    private final static int DEFAULT_LEFT_MARGIN = 10;
    private final static int DEFAULT_RIGHT_MARGIN = 10;
    private final static int DEFAULT_TOP_MARGIN = 5;
    private final static int DEFAULT_BOTTOM_MARGIN = 5;

    /**
     * Default paddings
     */
    private final static int DEFAULT_LEFT_PADDING = 10;
    private final static int DEFAULT_RIGHT_PADDING = 10;
    private final static int DEFAULT_TOP_PADDING = 5;
    private final static int DEFAULT_BOTTOM_PADDING = 5;

    /**
     * Margins around the text box
     */
    private int topMargin = DEFAULT_TOP_MARGIN;
    private int bottomMargin = DEFAULT_BOTTOM_MARGIN;
    private int leftMargin = DEFAULT_LEFT_MARGIN;
    private int rightMargin = DEFAULT_RIGHT_MARGIN;

    /**
     * Padding around the text box
     */
    private int topPadding = DEFAULT_TOP_PADDING;
    private int bottomPadding = DEFAULT_BOTTOM_PADDING;
    private int leftPadding = DEFAULT_LEFT_PADDING;
    private int rightPadding = DEFAULT_RIGHT_PADDING;

    /**
     * Amount of empty space horizontally around the text box
     */
    private int totalHorizontalEmptySpace = leftMargin + leftPadding + rightPadding + rightMargin;

    /**
     * Amount of empty space vertically around the text box
     */
    private int totalVerticalEmptySpace = topMargin + topPadding + bottomPadding + bottomMargin;

    /**
     * Minimum height of the text box required to display the text entered
     */
    private int minHeight = getFont().getHeight() + totalVerticalEmptySpace;

    /**
     * Width of the text box
     */
    private int width = Display.getWidth();

    /**
     * Height of the text box
     */
    private int height = minHeight;

    /**
     * Background image for the text box
     */
    private EncodedImage backgroundImage;

    /**
     * Bitmap version of the backgroundImage. Needed to reduce the calculation
     * overhead incurred by scaling of the given image and derivation of Bitmap
     * from the EncodedImage every time it is needed.
     */
    private Bitmap bitmapBackgroundImage;

    /**
     * The core element of this text box
     */
    public EditField editField;
    
    
//    public RichTextField editField;
    

    // private BasicEditField editField;

    // private String entireText;

    public CustomTextBox() {
        // Let the super class initialize the core
        super(0);

        // An edit field is the sole field of this manager.
        // old one
        editField = new EditField();
        editField.setEditable(true);
        editField.setMaxSize(200);
        
        
    //    editField = new RichTextField();
        
        // editField = new CustomEditField();
        add(editField);
    }

    public CustomTextBox(EncodedImage backgroundImage) {
        this();
        setBackgroundImage(backgroundImage);
    }

    public void setSize(int width, int height) {
        boolean isChanged = false;

        if (width > 0 // Ignore invalid width
                && this.width != width) {
            this.width = width;
            isChanged = true;
        }

        // Ignore the specified height if it is less
        // than the minimum height required to display the text.
        if (height > minHeight && height != this.height) {
            this.height = height;
            isChanged = true;
        }

        // If width/height has been changed and background image
        // is available, adapt it to the new dimension
        if (isChanged == true && backgroundImage != null) {
            bitmapBackgroundImage = getScaledBitmapImage(backgroundImage, this.width - (leftMargin + rightMargin), this.height - (topMargin + bottomMargin));
        }
    }

    public void setWidth(int width) {

        if (width > 0 && width != this.width) {
            this.width = width;

            // If background image is available, adapt it to the new width
            if (backgroundImage != null) {
                bitmapBackgroundImage = getScaledBitmapImage(backgroundImage, this.width - (leftMargin + rightMargin), this.height - (topMargin + bottomMargin));
            }
        }
    }

    public void setHeight(int height) {
        // Ignore the specified height if it is
        // less than the minimum height required to display the text.
        if (height > minHeight) {
            this.height = height;

            // If background image is available, adapt it to the new width
            if (backgroundImage != null) {
                bitmapBackgroundImage = getScaledBitmapImage(backgroundImage, this.width - (leftMargin + rightMargin), this.height - (topMargin + bottomMargin));
            }
        }
    }

    public void setBackgroundImage(EncodedImage backgroundImage) {
        this.backgroundImage = backgroundImage;

        // Consider the height of background image in
        // calculating the height of the text box.
        // setHeight() does not ensure that specified
        // height will be in effect, of course, for valid reasons.
        // So derivation of Bitmap image in the setHeight() method is not sure.
        setHeight(backgroundImage.getHeight() + topMargin + bottomMargin);
        if (bitmapBackgroundImage == null) {
            bitmapBackgroundImage = getScaledBitmapImage(backgroundImage, this.width - (leftMargin + rightMargin), this.height - (topMargin + bottomMargin));
        }
    }

    /**
     * Generate and return a Bitmap Image scaled according to the specified
     * width and height.
     *
     * @param image
     *            EncodedImage object
     * @param width
     *            Intended width of the returned Bitmap object
     * @param height
     *            Intended height of the returned Bitmap object
     * @return Bitmap object
     */
    private Bitmap getScaledBitmapImage(EncodedImage image, int width, int height) {
        // Handle null image
        if (image == null) {
            return null;
        }

        int currentWidthFixed32 = Fixed32.toFP(image.getWidth());
        int currentHeightFixed32 = Fixed32.toFP(image.getHeight());

        int requiredWidthFixed32 = Fixed32.toFP(width);
        int requiredHeightFixed32 = Fixed32.toFP(height);

        int scaleXFixed32 = Fixed32.div(currentWidthFixed32, requiredWidthFixed32);
        int scaleYFixed32 = Fixed32.div(currentHeightFixed32, requiredHeightFixed32);

        image = image.scaleImage32(scaleXFixed32, scaleYFixed32);

        return image.getBitmap();
    }

    protected void sublayout(int width, int height) {
        // We have one and only child - the edit field.
        // Place it at the appropriate place.
        Field field = getField(0);
        layoutChild(field, this.width - totalHorizontalEmptySpace, this.height - totalVerticalEmptySpace);
        setPositionChild(field, leftMargin + leftPadding, topMargin + topPadding);

        setExtent(this.width, this.height);
    }

    public void setTopMargin(int topMargin) {
        this.topMargin = topMargin;
    }

    public void setBottomMargin(int bottomMargin) {
        this.bottomMargin = bottomMargin;
    }

    protected void paint(Graphics graphics) {
        // Draw background image if available, otherwise draw a rectangle
        
        
        if (bitmapBackgroundImage == null) {
            graphics.drawRect(leftMargin, topMargin, width - (leftMargin + rightMargin), height - (topMargin + bottomMargin));
            graphics.drawRoundRect(leftMargin, topMargin, width - (leftMargin + rightMargin), height - (topMargin + bottomMargin), 5, 5);
        } else {
            graphics.drawBitmap(leftMargin, topMargin, width - (leftMargin + rightMargin), height - (topMargin + bottomMargin), bitmapBackgroundImage, 0, 0);
        }

        
        //add by mahesh
        graphics.setColor(Color.BLACK);
        graphics.setFont(graphics.getFont().derive(Font.PLAIN, 12));
        //-------------
        
        
        // Determine the rightward text that can fit into the visible edit field

        EditField ef = (EditField) getField(0);
        String entireText = ef.getText();
        ef.setEditable(true);
        ef.setMaxSize(200);

        boolean longText = false;
        String textToDraw = "";
        Font font = getFont();
        int availableWidth = width - totalHorizontalEmptySpace;
        if (font.getAdvance(entireText) <= availableWidth) {
            textToDraw = entireText;
        } else {
            int endIndex = entireText.length();
            for (int beginIndex = 1; beginIndex < endIndex; beginIndex++) {
                textToDraw = entireText.substring(beginIndex);
                if (font.getAdvance(textToDraw) <= availableWidth) {
                    longText = true;
                    break;
                }
            }
        }

        if (longText == true) {
            // Force the edit field display only the truncated text
            ef.setText(textToDraw);

            // Now let the components draw themselves
            super.paint(graphics);

            // Return the text field its original text
            ef.setText(entireText);
        } else {
            super.paint(graphics);
        }
    }

    public int getPreferredWidth() {
        return width;
    }

    public int getPreferredHeight() {
        return height;
    }

    protected boolean keyChar(char ch, int status, int time) {
        if (ch == Characters.ENTER) {
            return true;
        } else {
            return super.keyChar(ch, status, time);
        }
    }

    public String getText() {
        return ((EditField) getField(0)).getText();
    }

    
    
    public void setText(final String text) {
        ((EditField) getField(0)).setText(text);
    }
}

 

pls help me

Please use plain text.
Developer
arkadyz
Posts: 2,268
Registered: ‎07-08-2009
My Device: various

Re: Custome text box

Your CustomTextBox is not scrollable (I don't see any super(HORIZONTAL_SCROLL) in any of your constructors), and EditField does not handle scrolling on its own. I guess that's the main problem. You may also want to eliminate keyChar completely and add NO_NEWLINE style bit to your EditField.

 

There is a knowledge base article creating a gadget which seems to suit your needs - take a look here and don't forget to check the comments - they discuss borders and should give you ideas about the background painting as well:

Scrollable one-line text input field

----------------------------------------------------------
please click 'Accept Solution' on posts that provide the solution to the question you've posted. Don't say "Thanks", press 'Like' button instead!
Please use plain text.
Trusted Contributor
omar123456789
Posts: 103
Registered: ‎11-07-2010
My Device: Not Specified

Re: Custome text box

try this 

	private class OneLineTextField extends HorizontalFieldManager {

		public OneLineTextField(long style) {
			super(NO_HORIZONTAL_SCROLL);
			back = ResourceManager.getInstance().getTextFieldImg();// cccc
			HorizontalFieldManager textMgr = new HorizontalFieldManager(
					HORIZONTAL_SCROLL);
			_editField = new MyEditField(style
					| TestCustomTextField.USE_ALL_HEIGHT);
			_editField.setFocusListener(new FocusChangeListener() {

				public void focusChanged(Field field, int eventType) {
					// TODO Auto-generated method stub
					invalidate();
				}
			});
			textMgr.add(_editField);
			add(textMgr);
			// setBackground(BackgroundFactory.createBitmapBackground(back));
			setBackground(BackgroundFactory.createSolidBackground(
					Color.WHITE));
			Border border = BorderFactory.createRoundedBorder(new XYEdges(4, 4,
					4, 4), Color.WHITE, Border.STYLE_FILLED);
			setBorder(border);
			setMargin(10, 0, 10, 0);
			_editField.setCursorPosition(0);
		}

	}

	class MyEditField extends EditField {
		public MyEditField(long style) {
			super(EditField.NO_NEWLINE | EditField.FOCUSABLE
					| EditField.EDITABLE | style);
			setPadding(back.getHeight() / 2 - getFont().getHeight() / 2, 0, 0,
					0);
		}

		protected void paint(Graphics graphics) {
			graphics.setColor(getColorForEditField());
			if (this.getText().length() == 0) {
				graphics.setColor(Color.GRAY);
				graphics.drawText(getHint(), 0, 0);
			}
			super.paint(graphics);
		}

		protected void layout(int width, int height) {
			// TODO Auto-generated method stub
			super.layout(width, 100);
			super.setExtent(width, 100);

		}

	}

 

Please use plain text.
Contributor
maheshqtech
Posts: 43
Registered: ‎11-24-2011
My Device: Perl

Re: Custome text box

Hi,

I tried your both codes but it still not working.

8520.png

 

On the above image if i enter charcters upto 11 it is geeting scrolled on both side (left+right) & i can update the any previous charcter  but as soon as i enter 12th charcacter in the company name the horizontal scrolling doesn't work & i cant even update any previous charcacter. If i want to update any previous character i have to delete the sentence from the last cahrcter & have to reach the character which i want to update.

 

8520-01.png

 

In the above image i have enterd 12 characters in the company name & i cant update the previous caharacters from the middle.

 

Thanks in advance.

Waiting for your reply.

Please use plain text.
Developer
arkadyz
Posts: 2,268
Registered: ‎07-08-2009
My Device: various

Re: Custome text box

Can you show how you tried the code? What modifications did you make? How are you adding the fields to the managers?

 

By the way, omar's code has a very strange and definitely unnecessary layout override for the MyEditField. Also - setPadding is buggy in EditField, you'd better not use that as well.

----------------------------------------------------------
please click 'Accept Solution' on posts that provide the solution to the question you've posted. Don't say "Thanks", press 'Like' button instead!
Please use plain text.
Trusted Contributor
omar123456789
Posts: 103
Registered: ‎11-07-2010
My Device: Not Specified

Re: Custome text box

layout override for the MyEditField is used to control the height and width of the editfield it self,

 

how we can control it without overriding the layout ?!

Please use plain text.
Developer
arkadyz
Posts: 2,268
Registered: ‎07-08-2009
My Device: various

Re: Custome text box


omar123456789 wrote:

layout override for the MyEditField is used to control the height and width of the editfield it self,

 

how we can control it without overriding the layout ?!


Why do you need to control it? It lays itself out according to the font size. Besides, controlling EditField's size is simply wrong - you should properly size the manager around it and the manager will tell the field how much room it can have. This horizontally scrolling manager will display the background image or the border and limit and positioin the EditField as necessary. Take a look in the comments of the article I suggested in one of the previous replies.

 

In addition, when you call super.layout with modified width and height values, it is an extremely bad practice to call setExtent after that. If you want the field to occupy the whole region you supply, create it with USE_ALL_WIDTH|USE_ALL_HEIGHT and simply call super.layout with the desired values.

----------------------------------------------------------
please click 'Accept Solution' on posts that provide the solution to the question you've posted. Don't say "Thanks", press 'Like' button instead!
Please use plain text.
Contributor
maheshqtech
Posts: 43
Registered: ‎11-24-2011
My Device: Perl

Re: Custome text box

Hi,

 

I am not using omar's code ,

 

The first code which I post is the custome text filed code which I use.

 

for the text filed I use the code as followes:-

 

           txtCname=new CustomTextBox(imgText);
            txtCname.setSize(150, 24);
            txtCname.setMargin(0, 0,0, -3);
            txtCname.setEditable(true);
            vfmCname_1.add(txtCname);

 

txtCname is the CustomTextBox object which will draw the Textbox with the image

 

and vfmCname_1 is the vertical field manager which will be added on top veticalfield manage and finnaly the top vertical field mange is put on the add methos ex:- add(TopVerticalfield);

 

Thanks

Please use plain text.
Developer
arkadyz
Posts: 2,268
Registered: ‎07-08-2009
My Device: various

Re: Custome text box

I've already told you what's wrong with your code - you have no horizontally scrolling components. EditField in BlackBerry does not handle scrolling on its own - a horizontally scrolling manager will let it have an almost infinite width and then handle scrolling on its own.

 

Read the article to get the overall idea, then open and read the comments for enhancements (they contain some complete code as well, much closer to what you are trying to achieve).

 

One last thing: BlackBerry does not handle negative margins well, you'll need to achieve the effect using your own tools.

----------------------------------------------------------
please click 'Accept Solution' on posts that provide the solution to the question you've posted. Don't say "Thanks", press 'Like' button instead!
Please use plain text.