Contact us
  • en
  • fr
  • Solutions
    • Company IntranetDiscover our company intranet software to connect and engage your employees
    • Collaboration PlatformDiscover our digital collaboration platform that boost your employee engagement and performance
    • Knowledge ManagementHow To build and manage your knowledge base with eXo Platform
    • Employee EngagementDiscover how to boost your employee engagement
  • Product
    • Overview
      • Software TourAn overview of our software capabilities
      • Why eXoHow eXo improves your employee experience
    • Features
      • CommunicationFeatures to facilitate employee communications
      • CollaborationFeatures to create efficient teams
      • KnowledgeKnowledge management capabilities
      • ProductivityEmployee productivity tools to engage employees
    • Technology
      • Open sourceAn overview of our technology
      • IntegrationsDiscover how eXo integrates with your tools and systems
      • SecurityHow eXo Platform ensures your data security
  • Pricing
    • Product pricingLearn about our business model and pricing
    • ServicesLearn about our professional services
    • FAQsQuestions about the software, the community and our offers
  • Resources
    • Resource center
      • Case studies
      • White Papers
      • Datasheets
      • Videos
    • Technical documentation
      • Getting started
      • Developer Guide
      • Technical administration guide
      • REST APIs
    • From The Blog
      • eXo Platform 6.4 is here, available in both Enterprise and Community editions!
      • eXo Platform community edition is back
      • Cloud Vs On-premise Digital Workplace: Which one is right for your business?
  • Company
    • About us
    • Careers
    • Customers
    • Newsroom
    • Contact us
    • Partners
  • Menu mobile
    • Pricing
    • About us
    • Services
    • FAQs
    • Customers
    • Resource center
    • Contact us
    • Blog
Company Intranet Discover our company intranet software to connect and engage your employees
Collaboration Platform Discover our digital collaboration platform that boost your employee engagement and performance
Knowledge Management How To build and manage your knowledge base with eXo Platform
Employee Engagement Discover how to boost your employee engagement
Overview
  • Software Tour An overview of our software capabilities
  • Why eXo How eXo improves your employee experience
Features
  • Communication Features to facilitate employee communications
  • Collaboration Features to create efficient teams
  • Knowledge Knowledge management capabilities
  • Productivity Employee productivity tools to engage employees
Technology
  • Open source An overview of our technology
  • Integrations Discover how eXo integrates with your tools and systems
  • Security How eXo Platform ensures your data security
Product pricing Learn about our business model and pricing
Services Learn about our professional services
FAQs Questions about the software, the community and our offers
Resource center
  • Case studies
  • White Papers
  • Datasheets
  • Videos
Technical documentation
  • Getting started
  • Developer Guide
  • Technical administration guide
  • REST APIs
From The Blog
  • eXo Platform 6.4 is here, available in both Enterprise and Community editions!
  • eXo Platform community edition is back
  • Cloud Vs On-premise Digital Workplace: Which one is right for your business?
About us
Careers
Customers
Newsroom
Contact us
Partners
Pricing
About us
Services
FAQs
Customers
Resource center
Contact us
Blog
  1. Accueil
  2. Uncategorized
  3. Juzu Day 3: The Coolness

Juzu Day 3: The Coolness

Today is the last of my three days on Juzu and I want to show some nice features you can find inside.

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

So, if you want to see some nice gems, it’s here.

All the Coolness

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.

Ajax + jQuery

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 annotation, like here in maintainSession:

@Ajax
@Resource
public Response.Content maintainSession()
{
  return Response.ok("OK").withMimeType("text/html; charset=UTF-8").withHeader("Cache-Control", "no-cache");
}

It’s about Ajax, right? So, we added jQuery as an asset in the packaging-info:

...
        scripts = {
                @Script(src = "js/jquery-1.7.1.min.js", id = "jquery"),
  ...

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 JavaScript. Let’s take a look inside chat.js to see this:

var $chatApplication = $("#chat-application");
var jzMaintainSession = $chatApplication.jzURL("ChatApplication.maintainSession");
..
function maintainSession() {
  $.ajax({
    url: jzMaintainSession,
    success: function(response){
      console.log("Chat Session Maintained : "+response);
    },
    error: function(response){
      chatSessionInt = clearInterval(chatSessionInt);
    }
  });
}

There’s also $.jzLoad and $.jzAjax methods if you want a shortcut to jQuery $.ajax() method, like:

$(this).jzLoad("ChatApplication.foo"); //will load data in 'this'

For me, it’s a killer feature because it makes your code so much easier to read.

Less

I already talked a little bit about Less integration but here is a quick example about how great this is to write CSS.

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.

So, let’s say you want to define emoticons in your CSS. Usually, you will do this:

.emoticon-smile{
  background:url('/chat/img/emoticons/smile.png') no-repeat 0px 0px;
}
.emoticon-big-smile{
  background:url('/chat/img/emoticons/bigsmile.png') no-repeat 0px 0px;
}
.emoticon-eye-blink{
  background:url('/chat/img/emoticons/eyeblink.png') no-repeat 0px 0px;
}
.emoticon-no-voice{
  background:url('/chat/img/emoticons/novoice.png') no-repeat 0px 0px;
}
.emoticon-sad{
  background:url('/chat/img/emoticons/sad.png') no-repeat 0px 0px;
}
.emoticon-surprise{
  background:url('/chat/img/emoticons/surprise.png') no-repeat 0px 0px;
}

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:

.background-emoticon(@image) {
  background: url('@{imgEmoticonPath}@{image}') no-repeat 0px 0px;
}
.emoticon-smile {
  .background-emoticon('smile.png');
}
.emoticon-big-smile {
  .background-emoticon('bigsmile.png');
}
.emoticon-eye-blink {
  .background-emoticon('eyeblink.png');
}
.emoticon-no-voice {
  .background-emoticon('novoice.png');
}
.emoticon-sad {
  .background-emoticon('sad.png');
}
.emoticon-surprise {
  .background-emoticon('surprise.png');
}

Now, take a look at that, it’s far better, isn’t it? 🙂

You can even do more tricky stuff with Less like, for example, in the panels.less:

.chat-panel (@heightParam, @colorParam) {
  float: left;
  z-index: 10;
  position: absolute;
  width: @width;
  height: @heightParam;
  color: @colorParam;
  padding: 50px 0px 0px;
  text-align: center;
  font-size: 14px;
  font-weight: normal;
}

.chat-error-panel, .chat-login-panel, .chat-about-panel, .chat-demo-panel {
  .chat-panel((@height - 51), white);
  background-color: @colorBgPanel;
}
.chat-help-panel {
  .chat-panel((@height - 1), black);
  background:url('@{imgPath}help-panel.png') no-repeat 0px 0px;
  padding: 0px 0px 0px 0px;
}
.chat-sync-panel {
  .chat-panel((@height - 51), white);
}

Here, you declare a class with arguments and you can even do some math with your params (like @height – 51). I can’t thank enough all the developers out there who provide jQuery, Bootstrap, Less and all these kinds of life savers.

Responsive Design

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:

Responsive Design from Benjamin Paillereau on Vimeo.

To make it simpler, it’s about developing one app to rule them all! You 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.

All you need to do is two things:

  • Manage viewport with a viewport metatag in your html header;
  • Create multiple CSS for each media (small screen, large screens, print, etc).

Viewport metatag

Again, thanks to Juzu’s coolness, it will only take 10 seconds for this step. Just add the right withMetaTag in your render and you’re done – like in the chat:

indexDemo.render().withMetaTag("viewport", "width=device-width, initial-scale=1.0");

It’s that easy!

Media in CSS

Well, this is where Less integration is a killer and why you should really use it!

It may be a pain in the *** to manage this but not with Less. Again, thanks to Less integration in Juzu, it’s just a few lines of code and thinking your CSS the right way – like for the Chat app:

@media (min-width: 768px) and (max-width: 1199px) {
  @height:                      700px;
  @width:                       760px;
  @heightMessage:               60px;
  @widthUsers:                  200px;
  @widthMessages:               (@width - @widthUsers - 4);

  @import "sized";
  @import "panels";
}

As all my CSS uses @height and @width to manage sizable elements, I can import the Less files with new parameters for each media size and I’m done. Here’s the same for big desktops:

@media (min-width: 1200px) {
  @height:                      700px;
  @width:                       1100px;
  @heightMessage:               60px;
  @widthUsers:                  300px;
  @widthMessages:               (@width - @widthUsers - 4);

  @import "sized";
  @import "panels";

}

So, writing a responsive CSS is not that hard, you have no excuse not to make them responsive! 🙂 (well, at least if you’re using Juzu… If you’re using one of the usual suspects, good luck with this). Here’s what the Chat app looks like on iPhone:

Fluid App, why not?

I’ll end with something a little off topic, but I think we have a final great gem here. It’s also so simple to add it into a Juzu app, so I wanted to add a note about it.

As I wrote a Chat, the thought popped into my head: hummm, it would be great to use it like any regular app… Luckily, I’m a Macbook Pro user, which means I’m running Max OS X. And we have a great app called Fluid App.

It’s great because it allows you to convert a website to an app and that’s exactly what I did in this Juzu app.

It looks like this:

And basically, what you need to do is not that hard since Juzu allows you to do what you want, right?
As I’m using extensively jQuery, which is well integrated in Juzu, I just added a few calls to make my app Fluid Aware.

Maintain session if loaded as a Fluid App

We need first to maintain the session as it’s part of the real app User Experience.

if (window.fluid!==undefined) {
    chatSessionInt = clearInterval(chatSessionInt);
    chatSessionInt = setInterval(maintainSession, chatIntervalSession);
  }
Update the notification badge

Then, we can add a badge on the Dock icon.

window.fluid.dockBadge = totalNotif;
Send growl notification if available

We can also send notifications in the Notification Center.

if (totalNotif>oldNotif && profileStatus !== "donotdisturb" && profileStatus !== "offline") {
  window.fluid.showGrowlNotification({
     title: "eXo Chat",
     description: "You have new messages",
     priority: 1,
     sticky: false,
     identifier: "messages"
  });
}
Add change status menu item in the Dock app

Finally, we can even change our status right from the Dock 🙂

function initFluidApp() {
 if (window.fluid!==undefined) {
   window.fluid.addDockMenuItem("Available", setStatusAvailable);
   window.fluid.addDockMenuItem("Away", setStatusAway);
   window.fluid.addDockMenuItem("Do not disturb", setStatusDoNotDisturb);
   window.fluid.addDockMenuItem("Invisible", setStatusInvisible);
 }
}
initFluidApp();

Nothing more is needed; from this point on, the application can be added as a real app in my Applications folder.

What’s Next?

So, you did it, you read these three posts to the end. I want first to give you a big thank for your reading time.

I hope they helped you to discover this new web framework that is Juzu.

You will find some documentation on its official website: http://juzuweb.org/
If you have questions about Juzu, you can go to the Google group to ask them: http://groups.google.com/group/juzu.

And if you want to contribute, it’s on GitHub: https://github.com/juzu/juzu.

Again, thousand kudos to Julien and his great work on Juzu!

Finally, a small word about the Chat application: you want to know more or help me to build an even better Chat application? Contact me or simply fork the Chat GitHub project, I’ll be more than happy to integrate new cool ideas in the Chat (or bug fixes).

Thus, if you want to take a deeper look at the code, it’s Open Source and available on eXo Addons Repositories: https://github.com/exo-addons/chat-application« Again, thanks for watching and stay tuned – more things are coming, Benjamin. »

Brahim Jaouane

I am a Digital Marketing specialist specialized in SEO at eXo Platform. Passionate about new technologies and Digital Marketing. With 10 years' experience, I support companies in their digital communication strategies and implement the tools necessary for their success. My approach combines the use of different traffic acquisition levers and an optimization of the user experience to convert visitors into customers. After various digital experiences in communication agencies as well as in B2B company, I have a wide range of skills and I am able to manage the digital marketing strategy of small and medium-sized companies.

Full-featured digital workplace with everything your employees need to work efficiently, smartly integrated for a compelling employee experience

  • Product
    • Software tour
    • Communication
    • Collaboration
    • Knowledge
    • Productivity
    • Open Source
    • Integrations
    • Security
  • Uses cases
    • Digital Workplace
    • Intranet software
    • Collaboration software
    • Knowledge management software
    • Entreprise Social Network
    • Employee Engagement platform
  • Roles
    • Internal Communications
    • Human Resources
    • Information Technology
  • Company
    • Product offer
    • Services Offer
    • Customers
    • Partners
    • About us
  • Resources
    • FAQs
    • Resource Center
    • Collaboration guide
    • What is a Digital workplace?
    • What is an intranet?
    • Employee engagement
  • Terms and Conditions
  • Legal
  • Privacy Policy
  • Accessibility
  • Contact us
  • Sitemap
  • Facebook
  • Twitter
  • LinkedIn
wpDiscuz