Doch bevor man mit der Entwicklung von Windows 8 Apps starten kann müssen zwei Voraussetzungen erfüllt sein. Zum einen braucht Ihr einen Rechner mit mindestens Windows 8.1 und die eigentliche Siena App aus dem Store.
Ok Let's Start:
Nach dem Start der App erscheint unser erster Screen. Auf diesen können wir nun anfangen die einzelnen Visuals zu platzieren. Ein Klick auf das gewünschte Element reicht.
Durch einen Klick auf das Label-Element erscheint in der oberen linken Ecke ein neues Labelfeld. Als erstes geben wir dem Labelfeld einen neuen Namen, damit wir es später in der Flut von Elementen wiederfinden.
Dies kann durch einfaches klicken und ändern des Namens im oberen linken Dropdownfeld verändert werden.
Daher ändern wir die Bezeichnung nun von Label1 in lblHelloWorld. Als nächstes ziehen wir das Labelfeld in die Mitte des Screens und verändern zum einen die Schriftgröße und zum anderen die Größe des Labelfeldes.
Eigenschaften von Visulas ändert man in dem man sie erst markiert und dann in der unteren Bildschirmleiste durch Auswahl der bevorzugten Funktion anpasst. In unserem Fall wollen wir das Design des Feldes anpassen.
Wir stellen nun die Textgröße auf dem Wert 50. Hier können noch weitere Einstellungen vorgenommen werden wie Schriftart, Style, Farbe, Ausrichtung etc.
Nach der Änderung der Schriftgröße ist das Labelfeld nicht mehr groß genug um alles anzuzeigen zu können. Daher ziehen wir dieses mit der Maus größer und positionieren es in der Mitte des Screens.
Als nächstes klicken wir in das Labelfeld hinein und löschen den aktuell angezeigten Text heraus. Sodass in dem Labelfeld nichts mehr vorhanden ist.
Im nächsten Schritt weden wir uns mit einem neuen Steuerelement vertraut machen. Fügen wir einen Button auf Ihren Screen hinzu und ändern den Namen des Button in btnStart. Alternativ kann noch die Beschriftung in Start geändert werden.
Nun möchten wir dem Button ein Event geben, das ausgeführt wird, sobald der Button betätigt wird. Dafür selektieren wir den Button und wählen die Eigenschaft "OnSelect" aus.
Wenn man sich nun schon im vorhinein schon mit Siena auseinander gesetzt hat, weis man das es wie in Excel auch vorgefertigte Funktionen gibt. Alle beschrieben unter: http://siena.blob.core.windows.net/beta/ProjectSienaBetaFunctionReference.html
In unserem Beispiel wollen wir die Beschriftung des Labelfeldes ändern in dem wir den Button betätigen. Aktuell ist aber nicht möglich Eigenschaften von Elementen direkt zu verändern. Daher gehen wir den Umweg über eine Variable. Wir erzeugen also eine neue Variable und weisen der den Wert "Hello World" zu.
Um nun diese Beschriftung in unserem Labelfeld sichtbar zu machen müssen wir dem Labelfeld noch mitteilen, das es seine Beschriftung aus der Variable lblVariable beziehen soll. Dies machen wir wiederrum mit einer anderen Funktion.
Um seinen Entwurf nun testen zu können, muss man durch einen Rechtsklick in die Arbeitsfläche und Betätigung des Previewbuttons am oberen rechten Rand in den Vorschaumodus wechseln. Betätigen wir nun den Button erscheint im Labelfeld die vorher festgelegte Beschriftung.
Um nun die Beschriftung während der Laufzeit wieder zu verändern, kann man dem Lablefeld auch eine "OnSelect" Ereignis geben:
UpdateContext({lblVariable: " "})
Damit wird der Inhalt des Labelfeldes beim klicken geleert und beim betätigen des Buttons wieder gefüllt.
Fazit
Ich hoffe dieses kleine und simple Tutorial konnte euch helfen einen ersten Schritt in Richtung Siena zu machen. Es empfiehlt sich auf Basis dieser App ein bisschen mit den Funktionsweisen der einzelnen Elemente und des Screens zu experimentieren. So kann man zum Beispiel die Hintergrundfarbe des Screens verändern, die Füllfarbe des Button oder die Schriftart oder farbe des Labels oder Buttons. Viel Spaß beim ausprobieren!
Durch einen Klick auf das Label-Element erscheint in der oberen linken Ecke ein neues Labelfeld. Als erstes geben wir dem Labelfeld einen neuen Namen, damit wir es später in der Flut von Elementen wiederfinden.
Dies kann durch einfaches klicken und ändern des Namens im oberen linken Dropdownfeld verändert werden.
Daher ändern wir die Bezeichnung nun von Label1 in lblHelloWorld. Als nächstes ziehen wir das Labelfeld in die Mitte des Screens und verändern zum einen die Schriftgröße und zum anderen die Größe des Labelfeldes.
Eigenschaften von Visulas ändert man in dem man sie erst markiert und dann in der unteren Bildschirmleiste durch Auswahl der bevorzugten Funktion anpasst. In unserem Fall wollen wir das Design des Feldes anpassen.
Wir stellen nun die Textgröße auf dem Wert 50. Hier können noch weitere Einstellungen vorgenommen werden wie Schriftart, Style, Farbe, Ausrichtung etc.
Nach der Änderung der Schriftgröße ist das Labelfeld nicht mehr groß genug um alles anzuzeigen zu können. Daher ziehen wir dieses mit der Maus größer und positionieren es in der Mitte des Screens.
Als nächstes klicken wir in das Labelfeld hinein und löschen den aktuell angezeigten Text heraus. Sodass in dem Labelfeld nichts mehr vorhanden ist.
Im nächsten Schritt weden wir uns mit einem neuen Steuerelement vertraut machen. Fügen wir einen Button auf Ihren Screen hinzu und ändern den Namen des Button in btnStart. Alternativ kann noch die Beschriftung in Start geändert werden.
Nun möchten wir dem Button ein Event geben, das ausgeführt wird, sobald der Button betätigt wird. Dafür selektieren wir den Button und wählen die Eigenschaft "OnSelect" aus.
Wenn man sich nun schon im vorhinein schon mit Siena auseinander gesetzt hat, weis man das es wie in Excel auch vorgefertigte Funktionen gibt. Alle beschrieben unter: http://siena.blob.core.windows.net/beta/ProjectSienaBetaFunctionReference.html
In unserem Beispiel wollen wir die Beschriftung des Labelfeldes ändern in dem wir den Button betätigen. Aktuell ist aber nicht möglich Eigenschaften von Elementen direkt zu verändern. Daher gehen wir den Umweg über eine Variable. Wir erzeugen also eine neue Variable und weisen der den Wert "Hello World" zu.
Um nun diese Beschriftung in unserem Labelfeld sichtbar zu machen müssen wir dem Labelfeld noch mitteilen, das es seine Beschriftung aus der Variable lblVariable beziehen soll. Dies machen wir wiederrum mit einer anderen Funktion.
Um seinen Entwurf nun testen zu können, muss man durch einen Rechtsklick in die Arbeitsfläche und Betätigung des Previewbuttons am oberen rechten Rand in den Vorschaumodus wechseln. Betätigen wir nun den Button erscheint im Labelfeld die vorher festgelegte Beschriftung.
Um nun die Beschriftung während der Laufzeit wieder zu verändern, kann man dem Lablefeld auch eine "OnSelect" Ereignis geben:
UpdateContext({lblVariable: " "})
Damit wird der Inhalt des Labelfeldes beim klicken geleert und beim betätigen des Buttons wieder gefüllt.
Fazit
Ich hoffe dieses kleine und simple Tutorial konnte euch helfen einen ersten Schritt in Richtung Siena zu machen. Es empfiehlt sich auf Basis dieser App ein bisschen mit den Funktionsweisen der einzelnen Elemente und des Screens zu experimentieren. So kann man zum Beispiel die Hintergrundfarbe des Screens verändern, die Füllfarbe des Button oder die Schriftart oder farbe des Labels oder Buttons. Viel Spaß beim ausprobieren!
