LESS/ SASS/... style usage in GWT ?

[Ed]

Hi,

I am curious how people use LESS/SASS/... etc.. in GWT i.c.m. GWT Clientbundle mechanism?

I looking into using this (never did before).

Please share your experience? (setup, css parsing, experience, ....)

[RyanZA]

Vaadin has a special linker that should let you use SASS. I haven't tried it though.

https://vaadin.com/blog/-/blogs/link-to-the-client-side-from-sass

[Ed]

Vaadin has a special linker that should let you use SASS. I haven't tried it though.

https://vaadin.com/blog/-/blogs/link-to-the-client-side-from-sass

Thanks for reminding, I almost forgot it :(.

I am currious when this will also be available in the core gwt? As Vaadin is now now an  GWT contributor, what are the plans for these things ?

Could it be possible to just pick up this piece of functionality of Vaadin and use it, and how ? (without using anything else of Vaadin).

[Ryan Chazen]

According to that article it will work without Vaadin, and just requires that you replace 'widgetset' with 'module'. How exactly you'd go about doing that is unclear and  I haven't tried, but the article definitely seems to be saying that it should work without issue.

I've had plans to give it a try, but haven't had a reason to use SASS recently so haven't tried it out yet. Let us know how it goes if you try.

--
You received this message because you are subscribed to a topic in the Google Groups "Google Web Toolkit" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-web-toolkit/mrBctJ2BGtI/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-web-tool...@googlegroups.com.
To post to this group, send email to google-we...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-web-toolkit.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Ed Bras]

I think the gwt dev team is "thinking about" CSS SASS support, from the looks of issue 7624:

https://code.google.com/p/google-web-toolkit/issues/detail?id=7624

It hasn't become stale yet ... ;)

On Fri, Jun 14, 2013 at 4:19 PM, Ed <post2...@gmail.com> wrote:

--

[Ryan Chazen]

It's been (erroneously) merged into issue 8162, which is just a generic CSS3 issue. So I wouldn't get your hopes up too quickly.

https://code.google.com/p/google-web-toolkit/issues/detail?can=2&q=8162&colspec=ID%20Type%20Status%20Owner%20Milestone%20Summary%20Stars&id=8162

[Daniel Kurka]

So we need a better way of doing CSS in GWT, this is what the complete collection of issues stands for.

We are talking about how to add this to GWT in a proper way and I am very much interested in this. For example the mgwt css looks very messy and it could very much benefit from something like GSS.

- Daniel

On Friday, June 14, 2013 4:29:34 PM UTC+2, RyanZA wrote:

It's been (erroneously) merged into issue 8162, which is just a generic CSS3 issue. So I wouldn't get your hopes up too quickly.

https://code.google.com/p/google-web-toolkit/issues/detail?can=2&q=8162&colspec=ID%20Type%20Status%20Owner%20Milestone%20Summary%20Stars&id=8162

On Fri, Jun 14, 2013 at 4:22 PM, Ed Bras <post2...@gmail.com> wrote:

I think the gwt dev team is "thinking about" CSS SASS support, from the looks of issue 7624:

https://code.google.com/p/google-web-toolkit/issues/detail?id=7624

It hasn't become stale yet ... ;)

On Fri, Jun 14, 2013 at 4:19 PM, Ed <post2...@gmail.com> wrote:

Vaadin has a special linker that should let you use SASS. I haven't tried it though.

https://vaadin.com/blog/-/blogs/link-to-the-client-side-from-sass

Thanks for reminding, I almost forgot it :(.

I am currious when this will also be available in the core gwt? As Vaadin is now now an  GWT contributor, what are the plans for these things ?

Could it be possible to just pick up this piece of functionality of Vaadin and use it, and how ? (without using anything else of Vaadin).

--
You received this message because you are subscribed to a topic in the Google Groups "Google Web Toolkit" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-web-toolkit/mrBctJ2BGtI/unsubscribe.

To unsubscribe from this group and all its topics, send an email to google-web-toolkit+unsub...@googlegroups.com.

To post to this group, send email to google-we...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-web-toolkit.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

--
You received this message because you are subscribed to a topic in the Google Groups "Google Web Toolkit" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-web-toolkit/mrBctJ2BGtI/unsubscribe.

To unsubscribe from this group and all its topics, send an email to google-web-toolkit+unsub...@googlegroups.com.

[Juan Pablo Gardella]

I do agree, CSS in GWT are complex. This is a good improvement "Simplifies the use of CSS in GWT".

2013/6/20 Daniel Kurka <dank...@google.com>

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-web-tool...@googlegroups.com.

[Ltearno]

With HexaCss for GWT, you can use Sass, Less, Susy, Foundation, Bootstrap and so on. For the programmer you use it the same kind of way as CssResource/ClientBundle, but then you bind your application to external CSS files, and thus can use any CSS Framework. You should have a try !

This is what i use to quickly wrap an existing CSS Framework (bootstrap, skeleton, ...) or to use my own Less or Sass or GSS stylesheet.

Thanks

Arnaud Tournier

twitter : @ltearno

[mmcr...@harris.com]

Does that include the ability to modify styles without redeploying the WAR file?

[Arnaud TOURNIER]

Not exactly because the css files are typically served from the war file. You could of course host them on a CDN so that you don't have to redeploy your war (but then you need an internet connection and your application will depend on it to have the CSS, which i find OK only if your application is hosted on the "public" web).

What is sure is that you don't have to RECOMPILE your GWT application to change the styles...

I am not sure to have well understood your question, maybe you can give more context on what you want to do when you mean changing the styles without modifying the war...

Thanks

Arnaud

Le ven. 24 avr. 2015 à 19:46, <mmcr...@harris.com> a écrit :

Does that include the ability to modify styles without redeploying the WAR file?

--

You received this message because you are subscribed to a topic in the Google Groups "Google Web Toolkit" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-web-toolkit/mrBctJ2BGtI/unsubscribe.

To unsubscribe from this group and all its topics, send an email to google-web-tool...@googlegroups.com.

To post to this group, send email to google-we...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-web-toolkit.

For more options, visit https://groups.google.com/d/optout.

[Jens]

With HexaCss for GWT, you can use Sass, Less, Susy, Foundation, Bootstrap and so on. For the programmer you use it the same kind of way as CssResource/ClientBundle, but then you bind your application to external CSS files, and thus can use any CSS Framework. You should have a try !

This is what i use to quickly wrap an existing CSS Framework (bootstrap, skeleton, ...) or to use my own Less or Sass or GSS stylesheet

That might be a dumb question but:

If I don't need theme switcher support then HexaCss doesn't really add any value or does it? I mean I can just generate/use a css file from any css framework / css preprocessor and then create a matching CssResource for its content. Then GWT will do the rest.

So it seems to me that HexaCss is just about dynamic themes while still having some css pruning and minification?

-- J.

[Arnaud TOURNIER]

Hi Jens,

True that HexaCss allows for theme switching, but it is only a side effect of what it really allows : to have multiple css files bound to the same gwt application, without needing to recompile the application.

For example, you might want to rebrand your application for another customer, you might want to generate css on the fly according to some user preference, and so on.

There are other advantages. For instance, i saw many of my customer's projects were each widget has one CssResource interface associated and one corresponding css file. This leads to a lot of little css files scattered accross the project. With HexaCss, you can still have one java interface by widget, which is cool from the point of view of object oriented programming. And then you can make up bigger css files having each one cover several java interfaces. For example one CSS file for each of the three main packages of your application...

Also, what you can do : for instance imagine you are using an external GWT library. If this library uses CssResource, you will have hard time customizing its css. But if it uses HexaCss, you just have to provide a CSS file, run the maven plugin on it and you are done ! No need to make some CssResource inheritance mechanism to insert your own CSS. You don't have to entangle too much the CSS concepts and the Java architecture concepts.

There may be many more use cases, i found myself discovering new ones often. The first one was not having to recompile the application when chaning the css files.

In one word, what this tool does is to decorrelate the CSS use from the Java GWT compilation.

- The first phase of the tool does an analysis of your Java HexaCss interfaces to generate a consistent naming accross compilations.

- Then the maven plugin uses the information produced during the GWT compilation to transform your css files (generated with less, sass, gss or not) so that they are optimized and bound correctly to your application.

I am not sure i am really clear in my explanation, but i hope you get the idea... So the theme switcher is for me really just a way to show that the GWT compilation is decorrelated from the CSS binding, which is the essence of this tool.

Thanks !

Arnaud

--

[mmcr...@harris.com]

Well, the idea is that you have a product used by multiple customers that's deployed as a WAR file, but the customers want to be able to do their own customizations on the style for branding, style consistency, etc.  They may not have Java developers or Java developer tools, but understand stylesheets.  Also, if the customers muck around inside the WAR file, it will no longer match the released version complicating product support and upgrades.  Not to say that changes styles doesn't have some consequences but change management of multiple style baselines a lot better than multiple code baselines.

[Jens]

I am not sure i am really clear in my explanation, but i hope you get the idea... 

Yeah I got the idea. Although I don't need it now it seems quite handy for theming and I like the fact that the external CSS file can still be pruned with the help of the generated mapping file.

I think what confused me is the fact that it heavily emphasizes that it enables you to use any css framework / preprocessor with GWT. However you can just do that without your library as well because GWT does not care how the css/gss file for a CssResource is generated. You can very well use scss files, turn them into css files and then compile the GWT app.

So IMHO the main advantage of your library really is easy theming without recompiling the GWT app while still having optimized/pruned/minified external css files. That you can use LESS, SASS and the like is logical as your library, as well as GWT itself, does not care how the input CSS file has been generated. Maybe you should rework your documentation and homepage a bit because while reading it I always thought "well thats just the same as css resource" and totally missed that you optimize/prune external css files against an already compile GWT app.

-- J.

[Ed Bras]

Have a look at the RedHat Errai templating mechanism. 

Errai is setup in modules (jar's), so you can use only the parts you need. And easy to extend/fork parts you need.

The idea is that you load the css/html dynamically when needed in the app (through annotations). These html/css snippets/pages can be controlled/provided by Customers/third party companies. It works well, efficient with a good productivity: you can easily change the css/html without recompiling the GWT app. It works good when clients want other colors or provider their own html snippets/pages..

GWT loads the css/html snippets and adds logic to the required html snippets, like buttons and form processing, etc...

With all the css/html framework and developers out there these days, it a very friendly and productive integration. 

As a GWT developer I love it and makes me happy. I don't want to be busy with missing pixels and jumping css behaviors. Everybody has to do what he is good at ;) Especially these days, css/js is changing a lot, difficult to keep up with...

Just my 50 cent...

​

[Jens]

I would probably just serve the CSS using a servlet that fetches the CSS from database based on the current customer. The app would then have a small UI to update the CSS in the database.

If you don't need to give customers full control but just want to allow them to change logo / colors then I think you can also use CssResource runtime evaluation. That is you would define

@def APP_BACKGROUND_COLOR eval("com.example.app.client.resource.Branding.getBackgroundColor()");

and then use APP_BACKGROUND_COLOR throughout your CssResource styles. To make Branding.getBackgroundColor() return the correct value for a given customer you would load that information from your server and set it on the Branding class before you inject the CSS. In your app UI you would then have a simple text box where customer can change the CSS hex color.

-- J.

[Arnaud TOURNIER]

Thanks Jens for your advice,

i will definitely change the text on the website in the way you said it. Obvisouly i lack skills in communicating !

Thanks again !

Arnaud

--

[Arnaud TOURNIER]

Thanks Ed, i will have a look at Errai again, last time i did i focused on other parts and missed the theming parts...

Arnaud

--

[Ed Bras]

Concerning the Theming part: I did a gwt project like @Jens explained and works well.

Details: like @Jens mention, retrieve values (often: colors, logos, etc.. and not layout like height/width) from static java files. The static java (preference bridge) class will then forward the call to a contained java (preference) class that it loads through GWT, as such that in GWT config you specify the file that it need to load -> Theming ;)... Works well, another GWT config file results in another (client) theme.

Below Some copy/paste code to make it more clear (the Css part is like Jens mentioned above). It concern a Standard theme that has a corresponding Standard.gwt.xml file. So every client/theme would have it's own gwt xml file. The Theme file you include in your app and compile it... So in Maven you can define different gwt compiler jobs for every Theme... 

Works well for white label kind of web apps..

The bridge class (I think I posted it before in the GWT forum some years ago):

----

public final class ActivateCodePreferencesBridge implements ResourcesPreferencesBridge {

private static final ActivateCodePreferences BRIDGE = GWT.create(ActivateCodePreferences.class);

private ActivateCodePreferencesBridge() {

}

private static ActivateCodePreferences getBridge() {

return BRIDGE;

}

public static String activateFontColor() {

return getBridge().activateFontColor();

}

public static String activateFontWeight() {

return getBridge().activateFontWeight();

}

public static String activateFontSize() {

return getBridge().activateFontSize();

}

}

----

An implementation of the Preference instance:

----------

public final class StandardActivationCodePreferences extends AppStandardPreferencesBase implements ActivateCodePreferences {

public String activateFontColor() {

return color006699();

}

public String activateFontWeight() {

return fontWeightBold();

}

public String activateFontSize() {

return fontSize14();

}

}

----------

And the GWT config Standard.gwt.xml:

------------

<module>

   <replace-with class="com.bla.standard.StandardActivateCodePreferences">

      <when-type-is class="com.bla.ActivateCodePreferences" />

   </replace-with>

</module>

------------

[Arnaud TOURNIER]

Cool, but sometimes CSS is not about just colors !

You may want to change the structure of the CSS between themes. For example one theme would have the checkboxes styled so they look as iOS ones (through some known CSS tricks with ::content and so on) and other times you might want them to appear in another way.

So it's not just a matter of injecting a color value... It's matter of completely changing the CSS structure.

In that case, how would you do with CssResources ?

Thanks, i like this discussion !

Arnaud

--

[Ed Bras]

​There are several options to fly to the moon.

There is no silver bullet. .. Just pick the best of all worlds for your situation...

If your Css needs to be very flexible, I don't think that CssResource is the correct choice...

I would then use Errai with a good html parser, that is able to create behavior from the html attributes (like frameworks like bootstrap/foundation do). Example: in my html, through data-* attribute I define behavior like the carousel delay, or the internal navigation to other parts of the app. Works very well, no need to change gwt code through these kind of syntax....