UI Component Extensions for ABCS (Part 4: Drop Dialogs)

The next feature to be added to your UI component extension is a Drop Dialog, i.e., when the citizen developer drags and drops your component, a small dialog will appear to fill in some of the values in the component to override the defaults the component gives you:



To achieve the above, do the following.

  1. Create the View. In your 'templates' folder, add a new HTML file, with any name, such as "popup.html", with this content:
    <div>
      <label for="componentdropCustomizer-label">First Name</label>
      <input id="componentdropCustomizer-label" type="text"
          placeholder="Enter First Name" data-bind="ojComponent: {
              component: 'ojInputText',
              value: text1
      }">
      <label for="componentdropCustomizer-label">Last Name</label>
      <input id="componentdropCustomizer-label" type="text"
          placeholder="Enter Last Name" data-bind="ojComponent: {
              component: 'ojInputText',
              value: text2
      }">
    </div>
    <div>
      <button data-bind="ojComponent: {
          component: 'ojButton',
          label: 'Finish'
      }, click: finish">
      </button>
      <button data-bind="ojComponent: {
          component: 'ojButton',
          label: 'Cancel'
      }, click: cancel">
      </button>
    </div>
  2. Add the Business Logic. All the business logic for this scenario is found in the 'Creator.js' file.

    • Rewrite the 'define' block, to load the 'popup.html' file and provide the API you'll be needing:
      define([
          'com.greeting/js/Constants',
          'components.dt/js/api/ComponentFactory',
          'components.dt/js/spi/creators/CreatorType',
          'components.dt/js/spi/creators/DropPopupController',
          'text!com.greeting/templates/popup.html'
      ], function(Constants, ComponentFactory, CreatorType, DropPopupController, popupMarkup) {
      
    • Change the return value of "getType" to CreatorType.POPUP.

    • Below 'createView', define 'getDropPopupController':
      ComponentCreator.prototype.getDropPopupController = function (view) {
          // right after the view is created, the infrastructure calls this method
          // to get an instance of DropPopupController, providing the html markup,
          // view model, and the callback implementation for the popup.
          var myPopupViewModel = this._createModel();
          var customizer = new ComponentCreator.MyDropCustomizer(view, myPopupViewModel);
          // create an instance of DropPopupController with required popup model and markup.
          var controller = new DropPopupController(myPopupViewModel, popupMarkup, customizer);
          // attach a finish handler to your model and dismiss the popup
          // when the model says so using an API finish method.
          myPopupViewModel.finishHandler = function (result) {
              controller.finish(result);
          };
          return controller;
      };
    • Below the above, you need all of this:
      ComponentCreator.prototype._createModel = function () {
          var model = {
              text1: ko.observable(),
              text2: ko.observable(),
              finishHandler: undefined,
              finish: function () {
                  this.finishHandler(true);
              },
              cancel: function () {
                  this.finishHandler(false);
              }
          };
          return model;
      };
      
      var MyDropCustomizer = function (view, model) {
          this._view = view;
          this._model = model;
      };
      
      MyDropCustomizer.prototype.opened = function () {
          // you can do something useful here
      };
      
      MyDropCustomizer.prototype.closed = function (accepted) {
          if (accepted) {
              // popup was accepted and closed, let's update view properties
              this._view.getProperties().setValue('text1', this._model.text1());
              this._view.getProperties().setValue('text2', this._model.text2());
          }
          // do not forget to return a promise resolving to the view instance
          return Promise.resolve(this._view);
      };
      
      ComponentCreator.MyDropCustomizer = MyDropCustomizer;
      
And now, when you drag and drop, you should see a small dialog for filling in initial values.

Comments:

Post a Comment:
  • HTML Syntax: NOT allowed
About

Geertjan Wielenga (@geertjanw) is a Principal Product Manager in the Oracle Developer Tools group living & working in Amsterdam. He is a Java technology enthusiast, evangelist, trainer, speaker, and writer. He blogs here daily.

The focus of this blog is mostly on NetBeans (a development tool primarily for Java programmers), with an occasional reference to NetBeans, and sometimes diverging to topics relating to NetBeans. And then there are days when NetBeans is mentioned, just for a change.

Search

Archives
« January 2017
SunMonTueWedThuFriSat
1
2
3
4
5
6
7
8
9
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
    
       
Today