« Themes に戻る

Fast Theme Development

Overview2 #

As a theme developer, you might find it time consuming to continuously have to compile (jar) and deploy your theme plugin during development. The following describes a methodology that can be used to assist a theme developer from having to continuously compile and deploy to the server as you refine things like CSS, JavaScript, Theme Images with this simple trick.

Currently this trick is only easily available using Liferay 5.2 and for a logged in user. Variants for any version are certainly imaginable once you understand how this works.

Instructions #

Step 1 : Create a custom attribute for your user #

Go to the control panel, and add a new custom attribute to your user. In this example I'll use a variable named "AlternatePath". As the value for "AlternatePath" set it to the patch to your local _diffs (or base directory depending upon which is relevant to you) of your theme plugin. For myself, on Mac OS, I use:

file:///Users/jklo/Documents/source/liferay-plugins/themes/my-theme/docroot/_diffs

Linux/Unix users will have a very similar file reference. Windows users will differ slightly as it will need to reference a drive letter in the path. The easiest way to get the right path, use your web browser to open a file locally within the _diffs directory. The URL in your browser should use the correct file:// syntax.

Step 2 : Modify the init_custom.vm to reference the variable you just set #

You can copy and paste the code below into your init_custom.vm. Then compile and deploy your theme plugin. What it does is get the value of the AlternatePath variable we set above, and if it exists and is not empty, it disables theme caching, and then modifies the $imagePath, $javaPath, $cssPath, and $css_main_file variables so that they reference the location on your local computer, instead of the ones within the deployed theme.

#set ($altPath = $user.getExpandoBridge().getAttribute('AlternatePath'))
#if ($altPath && $altPath != "")
	#set ($ignore = $theme_display.setThemeCssFastLoad(false))
	#set ($ignore = $theme_display.setThemeImagesFastLoad(false))
	#set ($ignore = $theme_display.setThemeJsBarebone(false))
	#set ($ignore = $theme_display.setThemeJsFastLoad(false))
	
	#set ($imagePath = $theme_display.setPathThemeImage("$altPath/images"))
	#set ($javaPath = $theme_display.setPathThemeJavascript("$altPath/javascript"))
	
	#set ($cssPath = $theme_display.setPathThemeCss("$altPath/css"))
	#set ($css_main_file = $htmlUtil.escape($portalUtil.getStaticResourceURL($request, "$altPath/main.css")))
#end

You should now be able to make modifications to files within your local images, javascript, css, and main.css and the changes become instantly viewable within the portal only to yourself. Once you are satisfied with your changes you can compile and deploy your theme, and then clear the value of the AlternatePath variable you set.

0 添付ファイル
46242 参照数
平均 (2 投票)
平均評価は4.5星中の5です。
コメント
コメント 作成者 日時
Neat trick. Thanks for sharing. I haven't tried... Olaf Kock 2009/09/28 2:34
I've not tried it against the "Same Origin... Jim Klo 2009/09/28 18:58
In MS Windwos beware the Mozilla Firefox... Joosep Simm 2010/02/22 23:06
I can't get it to work with the 6.x release of... Aaron Harshbarger 2010/06/24 2:48
Our shop can't get it to work either on 6.0.... James Collings 2011/02/10 9:27
The only real criticism I've received from... Stian Sigvartsen 2011/12/11 9:23
Stian, for the redeployment issue, check out... Bijan Vakili 2012/09/11 20:54

Neat trick. Thanks for sharing. I haven't tried this yet - does it work with the Javascript "Same Origin Policy" or would we run into problems there? Or would this only apply if JS would contain some Ajax-code that tries to connect back to the server?

As the majority of theme-work I do is CSS, this is very useful even if JS was limited...
投稿日時:09/09/28 2:34
I've not tried it against the "Same Origin Policy", as we're actually using 2 domains for this - so not sure. Most of our JavaScript is all JSONP thus it gets around that limitation. If your'e working against a development portal. I would think you'd be okay to change settings in browsers and such to workaround those issues (being sure to change those back on a production environment).

Our team here has been extremely happy with this method - you can use tools like Dreamweaver to make CSS edits - and see your results without going through the deployment hassle. We can have 4-5 individuals making changes to different parts of the theme plugin without conflicting with each other until they commit on SVN.
Olaf Kockへのコメント。投稿日時:09/09/28 18:58
In MS Windwos beware the Mozilla Firefox browser as the file:///.... url doesn't work there. It works ok with IE though.
Jim Kloへのコメント。投稿日時:10/02/22 23:06
I can't get it to work with the 6.x release of Liferay. It's like the parent CSS files aren't getting loaded...it's just taking my custom.css as the only CSS files to be applied. Any suggestions? I know it's referencing my custom.css file because any changes I do make get applied immediately. It's just the origial base.css, forms.css, navigation.css, etc files don't seem to get loaded.
投稿日時:10/06/24 2:48
Our shop can't get it to work either on 6.0. Sure could use an update on how to do this, if it is still possible..
Aaron Harshbargerへのコメント。投稿日時:11/02/10 9:27
The only real criticism I've received from those who have been evaluating Liferay for general use at our company has been related to the fact that you have to continuously compile and deploy themes to test them whereas other products like Wordpress appear to cater for this via web user interface. So I would be very interested in hearing if this elegant solution to this "problem" can work in Liferay 6.x too
James Collingsへのコメント。投稿日時:11/12/11 9:23
Stian, for the redeployment issue, check out JRebel http://zeroturnaround.com/jrebel/using-jrebel-with-liferay-neil-griffins-approac­h/
Stian Sigvartsenへのコメント。投稿日時:12/09/11 20:54