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.

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:

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

Ok, I yield!

And for free, the add secret page:

Adding Less

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

1

2

3

4

5

<dependency>

<groupId>org.juzu</groupId>

<artifactId>juzu-plugins-less4j</artifactId>

<version>1.0.0-cr1</version>

</dependency>

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:

1

2

@Less(@Stylesheet("styles/juzcret.less"))

@Assets("*")

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:

1

@Stylesheets({@Stylesheet(value="styles/my.css")})

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:

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:

1

2

3

4

5

6

7

8

9

10

<dependency>

<groupId>org.juzu</groupId>

<artifactId>juzu-plugins-webjars</artifactId>

<version>1.0.0-cr1</version>

</dependency>

<dependency>

<groupId>org.webjars</groupId>

<artifactId>jquery</artifactId>

<version>1.10.2</version>

</dependency>

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:

1

2

3

4

5

6

7

8

@WebJars(@WebJar("jquery"))

@Scripts(

{

@Script(id="jquery",value="jquery/1.10.2/jquery.js"),

@Script(value="javascripts/secret.js",depends="jquery")

}

)

@Assets("*")

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.

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:

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

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:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

(function($){

$(document).ready(function(){

//Var to know the number of image in the line

varcounterImg=0;

//Var to know the place taken by previous image in the line

vartotalWidthLine=0;

functiongetRangeRandom(min,max){

returnMath.ceil(Math.random()*(max-min)+min);

}

functionrandSecretBoxWidth(){

varrandBoxNum=getRangeRandom(23,43);

//Test if we are on th third image of the line

if(counterImg>=2){

//The third image of the line fill all the remaining place

randBoxNum=100-totalWidthLine;

//counter place taken by previous image in the line set to 0

counterImg=0;

totalWidthLine=0;

}

else{

//Increase counter and the place taken by previous image in the line

counterImg++;

totalWidthLine+=randBoxNum;

}

//Return the width of the secret box

returnrandBoxNum;

}

//Get all secrets boxes

$('.secret').each(function(idx,listItem){

//Set a random width

listItem.style.width=randSecretBoxWidth()+"%";

});

});

})($);

Compile:

1

$mvn clean compile

When we get a Build Successful message, we will refresh the JuZcret page and look at our new 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: