atlascamp 2010: needs more jquery - using advanced javascript in atlassian plugins - zach davis

Needs more jQueryUsing advanced JavaScript in

Atlassian Plugins

Tuesday, November 2, 2010

Needs more jQueryUsing jQuery and AUI to create better plugins with less work


AUIAtlassian User Interface


“owie”Atlassian User Interface


AUI Dropdown


AUI Dialog


AUI DialogAUI Forms


AUI Toolbar


AUI Dialog


AUI Dialog

Not in AUI


AUI Dialog

Not in AUI. Yet.


AUI is driving a lot of our UI innovation.


AUI is driving a lot of our UI innovation.

It can drive yours too.


Who am I?

• Zach Davis

• Front-end Developer

• Integration Team

• San Francisco


What

Why

How

Where

?


What the Atlassian User Interface library is

Why

How

Where

?


What

Why we chose jQuery

How

Where

?


What

Why you should choose AUI

How

Where

?


What

Why

How to use AUI

Where

?


What

Why

How

Where AUI is now

?


What

Why

How

Where AUI is headed

?


What

Why

How

Where

Questions?


What is the Atlassian User Interface library?

Why

How

Where

?


“The Atlassian User Interface (AUI) is a set of reusable, cross-browser tested, high-quality JavaScript and CSS UI components. We developed AUI for use in Atlassian applications.”Tuesday, November 2, 2010

?Tuesday, November 2, 2010

less work, more awesome


What AUI provides• Wraps jQuery

• JS components

• JS utilities

• Ready to go CSS


AUI vs AJS


Dialog


Inline Dialog


Dropdown


Forms


What

Why did Atlassian choose jQuery?

How

Where

?


jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

“”Tuesday, November 2, 2010

?Tuesday, November 2, 2010

less work, more awesome


Why Atlassian chose jQueryJanuary, 2008


What

Why should you care?

How

Where

?


Consistent look and feel


Ready to use components


Helpful utilities


What

Why

How do you use AUI?

Where

?


Dialog


Dialog

var popup = new AJS.Dialog(400, 200, "my-popup");popup.show( );


Inline Dialog


Inline Dialog

AJS.InlineDialog(AJS.$("#my-trigger"), 1, "dialog-content.html");


Dropdown


Dropdown

AJS.$("#my-dropdown").dropdown("Standard");


AJS.format


AJS.format("Showing entries {0} - {1} of {2}", 0, 10, 11);

AJS.format


>> Showing entries 0 - 10 of 11

AJS.format

AJS.format("Showing entries {0} - {1} of {2}", 0, 10, 11);


Keyboard shortcuts


Keyboard shortcuts

AJS.whenIType("cl").click("#test-click");


Keyboard shortcuts

AJS.whenIType("cl").click("#test-click");

AJS.whenIType("sf").execute(someFunction);


Sounds great...


Sounds great...

...but how do I get it in my plugin?


Sounds great...

$webResourceManager.requireResource("com.atlassian.auiplugin:ajs")

...but how do I get it in my plugin?


atlassian-plugin.xml

<web-resource name="Fake plugin resources" key="fake-resources"><dependency>com.atlassian.auiplugin:ajs</dependency><resource type="download" name="fake-plugin.js" location="js/fake-plugin.js"/><resource type="download" name="fake-plugin.css" location="css/fake-plugin.css"/>

</web-resource>


atlassian-plugin.xml

<web-resource name="Fake plugin resources" key="fake-resources"><dependency>com.atlassian.auiplugin:ajs</dependency><resource type="download" name="fake-plugin.js" location="js/fake-plugin.js"/><resource type="download" name="fake-plugin.css" location="css/fake-plugin.css"/>

</web-resource>

fake-plugin.vm

$webResourceManager.requireResource("com.atlassian.example:fake-resources")


What

Why

How do you use AUI?

Where

?


What

Why

How

Where is AUI now?

?


• Latest version: 3.2

• All products on AUI 3.x

• Open source http://confluence.atlassian.com/display/AUI/Atlassian+User+Interface+(AUI)+Developer+Documentation

https://studio.atlassian.com/browse/AJS


http://confluence.atlassian.com/display/AUI/Atlassian+User+Interface+(AUI)+Developer+Documentation






Public vs Private Components


What

Why

How

Where is AUI headed?

?


More formalized processes

• Testing

• Builds

• Infrastructure

• Dedicated resources


Community contributions


Community feedback


What

Why

How

Where

?


What

Why

How

Where

Questions?


Photo credits

http://www.flickr.com/photos/dmitry-baranovskiy/2378867408/

http://www.flickr.com/photos/cayusa/384187184/

http://www.flickr.com/photos/oskay/437341128/

http://www.flickr.com/photos/rocketlass/2851359961/

http://www.flickr.com/photos/mimk/1350963678/




http://www.flickr.com/photos/cayusa/384187184/in/photostream/

http://www.flickr.com/photos/cayusa/384187184/in/photostream/







More information

• Developer Docs: http://confluence.atlassian.com/display/AUI/Atlassian+User+Interface+(AUI)+Developer+Documentation

• Javadocs: http://docs.atlassian.com/aui/3.0/

• Demos: https://studio.atlassian.com/source/browse/~raw,r=HEAD/AJS/trunk/auiplugin/src/demo/index.html (Studio login required)






http://docs.atlassian.com/aui/3.0/

http://docs.atlassian.com/aui/3.0/

atlascamp 2010: needs more jquery - using advanced javascript in atlassian plugins - zach davis

Documents

aui dropdown

aui vs ajs

aui toolbar

aui atlassian user interface

atlassian user interface

dropdown ajs

inline dialog ajs

aui dialogaui forms