Plugin UI with AUI - Atlassian Summit 2012

The Right Tool For the JobUsing AUI for your Atlassian Plugin UI

DIY

The right tools make things easier.

The right tools will also help your Plugin UI.

DIY UI

Silver Bullet UI

Atlassian UI for Atlassian UI

AUI

History of AUI

So what's in AUI now?

Plus keyboard shortcuts,

extra libraries,helper functions,Soy templates,Page Objects

and experimental components!

> make auiOne zip file

Harmonious design with AUI

You want this...

...not this

Extremes aren't required...

...but it should be harmonious

AUI tips

Or AJS.version in a console near you.

Show me the code, already.

Dropdown2

First, the trigger.

<a href="#dwarfers" class="aui-dropdown2-trigger" aria-owns="dwarfers" aria-haspopup="true">Shipmates</a>

Dropdown2

Then, the dropdown:

<div id="dwarfers"

class="aui-dropdown2 aui-style-default">

<ul class="aui-list-truncate">

<li><a href="URI">Lister</a></li>

<li><a href="URI">Rimmer</a></li>

</ul>

</div>

Dropdown2

That's it. You're done. No JS to match up – just include the markup and away you go.

WAI Why ARIA?

Accessible Rich Internet Applications Suite Paves the way for better a11y Excellent way to declare and read state

Keeping up with AUI

Docs, contribution guide, release notes: http://go.atlassian.com/aui

You will also find links to... Demos Sandbox Bitbucket repo Bug tracker

One last thing – swag!