{"id":7898,"date":"2014-11-18T05:55:19","date_gmt":"2014-11-18T13:55:19","guid":{"rendered":"http:\/\/localhost\/exoblog\/?p=7898"},"modified":"2023-06-05T16:49:41","modified_gmt":"2023-06-05T14:49:41","slug":"learn-how-to-develop-great-juzu-portlets-for-exo-platform","status":"publish","type":"post","link":"https:\/\/www.exoplatform.com\/blog\/learn-how-to-develop-great-juzu-portlets-for-exo-platform\/","title":{"rendered":"Learn how to develop great Juzu portlets for eXo Platform!"},"content":{"rendered":"<p><a href=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/11\/01-Juzu-tutorial-series.jpg\"><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-7912\" src=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/11\/01-Juzu-tutorial-series.jpg\" alt=\"01-Juzu-tutorial-series\" width=\"650\" height=\"220\" srcset=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/11\/01-Juzu-tutorial-series.jpg 650w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/11\/01-Juzu-tutorial-series-300x102.jpg 300w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/11\/01-Juzu-tutorial-series-500x169.jpg 500w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/11\/01-Juzu-tutorial-series-360x122.jpg 360w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/11\/01-Juzu-tutorial-series-200x68.jpg 200w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/11\/01-Juzu-tutorial-series-100x34.jpg 100w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/11\/01-Juzu-tutorial-series-70x24.jpg 70w\" sizes=\"(max-width: 650px) 100vw, 650px\" \/><\/a><\/p>\n<p>During the coming weeks, we will publish on this blog a series of posts on a Juzu tutorial containing 7 steps where you will learn how to develop a portlet with <a href=\"https:\/\/juzuweb.org\/\" target=\"_blank\" rel=\"noopener\">Juzu<\/a>, a web framework for developing powerful web applications.<\/p>\n<p>We will start with an ugly portlet with hard-coded data and finish with a sexy fully integrated portlet that allows people to share secrets:<\/p>\n<ul>\n<li>Step 1: Starting your project<\/li>\n<li>Step 2: Viewing and posting secrets<\/li>\n<li>Step 3: Building a sexy secret wall<\/li>\n<li>Step 4: Like and comment on secrets<\/li>\n<li>Step 5: Save secrets<\/li>\n<li>Step 6: Let the whole world create new secrets<\/li>\n<li>Step 7: Finish the job properly<\/li>\n<\/ul>\n<p>Today, enjoy step 1!<br \/>\n<!--more--><\/p>\n<h2>Step 1 &#8211; Starting your project<\/h2>\n<h3>Introduction<\/h3>\n<p>[inlinetweet prefix=&#8221;&#8221; tweeter=&#8221;&#8221; suffix=&#8221;&#8221;]In this tutorial, we will learn <strong>Juzu<\/strong> by coding a real social portlet named JuZcret[\/inlinetweet]. We will cover everything you need to <strong>create a real portlet application<\/strong> and show you the <strong>best development practices<\/strong> for <strong>Juzu<\/strong>.<\/p>\n<p>But, guys, be patient! We have decided to split this tutorial into <strong>seven steps<\/strong> for a simple reason: we will smoothly introduce more and more complex and interesting features to build our application gradually.<\/p>\n<p>Yes, for sure, we will start with an ugly portlet with hard-coded data&#8230; But, I promise, at the end we will finish with a sexy fully integrated portlet.<\/p>\n<p>And you, as a true Juzu developer, will have enough knowledge to develop <strong>funny Juzu applications<\/strong> and evangelize for Juzu around you.<\/p>\n<h3>The project<\/h3>\n<p>We will develop a new application named <strong>JuZcret<\/strong>.<\/p>\n<p>JuZcret is funny social application allowing people to share secrets.<\/p>\n<p><strong>The rules of JuZcret:<\/strong><br \/>\n1st Rule: Anybody can access JuZcret.<br \/>\n2nd Rule: Anybody can add a secret.<br \/>\n3rd Rule: Anybody can read, comment on and like secrets.<br \/>\n4th Rule: Secrets are anonymous.<\/p>\n<h3>What we need<\/h3>\n<p>Juzu is a web framework written in <strong>Java<\/strong>, so first of all be sure you have a JDK installed on your machine (later than version 7).<\/p>\n<p>We will manage dependencies and project compilation with <strong>Maven<\/strong>.<\/p>\n<p>In the coming steps, we will need to use the public Maven repository of eXo for compilation. This is why you need to declare it in your Maven <span class=\"navCode\">settings.xml<\/span>:<\/p>\n<pre class=\"lang:default decode:true \">&lt;\/profiles&gt;\n\t&lt;profile&gt;\n\t\t&lt;id&gt;exo-public&lt;\/id&gt;\n\t\t&lt;repositories&gt;\n\t\t\t&lt;repository&gt;\n\t\t\t\t&lt;id&gt;eXo-pub-repo&lt;\/id&gt;\n\t\t\t\t&lt;name&gt;eXoPlatform public repo&lt;\/name&gt;\n\t\t\t\t&lt;url&gt;https:\/\/repository.exoplatform.org\/public&lt;\/url&gt;\n\t\t\t&lt;\/repository&gt;\n\t\t&lt;\/repositories&gt;\n\t&lt;\/profile&gt;\n\t...\n&lt;\/profiles&gt;\n&lt;activeProfiles&gt;\n\t&lt;activeProfile&gt;exo-public&lt;\/activeProfile&gt;\n\t...\n&lt;\/activeProfiles&gt;<\/pre>\n<p><em>Note:<\/em> For more information about adding the eXo Platform Maven repository, <a href=\"https:\/\/docs.exoplatform.org\/\" target=\"_blank\" rel=\"noopener\">take a look here<\/a>.<\/p>\n<p>We will assume that you have a basic knowledge of <strong>Java and Web development<\/strong> (HTML, CSS and JavaScript).<\/p>\n<p>I suggest you use a Java IDE such as Eclipse or IntelliJ. But if you prefer, you can use a simple text editor like Sublime Text, Emacs or even Vim (really?).<\/p>\n<p>The compilation and deployment will be managed in a Maven console.<\/p>\n<p>Don&#8217;t forget that we are developing a portlet. So we need a portal to deploy it on. Let me think&#8230; we need a portal and we are developing a sexy social application? <strong>eXo platform<\/strong> will be the best choice!<\/p>\n<h3>Create a Project<\/h3>\n<h4>Generate a Juzu project using the Maven archetype<\/h4>\n<p>To start our project, we will use the Maven Juzu archetype, which will automatically generate the whole structure for our Juzu project by populating it with all the files and directories necessary to run a simple <strong>Juzu \u201cHello, World!\u201d application<\/strong>.<\/p>\n<p>Open a new command line and change to your working directory. Mine is:<\/p>\n<pre class=\"lang:default decode:true \">$ cd ~\/java\/eXoProjects\/juzu-tutorial\/<\/pre>\n<p>Then type:<\/p>\n<pre class=\"lang:default decode:true \">mvn archetype:generate \\\n\t-DarchetypeGroupId=org.juzu \\\n\t-DarchetypeArtifactId=juzu-archetype \\\n\t-DarchetypeVersion=1.0.0-cr1 \\\n\t-DjuzuServer=gatein \\\n\t-DgroupId=org.juzu.tutorial \\\n\t-DartifactId=tutorial-juzcret \\\n\t-Dversion=1.0.0-SNAPSHOT \\\n\t-DinteractiveMode=false<\/pre>\n<p>With the command above, you are creating a Juzu portlet application project with the <strong>Guice injection container<\/strong>.<\/p>\n<p>It\u2019s possible to generate an application with different containers by specifying the option <span class=\"navCode\">-DjuzuInject<\/span>. The valid values are Guice (by default), Spring or CDI.<\/p>\n<p>When generation is finished, a <strong>build success message<\/strong> will be displayed in your console:<\/p>\n<pre class=\"lang:default decode:true \">[INFO] Using following parameters for creating project from Archetype: juzu-archetype:1.0.0-cr1\n[INFO] ----------------------------------------------------------------------------\n[INFO] Parameter: groupId, Value: org.juzu.tutorial\n[INFO] Parameter: artifactId, Value: tutorial-juzcret\n[INFO] Parameter: version, Value: 1.0.0-SNAPSHOT\n[INFO] Parameter: package, Value: org.juzu.tutorial\n[INFO] Parameter: packageInPathFormat, Value: org\/juzu\/tutorial\n[INFO] Parameter: package, Value: org.juzu.tutorial\n[INFO] Parameter: version, Value: 1.0.0-SNAPSHOT\n[INFO] Parameter: juzuInject, Value: guice\n[INFO] Parameter: artifactId, Value: tutorial-juzcret\n[INFO] project created from Archetype in dir: \/Users\/TClement\/java\/eXoProjects\/tutorial-juzcret\/\n[INFO] ------------------------------------------------------------------------\n[INFO] BUILD SUCCESS\n[INFO] ------------------------------------------------------------------------\n[INFO] Total time: 44.882 s\n[INFO] Finished at: 2014-08-29T14:13:46+07:00\n[INFO] Final Memory: 13M\/129M\n[INFO] ------------------------------------------------------------------------<\/pre>\n<p>Now we have a new <span class=\"navCode\">tutorial-juzcret<\/span> folder containing a simple customized Juzu \u201cHello, World!\u201d application.<\/p>\n<p>Let&#8217;s open it in our IDE.<\/p>\n<h4>Open our Juzu project in your IDE<\/h4>\n<p>Open our Juzu project in your favorite IDE.<\/p>\n<p><strong>IntelliJ<\/strong><br \/>\nSee <a href=\"https:\/\/community.exoplatform.com\/portal\/g\/:spaces:juzu\/juzu\/wiki\/IntelliJ\" target=\"_blank\" rel=\"noopener\">How to configure IntelliJ to enjoy Juzu development<\/a><\/p>\n<p><strong>Eclipse<\/strong><br \/>\nSee <a href=\"https:\/\/community.exoplatform.com\/portal\/g\/:spaces:juzu\/juzu\/wiki\/Eclipse\" target=\"_blank\" rel=\"noopener\">How to configure Eclipse to enjoy Juzu development<\/a><\/p>\n<h3>Explore our project<\/h3>\n<p><a href=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/11\/01-explore-project.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-7900\" src=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/11\/01-explore-project.png\" alt=\"01-explore-project\" width=\"650\" srcset=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/11\/01-explore-project.png 1067w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/11\/01-explore-project-300x165.png 300w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/11\/01-explore-project-1024x563.png 1024w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/11\/01-explore-project-768x423.png 768w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/11\/01-explore-project-720x396.png 720w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/11\/01-explore-project-500x275.png 500w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/11\/01-explore-project-360x198.png 360w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/11\/01-explore-project-200x110.png 200w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/11\/01-explore-project-100x55.png 100w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/11\/01-explore-project-55x30.png 55w\" sizes=\"(max-width: 1067px) 100vw, 1067px\" \/><\/a><\/p>\n<p>Our project looks like a default Maven web project plus there are specific Juzu files and directories. The most important ones to understand are:<\/p>\n<p><strong><span class=\"navCode\">pom.xml<\/span><\/strong> contains all the dependencies needed to run and test our Juzu application<\/p>\n<p><strong><span class=\"navCode\">WEB-INF\/<\/span><\/strong> contains the deployment descriptor for our application. If you have already developed a Java web application and portlet, there is nothing new for you here.<\/p>\n<p><strong><span class=\"navCode\">templates\/<\/span><\/strong> contains all the templates used in our application. A template has a static part and a dynamic part, which are used to form dynamic pages for our application.<\/p>\n<p><strong><span class=\"navCode\">Controller.java<\/span><\/strong> is our Juzu controller. It&#8217;s where we will render a <strong>view<\/strong> using the template, define <strong>resources<\/strong> and more.<\/p>\n<p><strong><span class=\"navCode\">package-info.java<\/span><\/strong> is the configuration file for our application. It&#8217;s where we will <strong>declare the base package<\/strong> of our application, <strong>activate the plugin<\/strong>, add JavaScript or CSS resources and more.<\/p>\n<p>It&#8217;s quite simple, isn\u2019t it? If you don&#8217;t exactly understand the purpose of each file above, don&#8217;t worry. This was just an introduction. We will look more deeply at each file later. Don&#8217;t stay here, go ahead!<\/p>\n<h3>Run the application<\/h3>\n<p>Before running the application, let us personalize our \u201c<strong>Hello, World!\u201d Juzu application<\/strong> a little bit to transform it into a <strong>simple JuZcret application<\/strong>.<\/p>\n<p>First, open the <span class=\"navCode\">portlet.xml<\/span> file generated in the <span class=\"navCode\">Juzcret\/src\/main\/webapp\/WEB-INF<\/span> folder. If you are not familiar with portlet development, you just need to know that <span class=\"navCode\">portlet.xml<\/span> is the standard JSR-286 portlet configuration file used by the portlet container to deploy our portlet. Let&#8217;s modify our portlet name, display name and title:<\/p>\n<pre class=\"lang:default decode:true \">&lt;?xml version=\"1.0\" encoding=\"UTF-8\"?&gt;\n&lt;portlet-app xmlns=\"https:\/\/java.sun.com\/xml\/ns\/portlet\/portlet-app_2_0.xsd\"\n\t\tversion=\"2.0\"\n\t\txmlns:xsi=\"https:\/\/www.w3.org\/2001\/XMLSchema-instance\"\n\t\txsi:schemaLocation=\"https:\/\/java.sun.com\/xml\/ns\/portlet\/portlet-app_2_0.xsd\n\t\thttps:\/\/java.sun.com\/xml\/ns\/portlet\/portlet-app_2_0.xsd\"&gt;\n\t&lt;portlet&gt;\n\t\t&lt;portlet-name&gt;JuzcretApplication&lt;\/portlet-name&gt;\n\t\t&lt;display-name xml:lang=\"EN\"&gt;JuZcret Application&lt;\/display-name&gt;\n\t\t&lt;portlet-class&gt;juzu.bridge.portlet.JuzuPortlet&lt;\/portlet-class&gt;\n\t\t&lt;init-param&gt;\n\t\t\t&lt;name&gt;juzu.app_name&lt;\/name&gt;\n\t\t\t&lt;value&gt;org.juzu.tutorial&lt;\/value&gt;\n\t\t&lt;\/init-param&gt;\n\t\t&lt;supports&gt;\n\t\t\t&lt;mime-type&gt;text\/html&lt;\/mime-type&gt;\n\t\t&lt;\/supports&gt;\n\t\t&lt;portlet-info&gt;\n\t\t\t&lt;title&gt;JuZcret Application&lt;\/title&gt;\n\t\t&lt;\/portlet-info&gt;\n\t&lt;\/portlet&gt;\n&lt;\/portlet-app&gt;<\/pre>\n<p>Secondly, make some changes to how it is presented on the home page. Open <span class=\"navCode\">index.gtmpl<\/span> in the templates folder and modify:<\/p>\n<pre class=\"lang:default decode:true\">Hello World<\/pre>\n<p>By<\/p>\n<pre class=\"lang:default decode:true\">&lt;h1&gt;JuZcret Application&lt;\/h1&gt;\n&lt;p&gt;\n\t1st Rule: Anybody can access to JuZcret&lt;br\/&gt;\n\t2nd Rule: Anybody can add secret&lt;br\/&gt;\n\t3rd Rule: Anybody can read, comment, and like secrets&lt;br\/&gt;\n\t4nd Rule: Secret is anonymous&lt;br\/&gt;\n&lt;\/p&gt;<\/pre>\n<h4>Deploy it in eXo Platform<\/h4>\n<p>Don&#8217;t forget that we are developing a <strong>portlet application<\/strong>. That means that we need a <strong>portal<\/strong> to deploy it.<\/p>\n<p>Let\u2019s start by downloading <a href=\"https:\/\/community.exoplatform.com\/downloads\" class=\"broken_link\" target=\"_blank\" rel=\"noopener\">eXo Platform Community Edition<\/a><\/p>\n<p>Using the command line, go to your download directory:<\/p>\n<pre class=\"lang:default decode:true \">$ cd ~\/Downloads<\/pre>\n<p>Unzip the download file:<\/p>\n<pre class=\"lang:default decode:true \">$ unzip eXo-Platform-community-4.1.zip<\/pre>\n<p>Copy it and paste it into the directory of your choice (I use <span class=\"navCode\">\/java\/eXoProjects\/juzu-tutorial\/platform-community-4.1\/<\/span>):<\/p>\n<pre class=\"lang:default decode:true \">$ cp -R platform-community-4.1\/ ~\/java\/eXoProjects\/juzu-tutorial\/platform-community-4.1\/<\/pre>\n<p>Now we have to add our Portlet in Platform.<\/p>\n<p>Go back to your working directory:<\/p>\n<pre class=\"lang:default decode:true \">$ cd ~\/java\/eXoProjects\/juzu-tutorial\/tutorial-juzcret\/<\/pre>\n<p>Compile the application:<\/p>\n<pre class=\"lang:default decode:true \">$ mvn clean install<\/pre>\n<p><strong>BUILD FAILURE?<\/strong> What? I haven\u2019t even finished step one of this tutorial!<\/p>\n<p>Relax guys. As usual, try to understand what&#8217;s gone wrong&#8230;<\/p>\n<p>In the Maven log in the command line you can read:<\/p>\n<pre class=\"lang:default decode:true \">Results:\n\nFailed tests: testFoo(org.juzu.tutorial.ApplicationTestCase): expected:&lt;[Hello World]&gt; but was:&lt;[JuZcret Application(..)\n\nTests run: 1, Failures: 1, Errors: 0, Skipped: 0<\/pre>\n<p><strong>A test failed?<\/strong><\/p>\n<p>Yes. The Juzu archetype created a default unit test case for \u201cHello, World!\u201d to test whether the HTML for our application is &#8220;Hello, World!&#8221;.<\/p>\n<p>However, that was not the case. We modified the index template, so the test failed.<\/p>\n<p>Take a look at the unit test in <span class=\"navCode\">test\/java\/org\/juzu\/tutorial\/ApplicationTestCase.java<\/span>:<\/p>\n<pre class=\"lang:default decode:true \">@Test\n@RunAsClient\npublic void testFoo() {\n\tdriver.get(deploymentURL.toString());\n\tWebElement body = driver.findElement(By.tagName(\"body\"));\n\tassertEquals(\"Hello World\", body.getText());\n}<\/pre>\n<p>The aim of this step is not to show you how to develop a unit test with Juzu. This will be covered later in step 7. For now, just remove <span class=\"navCode\">ApplicationTestCase.java<\/span>.<\/p>\n<p>So, compile it again:<\/p>\n<pre class=\"lang:default decode:true \">$ mvn clean install<\/pre>\n<p>Here you should get <strong>Build Success<\/strong>. Great. Now it&#8217;s time to deploy our portlet in eXo Platform.<\/p>\n<p>Copy the created war file to the eXo Platform web apps directory:<\/p>\n<pre class=\"lang:default decode:true \">$ cp .\/target\/tutorial-juzcret.war ~\/java\/eXoProjects\/juzu-tutorial\/platform-community-4.1.0-RC1\/webapps\/<\/pre>\n<p>Go to the eXo Platform directory:<\/p>\n<pre class=\"lang:default decode:true \">$ cd ~\/java\/eXoProjects\/juzu-tutorial\/platform-community-4.1.0-RC1\/<\/pre>\n<p>Start eXo in dev mode:<\/p>\n<pre class=\"lang:default decode:true \">$ .\/start_eXo.sh --dev<\/pre>\n<p>Open your web browser and go to <a href=\"https:\/\/community.exoplatform.com\/portal\/intranet\/home\" target=\"_blank\" rel=\"noopener\">https:\/\/community.exoplatform.com\/portal\/intranet\/home<\/a><\/p>\n<p><em>Note<\/em> Username: root | Password: gtn<\/p>\n<p>What we want to do is to add our <strong>new portlet<\/strong> to a dedicated <strong>JuZcret page<\/strong>. This will let everybody see and share secrets!<\/p>\n<p>To do so, we need to proceed in two steps:<br \/>\n1. Add our new portlet to a category.<br \/>\n2. Add our new portlet to the dedicated JuZcret page.<\/p>\n<p>To be able to add our new portlet, first we need to add it to a category.<\/p>\n<p>Because we are developing a social application, we will add it to the <strong>social category<\/strong>.<\/p>\n<p>Click on Administration &#8211;&gt; Applications and click on the portlet on the right.<\/p>\n<p>If you scroll down, you should see our portlet &#8220;Juzu Secret Application&#8221; in the \u201ctutorial-juzcret\u201d section:<\/p>\n<p><a href=\"\/blog\/wp-content\/uploads\/2014\/11\/02-app-description.png\"><img decoding=\"async\" class=\"aligncenter size-medium wp-image-7901\" src=\"\/blog\/wp-content\/uploads\/2014\/11\/02-app-description.png\" alt=\"02-app-description\" width=\"650\" srcset=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/11\/02-app-description.png 1280w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/11\/02-app-description-300x188.png 300w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/11\/02-app-description-1024x640.png 1024w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/11\/02-app-description-768x480.png 768w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/11\/02-app-description-1250x781.png 1250w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/11\/02-app-description-720x450.png 720w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/11\/02-app-description-500x313.png 500w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/11\/02-app-description-360x225.png 360w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/11\/02-app-description-200x125.png 200w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/11\/02-app-description-100x63.png 100w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/11\/02-app-description-48x30.png 48w\" sizes=\"(max-width: 1280px) 100vw, 1280px\" \/><\/a><\/p>\n<p>Click on it:<\/p>\n<p><a href=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/11\/03-app-registry.png\"><img decoding=\"async\" class=\"aligncenter size-medium wp-image-7902\" src=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/11\/03-app-registry.png\" alt=\"03-app-registry\" width=\"650\" srcset=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/11\/03-app-registry.png 1280w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/11\/03-app-registry-300x188.png 300w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/11\/03-app-registry-1024x640.png 1024w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/11\/03-app-registry-768x480.png 768w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/11\/03-app-registry-1250x781.png 1250w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/11\/03-app-registry-720x450.png 720w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/11\/03-app-registry-500x313.png 500w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/11\/03-app-registry-360x225.png 360w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/11\/03-app-registry-200x125.png 200w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/11\/03-app-registry-100x63.png 100w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/11\/03-app-registry-48x30.png 48w\" sizes=\"(max-width: 1280px) 100vw, 1280px\" \/><\/a><\/p>\n<p>Click on &#8220;Click here to add into categories&#8221;.<\/p>\n<p>Add it to the social category:<\/p>\n<p><a href=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/11\/04-app-categories.png\"><img decoding=\"async\" class=\"aligncenter size-medium wp-image-7903\" src=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/11\/04-app-categories.png\" alt=\"04-app-categories\" width=\"650\" srcset=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/11\/04-app-categories.png 1280w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/11\/04-app-categories-300x188.png 300w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/11\/04-app-categories-1024x640.png 1024w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/11\/04-app-categories-768x480.png 768w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/11\/04-app-categories-1250x781.png 1250w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/11\/04-app-categories-720x450.png 720w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/11\/04-app-categories-500x313.png 500w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/11\/04-app-categories-360x225.png 360w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/11\/04-app-categories-200x125.png 200w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/11\/04-app-categories-100x63.png 100w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/11\/04-app-categories-48x30.png 48w\" sizes=\"(max-width: 1280px) 100vw, 1280px\" \/><\/a><\/p>\n<p>Then save it.<\/p>\n<p>Second, we want to add our new portlet to the dedicated <strong>JuZcret page<\/strong>.<\/p>\n<p>Go back to the <strong>Home Page<\/strong> of eXo and then click on Edit on the top navigation bar. Then click on Page \u00e0 Add Page to open the Page Creation Wizard form.<\/p>\n<p>Select \u201cup level\u201d on the left menu, set JuZcret as Node and Display Name and check that it\u2019s visible:<\/p>\n<p><a href=\"\/blog\/wp-content\/uploads\/2014\/11\/05-portlet-to-page.png\"><img decoding=\"async\" class=\"aligncenter size-medium wp-image-7904\" src=\"\/blog\/wp-content\/uploads\/2014\/11\/05-portlet-to-page.png\" alt=\"05-portlet-to-page\" width=\"650\" srcset=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/11\/05-portlet-to-page.png 1280w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/11\/05-portlet-to-page-300x157.png 300w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/11\/05-portlet-to-page-1024x537.png 1024w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/11\/05-portlet-to-page-768x403.png 768w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/11\/05-portlet-to-page-1250x655.png 1250w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/11\/05-portlet-to-page-720x377.png 720w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/11\/05-portlet-to-page-500x262.png 500w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/11\/05-portlet-to-page-360x189.png 360w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/11\/05-portlet-to-page-200x105.png 200w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/11\/05-portlet-to-page-100x52.png 100w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/11\/05-portlet-to-page-57x30.png 57w\" sizes=\"(max-width: 1280px) 100vw, 1280px\" \/><\/a><\/p>\n<p>Click \u201cNext\u201d twice.<\/p>\n<p>In <em>Page Editor<\/em> on the top right, expand \u201csocial\u201d and <strong>drag and drop<\/strong> the <em>Juzu Secret Application<\/em> to the left:<\/p>\n<p><a href=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/11\/06-portlet-to-page.png\"><img decoding=\"async\" class=\"aligncenter size-medium wp-image-7905\" src=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/11\/06-portlet-to-page.png\" alt=\"06-portlet-to-page\" width=\"650\" srcset=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/11\/06-portlet-to-page.png 1280w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/11\/06-portlet-to-page-300x144.png 300w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/11\/06-portlet-to-page-1024x493.png 1024w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/11\/06-portlet-to-page-768x370.png 768w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/11\/06-portlet-to-page-1250x602.png 1250w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/11\/06-portlet-to-page-720x347.png 720w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/11\/06-portlet-to-page-500x241.png 500w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/11\/06-portlet-to-page-360x173.png 360w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/11\/06-portlet-to-page-200x96.png 200w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/11\/06-portlet-to-page-100x48.png 100w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/11\/06-portlet-to-page-62x30.png 62w\" sizes=\"(max-width: 1280px) 100vw, 1280px\" \/><\/a><\/p>\n<p>Then click on the finish icon on the top right of the Page Editor and look at the result:<\/p>\n<p><a href=\"\/blog\/wp-content\/uploads\/2014\/11\/07-portlet-page.png\"><img decoding=\"async\" class=\"aligncenter size-medium wp-image-7906\" src=\"\/blog\/wp-content\/uploads\/2014\/11\/07-portlet-page.png\" alt=\"07-portlet-page\" width=\"650\" srcset=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/11\/07-portlet-page.png 1280w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/11\/07-portlet-page-300x188.png 300w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/11\/07-portlet-page-1024x640.png 1024w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/11\/07-portlet-page-768x480.png 768w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/11\/07-portlet-page-1250x781.png 1250w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/11\/07-portlet-page-720x450.png 720w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/11\/07-portlet-page-500x313.png 500w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/11\/07-portlet-page-360x225.png 360w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/11\/07-portlet-page-200x125.png 200w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/11\/07-portlet-page-100x63.png 100w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/11\/07-portlet-page-48x30.png 48w\" sizes=\"(max-width: 1280px) 100vw, 1280px\" \/><\/a><\/p>\n<p>Ah&#8230; ok&#8230; nice&#8230;<\/p>\n<p>Ah, ah! You\u2019ve got what I promised: <strong>an ugly static portlet!<\/strong><\/p>\n<p>We will soon publish on the eXo blog <strong>Step 2 \u2013 Viewing and posting secrets<\/strong>, where we will add some functionality to our portlet. (Edit: <a href=\"https:\/\/www.exoplatform.com\/blog\/2014\/11\/20\/developing-juzu-portlets-step-2-viewing-and-posting-secrets\">step 2: &#8220;viewing and posting secrets&#8221;<\/a> is live!)<\/p>\n<p><strong>The final source of step 1 is available for <a href=\"https:\/\/github.com\/juzu\/portlet-tutorial\/tree\/step-1\/tutorial-juzcret\" target=\"_blank\" rel=\"noopener\">downloading on Github<\/a><\/strong><\/p>\n<p><em>Next steps:<br \/>\n&#8211; <a href=\"https:\/\/www.exoplatform.com\/blog\/2014\/11\/18\/learn-how-to-develop-great-juzu-portlets-for-exo-platform\/\">Learn how to develop great Juzu portlets for eXo Platform!<\/a><br \/>\n&#8211; <a href=\"https:\/\/www.exoplatform.com\/blog\/2014\/11\/20\/developing-juzu-portlets-step-2-viewing-and-posting-secrets\/\">Step 2: viewing and posting secrets<\/a><br \/>\n&#8211; <a href=\"https:\/\/www.exoplatform.com\/blog\/2014\/11\/25\/developing-juzu-portlets-step-3-building-a-sexy-secret-wall\/\">Step 3: Building a sexy secret wall<\/a><br \/>\n&#8211; <a href=\"https:\/\/www.exoplatform.com\/blog\/2014\/12\/02\/developing-juzu-portlets-step-4-adding-likes-and-comments-for-secret\/\">Step 4: adding Likes and Comments for Secret<\/a><br \/>\n&#8211; <a href=\"https:\/\/www.exoplatform.com\/blog\/2014\/12\/11\/developing-juzu-portlets-step-5-saving-secrets-in-the-jcr\/\">Step 5: Saving Secrets in the JCR<\/a><br \/>\n&#8211; <a href=\"https:\/\/www.exoplatform.com\/blog\/2014\/12\/16\/developing-juzu-portlets-step-6-let-the-whole-world-create-new-secrets\">Step 6: Let the whole world create new secrets<\/a><br \/>\n&#8211; <a href=\"https:\/\/www.exoplatform.com\/blog\/2014\/12\/18\/developing-juzu-portlets-step-7-finishing-the-job-properly-with-unit-test\/\">Step 7: Finishing the job properly with unit test<\/a><\/em><\/p>\n<p><b><a href=\"https:\/\/community.exoplatform.com\/portal\/dw\/\" target=\"_blank\" rel=\"noopener\">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><!--begin adv-events--><\/p>\n<div class=\"adv-events\" style=\"background: #476fad;padding: 30px 20px;color: white\">\n<div class=\"media\">\n<div class=\"pull-right\"><a href=\"#\"><br \/>\n<img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-6587 alignright\" src=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/02\/how-to-make-the-most-of-eXo-platform41.png\" alt=\"make-the-most-out-of-eXo-platform4\" width=\"161\" height=\"85\"><br \/>\n<\/a><\/div>\n<div class=\"media-body\">\n<h4 class=\"media-heading\">Make the most out of eXo Platform 4<\/h4>\n<p>Register to the next webinar and get a complete overview of what you can do with eXo Platform 4. <strong><a href=\"https:\/\/www.exoplatform.com\/contact-us\/?utm_source=BlogEn&amp;utm_medium=Blog&amp;utm_campaign=Content&amp;utm_content=link\">Reserve your seat now!<\/a><\/strong><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><!--end adv-events--><\/p>\n","protected":false},"excerpt":{"rendered":"During the coming weeks, we will publish on this blog a series of posts on a Juzu tutorial containing 7 steps where you will learn how to develop a portlet with Juzu, a web framework for developing powerful web applications. We will start with an ugly portlet with hard-coded data and finish with a sexy [&hellip;]","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":7898},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/posts\/7898"}],"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=7898"}],"version-history":[{"count":0,"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/posts\/7898\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/media?parent=7898"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/categories?post=7898"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/tags?post=7898"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}