Some time ago Sencha company included new theme in their GXT library. It\u2019s called SLATE and can be viewed in GXT Explorer demo on this site: http:\/\/www.sencha.com\/examples\/explorer.html. I\u2019ve been searching, but I coudn\u2019t find any clear information in web, how to made my gwt app to change theme to new skin instead of standard BLUE or GREY themes. After short investigating I realized, that everything is easy, but only if You keep standard paths in Your app to css\/images.<\/p>\n
<\/p>\n
First of all You have to copy to Your\u2019s project directory some directories from GXT example zip file (can be downloaded here: http:\/\/www.sencha.com\/products\/gwt\/download.php). Those directories are: css (with BLUE\/GREY theme\u2019s csses), images (all gxt standard images) and themes (new SLATE theme). They can be found in resource directory in gxt-x.x.x zip file.<\/p>\n
Now, after copying directories to own app in gwt html entry point file it has to be placed following line: \u00a0 < link rel=\u201dstylesheet\u201d type=\u201dtext\/css\u201d href=\u201dcss\/gxt-all.css\u201d \/&rt; \u00a0 That\u2019s all. Nothing more gxt\u2019s csses have to be included (instead of what I\u2019ve found on internet). Why ? Becouse we will switch theme in java code later. In apps entry point java file in onModuleLoad() method we need to insert some code. We want to tell GXT, that we will be using SLATE theme as default, but we would like to change it later. This is made by passing \u2018false\u2019 parameter in .setDefaultTheme(..) method. Code for this: \u00a0 ThemeManager.register(Slate.SLATE); \/\/register non standard theme \/\/ Theme.GRAY.set(\u201cfile\u201d,\u201dcss\/gxt-gray.css\u201d); \/\/set custom css\u2019es path for grey theme \/\/ Theme.BLUE.set(\u201cfile\u201d,\u201dcss\/gxt-all.css\u201d); \/\/set custom css\u2019es path for standard blue theme \/\/ Slate.SLATE.set(\u201cfile\u201d,\u201dgxt\/themes\/slate\/css\/xtheme-slate.css\u201d); \/\/set custom path for SLATE theme GXT.setDefaultTheme(Slate.SLATE, false); \/\/set default theme to new SLATE skin<\/p>\n
That\u2019s not all. If we would like to rearange our paths (i.e. by moving themes\/images\/css directories in other places) we have to uncoment commented code and set proper paths.<\/p>\n
Because we would like to allow user to switch theme by own. We have to add somewhere in our app\u2019s panels ThemeSelector which will do all work. It\u2019s very easy. Just add somewhere this code:<\/p>\n
\u00a0 [ourContainer].add(new ThemeSelector());<\/p>\n","protected":false},"excerpt":{"rendered":"Some time ago Sencha company included new theme in their GXT library. It\u2019s called SLATE and can be…\n","protected":false},"author":16,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[71,28,68,176],"class_list":{"0":"post-349","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-development-design","7":"tag-frontend","8":"tag-gwt","9":"tag-java","10":"tag-javascript"},"_links":{"self":[{"href":"https:\/\/touk.pl\/blog\/wp-json\/wp\/v2\/posts\/349","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/touk.pl\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/touk.pl\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/touk.pl\/blog\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/touk.pl\/blog\/wp-json\/wp\/v2\/comments?post=349"}],"version-history":[{"count":19,"href":"https:\/\/touk.pl\/blog\/wp-json\/wp\/v2\/posts\/349\/revisions"}],"predecessor-version":[{"id":15359,"href":"https:\/\/touk.pl\/blog\/wp-json\/wp\/v2\/posts\/349\/revisions\/15359"}],"wp:attachment":[{"href":"https:\/\/touk.pl\/blog\/wp-json\/wp\/v2\/media?parent=349"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/touk.pl\/blog\/wp-json\/wp\/v2\/categories?post=349"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/touk.pl\/blog\/wp-json\/wp\/v2\/tags?post=349"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}