Skip to content
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);
            }
        }});
}
Clone this wiki locally