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

4,404 views

Published on

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

Published in: Technology
1 Comment
5 Likes
Statistics
Notes
  • Where can I find the sources for the example describing how to override the macro browser?
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
4,404
On SlideShare
0
From Embeds
0
Number of Embeds
248
Actions
Shares
0
Downloads
72
Comments
1
Likes
5
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • 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!

    ×