Same color for Top banner + footer

Hi all,

I need to build a top banner + a footer (see scrennshot) using the same background color.
This color is coming from a java parameter (BACKGROUND_COLOR)


1 / Footer :

OK

I use a Label for creating the footer, it works fine :
Label footer = new Label(“
<p style="background-color:” + BACKGROUND_COLOR + “;
font-size:10px;color:rgb(255,255,255)">
I AM A FOOTER

”,
Label.CONTENT_RAW);


2 / Top banner :

Not OK

I tried to use a Panel, but i need to set the color in a styles.css file, and so, i cannot use the java parameter …

What kind of vaadin object allows me to create this top banner ?

Eric
12736.jpg

I’ve successfully used the
CssInject
add-on for that exact purpose; changing colors from java code.

Thank you Thomas,

I installed cssinject-1.0.jar into WAB-INF/lib
So, i can now add this code into my java file :

CSSInject css = new CSSInject();
css.addStyleSheet(new ThemeResource(“views/login-view.css”));

But
i still do not know how to set the background color of the top banner, with a java variable !

Is there a little example somewhere ?

Eric

You can set the value of a CssInject component to be pure CSS:

		CSSInject i = new CSSInject();
		StringBuilder sb = new StringBuilder();

		sb.append(".login-borders .v-csslayout-margin {border-color: #");
		sb.append(settings.getFrameColor());
		sb.append(";}\n");

		i.setValue(sb.toString());
		addComponent(i);

First, thank you Thomas : CSSinject seems to suit exactly my needs
BUT, I get the following issue :


Widgetset does not contain implementation for org.vaadin.cssinject.CSSInject. Check its @ClientWidget mapping, widgetsets GWT module description file and re-compile your widgetset. In case you have downloaded a vaadin add-on package, you might want to refer to add-on instructions. Unrendered UIDL:
-Unrendered UIDL
-org.vaadin.cssinject.CSSInject(NO CLIENT IMPLEMENTATION FOUND) id=PID6 styles=.v-panel-content > div { background: transparent; }.v-panel-content { background-color:rgb(255, 255, 255); }

What i did :
In order to build the top banner, i create a Panel “banner” which contains a VerticalLayout “layoutBanner” which contains the CSSInject and an image;

CSSInject [color=#cf2e2e]
css 
[/color]= new CSSInject();
css.setValue(".v-panel-content > div { background: transparent; }.v-panel-content { background-color:rgb(55, 55, 55); }");
			
Panel banner = new Panel();
banner.setHeight("20px");
			
Embedded image = VaadinContext.logoImage;			
image.setSizeUndefined();
	
VerticalLayout [color=#1dce23]
layoutBanner 
[/color]= new VerticalLayout();
[color=#1dce23]
layoutBanner
[/color].addComponent([color=#cf2e2e]
css
[/color]);
[color=#1dce23]
layoutBanner
[/color].addComponent(image);

			
banner.setContent(layoutBanner);
layout.addComponent(banner);


I do not know what to do right now; is it necessary to create a “widget” (don’t know what it is) only for creating a background color ?
What is the “CLIENT IMPLEMENTATION” the message is talking about ?

This may be obvious but did you compile the widgetset after adding the CssInject add-on? This can be most easily done with the vaadin eclipse plugin.

No, i didn’t create some widget.
It seems to me that a widget is a new vaadin or gwt component. (correct me if i am wrong)
I only want to modify the background color of an existing panel or layout, bu using CSSinject, is it necessary to create a widget ?

Yes, you didn’t create a widget, but the CssInject add-on contains client-side code. To include this code into the code that is loaded in the browser, you need to recompile the widgetset. That’s all you need to do, no need to create any additional widgets.

First i do not understand the difference between a widget and a widgetset.
A widgetset is a set of widgets ?
What is the “widgetset” in my example ?

According to the Vaadin book, section “11.2.2 Recompiling the Widget Set”, we need to recompile the widgetset “After you edit a widget”
It means, adding CSS to a Panel or Layout by using CSSinject is like editing a widget ??
in this case, the Panel or Layout IS a widget ?

I tried to click on the “compile widget” button in Eclipse, a message says (see the screenshot) i have to select a Vaadin project, but i selected a working project ! (in the green circle you can see the vaadin logo in the tab). So, where i am wrong ??

Eric
12745.jpg

Hi again,

Please read through
this page
first.

  • A widgetset is the Java-to-Javascript compiled collection of all the widgets used in your project.
  • Vaadin comes with a precompiled widgetset.
  • In your example the resulting widgetset would be one that includes both the Vaadin precompiled widgetset and the CssInject add-on’s widgetset.
  • The part of the book you refer to is not the correct one (since you’re not developing a new widget, you’re using an add-on),
    this
    is.
  • The problem you’re having happens because you do not have the CssInject’s client-side code in your widgetset.

About the compilation problem, try the following:

  1. Select your vaadin project from Project Explorer (on the left in Eclipse)
  2. Click the compile widgetset button (the one in your screenshot)

If this fails, make sure that it actually is a Vaadin project: Open your project’s properties and see if there is a Vaadin page available.

Thank you Teppo for your answer

1 / Yes, when i perform a left click on the root element of my project in Eclipse, vaadin is mentionned (version 6.8.0).

2 /
Here
, i read :
Check the WEB-INF/web.xml deployment descriptor and see that the servlet for your application has a widget set parameter, such as the following:

<init-param>
    <description>Application widgetset</description>
    <param-name>widgetset</param-name>
    <param-value>com.example.myproject.widgetset.MyprojectWidgetset</param-value>
</init-param>

I tried to replace my param-name by “widgetset”, same error message
I tried to add your code as a second parameter of but it is refused (no child element expected at this point)
I cannot remove the full qualified name of the starting class of my project
So, i do not know how to apply this advice !

Here is my init-param in the WEB-INF/web.xml of my project :

<servlet>
		<servlet-name>MyApplication</servlet-name>
		<servlet-class>com.vaadin.terminal.gwt.server.ApplicationServlet</servlet-class>
		<init-param>
			<description>Vaadin application class to start</description>
			<param-name>application</param-name>
			<param-value>com.eric.myproject.ProjectLauncher</param-value>
		</init-param>
	</servlet>

3 /
Here
, i can read :
If the add-on has any custom client-side code (i.e. contains a *.gwt.xml file defining a widget set), your application must define a single widget set that inherits from the add-on widget sets in your project.See the links below for more details on how this is accomplished.
=> CSSinject.jar contains a *.gwt.xml file, so i am concerned !
=> i do not find the details in the “links below” (eclipse in my case)

Sounds to me like your Vaadin Eclipse plugin is not functioning correctly - please remove it and reinstall to see if that makes a difference. If it works properly, it should suggest compilation of the widgetset as soon as you insert an add-on JAR (which contains client side code) to WEB-INF/lib. And even if it does not (can be disabled), clicking the compile button should check for add-on JARs and generate the widgetset definition file and run the compilation if needed.

To do the add-on integration manually, you should have the following in web.xml, under vaadin servlet definition:

<init-param>
	<description>
	Application widgetset</description>
	<param-name>widgetset</param-name>
	<param-value>com.example.test.widgetset.TestWidgetset</param-value>
</init-param>

And then, in your source folder, in the package com.example.test.widgetset, you should add a file names TestWidgetset.gwt.xml which should contain the following:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 1.7.0//EN" "http://google-web-toolkit.googlecode.com/svn/tags/1.7.0/distro-source/core/src/gwt-module.dtd">
<module>
	<inherits name="com.vaadin.terminal.gwt.DefaultWidgetSet" />
    <inherits name="org.vaadin.cssinject.Cssinject_addonWidgetset" />
</module>

So you see, that is a new widgetset definition for your project, which inherits the two widgetsets: the default one from Vaadin and the one from CssInject add-on. After you’ve made these modifications, try the widgetset compile button again. Note that you can change the package name “com.example.test.widgetset” to fit your project better, just make sure that the web.xml reference points to where your definition file actually is.

If it still doesn’t work, I’m suspecting a problem with the vaadin eclipse plugin - please remove&reinstall.

One thing to check would be that you downloaded the CssInject for Vaadin 6, not the one for Vaadin 7.

1 / I removed then re-installed the Vaadin plugin in Eclipse (Help menu, new soft, http://vaadin.com/eclipse)

2 / I added TestWidgetset.gwt.xml into a new package named
com.example.test.widgetset
as you said
near my original package
com.eric.myproject.ProjectLauncher

Is it correct ? (see the screenshot)

3 / When i click on the Vaadin button for compiling the widgetset, i get an "
Acces denied
" message : the screenshot shows that the compilation process wants to access java.exe, but only javac.exe can compile java code, java.exe cannot doing it. Do you know why java.exe is needed here ?
Which kind of rights are required for this java.exe file ?


Vaadin plugin version 2.0.1.201105170102
Eclipse Helios Service Release 2 Build id: 20110218-0911

12750.jpg
12751.jpg

Hi,

  1. Ok

  2. Seems ok to me, although the package name I wrote was just an example :slight_smile: So for consistency you could move the .gwt.xml file to com.eric.myproject package and update your web.xml accordingly.

  3. Never seen such an error before. Unfortunately I don’t know much about the inner workings of the plugin and can’t help you with this issue. Maybe someone with more knowledge on that could pitch in.

Does the compilation work if you just create a new Vaadin project through the eclipse new wizard selection and then create a new vaadin widget via the same way? If this works you could start from there.

Widgetset compilation is done by the GWT compiler, not by javac. GWT compiler is a Java class that is executed by running the Java virtual machine executable with suitable parameters.

Eclipse needs to be able to run java.exe to execute a Java class (of the JRE selected for the project or the workspace, or the “global” default one if none selected for either).


Hi Henri :
i successfully produce java code each day with Eclipse without getting some “access denied” message with java.exe. So i do not understand why i get it when compiling a widgetset. I guess there is something wrong in my project, but i do not know what.


Hi Teppo :
Yes, the vaadin plugin works fine : in the screenshot below, i used the vaadin plugin for creating a new vaadin project, and a new vaadin widget inside
12754.jpg

Eclipse runs in some JVM, but not necessarily the one configured within it (for a project or a workspace) to run other code. Maybe the file permissions for the JVM used to run Eclipse are different from those for the project JVM that widgetset compilation uses. Check if you can run that Java executable from the command line.

Also, try if installing a JVM in a directory with no spaces or special characters would help (making sure you configure that JRE in Eclipse and select it in project properties). That could well be the problem here.

As a side note, Eclipse does not use javac but has its own built-in Java compiler implementation.

It seems my issue (cannot compile widgeset because of an “access denied” on java.exe) was coming from windows7, i successfully compiled it under windows XP, and CSSinject works fine.
Thank you Henri and Teppo for your help :smiley:

Eric