Microsoft Project Siena
Wie Sie Windows-8-Apps selber erstellen
Erstellen Sie sich selbst eine App für Windows 8, die auf alle Funktionen Ihres Tablets zugreifen kann, inklusive Kamera, Mikrofon und Lautsprecher. Project Siena macht's möglich, wir zeigen wie's geht.
Für Windows 8 können Sie dank Project Siena interessante Apps für den eigenen Bedarf erstellen. Programmierkenntnisse oder auch Erfahrung mit grundlegenden Excel-Funktionen sind zwar hilfreich, jedoch nicht unbedingt erforderlich, etwas Bastler-Geschick genügt. Sie können sich daher auch als absoluter Laie an das Thema heranwagen, nicht zuletzt, weil die im Folgenden vorgestellte Siena-App die passenden Sprachbefehle im Kontext als Vorschläge anbietet.
Microsoft Project Siena ist selbst eine App, und Sie beziehen sie aus dem Windows Store. Voraussetzung für die Installation ist Windows 8.1 Pro oder Enterprise. Interessant sind auch die Apps GetSiena, Project Siena Forum, Microsoft Project Siena Forum Reader, SienaNews sowie die Beispielapp textClock. Alle genannten Apps können kostenfrei installiert werden.
Intuitiver Einstieg
Nach dem Start der Project-Siena-App finden Sie die Oberfläche so vor, wie es die Abbildung oben zeigt. Die untere App-Leiste ist immer sichtbar, die obere blenden Sie bei Bedarf per Rechtsklick, durch Drücken von Windows+Z oder durch Wischen vom oberen Bildschirmrand ein.
Die Designoberfläche ist zunächst noch leer, da noch keine visuellen Elemente (wie Bilder oder Schaltflächen) hinzugefügt worden sind. Deren Palette zeigen Sie an, indem Sie bei ausgeblendeter App-Leiste (!) rechts oben auf das Symbol mit dem Pluszeichen klicken. Einige der Kacheln fassen mehrere Elemente zusammen, was z. B. bei den Galerien der Fall ist. Durch Eingabe in das Suchfeld können Sie gezielt nach bestimmten Elementen suchen.
Die Symbole Daten, Verhalten und Entwurf auf der linken Seite der unteren App-Leiste 2015fassen jeweils mehrere Optionen, die ebenfalls durch Symbole repräsentiert sind, zusammen. Um die untergeordneten Symbole - diese beziehen sich auf das aktuell im Entwurf ausgewählte visuelle Element - anzuzeigen, klicken Sie das übergeordnete Symbol an. Bei visuellen Elementen, bei denen in der entsprechenden Kategorie nur eine einzige Option verfügbar ist, sehen Sie diese jedoch sofort.
Dies ist z. B. beim Screen-Element selbst der Fall, an Stelle des übergeordneten Daten-Symbols erscheint hier sogleich das Symbol Hintergrundbild (die Hintergrundfarbe können Sie über das Entwurf-Symbol einstellen). Benötigen Sie für eine App einmal mehrere Seiten - was bei unserer Beispielapp nicht der Fall ist - blenden Sie die obere App-Leiste ein und klicken dort auf das Symbol Bildschirm hinzufügen.
Während der Entwicklungsphase einer App können Sie den aktuellen Stand jederzeit mit der Vorschaufunktion ausführen lassen. Das Symbol befindet sich am rechten Ende der oberen App-Leiste. Indem Sie während der Ausführung erneut die App-Leiste einblenden und auf das Symbol Entwurf klicken oder die Escape-Taste drücken, kehren Sie wieder in die Entwurfsansicht zurück.
Mit Microsoft Project Siena können Sie Ihren Ideen für eigene Apps freien Lauf lassen. Erstellen Sie z. B. einen Newsreader nach Ihrer Wahl, eine App mit Kamerafunktion oder eine App zur Interaktion mit Ihrem Facebook-Konto. Zur Demonstration wollen wir im Folgenden schrittweise eine Sprachübersetzer-App mit Audiofunktion entwickeln. Die Beispieldatei Sprachuebersetzer.siena finden Sie auf der Heft-DVD, Sie brauchen die Datei nur in Ihrer Project-Siena-App zu öffnen.
Sprachübersetzer und -vorleser
Das Ganze soll sich nach der Entwicklung so darstellen: Der Benutzer kann ein Wort oder auch eine umfangreiche Textpassage eingeben und diese nach Auswahl der gewünschten Zielsprache übersetzen und sich gegebenenfalls vorsprechen lassen. Sie benötigen also auf jeden Fall zwei Eingabefelder - eines zur Eingabe des zu übersetzenden und eines zur Anzeige des übersetzten Textes - sowie ein Drop-down-Feld zur Auswahl der Zielsprache. Der ebenfalls benötigte Audioplayer braucht für den Benutzer nicht sichtbar zu sein, stattdessen soll die Ansage per Schaltflächenklick gestartet werden.
Klicken Sie in der rechten oberen Ecke auf das Plus-Symbol, um die visuellen Elemente anzuzeigen. Klicken Sie nacheinander auf die Kacheln mit der Aufschrift Eingabetext und HTML-Label, um der Designoberfläche ein Eingabefeld und ein Label hinzuzufügen. Bringen Sie beide Elemente auf die gewünschte Größe, und ordnen Sie das Label am besten oberhalb des Eingabefeldes an. Sie können ein visuelles Element an Ecken auseinander- bzw. zusammenziehen. Löschen Sie nun den Vorgabetext des Eingabefeldes.
Selektieren Sie das Element in der Designoberfläche, oder wählen Sie das Element im oberen Listenfeld aus. Klicken Sie dann in der unteren App-Leiste auf das Symbol Daten und anschließend auf Standard. Löschen Sie den Vorgabetext im erscheinenden Popup-Fenster. Für das Label sehen Sie die Beschriftung Deutsch vor. Selektieren Sie es, klicken Sie wiederum in der unteren App-Leiste auf Daten und dann auf HTML-Text.
Überschreiben Sie die Vorgabe HTML-Beschriftung mit Deutsch, ohne die Anführungszeichen zu entfernen. Klicken Sie danach auf das Symbol Entwurf, um die Schrift zu formatieren. Über das Text-Symbol können Sie z. B. die Schriftgröße und die Schriftart anpassen.
Um den Bing-Translator-Service hinzuzufügen, blenden Sie die obere App-Leiste ein und wählen dort App-Daten/Datenquellen. Klicken Sie in der mittleren Spalte der erscheinenden Seite auf BingTranslator und anschließend in der rechten Spalte auf Verbinden. Der Dienst steht danach bereits zur Verfügung. Über die einzelnen Funktionen können Sie sich sofort informieren und diese testen.
Bevor Sie die App veröffentlichen, müssen Sie sich jedoch beim Dienst registrieren. Selektieren Sie unter Vorhandene Quellen die Kategorie Dienstkonfiguration, und folgen Sie dem Link Sie benötigen Hilfe bei der Herstellung einer Verbindung. Über das Zurück-Symbol in der linken oberen Ecke gelangen Sie wieder zur Designoberfläche.
Fügen Sie nun ein weiteres Eingabefeld und noch ein Label hinzu. Wenn Sie wollen, können Sie die vorhandenen auch kopieren (Strg+C, Strg+V). Beachten Sie jedoch, dass Siena in diesem Fall das Eingabefeld nicht Text2, sondern Text1_1 benennt. Als Beschriftung für das Label könnten Sie z. B. Übersetzung wählen. Fügen Sie außerdem ein Drop-down-Element hinzu.
Selektieren Sie das Drop-down-Feld, und klicken Sie in der unteren App-Leiste auf Daten/Standard. Notieren Sie als Vorgabe "en" für die englische Sprache. Damit das Drop-down-Feld Kürzel für alle verfügbaren Sprachen anzeigt, rufen Sie die SpeakLanguages-Funktion des BingTranslators auf: Klicken Sie auf das Symbol Elemente, und geben Sie im Popup-Fenster folgenden Code ein: BingTranslator!SpeakLanguages().
Die passenden Ausdrücke können Sie gegebenenfalls in der Vorschlagsliste auswählen. Beachten Sie, dass der Zugriff auf Funktionen und Eigenschaften mit dem Ausrufezeichen erfolgt. Selektieren Sie nun das Feld, in dem der übersetzte Text erscheinen soll. Rufen Sie im Kontext des Standard-Symbols die Funktion Translate auf. Als Parameter notieren Sie den im ersten Eingabefeld enthaltenen Text, also Text1!Text, die im Drop-down-Feld eingestellte Ziel sprache - Dropdown1!Ausgewählt!Wert - und schließlich die deutsche Ausgangssprache.
Für Letztere verwenden Sie die Variable from, die Sie innerhalb geschweifter Klammern notieren ({from:"de"}). Parameter werden in der deutschen Version von Project Siena mit Semikolon getrennt (in der englischen mit Komma), sodass sich folgender Funktionsaufruf ergibt:
BingTranslator!Translate(Text1!Text;Dropdown1!Ausgewählt!Wert;{from:"de"}).
Damit haben Sie bereits einen funktionierenden Übersetzer. Was noch fehlt, ist die Audiofunktion. Fügen Sie dem Entwurf die visuellen Elemente Audio und Schaltfläche hinzu. Beschriften Sie die Schaltfläche mit Sprechen.
Selektieren Sie das Audio-Element, klicken Sie auf Daten/Medien. BingTranslator stellt hier ebenfalls die passende Funktion zur Verfügung. Anzugeben sind der zu sprechende Text sowie die Sprache. Tippen Sie daher im Popup-Fenster den Code
BingTranslator!Speak(Text2!Text; Drop down1!Ausgewählt!Wert)
ein. Dass die Ansage per Schaltflächenklick gestartet werden kann, setzen Sie mithilfe von zwei Variablen und der Funktion KontextAktualisieren um. Diese Funktion aktualisiert den Zustand der App auf Basis von Variablen, die Sie wiederum in eckigen Klammern in der Form Name:Wert angeben - den Namen können Sie frei wählen.
Geben Sie für das Audio-Element in der unteren Symbolleiste den Code ein, der in der Tabelle unten genannt ist. Um den Trigger für die Schaltfläche umzusetzen, selektieren Sie diese im Entwurf, klicken in der unteren App-Leiste auf das Symbol Bei Auswahl und notieren im Popup-Fenster den Aufruf
KontextAktualisieren({BeiPause:falsch; Sprechen:wahr}).
Probieren Sie es aus. Wechseln Sie in die Vorschau (Symbol am rechten Ende der oberen App-Leiste), geben Sie in das erste Feld den zu übersetzenden Text ein, und klicken Sie auf die Schaltfläche, um sich die Übersetzung anzuhören.
Den Audioplayer können Sie nun verstecken: Selektieren Sie das Element in der Designoberfläche, klicken Sie in der unteren App-Leiste auf das Symbol Entwurf/Optionen. Klicken Sie in der linken Spalte des erscheinenden Popup-Fensters auf das unterste Symbol.
Wählen Sie für die Sichtbarkeit den Wert falsch. Damit ist die App komplett, gewünschte Anpassungen bezüglich des Aussehens der einzelnen Elemente können Sie mit den Optionen zum Symbol Entwurf durchführen.
