In JavaScript einen Zeitgeber verwenden
1. Öffnen Sie ThingWorx Studio.
2. Klicken Sie auf der Seite Meine Projekte auf das grüne + in der rechten oberen Ecke, um ein neues Projekt zu erstellen.
3. Geben Sie auf der Seite Projekt erstellen einen Namen für das Projekt im Feld Projektname und Ihre experience service URL im Feld Server ein.
4. Wählen Sie 2D als Projekttyp aus, und klicken Sie auf Erstellen.
5. Ziehen Sie ein Raster-Layout-Widget auf den Zeichenbereich, und legen Sie es ab.
6. Klicken Sie im Fensterbereich PROJEKT auf row-1.
7. Klicken Sie im Fensterbereich DETAILS unter Rasteraktionen zweimal auf Spalte hinzufügen.
8. Ziehen Sie ein Schaltfläche-Widget in die ersten zwei Spalten und ein Widget Beschriftung in die dritte Spalte, und legen Sie sie ab.
9. Wählen Sie die erste Schaltfläche aus, und geben Sie Start im Feld Text unter EIGENSCHAFTEN ein.
Wiederholen Sie dies für die zweite Schaltfläche, aber geben Sie diesmal Stop im Feld Text ein.
10. Wählen Sie das Beschriftung-Widget aus, und geben Sie 5 im Feld Text ein.
11. Als Nächstes werden wir einen neuen Anwendungsparameter erstellen, um ihn an die 2D-Schaltflächen zu binden. Klicken Sie im Fensterbereich DATEN auf das grüne +-Symbol neben Anwendungsparameter.
12. Geben Sie count im Feld Name im Fenster Anwendungsparameter hinzufügen ein, und klicken Sie auf Hinzufügen.
13. Binden Sie als Nächstes den Anwendungsparameter
count an die Beschriftung, indem Sie das Bindungssymbol
neben
count ziehen und im Fensterbereich
PROJEKT auf
label-1 ablegen.
Wählen Sie im Fenster Bindendes Ziel auswählen die Option Text aus.
| Für dieses Lernprogramm haben wir "out of the box" verfügbare Stile verwendet, um die Schaltflächenfarben festzulegen. Weitere Informationen finden Sie unter Themen. |
14. Klicken Sie im Fensterbereich PROJEKT auf Home.js. Geben Sie im JavaScript-Editor Folgendes ein:
$scope.countdown = function() {
$scope.app.params.count--;
};
$scope.start = function() {
$scope.app.params.count = 5;
$scope.intervalPromise = $interval($scope.countdown, 1000, 5);
};
$scope.stop = function() {
$interval.cancel($scope.intervalPromise);
};
Wobei 5 die Länge des Intervalls für den Countdown ist.
15. Klicken Sie im Fensterbereich PROJEKT auf Startseite, um zum Zeichenbereich zurückzukehren.
16. Wählen Sie die Schaltfläche Start aus, um ihre Eigenschaften anzuzeigen.
17. Klicken Sie auf das JS-Symbol neben dem Ereignis Klicken im Fensterbereich DETAILS, und geben Sie im Feld Ausdruck Folgendes ein: start();
Wenn auf diese Schaltfläche geklickt wird, wird die JavaScript-Funktion start ausgeführt.
18. Wählen Sie die Schaltfläche Stop aus, um ihre Eigenschaften anzuzeigen.
19. Klicken Sie auf das JS-Symbol neben dem Ereignis Klicken im Fensterbereich DETAILS, und geben Sie im Feld Ausdruck Folgendes ein: stop();
Wenn auf diese Schaltfläche geklickt wird, wird die JavaScript-Funktion stop ausgeführt.
20. Klicken Sie auf Vorschau. Sie können jetzt auf die Schaltfläche Start klicken, und der Countdown beginnt. Wenn Sie auf die Schaltfläche Stop klicken, wird der Countdown angehalten.
Übergeordnetes Thema
