Build Amazing Add-ons for Atlassian JIRA and Confluence

2,221 views

Published on

Slidedeck of Tobias Anstett's presentation about 'Building Amazing Add-ons for Atlassian JIRA and Confluence' at Java Forum Stuttgart, July 2014

Published in: Technology

Build Amazing Add-ons for Atlassian JIRA and Confluence

  1. 1. Build amazing Add-ons for Atlassian JIRA and Confluence
  2. 2. Products ATLASSIAN JIRA AND MANY MOREATLASSIAN CONFLUENCE
  3. 3. CLOUD ATLASSIAN HOSTS DATA CENTER YOU HOST SERVER YOU HOST Deployments
  4. 4. Extend Atlassian products for your team. Build amazing Add-ons
  5. 5. Build for Atlassian Confluence Build for Atlassian JIRA Build amazing Add-ons
  6. 6. Build for Atlassian JIRA Build for Atlassian ConfluenceBuild for Atlassian Confluence Build amazing Add-ons
  7. 7. Build for the cloud with Atlassian Connect Build for applications running on your server Build amazing Add-ons
  8. 8. Build for the cloud with Atlassian Connect Build for applications running on your serverBuild for applications running on your server Build amazing Add-ons
  9. 9. Atlassian SDK Getting Started
  10. 10. Atlassian SDK - Getting Started Set up the SDK Prerequisites Install the Atlassian SDK Explore the Installed SDK and the atlas Commands Create a Hello World Add-on https://developer.atlassian.com/x/ZAIr
  11. 11. Atlassian SDK and its Commands https://developer.atlassian.com/x/4waf $ atlas-version ! ATLAS Version: 5.0.3 ATLAS Home: /usr/share/atlassian-plugin-sdk-5.0.3 ATLAS Scripts: /usr/share/atlassian-plugin-sdk-5.0.3/bin ATLAS Maven Home: /usr/share/atlassian-plugin-sdk-5.0.3/apache-maven-3.2.1 -------- Executing: /usr/share/atlassian-plugin-sdk-5.0.3/apache-maven-3.2.1/bin/mvn —version -gs /usr/ share/atlassian-plugin-sdk-5.0.3/apache-maven-3.2.1/conf/settings.xml Apache Maven 3.2.1 (ea8b2b07643dbb1b84b6d16e1f08391b666bc1e9; 2014-02-14T18:37:52+01:00) Maven home: /usr/share/atlassian-plugin-sdk-5.0.3/apache-maven-3.2.1 Java version: 1.7.0_51, vendor: Oracle Corporation Java home: /Library/Java/JavaVirtualMachines/jdk1.7.0_51.jdk/Contents/Home/jre Default locale: en_US, platform encoding: UTF-8 OS name: "mac os x", version: "10.9.3", arch: "x86_64", family: "mac"
  12. 12. Atlassian SDK and its Commands https://developer.atlassian.com/x/4waf $ atlas-run-standalone --product confluence ! … [INFO] Starting confluence… [INFO] determining latest stable data version... [INFO] using latest stable data version: 5.5.3 … [INFO] Starting confluence on the tomcat6x container on ports 1990 (http), 63711 (rmi) and 8009 (ajp) … [INFO] [talledLocalContainer] Tomcat 6.x starting... [INFO] [stalledLocalDeployer] Deploying … [INFO] [talledLocalContainer] Tomcat 6.x started on port [1990] [INFO] confluence started successfully in 51s [INFO] Type Ctrl-D to shutdown gracefully [INFO] Type Ctrl-C to exit
  13. 13. Atlassian SDK and its Commands https://developer.atlassian.com/x/4waf $ atlas-mvn --help ! Usage: atlas-mvn [options] ! Execute arbitrary Maven commands using the version of Maven bundled with the Atlassian Plugin SDK.
  14. 14. Atlassian SDK and its Commands https://developer.atlassian.com/x/4waf $ atlas-create-confluence-plugin ! … [INFO] --- maven-confluence-plugin:5.0.3:create (default-cli) @ standalone-pom --- [INFO] determining latest stable product version... [INFO] using latest stable product version: 5.5.3 [INFO] determining latest stable data version... [INFO] using latest stable data version: 5.5.3 Define value for groupId: : com.k15t.confluence Define value for artifactId: : example Define value for version: 1.0-SNAPSHOT: : Define value for package: com.k15t.confluence: : Confirm properties configuration: groupId: com.k15t.confluence artifactId: example version: 1.0-SNAPSHOT package: com.k15t.confluence …
  15. 15. Atlassian SDK and its Commands https://developer.atlassian.com/x/4waf $ atlas-run ! [INFO] Scanning for projects... ... [INFO] ------------------------------------------------------------------------ [INFO] Building example 1.0-SNAPSHOT [INFO] ------------------------------------------------------------------------ ... Running ut.com.k15t.confluence.MyComponentUnitTest Tests run: 1, Failures: 0, Errors: 0, Skipped: 0, Time elapsed: 0.025 sec Results : Tests run: 1, Failures: 0, Errors: 0, Skipped: 0 … [INFO] [talledLocalContainer] jvmInputArguments = -Xmx512m -XX:MaxPermSize=256m … … [INFO] [talledLocalContainer] Tomcat 6.x started on port [1990] [INFO] [talledLocalContainer] Jul 10, 2014 1:26:43 PM org.apache.jk.common.ChannelSocket init [INFO] [talledLocalContainer] INFO: JK: ajp13 listening on /0.0.0.0:8009 [INFO] confluence started successfully in 48s
  16. 16. Atlassian SDK and its Commands https://developer.atlassian.com/x/4waf $ atlas-debug ! [INFO] Scanning for projects... ... [INFO] ------------------------------------------------------------------------ [INFO] Building example 1.0-SNAPSHOT [INFO] ------------------------------------------------------------------------ ... Running ut.com.k15t.confluence.MyComponentUnitTest Tests run: 1, Failures: 0, Errors: 0, Skipped: 0, Time elapsed: 0.025 sec Results : Tests run: 1, Failures: 0, Errors: 0, Skipped: 0 … [INFO] [talledLocalContainer] jvmInputArguments = -Xmx512m -XX:MaxPermSize=256m -Xdebug - Xrunjdwp:transport=dt_socket,address=5005, … … [INFO] [talledLocalContainer] Tomcat 6.x started on port [1990] [INFO] [talledLocalContainer] Jul 10, 2014 1:26:43 PM org.apache.jk.common.ChannelSocket init [INFO] [talledLocalContainer] INFO: JK: ajp13 listening on /0.0.0.0:8009 [INFO] confluence started successfully in 48s
  17. 17. Atlassian SDK - Getting Started Set up the SDK Prerequisites Install the Atlassian SDK Explore the Installed SDK and the atlas Commands Create a Hello World Add-on https://developer.atlassian.com/x/ZAIr
  18. 18. https://developer.atlassian.com/x/LwAfConfluence: Plugin Module Types • 39 plugin module types • navigation: web-section, web-item • rendering: xwork, servlet • managers: component, spring • exposing services: rest, rpc-soap, rpc-xmlrpc • … • module-type plugin module to add new module types
  19. 19. Create a Google Maps Macro http://balsamiq.com
  20. 20. atlas-create-*-plugin $ atlas-create-confluence-plugin ! … [INFO] --- maven-confluence-plugin:5.0.3:create (default-cli) @ standalone-pom --- [INFO] determining latest stable product version... [INFO] using latest stable product version: 5.5.3 [INFO] determining latest stable data version... [INFO] using latest stable data version: 5.5.3 Define value for groupId: : com.k15t.confluence Define value for artifactId: : google-maps Define value for version: 1.0-SNAPSHOT: : Define value for package: com.k15t.confluence: : Confirm properties configuration: groupId: com.k15t.confluence artifactId: example version: 1.0-SNAPSHOT package: com.k15t.confluence …
  21. 21. Project Structure atlassian-plugin.xml pom.xml (maven)
  22. 22. 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" 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.k15t.confluence</groupId> <artifactId>google-maps</artifactId> <version>1.0-SNAPSHOT</version> ! … ! <properties> <confluence.version>5.5.3</confluence.version> <confluence.data.version>5.5.3</confluence.data.version> <amps.version>5.0.3</amps.version> <plugin.testrunner.version>1.2.0</plugin.testrunner.version> </properties> </project>
  23. 23. atlassian-plugin.xml <?xml version="1.0" encoding="UTF-8"?> ! <atlassian-plugin key="${project.groupId}.${project.artifactId}" name="${project.name}" plugins-version="2"> <plugin-info> <description>${project.description}</description> <version>${project.version}</version> <vendor name="${project.organization.name}" url="${project.organization.url}"/> <param name="plugin-icon">images/pluginIcon.png</param> <param name="plugin-logo">images/pluginLogo.png</param> </plugin-info> ! … ! </atlassian-plugin>
  24. 24. Plugin Module Types • xhtml-macro: Outputs HTML that can be embedded in a page • web-resource: Allows you to include JavaScript and CSS resources
  25. 25. Macros
  26. 26. Macros
  27. 27. Macros
  28. 28. Macros
  29. 29. Macros
  30. 30. Macros
  31. 31. Macro Parameter https://developer.atlassian.com/x/oAAf type = “ ” • boolean • enum • string • spacekey • attachment • username • confluence-content … /> • required • multiple • default <paramerter name = “ ”
  32. 32. atlassian-plugin.xml <?xml version="1.0" encoding="UTF-8"?> ! … ! <!-- add our macros --> <xhtml-macro key="google-maps-macro" name="google-maps-macro" class="com.k15t.confluence.googlemaps.GoogleMapsMacro"> <category name="confluence-content"/> <parameters> <parameter name="latitude" type="string" required="true"></parameter> <parameter name="longitude" type="string" required="true"></parameter> </parameters> </xhtml-macro> ! … ! </atlassian-plugin>
  33. 33. GoogleMapsMacro.java public class GoogleMapsMacro implements Macro { ! … ! @Override public String execute(Map<String, String> properties, String body, ConversionContext conversionContext) throws MacroExecutionException { ! … } ! ! @Override public BodyType getBodyType() { return BodyType.NONE; } ! ! @Override public OutputType getOutputType() { return OutputType.BLOCK; } }
  34. 34. GoogleMapsMacro.java public class GoogleMapsMacro implements Macro { ! private static final String template = "velocity/googlemaps.vm"; private static final String PARAM_LATITUDE = "latitude"; private static final String PARAM_LONGITUDE = "longitude"; ! @Override public String execute(Map<String, String> properties, String body, ConversionContext conversionContext) throws MacroExecutionException { ! String latitude = properties.get(PARAM_LATITUDE); String longitude = properties.get(PARAM_LONGITUDE); ! … ! Map velocityContext = MacroUtils.defaultVelocityContext(); velocityContext.put(PARAM_LATITUDE, latitude); velocityContext.put(PARAM_LONGITUDE, longitude); return VelocityUtils.getRenderedTemplate(template, velocityContext); } … }
  35. 35. velocity/googlemaps.vm #requireResource("com.k15t.confluence.google-maps:google-maps-view-resources") ! <div id="google-maps-placeholder" data-coordinates-latitude="$latitude" data-coordinates- longitude="$longitude" style="width:100%; height:400px"></div>
  36. 36. atlas-create-*-plugin-module $ atlas-create-confluence-plugin-module ! … Choose Plugin Module: 1: Blueprint 2: Component Import 3: Component 4: Keyboard Shortcut 5: Downloadable Plugin Resource 6: Gadget Plugin Module 7: Licensing API Support 8: Module Type 9: REST Plugin Module 10: Servlet Context Listener 11: Servlet Context Parameter 12: Servlet Filter 13: Servlet 14: Template Context Item 15: Web Item 16: Web Panel 17: Web Panel Renderer 18: Web Resource 19: Web Resource Transformer 20: Web Section Choose a number (1/2/3/4/5/6/7/8/9/10/11/12/13/14/15/16/17/18/19/20):…
  37. 37. atlassian-plugin.xml <?xml version="1.0" encoding="UTF-8"?> ! … ! <web-resource key="google-maps-view-resources" name="google-maps-view-resources"> <dependency>com.atlassian.auiplugin:ajs</dependency> ! <!-- google API--> <resource name="googlemaps-api.js" type="download" location="/js/google/googlemaps.js" /> <!-- view --> <resource name="googlemaps-view.js" type="download" location="/js/view/googlemaps.js"/> </web-resource> ! … ! </atlassian-plugin>
  38. 38. atlas-cli pi $ atlas-cli ! … [INFO] Scanning for projects… … [INFO] Opening port 4330 for socket cli access [INFO] Waiting for commands... maven> ! maven> pi … [INFO] Building jar: /Users/tobias/temp/google-maps/target/google-maps-1.0-SNAPSHOT.jar … [INFO] Install Plugin: Uploading 'google-maps-1.0-SNAPSHOT.jar' to server via UPM: http:// localhost:1990/confluence [INFO] Current project: google-maps [INFO] Execution time: 3162 ms maven>
  39. 39. Google Maps Macro
  40. 40. atlassian-plugin.xml <?xml version="1.0" encoding="UTF-8"?> ! … ! <web-resource key="google-maps-editor-resources" name="google-maps-editor-resources"> … ! <!-- rte dialog--> <transformation extension="soy"> <transformer key="soyTransformer"/> </transformation> ! <resource name="googlemaps-picker.css" type="download" location="/css/editor/ googlemaps.css"/> <resource name="googlemaps-picker.js" type="download" location="/js/editor/googlemaps.js"/> <resource name="googlemaps-templates.js" type="download" location="/js/editor/ googlemaps.soy"/> ! <context>page</context> </web-resource> ! … ! </atlassian-plugin>
  41. 41. js/editor/googlemaps.js (function ($) { AJS.bind('init.rte', function () { AJS.MacroBrowser.setMacroJsOverride('google-maps-macro', { opener:function (macro) { openCoordinatesDialog(macro); } }); … function openCoordinatesDialog(macro) { … dialog.addSubmit("Save", insertMacroIntoEditor); … } … function insertMacroIntoEditor () { … var macroRenderRequest = { contentId:Confluence.Editor.getContentId(), macro:getMacroDefinition() }; tinymce.confluence.MacroUtils.insertMacro(macroRenderRequest); … }; });
  42. 42. js/editor/googlemaps.soy {namespace Confluence.ManageCoordinates.Templates} ! {template .manageCoordinatesForm} <div id="manage-coordinates-form"> <form class="aui"> <div id="manage-coordinates-container"> <div id="manage-coordinates-canvas"></div> <div id="manage-coordinates-fields"> <div class="field-group"> <strong>Coordinates:</strong> </div> <div class="field-group"> <label for="latitude-value">Latitude:</label> <input class="text" type="text" id="latitude-value" name="latitude-value" title="Latitude" value=""> <div id="latitude-error" class="error"></div> </div> <div class="field-group"> <label for="longitude-value">Longitude:</label> <input class="text" type="text" id="longitude-value" name="longitude- value" title="Longitude" value=""> <div id="longitude-error" class="error"></div> </div> …
  43. 43. Replacing the default Macro ‘Edit’
  44. 44. Replacing the default Macro ‘Edit’
  45. 45. GoogleMapsMacro.java public class GoogleMapsMacro implements Macro { ! ! @Override public String execute(Map<String, String> properties, String body, ConversionContext conversionContext) throws MacroExecutionException { ! … ! if (RenderContext.PDF.equals(conversionContext.getPageContext().getOutputType())) { return VelocityUtils.getRenderedTemplate(template_PDF, velocityContext); } else { return VelocityUtils.getRenderedTemplate(template, velocityContext); } } … }
  46. 46. velocity/googlemaps-static.vm <img src="http://maps.googleapis.com/maps/api/staticmap?center=$latitude, $longitude&zoom=8&size=800x400&maptype=roadmap&markers=color:red%7Clabel:%7C$latitude, $longitude"></img>
  47. 47. Atlassian SDK - Getting Started Set up the SDK Prerequisites Install the Atlassian SDK Explore the Installed SDK and the atlas Commands Create a Hello World Add-on https://developer.atlassian.com/x/ZAIr
  48. 48. Atlassian SDK - Getting Started Set up the SDK Prerequisites Install the Atlassian SDK Explore the Installed SDK and the atlas Commands Create a Hello World Add-on https://developer.atlassian.com/x/ZAIr Share or sell
  49. 49. Extend Atlassian products for your team … or share or sell on the Atlassian Marketplace. Build amazing Add-ons
  50. 50. Atlassian SDK - Getting Started Set up the SDK Prerequisites Install the Atlassian SDK Explore the Installed SDK and the atlas Commands Create a Hello World Add-on https://developer.atlassian.com/x/ZAIr Share or sell
  51. 51. Product-Developer for Atlassian JIRA and Confluence www.k15t.com contact@k15t.com K15t Stand 34

×