tags: Bonita BPM UI Designer
Properties 屬性
在Custom Widget所建立的Properties，就是在Form Editor的元件的屬性
- 必填欄位介紹
- Name：該變數名稱，使用於Custom Widget的Template和Controller
- Label：顯示於Form Editor的元件的屬性的標題
- Treat value as 分為以下幾種
-
Bidirectional bond：用來進行雙向溝通(read-write)的變數
-
Dynamic value (在Form Editor以click的方式，切換A、B)
A. 常數
B. 變數 或 判斷式，Examples:Define a condition for widget visibility, userAge > 18
Define table headers as the value of a variable: myArrayVariable
Apply a filter to the value of a variable: selectedUser | json -
Interpolation
A. 純文字
B. 使用 {{ variable }}，加入變數，Example:I’m sorry, {{ user.name1 | uppercase }}. I’m afraid I can’t do that.
-
Constant：就是常數，常用在radio button set, drop-down list, or number selector
-
Template 視圖、模板
Template為View的部分，也就是撰寫html的位置
- 使用標準 HTML tags 和 AngularJS 內建 directives, scope and interpolation system
- 可以直接省略，直接寫body的部分
<!DOCTYPE html>
<html>
</html>
- 在右側的Properties可以進行Custom widget的屬性設定，設定完的變數的Name可用在Template，例如：properties.newProperty
- 寫在Controller的方法，於Template呼叫，例如：ctrl.newFunction()
- 在Controller建立 in AngularJS scope 的變數
$scope.backgroudColor = white;，於Template呼叫，必須寫為：{{ backgroudColor }}
<span ng-if="environment"><identicon name="{{environment.component.id}}" size="30" background-color="[255,255,255, 0]" foreground-color="[51,51,51]"></identicon> {{environment.component.name}}</span>
<div style="color: {{ properties.color }}; background-color: {{ backgroudColor }}" ng-click="ctrl.toggleBackgroundColor()">
Value is: <i>{{ properties.value }}</i>. Click me to toggle background color
</div>
Controller 控制器
Controller是撰寫JavaScript的位置
- 用來定義在Template使用的，AngularJS的scope和方法
- 在右側的Properties可以進行Custom widget的屬性設定，設定完的變數的Name可用在Controller，例如：$scope.properties.backgroudColor
- 若用不到Controller來撰寫JavaScript的一些動作，可以將Controller留白
function ($scope) {
var white = 'white';
$scope.backgroudColor = white;
this.toggleBackgroundColor = function() {
if ($scope.backgroudColor === white) {
$scope.backgroudColor = $scope.properties.background;
} else {
$scope.backgroudColor = white;
}
};
}
Assets 外加檔案
主要是拿來加入雲端或本地端的檔案於Custom Widget，方便Template調用
- 種類
- JavaScript
- CSS
- Image
Required Angular Modules 需要的模組
Custom Widget需要額外引用的angular modules，
例如：mgcrea.ngStrap.datepicker, mgcrea.ngStrap.timepicker
Reference 參考資料
- Bonita UI，CUSTOM WIDGET EDITOR上的範例及解說
Part3：一般網頁 vs Bonita UI 寫法比較
連結：【Bonita BPM】UI Designer 客製化元件 - Part3：一般網頁 vs Bonita UI 寫法比較
沒有留言:
張貼留言