Create a GUI with templates and AUI

Create a GUI with templates and AUI You've added SAL modules and built the foundation for an interactive plugin by creating a servlet component. Now, you'll add a GUI for your users to input data. You can use resources Atlassian provides in the Atlassian User Interface (AUI). This section of the tutorial will walk you through creating and managing Velocity templates, adding CSS, and viewing your plugin in its GUI form. This section includes the following instructions: Introduction to AUI (Atlassian User Interface) Step 1. Update dependencies in the pom.xml Step 2. Create a Velocity template Step 3. Update MyPluginServlet Step 4. Add a decorator and CSS Next steps Introduction to AUI (Atlassian User Interface) AUI is a library of resources you can use to make your plugin visually integrated with Atlassian products. The AUI library includes CSS, JavaScript, and other templates. Using resources from this library ensures your plugin interface is compliant with Atlassian Design Guidelines (ADG). In earlier steps, you added a component module called TemplateRenderer. Here, you'll update your source code to import TemplateRenderer. You'll configure TemplateRenderer to use a Velocity template to format your user interface. Then, you'll add AUI elements and templates for TemplateRenderer to display for an Atlassian look and feel. Step 1. Update dependencies in the pom.xml Here, you'll update the dependencies to reflect the TemplateRenderer module you added earlier. 1. Refresh your project in Eclipse. 2. 3. 4. 5. Open your pom.xml. Locate the section. Find the com.atlassian.sal group. Add the templaterenderer in a dependency group above the com.atlassian.sal group. <groupid>com.atlassian.templaterenderer</groupid> <artifactid>atlassian-template-renderer-api</artifactid> <version>1.3.1</version> Expand to see the entire pom.xml. Check your pom.xml: <?xml version="1.0" encoding="utf-8"?> <project xmlns="http://maven.apache.org/pom/4.0.0" xmlns:xsi="http://www.w3.org/2001/xmlschema-instance"

2 xsi:schemalocation="http://maven.apache.org/pom/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd"> <modelversion>4.0.0</modelversion> <groupid>com.atlassian.plugins.tutorial.refapp</groupid> <artifactid>adminui</artifactid> <version>1.0-snapshot</version> <organization> <name>awesomeness Inc</name> <url>http://www.awesomebreedsmoarawesome.com/</url> </organization> <name>adminui</name> <description>this is the com.atlassian.plugins.tutorial.refapp:adminui plugin for Atlassian Refapp.</description> <packaging>atlassian-plugin</packaging> <dependencies> <groupid>junit</groupid> <artifactid>junit</artifactid> <version>4.10</version> <scope>test</scope> <groupid>javax.servlet</groupid> <artifactid>servlet-api</artifactid> <version>2.4</version> <groupid>com.atlassian.templaterenderer</groupid> <artifactid>atlassian-template-renderer-api</artifactid> <version>1.3.1</version> <groupid>com.atlassian.sal</groupid> <artifactid>sal-api</artifactid> <version>2.7.1</version> <groupid>org.slf4j</groupid> <artifactid>slf4j-simple</artifactid> <version>1.5.8</version> <!-- WIRED TEST RUNNER DEPENDENCIES --> <groupid>com.atlassian.plugins</groupid> <artifactid>atlassian-plugins-osgi-testrunner</artifactid> <version>$plugin.testrunner.version</version> <scope>test</scope> <groupid>javax.ws.rs</groupid> <artifactid>jsr311-api</artifactid>

3 <version>1.1.1</version> <groupid>com.google.code.gson</groupid> <artifactid>gson</artifactid> <version>2.2.2-atlassian-1</version> <groupid>org.slf4j</groupid> <artifactid>slf4j-api</artifactid> <version>1.6.6</version> <groupid>org.mockito</groupid> <artifactid>mockito-all</artifactid> <version>1.8.5</version> <scope>test</scope> </dependencies> <dependencymanagement> <dependencies> <groupid>com.atlassian.refapp</groupid> <artifactid>atlassian-platform</artifactid> <version>$refapp.version</version> <type>pom</type> <scope>import</scope> </dependencies> </dependencymanagement> <build> <plugins> <plugin> <groupid>com.atlassian.maven.plugins</groupid> <artifactid>maven-refapp-plugin</artifactid> <version>$amps.version</version> <extensions>true</extensions> <configuration> <productversion>$refapp.version</productversion> </configuration> </plugin> <plugin> <artifactid>maven-compiler-plugin</artifactid> <configuration> <source>1.6</source> <target>1.6</target> </configuration> </plugin> </plugins> </build> <properties> <refapp.version>2.19.0</refapp.version> <amps.version>4.2.2</amps.version>

4 <plugin.testrunner.version>1.1.1</plugin.testrunner.version> </properties> </project> 6. 7. Save and close the file in Eclipse. Update your Eclipse changes from your project root. $ atlas-mvn eclipse:eclipse Step 2. Create a Velocity template Atlassian applications use both.soy (Soy) and.vm (Velocity) templates for rendering user interfaces. In this example, you'll create a Velocity template to support your GUI. 1. Navigate to your project root in terminal. $ cd ~/atlastutorial/adminui 2. Drill down to your /resources directory. $ cd src/main/resources 3. Create an admin.vm Velocity template. You'll be prompted to paste content into the VI editor after this command. $ cat > admin.vm 4. Note that if you decide to create this file within an IDE or some other editor, ensure the encoding is UTF-8 - if you don't you'll get odd characters appearing in the output Paste the following into the editor:

5 <html> <head> <title>my Admin</title> </head> <body> <form id="admin"> <label for="name">name</label> <input type="text" id="name" name="name"> <label for="age">age</label> <input type="text" id="age" name="age"> <input type="submit" value="save"> </form> </body> </html> 5. Click Escape, then type :sq to save the entry and exit the vi editor. To review the contents of admin.vm, you can enter the following command: $ cat admin.vm Step 3. Update MyPluginServlet Up until this point, your servlet has been displaying HTML from your MyPluginServlet class. Now you'll update the class to render content using the TemplateRenderer component import you added earlier. Templa terenderer will display the admin.vm template you just created. 1. Update MyPluginServlet.java to import TemplateRenderer and use your new admin.vm template. MyPluginServlet should look as follows: package com.atlassian.plugins.tutorial.refapp; import org.slf4j.logger; import org.slf4j.loggerfactory; import javax.servlet.*; import javax.servlet.http.httpservlet; import javax.servlet.http.httpservletrequest; import javax.servlet.http.httpservletresponse; import java.io.ioexception; import java.net.uri; import com.atlassian.sal.api.auth.loginuriprovider; import com.atlassian.sal.api.user.usermanager;

6 import com.atlassian.templaterenderer.templaterenderer; public class MyPluginServlet extends HttpServlet private final UserManager usermanager; private final LoginUriProvider loginuriprovider; private final TemplateRenderer templaterenderer; public MyPluginServlet(UserManager usermanager, LoginUriProvider loginuriprovider, TemplateRenderer templaterenderer) this.usermanager = usermanager; this.loginuriprovider = loginuriprovider; this.templaterenderer = templaterenderer; @Override public void doget(httpservletrequest request, HttpServletResponse response) throws ServletException, IOException String username = usermanager.getremoteusername(request); if (username == null!usermanager.issystemadmin(username)) redirecttologin(request, response); return; templaterenderer.render("admin.vm", response.getwriter()); private void redirecttologin(httpservletrequest request, HttpServletResponse response) throws IOException response.sendredirect(loginuriprovider.getloginuri(geturi(request)).toasciistring()); private URI geturi(httpservletrequest request) StringBuffer builder = request.getrequesturl(); if (request.getquerystring()!= null) builder.append("?"); builder.append(request.getquerystring()); return URI.create(builder.toString());

7 // This is what your MyPluginServlet.java class should look like after creating your admin.vm template 2. 3. 4. Save the changes and close the file. Return to http://localhost:2990/jira/plugins/servlet/test. Click SHIFT+F5 (or CMD+R) to perform a hard refresh. Your servlet reloads, now with fields from your admin.vm: Step 4. Add a decorator and CSS You have a GUI, but it's not much to look at. Now you can add some visual appeal to your plugin using Atlassian User Interface (AUI) resources and some CSS. 1. Change to your atlastutorial/adminui/src/main/resources directory. $ cd adminui/src/main/resources 2. 3. Open your admin.vm Velocity template. Add a <meta> element directly after the title. Insert <meta name="decorator" content="atl.admin">. This tag should be inside the <head> s ection.

8 <html> <head> <title>my Admin</title> <meta name="decorator" content="atl.admin"> </head> <body> <form id="admin"> <label for="name">name</label> <input type="text" id="name" name="name"> <label for="age">age</label> <input type="text" id="age" name="age"> <input type="submit" value="save"> </form> </body> </html> 4. 5. Save the file. Leave the file open for future changes. Navigate back to your servlet in your running JIRA instance at http://localhost:2990/jira/plugins/servlet/ test. 6. Click Shift + F5 to run FastDev and display your changes. The page loads and now uses an AUI decorator. 7. Return to your admin.vm file.

9 8. Add some CSS. Replace your admin.vm contents with the following: <html> <head> <title>myservlet Admin</title> <meta name="decorator" content="atl.admin"> </head> <body> <form id="admin" class="aui"> <div class="field-group"> <label for="name">name:</label> <input type="text" id="name" name="name" class="text"> <div class="field-group"> <label for="age">age:</label> <input type="text" id="age" name="age" class="text"> <div class="field-group"> <input type="submit" value="save" class="button"> </form> </body> </html> 9. 10. Return to your servlet at http://localhost:2990/jira/plugins/servlet/test Click Shift + F5 to run FastDev and display your changes. Alternately you should be able to refresh the page and see the changes. Much fancier! Next steps Your add-on looks great! Now you'll add a POST method so it can store and retrieve user data.