Quantcast
Channel: Pedro Alves on Business Intelligence
Viewing all articles
Browse latest Browse all 186

Ctools Dashboard development in 5.0 - Using your favorite editor for js / css files

$
0
0

5.0 came with a new paradigm for the file repository. No longer we have a file representation of the content of the JCR.

Imagine we're developing a Pentaho Ctools dashboard. We have an external resource for the CSS or the Javascript that we're tweaking. CDE has a very good editor, but sometimes people would like to keep using a specific one. I personally bounce between vi and netbeans.

And let's face it - Edit, upload, test is not the most practical way of doing things.

Pentaho Repository Synchronizer gives a huge help, but running it every time we change a css file is also not optimal.

So I use a small trick. Follow this steps:

1. Have an alias for python SimpleHTTPServer module

I have set this alias on my system. I'm a linux user, but this should be relatively easy to do regardless of the operating system

alias webserver-current-dir='python -m SimpleHTTPServer'

2. Start  a webserver in the resources directory

My project files are stored in 
project-client-solution/repositorySynchronizer/public/Client/files, and under that I have the js/, css/, etc directories. So I simply go to that file and launch the alias I defined previously. I should now be able to point the browser to http://127.0.0.1:8000/js/client.js . 8000 is the default port for that python module

3. Edit the CDE template to add the js and css files

There are a couple of ways to do this. Adding that previous link to the dashboard (through an external resource) is a way. But I'm always afraid that in the end I forget to remove it or switch it back. So I added it directly to system/pentaho-cdf-dd/resources/styles/Clean.html (the default cde template I'm using)


<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script language="javascript" type="text/javascript" src="http://127.0.0.1:8000/js/client.js"></script>
@HEADER@
</head>
<body>

@CONTENT@

@FOOTER@

<link rel="stylesheet" type="text/css" href="http://127.0.0.1:8000/css/client.css" />
</body>
</html>

 

4. Done


Now if you just point and editor to the filesystem, a simple save and reload will make it work!

Viewing all articles
Browse latest Browse all 186