{"id":216,"date":"2021-01-03T12:02:47","date_gmt":"2021-01-03T12:02:47","guid":{"rendered":"https:\/\/www.unleserlich.info\/?p=216"},"modified":"2021-01-03T13:06:59","modified_gmt":"2021-01-03T13:06:59","slug":"scriptable-tutorial-teil-5-tabellen","status":"publish","type":"post","link":"https:\/\/www.unleserlich.info\/?p=216","title":{"rendered":"Scriptable Tutorial Teil 5 – Tabellen"},"content":{"rendered":"\n
In diesem Teil des Tutorials wollen wir in einem Widget eine ordentlich formatierte Tabelle gestalten. Dies ist nicht ganz so einfach wie bei einer Website, weil es kein klassisches Tabellenelement gibt. \u00dcber ein Stack kann jedoch eine tabellen\u00e4hnliche Struktur aufgebaut werden, welche den meisten Anspr\u00fcchen gen\u00fcgen d\u00fcrfte.<\/p>\n\n\n\n
Die Klasse WidgetStack<\/h5>\n\n\n\n
Einem Widget k\u00f6nnen beliebig viele Stacks hinzugef\u00fcgt werden. Jeder Stack ist ein in sich geschlossener Bereich, welcher unabh\u00e4ngig von den anderen Stacks des Widgets formatiert werden kann.<\/p>\n\n\n\n
Um eine Tabelle abzubilden, wird zun\u00e4chst ein Stack ben\u00f6tigt, welcher dann die Daten einer Tabelle aufnehmen kann. Wie schon bei den anderen Elementen eines Widgets wird auch ein Widgetstack nicht direkt erzeugt, sondern \u00fcber den Aufruf der Methode .addStack auf dem Widget.<\/p>\n\n\n\n
var stack = widget.addStack();<\/code><\/pre>\n\n\n\n
Mit diesem Code wird unser Widget also um ein Stack erweitert, welches unsere Tabelle aufnehmen wird. <\/p>\n\n\n\n
Spaltendefinition<\/h5>\n\n\n\n
Ein Stack ordnet die hinzugef\u00fcgten Elemente automatisch horizontal an. \u00dcber die Methode .addText l\u00e4sst sich einem Stack Text hinzuf\u00fcgen. Rufen wir diese Methode mehrfach auf, werden so automatisch unsere Spalten erzeugt. Folgender Code w\u00fcrde also 3 Spalten erzeugen:<\/p>\n\n\n\n
Alternativ existiert auch die Methode .addImage, mit welcher wir in dem Stack ein Bild darstellen k\u00f6nnten.<\/p>\n\n\n\n
Das frisch erzeugte Stack f\u00fcgt die drei Spalten nun direkt aneinander, es fehlt noch etwas Abstand zwischen den 3 Textelementen. Um Abstand zwischen den Elementen zu schaffen, existiert die Methode .addSpacer, unser Beispiel muss daher wie folgt angepasst werden:<\/p>\n\n\n\n
Die Methode .addSpacer f\u00fcgt per Default einen flexiblen Abstand ein, die Breite des Spacers wird dynamisch an den verf\u00fcgbaren Platz angepasst. Alternativ kann mittels .addSpacer(length: number) auch eine feste gew\u00fcnschte Breite angegeben werden. <\/p>\n\n\n\n
Obiges Codebeispiel f\u00fchrt nun bereits zu einer ersten tabellen\u00e4hnlichen Struktur:<\/p>\n\n\n\n
Leider gibt es kein explizietes Row-Element, mit dem innerhalb des Stacks eine neue Zeile erzeugt werden k\u00f6nnte. Daher m\u00fcssen wir uns zur Erzeugung einer neuen Zeile mit einem einfachen Zeilenumbruch behelfen, welchen wir innerhalb eines Strings mit \\n erzeugen k\u00f6nnen:<\/p>\n\n\n\n
Das Vorgehen zur Erzeugung einer neuen Zeile ist auf den ersten Blick etwas ungewohnt. Beispielsweise wird in einer klassischen HTML-Tabelle der Inhalt zeilenweise aufgebaut, in Scriptable haben wir hier nun einen spaltenweisen Aufbau der Tabelle. <\/p>\n\n\n\n
Ein kleiner Tipp an dieser Stelle: Liegen die Daten klassisch zeilenweise in einer Array-Objekt-Struktur vor, kann der Inhalt des Arrays wie folgt in den Spaltentext umgewandelt werden (Das Array data enth\u00e4lt exemplarisch ein Objekt mit dem Attribut column1):<\/p>\n\n\n\n
![\"\"](\"https:\/\/www.unleserlich.info\/wp-content\/uploads\/2021\/01\/Bildschirmfoto-2021-01-03-um-12.20.25.png\")