I'm trying to achieve those theme change solutions: https://www.baeldung.com/spring-mvc-themes or http://acodigo.blogspot.com/2017/04/spring-mvc-themeresolver.html but with Thymeleaf instead of the .jsp.
But I can't see any style change on my application.
I think the problem is href/th:href attribute.
I have tried many solutions but can't change href="<spring:theme code='styleSheet'/>" from .jsp in a valid Thymeleaf expression.
And this bellow is the only solution that works.
th:href="${#environment.getProperty('stylesheet')}"
But there are still no styles in HTML, and when I run inspect element there are no .css files included.
Here is the code example:
#Configuration
public class ThemeConfig implements WebMvcConfigurer {
#Bean
public ThemeResolver themeResolver() {
CookieThemeResolver themeResolver = new CookieThemeResolver();
themeResolver.setDefaultThemeName("light");
return themeResolver;
}
#Bean
public ThemeChangeInterceptor themeChangeInterceptor() {
ThemeChangeInterceptor interceptor = new ThemeChangeInterceptor();
interceptor.setParamName("theme");
return interceptor;
}
#Override
public void addInterceptors(InterceptorRegistry registry) {
registry.addInterceptor(themeChangeInterceptor());
}
}
Html
<head>
...
<link rel="stylesheet" type="text/css" th:href="${#environment.getProperty('stylesheet')}">
...
</head>
<body>
...
<div class="dropdown-container ms-4">
<a th:href="#{?theme=dark}">[[#{dashboard.theme-dark}]]</a>
<a th:href="#{?theme=light}">[[#{dashboard.theme-light}]]</a>
<a th:href="#{?theme=blue}">[[#{dashboard.theme-blue}]]</a>
</div>
...</body>
dark.properties (I have also tried: stylesheet=dark.css, stylesheet=/themes/dark.css, etc..)
stylesheet=/css/themes/dark.css
background=black
dark.css
footer{
height: 100px;
background-color: red;
}
Since Theme support is deprecated in Spring 6 I will use JavaScript as an easy workaround.
Related
I'd like my login page to have a background image in the body. Here's what I have so far:
public interface MyResources extends ClientBundle {
public static final MyResources INSTANCE = GWT.create(MyResources.class);
#Source("css/login.css")
public MyLoginCssResource loginCss();
#Source("css/GWT_App.css")
public CommonCss commonCss();
#Source("img/logo.png")
#ImageOptions(repeatStyle = RepeatStyle.Both)
ImageResource backgroundImage();
}
public interface CommonCss extends CssResource {
String body();
}
.body {
background-color: white;
gwt-image: 'backgroundImage';
}
How do I reference the commonCSS in my ui.xml-file if I already have the loginCss referenced?
<ui:with field='res' type='client.resources.MyResources' />
<g:HTMLPanel addStyleNames="{res.loginCss.maindiv}">
</g:HTMLPanel>
</ui:UIBinder>
and also, how can I set a style for the body tag in a ui.xml-file?
How do I reference the commonCSS in my ui.xml-file if I already have the loginCss referenced?
<g:HTMLPanel addStyleNames="{res.loginCss.maindiv} {res.commonCss.body}"/>
and also, how can I set a style for the body tag in a ui.xml-file?
As far as i know you can't access body from ui.xml file.
There're a few ways to have this background ONLY in the login page.
The simplest one is to wrap all the page in a container block
<g:FlowPanel addStyleNames="{res.commonCss.body}">
<g:HTMLPanel addStyleNames="{res.loginCss.maindiv} "/>
</g:FlowPanel>
So on the navigation from the login page - the background won't stay there.
And in case you want a permanent effect - you can just add css in your index.html file, as a regular css for body tag
So, about the problem.
I use Vaadin 7.4.3. I want to use declarative UI but i haven't right way with CSS using.
For example, i have MainView.html file with mapping:
<!DOCTYPE html>
<html>
<head>
<meta name="package-mapping" content="auth:my.widget.package.web.main.auth" />
<link href="./styles/common.css" rel="stylesheet" type="text/css">
</head>
<body>
<v-vertical-layout size-full style-name="marginTop">
<auth-login-panel :right/>
</v-vertical-layout>
</body>
</html>
Java mapping:
#Theme("valo")
#Widgetset("my.package.MyAppWidgetset")
public class MainView extends UI {
#WebServlet(value = "/*", asyncSupported = true)
#VaadinServletConfiguration(productionMode = false, ui = MainView.class)
public static class Servlet extends VaadinServlet {
}
#Override
protected void init(VaadinRequest request) {
DesignContext context = Design.read(getClass().getResourceAsStream("MainView.html"), null);
setContent(context.getRootComponent());
}
}
Simple CSS (common.css) for test:
#marginTop {
margin-top: 20px;
}
.marginTop {
margin-top: 20px;
}
But... css not works.
Any ideas?
You should not attach css stylesheets like this. You should put your CSS in a theme.
Good way is to create your custom theme as an extension of a existing Vaadin theme such as Valo or Reindeer and then add only your custom styles which you need to adjust your application. Book of vaadin has a great section dedicated to Creating and using themes and also How to create a theme in Eclipse. There is also a Vaadin Wiki Post regarding Creation of Sass Themes.
Also, Valo theme in particular can be greatly adjusted in very simple way by just changing value of some predefined variables which define colors, margins etc. You can find an example here.
$v-app-loading-text: "Dark & Flat Valo";
$v-background-color: #000;
$v-focus-color: #ffa500;
$v-font-size: 15px;
$v-font-weight: 600;
$v-unit-size: 42px;
$v-bevel: false;
$v-shadow: false;
$v-gradient: false;
$v-textfield-bevel: false;
$v-textfield-shadow: false;
$v-border-radius: 0;
$v-border: 2px solid v-tone;
$v-overlay-shadow: 0 0 0 2px (v-tint 10);
$v-focus-style: $v-focus-color;
$v-font-family: "Lato", sans-serif;
$v-font-weight--header: 600;
#import "../valo/valo";
I am new in GWT. Here is my questions:
Form.css
.text{
color: orange;
font-size: 16pt;}
FormResources.java
public interface FormResources extends ClientBundle{
#Source("Form.css")
MyCSS style();
public interface MyCSS extends CssResource{
String text();
}}
Form.ui.xml
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui"
xmlns:res="urn:with:com.org.yournamehere.client.FormResources">
<ui:with field='res' type='org.yournamehere.client.FormResources' />
<g:HTMLPanel>
<g:Label res:styleName="style.text">ABC</g:Label>
</g:HTMLPanel></ui:UiBinder>
Form.java
public class Form extends Composite {
private static final FormUiBinder uiBinder = GWT.create(FormUiBinder.class);
#UiTemplate("Form.ui.xml")
interface FormUiBinder extends UiBinder<Widget, Form> {}
#UiField(provided = true)
final FormResources res;
public Form() {
this.res = GWT.create(FormResources.class);
res.style().ensureInjected();
initWidget(uiBinder.createAndBindUi(this));
}}
My problem is can show the ABC word, but not in orange color and size is 16pt. The Css part cannot shown. Please help me to solve this problem. Thanks.
You are almost doing right.
Just replace below line in Form.ui.xml file.
<g:Label res:styleName="style.text">ABC</g:Label>
with
<g:Label res:styleName="{res.style.text}">ABC</g:Label>
screenshot:
Problem : "style.text" is not referring to your style defined in FormResources#MyCSS#text.
Always enclose the value in {...} if you want to use some dynamic values.
For more info have a look at sample on GWT UiBinder - Hello Stylish World
I am using a TabBar and I want to style the component in different ways. So one time this style, another time that style. I thought this will work but it didn't:
TabBar t = new TabBar();
t.addTab( "1" );
t.addTab( "2" );
t.addStyleName( MyResources.INSTANCE.css().slickTab() );
And:
public interface MyResources extends ClientBundle
{
public static final MyResources INSTANCE = GWT.create(MyResources.class);
#Source("style.css") MyCssResource css();
}
public interface MyCssResource extends CssResource
{
String slickTab();
}
In the CSS
.slickTab .gwt-TabBar .gwt-TabBarItem {
background-color: #ff0000;
font-weight: normal;
}
But the appearance don't change. What I am doing wrong?
You might be able to force this in CSS.
.slickTab .gwt-TabBar .gwt-TabBarItem {
background-color: #ff0000 !important;
font-weight: normal !important;
}
Also, since you're adding a style which is subject to the parent style. If this is the case, you might need to set 'setStylePrimaryName' instead of adding it and toggle between style changes with handlers.
Change your CSS. .slickTab .gwt-TabBar .gwt-TabBarItem will match a TabBarItem inside a TabBar inside a slickTab. However, since the TabBar is the slickTab, and is not inside it, you need to do something like this (note .gwt-TabBar.slickTab):
.gwt-TabBar.slickTab .gwt-TabBarItem {
background-color: #ff0000;
font-weight: normal;
}
The interface MyCssResource need to be inside MyResources.
Here's an exemple :
public interface Resources extends ClientBundle
{
public static final Resources INSTANCE =
GWT.create( Resources.class );
/***********************************************
* Home
***********************************************/
#Source( "./css/home.css" )
public HomeCss getHomeCss();
public interface HomeCss extends CssResource
{
String loginBtn();
}
/***********************************************
* Another Page
***********************************************/
#Source( "./css/AnotherPage.css" )
public AnotherPage getAnotherPageCss();
public interface AnotherPage extends CssResource
{
String title();
}
}
This is the way I use all kind of Resource and it work really well.
Whenever you need to use it many time in the same method or function, you can do this :
HomeCss homeStyle = Resource.INSTANCE.getHomeCss();
yourPanel.setStyleName( homeStyle.yourPanel() );
Don't hesitate to ask if there's anything you didn't understand.
.slickTab .gwt-TabBar .gwt-TabBarItem is going to match something with class gwt-TabBarItem inside something with class gwt-TabBar inside something with class slickTab. I think you just want .slickTab .gwt-TabBarItem for the CSS selector.
I highly recommend using FireBug to inspect the HTML structure generated by GWT and how your CSS selectors are applied to it.
The line:
t.addStyleName( MyResources.INSTANCE.css().slickTab() );
Modifies the class element attribute. And INSTANCE.css().slickTab() does not do what you think. These methods without annotations bring back to java the #def's in the css. To make what you want add to MyCssResource:
#ClassName("slickTab")
String slickTab();
So, when GWT garbles the css upside down that method will return the corect class, ej "awEs". These GWT guys are obsessive about squeezing stuff :)
And remember, firebug & chrome-inspector are your friends.
I have one more question! I am trying to configure HtmlPanelGrid from bean. I bound panelGrid to this bean and want to set css row classes.
Here is me stylesheet.css:
.list-row-even {
background-color: silver;
}
.list-row-odd {
background-color: red;
}
my jsf page:
<rich:tab label="Top-List" id="screenTop">
<h:panelGrid id="topListTable" binding="#{chartBean.topListTable}" />
</rich:tab>
and my bean:
public TopListChartWrapper(Iterator<Entry> treeIt) {
this.grid = new HtmlPanelGrid();
//this.grid.setBgcolor("yellow");
this.grid.setColumns(2);
this.grid.setBorder(0);
this.grid.setCellpadding("0");
this.grid.setCellspacing("0");
this.grid.setWidth("100%");
this.grid.setRowClasses("list-row-even, list-row-odd");
this.treeIterator = treeIt;
this.prepareGrid();
}
Any ideas? maybe somewhere I need register my stylesheet?
Thanks!
Sorry - about forget the question)
I figure out what was wrong:
I need replace the line:
link href="./css/default.css" rel="stylesheet" type="text/css"
with this one:
link href="#{facesContext.externalContext.requestContextPath}/css/default.css" rel="styleSheet" type="text/css"/
Thanks!