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

Question

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:

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!!!

Is the question on how to achieve rounded borders cross-browser or how to include a htc file in GWT? :) The first one should be pretty easy to implement with conditionals in CssResource. The second one is proving more problematic as shown by the answers below ;) — Igor Klimer, Jan 25 '11 at 15:41

score 2 · Answer 1 · answered Jan 14 '11 at 17:02

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.

Hilbrand Bouwkamp · Answer 2 · 2011-01-26T14:08:12.850

1

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.

edited Jan 26 '11 at 14:08

answered Jan 10 '11 at 09:12

Hilbrand Bouwkamp

13,509
1
45
52

The above code will inject the url to your htc file at the location in your css file. The generated code will look like: `behavior: url(path/myHTCfile.htc);`. I'm assuming you not really mean to inject the content of the htc file in the css file? – Hilbrand Bouwkamp Jan 12 '11 at 14:59
I've updated the post to also include using a css resource. Because that's the way if you want the use `@url`. – Hilbrand Bouwkamp Jan 20 '11 at 09:44
@Hilbrand, Your approach has helped for referencing *.htc file via ClientBundle in IE. However, it doesn't affect for its borders.I don't know why, but i guess it is from ".cache.htc" in url('http://127.0.0.1:8888/Css3/2C0E96312A7EDA697CD22C800A9A842D.cache.htc'); what do you think, what's a problem here? – Jama A. Jan 20 '11 at 12:01
the renaming of the file should not be the problem. Is the file present in the `war/Css3` folder? Did you recompile? You can always check in IE with the developer tool if the file is in the css or live replace the path to the original file (you need to put it somewhere in the war folder) to see if it works anyway. – Hilbrand Bouwkamp Jan 20 '11 at 13:15
I've relized that i can not use CSS3's features with GWT2.04 for – Jama A. Jan 20 '11 at 15:25
Most CSS3 features are not supported by older IE versions. But this rounded borders with the htc solution should work. – Hilbrand Bouwkamp Jan 21 '11 at 08:24
You also might want to look at the http://code.google.com/p/gwtmodernizr/ project in case you want all kind of CSS3 support. – Hilbrand Bouwkamp Jan 21 '11 at 08:46
While reading its doc I witnessed that gwtmodernizr doesn't support css3 for ie ;( . If you want check this links with ie and any other real browsers. http://gwtmodernizr.googlecode.com/svn/trunk/samples/demo/RuntimeSample/RuntimeSample.html or http://gwtmodernizr.googlecode.com/svn/trunk/samples/demo/csssample/CssSample.html – Jama A. Jan 24 '11 at 15:05
Like Hildebrand mentioned - check with Developer tools if the htc file is correctly referenced. I'm wondering if the CssResource compiler thingy is not pruning that rule, just like it used to (?) with some other CSS3/nonstandard rules (`behavior` is only supported under IE, AFAIK). In that case you'd have to escape it like so: `\behavior: url;`, at least that's what worked for `-moz*` etc. rules. – Igor Klimer Jan 25 '11 at 20:51
PS: It's `behavior` not `behavoir` - which one do you have in your code? :D – Igor Klimer Jan 25 '11 at 21:00
Thanks for pointing that out, `behavior`, I've updated the answer. Btw it's `Hibrand` not `Hildebrand`:D. Also I've the idea Jamshid wants to add not only rounded borders but any css3 to ie<9. So actual question on rounded border has become less relevant. – Hilbrand Bouwkamp Jan 26 '11 at 14:12
1

:facepalm: Sorry for the misspelled name - I seriously don't know how that happened :D But the misspelled `behavoir` is also in the original question (it's infectious!), so I was wondering if the OP maybe also has that in the real code. And from his comment under the question it seems he is only interested in rounded corners (although, a robust way of including CSS3 capabilities for IE<9 would be better in the greater picture :)). – Igor Klimer Jan 26 '11 at 16:15
@Hildebrand Yes you are right, I had wanted it but after i couldn't achieve applying CSS3, I wanted to use rounded borders for one div element like htc file's approach at least. So, i'm still having squared borders on IE7,8 ;( . – Jama A. Jan 26 '11 at 16:32

score 0 · Answer 3 · answered Jan 24 '11 at 05:55

0

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

http://css3pie.com/

answered Jan 24 '11 at 05:55

Gregg B

13,139
6
34
50

Thanks for your answer but it also couldn't help. – Jama A. Jan 24 '11 at 13:57

score 0 · Answer 4 · edited May 23 '17 at 10:32

0

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

edited May 23 '17 at 10:32

Community

1
1

answered Jan 25 '11 at 20:58

Igor Klimer

15,321
3
47
57

I've tried couple of IE hacks that you suggested.But i'm not fully satisfied almost from all except this http://green-beast.com/experiments/css_smart_corners.php . And I can use it like this : if(isRealBrowser){use pure CSS3}else{use Smart-Corner's approach} Do you think is good or...? And my real question above remaining open GWT+CSS3 for IE6,7,8 . – Jama A. Jan 26 '11 at 18:46
Yes, you should use, for example, `@if user.agent safari gecko1_8 {...}` in your `CssResources` to "mark" those CSS rules for inclusion only for the specified browsers (the compiler will split the CSS and include it in the appropriate output files). That way, users of modern browsers won't have to download IE hacks :) It's a win-win situation, IMHO. About the CSS3 - have you checked the spelling mistake I pointed out in Hilbrand's answer? And by CSS3 do you mean just the `behavior` rule? (to include HTC files) Or do you want some other CSS3 rules in IE<9 (which doesn't make sense to me ;)) – Igor Klimer Jan 26 '11 at 19:55
Yes i've corrected(IE rule as well) it but again squared borders.... I don't know why HTC doesn't affect style. However, it's working for the same page that's written as html.... strange... – Jama A. Jan 26 '11 at 20:04
Maybe you could put up a trimmed down example of your app, so that we could poke around it? ;) Or do the poking yourself with Developers Tools (for IE67: http://www.microsoft.com/downloads/en/details.aspx?FamilyID=95e06cbe-4940-4218-b75d-b8856fced535, bundled with IE8, apparently). Check if the `behavior` rule is in place and if the url parameter is pointing at an exisiting file. – Igor Klimer Jan 26 '11 at 22:29

score 0 · Answer 5 · answered Jan 26 '11 at 18:35

0

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.

answered Jan 26 '11 at 18:35

RDL

7,865
3
29
32

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

5 Answers5