Flowable的REST API（二)

在上一篇的文章中，写了关于开始使用Flowable并使用Flowable的REST API的文章。

在这篇文章中，我们将使用Angular，Angular Material和Flowable的REST API来创建一个定制的Task List组件：

Angular CLI

Angular最近的许多改进都是针对Angular CLI的。最流行的一种是使用ng-packagr生成和构建Angular库。

Flowable Library

让我们首先使用Angular CLI生成一个Angular库：

ng generate library flowable --prefix=flow

Tasks Service

现在我们可以使用Angular CLI在flowable库中生成Tasks Service：

ng generate service services/tasks/tasks --project=flowable

我们将使用Angular的HttpClient与Flowable的REST API进行交互。

我们来看看Tasks服务的getTasks（）方法：

  public getTasks(): Observable<TaskListModel>   {

    const endpoint = '/flowable-task/process-api/runtime/tasks'

    return this.httpClient.get<any>(endpoint, httpOptions)
      .pipe(
        tap(() => {
          this.logger.info('TasksService: getTasks() completed');
        }),
        catchError(this.handleError('getTasks', []))
      );

  }

对GET 运行时/任务的调用返回任务列表。我们只需要提供站点的URI（’/ flowable-task / process-api / runtime / tasks’）和任何所需的Http选项：

const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type': 'application/json',
    'Authorization': 'Basic ' + btoa('admin:test')
  }),
  params: null
};

CORS

在开发过程中，我们可以使用webpack的dev服务器中的代理支持来高举某些URI并将它们发送到后端服务器：

ng serve --proxy-config=proxy.conf.json

proxy.conf.json：

{
  "/flowable-task": {
    "target": "http://localhost:8080",
    "secure": false,
    "logLevel": "debug"
  }
}

任务列表组件

使用Angular CLI在flowable库中生成任务列表组件：

ng generate component components/task-list --project=flowable --skip-import

我们来看看Task List组件：

@Component({
  selector: 'flow-task-list',
  templateUrl: './task-list.component.html',
  styleUrls: ['./task-list.component.scss']
})
export class TaskListComponent implements OnInit, OnDestroy {

  public items: TaskModel[];
  public selectedItem: TaskModel = null;
  
  private subscriptions: Subscription[] = [];

  constructor(private tasksService: TasksService,
              private logger: LoggerService) {}

  public ngOnInit() {
  
    let modelSubscription: Subscription = new Subscription();
    this.subscriptions.push(modelSubscription);

    modelSubscription = this.tasksService.getTasks().subscribe(model => {

      this.items = model.data;
      this.selectedItem = this.items[0];
    });
  }
 
  ...
 
}  

我们在组件的构造函数中注入TasksService，然后在ngOnInit（）生命周期钩子中调用Task服务的getTasks（）方法。

getTasks()方法返回的数据将分配给组件的items属性，并将数组中的第一项分配给属性。itemsselectedItem

在组件的模板中，我们使用元素来显示项目列表（任务）：

  <div class="crm-task-list-container">

    <mat-nav-list>

      <a *ngFor="let item of items"
         mat-list-item>

        <mat-icon matListIcon class="crm-task-list-icon">
          assignment
        </mat-icon>

        <p mat-line>
          {{item.name}}
        </p>

        <p mat-line>
          {{item.description}}
        </p>

      </a>

    </mat-nav-list>

  </div>

要跟踪“选定”项（任务），我们还需要添加单击事件绑定和单击事件处理程序。

添加单击事件绑定

将click事件绑定添加到<a>元素，如下所示：

<a *ngFor="let item of items"
   mat-list-item
   [class.list-item-active]="item === selectedItem"
   (click)="onSelect(item)">  

添加单击事件处理程序

添加onSelect（）方法，该方法将从模板中单击的项目（任务）分配给组件的selectedItem属性：

public onSelect(task: TaskModel) {
  this.selectedItem = task;
}

下一步是什么

在下一篇文章中，我们将使用Angular，Angular Material和Flowable的REST API来创建一个定制的Task组件：

源代码：
GitHub：Serendity
GitHub：Serendipity - Flowable库
参考文献：
Flowable docs: REST API
Spring docs: CORS