UiBinder CSS URL

100 views
Skip to first unread message

SigmaBlu

unread,
Oct 13, 2011, 10:00:54 AM10/13/11
to Google Web Toolkit
Is there a way to use a URL to access CSS when using UiBinder? I
already know that you can access this with in your package hierarchy.
Unfortunately, I don't have any idea how i can reference outside of
the package.


Regards,
Sigma

Sudhakar Abraham

unread,
Oct 14, 2011, 9:17:00 AM10/14/11
to Google Web Toolkit
You can't access the css file from outside package within uibinder.
However, there are two ways to access the css file within uibinder.
1. Using inline style sheet within uibinder (<ui:style>...</ui:style>)
2. Using <ui:style src=" ">

S. Abraham
www.DataStoreGwt.com
Persist objects directly in Google App Engine

SigmaBlu

unread,
Oct 17, 2011, 9:30:01 AM10/17/11
to Google Web Toolkit
Sudhakar,

I noticed that I can make changes to the Chrome.css, Standard.css, or
the Clean.css and the changes will be accepted.
From my understanding, those .css files are a result of changing the
settings in the .gwt.xml file
(i.e. <inherits name='com.google.gwt.user.theme.chrome.Chrome' /
>....etc..). Can you tell me the order in which the .css files are
being read?
For example, does my .css thats referenced in the <ui:stule
src="xyz.css"> get referenced and compiled? Does the Chrome.css,
Standard.css, and Clean.css
get referenced first and my "xyz.css" overwrites that? This seems to
be the case.

Regards,
Sigma


On Oct 14, 8:17 am, Sudhakar Abraham <s.abra...@datastoregwt.com>
wrote:

SigmaBlu

unread,
Oct 17, 2011, 9:54:58 AM10/17/11
to Google Web Toolkit
Sudhakar,

I have messed around with the Chrome.css, Clean.css and Standard.css
styles that can be changed by changing the following tags in
the .gwt.xml file: <inherits
name='com.google.gwt.user.theme.chrome.Chrome' />, <inherits
name='com.google.gwt.user.theme.standard.Standard'/>, and <inherits
name='com.google.gwt.user.theme.clean.Clean'/>.

Whenever you deploy the war folder you can access these .css files in
the following directory: renamedModuleName/gwt/standard,
renamedModuleName/gwt/clean, and renamedModuleName/gwt/chrome.
By changing these .css files (Chrome.css) I have assumed the
following:
• It seems that my xyz.css thats being referenced by my UiBinder is
being compiled and turned into JavaScript.• Chrome.css, Standard.css,
and Clean.css seems to be read first and then overwritten by my
xyz.css’s compiled version (i.e. if my compiled css had made changes
then it "wins" and those changes are used).


Are my assumptions correct?

Regards,
Sigma
On Oct 14, 8:17 am, Sudhakar Abraham <s.abra...@datastoregwt.com>
wrote:

Jens

unread,
Oct 17, 2011, 10:54:45 AM10/17/11
to google-we...@googlegroups.com
Yeah the GWT theme is referenced in your HTML page source via

<link rel="stylesheet" href="http://<domain>/<appname>/gwt/standard/standard.css">

This will always be done when you include a stylesheet via your module xml file in combination with a public folder and thats exactly how GWT themes are realized (take a look at Chrome.gwt.xml for example).

Any CSS you define in UiBinder will be added (injected via javascript) afterwards as <style> tags (one <style> tag per CssResource, so you possibly see multiple <style> tags in your HTML page source once your app is loaded).

-- J.

Freddie Jefferson

unread,
Oct 18, 2011, 8:08:35 AM10/18/11
to google-we...@googlegroups.com
Thank you both.

Regards,
SigmaBlu

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To view this discussion on the web visit https://groups.google.com/d/msg/google-web-toolkit/-/dH3-AHKjLL8J.

To post to this group, send email to google-we...@googlegroups.com.
To unsubscribe from this group, send email to google-web-tool...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.

Reply all
Reply to author
Forward
0 new messages