« Volver a Themes

Fast Theme Development

Etiquetas: themes liferay v5.2

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 archivos adjuntos
46231 Accesos
Promedio (2 Votos)
La valoración media es de 4.5 estrellas de 5.
Comentarios
Respuestas anidadas Autor Fecha
Neat trick. Thanks for sharing. I haven't tried... Olaf Kock 28 de septiembre de 2009 2:34
I've not tried it against the "Same Origin... Jim Klo 28 de septiembre de 2009 18:58
In MS Windwos beware the Mozilla Firefox... Joosep Simm 22 de febrero de 2010 23:06
I can't get it to work with the 6.x release of... Aaron Harshbarger 24 de junio de 2010 2:48
Our shop can't get it to work either on 6.0.... James Collings 10 de febrero de 2011 9:27
The only real criticism I've received from... Stian Sigvartsen 11 de diciembre de 2011 9:23
Stian, for the redeployment issue, check out... Bijan Vakili 11 de septiembre de 2012 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...
Publicado el día 28/09/09 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.
Publicado el día 28/09/09 18:58 en respuesta a Olaf Kock.
In MS Windwos beware the Mozilla Firefox browser as the file:///.... url doesn't work there. It works ok with IE though.
Publicado el día 22/02/10 23:06 en respuesta a Jim Klo.
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.
Publicado el día 24/06/10 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..
Publicado el día 10/02/11 9:27 en respuesta a Aaron Harshbarger.
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
Publicado el día 11/12/11 9:23 en respuesta a James Collings.
Stian, for the redeployment issue, check out JRebel http://zeroturnaround.com/jrebel/using-jrebel-with-liferay-neil-griffins-approac­h/
Publicado el día 11/09/12 20:54 en respuesta a Stian Sigvartsen.