Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Confluence 4.0Integrating your plugin as a first class citizenRyan ThomasDeveloper, Atlassianhttp://atlss.in/confluence4#atla...
About Me           3
About Me• Confluence Developer                        3
About Me• Confluence Developer• Worked on 4.0 since January  2010                                3
About Me• Confluence Developer• Worked on 4.0 since January  2010• Managed a lot of the ecosystem  integration             ...
About Me• Confluence Developer• Worked on 4.0 since January  2010• Managed a lot of the ecosystem  integration• Deployed 4....
Agenda         4
Agenda         4
Agenda• Editor Plugin Points                         4
Agenda• Editor Plugin Points• Transformer Pipeline                         4
Agenda• Editor Plugin Points• Transformer Pipeline• XHTML in Macros                         4
Agenda• Editor Plugin Points• Transformer Pipeline• XHTML in Macros• Demonstration                         4
Editor Terminology                     5
Editor Terminology            Rich Text Editor                               5
Editor Terminology              Toolbar                        5
Editor Terminology             Insert Menu                           5
Editor Terminology           Formatting Menu                             5
Editor Terminology                     5
Editor Terminology           Macro Placeholder                               5
Editor Terminology         Macro Property Panel                                5
Formatting Menu                  6
Formatting Menu                  6
Formatting Menu• Plug into the Formatting menu  in the Toolbar                                  6
Formatting Menu• Plug into the Formatting menu  in the Toolbar• Allows you to interact with the  TinyMCE formatting styles...
Formatting Menu• Plug into the Formatting menu  in the Toolbar• Allows you to interact with the  TinyMCE formatting styles...
Formatting Menu                  7
Formatting Menu   <web-item key="editor-awesome-format" name="Awesome Format"        section="system.editor.more.formats" ...
Formatting Menu   <web-item key="editor-awesome-format" name="Awesome Format"        section="system.editor.more.formats" ...
Formatting Menu   <web-item key="editor-awesome-format" name="Awesome Format"        section="system.editor.more.formats" ...
Insert Menu              8
Insert Menu              8
Insert Menu• Add your macro to the Insert menu in  the Toolbar                                         8
Insert Menu• Add your macro to the Insert menu in  the Toolbar• Default behaviour opens Macro  Browser                    ...
Insert Menu• Add your macro to the Insert menu in  the Toolbar• Default behaviour opens Macro  Browser• Done as a web-item...
Insert Menu              9
Insert Menu   <web-item key="editor-my-macro"        name="Insert Menu Link - My Macro"        section="system.editor.feat...
Insert Menu   <web-item key="editor-my-macro"        name="Insert Menu Link - My Macro"        section="system.editor.feat...
Overriding The Macro Browser                               10
Overriding The Macro Browser• Want to use a custom dialog?                                 10
Overriding The Macro Browser• Want to use a custom dialog?• Want to perform some action before opening the Macro  Browser?...
Overriding The Macro Browser• Want to use a custom dialog?• Want to perform some action before opening the Macro  Browser?...
Overriding The Macro Browser                               11
Overriding The Macro Browser   AJS.MacroBrowser.setMacroJsOverride(my-macro, {opener:       function(macro) {          // ...
Overriding The Macro Browser     AJS.MacroBrowser.setMacroJsOverride(my-macro, {opener:         function(macro) {         ...
Overriding The Macro Browser     AJS.MacroBrowser.setMacroJsOverride(my-macro, {opener:         function(macro) {         ...
Overriding The Macro Browser     AJS.MacroBrowser.setMacroJsOverride(my-macro, {opener:         function(macro) {         ...
Overriding The Macro Browser     AJS.MacroBrowser.setMacroJsOverride(my-macro, {opener:         function(macro) {         ...
Overriding The Macro Browser     AJS.MacroBrowser.setMacroJsOverride(my-macro, {opener:         function(macro) {         ...
Image Macro Placeholders                           12
Image Macro Placeholders                           12
Image Macro Placeholders• Replaces the Macro Placeholder                                   12
Image Macro Placeholders• Replaces the Macro Placeholder• Plugins can generate their own  image, or reference static image...
Image Macro Placeholders• Replaces the Macro Placeholder• Plugins can generate their own  image, or reference static image...
Image Macro Placeholders• Replaces the Macro Placeholder• Plugins can generate their own  image, or reference static image...
Image Macro Placeholders• Replaces the Macro Placeholder• Plugins can generate their own  image, or reference static image...
Image Macro Placeholders• Replaces the Macro Placeholder• Plugins can generate their own  image, or reference static image...
Image Macro Placeholders                           13
Image Macro Placeholders   public interface EditorImagePlaceholder   {       ImagePlaceholder getImagePlaceholder(        ...
Image Macro Placeholders   public interface EditorImagePlaceholder   {       ImagePlaceholder getImagePlaceholder(        ...
Macro Property Panel                       14
Macro Property Panel                       14
Macro Property Panel                       14
Macro Property Panel• Provides contextual actions for  the macro                                    14
Macro Property Panel• Provides contextual actions for  the macro• Provides Edit and Remove  buttons                       ...
Macro Property Panel• Provides contextual actions for  the macro• Provides Edit and Remove  buttons• Custom buttons for yo...
Macro Property Panel• Provides contextual actions for  the macro• Provides Edit and Remove  buttons• Custom buttons for yo...
Macro Property Panel                       15
Macro Property Panel                      atlassian-plugin.xml   <xhtml-macro key="status" name="status" ...>       <!-- S...
Macro Property Panel                       16
Macro Property Panel  AJS.Confluence.PropertyPanel.Macro.registerButtonHandler("Grey",      function(e, macroNode) {      ...
Parameter Placeholder                        17
Parameter Placeholder                        17
Parameter Placeholder                        17
Parameter Placeholder                        17
Parameter Placeholder                        17
Parameter Placeholder                        17
Parameter Placeholder                        17
Parameter Placeholder                        18
Parameter Placeholder<parameters>    <default>        <option key="showValueInPlaceholder" value="true" />    </default>  ...
Editor Plugin Points                       19
Editor Plugin Points                       19
Editor Plugin Points • Formatting Menu                       19
Editor Plugin Points • Formatting Menu • Insert Menu & Overrides                             19
Editor Plugin Points • Formatting Menu • Insert Menu & Overrides • Image Placeholders                             19
Editor Plugin Points • Formatting Menu • Insert Menu & Overrides • Image Placeholders • Macro Property Panel              ...
Editor Plugin Points • Formatting Menu • Insert Menu & Overrides • Image Placeholders • Macro Property Panel • Parameter P...
Transformer Pipeline                       20
Transformer Pipeline                       20
Transformer Pipeline• Confluence 4.0 contains a  completely new rendering engine                                    20
Transformer Pipeline• Confluence 4.0 contains a  completely new rendering engine• Part of this engine is the  Transformer P...
Transformer Pipeline• Confluence 4.0 contains a  completely new rendering engine• Part of this engine is the  Transformer P...
Transformer Pipeline                       21
Transformer Pipeline• Confluence 4.0 stores its data in XHTML, this is known  as Storage Format - (No more wiki-markup! )  ...
Transformer Pipeline• Confluence 4.0 stores its data in XHTML, this is known  as Storage Format - (No more wiki-markup! )• ...
Transformer Pipeline• Confluence 4.0 stores its data in XHTML, this is known  as Storage Format - (No more wiki-markup! )• ...
Transformer Pipeline• Confluence 4.0 stores its data in XHTML, this is known  as Storage Format - (No more wiki-markup! )• ...
Transformer Pipeline                       22
Transformer Pipeline• The pipeline controls the rendering of Confluence  content from one format to another                ...
Transformer Pipeline• The pipeline controls the rendering of Confluence  content from one format to another• There are thre...
Transformer Pipeline• The pipeline controls the rendering of Confluence  content from one format to another• There are thre...
Transformer Pipeline• The pipeline controls the rendering of Confluence  content from one format to another• There are thre...
Transformer Pipeline• The pipeline controls the rendering of Confluence  content from one format to another• There are thre...
Transformer Pipeline
Transformer Pipeline               Storage               Format       View               Edit      Format             Form...
Transformer Pipeline                       24
Transformer Pipeline• Why?                       24
Transformer Pipeline• Why?• Allows a plugin developers to intercept the Confluence  content before or after Confluence opera...
Transformer Pipeline• Why?• Allows a plugin developers to intercept the Confluence  content before or after Confluence opera...
Transformer Pipeline• Why?• Allows a plugin developers to intercept the Confluence  content before or after Confluence opera...
Transformer Pipeline• Why?• Allows a plugin developers to intercept the Confluence  content before or after Confluence opera...
Transformer Pipeline• Why?• Allows a plugin developers to intercept the Confluence  content before or after Confluence opera...
Transformer Pipeline                    With great power• Why?• Allows a plugin developers to intercept the Confluence  con...
The New Macro Interface                          25
The New Macro Interface• Confluence 4.0 introduces a new Macro  interface                                         25
The New Macro Interface• Confluence 4.0 introduces a new Macro  interface• Required for 4.0 integration                    ...
The New Macro Interface• Confluence 4.0 introduces a new Macro  interface• Required for 4.0 integration• Default Macro body...
The New Macro Interface• Confluence 4.0 introduces a new Macro  interface• Required for 4.0 integration• Default Macro body...
The New Macro Interface                          26
The New Macro Interface@Overridepublic String execute(    Map<String, String> parameters, String body, ConversionContext c...
The New Macro Interface@Overridepublic String execute(    Map<String, String> parameters, String body, ConversionContext c...
The New Macro Interface                          27
The New Macro Interface• If you intend to output the body - You need to  render it!                                       ...
The New Macro Interface• If you intend to output the body - You need to  render it!• Confluence provides an easy mechanism ...
The New Macro Interface• If you intend to output the body - You need to  render it!• Confluence provides an easy mechanism ...
The New Macro Interface• If you intend to output the body - You need to  render it!• Confluence provides an easy mechanism ...
The New Macro Interface• If you intend to output the body - You need to  render it!• Confluence provides an easy mechanism ...
The New Macro Interface                          28
The New Macro Interface private final XhtmlContent xhtmlContent; public MyAwesomeMacro(XhtmlContent xhtmlContent) {     th...
The New Macro Interface    private final XhtmlContent xhtmlContent;    public MyAwesomeMacro(XhtmlContent xhtmlContent) { ...
Demo       29
Demo   Eric Chiang                 29
Gliffy Confluence Plugin            Confluence 3.5                             30
Gliffy Confluence Plugin    Confluence 3.5        Confluence 4.0                                           31
Macro Override    • <web-resource>       • editor scope• Overrides default macro with our own function (insert menu and au...
Macro Image Placeholder• Shows an attachment as an image  or renders it thru a pipeline                                   ...
Property Panel• Edit button (macro override)• Image resize buttons• Border button• More button   AUI Dialog               ...
Property Panel - Image Resize• Simple macro re-render                                 35
Insert Menu• web-item              36
Thanks Eric              37
Thanks Eric• Insert Menu Web Item                         37
Thanks Eric• Insert Menu Web Item• Macro Override                         37
Thanks Eric• Insert Menu Web Item• Macro Override• Property Panel                         37
Thanks Eric• Insert Menu Web Item• Macro Override• Property Panel• Image Macro Placeholder                            37
Passing The Torch                    38
Passing The Torch                    38
Passing The Torch• Confluence Ecosystem  Integration                        38
Passing The Torch• Confluence Ecosystem  Integration• Technical Point of Contact  inside Confluence                         ...
Passing The Torch• Confluence Ecosystem  Integration• Technical Point of Contact  inside Confluence• Introducing......      ...
Joseph Clark               38
Joseph Clark• Confluence Team Lead                        38
Joseph Clark• Confluence Team Lead• 2 Years on the Team                        38
Joseph Clark• Confluence Team Lead• 2 Years on the Team• .NET Background                        38
Joseph Clark• Confluence Team Lead• 2 Years on the Team• .NET Background• All-round awesome fellow!                        ...
Joseph Clark• Confluence Team Lead• 2 Years on the Team• .NET Background• All-round awesome fellow!• jclark@atlassian.com  ...
Get Started Today                    39
Get Started Today                    39
Get Started Today• Try out your plugin in  Confluence 4.0                           39
Get Started Today• Try out your plugin in  Confluence 4.0• Play with the new plugin  points                             39
Get Started Today• Try out your plugin in  Confluence 4.0• Play with the new plugin  points• Check out the documentation  h...
Questions     ?            Joseph Clark            jclark@atlassian.com            Ryan Thomas            rthomas@atlassia...
Thank you!
Pimp My Confluence Plugin - AtlasCamp 2011
Upcoming SlideShare
Loading in …5
×

Pimp My Confluence Plugin - AtlasCamp 2011

How do you enable a richer experience for users of your plugin? With the impending release of Confluence 4.0 we will show you not only how to make your plugins Confluence 4.0 compatible but how to dress them up to take advantage of all the new plugin points Confluence 4.0 has to offer, allowing you to give your users a richer editing experience.

Ryan Thomas, Confluence Developer

Related Books

Free with a 30 day trial from Scribd

See all
  • Login to see the comments

Pimp My Confluence Plugin - AtlasCamp 2011

  1. 1. Confluence 4.0Integrating your plugin as a first class citizenRyan ThomasDeveloper, Atlassianhttp://atlss.in/confluence4#atlascamp 2
  2. 2. About Me 3
  3. 3. About Me• Confluence Developer 3
  4. 4. About Me• Confluence Developer• Worked on 4.0 since January 2010 3
  5. 5. About Me• Confluence Developer• Worked on 4.0 since January 2010• Managed a lot of the ecosystem integration 3
  6. 6. About Me• Confluence Developer• Worked on 4.0 since January 2010• Managed a lot of the ecosystem integration• Deployed 4.0 to the Atlassian internal instances 3
  7. 7. Agenda 4
  8. 8. Agenda 4
  9. 9. Agenda• Editor Plugin Points 4
  10. 10. Agenda• Editor Plugin Points• Transformer Pipeline 4
  11. 11. Agenda• Editor Plugin Points• Transformer Pipeline• XHTML in Macros 4
  12. 12. Agenda• Editor Plugin Points• Transformer Pipeline• XHTML in Macros• Demonstration 4
  13. 13. Editor Terminology 5
  14. 14. Editor Terminology Rich Text Editor 5
  15. 15. Editor Terminology Toolbar 5
  16. 16. Editor Terminology Insert Menu 5
  17. 17. Editor Terminology Formatting Menu 5
  18. 18. Editor Terminology 5
  19. 19. Editor Terminology Macro Placeholder 5
  20. 20. Editor Terminology Macro Property Panel 5
  21. 21. Formatting Menu 6
  22. 22. Formatting Menu 6
  23. 23. Formatting Menu• Plug into the Formatting menu in the Toolbar 6
  24. 24. Formatting Menu• Plug into the Formatting menu in the Toolbar• Allows you to interact with the TinyMCE formatting styles 6
  25. 25. Formatting Menu• Plug into the Formatting menu in the Toolbar• Allows you to interact with the TinyMCE formatting styles• Done as a web-item 6
  26. 26. Formatting Menu 7
  27. 27. Formatting Menu <web-item key="editor-awesome-format" name="Awesome Format" section="system.editor.more.formats" weight="10"> <label key="my.plugin.awesome.format"/> <link linkId="my-awesome-format"/> </web-item> 7
  28. 28. Formatting Menu <web-item key="editor-awesome-format" name="Awesome Format" section="system.editor.more.formats" weight="10"> <label key="my.plugin.awesome.format"/> <link linkId="my-awesome-format"/> </web-item> $("#my-awesome-button").click(function(){ tinymce.activeEditor.execCommand("FormatBlock", false, "samp"); }); 7
  29. 29. Formatting Menu <web-item key="editor-awesome-format" name="Awesome Format" section="system.editor.more.formats" weight="10"> <label key="my.plugin.awesome.format"/> <link linkId="my-awesome-format"/> </web-item> system.editor.more.formats $("#my-awesome-button").click(function(){ tinymce.activeEditor.execCommand("FormatBlock", false, "samp"); }); 7
  30. 30. Insert Menu 8
  31. 31. Insert Menu 8
  32. 32. Insert Menu• Add your macro to the Insert menu in the Toolbar 8
  33. 33. Insert Menu• Add your macro to the Insert menu in the Toolbar• Default behaviour opens Macro Browser 8
  34. 34. Insert Menu• Add your macro to the Insert menu in the Toolbar• Default behaviour opens Macro Browser• Done as a web-item 8
  35. 35. Insert Menu 9
  36. 36. Insert Menu <web-item key="editor-my-macro" name="Insert Menu Link - My Macro" section="system.editor.featured.macros.default" weight="100"> <label key="my.plugin.macro"/> <link linkId="mymacro"/> </web-item> 9
  37. 37. Insert Menu <web-item key="editor-my-macro" name="Insert Menu Link - My Macro" section="system.editor.featured.macros.default" weight="100"> <label key="my.plugin.macro"/> <link linkId="mymacro"/> </web-item> system.editor.featured.macros.default 9
  38. 38. Overriding The Macro Browser 10
  39. 39. Overriding The Macro Browser• Want to use a custom dialog? 10
  40. 40. Overriding The Macro Browser• Want to use a custom dialog?• Want to perform some action before opening the Macro Browser? 10
  41. 41. Overriding The Macro Browser• Want to use a custom dialog?• Want to perform some action before opening the Macro Browser?• Want your macro to appear as a native Confluence component? 10
  42. 42. Overriding The Macro Browser 11
  43. 43. Overriding The Macro Browser AJS.MacroBrowser.setMacroJsOverride(my-macro, {opener: function(macro) { // Custom logic goes here } }); 11
  44. 44. Overriding The Macro Browser AJS.MacroBrowser.setMacroJsOverride(my-macro, {opener: function(macro) { // Custom logic goes here } }); • This will affect all the following areas: 11
  45. 45. Overriding The Macro Browser AJS.MacroBrowser.setMacroJsOverride(my-macro, {opener: function(macro) { // Custom logic goes here } }); • This will affect all the following areas: • Insert Menu 11
  46. 46. Overriding The Macro Browser AJS.MacroBrowser.setMacroJsOverride(my-macro, {opener: function(macro) { // Custom logic goes here } }); • This will affect all the following areas: • Insert Menu • Autocomplete 11
  47. 47. Overriding The Macro Browser AJS.MacroBrowser.setMacroJsOverride(my-macro, {opener: function(macro) { // Custom logic goes here } }); • This will affect all the following areas: • Insert Menu • Autocomplete • Property panel Edit button 11
  48. 48. Overriding The Macro Browser AJS.MacroBrowser.setMacroJsOverride(my-macro, {opener: function(macro) { // Custom logic goes here } }); • This will affect all the following areas: • Insert Menu • Autocomplete • Property panel Edit button • Manually selecting inside the macro browser 11
  49. 49. Image Macro Placeholders 12
  50. 50. Image Macro Placeholders 12
  51. 51. Image Macro Placeholders• Replaces the Macro Placeholder 12
  52. 52. Image Macro Placeholders• Replaces the Macro Placeholder• Plugins can generate their own image, or reference static images 12
  53. 53. Image Macro Placeholders• Replaces the Macro Placeholder• Plugins can generate their own image, or reference static images• Only applicable to Bodiless Macros 12
  54. 54. Image Macro Placeholders• Replaces the Macro Placeholder• Plugins can generate their own image, or reference static images• Only applicable to Bodiless Macros• Macro Placeholder chrome can be applied optionally 12
  55. 55. Image Macro Placeholders• Replaces the Macro Placeholder• Plugins can generate their own image, or reference static images• Only applicable to Bodiless Macros• Macro Placeholder chrome can be applied optionally 12
  56. 56. Image Macro Placeholders• Replaces the Macro Placeholder• Plugins can generate their own image, or reference static images• Only applicable to Bodiless Macros• Macro Placeholder chrome can be applied optionally 12
  57. 57. Image Macro Placeholders 13
  58. 58. Image Macro Placeholders public interface EditorImagePlaceholder { ImagePlaceholder getImagePlaceholder( Map<String, String> parameters, ConversionContext context); } 13
  59. 59. Image Macro Placeholders public interface EditorImagePlaceholder { ImagePlaceholder getImagePlaceholder( Map<String, String> parameters, ConversionContext context); } public interface ImagePlaceholder { String getUrl(); Dimensions getDimensions(); boolean applyPlaceholderChrome(); } 13
  60. 60. Macro Property Panel 14
  61. 61. Macro Property Panel 14
  62. 62. Macro Property Panel 14
  63. 63. Macro Property Panel• Provides contextual actions for the macro 14
  64. 64. Macro Property Panel• Provides contextual actions for the macro• Provides Edit and Remove buttons 14
  65. 65. Macro Property Panel• Provides contextual actions for the macro• Provides Edit and Remove buttons• Custom buttons for your macros 14
  66. 66. Macro Property Panel• Provides contextual actions for the macro• Provides Edit and Remove buttons• Custom buttons for your macros 14
  67. 67. Macro Property Panel 15
  68. 68. Macro Property Panel atlassian-plugin.xml <xhtml-macro key="status" name="status" ...> <!-- SNIP --> <property-panel> <spacer/> <button id="Grey" label=""/> <button id="Red" label=""/> <button id="Yellow" label=""/> <button id="Green" label=""/> <spacer/> </property-panel> </xhtml-macro> 15
  69. 69. Macro Property Panel 16
  70. 70. Macro Property Panel AJS.Confluence.PropertyPanel.Macro.registerButtonHandler("Grey", function(e, macroNode) { // Custom button logic goes here updateMacro(macroNode, "Grey"); // Plugin function }); See complete example here: https://bitbucket.org/rthomas/confluence-status-macro/ 16
  71. 71. Parameter Placeholder 17
  72. 72. Parameter Placeholder 17
  73. 73. Parameter Placeholder 17
  74. 74. Parameter Placeholder 17
  75. 75. Parameter Placeholder 17
  76. 76. Parameter Placeholder 17
  77. 77. Parameter Placeholder 17
  78. 78. Parameter Placeholder 18
  79. 79. Parameter Placeholder<parameters> <default> <option key="showValueInPlaceholder" value="true" /> </default> <parameter name="key" type="string"> <option key="showKeyInPlaceholder" value="false" /> <option key="showValueInPlaceholder" value="true" /> </parameter> <parameter name="server" type="string"> <option key="showKeyInPlaceholder" value="false" /> <option key="showValueInPlaceholder" value="false" /> </parameter></parameters> 18
  80. 80. Editor Plugin Points 19
  81. 81. Editor Plugin Points 19
  82. 82. Editor Plugin Points • Formatting Menu 19
  83. 83. Editor Plugin Points • Formatting Menu • Insert Menu & Overrides 19
  84. 84. Editor Plugin Points • Formatting Menu • Insert Menu & Overrides • Image Placeholders 19
  85. 85. Editor Plugin Points • Formatting Menu • Insert Menu & Overrides • Image Placeholders • Macro Property Panel 19
  86. 86. Editor Plugin Points • Formatting Menu • Insert Menu & Overrides • Image Placeholders • Macro Property Panel • Parameter Placeholder 19
  87. 87. Transformer Pipeline 20
  88. 88. Transformer Pipeline 20
  89. 89. Transformer Pipeline• Confluence 4.0 contains a completely new rendering engine 20
  90. 90. Transformer Pipeline• Confluence 4.0 contains a completely new rendering engine• Part of this engine is the Transformer Pipeline 20
  91. 91. Transformer Pipeline• Confluence 4.0 contains a completely new rendering engine• Part of this engine is the Transformer Pipeline• This is available to all plugins 20
  92. 92. Transformer Pipeline 21
  93. 93. Transformer Pipeline• Confluence 4.0 stores its data in XHTML, this is known as Storage Format - (No more wiki-markup! ) 21
  94. 94. Transformer Pipeline• Confluence 4.0 stores its data in XHTML, this is known as Storage Format - (No more wiki-markup! )• We have three formats, however only the Storage Format is persisted 21
  95. 95. Transformer Pipeline• Confluence 4.0 stores its data in XHTML, this is known as Storage Format - (No more wiki-markup! )• We have three formats, however only the Storage Format is persisted • View Format: HTML 21
  96. 96. Transformer Pipeline• Confluence 4.0 stores its data in XHTML, this is known as Storage Format - (No more wiki-markup! )• We have three formats, however only the Storage Format is persisted • View Format: HTML • Editor Format: HTML with data attributes 21
  97. 97. Transformer Pipeline 22
  98. 98. Transformer Pipeline• The pipeline controls the rendering of Confluence content from one format to another 22
  99. 99. Transformer Pipeline• The pipeline controls the rendering of Confluence content from one format to another• There are three pipelines inside of the rendering engine: 22
  100. 100. Transformer Pipeline• The pipeline controls the rendering of Confluence content from one format to another• There are three pipelines inside of the rendering engine: • Storage to View (viewing a page) 22
  101. 101. Transformer Pipeline• The pipeline controls the rendering of Confluence content from one format to another• There are three pipelines inside of the rendering engine: • Storage to View (viewing a page) • Storage to Edit (editing a page) 22
  102. 102. Transformer Pipeline• The pipeline controls the rendering of Confluence content from one format to another• There are three pipelines inside of the rendering engine: • Storage to View (viewing a page) • Storage to Edit (editing a page) • Edit to Storage (saving a page) 22
  103. 103. Transformer Pipeline
  104. 104. Transformer Pipeline Storage Format View Edit Format Format 23
  105. 105. Transformer Pipeline 24
  106. 106. Transformer Pipeline• Why? 24
  107. 107. Transformer Pipeline• Why?• Allows a plugin developers to intercept the Confluence content before or after Confluence operates on it 24
  108. 108. Transformer Pipeline• Why?• Allows a plugin developers to intercept the Confluence content before or after Confluence operates on it • Inject content 24
  109. 109. Transformer Pipeline• Why?• Allows a plugin developers to intercept the Confluence content before or after Confluence operates on it • Inject content • Modify content 24
  110. 110. Transformer Pipeline• Why?• Allows a plugin developers to intercept the Confluence content before or after Confluence operates on it • Inject content • Modify content • Remove content 24
  111. 111. Transformer Pipeline• Why?• Allows a plugin developers to intercept the Confluence content before or after Confluence operates on it • Inject content • Modify content • Remove content 24
  112. 112. Transformer Pipeline With great power• Why?• Allows a plugin developers to intercept the Confluence content before or after Confluence operates on it • Inject content • Modify content comes • Remove content great responsibility 24
  113. 113. The New Macro Interface 25
  114. 114. The New Macro Interface• Confluence 4.0 introduces a new Macro interface 25
  115. 115. The New Macro Interface• Confluence 4.0 introduces a new Macro interface• Required for 4.0 integration 25
  116. 116. The New Macro Interface• Confluence 4.0 introduces a new Macro interface• Required for 4.0 integration• Default Macro body is rendered! (i.e. View Format - HTML) 25
  117. 117. The New Macro Interface• Confluence 4.0 introduces a new Macro interface• Required for 4.0 integration• Default Macro body is rendered! (i.e. View Format - HTML)• How do you avoid this? 25
  118. 118. The New Macro Interface 26
  119. 119. The New Macro Interface@Overridepublic String execute( Map<String, String> parameters, String body, ConversionContext context) throws MacroExecutionException { 26
  120. 120. The New Macro Interface@Overridepublic String execute( Map<String, String> parameters, String body, ConversionContext context) throws MacroExecutionException {@Override@RequiresFormat(Format.Storage)public String execute( Map<String, String> parameters, String body, ConversionContext context) throws MacroExecutionException { 26
  121. 121. The New Macro Interface 27
  122. 122. The New Macro Interface• If you intend to output the body - You need to render it! 27
  123. 123. The New Macro Interface• If you intend to output the body - You need to render it!• Confluence provides an easy mechanism to do this 27
  124. 124. The New Macro Interface• If you intend to output the body - You need to render it!• Confluence provides an easy mechanism to do this• The XhtmlContent spring bean 27
  125. 125. The New Macro Interface• If you intend to output the body - You need to render it!• Confluence provides an easy mechanism to do this• The XhtmlContent spring bean • Storage Format to View 27
  126. 126. The New Macro Interface• If you intend to output the body - You need to render it!• Confluence provides an easy mechanism to do this• The XhtmlContent spring bean • Storage Format to View • Wiki Markup to Storage Format 27
  127. 127. The New Macro Interface 28
  128. 128. The New Macro Interface private final XhtmlContent xhtmlContent; public MyAwesomeMacro(XhtmlContent xhtmlContent) { this.xhtmlContent = xhtmlContent; } 28
  129. 129. The New Macro Interface private final XhtmlContent xhtmlContent; public MyAwesomeMacro(XhtmlContent xhtmlContent) { this.xhtmlContent = xhtmlContent; }@Override@RequiresFormat(Format.Storage)public String execute(Map<String, String> parameters, String body, ConversionContext context) throws MacroExecutionException { try { return xhtmlContent.convertStorageToView(body, context); } ... 28
  130. 130. Demo 29
  131. 131. Demo Eric Chiang 29
  132. 132. Gliffy Confluence Plugin Confluence 3.5 30
  133. 133. Gliffy Confluence Plugin Confluence 3.5 Confluence 4.0 31
  134. 134. Macro Override • <web-resource> • editor scope• Overrides default macro with our own function (insert menu and autocomplete)• function gliffyCreateEdit() • Constructs an AUI Dialog • Ajax calls (getting templates, recent diagrams) • Launches the Gliffy editor 32
  135. 135. Macro Image Placeholder• Shows an attachment as an image or renders it thru a pipeline 33
  136. 136. Property Panel• Edit button (macro override)• Image resize buttons• Border button• More button AUI Dialog 34
  137. 137. Property Panel - Image Resize• Simple macro re-render 35
  138. 138. Insert Menu• web-item 36
  139. 139. Thanks Eric 37
  140. 140. Thanks Eric• Insert Menu Web Item 37
  141. 141. Thanks Eric• Insert Menu Web Item• Macro Override 37
  142. 142. Thanks Eric• Insert Menu Web Item• Macro Override• Property Panel 37
  143. 143. Thanks Eric• Insert Menu Web Item• Macro Override• Property Panel• Image Macro Placeholder 37
  144. 144. Passing The Torch 38
  145. 145. Passing The Torch 38
  146. 146. Passing The Torch• Confluence Ecosystem Integration 38
  147. 147. Passing The Torch• Confluence Ecosystem Integration• Technical Point of Contact inside Confluence 38
  148. 148. Passing The Torch• Confluence Ecosystem Integration• Technical Point of Contact inside Confluence• Introducing...... 38
  149. 149. Joseph Clark 38
  150. 150. Joseph Clark• Confluence Team Lead 38
  151. 151. Joseph Clark• Confluence Team Lead• 2 Years on the Team 38
  152. 152. Joseph Clark• Confluence Team Lead• 2 Years on the Team• .NET Background 38
  153. 153. Joseph Clark• Confluence Team Lead• 2 Years on the Team• .NET Background• All-round awesome fellow! 38
  154. 154. Joseph Clark• Confluence Team Lead• 2 Years on the Team• .NET Background• All-round awesome fellow!• jclark@atlassian.com 38
  155. 155. Get Started Today 39
  156. 156. Get Started Today 39
  157. 157. Get Started Today• Try out your plugin in Confluence 4.0 39
  158. 158. Get Started Today• Try out your plugin in Confluence 4.0• Play with the new plugin points 39
  159. 159. Get Started Today• Try out your plugin in Confluence 4.0• Play with the new plugin points• Check out the documentation http://atlss.in/confluence4 39
  160. 160. Questions ? Joseph Clark jclark@atlassian.com Ryan Thomas rthomas@atlassian.com http://atlss.in/confluence4 #atlascamp 40
  161. 161. Thank you!

×