atlascamp 2010: needs more jquery - using advanced javascript in atlassian plugins - zach davis
TRANSCRIPT
Needs more jQueryUsing advanced JavaScript in
Atlassian Plugins
Tuesday, November 2, 2010
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
Tuesday, November 2, 2010
AUIAtlassian User Interface
Tuesday, November 2, 2010
“owie”Atlassian User Interface
Tuesday, November 2, 2010
Tuesday, November 2, 2010
Tuesday, November 2, 2010
AUI Dropdown
Tuesday, November 2, 2010
AUI Dropdown
Tuesday, November 2, 2010
AUI Dropdown
Tuesday, November 2, 2010
AUI Dropdown
Tuesday, November 2, 2010
Tuesday, November 2, 2010
AUI Dialog
Tuesday, November 2, 2010
AUI DialogAUI Forms
Tuesday, November 2, 2010
AUI Toolbar
Tuesday, November 2, 2010
AUI Dialog
Tuesday, November 2, 2010
AUI Dialog
Tuesday, November 2, 2010
AUI Dialog
Tuesday, November 2, 2010
AUI Dialog
Not in AUI
Tuesday, November 2, 2010
AUI Dialog
Not in AUI. Yet.
Tuesday, November 2, 2010
AUI is driving a lot of our UI innovation.
Tuesday, November 2, 2010
AUI is driving a lot of our UI innovation.
It can drive yours too.
Tuesday, November 2, 2010
Who am I?
• Zach Davis
• Front-end Developer
• Integration Team
• San Francisco
Tuesday, November 2, 2010
What
Why
How
Where
?
Tuesday, November 2, 2010
What the Atlassian User Interface library is
Why
How
Where
?
Tuesday, November 2, 2010
What
Why we chose jQuery
How
Where
?
Tuesday, November 2, 2010
What
Why you should choose AUI
How
Where
?
Tuesday, November 2, 2010
What
Why
How to use AUI
Where
?
Tuesday, November 2, 2010
What
Why
How
Where AUI is now
?
Tuesday, November 2, 2010
What
Why
How
Where AUI is headed
?
Tuesday, November 2, 2010
What
Why
How
Where
Questions?
Tuesday, November 2, 2010
What is the Atlassian User Interface library?
Why
How
Where
?
Tuesday, November 2, 2010
“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
Tuesday, November 2, 2010
What AUI provides• Wraps jQuery
• JS components
• JS utilities
• Ready to go CSS
Tuesday, November 2, 2010
AUI vs AJS
Tuesday, November 2, 2010
AUI vs AJS
Tuesday, November 2, 2010
AUI vs AJS
Tuesday, November 2, 2010
Dialog
Tuesday, November 2, 2010
Dialog
Tuesday, November 2, 2010
Inline Dialog
Tuesday, November 2, 2010
Inline Dialog
Tuesday, November 2, 2010
Dropdown
Tuesday, November 2, 2010
Dropdown
Tuesday, November 2, 2010
Forms
Tuesday, November 2, 2010
Forms
Tuesday, November 2, 2010
What
Why did Atlassian choose jQuery?
How
Where
?
Tuesday, November 2, 2010
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
Tuesday, November 2, 2010
less work, more awesome
Tuesday, November 2, 2010
Why Atlassian chose jQueryJanuary, 2008
Tuesday, November 2, 2010
What
Why should you care?
How
Where
?
Tuesday, November 2, 2010
Consistent look and feel
Tuesday, November 2, 2010
Ready to use components
Tuesday, November 2, 2010
Helpful utilities
Tuesday, November 2, 2010
What
Why
How do you use AUI?
Where
?
Tuesday, November 2, 2010
Dialog
Tuesday, November 2, 2010
Dialog
var popup = new AJS.Dialog(400, 200, "my-popup");popup.show( );
Tuesday, November 2, 2010
Inline Dialog
Tuesday, November 2, 2010
Inline Dialog
AJS.InlineDialog(AJS.$("#my-trigger"), 1, "dialog-content.html");
Tuesday, November 2, 2010
Dropdown
Tuesday, November 2, 2010
Dropdown
AJS.$("#my-dropdown").dropdown("Standard");
Tuesday, November 2, 2010
AJS.format
Tuesday, November 2, 2010
AJS.format("Showing entries {0} - {1} of {2}", 0, 10, 11);
AJS.format
Tuesday, November 2, 2010
>> Showing entries 0 - 10 of 11
AJS.format
AJS.format("Showing entries {0} - {1} of {2}", 0, 10, 11);
Tuesday, November 2, 2010
Keyboard shortcuts
Tuesday, November 2, 2010
Keyboard shortcuts
AJS.whenIType("cl").click("#test-click");
Tuesday, November 2, 2010
Keyboard shortcuts
AJS.whenIType("cl").click("#test-click");
AJS.whenIType("sf").execute(someFunction);
Tuesday, November 2, 2010
Sounds great...
Tuesday, November 2, 2010
Sounds great...
...but how do I get it in my plugin?
Tuesday, November 2, 2010
Sounds great...
$webResourceManager.requireResource("com.atlassian.auiplugin:ajs")
...but how do I get it in my plugin?
Tuesday, November 2, 2010
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>
Tuesday, November 2, 2010
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")
Tuesday, November 2, 2010
What
Why
How do you use AUI?
Where
?
Tuesday, November 2, 2010
What
Why
How
Where is AUI now?
?
Tuesday, November 2, 2010
• 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
Tuesday, November 2, 2010
Public vs Private Components
Tuesday, November 2, 2010
Public vs Private Components
Tuesday, November 2, 2010
Public vs Private Components
Tuesday, November 2, 2010
What
Why
How
Where is AUI headed?
?
Tuesday, November 2, 2010
More formalized processes
• Testing
• Builds
• Infrastructure
• Dedicated resources
Tuesday, November 2, 2010
Community contributions
Tuesday, November 2, 2010
Community feedback
Tuesday, November 2, 2010
What
Why
How
Where
?
Tuesday, November 2, 2010
What
Why
How
Where
Questions?
Tuesday, November 2, 2010
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/
Tuesday, November 2, 2010
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)
Tuesday, November 2, 2010