{"id":7950,"date":"2014-11-25T05:55:06","date_gmt":"2014-11-25T13:55:06","guid":{"rendered":"http:\/\/localhost\/exoblog\/?p=7950"},"modified":"2023-06-05T16:49:43","modified_gmt":"2023-06-05T14:49:43","slug":"developing-juzu-portlets-step-3-building-a-sexy-secret-wall","status":"publish","type":"post","link":"https:\/\/www.exoplatform.com\/blog\/developing-juzu-portlets-step-3-building-a-sexy-secret-wall\/","title":{"rendered":"Developing Juzu portlets \u2013 Step 3: Building a sexy secret wall"},"content":{"rendered":"

\"03-Juzu-tutorial-series\"<\/a><\/p>\n

Previous steps:
\n– Learn how to develop great Juzu portlets for eXo Platform!<\/a>
\n– Step 2: viewing and posting secrets<\/a>
\n<\/em><\/p>\n

In the previous blog post<\/a>, 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\u2019s ugly… so during this blog post we will focus on the UI of JuZcret<\/strong>.<\/p>\n

We are assuming that you have already implemented step 1<\/a> and step 2<\/a>. If not you can still download from GitHub the source code resulting from step 2<\/a> to start this step 3.<\/em><\/p>\n

Introduction<\/h2>\n

It\u2019s time to think a little bit about the design<\/strong> of the JuZcret application<\/strong>.<\/p>\n

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<\/strong>.<\/p>\n

Don\u2019t 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<\/strong>.<\/p>\n

During this step you will learn how to incorporate JavaScript<\/strong> and Less<\/strong> files easily in a Juzu application<\/strong>.
\n<\/p>\n

Why Less and not only CSS<\/h3>\n

Because Less is an amazing dynamic style sheet language<\/strong> that we love to use in eXo and the integration with Juzu<\/strong> is so easy<\/strong> that you won\u2019t have any excuses for not using it.<\/p>\n

Just declare the style and Juzu<\/strong> will transform it into CSS<\/strong> during compilation.<\/p>\n

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

Create a mockup<\/h2>\n

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

After hours and hours of thinking, this is what I created with Balsamiq as a mockup for the secret wall<\/strong>:<\/p>\n

\"01-mockup\"<\/a><\/p>\n

I gave it to the Design team<\/strong> and after some tricky things<\/strong> on Photoshop this is what they give me:<\/p>\n

\"02-designed\"<\/a><\/p>\n

Ok, I yield!<\/p>\n

And for free, the add secret page:<\/p>\n

\"03-add-secret\"<\/a><\/p>\n

Adding Less<\/h2>\n

Before using Less, we need to add a dependency to juzu-plugins-less4j<\/span><\/strong> in the POM:<\/p>\n

<dependency>\n\t<groupId>org.juzu<\/groupId>\n\t<artifactId>juzu-plugins-less4j<\/artifactId>\n\t<version>1.0.0-cr1<\/version>\n<\/dependency><\/pre>\n
The Juzu plugin Less4j<\/strong> will take care of automatically compiling<\/strong> the Less file into a CSS<\/strong> file during the Maven compilation. The only thing that we have to do is to create a new file juzcret.less<\/span> in the org.juzu.tutorial.assets.styles<\/span> package and then declare it in package-info.java<\/span>:<\/p>\n
@Less(@Stylesheet(\"styles\/juzcret.less\"))\n@Assets(\"*\")<\/pre>\n
If you want to be more productive<\/strong> and create style sheets that are easily maintainable<\/strong> and extendable<\/strong>, I advise you to use Less<\/strong>. If you don\u2019t 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<\/span> package and declare it in package-info.java<\/span> as below:<\/p>\n
@Stylesheets({@Stylesheet(value = \"styles\/my.css\")})<\/pre>\n
Notice the @Assets annotation. This annotation is used to declare assets<\/strong> (a style sheet or script) that will be loaded when the portlet is displayed. By setting (“*”) we declare all assets.<\/p>\n
Adding jQuery<\/h2>\n
We will use JavaScript<\/strong> to set the width of the secret boxes randomly on the secret wall. To simplify this task, we will use the jQuery library<\/strong>.<\/p>\n
First create a new file secret.js<\/span> in the org.juzu.tutorial.assets.javascripts<\/span> package:<\/p>\n
\"04-secret-js\"<\/a><\/p>\n
The jQuery library<\/strong> will be simply retrieved from WebJars<\/strong> thanks to the Juzu WebJars plugin<\/strong>. The Juzu WebJars plugin allows us to use an awesome JavaScript library<\/strong> easily (take a look here<\/a>) in our Juzu project. We just need to add the WebJars dependency to our pom.xml<\/span> and declare it in package-info.java<\/span>. This saves us from downloading and cloning the library file and facilitates the management of our JavaScript dependencies<\/strong>.<\/p>\n
In our case we want to use jQuery. We just have to add juzu-plugins-webjars<\/span> and the jQuery WebJars dependency in pom.xml<\/span>:<\/p>\n
<dependency>\n\t<groupId>org.juzu<\/groupId>\n\t<artifactId>juzu-plugins-webjars<\/artifactId>\n\t<version>1.0.0-cr1<\/version>\n<\/dependency>\n<dependency>\n\t<groupId>org.webjars<\/groupId>\n\t<artifactId>jquery<\/artifactId>\n\t<version>1.10.2<\/version>\n<\/dependency><\/pre>\n
Before we use it in our application, we need to declare<\/strong> in package-info.java jQuery WebJars<\/strong> and the two assets, jquery.js<\/span> and for our app secret.js<\/span>, using the @Script<\/strong> annotation:<\/p>\n
@WebJars(@WebJar(\"jquery\"))\n@Scripts(\n\t{\n\t\t@Script(id = \"jquery\", value = \"jquery\/1.10.2\/jquery.js\"),\n\t\t@Script(value = \"javascripts\/secret.js\", depends = \"jquery\")\n\t}\n)\n@Assets(\"*\")<\/pre>\n
Notice that we declare that secret.js<\/span> depends on jQuery. This ensures that jQuery is available<\/strong> to secret.js<\/span> at run time<\/strong>.<\/p>\n
Test Less and jQuery<\/h2>\n
We have now created and declared all the necessary files for implementing step 3.<\/p>\n
We will configure the Juzu project with JRebel<\/a> if it\u2019s not done already and compile it:<\/p>\n
$ mvn clean install<\/pre>\n
We will replace the WAR file in the web app directory of eXo Platform with the new one just created and start the server<\/strong>:<\/p>\n
$ .\/start_eXo.sh --dev<\/pre>\n
Go to the JuZcret page and you will see exactly the same thing as at the end of step 2:<\/p>\n
\"05-test-less\"<\/a><\/p>\n
Note: We are assuming that you have followed steps 1 and 2<\/strong> and have already created a JuZcret node in Platform. If not, follow step 1 to create the JuZcret node.<\/em><\/p>\n
Let\u2019s perform a quick test to see if the JRebel<\/strong> hot deployment is working, and test the integration of Less<\/strong> and jQuery<\/strong> also.<\/p>\n
Modify secret.js<\/span> with:<\/p>\n
(function ($) {\n\n\t$(document).ready(function () {\n\t\twindow.alert(\"Juzu rocks !\");\n\t});\n\n})($);<\/pre>\n
Modify juzcret.less<\/span> with:<\/p>\n
\/\/ Variables\n\/\/====================\n@textColor: red;\n\n\/\/ Common Style\n\/\/====================\n.secret-wall-list {\n\tcolor: @textColor;\n}<\/pre>\n
Compile:<\/p>\n
$ mvn clean compile<\/pre>\n
When we get a Build Successful message, we will refresh the JuZcret page:<\/p>\n
\"06-build-success\"<\/a><\/p>\n
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.<\/em><\/p>\n
jQuery displays a pop-up<\/strong> when the DOM is ready, and then the CSS resulting from our Less file will change the text color<\/strong> for the secrets to red.<\/p>\n
Now we are ready to implement a nice UI<\/strong> for our JuZcret<\/strong> application.<\/p>\n
The secret wall<\/h2>\n
Open secretWall.gtmpl<\/span> template and replace it with the new code below:<\/p>\n
#{param name=secretsList\/}\n\n<div class=\"secret-wall-container\">\n\t<div class=\"secret-wall-heading\">\n\t\t<div class=\"row-fluid\">\n\t\t\t<div class=\"span6\">\n\t\t\t\t<h3 class=\"title\">JuZcret Portlet<\/h3>\n\t\t\t<\/div>\n\n\t\t\t<div class=\"span6 text-right\">\n\t\t\t\t<a class=\"btn btn-primary\" href=\"@{JuZcretApplication.addSecretForm()}\" role=\"button\">Share my secret<\/a>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n\t<ul class=\"secret-wall-list clearfix\">\n\t\t<% secretsList.each { secret -> %>\n\t\t\t<li>\n\t\t\t\t<div class=\"secret-image\" style=\"background-image: url('${secret.imageURL}')\">\n\t\t\t\t\t<div class=\"secret-mesage\">${secret.message}<\/div>\n\t\t\t\t<\/div>\n\t\t\t<\/li>\n\t\t<% } %>\n\t<\/ul>\n<\/div><\/pre>\n
Open the juzcret.less<\/span> file and modify it as below:<\/p>\n
\/\/ Variables\n\/\/====================\n@heightSecretItem: 238px;\n@secretItemGutter: 6px;\n\n\/\/ Mixins\n\/\/====================\n\n\/\/ Opacity\n.opacity(@opacity) {\n\topacity: @opacity;\n\t\/\/ IE8 filter\n\t@opacity-ie: (@opacity * 100);\n\tfilter: ~\"alpha(opacity=@{opacity-ie})\";\n}\n\n\/\/ Common Style\n\/\/====================\n\n\/\/ Secret Wall\n.secret-wall-container {\n\tpadding: 20px 30px;\n\t.btn-primary {\n\tpadding-right: 20px;\n\tpadding-left: 20px;\n\t}\n}\n.secret-wall-container, .secret-wall-container * {\n\t-webkit-box-sizing: border-box;\n\t-moz-box-sizing: border-box;\n\tbox-sizing: border-box;\n}\n.secret-wall-heading {\n\tmargin-bottom: 10px;\n\t.btn {\n\tmargin-top: 6px;\n  }\n}\n.secret-wall-list {\n\tmargin: 0 -@secretItemGutter;\n\t> li {\n\tfloat: left;\n\tpadding: @secretItemGutter;\n\twidth: 100% \/ 3;\n\t.secret-image {\n\t\tbackground-repeat: no-repeat;\n\t\tbackground-size: cover;\n\t\tbackground-color: #000;\n\t\tposition: relative;\n\t\theight: @heightSecretItem;\n\t\twidth: 100%;\n\t\tdisplay: block;\n\t\t&:before {\n\t\t\tbackground: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);\n\t\t\tcontent: \"\";\n\t\t\tdisplay: block;\n\t\t\theight: 100%;\n\t\t\tposition: absolute;\n\t\t\twidth: 100%;\n\t\t}\n\t}\n\t.secret-mesage {\n\t\tbottom: 65px;\n\t\tcolor: #fff;\n\t\tfont-size: 20px;\n\t\tfont-weight: normal;\n\t\tleft: 25px;\n\t\tline-height: 24px;\n\t\tposition: absolute;\n\t\tright: 25px;\n\t\ttext-align: center;\n\t\ttop: 25px;\n\t}\n\t&:nth-child(3n+3) {\n\t\t.popover{\n\t\t\tright: -1px;\n\t\t.arrow {\n\t\t\tleft: auto;\n\t\t\tright: 34px;\n\t\t}\n      }\n    }\n  }\n}<\/pre>\n
Compile:<\/p>\n
$ mvn clean compile<\/pre>\n
When we get a Build Successful message, we will refresh the JuZcret page and look at our new secret wall<\/strong>:<\/p>\n
\"07-secret-wall-success\"<\/a><\/p>\n
Notice that the title \u201cJuZcret Portlet<\/strong>\u201d in a <h3> tag is displayed in blue on the top left of our application even though we haven\u2019t overridden the default <h3> tag in juzcret.less<\/span>. This is displayed in blue because the default <h3> tag is overridden in exo-platform.css<\/span>, as you can see here<\/a>. When you develop a Juzu portlet for Platform<\/strong>, you can reuse all classes<\/strong> declared in https:\/\/github.com\/exoplatform\/ux-guidelines<\/a> without needing to declare them beforehand. These classes are available by default for all portlets in Platform<\/strong>.<\/p>\n
You can see that we still have the \u201cJuzu rocks<\/strong>\u201d pop-up! Let\u2019s modify the JavaScript<\/strong> to remove this pop-up and set the width of secret boxes randomly<\/strong>.<\/p>\n
Open secret.js<\/span> and modify it as below:<\/p>\n
(function ($) {\n\n  $(document).ready(function () {\n\n        \/\/Var to know the number of image in the line\n        var counterImg = 0;\n        \/\/Var to know the place taken by previous image in the line\n        var totalWidthLine = 0;\n\n        function getRangeRandom(min, max) {\n            return Math.ceil(Math.random() * (max - min) + min);\n        }\n\n        function randSecretBoxWidth() {\n            var randBoxNum = getRangeRandom(23, 43);\n            \/\/Test if we are on th third image of the line\n            if (counterImg >= 2) {\n                \/\/The third image of the line fill all the remaining place\n                randBoxNum = 100 - totalWidthLine;\n                \/\/counter place taken by previous image in the line set to 0\n                counterImg = 0;\n                totalWidthLine = 0;\n            }\n            else {\n                \/\/Increase counter and the place taken by previous image in the line\n                counterImg++;\n                totalWidthLine += randBoxNum;\n            }\n            \/\/Return the width of the secret box\n            return randBoxNum;\n        }\n\n        \/\/Get all secrets boxes\n        $('.secret').each(function(idx, listItem) {\n          \/\/Set a random width\n          listItem.style.width = randSecretBoxWidth() + \"%\";          \n        });\n    });\n\n})($);<\/pre>\n
Compile:<\/p>\n
$ mvn clean compile<\/pre>\n
When we get a Build Successful message, we will refresh the JuZcret page and look at our new JuZcret wall:<\/p>\n
\"08-JuZcret-wall\"<\/a><\/p>\n
Adding secrets<\/h2>\n
We have to modify<\/strong> also the ugly add secret form<\/strong>. Open the addSecret.gtmpl<\/span> template and replace it with the new code below:<\/p>\n
<div class=\"secret-wall-container\">\n\t<div class=\"secret-wall-heading\">\n\t\t<div class=\"row-fluid\">\n\t\t\t<div class=\"span6\">\n\t\t\t\t<h3 class=\"title\">JuZcret Portlet<\/h3>\n\t\t\t<\/div>\n\t\t\t<div class=\"span6 text-right\">\n\t\t\t\t<a class=\"btn btn-primary\" href=\"@{JuZcretApplication.index()}\" role=\"button\">Secret Wall<\/a>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n\t<div class=\"text-center\">\n\t\t<div class=\"uiBox share-secret-box\">\n\t\t\t<h4 class=\"title\">Share my secret<\/h4>\n\t\t\t<div class=\"uiContentBox\">\n\t\t\t\t<form class=\"share-secret-form\" action=\"@{JuZcretApplication.addSecret()}\" method=\"POST\" role=\"form\">\n\t\t\t\t\t<div class=\"control-group\">\n\t\t\t\t\t\t<label class=\"control-label\" for=\"mySecret\">My secret:<\/label>\n\t\t\t\t\t\t<div class=\"controls\">\n\t\t\t\t\t\t\t<textarea id=\"mySecret\" rows=\"3\" name=\"msg\" placeholder=\"Write your secret here\"><\/textarea>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t<div class=\"control-group\">\n\t\t\t\t\t\t<label class=\"control-label\" for=\"secrImgUrl\">Image URL:<\/label>\n\t\t\t\t\t\t<div class=\"controls\">\n\t\t\t\t\t\t\t<input type=\"text\" id=\"secrImgUrl\" name=\"imgURL\" placeholder=\"\">\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t<div class=\"control-group mgB0\">\n\t\t\t\t\t\t<div class=\"controls text-center\">\n\t\t\t\t\t\t\t<button type=\"submit\" class=\"btn btn-primary\">Share<\/button>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/form>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/div><\/pre>\n
Notice that we are reusing default Platform UI components like uiBox<\/strong> and uiContentBox<\/strong>.<\/p>\n
Open the juzcret.less<\/span> file and add at the end:<\/p>\n
\/\/ Add Secret\n\n.share-secret-form {\n\t.form-title {\n\t\tmargin: 0 0 10px;\n\t\ttext-shadow: none;\n\t}\n\ttextarea {\n\t\tmin-width: 271px;\n\t\tmax-width: 271px;\n\t\tmax-height: 300px;\n\t\tmargin-bottom: 10px;\n\t\tmin-height: 80px;\n\t}\n\ttextarea, input {\n\t\tmargin-bottom: 5px;\n\t}\n}\n\n.share-secret-box {\n\tdisplay: inline-block;\n\ttext-align: left;\n\tmargin-top: 20px;\n\t.title {\n\t\ttext-align: center;\n\t}\n\t.btn {\n\t\tmin-width: 78px;\n\t}\n}<\/pre>\n
Compile:<\/p>\n
$ mvn clean compile<\/pre>\n
When we get a Build Successful message, we will refresh the JuZcret page. Click on the Share my secret<\/strong> button on the top right and take a look at our new add secret form<\/strong>:<\/p>\n
\"09-new-add-secret-form\"<\/a><\/p>\n
That\u2019s it! Play with the application and enjoy adding your personal secrets<\/strong>:<\/p>\n
\"10-add-personnal-secret\"<\/a><\/p>\n
Here we are! As promised, we have a sexy JuZcret Portlet<\/strong>! And it\u2019s not yet finished… in the next blog post, we will add a new social feature using Ajax.<\/p>\n
The final source of step 3 is available for downloading from GitHub<\/a>.<\/em><\/p>\n
Previous and next steps:
\n– Learn how to develop great Juzu portlets for eXo Platform!<\/a>
\n– Step 2: viewing and posting secrets<\/a>
\n– Step 3: Building a sexy secret wall<\/a>
\n– Step 4: adding Likes and Comments for Secret<\/a>
\n– Step 5: Saving Secrets in the JCR<\/a>
\n– Step 6: Let the whole world create new secrets<\/a>
\n– Step 7: Finishing the job properly with unit test<\/a><\/em><\/p>\n
Thanks a lot to the Design and UI teams for their contribution \ud83d\ude09<\/em><\/p>\n
Join the eXo tribe<\/a> by registering for the community and get updates, tutorials, support, and access to the Platform and add-on downloads!<\/b><\/p>\n
<\/p>\n
\n
\n

\n\"make-the-most-out-of-eXo-platform4\"
\n<\/a><\/div>\n
\n
Make the most out of eXo Platform 4<\/h4>\n
Register to the next webinar and get a complete overview of what you can do with eXo Platform 4. Reserve your seat now!<\/a><\/strong><\/p>\n<\/div>\n<\/div>\n<\/div>\n
<\/p>\n","protected":false},"excerpt":{"rendered":"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\u2019s ugly… so during this […]","protected":false},"author":7,"featured_media":12746,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[699],"tags":[],"lang":"en","translations":{"en":7950},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/posts\/7950"}],"collection":[{"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/comments?post=7950"}],"version-history":[{"count":0,"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/posts\/7950\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/media?parent=7950"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/categories?post=7950"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/tags?post=7950"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}