import common style rules?

[Ed]

I have a few style rules like for example:

-webkit-user-select: none;

user-select: none;

that occur at more then 1 place in css files.

Is there a way put these styles in a central css file and import/include them?

I could give them their own Class name, like BLA,  and set that on the widget, but that's not very transparent and L&F independent. For example: suppose this BLA style will be required to horizontal center the widget, you don't want the widget to be aware of a centered layout..

Or it would be nice to set this class name BLA everywhere where another class FOO is used through config..... But I don't think this possible?

- Ed

[Joseph Lust]

Ed,

Have you considered the CSSResource interface in GWT? Since it is an interface, you could have a base interface with base CSS rules, and then extend that interface for various widget/module interfaces (CSS files) and they'd get your desired rules too, while keeping those rules in a single file.

Sincerely,

Joseph

[Ed]

Thanks for your answer.

Could you give an example?

I use  CSSResources for all my css styles, I don't legacy styles.

I combine CssResources to create new ones, but don't see how I can use it to solve my problem.

Suppose I have a widget that needs common used style rules and have one style name, namely bla. So in code:

public interface WidgetStyle extends CssResource {

 @ClassName("Bla")

 String bla(); {

}

Basically I want 3 common style rules of Bla to be easily reuse as they are used in many places (different css files). How can I realize this?

- Ed

[Ed]

Might it be an idea if the @ClassName annotation allows for an array of String value's (currently not possible)?

This could solve the problems described above I think. Example:

public interface WidgetStyle extends CssResource {

 @ClassName({"Bla", "General"})

 String bla(); {

}

General will then be a class name with common style rules defined in his own file.

you use the file in in the ClientBundle counterpart:

@Source({ "BlaStyle.css", "GeneralStyle.cass" })

WidgetStyle widgetStyle();

You only get a lot of small css files...

[Abraham Lin]

Why don't you define a CSSResource with the shared rules and import it where needed? See  https://developers.google.com/web-toolkit/doc/latest/DevGuideClientBundle#Imported_scopes (and possibly  https://developers.google.com/web-toolkit/doc/latest/DevGuideClientBundle#Shared_scopes depending on your particular use case).

On Monday, July 16, 2012 3:23:43 AM UTC-4, Ed wrote:

Might it be an idea if the @ClassName annotation allows for an array of String value's (currently not possible)?

This could solve the problems described above I think. Example:

public interface WidgetStyle extends CssResource {

 @ClassName({"Bla", "General"})

 String bla(); {

}

This should be equivalent to just adding multiple classes to the widget itself. 

[Ed]

Thanks for pointing out these concepts but can you be more concrete on how this can solve my problem listed above?

I know the @Share and @Import concepts and use them, but as far as I know I still have to set a additional shared style name in java code on the widget as explained above. 

This is something I don't want as the widget already has one style and the widget should be shared-style agnostic of course (suppose it's a shared style called SHARED to centered the widget).

The only solution I see, is adding the Shared style to the @ClassName annotation, but that currently isn't possible.

Looking forward to your reaction.

- Ed

Op maandag 16 juli 2012 15:31:25 UTC+2 schreef Abraham Lin het volgende:

[Thomas Broyer]

There's no "mixins" in CssResources. We floated the idea of integrating Closure Stylesheets with ClientBundle, but despite general traction I don't think anyone actually started working on it.

[Ed Bras]

@Thomas: thanks for your input. Not sure what to do now. Is it worth adding an issue Enhancement request: "adding more  CSS flexiblity, adapting most common Google Closure StyleSheet functionality" ? (I couldn't find any Closure CSS issues)

[Jens]

If I use a widget of yours I would be totally fine with it if your widget has two or more css classes applied to define its look and feel/position. If I want to overwrite your css I would add an additional css class of my own CssResource to your widget or I would reference your widget through my parent container, e.g. .myContainer .yourWidget { ... }, if possible.

In the first case I just have to make sure that my css class will be defined after your widget's css class so that my css rules have a higher priority than yours (or use !important). In the second case .myContainer .yourWidget automatically has a higher priority because its more specific. In both cases I don't care if your widget has one or more classes applied out of the box.

So you would create a SharedClientBundle/CssResource that you can inject once and that your widgets depend on. I think you could even keep it private so only your widgets can access/use it.

I don't really see why a widget should only have a single css class. But its late.. maybe I am missing something :-)

Basic example: http://jsfiddle.net/2vJ2C/

-- J.

[Joseph Lust]

Ed,

My apologies for my late reply. I've been ruminating over this the last few days as I've thought about doing it, but never made a working example. Here is the example. We have our BaseWidget and our BlueWidget which extends it. Everything about the widget is defined in the BaseWidget CSS, except the color,fill, and border seen in the extending BlueWidget.

The CSSResource interface files:

// BaseWidgetCSSResource.java
package com.testbed.client.resources;

import com.google.gwt.resources.client.CssResource;

public interface BaseWidgetCssResource extends CssResource {
	String baseWidget(); 
}

// BlueWidgetCSSResource.java
package com.testbed.client.resources;

public interface BlueWidgetCssResource extends BaseWidgetCssResource {
	String blueWidget(); 
}

The CSS Files:

// baseWidget.css
div.baseWidget {
	background-color: red;
	border: 1px solid darkred;
	border-radius: 10px;
	padding: 20px;
	height: 45px;
	width: 100px;
	margin:10px;
	text-align:center;
	vertical-align:middle;
	font-size: 2em;
	float: left;
}

// blueWidget.css
div.baseWidget.blueWidget {
	/* same as regular widget, but with a few changes */
	background-color: blue;
	border: 5px dashed orange;
	color: white;
}

ClientBundle Resource:

// WidgetResources.java
package com.testbed.client.resources;

import com.google.gwt.resources.client.ClientBundle;
import com.google.gwt.resources.client.CssResource.Import;

public interface WidgetResources extends ClientBundle {
	// base widget
	@Source("css/baseWidget.css")
	BaseWidgetCssResource baseCss();

	// pulls in both files, overriding one with the other
	@Import(BaseWidgetCssResource.class)
	@Source({ "css/blueWidget.css", "css/baseWidget.css" })
	BlueWidgetCssResource blueCss();
}

Implementing Class:

// Testbed.java
package com.testbed.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.ui.RootPanel;
import com.testbed.client.resources.WidgetResources;

public class TestBed implements EntryPoint {

	WidgetResources resources = GWT.create(WidgetResources.class);

	public void onModuleLoad() {

		// make sure the CSS is here
		resources.blueCss().ensureInjected();
		
		Element baseWidget = RootPanel.get("baseWidget").getElement();
		baseWidget.addClassName(resources.blueCss().baseWidget());
		
		Element blueWidget = RootPanel.get("blueWidget").getElement();
		blueWidget.addClassName(resources.blueCss().baseWidget());
		blueWidget.addClassName(resources.blueCss().blueWidget());

	}
}

I hope that helps. Note that you would need to use both classes as someone else mentioned, so "baseWidget blueWidget". You could make a helper method do do that, or just apply both.

Sincerely,

Joseph

[Ed]

Thanks for your detailed and clear example and your time.

I am aware of this concept and use it a lot.

But, sorry, that doesn't solve my problem.

Like you said, I have to set 2 styles on the widget, which is not what I want as I want it to be style agnostic as much as possible.

That said, it's a style optimization to reuse styles rules at several places which the widget shouldn't be aware of, especially not if it concerns reusable widgets.

Example: I want to reuse the background, select, etc.. style rules in your bluewidget, redwidget, but also calendar widget, niceButton widget, etc... in several places that have nothing to do with eachother.

I think I need closure-stylesheet, see: http://code.google.com/p/closure-stylesheets, But like thomas mentioned this is currently not supported in GWT.

I am currently looking if I can parse my css fils with closure-stylesheets before the gwt compiler processes them. Let's see if this is possible through a maven plugin...

- Ed

Op donderdag 19 juli 2012 02:08:32 UTC+2 schreef Joseph Lust het volgende:

[Joseph Lust]

Ed,

Ideally (in the spirit of CSSResource) you'd hack the CSSResource/ClientBundle setup so that when extending a CSSResource, you could automatically have ".parent.child" concatenated for you to "parent child" to be returned when you ask for the class name. However, I've done no such hacking in the GWT source.

Sincerely,

Joseph

[Juan Pablo Gardella]

Hi Ed,

How do you format the code?

Cheers,
Juan

2012/7/19 Ed <post2...@gmail.com>

--
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/-/644IQ3b_2zYJ.
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.

[Ed Bras]

How do you format the code?

@Juan: what do you mean? 

[Juan Pablo Gardella]

How show formatted text inside the body's mail? like this:

// BaseWidgetCSSResource.java
package com.testbed.client.resources;

import com.google.gwt.resources.client.CssResource;

public interface BaseWidgetCssResource extends CssResource {
	String baseWidget(); 
}

Cheers,
Juan

2012/7/19 Ed Bras <post2...@gmail.com>

How do you format the code?

@Juan: what do you mean? 

--

You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.

[Jens]

How show formatted text inside the body's mail?

You can use Github or Google Code to convert your plain text code into styled HTML that you can use in Mails / Google Groups.

See: https://groups.google.com/d/topic/google-web-toolkit/t6mXHRPVOfM/discussion

-- J

[Ed Bras]

How show formatted text inside the body's mail? like this:

@Juan

I donno, just press the buttons till have the desired result.

Why?

Any tips are always welcome...

[Ed Bras]

could automatically have ".parent.child" concatenated for you to "parent child" to be returned when you ask for the class name. However,  

@Joseph: that's not even such a bad idea. Indeed you could use a Delegator class that implements that Widget style interface that forwards the call to the correct CssResource interface. In case you want to add an extra styl, you just concatenate two style method calls. 

It's not ideal, but possible.

I think a good solution would be that GWT integrates with the closure-stylesheets project. GWT could not have to worry about the css programming like the current browser-style-dependent conditions. This is done by the closure-stylesheet project. New features/updated added to the closure-stylesheets project would automatically be available I think.

--

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/-/bUNS9VK5n1QJ.

[Thomas Broyer]

On Thursday, July 19, 2012 8:25:29 PM UTC+2, Ed wrote:

could automatically have ".parent.child" concatenated for you to "parent child" to be returned when you ask for the class name. However,  

@Joseph: that's not even such a bad idea. Indeed you could use a Delegator class that implements that Widget style interface that forwards the call to the correct CssResource interface. In case you want to add an extra styl, you just concatenate two style method calls. 

It's not ideal, but possible.

I think a good solution would be that GWT integrates with the closure-stylesheets project. GWT could not have to worry about the css programming like the current browser-style-dependent conditions. This is done by the closure-stylesheet project. New features/updated added to the closure-stylesheets project would automatically be available I think.

Closure Stylesheets is missing @sprite/gwt-image and value() though (as well as calling Java static methods in @if-s; and to be honest, I prefer GWT's @if than Closure's comment-based directives).

Note that ClientBundle is pluggable so you can very well integrate Closure Stylesheets support without patching GWT (create a GssResource with its own ResourceGenerator).

If you intend to work on it, please update us here or on google-web-tool...@googlegroups.com or in http://code.google.com/p/google-web-toolkit/issues/detail?id=4422 (I talked about Closure Stylesheet in the issue I originally merged that one in; you can also find my notes on G+ https://plus.google.com/113945685385052458154/posts/JboFtJFX3hE or on this group's archives)

[Ed Bras]

@Thomas: thanks for your input. 

It looks interesting, especially the hooks such that you can easily add your own stuff (generator extending existing one) without patching. I will try to play with it, but I just have to find the time when :(...

Modifying the @ClassName annotation to accept a String[] instead of just a String, looks easy ;)

- Ed