TextField Style

[borisperezg]

Hi everyone.

I'm here because I'm starting to use GXT 3.0. However, I have a problem. I wanna use a custom style for my TextField component, but I cann't find any way to do it.

I used:
textField.setStyleName("")
textField.addStyleName("")
textField.setStylePrimaryName("")

and nothing worked.

Also, I read this blog http://neiliscoding.blogspot.com/201...ustomised.html but I couldn't find where to change the style for my textfield.

Also, I removed the reset.css style in my html and included the clean.css style in my html, after that I changed the .gwt-TextBox property, but again, noting happened...

I'm really mad about this.

Is there anyone who can help me?

Thanks a lot.

---
Boris Pérez

[icfantv]

The first thing to mention would be that I believe this takes in a CSS class name not raw styles (e.g. "font-weight: bold;"), i.e., if you had:

.myStyle {
  background-color: red;
}

You would call addStyleName("myStyle").

Secondly, use a tool like Firebug to ensure that the class name is actually being set in the DOM on the block level element around the text field being rendered. I don't recall the exact structure GXT uses, but it's most likely to be a <div>.

Thirdly, if the style name does appear, it's quite possible that properties are being overridden further down in the DOM tree. Firebug will tell you this as well, look for your styles and see if they are crossed out (strikethrough), i.e., w/ a line through them.

Try this and let us know what happens and we'll proceed from there.

[Colin Alworth]

TextBox is a GWT widget, whereas TextField is a GXT one, so the styles that apply to TextBox aren't going to automatically change TextField or vice versa.

Without reset.css, a variety of style problems are going to arise - you cannot simply replace GXT's reset.css with GWT's Clean theme - again, GWT styling doesnt do anything for GXT. The reset.css file isn't really optional for the default GXT Blue and Gray themes - without it, there are several bugs that will occur.

Neil's blog post is more about how to switch appearances, or even to build your own - this is useful to totally reskin widgets or cells. Nowhere in that post does he use the three methods you are trying.

That said, what are you trying to do with your style?

 textField.setStyleName("")

is going to remove the style on the root element, but won't remove all the styles on other elements in the widget

 textField.addStyleName("")

is going to do nothing - it is adding an empty css class name

 textField.setStylePrimaryName("")

is going to update the primary and dependent names in the widget - this isn't a feature that GXT 3 uses, in favor of following the Appearance pattern to allow widgets and cells to be totally rethemeable.

If you want to add a new css class to a widget, addStyleName(String) is the simplest way to add it to the base of the widget:

    TextField field = new TextField();
    field.setValue("asdf");
    field.addStyleName("testing");
    container.add(field);

results roughly in this structure:

<div __gwtcellbasedwidgetimpldispatchingfocus="true"
          __gwtcellbasedwidgetimpldispatchingblur="true"
          id="x-widget-1"
          class="testing"
          style="width: 150px; position: relative;">
  <div class="GKJJX3KBFY" style="width:150px;">
    <input type="text" class="GKJJX3KBEY GKJJX3KBPX" 
                style="width:142px;" 
                value="asdf" 
                id="x-widget-1-input" 
                tabindex="0">
  </div>
</div>

So the tools seem to work to set up styles, but what are you trying to achieve? I'm sorry to hear you are frustrated, but we need more to work on to try to help you...

[borisperezg]

Thanks for your help.

Ok... I have a css file with this:

.login_input {
border: 1px solid #dfdfdf;
display: block;
height: 19px;
font-family: Georgia, serif;
font-size: 16px;
padding: 3px;
width: 850px;
margin: 10px 22px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
}

I want a rounded-corners textfield, with soft lines.

In my code, I setted this:

tFBusqueda = new TextField();
tFBusqueda.setStyleName("login_input");

and then, I added to a ContentPanel.

This is what I want:
MyProblem.jpg

Using Firebug in Chrome, I get this:

MyProblem2.png

And I look for that style (x-widget-2-input) but I dont find it.

As you can see... I have no clue about this

Thanks for your attention.

[Colin Alworth]

I'm not sure you can achieve this with just a new style like that - I think you may need a whole new appearance implementation. Neil's blog post does a pretty good job of covering what you need to do for that - by building a replace-with rule you can even make this affect every text field in your app!

As you've noticed, there are multiple layers to build GXT TextFields - this has to do with how difficult it is to get consistent look and feel cross browser, through all drawing, positioning, etc operations that need to occur. I notice you are using border-radius as well as the webkit and mozilla prefixes - I'm sure you are aware this won't work in older versions of IE?

The TextField's different layers take care of padding/margins/borders that you want to get rid of. Your styles are applying to the outer div (which is why you screenshot has rounded corners outside the textfield, not on the input itself. I modified your css slightly, and it seems to get most of the way there - but you're going to have to continue working to ensure it functions in all browsers, when resized, etc.

.login_input input {
  border: 1px solid #dfdfdf;
  display: block;
  height: 19px;
  font-family: Georgia, serif;
  font-size: 16px;
  padding: 3px;
  width: 850px;
  margin: 10px 22px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
}

This works by actually applying your styles to the input itself, following css rules, instead of just to the wrapper.

Once again, I encourage you to try Neil's explanation of building a new appearance to modify more than just a single field in this way. Here's another few links that hopefully help to explain the purpose and execution of the appearance pattern.
http://code.google.com/p/google-web-...arance_Pattern
http://www.sencha.com/blog/migrating...wt-2-to-gxt-3/

[borisperezg]

Thanks... that's work.

I have to study in deep this topic about Appearance pattern.

Again, thanks a lot.

[poseidonjm]

You can use getInputEl() to set simple style properties on input text field e.g.

public class UpperTextField extends TextField {	
	
	public UpperTextField(){
		super();
		getInputEl().getStyle().setTextTransform(TextTransform.UPPERCASE);
	}


	@Override
	public String getValue() {
		final String originalValue = super.getValue();
        return originalValue != null ? originalValue.toUpperCase() : null;
	}
}

more http://stackoverflow.com/questions/3...style-from-gwt