【Bonita BPM】UI Designer 客製化元件 實際範例 - Part5：GetInvoiceStateButton

tags: Bonita BPM UI Designer

Common 基礎知識

【Bonita BPM】UI Designer 客製化元件 - Part1：基礎知識

GetInvoiceStateButton

Properties 屬性

• hostnameValue
  • Label: Hostname
  • Treat as Dynamic value
  • Type: text
• portValue
  • Label: Port
  • Treat as Dynamic value
  • Type: text
• invoiceId
  • Label: InvoiceId
  • Treat as Dynamic value
  • Type: text
• invoiceState
  • Label: InvoiceState
  • Treat as Bidirectional bond
• label
  • Label: Label
  • Treat as Interpolation
  • Default value: Submit
• alignment
  • Label: Alignment
  • Treat as Constant
  • Type: choice
  • Choices: left, center, right
  • Default value: left
• buttonStyle
  • Label: Style
  • Treat as Constant
  • Type: choice
  • Choices: default, primary, success, info, warning, danger, link
  • Default value: default

Assets 外加檔案

• bootstrap.min.css – download 下載

Template 視圖

<div ng-class="'text-' + properties.alignment">
    <button ng-class="'btn btn-' + properties.buttonStyle" ng-click="ctrl.getInvoiceState()" type="button" ng-bind-html="properties.label | uiTranslate" class="ng-binding btn btn-default">{{properties.label}}</button>
</div>

Controller 控制器

• $scope.$apply
  • 執行function或是Angular Expression。
  • 呼叫$scope.$digest() 來更新任何的bindings或watchers
  • 用到$scope.$apply()的情況是瀏覽器DOM events, setTimeout, XHR (XMLHttpREquest)或是第三方套件。

function ($scope) {
    this.getInvoiceState = function(){
        var hostname = $scope.properties.hostnameValue;
        var port = $scope.properties.portValue;
        var invoiceId = $scope.properties.invoiceId;
        var url="http://"+hostname+":"+port+"example" + invoiceId;
        
        var xhr = new XMLHttpRequest();
        xhr.withCredentials = true;
        xhr.addEventListener("readystatechange", function(){
            if (this.readyState === 4) {
                console.log("responseText:"+this.responseText);
                var responseTextJSON = JSON.parse(this.responseText);
                
                // 第三方套件(ex:XMLHttpRequest)，會使binding的值有沒有被改變
                $scope.$apply(function(){
                    $scope.properties.invoiceState = responseTextJSON.result;
                });
            }
        });
        xhr.open("GET", url);
        xhr.send();
    };
}

Reference 參考資料

1. 解釋$scope.$apply：https://hamisme.blogspot.tw/2013/06/scopeapply-1-angularjs.html
2. Bonita UI，CUSTOM WIDGET EDITOR上的範例及解說
3. Bootstrap css：https://getbootstrap.com/docs/3.3/getting-started