-
Notifications
You must be signed in to change notification settings - Fork 18
Custom Themes
Slava P. edited this page May 19, 2015
·
2 revisions
Can someone give an example of how to use a Custom Theme made with ThemeRoller for JQM4GWT?
It's quite simple. In your pom.xml use jqm4gwt-library (not standalone or remote) :
<dependency>
<groupId>com.sksamuel.jqm4gwt</groupId>
<artifactId>jqm4gwt-library</artifactId>
<version>${jqm4gwt.version}</version>
<scope>provided</scope>
</dependency>
Then in your index.html include custom theme:
<link rel="stylesheet" href="css/custom-theme.min.css" />
<link rel="stylesheet" href="css/jquery.mobile.icons-1.4.5.min.css" />
<link rel="stylesheet" href="css/jquery.mobile.structure-1.4.5.min.css" />
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>
Then you can use any swatch from custom theme as parameter for setTheme() method, for example myPage.setTheme("c").
And it's possible to dynamically control theme for any widget.
public String action() {
return "h";
}
public String highlight() {
return "e";
}
public String primary() {
return "g";
}
public String checkbox() {
return "g";
}
public String listview() {
return "g";
}
public String tabsHeader() {
return "a";
}
public String tabsHeaderCustom() {
return Resources.r.custom().aActive();
}
private boolean isParentPageHeader(Widget w) {
if (w == null) return false;
if (JQMCommon.getStyleStartsWith(w.getElement(), JQMCommon.STYLE_UI_BODY,
JQMCommon.STYLE_UI_BODY_INHERIT) != null) {
return false;
}
if (w instanceof JQMHeader) {
return !isParentDialog(w.getParent());
}
return isParentPageHeader(w.getParent());
}
private boolean isParentPageFooter(Widget w) {
if (w == null) return false;
if (JQMCommon.getStyleStartsWith(w.getElement(), JQMCommon.STYLE_UI_BODY,
JQMCommon.STYLE_UI_BODY_INHERIT) != null) {
return false;
}
if (w instanceof JQMFooter) {
return !isParentDialog(w.getParent());
}
return isParentPageFooter(w.getParent());
}
private boolean isParentDialog(Widget w) {
if (w == null) return false;
if (w instanceof JQMDialog || w instanceof JQMPage && ((JQMPage) w).isDialog()) {
return true;
}
return isParentDialog(w.getParent());
}
public void onModuleLoad() {
JQMContext.setWidgetDefaults(new WidgetDefaults() {
@Override
public void loaded(Widget w) {
if (w instanceof JQMPage) {
((JQMPage) w).setTheme(primary());
} else if (w instanceof JQMHeader && !isParentDialog(w.getParent())) {
((JQMHeader) w).setTheme("d");
} else if (w instanceof JQMFooter && !isParentDialog(w.getParent())) {
((JQMFooter) w).setTheme("c");
} else if (w instanceof JQMList) {
((JQMList) w).setThemeIfCurrentEmpty(listview());
} else if (w instanceof JQMButton) {
JQMButton btn = (JQMButton) w;
String theme = btn.getTheme();
if (Empty.is(theme)) {
Widget parent = btn.getParent();
if (isParentPageFooter(parent)) btn.setTheme("d");
else if (isParentPageHeader(parent)) btn.setTheme(primary());
}
if (!JQMCommon.hasExplicitCorners(btn.getElement())) {
btn.setCorners(false);
}
} else if (w instanceof ImageLinkButton) {
ImageLinkButton btn = (ImageLinkButton) w;
String theme = btn.getTheme();
if (Empty.is(theme)) {
if (isParentPageFooter(btn.getParent())) btn.setTheme("d");
}
} else if (w instanceof JQMSelect) {
JQMSelect sel = (JQMSelect) w;
sel.setThemeIfCurrentEmpty(primary());
sel.setOverlayTheme("none"); // prevents overlay "gray out" cover
} else if (w instanceof JQMTabs) {
((JQMTabs) w).setHeaderTheme(tabsHeader());
} else if (w instanceof JQMRadioset) {
((JQMRadioset) w).setThemeIfCurrentEmpty(tabsHeader());
} else if (w instanceof JQMCheckset) {
((JQMCheckset) w).setThemeIfCurrentEmpty(tabsHeader());
} else if (w instanceof JQMCheckbox) {
JQMCheckbox cb = (JQMCheckbox) w;
cb.setThemeIfCurrentEmpty(checkbox());
if (!JQMCommon.hasExplicitCorners(cb.getElement())) {
cb.setCorners(false);
}
} else if (w instanceof NumEditor) {
((NumEditor) w).setThemeIfCurrentEmpty(primary());
} else if (w instanceof JQMCalBox) {
JQMCalBox cal = (JQMCalBox) w;
String mainTheme = primary();
cal.setTheme(mainTheme);
cal.setThemeHeader(mainTheme);
cal.setThemeModal(mainTheme);
cal.setThemeDate(mainTheme);
cal.setThemeDateToday(action());
cal.setThemeDatePick(highlight());
cal.setThemeDayHigh(mainTheme);
cal.setThemeDateHigh(mainTheme);
cal.setThemeDateHighAlt(mainTheme);
cal.setThemeDateHighRec(mainTheme);
}
}});
}