If you are using Internet Explorer, please remove blackberry.com from your compatibility view settings.

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
n8r0n
Posts: 40
Registered: ‎03-29-2009
My Device: Storm 9550
My Carrier: AT&T

Re: Right-aligning Text in (Basic)EditField

Ydaraishy, I'm not sure I fully understand your comment about using "field width, not the character width * number of characters".  Can you clarify?

 

I think I need to use a dynamic value that depends on the text.  In my terminology, the "field width" is constant, in that I want to draw a background behind the text, that does not resize.   I actually wasn't going to use one character's width, times the number of characters, as posted in code previously.  I was just going to use getAdvance(getText()).   However, I'm finding that this has some problems, too. 

 

Anyway, I think I have an acceptable solution.  It's not pretty, not very flexible, and has plenty of other downsides.  However, it does conform to my functional definition of "right justified".  The code is below.

 

By the way, this field is one-line only, so I'm not concerned about newlines.  Also, as stated before, I don't use a label for this EditField, so the code below does not handle labels. 

 

For the benefit of others who might be unfortunate enough to need to use this code, the whole reason I override paint() is to draw a custom, partly transparent, rounded-rectangle background.  If you don't need that, you can ignore everything about alpha, background color, and paint().  I also allow setting of a custom font in this class, which is a separate issue from the text-alignment.  Anyway, here's what I have so far. 

 

 

 

import net.rim.device.api.ui.Graphics;
import net.rim.device.api.ui.component.BasicEditField;
import net.rim.device.api.ui.Manager;
import net.rim.device.api.ui.Font;
import net.rim.device.api.ui.Color;

/**
 * CustomEditField provides a BasicEditField, with a custom rounded rectangle background, and
 * text that can be left, right, or center-justified with FIELD_LEFT, FIELD_RIGHT, or FIELD_HCENTER.
 */
public class CustomEditField extends Manager {

   private int _fieldHeight = 0;
   private int _fieldWidth = 0;
   private int _bgColor = Color.WHITE;
   private int _alpha = 0xFF;
   private long _alignment;
   private Font _font = Font.getDefault();
   private AlignableEditField _editField;

   /**
    * Create a new instance of CustomEditField
    * @param initialValue Initial text to show in the field.
    * @param maxNumChars Maximum number of characters this field can hold.
    * @param style Styles for this field (see Field for usable styles).
    */
   public CustomEditField(String initialValue, int maxNumChars, long style) {
      super(NO_VERTICAL_SCROLL | NO_VERTICAL_SCROLLBAR);
      _alignment = (style & BasicEditField.FIELD_HALIGN_MASK);

      _editField = new AlignableEditField(null, initialValue, maxNumChars, style);
      add(_editField);
   }

   public String getText() {
      return _editField.getText();
   }

   public void setFont(Font value) {
      _font = value;
      _editField.setFont(_font);
   }

   /**
    * Set the field's background alpha value
    * @param value - the alpha value (0 to 255) to use for the field's 
* background opacity. */ public void setAlpha(int value) { _alpha = value; } /** * Set the field's background color. * @param color - the RGB color value for the field's background. */ public void setBackgroundColor(int color) { _bgColor = color; } protected void sublayout(int width, int height) { if (_fieldWidth == 0) { // we only set these once _fieldHeight = height; _fieldWidth = width; setExtent(width, height); } // add 17 pixels of padding on the right, so the cursor is
// always visible int textWidth = _editField.getPreferredWidth() + 17; layoutChild(_editField, textWidth, height); if (_alignment == FIELD_RIGHT) { setPositionChild(_editField, width - textWidth, 0); } else if (_alignment == FIELD_HCENTER) { setPositionChild(_editField, (width - textWidth) / 2, 0); } else { // FIELD_LEFT setPositionChild(_editField, 0, 0); } } protected void paint(Graphics g) { int oldColor = g.getColor(); int oldAlpha = g.getGlobalAlpha(); g.setColor(_bgColor); g.setGlobalAlpha(_alpha); // paint a rounded rectangle background g.fillRoundRect(0, 0, _fieldWidth, _fieldHeight, 15, 15); // reset the graphics state to where it was g.setColor(oldColor); g.setGlobalAlpha(oldAlpha); super.paint(g); } public int getPreferredWidth() { return _fieldWidth; } public int getPreferredHeight() { return _fieldHeight; } private void layoutEditField() { // force this Manager to recalculate field layout based on
// current text width sublayout(_fieldWidth, _fieldHeight); } /** * The AlignableEditField provides a BasicEditField whose preferred
* width depends on the field's current (text) contents. This appears
* to be required for right, or center-justified text. */ private class AlignableEditField extends BasicEditField { public AlignableEditField(String label, String initialValue,
int maxNumChars, long style) { super(label, initialValue, maxNumChars, style); } public int getPreferredWidth() { return _font.getAdvance(getText()); } protected boolean keyChar(char key, int status, int time) { boolean result = super.keyChar(key, status, time); // changes in the field's text require a new layout (width change) layoutEditField(); return result; } } }

 This code creates one of these things:

 

      _rightJustifiedField = new CustomEditField("000000", 7, 
Field.FIELD_RIGHT | BasicEditField.FILTER_INTEGER); _rightJustifiedField.setFont(fieldFont); _rightJustifiedField.setBackgroundColor(Color.WHITE); _rightJustifiedField.setAlpha(0x88);

 

 

 

Please use plain text.
Developer
n8r0n
Posts: 40
Registered: ‎03-29-2009
My Device: Storm 9550
My Carrier: AT&T

Re: Right-aligning Text in (Basic)EditField

A couple quick mods, after running this on the 9630 and seeing some bugs.

 

I made the padding on the right side of the text dynamic, as opposed to hard-coded (17px before).

 

So, AlignableEditField.getPreferredWidth() becomes

 

      public int getPreferredWidth() {
         // add some padding on the right, 
         // so the cursor is always visible
         return Math.max(_font.getAdvance(getText()), 
                         _font.getAdvance('0')) + 
                _font.getAdvance(' ');
      }

 

 

and CustomEditField.sublayout simplifies to

 

 

   protected void sublayout(int width, int height) {
      if (_fieldWidth == 0) {
         // we only set these once
         _fieldHeight = height;
         _fieldWidth = width;
         setExtent(width, height);
      }

      int textWidth = _editField.getPreferredWidth();

      layoutChild(_editField, textWidth, height);

      if (_alignment == FIELD_RIGHT) {
         setPositionChild(_editField, width - textWidth, 0);
      } else if (_alignment == FIELD_HCENTER) {
         setPositionChild(_editField, (width - textWidth) / 2, 0);
      } else {  // FIELD_LEFT
         setPositionChild(_editField, 0, 0);
      }
   }

 

 

Please use plain text.
Developer
ydaraishy
Posts: 562
Registered: ‎09-30-2009
My Device: Not Specified

Re: Right-aligning Text in (Basic)EditField

If you've manually set the field width to be X so that it paints a background, you should do that separately, and draw your field on top of that (the manager could do this for you, if you so wish). This means that the field should resize automatically and look seamless on the background.

 

This also has the advantage that the field placement is not dependent on the font details or content but merely the size of the field.

 

(I could be misunderstanding, however.)

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

Re: Right-aligning Text in (Basic)EditField

Please note my update to this post:

http://supportforums.blackberry.com/t5/Java-Development/Right-aligning-Text-in-Basic-EditField/m-p/3...

 

My suggestions made previously do not work, OP apologies for misdirecting you.

 

When I have time, I will work on this some more.

Please use plain text.
Developer
n8r0n
Posts: 40
Registered: ‎03-29-2009
My Device: Storm 9550
My Carrier: AT&T

Re: Right-aligning Text in (Basic)EditField

[ Edited ]

No worries, Peter.  If it was easy, I probably wouldn't have had to ask :smileyhappy:

 

I'm still not sure I'm on the same page with Ydaraishy. The implementation I just posted is based on the assumption, confirmed by Peter's comments, that an EditField WILL draw the text on the left side of its boundary.  Therefore, in order to make it appear that the text is right-justified, it is required to adjust the left boundary of the EditField based on the EditField's CURRENT text.  That means taking into account the width of the current text, in the current Font.  I would love to not have to do that, but I don't see how I can avoid it, and achieve true right-justification.  Please provide some specific details, if anyone knows how else to achieve this.  I'm certainly not happy with my implementation, but it's the only functional solution I've been able to code so far.

 

To summarize my "solution", I am dynamically adjusting the X position of the EditField inside a Manager (my CustomEditField class).  In order to encapsulate that crazy behaviour, I wrap the EditField inside this CustomEditField class, whose boundaries do not have to change.  So, from the perspective of the enclosing Manager that will contain a CustomEditField, it doesn't have to pull any strange tricks.  The tricks are hidden in CustomEditField.

 

Unfortunately, one downside of this implementation is that it also hides the API of the underlying EditField.  As you can see in my implementation, if the enclosing Manager of the CustomEditField wants access to the EditField's text, I have to code a wrapper function, getText(), to expose the EditField.getText() method.  I will have to do this for every method in the EditField API that I need to use, so it's a maintenance problem.

 

But, again, I can't figure out another way to accomplish this.

Please use plain text.
Developer
ydaraishy
Posts: 562
Registered: ‎09-30-2009
My Device: Not Specified

Re: Right-aligning Text in (Basic)EditField

I'm sorry I haven't been as clear as I could have been -- I probably don't see the whole picture as clearly as you who is mired in this problem at the moment :smileyhappy: I think also I haven't needed to play with the mechanics of the EditField very closely before.

 

But your solution sounds about right as to what I was thinking.

 

As to your "pass-through" problem, if you can expose the underlying EditField through your custom manager, you could say something along the lines of CustomEditField.editField().getText() instead of having to add methods to your CustomEditField, perhaps.

Please use plain text.
Developer
n8r0n
Posts: 40
Registered: ‎03-29-2009
My Device: Storm 9550
My Carrier: AT&T

Re: Right-aligning Text in (Basic)EditField

Ok, gotcha. 

 

I certainly could add one method to allow access to the underlying (Basic)EditField, which would prevent me from having to add wrappers for everything in the EditField API I want to use externally.   But, then, I've broken encapsulation, and the Manager that contains my new Field is made aware of the fact that this CustomEditField thing is not really an EditField itself. 

 

It would be ideal if I could treat my CustomEditField as if it were a subclass of EditField, that provides everything an EditField does, and also adds the ability to center or right-justify text.  But, I'll admit that I'm satisfied to just have something that functions!

 

This is one of those times where I actually could produce a more useful solution, with much less code, in a language that supported full multiple-inheritance.  But, Java does not, so I have to either break encapsulation, or maintain a bunch of wrapper code.

 

I probably will go with your solution after I go through the trouble to wrap one more EditField API call.  It certainly will be less code in the long run.  Thanks.

Please use plain text.
Developer
Posts: 432
Registered: ‎02-23-2009
My Device: Not Specified

Re: Right-aligning Text in (Basic)EditField

Can we also use focus and unfocus on this customeditfield?

 

when i tried to do this; it not shows the text in editfield.

 

plz Suggest

 

this piece of code added in customeditfield class

 

 

protected void drawFocus(Graphics g, boolean on)
        {
            
        }
        
        protected void onFocus(int direction)
        {
            _bgColor = Color.RED;
            invalidate();
        }

        protected void onUnfocus()
        {
            _bgColor = Color.WHITE;
           invalidate();
        }

 

 

 

 

Deepesh Gupta
Please use plain text.
Developer
Posts: 432
Registered: ‎02-23-2009
My Device: Not Specified

Re: Right-aligning Text in (Basic)EditField

Any answer related to focus on customeditfields?
Can we also use focus and unfocus on this customeditfield?

 

when i tried to do this; it not shows the text in editfield.

 

plz Suggest

 

this piece of code added in customeditfield class

 protected void drawFocus(Graphics g, boolean on)
        {
            
        }
        
        protected void onFocus(int direction)
        {
            _bgColor = Color.RED;
            invalidate();
        }

        protected void onUnfocus()
        {
            _bgColor = Color.WHITE;
           invalidate();
        }

 

 

Deepesh Gupta
Please use plain text.
Contributor
missmanar1987
Posts: 32
Registered: ‎06-26-2010
My Device: all
My Carrier: stc

Re: Right-aligning Text in (Basic)EditField

Hello all

when I try to use CustomEditField shown here it works ok but after I add the custom field to the screen

any field after custom field is ignored when I run my app in BB simulator

why ??

I need ure Help

 

Please use plain text.