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

Right-aligning Text in (Basic)EditField

I am trying to create an EditField (or BasicEditField) whose text is right-justified.  How do you accomplish this?

 

I have tried this code:

 

 

BasicEditField _textField = new BasicEditField("", "00000", 5, DrawStyle.RIGHT);

 

I have also tried "DrawStyle.RIGHT | BasicEditField.USE_ALL_WIDTH". Both produce the standard left-justified text.  I am calling layoutChild for this field (_textField), with more width than is necessary to hold the maximum number of characters (5).  The larger width is chosen to make the display look right, but I don't want the text left-aligned.

 

I have also tried the approach of subclassing BasicEditField, and overriding paint, in order to plot the text myself.  If I do that, I can get the text placed exactly where I want it, but then the field's cursor behaviour is bizzare, where the cursor does not locate where the user touches, and as I type into an empty field, the right-aligned text fills in more space to the left, but the cursor keeps moving to the right, as if you were typing in a left-justified field.  My attempt with this used the following code to override BasicEditField.paint():

 

 

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);

int y = (_fieldHeight - getFont().getHeight()) / 2;
int padding = 10;
g.drawText(getText(), 0, y, (int)_style, _fieldWidth - padding);
}

 

In the above code, _style would be equal to DrawStyle.RIGHT or (DrawStyle.RIGHT | Field.USE_ALL_WIDTH).

 

 

I'm using the 9500-Vodafone simulator 4.7.0.148, but I've tried this with the bundled 9000 Simulator in JDE Component Package 4.6.0, and had the same results.

 

Any thoughts?

 

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

Re: Right-aligning Text in (Basic)EditField

The issue here is that the BasicEditField will always attempt to take up the whole of the line, and then proceed to draw itself with the Label and the Text as far to the left as it can.

 

If you override it to make sure that the Fields width is not the full width, then you can, with Field.FIELD_RIGHT get it to right align, but that will put the Label over there too.  If you don't want that, then display two Fields, in a HorizontalFieldManager, the first being your label in a LabelField, the second being the BasicEditField. 

 

I'll give you some code later to set the width of your BasicEditField.

 

Regarding your attempt to override paint, you need to override everything that draws on your Field to get this to work, especially the focus settings.  You could override drawFocus and try to offset the position it wants to put it in to where you know it should go, but that would require you to maintain a cursor position, and do other stuff that you probably don't want to do.  Also you have to cope with 'selection'. 

 

Anyway, hope this code helps - untested, use at your own risk....

 

    public void layout(int width, int height) {
        super.layout(getPreferredWidth(), height);
        setExtent(getPreferredWidth(), this.getHeight());
    }

    public int getPreferredWidth() {
        int maxChars = this.getMaxSize() + 1; // + 1 to allow some visible extra space
        int textSpace = this.getFont().getAdvance(Characters.LATIN_CAPITAL_LETTER_W) * maxChars +
                        this.getFont().getAdvance(this.getLabel()); 
        return textSpace;
    }

 

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

Thanks, Mate.  Unfortunately, I don't think I stated my question very well.  There are two alignment characteristics for an EditField.  How the Field is aligned horizontally within its Manager, and how the text is aligned within the Field.  I can put the Field wherever I want within the Manager.  That's not the problem.  I'm having trouble aligning the text on the right side of the Field.  Does that make sense?

 

So, I don't think Field.FIELD_RIGHT helps.  FIELD_RIGHT, appears to pertain to the alignment of the Field within its Manager, not the text's alignment within the Field.

 

Also, I'm not using a label with this Field, so I'm not worried about label alignment issues.  

 

Imagine a box that encompasses the extent of the EditField.  I want the text to be closer to the right side of the box than the left.  The text can also be 0 to N characters, and the furthest right character should always be in the same location on screen.  The furthest left (aka "first") character in the Field should be located differently depending on how many characters are entered (0 to N).

 

I'm kind of perplexed that this is such an issue.  The DrawStyle.RIGHT style works great when passed into Graphics.drawText().  It's not clear to me why I can't just use that style to make an EditField right-justify its text.  Still looking for solutions ....

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

Re: Right-aligning Text in (Basic)EditField

I understood your question.  As far as I am aware, EditField ignores the DrawStyle RIGHT attribute and always draws the Label and the Text next to each other.

 

As a work around, I was suggesting using two Fields, the LabelField to display the label and the EditField, using Field.FIELD_RIGHT.  But for this to work, you have to override the EditFields natural tendency to take up the entire width of the Line.

 

Hope my post makes more sense now.

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

Sorry to repeat, but I'm not using a label with this field.  So, splitting the field up into two will have no effect on this problem.

 

I've already successfully made the EditField take up less than the screen's full width, using the setExtent() and getPreferredWidth() methods.  In my case, let's say it takes up 100 pixels in width.  So, what we have is a white box behind the field's text that is 100 pixels wide.   Let's then say that my text has a width (advance) of 60 pixels.   So, there's going to be 40 pixels of empty space in my field.  I want that 40 pixels to be on the left of the text, not on the right.

 

Furthermore, as the text is entered, it should expand its width by moving existing characters further to the left, with the rightmost side staying in the same spot.

 

It's basic right-justfication.  On the toolbar for these forum posts, you've got three icons to left, center, and right-justify the text.  I want to produce the effect of the right-justification.

 

It almost sounds like you're saying that it can't be done, which I would find shocking (not that my reaction has any effect on reality!), but you're also suggesting workarounds, which makes me think that it can be done.

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

Re: Right-aligning Text in (Basic)EditField

[ Edited ]

Edit:  I have to eat humble pie here.  I reviewed the code that I had used that I thought did this, and it does not.  The BasicEditField is still filled in from the left.  The OP poster wants it filled in from the right.  I do not know how to do this.  @OP apologies, I did understand what you wanted, but my suggestions, based on memory of some code that I had written a while ago, were incorrect.  I should have checked before commenting.

 

Original comment below left in to make sure that this thread narrative is not lost. 

 

Sorry to repeat, but I understood your question. 

 

As far as I am aware, EditField ignores the DrawStyle RIGHT attribute and always draws the Label and the Text next to each other.  I'll repeat that too.  It always draws the Label and the Text next to each other.  At least it has in every test and combination of DrawStyle and Field Style attribute that I have ever tried.  And I tried a few as I'm sure you have. 

 

I'm not saying it can't be done.  There are at least two possibilities:

a) If you tried hard with paint and drawFocus and overriding anything else that paints focus, selection and highlighting onto the EditField you might be able to achieve what you want.  I tried that too but I gave up. 

b) There are combinations of Style settings that I have not tested that might just get it to work.

 

But what I am saying is that for me, the most time effective way I have managed to do what you are attempting is to use two Fields aligned appropriately -  the EditField without a label and using Field.FIELD_RIGHT.  From a User's perspective this looks fine, until it goes onto a second line, but that is another story. 

 

I sincerely hope that someone has a different story to tell you.  I'd like to do it properly too.  But the users don't care if it is one Field or two, so there is only so much time I am willing to spend fighting this sort of thing. 

 

 

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

Re: Right-aligning Text in (Basic)EditField

The other option may be to encase the field within a HorizontalFieldManager and either see if Field.FIELD_RIGHT works or to override the Manager's layout method and engineer it that way.

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

Re: Right-aligning Text in (Basic)EditField

Don't think that works. 

 

What the OP wants to do is separate the label and the text.  Putting this another way, the OP wants to anchor the Label at some left point, and have the Text padded so that it ends at some right point, with a variable gap in between.

 

I think Field.Field_RIGHT moves the whole Field, including the Label part, to the Right.  So the gap would be to the left of the label.

 

I think some DrawStyle should do it, but I haven't found it! 

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

Re: Right-aligning Text in (Basic)EditField

Oh, right. Yeah, then two fields is a reasonable way to emulate this.

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

Regarding the possibilities, (a) and (b) sound reasonable.  That's really what I posted this question to figure out.  Does anyone know how to do either (a) or (b)?  It sounds like neither of us could figure out how to implement either of those techniques.

 

Regarding the two-field solution, that doesn't do what I'm trying to do.  Again, FIELD_RIGHT pertains to the alignment of the entire Field.  I've tried it.  I can already locate the Field exactly where I want, I simply can't locate the text WITHIN the Field, on the right side.  The two field solution doesn't do that.  I'm not trying to find another solution out of some desire for elegance, it's that making two fields doesn't right-justify text.  So, it's not a matter of the users not caring about the implementation, it's that the two field solution, as described, doesn't put the text on the right.

 

Unless I'm missing something.  Did you intend something other than the code sample you had posted earlier?

Please use plain text.