Document toolboxDocument toolbox

How to create a Synapse Widget

To create the new widget, there are four aspects that you need to implement.

  1. Parameters: Define the parameters that your widget needs

  2. Editor: This will edit the widget parameters

  3. Renderer:  This will render your widget based on a set of parameters

  4. Widget Registration:  This will hook everything up (new command, and a key to identify your widget).


Parameters

Define a key for each parameter that your renderer/editor needs.  See WidgetConstants

Editor

  • Create MVP classes for your widget editor. See the YouTube view, editor, and view implementation.
    • For your widget to be inline, add to the editor's updateDescriptorFromView() method:

      descriptor.put(WidgetConstants.INLINE_WIDGET_KEY, "true");
  • Bind your Widget editor view to the implementation by modifying the Portal gin module:

    bind(YouTubeConfigView.class).to(YouTubeConfigViewImpl.class);
  • Add a unit test for your editor! (see YouTubeConfigEditorTest)

 

Renderer

 

Widget Registration

  • Hook up automatic dependency injection by first adding methods to the Portal gin injector class (see getYouTubeConfigEditor() and getYouTubeRenderer()).  
  • Add a unique content type (to identify your widget in Markdown, like the YOUTUBE_CONTENT_TYPE constant) to WidgetConstants.   
  • Add code to the Widget Registrar Implementation that call the methods you added to the Portal gin injector (resolve content type to your editor and renderer).  Also register your widget in initWithKnownWidgets() method of this class to give your widget a friendly name.  
  • Add the new command to the menu (see MarkdownEditorWidget.createWidgetMenu()).
  • (Optionally) Add css styles to Portal.css. These will be automatically applied to the div that surrounds your Widget (see youtube in Portal.css).  NOTE: The style name must match the content type that you specified in WidgetConstants.