0
Needs more jQuery
Using advanced JavaScript in
Atlassian Plugins
Tuesday, November 2, 2010
Needs more jQuery
Using advanced JavaScript in
Atlassian Plugins
Tuesday, November 2, 2010
Needs more jQuery
Using jQuery and AUI to create
better plugins with less work
Tuesday, November 2, 2010
AUI
Atlassian 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
compon...
?
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 A...
?
Tuesday, November 2, 2010
Tuesday, November 2, 2010
less work, more awesome
Tuesday, November 2, 2010
Why Atlassian chose jQuery
January, 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,...
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 ...
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?
T...
atlassian-plugin.xml
<web-resource name="Fake plugin resources" key="fake-resources">
<dependency>com.atlassian.auiplugin:...
atlassian-plugin.xml
<web-resource name="Fake plugin resources" key="fake-resources">
<dependency>com.atlassian.auiplugin:...
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+In...
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/
htt...
More information
• Developer Docs: http://confluence.atlassian.com/display/AUI/
Atlassian+User+Interface+(AUI)+Developer+Do...
Upcoming SlideShare
Loading in...5
×

AtlasCamp 2010: Needs more jQuery - Using advanced Javascript in Atlassian Plugins - Zach Davis

993

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
993
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
14
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "AtlasCamp 2010: Needs more jQuery - Using advanced Javascript in Atlassian Plugins - Zach Davis"

  1. 1. Needs more jQuery Using advanced JavaScript in Atlassian Plugins Tuesday, November 2, 2010
  2. 2. Needs more jQuery Using advanced JavaScript in Atlassian Plugins Tuesday, November 2, 2010
  3. 3. Needs more jQuery Using jQuery and AUI to create better plugins with less work Tuesday, November 2, 2010
  4. 4. AUI Atlassian User Interface Tuesday, November 2, 2010
  5. 5. “owie” Atlassian User Interface Tuesday, November 2, 2010
  6. 6. Tuesday, November 2, 2010
  7. 7. Tuesday, November 2, 2010
  8. 8. AUI Dropdown Tuesday, November 2, 2010
  9. 9. AUI Dropdown Tuesday, November 2, 2010
  10. 10. AUI Dropdown Tuesday, November 2, 2010
  11. 11. AUI Dropdown Tuesday, November 2, 2010
  12. 12. Tuesday, November 2, 2010
  13. 13. AUI Dialog Tuesday, November 2, 2010
  14. 14. AUI DialogAUI Forms Tuesday, November 2, 2010
  15. 15. AUI Toolbar Tuesday, November 2, 2010
  16. 16. AUI Dialog Tuesday, November 2, 2010
  17. 17. AUI Dialog Tuesday, November 2, 2010
  18. 18. AUI Dialog Tuesday, November 2, 2010
  19. 19. AUI Dialog Not in AUI Tuesday, November 2, 2010
  20. 20. AUI Dialog Not in AUI. Yet. Tuesday, November 2, 2010
  21. 21. AUI is driving a lot of our UI innovation. Tuesday, November 2, 2010
  22. 22. AUI is driving a lot of our UI innovation. It can drive yours too. Tuesday, November 2, 2010
  23. 23. Who am I? • Zach Davis • Front-end Developer • Integration Team • San Francisco Tuesday, November 2, 2010
  24. 24. What Why How Where ? Tuesday, November 2, 2010
  25. 25. What the Atlassian User Interface library is Why How Where ? Tuesday, November 2, 2010
  26. 26. What Why we chose jQuery How Where ? Tuesday, November 2, 2010
  27. 27. What Why you should choose AUI How Where ? Tuesday, November 2, 2010
  28. 28. What Why How to use AUI Where ? Tuesday, November 2, 2010
  29. 29. What Why How Where AUI is now ? Tuesday, November 2, 2010
  30. 30. What Why How Where AUI is headed ? Tuesday, November 2, 2010
  31. 31. What Why How Where Questions? Tuesday, November 2, 2010
  32. 32. What is the Atlassian User Interface library? Why How Where ? Tuesday, November 2, 2010
  33. 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
  34. 34. ? Tuesday, November 2, 2010
  35. 35. less work, more awesome Tuesday, November 2, 2010
  36. 36. What AUI provides • Wraps jQuery • JS components • JS utilities • Ready to go CSS Tuesday, November 2, 2010
  37. 37. AUI vs AJS Tuesday, November 2, 2010
  38. 38. AUI vs AJS Tuesday, November 2, 2010
  39. 39. AUI vs AJS Tuesday, November 2, 2010
  40. 40. Dialog Tuesday, November 2, 2010
  41. 41. Dialog Tuesday, November 2, 2010
  42. 42. Inline Dialog Tuesday, November 2, 2010
  43. 43. Inline Dialog Tuesday, November 2, 2010
  44. 44. Dropdown Tuesday, November 2, 2010
  45. 45. Dropdown Tuesday, November 2, 2010
  46. 46. Forms Tuesday, November 2, 2010
  47. 47. Forms Tuesday, November 2, 2010
  48. 48. What Why did Atlassian choose jQuery? How Where ? Tuesday, November 2, 2010
  49. 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
  50. 50. ? Tuesday, November 2, 2010
  51. 51. Tuesday, November 2, 2010
  52. 52. less work, more awesome Tuesday, November 2, 2010
  53. 53. Why Atlassian chose jQuery January, 2008 Tuesday, November 2, 2010
  54. 54. What Why should you care? How Where ? Tuesday, November 2, 2010
  55. 55. Consistent look and feel Tuesday, November 2, 2010
  56. 56. Ready to use components Tuesday, November 2, 2010
  57. 57. Helpful utilities Tuesday, November 2, 2010
  58. 58. What Why How do you use AUI? Where ? Tuesday, November 2, 2010
  59. 59. Dialog Tuesday, November 2, 2010
  60. 60. Dialog var popup = new AJS.Dialog(400, 200, "my- popup"); popup.show( ); Tuesday, November 2, 2010
  61. 61. Inline Dialog Tuesday, November 2, 2010
  62. 62. Inline Dialog AJS.InlineDialog(AJS.$("#my-trigger"), 1, "dialog- content.html"); Tuesday, November 2, 2010
  63. 63. Dropdown Tuesday, November 2, 2010
  64. 64. Dropdown AJS.$("#my-dropdown").dropdown("Standard"); Tuesday, November 2, 2010
  65. 65. AJS.format Tuesday, November 2, 2010
  66. 66. AJS.format("Showing entries {0} - {1} of {2}", 0, 10, 11); AJS.format Tuesday, November 2, 2010
  67. 67. >> Showing entries 0 - 10 of 11 AJS.format AJS.format("Showing entries {0} - {1} of {2}", 0, 10, 11); Tuesday, November 2, 2010
  68. 68. Keyboard shortcuts Tuesday, November 2, 2010
  69. 69. Keyboard shortcuts AJS.whenIType("cl").click("#test-click"); Tuesday, November 2, 2010
  70. 70. Keyboard shortcuts AJS.whenIType("cl").click("#test-click"); AJS.whenIType("sf").execute(someFunction); Tuesday, November 2, 2010
  71. 71. Sounds great... Tuesday, November 2, 2010
  72. 72. Sounds great... ...but how do I get it in my plugin? Tuesday, November 2, 2010
  73. 73. Sounds great... $webResourceManager.requireResource ("com.atlassian.auiplugin:ajs") ...but how do I get it in my plugin? Tuesday, November 2, 2010
  74. 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. 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
  76. 76. What Why How do you use AUI? Where ? Tuesday, November 2, 2010
  77. 77. What Why How Where is AUI now? ? Tuesday, November 2, 2010
  78. 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
  79. 79. Public vs Private Components Tuesday, November 2, 2010
  80. 80. Public vs Private Components Tuesday, November 2, 2010
  81. 81. Public vs Private Components Tuesday, November 2, 2010
  82. 82. What Why How Where is AUI headed? ? Tuesday, November 2, 2010
  83. 83. More formalized processes • Testing • Builds • Infrastructure • Dedicated resources Tuesday, November 2, 2010
  84. 84. Community contributions Tuesday, November 2, 2010
  85. 85. Community feedback Tuesday, November 2, 2010
  86. 86. What Why How Where ? Tuesday, November 2, 2010
  87. 87. What Why How Where Questions? Tuesday, November 2, 2010
  88. 88. 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
  89. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×