Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

Like this? Share it with your network

Share

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

  • 1,262 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,262
On Slideshare
1,262
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
9
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Needs more jQuery Using advanced JavaScript in Atlassian Plugins Tuesday, November 2, 2010
  • 2. Needs more jQuery Using advanced JavaScript in Atlassian Plugins Tuesday, November 2, 2010
  • 3. Needs more jQuery Using jQuery and AUI to create better plugins with less work Tuesday, November 2, 2010
  • 4. AUI Atlassian User Interface Tuesday, November 2, 2010
  • 5. “owie” Atlassian User Interface Tuesday, November 2, 2010
  • 6. Tuesday, November 2, 2010
  • 7. Tuesday, November 2, 2010
  • 8. AUI Dropdown Tuesday, November 2, 2010
  • 9. AUI Dropdown Tuesday, November 2, 2010
  • 10. AUI Dropdown Tuesday, November 2, 2010
  • 11. AUI Dropdown Tuesday, November 2, 2010
  • 12. Tuesday, November 2, 2010
  • 13. AUI Dialog Tuesday, November 2, 2010
  • 14. AUI Forms AUI Dialog Tuesday, November 2, 2010
  • 15. AUI Toolbar Tuesday, November 2, 2010
  • 16. AUI Dialog Tuesday, November 2, 2010
  • 17. AUI Dialog Tuesday, November 2, 2010
  • 18. AUI Dialog Tuesday, November 2, 2010
  • 19. AUI Dialog Not in AUI Tuesday, November 2, 2010
  • 20. AUI Dialog Not in AUI. Yet. Tuesday, November 2, 2010
  • 21. 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
  • 24. What Why How Where ? Tuesday, November 2, 2010
  • 25. What the Atlassian User Interface library is Why How Where ? Tuesday, November 2, 2010
  • 26. What Why we chose jQuery How Where ? Tuesday, November 2, 2010
  • 27. What Why you should choose AUI How Where ? Tuesday, November 2, 2010
  • 28. What Why How to use AUI Where ? Tuesday, November 2, 2010
  • 29. What Why How Where AUI is now ? Tuesday, November 2, 2010
  • 30. What Why How Where AUI is headed ? Tuesday, November 2, 2010
  • 31. What Why How Where Questions? 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
  • 34. ? Tuesday, November 2, 2010
  • 35. less work, more awesome Tuesday, November 2, 2010
  • 36. What AUI provides • Wraps jQuery • JS components • JS utilities • Ready to go CSS Tuesday, November 2, 2010
  • 37. AUI vs AJS Tuesday, November 2, 2010
  • 38. AUI vs AJS Tuesday, November 2, 2010
  • 39. AUI vs AJS Tuesday, November 2, 2010
  • 40. Dialog Tuesday, November 2, 2010
  • 41. Dialog Tuesday, November 2, 2010
  • 42. Inline Dialog Tuesday, November 2, 2010
  • 43. Inline Dialog Tuesday, November 2, 2010
  • 44. Dropdown Tuesday, November 2, 2010
  • 45. Dropdown Tuesday, November 2, 2010
  • 46. Forms Tuesday, November 2, 2010
  • 47. Forms Tuesday, November 2, 2010
  • 48. What Why did Atlassian choose jQuery? How Where ? 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
  • 50. ? Tuesday, November 2, 2010
  • 51. Tuesday, November 2, 2010
  • 52. less work, more awesome Tuesday, November 2, 2010
  • 53. Why Atlassian chose jQuery January, 2008 Tuesday, November 2, 2010
  • 54. What Why should you care? How Where ? Tuesday, November 2, 2010
  • 55. Consistent look and feel Tuesday, November 2, 2010
  • 56. Ready to use components Tuesday, November 2, 2010
  • 57. Helpful utilities Tuesday, November 2, 2010
  • 58. What Why How do you use AUI? Where ? Tuesday, November 2, 2010
  • 59. Dialog Tuesday, November 2, 2010
  • 60. Dialog var popup = new AJS.Dialog(400, 200, "my- popup"); popup.show( ); Tuesday, November 2, 2010
  • 61. Inline Dialog Tuesday, November 2, 2010
  • 62. Inline Dialog AJS.InlineDialog(AJS.$("#my-trigger"), 1, "dialog- content.html"); Tuesday, November 2, 2010
  • 63. Dropdown Tuesday, November 2, 2010
  • 64. Dropdown AJS.$("#my-dropdown").dropdown("Standard"); Tuesday, November 2, 2010
  • 65. AJS.format Tuesday, November 2, 2010
  • 66. AJS.format AJS.format("Showing entries {0} - {1} of {2}", 0, 10, 11); Tuesday, November 2, 2010
  • 67. AJS.format AJS.format("Showing entries {0} - {1} of {2}", 0, 10, 11); >> Showing entries 0 - 10 of 11 Tuesday, November 2, 2010
  • 68. Keyboard shortcuts Tuesday, November 2, 2010
  • 69. Keyboard shortcuts AJS.whenIType("cl").click("#test-click"); Tuesday, November 2, 2010
  • 70. Keyboard shortcuts AJS.whenIType("cl").click("#test-click"); AJS.whenIType("sf").execute(someFunction); Tuesday, November 2, 2010
  • 71. Sounds great... Tuesday, November 2, 2010
  • 72. Sounds great... ...but how do I get it in my plugin? Tuesday, November 2, 2010
  • 73. Sounds great... ...but how do I get it in my plugin? $webResourceManager.requireResource ("com.atlassian.auiplugin:ajs") Tuesday, November 2, 2010
  • 74. <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 Tuesday, November 2, 2010
  • 75. <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 $webResourceManager.requireResource("com.atlassian.example:fake- resources") fake-plugin.vm Tuesday, November 2, 2010
  • 76. What Why How do you use AUI? Where ? Tuesday, November 2, 2010
  • 77. What Why How Where is AUI now? ? 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
  • 79. Public vs Private Components Tuesday, November 2, 2010
  • 80. Public vs Private Components Tuesday, November 2, 2010
  • 81. Public vs Private Components Tuesday, November 2, 2010
  • 82. What Why How Where is AUI headed? ? Tuesday, November 2, 2010
  • 83. More formalized processes • Testing • Builds • Infrastructure • Dedicated resources Tuesday, November 2, 2010
  • 84. Community contributions Tuesday, November 2, 2010
  • 85. Community feedback Tuesday, November 2, 2010
  • 86. What Why How Where ? Tuesday, November 2, 2010
  • 87. What Why How Where Questions? Tuesday, November 2, 2010
  • 88. Photo credits http://www.flickr.com/photos/dmitry-baranovskiy/2378867408/ http://www.flickr.com/photos/mimk/1350963678/ http://www.flickr.com/photos/cayusa/384187184/ http://www.flickr.com/photos/oskay/437341128/ http://www.flickr.com/photos/rocketlass/2851359961/ 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