CODEWITHSUNDEEP
javagwtcss
Jama A.
Jama A.

Reputation: 16089

How to use HTML Component File(.htc) with GWT for applying CSS3?

Rounded Borders not working in IE . I've tried to use CSS3 for my GWT web app , and I'm struggling to inject *.htc into my code.
How to reference *.htc file via GWT;

1.I've tried using ClienBundle to get it as a resource file.
2.I've referenced its relative path from css file.

Both of the ways couldn't help me.
Is there any way using CSS3 with GWT?
Is anybody using *.htc with GWT or GWT doesn't support CSS3 yet?

Updated
I want a div with rounded borders something like that:demo
My project structure is:
image

public class Css3 implements EntryPoint {
interface MyResources extends ClientBundle {
    @ClientBundle.Source("myHTCfile.htc")
    DataResource htcResource();
}

public void onModuleLoad() {
    final MyResources myResources=(MyResources) GWT.create(MyResources.class);
    final FlowPanel  roundedDiv =new FlowPanel();
    roundedDiv.setStyleName("myClass");
    roundedDiv.add(new Label("lorem ipsum dolor sit amet lorem dolor" +
            "sit amet lorem ipsum dolor sit amet "));
    roundedDiv.setSize("200px","200px");
    myResources.htcResource().getUrl(); //For what is this necessary?
    RootPanel.get().add(roundedDiv);
}

}
myResources.htcResource().getUrl(); //For what is this necessary?

Css3.css

@url myHTCFile htcResource;

.myClass {
  behavoir: url(css3/myHTCFile);
  border-radius:10px;
  background-color:red;
  padding:10px;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
}


Thanks in advance!!!

Upvotes: 1

Views: 1701

Answers (5)

RDL
RDL

Reputation: 7961

What about using a plugin like css3pie? The htc file is only referenced from the css file. The server just need to be able to handle that type of file.

Upvotes: 0

Hilbrand Bouwkamp
Hilbrand Bouwkamp

Reputation: 13519

Not checked but this is how I think it should work with ClientBundle:

Css file:

@url myHTCFile htcResource;

.myClass {
  behavior: myHTCFile;
}

ClientBundle interface:

interface MyResources extends ClientBundle {

  interface Css3Resource extends CssResource {
    String myClass();
  }

  @Source("myHTCfile.htc")
  DataResource htcResource();

  @Source("Css3.css")
  publicy Css3Resource css3();

}

And both the myHTCfile.htc and Css3.css file must be in the same folder as the MyResources interface file.

EDIT:

You also need to put the css reference in the ClientBundle, see updated MyResources above. Use this as follows:

//Get instance
MyResources resources = GWT.create(MyResources.class);

//Make sure css is injected. This call needs to be done only once, more calls don't matter
resources.css3().ensureInjected();

//usage
roundedDiv.setStyleName(resources.css3.myClass());

The line myResources.htcResource().getUrl(); can be removed as it does nothing.

Upvotes: 1

Igor Klimer
Igor Klimer

Reputation: 15321

OK, since the goal is rounded borders - how about using conditional CSS with some of the maaaany tricks for achieving rounded corners (not involving htc files ;)) available? You use the standard CSS3 border-radius for all the cool and hip browsers (and IE9 ;)), and use an ugly hack for IE ;)

Second solution: depending on your needs, DecoratorPanel might be a viable option. The javadocs say it works "reliably" only in quirks mode, but what do they know, eh? ;) But you might want to check out it's source code for pointers on how to implement your own solution :)

Upvotes: 0

Gregg B
Gregg B

Reputation: 13727

Have you given PIE a shot? It seems to have a pretty good library of behaviors for injecting CSS3 into IE:

http://css3pie.com/

Upvotes: 0

minichate
minichate

Reputation: 1944

Create a directory called public and put the HTC file in there:

src/
  - Module.gwt.xml
  - public/
       - myHTCfile.htc
  - other-directories/....

Then in your CSS file you should be able to reference the HTC file after you compile:

.cssClassName {
    behavior: url(/GWT_MODULE_NAME/myHTCfile.htc);
}

Just replace GWT_MODULE_NAME with the name of your GWT module.

The public directory in GWT is a good place to put static resources that are associated with a GWT module.

Upvotes: 2

Related Questions