Styling Mendix Apps in Eclipse (using Rake and Compass for an improved workflow)

Part 2 of 3: More efficient workflow

Intro

In part 1 we learnt how to set up your Mendix development environment with Eclipse to use SASS to change the theme of your applications. If you're not comfortable using SASS in your projects or want a refresher, I would suggest you head over there now before continuing with this tutorial.

The basic workflow looks like this when you do styling:

It doesn't take you long to realize that this is not a very efficient approach, and let's face it you don't want to spend all your time doing CSS when you could be building out rad features.

In this post I will show my super efficient method that increases my speed of development marginally and makes my colleagues want to do all their styling for them (just a joking guys, I love helping you out).

The trick I'm going to show you will allow you to see live changes to your styles as they happen. Essentially we're going to eliminate the tedious workflow described above so that you can focus on getting the styling done without having to redeploy the application every time to see your changes.

Let's get to it!

Step 1: Create Project and Eclipse Setup

1. Create a new project (I'm calling it rikus-dev-SassTutorial2 and saving under C:\mendix\rikus-dev-SassTutorial2) and choose the Lab theme.
2. Add the project in Eclipse as described in part 1.

Observe the file structure in C:\mendix\rikus-dev-SassTutorial2. This is the boilerplate code that comes with any project. The folders are self-explanatory. I want to draw your attention to a folder that is not there but that will be generated at run-time: the deployment folder.

Step 2: Run the Project Locally

1. Click "Run Locally" in the modeler.

In the Windows explorer go to C:\mendix\rikus-dev-SassTutorial2. You will see a deployment folder that was created when you deployed the application. Note that the CSS files in this folder is replaced with the files from the theme folder when deploying.

Step 3: SASS Setup Updates

Our goal now is to automatically update the deployment folder with the latest compiled CSS files without having to redeploy the application from the Mendix modeler every time. There are several methods to achieve this and I will briefly touch on each. Ultimately I'll show you the most effective way (luckily, it's not much work to set it up).

Our options are:

• Manually copy the CSS files to the deployment folder each time in Windows Explorer. This is bad because it will slow you down even more.
• Let compass output directly to the deployment folder. This could work, but the drawback is that you have to remember to let compass write to the themes folder before you redeploy your application.
• Duplicate config.rb to output to both the theme and deployment folder. I've actually used this approach before and it wasn't that bad, but must run compass watch twice and it gets confusing which config.rb file does what.
• Use rake to take care of this.

Option D is without a doubt the simplest and most streamlined approach, and super easy to set up. Here are the steps:

1. In Eclipse right-click your theme folder, click New > File.
2. Enter rakefile.rb for the File name and click Finish.
3. Open rakefile.rb (right-click the file > Open With > Text Editor).
4. Paste the following code:

namespace :mendix do
  desc 'Watches stylesheets to compile changes to deployment folder'
  task :watch_deployment do
    puts 'Compass watch to copy stylesheets to deployment folder...'
    system 'compass watch --sass-dir styles/sass --css-dir ../deployment/web/styles/css'
  end

  desc 'Watches stylesheets to compile changes to theme folder...'
  task :watch_theme do
    puts 'Compass watch to copy stylesheets to theme folder...'
     system 'compass watch --sass-dir styles/sass --css-dir styles/css'
  end

  desc 'Watches stylesheets to compile changes to deployment and theme folder'
  multitask watch_all: ['mendix:watch_deployment', 'mendix:watch_theme'] do
    puts 'watching all...'
  end
end

That's it! The setup is done. Now let's give it a try.

Step 4: Seeing it in Action

1. In the Mendix Modeler deploy your application locally and view it in the Web Browser. This is what I'm seeing:
2. In Eclipse right-click the theme folder > Show In > Terminal.
3. Type rake mendix:watch_all and you should see something like this:
4. Open the file _pageheader.scss, press ctrl + f and search for .pageheader-title. Add the following style between the braces: color: blue;. Press ctrl + s to save (or click the Save icon). In the terminal you will see the compiled CSS files will be written to both the deployment and theme folder.
5. Now go back to the web browser and refresh the page. Your title will now be blue:

I've been using this approach for a quite some time now and it is by far the quickest way to do styling in Mendix.

Conclusion

In this post we looked at improving the process of doing styling in Mendix by using Eclipse. Whenever a change is made to one of the SASS files, they are immediately observable in the web browser with a simple refresh. This eliminates the need to redeploy the Mendix app locally each time to view the style changes.

Remember to subscribe to my blog, follow me on Twitter and check out my posts on Instagram!

Resources

• http://compass-style.org/help/documentation/configuration-reference/
• https://mxforum.mendix.com//questions/8834/Difference-between-CSS-in-theme-and-deployment-folder
• http://stackoverflow.com/questions/16860890/compass-with-multiple-input-output-folders