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)
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
Here, you'll update the dependencies to reflect the
TemplateRenderer module you added earlier.
- Open your
- Locate the
- Find the
templateRendererin a dependency group above the
- Save and close the file.
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.
src/main/resourceswithin the base directory
Create an admin.vm Velocity template, and fill in the contents with:
Step 3. Update
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.
TemplateRenderer will display the admin.vm template you just created.
TemplateRendererand use your new admin.vm template.
MyPluginServletshould look as follows:
- Save the changes and close the file.
atlas-mvn packageto reload your plugin.
- Return to http://localhost:2990/jira/plugins/servlet/test.
- 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.
Open your admin.vm Velocity template.
<meta>element directly after the title.
<meta name="decorator" content="atl.admin">. This tag should be inside the
- Save the file.
Leave the file open for future changes.
- Use QuickReload to update your changes.
The page loads and now uses an AUI decorator.
- Return to your admin.vm file.
Add some CSS.
Replace your admin.vm contents with the following:
- Reload the plugin and return once again to your servlet at http://localhost:2990/jira/plugins/servlet/test.
Your add-on looks great! Now you'll add a
POST method so it can store and retrieve user data.