Question About CSS Files for Smartgwt Project

question about css files for smartgwt project

Its located in war/[projectname]/skins/[skinName]/skin_styles.css in your apps war folder.

EDIT
In the Jar, its in

com/smartclient/theme/[themeName]/public/sc/skins/[themeName]

SmartGWT: Applying style from CSS

IButton is a StatefulCanvas, which means it handles states. This is done by adding suffixes after the base style name. For example if you set the titleStyle to "enableButton" and you move your mouse over the button, it will look for the css class: enableButtonOver. If the button is also focused, it will look for enableButtonFocusedOver etc (there are a couple of suffix combinations). Your example works if you click outside from the browser, so it will lost the focus and simply will use the enableButton css class. You can disable each state by for example setShowFocused(false). See the api.

Label not Taking CSS Style in SmartGWT

I figured it out: the reference to the css file in ProjectName.html

<link type="text/css" rel="stylesheet" href="BMSimulator.css">

Was before my SmartGWT skin module reference:

<script src="bmsimulator/sc/skins/Enterprise/load_skin.js"></script>

Changing the order of these two invocations made the css file to load properly!

CSS overlaying SmartGWT style

Use "WWW debuger" Inspect Element in Chrome or Inspect Element in Firebug in Firefox. In the right panel you have styles part where you will style used for your widget and file name.

This way you can easly check which property from your CSS overrites the smartGWT one.

Do I really need to put css resource file into a ClientBundle in GWT?

If you put your css files into a clientbundle your css files have to be parsed by the GWT Compilers CSS Parser, which currently bases on an old version which is somewhat a little hacked. (This is going to change in the future though)

For the parser to work you need to escape your background values like this:

background-image: literal('-webkit-linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%)');

There are some other quirks that also need escaping. Take a look in the docs and search for escaping: https://developers.google.com/web-toolkit/doc/latest/DevGuideClientBundle

where can i find the files of smart gwt themes and how to use a custom theme in smartgwt

@Arvind, There are css, html, xml and javascript classes as well as images for different skins in smartGWT and smartGWT-skins jars. If you want to use them, you need to add following code in your .gwt.xml file:

<inherits name="com.smartclient.theme.simplicity.SimplicityResources" />
<inherits name="com.smartclient.theme.simplicity.Simplicity" />

The above code is for skin named "Simpliycity". There are many other skins in the jars such as:

• Enterprise
• Enterprise Blue
• Graphite
• TreeFrog
• BlackOps

If you don't want to use any of these and make a new one on your own, then you need to define your css file and include it in the same .gwt.xml file.

Where to put smartgwt icons folder in project tree?

I don't know where you find the default value (to my sense this use of the Skin folder is for using images already in the smartgwt skin)but any way I usually put my images directly in the war in my project with subfolder related to their size.
To use the icon I simply do for example btnClear.setIcon("16/clear.png");
With war/images/16.clear.png image folders structure.

You can have a look at getSkinImgDirand do a test

---

Related Topics