Weitere ähnliche Inhalte Ähnlich wie AtlasCamp 2010: Needs more jQuery - Using advanced Javascript in Atlassian Plugins - Zach Davis (20) AtlasCamp 2010: Needs more jQuery - Using advanced Javascript in Atlassian Plugins - Zach Davis21. AUI is driving a lot of our UI innovation.
Tuesday, November 2, 2010
22. AUI is driving a lot of our UI innovation.
It can drive yours too.
Tuesday, November 2, 2010
23. Who am I?
• Zach Davis
• Front-end Developer
• Integration Team
• San Francisco
Tuesday, November 2, 2010
25. What the Atlassian User Interface library is
Why
How
Where
?
Tuesday, November 2, 2010
32. What is the Atlassian User Interface library?
Why
How
Where
?
Tuesday, November 2, 2010
33. “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
36. What AUI provides
• Wraps jQuery
• JS components
• JS utilities
• Ready to go CSS
Tuesday, November 2, 2010
49. 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
60. Dialog
var popup = new AJS.Dialog(400, 200, "my-
popup");
popup.show( );
Tuesday, November 2, 2010
67. >> Showing entries 0 - 10 of 11
AJS.format
AJS.format("Showing entries {0} - {1} of {2}", 0, 10,
11);
Tuesday, November 2, 2010
74. 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
75. 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
78. • 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
89. 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