pl
English
Español
Slovenčina
Deutsch
Français
Italiano
Português
Čeština
Nederlands
Română
Magyar
Svenska
Ελληνικά
БългарскиNapisz komponent Flow: jeden plik HTML
Komponent to jeden plik .html. Flow odczytuje plik, uruchamia jego część Node.js wewnątrz przepływu i pokazuje jego wygląd w edytorze. Wszystkie oficjalne komponenty z repozytorium używają tego formatu, więc możesz czytać dowolny z nich jako przykład.
Przykład: shout.html
Odbiera wiadomość, zamienia tekst na wielkie litery, dodaje przyrostek i wysyła dalej.
<script total>
exports.id = 'shout';
exports.name = 'Shout';
exports.group = 'Common';
exports.version = '1';
exports.icon = 'ti ti-speakerphone';
exports.author = 'Forge';
exports.config = { suffix: '!' };
exports.inputs = [{ id: 'input', name: 'Input' }];
exports.outputs = [{ id: 'output', name: 'Output' }];
exports.make = function(instance, config) {
let count = 0;
instance.message = function($) {
count++;
instance.status({ shouted: count });
$.data = String($.data).toUpperCase() + config.suffix;
$.send('output');
};
};
</script>
<settings>
<div class="padding">
<ui-component name="input" path="?.suffix" config="maxlength:10">Suffix</ui-component>
</div>
</settings>
<readme>
The component converts the text of a message to upper case and adds a suffix.
</readme>
<body>
<header>
<i class="ICON"></i>NAME
</header>
<footer>
<div class="padding">Shouted: <b><ui-bind path="STATUS.shouted" config="text:value||0"></ui-bind></b></div>
</footer>
</body>Części pliku
| Część | Do czego służy |
|---|---|
<script total> | kod Node.js komponentu, wykonywany w procesie przepływu |
<settings> | formularz konfiguracji z komponentami interfejsu użytkownika (ui-component, ścieżki zaczynające się od ?. wskazują na config komponentu) |
<readme> | pomoc wyświetlana w edytorze |
<body> | pole w diagramie: <header> z symbolami zastępczymi ICON i NAME oraz opcjonalnie <footer> lub treść, gdzie <ui-bind path="STATUS.x"> pokazuje status, a CONFIG.x konfigurację |
<style> | CSS pola; .CLASS jest zastępowane klasą unikalną dla komponentu |
<script> (drugi) | opcjonalny JavaScript edytora, dla przycisków w polu (może wysłać { TYPE: 'trigger', id: ... } do przepływu) |
exports części Node.js
| Export | Znaczenie |
|---|---|
id, name, group, version, icon, author | tożsamość komponentu i miejsce na liście |
config | domyślna konfiguracja; edytuje ją formularz <settings> |
inputs, outputs | lista złączy { id, name }. Komponent bez inputs jest źródłem |
kind | opcjonalne: rola komponentu w katalogu (trigger, action lub output) |
make(instance, config) | wywoływane raz dla każdego pola, które umieścisz w diagramie |
instance
Wewnątrz make definiujesz zachowanie, przypisując funkcje do instancji:
| Funkcja | Wywoływana, gdy |
|---|---|
instance.message = function($) {} | nadejdzie wiadomość. $.data to dane, $.send('output') przekazuje ją do złączy tego wyjścia, $.destroy() kończy ją bez wysyłania |
instance.configure = function() {} | zmieni się konfiguracja, oraz raz na początku |
instance.trigger = function() {} | zażąda tego przycisk edytora lub kod |
instance.pause = function(is) {} | przepływ zostanie wstrzymany lub wznowiony |
instance.close = function() {} | pole zostanie usunięte lub przepływ się zatrzyma: tu wyczyść swoje timery |
Wywołujesz instance.send('output', data), aby utworzyć własną wiadomość (jak robi to timer), instance.status(object), aby pokazać status w polu (delay.html przekazuje czas w milisekundach jako drugi argument do odświeżania) oraz instance.throw(error), aby zgłosić błąd.
Wypróbuj
- Umieść
shout.htmlw katalogu i wpisz jego adres w ustawieniucomponents2(zobacz repozytorium) albo zaimportuj przepływ, który go zawiera w swoichcomponents. - Dodaj obok w edytorze
timeriprint, połącz je i uruchom przepływ. - Otwórz status pola: licznik rośnie z każdą wiadomością.
Aby przetestować komponent bez edytora, repozytorium ma mały tester, zobacz repozytorium komponentów.