{"id":8120,"date":"2014-12-16T05:55:29","date_gmt":"2014-12-16T13:55:29","guid":{"rendered":"http:\/\/localhost\/exoblog\/?p=8120"},"modified":"2023-06-05T16:49:47","modified_gmt":"2023-06-05T14:49:47","slug":"developing-juzu-portlets-step-6-let-the-whole-world-create-new-secrets","status":"publish","type":"post","link":"https:\/\/www.exoplatform.com\/blog\/developing-juzu-portlets-step-6-let-the-whole-world-create-new-secrets\/","title":{"rendered":"Developing Juzu portlets \u2013 Step 6: Let the whole world create new secrets"},"content":{"rendered":"

\"06-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– 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><\/em><\/p>\n

We are close to the end, guys. In this step, we will make our JuZcret portlet understandable by the whole world!<\/strong> Ok, for this tutorial we will just manage the French and Vietnamese languages<\/strong> but when you understand the concept, feel free to add all the languages you want.
\n<\/p>\n

Internationalization and Localization<\/h2>\n

Internationalization<\/h3>\n

Internationalization is the process of developing software<\/strong> whose core design does not make assumptions based on a language<\/strong>. It means that all messages and labels in the application can be translated<\/strong> into all supported languages<\/strong>.
\nNote: Juzu supports i18n natively<\/strong> in its core. We just need to modify all the labels in all our templates. Next time, remember to do this as soon you start developing a template.<\/em><\/p>\n

Update the editMode.gtmpl<\/span> template:<\/p>\n

#{param name=enableComment\/}\n\n<form action=\"@{JuZcretApplication.enableComment()}\" method=\"POST\" role=\"form\">\n\t<h5>&{label.configuration}<\/h5>\n\t<input type=\"checkbox\" name=\"enableComment\" <%=enableComment ? \"checked\" : \"\" %>\/>&{label.enableComment}\n\t<button type=\"submit\">&{label.save}<\/button>\n<\/form><\/pre>\n
The syntax for retrieving an i18nized message<\/strong> is &{label}<\/span>. For instance we\u2019ve replaced <h5>Configuration<\/h5><\/span> with <h5>&{label.configuration}<\/h5><\/span>.<\/p>\n
We need to do this for all the labels in all JuZcret templates<\/strong>:<\/p>\n
addsecret.gtmpl<\/span>:<\/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\">&{label.secretWall}<\/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\">&{label.shareSecret}<\/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\">&{label.mySecret}:<\/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=\"&{label.writeSecret}\"><\/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\">&{label.img}:<\/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\">&{label.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
secretWall.gtmpl<\/span>:<\/p>\n
#{param name=secretsList\/}\n#{param name=enableComment\/}\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\">&{label.shareSecret}<\/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<li class=\"secret\" data-secretId=\"${secret.id}\">\n\t\t\t<div class=\"secret-image\" style=\"background-image: url('${secret.imageURL}')\">\n\n\t\t\t\t<div class=\"secret-mesage\">${secret.message}<\/div>\n\n\t\t\t\t<div class=\"secret-action\">\n\t\t\t\t\t<a class=\"btn-like secr-toggle-link toggle-like-comment\" href=\"#\">\n\t\t\t\t\t\t<i class=\"uiIconThumbUp uiIconWhite\"><\/i><span class=\"numb\"><\/span>\n\t\t\t\t\t<\/a>\n                    <a class=\"btn-popup-comment secr-toggle-link toggle-write-comment\" href=\"#\">\n                    \t<i class=\"uiIconComment uiIconWhite\"><\/i><span class=\"numb\"><\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\n\t\t\t\t<div class=\"popover popover-secret fade top\">\n\t\t\t\t\t<button class=\"closePopover close\" type=\"button\">&times;<\/button>\n\t\t\t\t\t<div class=\"arrow\"><\/div>\n\n\t\t\t\t\t<div class=\"popover-content\">\n\t\t\t\t\t\t<div class=\"secr-comments-box\">\n\t\t\t\t\t\t\t<ul class=\"secr-comments-list\">\n\t\t\t\t\t\t\t\t<% secret.getComments().each { comment -> %>\n\t\t\t\t\t\t\t\t<li><!--Add class .open-popover to display popover -->\n\t\t\t\t\t\t\t\t\t<div class=\"media\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"pull-left\" href=\"https:\/\/localhost:8080\/portal\/intranet\/profile\/${comment.userId}\">\n\t\t\t\t\t\t\t\t\t\t\t<img src=\"https:\/\/localhost:8080\/social-resources\/skin\/images\/ShareImages\/UserAvtDefault.png\" alt=\"avatar\">\n\t\t\t\t\t\t\t\t\t\t<\/a>\n\n\t\t\t\t\t\t\t\t\t\t<div class=\"media-body\">\n\t\t\t\t\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"cm-user-name\" href=\"https:\/\/localhost:8080\/portal\/intranet\/profile\/${comment.userId}\">${comment.userId}<\/a> <span class=\"cm-time\">${comment.createdDate}<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"cm-content\">${comment.content}<\/div>\n\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<% } %>\n\t\t\t\t\t\t\t<\/ul>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<div class=\"secr-create-comment clearfix\">\n\t\t\t\t\t\t\t<button class=\"btn-comment btn btn-primary pull-right\">&{label.comment}<\/button>\n\n\t\t\t\t\t\t\t<div class=\"secr-write-comment \">\n\t\t\t\t\t\t\t\t<div class=\"inner\">\n\t\t\t\t\t\t\t\t\t<div class=\"media\">\n\t\t\t\t\t\t\t\t\t\t<a href=\"#\" class=\"pull-left\">\n\t\t\t\t\t\t\t\t\t\t\t<img src=\"https:\/\/localhost:8080\/social-resources\/skin\/images\/ShareImages\/UserAvtDefault.png\" alt=\"avatar\">\n\t\t\t\t\t\t\t\t\t\t<\/a>\n\n\t\t\t\t\t\t\t\t\t\t<div class=\"media-body\">\n\t\t\t\t\t\t\t\t\t\t\t<textarea name=\"comment\" class=\"secret-add-comment\" placeholder=\"&{label.addComment}\"><\/textarea>\n\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t<\/li>\n\t\t<% } %>\n\t<\/ul>\n<\/div><\/pre>\n
That\u2019s it for internationalizing the templates.<\/p>\n
Now, how can I manage the translation of &{label.configuration}<\/span>?
\nIt\u2019s very simple and easy in Juzu<\/strong>. You just need to configure the path of your bundle in the portlet.xml<\/span> and then create a Java resource bundle file (*.properties or *.xml) per language.<\/p>\n
So, first update the portlet.xml file in the src\/main\/webapp\/WEB-INF<\/span> folder:<\/p>\n
<portlet-app>\n\t<portlet>\n\t\t<portlet-name>JuzcretApplication<\/portlet-name>\n\t\t[...]\n\t\t<\/supports>\n\t\t<resource-bundle>locale.portlet.juzcret<\/resource-bundle>\n\t\t<portlet-info>\n\t\t[...]\n\t<\/portlet>\n<\/portlet-app><\/pre>\n
The resource bundle<\/strong> tells the portlet container to find the resource bundle files in \/locale\/portlet\/juzcret_*.properties<\/span>.<\/p>\n
Localization<\/h3>\n
Localization is the process of customizing an app for a particular language<\/strong>. That includes translating<\/strong> the labels and messages into that language<\/strong>.
\nIn this tutorial, we will limit support to French and Vietnamese.<\/p>\n
Add the resource bundle files to this path \/src\/main\/resources\/locale\/portlet\/<\/span>, as declared in portlet.xml<\/span>:<\/p>\n
juzcret.properties<\/span> for the default language (English in eXo Platform)<\/p>\n
label.addComment=Add your comment\nlabel.shareSecret=Share my secret\nlabel.configuration=Configuration\nlabel.enableComment=Enable Comment\nlabel.save=Save\nlabel.mySecret=My secret\nlabel.writeSecret=Write your secret here\nlabel.img=Image URL\nlabel.share=Share\nlabel.comment=Comment\nlabel.secretWall=Secret Wall<\/pre>\n
juzcret_vi.properties<\/span> for Vietnamese<\/p>\n
label.shareSecret=Chia s\\u1EBB b\\u00ED m\\u1EADt\nlabel.configuration=C\\u1EA5u h\\u00ECnh\nlabel.enableComment=Cho ph\\u00E9p b\\u00ECnh lu\\u1EADn\nlabel.save=L\\u01B0u\nlabel.mySecret=B\\u00ED m\\u1EADt c\\u1EE7a t\\u00F4i\nlabel.writeSecret=Vi\\u1EBFt b\\u00ED m\\u1EADt \\u1EDF \\u0111\\u00E2y\nlabel.img=\\u0110\\u01B0\\u1EDDng d\\u1EABn \\u1EA3nh\nlabel.share=Chia s\\u1EBB\nlabel.secretWall=T\\u01B0\\u1EDDng b\\u00ED m\\u1EADt\nlabel.addComment=Th\\u00EAm b\\u00ECnh lu\\u1EADn\nlabel.comment=B\\u00ECnh lu\\u1EADn<\/pre>\n
juzcret_fr.properties<\/span> for French<\/p>\n
label.shareSecret=Partager mon secret\nlabel.configuration=Configuration\nlabel.enableComment=Activer les commentaires\nlabel.save=Sauvegarder\nlabel.mySecret=Mon secret\nlabel.writeSecret=Ecrit ton secret ici\nlabel.img=URL de l'image\nlabel.share=Partager\nlabel.secretWall=Mur des secrets\nlabel.addComment=Ajouter votre commentaire\nlabel.comment=Ajouter<\/pre>\n
That\u2019s all.
\nRecompile and deploy JuZcret eXo Platform as explained in a previous step of this tutorial:<\/p>\n
$ mvn clean install<\/pre>\n
Copy and paste the war file (i.e., replace the old one<\/em>) in the web app folder of eXo Platform, start the server and open the JuZcret page created in step 1.<\/p>\n
Now you can share secrets in Vietnamese:<\/p>\n
\"1-add-secret-vietnamese\"<\/a><\/p>\n
or look at the secret wall and add comments in French:<\/p>\n
\"2-secret-wall-french\"<\/a><\/p>\n
So, here we are. We have an international JuZcret application<\/strong> ready for sharing secrets with people all around the world.<\/p>\n
Hum, do you think that we forgot to do some important things during the steps? Let\u2019s fix this in the last step<\/a>.<\/p>\n
The final source of step 6 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
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 – Step 3: Building a sexy secret wall – Step 4: adding Likes and Comments for Secret – Step 5: Saving Secrets in the JCR We are close to the end, guys. In this step, […]","protected":false},"author":7,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[699],"tags":[],"lang":"en","translations":{"en":8120},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/posts\/8120"}],"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=8120"}],"version-history":[{"count":0,"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/posts\/8120\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/media?parent=8120"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/categories?post=8120"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/tags?post=8120"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}