How to use the @ckeditor/ckeditor5-ui/src/template.extend function in @ckeditor/ckeditor5-ui

* @member {module:ui/focuscycler~FocusCycler}
     */
    this._focusCycler = new FocusCycler( {
      focusables: this._focusables,
      focusTracker: this.focusTracker,
      keystrokeHandler: this.keystrokes,
      actions: {
        // Navigate form fields backwards using the Shift + Tab keystroke.
        focusPrevious: 'shift + tab',

        // Navigate form fields forwards using the Tab key.
        focusNext: 'tab'
      }
    } );

    Template.extend( this.saveButtonView.template, {
      attributes: {
        class: [
          'ck-button-action'
        ]
      }
    } );

    this.template = new Template( {
      tag: 'form',

      attributes: {
        class: [
          'cke-formId-form',
        ],

        // https://github.com/ckeditor/ckeditor5-image/issues/40

* @private
     * @member {module:ui/panel/balloon/contextualballoon~ContextualBalloon}
     */
    this._balloon = this.editor.plugins.get( 'ContextualBalloon' );

    /**
     * A `ToolbarView` instance used to display the buttons specific for acasi
     * editing.
     *
     * @protected
     * @type {module:ui/toolbar/toolbarview~ToolbarView}
     */
    this._toolbar = new ToolbarView();

    // Add CSS class to the toolbar.
    Template.extend( this._toolbar.template, {
      attributes: {
        class: 'ck-editor-toolbar'
      }
    } );

    // Add buttons to the toolbar.
    this._toolbar.fillFromConfig( toolbarConfig, editor.ui.componentFactory );

    // Show balloon panel each time acasi widget is selected.
    this.listenTo( editor.editing.view, 'render', () => {
      this._checkIsVisible();
    }, { priority: 'low' } );

    // There is no render method after focus is back in editor, we need to check if balloon panel should be visible.
    this.listenTo( editor.ui.focusTracker, 'change:isFocused', () => {
      this._checkIsVisible();

* @private
     * @member {module:ui/panel/balloon/contextualballoon~ContextualBalloon}
     */
    this._balloon = this.editor.plugins.get( 'ContextualBalloon' );

    /**
     * A `ToolbarView` instance used to display the buttons specific for acasi
     * editing.
     *
     * @protected
     * @type {module:ui/toolbar/toolbarview~ToolbarView}
     */
    this._toolbar = new ToolbarView();

    // Add CSS class to the toolbar.
    Template.extend( this._toolbar.template, {
      attributes: {
        class: 'ck-editor-toolbar'
      }
    } );

    // Add buttons to the toolbar.
    this._toolbar.fillFromConfig( toolbarConfig, editor.ui.componentFactory );

    // Show balloon panel each time acasi widget is selected.
    this.listenTo( editor.editing.view, 'render', () => {
      this._checkIsVisible();
    }, { priority: 'low' } );

    // There is no render method after focus is back in editor, we need to check if balloon panel should be visible.
    this.listenTo( editor.ui.focusTracker, 'change:isFocused', () => {
      this._checkIsVisible();

* @member {module:ui/focuscycler~FocusCycler}
     */
    this._focusCycler = new FocusCycler( {
      focusables: this._focusables,
      focusTracker: this.focusTracker,
      keystrokeHandler: this.keystrokes,
      actions: {
        // Navigate form fields backwards using the Shift + Tab keystroke.
        focusPrevious: 'shift + tab',

        // Navigate form fields forwards using the Tab key.
        focusNext: 'tab'
      }
    } );

    Template.extend( this.saveButtonView.template, {
      attributes: {
        class: [
          'ck-button-action'
        ]
      }
    } );

    this.template = new Template( {
      tag: 'form',

      attributes: {
        class: [
          'cke-text-alternative-form',
        ],

        // https://github.com/ckeditor/ckeditor5-image/issues/40