Developing Juzu portlets – Step 3: Building a sexy secret wall

03-Juzu-tutorial-series

Previous steps:
Learn how to develop great Juzu portlets for eXo Platform!
Step 2: viewing and posting secrets

In the previous blog post, we learned how to add some functionality to our application. We can now see a list of secrets and share new ones. It works but it’s ugly… so during this blog post we will focus on the UI of JuZcret.

We are assuming that you have already implemented step 1 and step 2. If not you can still download from GitHub the source code resulting from step 2 to start this step 3.

Introduction

It’s time to think a little bit about the design of the JuZcret application.

We have to display a list of secrets that can be enhanced by an image. To do this, we will create a beautiful secret wall page.

Don’t forget also that we want to add new secrets. We need a new add secret page with a nice form so we can share secrets easily.

During this step you will learn how to incorporate JavaScript and Less files easily in a Juzu application.

Why Less and not only CSS

Because Less is an amazing dynamic style sheet language that we love to use in eXo and the integration with Juzu is so easy that you won’t have any excuses for not using it.

Just declare the style and Juzu will transform it into CSS during compilation.

For newbies, you just need to know that Less extends the CSS language with many interesting features, like variables, mixins, operations and functions. If you want more information, check out the Less website.

Create a mockup

This tutorial will also give you some good practice in developing a nice application. So, before taking the code by storm we will create a UI mockup (and then nicely ask the Design and UI teams for some help, which they always do with a smile ;)).

After hours and hours of thinking, this is what I created with Balsamiq as a mockup for the secret wall:

01-mockup

I gave it to the Design team and after some tricky things on Photoshop this is what they give me:

02-designed

Ok, I yield!

And for free, the add secret page:

03-add-secret

Adding Less

Before using Less, we need to add a dependency to juzu-plugins-less4j in the POM:

The Juzu plugin Less4j will take care of automatically compiling the Less file into a CSS file during the Maven compilation. The only thing that we have to do is to create a new file juzcret.less in the org.juzu.tutorial.assets.styles package and then declare it in package-info.java:

If you want to be more productive and create style sheets that are easily maintainable and extendable, I advise you to use Less. If you don’t want to, then, yes, you can directly use a CSS file in a Juzu application. Add your CSS file to the inorg.juzu.tutorial.assets.styles package and declare it in package-info.java as below:

Notice the @Assets annotation. This annotation is used to declare assets (a style sheet or script) that will be loaded when the portlet is displayed. By setting (“*”) we declare all assets.

Adding jQuery

We will use JavaScript to set the width of the secret boxes randomly on the secret wall. To simplify this task, we will use the jQuery library.

First create a new file secret.js in the org.juzu.tutorial.assets.javascripts package:

04-secret-js

The jQuery library will be simply retrieved from WebJars thanks to the Juzu WebJars plugin. The Juzu WebJars plugin allows us to use an awesome JavaScript library easily (take a look here) in our Juzu project. We just need to add the WebJars dependency to our pom.xml and declare it in package-info.java. This saves us from downloading and cloning the library file and facilitates the management of our JavaScript dependencies.

In our case we want to use jQuery. We just have to add juzu-plugins-webjars and the jQuery WebJars dependency in pom.xml:

Before we use it in our application, we need to declare in package-info.java jQuery WebJars and the two assets, jquery.js and for our app secret.js, using the @Script annotation:

Notice that we declare that secret.js depends on jQuery. This ensures that jQuery is available to secret.js at run time.

Test Less and jQuery

We have now created and declared all the necessary files for implementing step 3.

We will configure the Juzu project with JRebel if it’s not done already and compile it:

We will replace the WAR file in the web app directory of eXo Platform with the new one just created and start the server:

Go to the JuZcret page and you will see exactly the same thing as at the end of step 2:

05-test-less

Note: We are assuming that you have followed steps 1 and 2 and have already created a JuZcret node in Platform. If not, follow step 1 to create the JuZcret node.

Let’s perform a quick test to see if the JRebel hot deployment is working, and test the integration of Less and jQuery also.

Modify secret.js with:

Modify juzcret.less with:

Compile:

When we get a Build Successful message, we will refresh the JuZcret page:

06-build-success

Note: After JRebel reloads our project, it may be possible that our portlet displays an error message instead of the expected screen. If this happens, we must recompile our project using mvn clean compile to refresh the web page. If it persists, we need to restart the server.

jQuery displays a pop-up when the DOM is ready, and then the CSS resulting from our Less file will change the text color for the secrets to red.

Now we are ready to implement a nice UI for our JuZcret application.

The secret wall

Open secretWall.gtmpl template and replace it with the new code below:

Open the juzcret.less file and modify it as below:

Compile:

When we get a Build Successful message, we will refresh the JuZcret page and look at our new secret wall:

07-secret-wall-success

Notice that the title “JuZcret Portlet” in a <h3> tag is displayed in blue on the top left of our application even though we haven’t overridden the default <h3> tag in juzcret.less. This is displayed in blue because the default <h3> tag is overridden in exo-platform.css, as you can see here. When you develop a Juzu portlet for Platform, you can reuse all classes declared in http://exoplatform.github.io/ux-guidelines without needing to declare them beforehand. These classes are available by default for all portlets in Platform.

You can see that we still have the “Juzu rocks” pop-up! Let’s modify the JavaScript to remove this pop-up and set the width of secret boxes randomly.

Open secret.js and modify it as below:

Compile:

When we get a Build Successful message, we will refresh the JuZcret page and look at our new JuZcret wall:

08-JuZcret-wall

Adding secrets

We have to modify also the ugly add secret form. Open the addSecret.gtmpl template and replace it with the new code below:

Notice that we are reusing default Platform UI components like uiBox and uiContentBox.

Open the juzcret.less file and add at the end:

Compile:

When we get a Build Successful message, we will refresh the JuZcret page. Click on the Share my secret button on the top right and take a look at our new add secret form:

09-new-add-secret-form

That’s it! Play with the application and enjoy adding your personal secrets:

10-add-personnal-secret

Here we are! As promised, we have a sexy JuZcret Portlet! And it’s not yet finished… in the next blog post, we will add a new social feature using Ajax.

The final source of step 3 is available for downloading from GitHub.

Previous and next steps:
Learn how to develop great Juzu portlets for eXo Platform!
Step 2: viewing and posting secrets
Step 3: Building a sexy secret wall
Step 4: adding Likes and Comments for Secret
Step 5: Saving Secrets in the JCR
Step 6: Let the whole world create new secrets
Step 7: Finishing the job properly with unit test

Thanks a lot to the Design and UI teams for their contribution 😉

Join the eXo tribe by registering for the community and get updates, tutorials, support, and access to the Platform and add-on downloads!

Make the most out of eXo Platform 4

Register to the next webinar and get a complete overview of what you can do with eXo Platform 4. Reserve your seat now!

Be part of the discussion, share your comments

comments