[ English | 中文 (简体, 中国) | русский | português (Brasil) | नेपाली | 한국어 (대한민국) | Indonesia | français | español | esperanto | English (United Kingdom) | Deutsch ]

Memperluas AngularJS Workflow

Alur kerja (workflow) memperluas extensibleService. Ini berarti bahwa semua alur kerja mewarisi properti dan metode yang disediakan oleh extensibleService. Memperluas alur kerja memungkinkan Anda untuk menambahkan langkah-langkah Anda sendiri, menghapus langkah-langkah yang ada, dan menyuntikkan logika penanganan data khusus. Lihat dokumentasi sebaris tentang apa properti dan metode itu.

Kami sangat menyarankan Anda menyelesaikan :ref: tutorials-plugin jika Anda belum melakukannya. Jika Anda tidak tahu cara mengemas dan memasang plugin, sisa tutorial ini tidak masuk akal! Dalam tutorial ini, kita akan memeriksa alur kerja yang ada dan bagaimana kita dapat memperluasnya sebagai plugin.

Catatan

Meskipun tutorial ini berfokus pada perluasan alur kerja, langkah-langkah di sini dapat dengan mudah diadaptasi untuk memperluas layanan apa pun yang mewarisi extensibleService. Contoh poin yang dapat diperluas lainnya termasuk kolom tabel dan action tabel.

Struktur File

Ingatlah bahwa tujuan tutorial ini adalah untuk menyuntikkan langkah kustom kami ke alur kerja existing. Semua file yang kami minati berada di folder static.

myplugin
│
├── enabled
│   └── _31000_myplugin.py
│
└── static
     └── horizon
         └── app
             └── core
                 └── images
                     ├── plugins
                     │   └── myplugin.module.js
                     │
                     └── steps
                         └── mystep
                             ├── mystep.controller.js
                             ├── mystep.help.html
                             └── mystep.html

myplugin.module.js

Ini adalah titik masuk ke plugin kami. Kami menghubungkan ke modul yang ada melalui blok run yang dijalankan setelah modul diinisialisasi. Yang perlu kita lakukan adalah menyuntikkannya sebagai dependensi dan kemudian menggunakan metode yang disediakan dalam layanan extensible untuk mengganti atau memodifikasi langkah-langkah. Dalam contoh ini, kita akan menambahkan langkah kebiasaan kita sehingga akan ditampilkan sebagai langkah pertama dalam wizard.

(function () {
  'use strict';

  angular
    .module('horizon.app.core.images')
    .run(myPlugin);

  myPlugin.$inject = [
    'horizon.app.core.images.basePath',
    'horizon.app.core.images.workflows.create-volume.service'
  ];

  function myPlugin(basePath, workflow) {
    var customStep = {
      id: 'mypluginstep',
      title: gettext('My Step'),
      templateUrl: basePath + 'steps/mystep/mystep.html',
      helpUrl: basePath + 'steps/mystep/mystep.help.html',
      formName: 'myStepForm'
    };
    workflow.prepend(customStep);
  }

})();

Catatan

Ganti horizon.app.core.images.workflows.create-volume.service dengan alur kerja yang ingin Anda tambahkan.

mystep.controller.js

Penting untuk dicatat bahwa ruang lingkup adalah perekat antara pengontrol kami, ini adalah bagaimana kami menyebarkan (propagate) event dari satu pengontrol ke pengontrol lainnya. Kami dapat menyebarkan event ke atas menggunakan metode $emit dan menyebarkan event ke bawah menggunakan metode $broadcast.

Menggunakan metode $on, kita dapat mendengarkan event yang dihasilkan dalam ruang lingkup. Dengan cara ini, tindakan (action) yang kami selesaikan dalam wizard secara visual tercermin dalam tabel meskipun keduanya adalah dua widget yang sama sekali berbeda. Demikian pula, Anda bisa berbagi data antara langkah-langkah dalam alur kerja Anda selama mereka berbagi lingkup induk yang sama.

Dalam contoh ini, kami mendengarkan event yang dihasilkan oleh wizard dan panel pengguna. Kami juga memancarkan (emit) event khusus yang dapat didaftarkan oleh pengontrol lain saat warna favorit berubah.

(function() {
  'use strict';

  angular
    .module('horizon.app.core.images')
    .controller('horizon.app.core.images.steps.myStepController',
      myStepController);

  myStepController.$inject = [
    '$scope',
    'horizon.framework.widgets.wizard.events',
    'horizon.app.core.images.events'
  ];

  function myStepController($scope, wizardEvents, imageEvents) {

    var ctrl = this;
    ctrl.favoriteColor = 'red';

    ///////////////////////////

    $scope.$on(wizardEvents.ON_SWITCH, function(e, args) {
      console.info('Wizard is switching step!');
      console.info(args);
    });

    $scope.$on(wizardEvents.BEFORE_SUBMIT, function() {
      console.info('About to submit!');
    });

    $scope.$on(imageEvents.VOLUME_CHANGED, function(event, newVolume) {
      console.info(newVolume);
    });

    ///////////////////////////

    $scope.$watchCollection(getFavoriteColor, watchFavoriteColor);

    function getFavoriteColor() {
      return ctrl.favoriteColor;
    }

    function watchFavoriteColor(newColor, oldColor) {
      if (newColor != oldColor) {
        $scope.$emit('mystep.favoriteColor', newColor);
      }
    }
  }

})();

mystep.help.html

Dalam tutorial ini, kita akan membiarkan file ini kosong. Sertakan informasi tambahan di sini jika langkah Anda mengharuskannya. Jika tidak, hapus file dan properti helpUrl dari langkah Anda.

mystep.html

File ini berisi konten yang ingin Anda tampilkan kepada pengguna. Kami akan memberikan contoh sederhana dari langkah yang meminta warna favorit Anda. Yang paling penting untuk dicatat di sini adalah referensi ke controller kami melalui direktif ng-controller. Ini pada dasarnya adalah tautan ke pengontrol kami.

<div ng-controller="horizon.app.core.images.steps.myStepController as ctrl">
  <h1 translate>Blue Plugin</h1>
  <div class="content">
    <div class="subtitle" translate>My custom step</div>
    <div translate style="margin-bottom:1em;">
      Place your custom content here!
    </div>
    <div class="selected-source clearfix">
      <div class="row">
        <div class="col-xs-12 col-sm-8">
          <div class="form-group required">
            <label class="control-label" translate>Favorite color</label>
            <input type="text" class="form-control"
              ng-model="ctrl.favoriteColor"
              placeholder="{$ 'Enter your favorite color'|translate $}">
          </div>
        </div>
      </div><!-- row -->
    </div><!-- clearfix -->
  </div><!-- content -->
</div><!-- controller -->

Pengujian

Sekarang kita telah menyelesaikan plugin kita, mari kita bungkus (package) dan uji apakah itu berfungsi. Jika Anda memerlukan penyegaran, lihat bagian instalasi di Tutorial: Membuat Plugin Horizon.