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.

Windows 8: Starbildschirm

© Windows

Windows

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.

Microsoft, Windows 8

© Microsoft

Siena-Oberfläche: Die Funktionsleiste am oberen Bildschirmrand ist nicht immer eingeblendet.

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.

Microsoft, Windows 8

© Microsoft

Auf der rechten Bildschirmseite wird die Palette visueller Elemente eingeblendet.

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.

Microsoft, Windows 8

© Microsoft

Die praktische Rückgängig-Funktion ist gut versteckt.

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.

Microsoft, Windows 8

© Microsoft

Möchten Sie den vorgegebenen Namen ändern, überschreiben Sie ihn einfach.

Ü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.

Microsoft, Windows 8

© Microsoft

Seite Datenquellen mit hinzugefügtem BingTranslator: Wählen Sie die Funktion, die Sie in die App integrieren wollen, im Listenfeld aus.

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.

Microsoft, Windows 8

© Microsoft

Der Aufruf der Translate-Funktion verknüpft die gewünschte Funktionalität mit der App.

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.

Microsoft, Windows 8

© Microsoft

Siena-Oberfläche: Die Funktionsleiste am oberen Bildschirmrand ist nicht immer eingeblendet.

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.

Microsoft, Windows 8

© Microsoft

Mit folgenden Werten steuern Sie das Audio-Element der Siena-App.

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.

Microsoft, Windows 8

© Microsoft

Veröffentlichen Sie Ihre App, und nutzen Sie sie für den eigenen Gebrauch.

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.

Mehr zum Thema

Windows 8 herunterfahren mit einem Klick
Shutdown

Wir erklären, wie Sie Windows 8 herunterfahren können - mit nur einem Klick! Möglich ist der Shutdown via Kachel-Verknüpfung oder…
Windows 8 Logo
Systemfehler beheben

Wir helfen Ihnen, Windows 8 im abgesicherten Modus zu starten. Mit unseren Tipps beheben Sie Systemfehler, beseitigen verschiedene Probleme und mehr.
Microsoft, Windows 8.1, Betriebssystem
Startmenü, Desktop-Apps & Co.

Windows 8.1 mit Windows 7 Oberfläche nutzen: Wir zeigen, wie es geht! Wir haben Tipps und Downloads fürs Startmenü, den Sperrbildschirm,…
Windows Tipps & Tricks: Benutzerrechte unter Windows 8.1
Programme richtig installieren

Wir zeigen Ihnen, wie Sie sich unter Windows 8.1 alle Benutzerrechte verschaffen und Programme richtig installieren.
Microsoft hat eine neue Windows-10-Preview als ISO-Download veröffentlicht.
Startmenü, Apps im Vordergrund & Co.

Startmenü, Apps im Vordergrund, Cortana-Alternative und mehr: Wir zeigen, wie Sie Windows 10 Features in Windows 7 und Windows 8.1 nutzen können.