Separation of concerns for JIRA gadgets

This blog post started out as an answer to a Stack Overflow question.

For my gadgets, I separate out all the XML, HTML, JavaScript and CSS from the atlassian-plugin.xml.

The setup is initially more complex, but once you've got this correct, the separation of concerns is much nicer than mangling everything into the atlassian-plugin.xml file.

The relative paths on the other hand do indeed look crazy.

My file system looks like this:


- resources/

    - gadgets/

        - css/

            - example.css

        - html/

            - example.html

        - js/

            - example.js

        - examaple-gadget.xml

    - atlassian-plugin.xml

In /resources/atlassian-plugin.xml:


<!-- add our web resources -->

<web-resource key="${project.artifactId}-resources" name="${project.artifactId} Web Resources">

  <dependency>com.atlassian.auiplugin:ajs</dependency>

  <resource type="download" name="example-gadgets/" location="/gadgets"/>

  <context>immersive-for-connections</context>

</web-resource>
<gadget name="Example JIRA Gadget" i18n-name-key="example-jira-gadget.name"

        key="example-jira-gadget" location="gadgets/example-gadget.xml">

  <!--

    hosted at:

    /rest/gadgets/1.0/g/${project.groupId}.${project.artifactId}:example-gadgets/gadgets/example-gadget.xml

  -->

  <description key="jira-query-gadget.description">The JIRA Query Gadget Plugin</description>

</gadget>

In /resources/gadgets/example-gadget.xml (replace ${project.artifactId} & ${project.groupId} with the correct value):


<?xml version="1.0" encoding="UTF-8" ?>

<Module>

  ...

  <Content type="html" view="example.view" preferred_width="100%"

    href="../../../../../../download/resources/${project.groupId}.${project.artifactId}:${project.artifactId}-resources/gadgets/html/example.html"/>

</Module>

In /resources/gadgets/html/example.html (replace ${project.artifactId} & ${project.groupId} with the correct value):


<!DOCTYPE html>

<html>

  <head>

    ...

    <link href="../../../../../../download/resources/${project.groupId}.${project.artifactId}:${project.artifactId}-resources/gadgets/css/example.css"

      type="text/css" rel="stylesheet">

    <script src="../../../../../../download/resources/${project.groupId}.${project.artifactId}:${project.artifactId}-resources/gadgets/js/example.js">

    </script>

  </head>

  <body>

    ...

  </body>

</html>

From this somewhat excessing starting point, you'll have content, behaviour and styles completely separated. If that floats your boat, then you'll be happy.