Eine Übersetzungs-App erstellen mit BingTranslator

Sie können das integrierte visuelle Objekt BingTranslator in Project Siena verwenden, um eine App zu erstellen, die geschriebene Eingaben akzeptiert, Handschrifterkennung zum Identifizieren der geschriebenen Phrase verwendet und diese dann in die ausgewählte Sprache übersetzt.

Sie können die Projektdateien von der Beispielgalerie herunterladen und die App beim Durcharbeiten der Anleitung entwickeln.

Mit BingTranslator verbinden

Öffnen Sie zum Erstellen dieser App zuerst Project Siena und fügen Sie dann die Datenverbindung zu BingTranslator hinzu. Die die für die Verbindung erforderlichen Konfigurationsdateien sind in Project Siena integriert. Sie können die Beispiel-Anmeldedaten in dieser Anleitung verwenden, um eine App zu erstellen, die Sie auf Ihrem lokalen Rechner ausführen können. Nachdem Sie sich mit BingTranslator verbunden haben, können Sie der Seite visuelle Objekte hinzufügen und dann Text eingeben, der dann übersetzt wird.

BingTranslator als Datenquelle hinzufügen

1. Öffnen Sie Project Siena. Rechtsklicken Sie irgendwo im App-Fenster, sodass die App-Leiste angezeigt wird. Klicken Sie das Menü App-Daten und dann Datenquellen.

   

   Klicken Sie in der Liste Datenquellen auf BingTranslator und dann auf Verbinden.

2. Klicken Sie die Schaltfläche "Zurück", und Sie gelangen zurück zur Entwurfsoberfläche.

   

Entwerfen und Konfigurieren der App-Elemente

Sie können jetzt mit dem Entwerfen der App und der Konfiguration der visuelle Objekte beginnen. Das folgende Vorgehen führt Sie durch das Hinzufügen und Konfigurieren der visuellen Objekte, das für die Eingabe von Text und die Ausgabe aus dem Übersetzungsdienst erforderlich ist.

Hintergrund anpassen

Der Bildschirm ist ein visuelles Objekt, genauso wie die Elemente in der Bibliothek Visuelle Objekte, der Bereich, von dem aus Sie neue visuelle Objekte zur Seite hinzufügen. Sie können ihn verändern, indem Sie die Eigenschaften unten im App-Fenster konfigurieren. Ändern Sie den Hintergrund, indem Sie die Farbe anpassen oder ein Hintergrundbild hinzufügen. In diesem Beispiel fügen wir ein Hintergrundbild ein.

So fügen Sie dem Bildschirm ein Hintergrundbild hinzu

1. Klicken Sie Hintergrundbild unten im App-Fenster und dann Bild hinzufügen.

   

2. Navigieren Sie an den Ort, an den Sie die Dateien heruntergeladen haben und wählen Sie dann MainScreenBkgTexture. Klicken Sie auf Öffnen.

Das Hintergrundbild wird auf den Bildschirm angewandt.

Formen hinzufügen

Visuelle Formobjekte sind genau das: visuelle Objekte in einer Reihe gängiger Formen. Sie können irgendeines der visuellen Formobjekte hinzufügen und es dann so konfigurieren, dass es den Anforderungen an die App entspricht. In dieser exemplarischen Vorgehensweise fügen wir ein visuelles Objekt in Form eines Rechtecks ein. Das Rechteck bildet den Hintergrund für die visuellen Objekte, die wir im nächsten Abschnitt einsetzen werden.

Ein rechteckiges visuelles Objekt zur Entwurfsoberfläche hinzufügen

1. Klicken Sie das Pluszeichen (das Symbol Visuelles Objekt hinzufügen), sodass sich die Bibliothek Visuelle Objekte öffnet.

   

2. Geben Sie in das Suchfeld den Begriff Rechteck ein.

3. Klicken Sie auf Rechteck, sodass es der Entwurfsoberfläche hinzugefügt wird.

   

4. Klicken Sie auf Position und Größe. Klicken Sie im Dialogfeld Position und Größe auf Breite.

   

   Geben Sie im Feld fx die Zahl 100 ein.

   

5. Klicken Sie Höhe.

   

   Geben Sie im Feld fx die Zahl 300 ein.

6. Klicken Sie Füllung an und legen Sie die Eigenschaft auf Hellgrau fest. Klicken Sie dazu entweder auf die hellgraue Kachel oder geben Sie RGBA (127, 127, 127, 1) im Feld fx ein.

   

7. Positionieren Sie das Rechteck, indem Sie es in die rechte obere Ecke der App ziehen.

   

Sie können jetzt die visuellen Objekte hinzufügen.

Fügen Sie visuelle Bildobjekte hinzu und konfigurieren Sie diese so, dass sie der Benutzereingabe entsprechen

Die App beinhaltet drei visuelle Bildobjekte. Die visuellen Objekte fungieren als Schaltflächen und werden so konfiguriert, dass damit die Canvas gelöscht wird (Teil des visuellen Objekts "Stift"), man darauf schreiben oder Teile des Geschriebenen löschen kann.

Legen Sie die visuellen Bildobjekte auf das Rechteck, das Sie gerade hinzugefügt haben.

So fügen ein visuelles Bildobjekt hinzu

1. Klicken Sie in der Bibliothek auf Bild. Ziehen Sie das visuelle Bildobjekt in den oberen Teil des Rechtecks.

   

   Tipp

   Beachten Sie die gestrichelte Linie, die beim Bewegen des visuellen Objekts angezeigt wird. Diese Führungslinien helfen bei der Ausrichtung der Elemente auf der Canvas.

2. Drücken Sie bei ausgewähltem visuellen Bildobjekt Strg+C und dann Strg+V und fügen Sie ein zweites hinzu. Drücken Sie noch einmal Strg+V, um ein drittes visuelles Bildobjekt hinzuzufügen.

3. Richten Sie das zweite und dritte visuelle Bildobjekt so aus, dass alle drei untereinander stehen.

   

Nachdem wir nun die visuellen Bildobjekte hinzugefügt haben, fügen wir im nächsten Schritt die Bilder ein. Es gibt zwei für jedes visuelle Objekt. Dann konfigurieren wir das visuelle Objekt so, dass es als Schaltfläche funktioniert. Das angezeigte Bild hängt von seinem Status ab (ausgewählt oder Ruhezustand), nachdem es geklickt oder getippt wurde.

So fügen Sie die Bilder hinzu

1. Klicken Sie das oberste visuelle Bildobjekt in der Spalte. Klicken Sie Bild unten im App-Fenster.

   

   Wenn die Schaltfläche Bild nicht angezeigt wird, klicken Sie Daten.

   

2. Klicken Sie im Dialogfeld Bildauf Bild hinzufügen.

   

   Klicken Sie ClearIcon_Rest. Klicken Sie auf Öffnen.

3. Klicken Sie mit ausgewähltem ersten visuellen Objekt auf Bild. Klicken Sie im Dialogfeld Bildauf Bild hinzufügen. Klicken Sie ClearIcon_Selected. Klicken Sie auf Öffnen.

4. Klicken Sie das zweite visuelle Bildobjekt in der Spalte. Klicken Sie Bild. Klicken Sie im Dialogfeld Bildauf Bild hinzufügen. Klicken Sie PencilIcon_Rest. Klicken Sie auf Öffnen.

5. Klicken Sie mit ausgewähltem zweiten visuellen Objekt noch einmal auf Bild. Klicken Sie im Dialogfeld Bildauf Bild hinzufügen. Klicken Sie PencilIcon_Selected. Klicken Sie auf Öffnen.

6. Klicken Sie das dritte visuelle Bildobjekt in der Spalte. Klicken Sie Bild. Klicken Sie im Dialogfeld Bildauf Bild hinzufügen. Klicken Sie EraserIcon_Rest. Klicken Sie auf Öffnen.

7. Klicken Sie mit ausgewähltem dritten visuellen Objekt noch einmal auf Bild. Klicken Sie im Dialogfeld Bildauf Bild hinzufügen. Klicken Sie EraserIcon_Selected. Klicken Sie auf Öffnen.

Nachdem Sie nun die Bilder hinzugefügt haben, können Sie die Zustände für die visuellen Bildobjekte auf Grundlage des Kontextes festlegen, der von den hinzugefügten Bildern vermittelt wird. Wenn beispielsweise das Bild PencilIcon_Selected angezeigt wird, soll der Stift aktiviert sein. Durch die Verknüpfung des Bildes PencilIcon_Selected mit dem Zustand "Ausgewählt" des visuellen Objekts befehlen Sie der App, das Schreiben auf der Canvas zu ermöglichen und gleichzeitig das Bild anzuzeigen, sodass der Benutzer weiß, dass der Schreibmodus aktiv ist. Der Zustand jedes visuellen Objekts ändert sich, wenn ein Benutzer es anklickt.

So konfigurieren Sie die Taste "Löschen"

• Klicken Sie das erste visuelle Bildobjekt. Klicken Sie unten im App-Fenster auf OnSelect. Geben Sie im Feld fx Folgendes ein: KontextAktualisieren({penClear:true});KontextAktualisieren({mode:"pen",penClear:false}). Drücken Sie die EINGABETASTE.

  Jetzt ist die Schaltfläche "Löschen" aktiviert.

So konfigurieren Sie die Schaltfläche "Stift"

1. Klicken Sie das zweite visuelle Bildobjekt.

   

   Klicken Sie OnSelect unten im App-Fenster.

   

2. Geben Sie im Feld fx Folgendes ein: KontextAktualisieren({mode:"pen"}). Drücken Sie die EINGABETASTE.

   Jetzt ist das Werkzeug "Stift" aktiviert, wenn die Schaltfläche "Stift" aktiviert ist.

3. Klicken Sie mit ausgewählter Schaltfläche "Stift" unten im App-Fenster auf Bild.

4. Geben Sie im Feld fx Folgendes ein: If(mode="pen";PencilIcon_Selected;PencilIcon_Rest). Drücken Sie die EINGABETASTE.

   Wenn jetzt die Schaltfläche "Stift" ausgewählt ist, dann befindet sich die Canvas im Modus "Stift" und das Symbol PencilIcon_Selected wird angezeigt; anderenfalls ist die Canvas in einem anderen Modus und das Symbol PencilIcon_Rest wird angezeigt.

So konfigurieren Sie die Taste "Radierer"

1. Klicken Sie das dritte visuelle Bildobjekt. Klicken Sie OnSelect.

2. Geben Sie im Feld fx Folgendes ein: KontextAktualisieren({mode:"erase"}). Drücken Sie die EINGABETASTE.

   Jetzt ist das Werkzeug "Radierer" aktiviert, wenn die Schaltfläche "Radierer" ausgewählt ist.

3. Klicken Sie mit noch ausgewählter Schaltfläche "Radierer" unten im App-Fenster auf Bild.

4. Geben Sie im Feld fx Folgendes ein: If(mode="erase",EraserIcon_Selected, EraserIcon_Rest). Drücken Sie die EINGABETASTE.

   Wenn jetzt die Schaltfläche "Radierer" ausgewählt ist, dann befindet sich die Canvas im Modus "Radierer" und das Symbol "EraserIcon_Selected" wird angezeigt; anderenfalls ist die Canvas in einem anderen Modus und das Symbol "EraserIcon_Rest" wird angezeigt.

Sie können Ihre App testen, indem Sie "F5" drücken (oder mit der rechten Maustaste auf die Canvas klicken und dann oben im Bildschirm auf Vorschau klicken).

Klicken Sie die Schaltflächen "Stift" und "Radierer" und beobachten Sie, wie sie ihren Zustand ändern. Drpcken Sie dann "ESC", um zum Designarbeitsbereich zurückzukehren.

Visuelles Objekt "Stift" hinzufügen und konfigurieren

Jetzt fügen Sie das visuelle Element "Stift" hinzu und geben an, was es in Ihrer App können soll. Das visuelle Element ist ein beschreibbares Canvas und eine Gruppe von Benutzerschaltflächen, die sie ändern oder verbergen können.

So fügen Sie das visuelle Objekt "Stift" hinzu und gestalten die Canvas

1. Öffnen Sie die Visuals-Bibliothek und klicken auf Stift.

   Ein visuelles Objekt "Stift" wird auf der Entwurfsoberfläche angezeigt.

   

2. Klicken Sie mit ausgewähltem Stift auf Optionen und dann Steuerelemente anzeigen.

   Wenn Optionen nicht angezeigt wird, klicken Sie Design.

   Klicken Sie im Dialogfeld Steuerelemente anzeigen auf False.

3. Klicken Sie erst auf Füllung und dann auf Weiß.

4. Passen Sie die Größe des visuellen Objekts "Stift" an, sodass es an der linken und unteren Kante des visuellen Objekts "Rechteck" ausgerichtet ist, in dem die Schaltflächenbilder enthalten sind.

So konfigurieren Sie das visuelle Objekt "Stift"

1. Klicken Sie mit ausgewähltem Stift auf Optionen und dann Modus.

2. Klicken Sie Daten und dann Löschen. Geben Sie im Dialogfeld Löschen in das Feld fx Folgendes ein: penClear.

3. Öffnen Sie das Dialogfeld Optionen erneut. Geben Sie im Feld fx Folgendes ein: If(mode="pen";PenMode!Draw;PenMode!Erase).

   Das heißt, bei ausgewähltem Stiftwerkzeug befindet sich die Canvas im Zeichenmodus; ist es nicht ausgewählt, ist sie im Modus "Löschen".

Wenn man jetzt die Schaltfläche "Stift" klickt, kann man auf der Canvas zeichnen. Klickt man die Schaltfläche "Radierer", so kann man mit einer Streifbewegung das auf der Canvas Gezeichnete löschen. Wenn man die Schaltfläche "Löschen" drückt, wird alles von der Canvas gelöscht.

Sie können die App jetzt testen, indem Sie "F5" drücken (oder mit der rechten Maustaste in die Canvas klicken und oben im Bildschirm Vorschau wählen).

Das zusammengesetzte visuelle Objekt "BingTranslator" hinzufügen

Das visuelle Element "BingTranslator" ist ein zusammengesetztes visuelles Objekt, das heißt es besteht aus mehreren visuellen Elementen. Sie fügen das zusammengesetzte visuelle Element hinzu und verändern dann die einzelnen Teile.

So fügen Sie das visuelle Objekt "BingTranslator" hinzu

1. Klicken Sie in der Visuals-Bibliothek auf Web und dann auf BingTranslator, um das Element zur Designoberfläche hinzuzufügen.

2. Drücken Sie – alle Elemente des zusammengesetzten visuellen Objekts sind noch immer ausgewählt – Strg und ziehen Sie dann das visuelle Objekt "BingTranslator" unten in das Dokument.

Sie können jetzt direkt in das Texteingabefeld links tippen und sehen den übersetzten Text im rechten Texteingabefeld. Der Text wird in die Sprache übersetzt, die in der Dropdownliste angezeigt wird. Wenn Sie einen Text übersetzen möchten, wählen Sie eine Zielsprache aus der Liste.

Konfigurieren des visuellen Objekts "Eingabetext", sodass es Eingaben von der Stift-Canvas akzeptiert

Wir konfigurieren nun das Feld "Eingabetext" links, sodass es den auf der Stift-Canvas geschriebenen Text erkennt und anzeigt.

So konfigurieren Sie das visuelle Objekt "Eingabetext"

1. Öffnen Sie das Dialogfeld Optionen bei ausgewähltem linken Texteingabeelement.

   Wenn das Symbol Design angezeigt wird, klicken Sie darauf, klicken Sie auf Mehr Informationen und dann auf Optionen.

2. Klicken Sie im Dialogfeld Optionen auf Modus und dann auf Mehrzeilig, sodass das visuelle Element mehrere Textzeilen anzeigen kann.

3. Klicken Sie Daten und dann Standard. Geben Sie im Feld fx die Zeichenfolge Pen1!RecognizedText ein, und drücken Sie die EINGABETASTE.

   Damit wird das Texteingabeelement so eingestellt, dass es den auf der Stift-Canvas geschriebenen Text erkennt und anzeigt.

Das visuelle Objekt "BingTranslator" gestalten

Das visuelle Objekt "BingTranslator" kann so angepasst werden, dass es den verfügbaren Platz besser ausfüllt.

So ändern Sie Position und Größe des visuellen Objekts "BingTranslator"

1. Drücken Sie STRG, und klicken Sie dann das Bing-Logo und die Beschriftung Übersetzen.

2. Lassen Sie die STRG-Taste los, und ziehen Sie die beiden Elemente nun so, dass Sie unten links an der Stift-Canvas ausgerichtet sind.

   

3. Drücken Sie STRG, und klicken Sie dann auf die Beschriftung Übersetzen in und die Dropdownliste der Sprachen.

4. Lassen Sie die STRG-Taste los, und ziehen Sie die Elemente nun so, dass Sie unten links am Bing-Logo ausgerichtet sind.

   

5. Ziehen Sie das linke Texteingabefeld, sodass es links unten an der Beschriftung Übersetzen in ausgerichtet ist.

6. Klicken Sie bei ausgewähltem linkem Texteingabefeld auf Weitere Informationen, klicken Sie auf Position und Größe und klicken Sie auf Breite.

7. Geben Sie im Feld fx die Zahl 662 ein. Klicken Sie Höhe. Geben Sie im Feld fx die Zahl 325 ein.

8. Klicken Sie Füllung und dann Weiß.

9. Ziehen Sie das rechte Texteingabefeld, sodass es oben rechts am Texteingabefeld ausgerichtet ist.

   

10. Klicken Sie bei ausgewähltem rechtem Texteingabefeld auf Weitere Informationen, klicken Sie auf Position und Größe und klicken Sie auf Breite.

11. Geben Sie im Feld fx die Zahl 662 ein. Klicken Sie Höhe. Geben Sie im Feld fx die Zahl 325 ein. Passen Sie die Ausrichtung wenn nötig an

12. Klicken Sie Füllung und dann Weiß.

Vorschau der App anzeigen

Sie können jetzt die gesamte App in der Vorschau anzeigen, indem Sie "F5" drücken, auf die Schaltfläche "Stift" klicken und ein Wort oder einen Satz auf die Stift-Canvas eingeben.