{"id":4300,"date":"2013-01-24T08:55:27","date_gmt":"2013-01-24T16:55:27","guid":{"rendered":"http:\/\/localhost\/exoblog\/?p=4300"},"modified":"2013-01-24T08:55:27","modified_gmt":"2013-01-24T16:55:27","slug":"juzu-day-3-the-coolness","status":"publish","type":"post","link":"https:\/\/www.exoplatform.com\/blog\/juzu-day-3-the-coolness\/","title":{"rendered":"Juzu Day 3: The Coolness"},"content":{"rendered":"

Today is the last of my three days on Juzu and I want to show some nice features you can find inside.<\/em><\/p>\n

If you want to start from Day 1, you can take a look in the previous posts:
\n– Three Days with Juzu: Write a Killer App<\/a>;
\n– Juzu Day 2: Real Web Apps as well.<\/p>\n

So, if you want to see some nice gems, it’s here.<\/p>\n

<\/p>\n

All the Coolness<\/h2>\n

We know how to write an app, but do we know how to write something cool, something you say “it’s fucking great, man!” when you look at it? Of course, there are a number of other gems in Juzu.<\/p>\n

Ajax + jQuery<\/h3>\n

The first one, and it’s a big one, is about Ajax calls. We saw at the beginning of this “quite long” article that you can declare a resource with @Ajax<\/em> annotation, like here in maintainSession<\/a>:<\/p>\n

@Ajax\n@Resource\npublic Response.Content maintainSession()\n{\n  return Response.ok(\"OK\").withMimeType(\"text\/html; charset=UTF-8\").withHeader(\"Cache-Control\", \"no-cache\");\n}<\/pre>\n
It’s about Ajax, right? So, we added jQuery as an asset in the packaging-info<\/a>:<\/p>\n
...\n        scripts = {\n                @Script(src = \"js\/jquery-1.7.1.min.js\", id = \"jquery\"),\n  ...<\/pre>\n
Thanks to the amazing stuff that is done under the hood by Julien, Juzu will detect you’re using jQuery and will generate specific jQuery objects so you can call your method very easily from within the\u00a0JavaScript. Let’s take a look inside chat.js<\/a> to see this:<\/p>\n
var $chatApplication = $(\"#chat-application\");\nvar jzMaintainSession = $chatApplication.jzURL(\"ChatApplication.maintainSession\");\n..\nfunction maintainSession() {\n  $.ajax({\n    url: jzMaintainSession,\n    success: function(response){\n      console.log(\"Chat Session Maintained : \"+response);\n    },\n    error: function(response){\n      chatSessionInt = clearInterval(chatSessionInt);\n    }\n  });\n}<\/pre>\n
There’s also $.jzLoad<\/em> and $.jzAjax<\/em> methods if you want a shortcut to jQuery $.ajax()<\/em> method, like:<\/p>\n
$(this).jzLoad(\"ChatApplication.foo\"); \/\/will load data in 'this'<\/pre>\n
For me, it’s a killer feature because it makes your code so much easier to read.<\/p>\n
Less<\/h3>\n
I already talked a little bit about Less integration but here is a quick example about how great this is to write CSS.<\/p>\n
The fact is I like Less but without this integration, I could certainly not use it. But now, since it’s part of Juzu, I have no excuse since it takes just a line to use Less.<\/p>\n
So, let’s say you want to define emoticons in your CSS. Usually, you will do this:<\/p>\n
.emoticon-smile{\n  background:url('\/chat\/img\/emoticons\/smile.png') no-repeat 0px 0px;\n}\n.emoticon-big-smile{\n  background:url('\/chat\/img\/emoticons\/bigsmile.png') no-repeat 0px 0px;\n}\n.emoticon-eye-blink{\n  background:url('\/chat\/img\/emoticons\/eyeblink.png') no-repeat 0px 0px;\n}\n.emoticon-no-voice{\n  background:url('\/chat\/img\/emoticons\/novoice.png') no-repeat 0px 0px;\n}\n.emoticon-sad{\n  background:url('\/chat\/img\/emoticons\/sad.png') no-repeat 0px 0px;\n}\n.emoticon-surprise{\n  background:url('\/chat\/img\/emoticons\/surprise.png') no-repeat 0px 0px;\n}<\/pre>\n
One thing I hate is copy\/pasting the some code; same thing goes for CSS, I hate it like that. 1) It’s ugly. 2) It’s hard to read. With Less integration in Juzu, you just need to do this in emoticons.less:<\/p>\n
.background-emoticon(@image) {\n  background: url('@{imgEmoticonPath}@{image}') no-repeat 0px 0px;\n}\n.emoticon-smile {\n  .background-emoticon('smile.png');\n}\n.emoticon-big-smile {\n  .background-emoticon('bigsmile.png');\n}\n.emoticon-eye-blink {\n  .background-emoticon('eyeblink.png');\n}\n.emoticon-no-voice {\n  .background-emoticon('novoice.png');\n}\n.emoticon-sad {\n  .background-emoticon('sad.png');\n}\n.emoticon-surprise {\n  .background-emoticon('surprise.png');\n}<\/pre>\n
Now, take a look at that, it’s far better, isn’t it? \ud83d\ude42<\/p>\n
You can even do more tricky stuff with Less like, for example, in the panels.less:<\/p>\n
.chat-panel (@heightParam, @colorParam) {\n  float: left;\n  z-index: 10;\n  position: absolute;\n  width: @width;\n  height: @heightParam;\n  color: @colorParam;\n  padding: 50px 0px 0px;\n  text-align: center;\n  font-size: 14px;\n  font-weight: normal;\n}\n\n.chat-error-panel, .chat-login-panel, .chat-about-panel, .chat-demo-panel {\n  .chat-panel((@height - 51), white);\n  background-color: @colorBgPanel;\n}\n.chat-help-panel {\n  .chat-panel((@height - 1), black);\n  background:url('@{imgPath}help-panel.png') no-repeat 0px 0px;\n  padding: 0px 0px 0px 0px;\n}\n.chat-sync-panel {\n  .chat-panel((@height - 51), white);\n}<\/pre>\n
Here, you declare a class with arguments and you can even do some math with your params (like @height – 51<\/em>). I can’t thank enough all the developers out there who provide jQuery, Bootstrap, Less and all these kinds of life savers.<\/p>\n
Responsive Design<\/h3>\n
There’s a big trend on responsive design. If you don’t really know what it is, I invite you to spend even more time watching a video on this:<\/p>\n
Responsive Design<\/a> from Benjamin Paillereau<\/a> on Vimeo<\/a>.<\/p>\n
To make it simpler, it’s about developing one app to rule them all!<\/strong>\u00a0You write once and it will adapt automatically depending on whether accessing your site or app from a desktop, a small notebook, an iPad, an iPhone; you name it.<\/p>\n
All you need to do is two things:<\/p>\n