So erstellen Sie ein Programm für Windows. App Studio – eine neue Version des Online-Anwendungsdesigners von Microsoft

Hallo an alle!

Ich präsentiere Ihnen ein neues Tool von Microsoft „Windows App Studio» - ein Designer zum Erstellen von Anwendungen. Heute verrate ich dir wie für den durchschnittlichen Benutzer Es wurde möglich, Anwendungen für Windows und zu erstellen Windows Phone. Und ein wenig darüber, wie dieses Tool für einen Entwickler nützlich sein kann.

App Studio ist ein Tool zum Erstellen von Content-Anwendungen. Bei dieser Art von Anwendung stehen dem Nutzer aktuelle Informationen, verschiedene Kataloge und eine ganze Reihe weiterer Standardfunktionen zur Verfügung.

App Studio interagiert mit dem Benutzer über eine Weboberfläche, funktioniert in jedem Browser und ist unter dem folgenden Link verfügbar. Alle App Studio-Daten werden in der Cloud gespeichert.

Um auf App Studio zugreifen zu können, benötigen Sie ein Microsoft-Konto (ehemals Live ID) und Internetzugang.

Rezension

Die Benutzeroberfläche ist einfach und intuitiv:

An Startseite Es gibt ein Bedienfeld für den Zugriff auf die Hauptseiten der Ressource:

Auf der Hauptseite werden auch in App Studio erstellte, funktionierende und im Windows Store verfügbare Anwendungen demonstriert:

Vorlagen

Um eine Anwendung zu erstellen, bietet App Studio die folgenden Szenarien:

Verwenden Sie Vorlagen;
Erstellen Sie eine Anwendung von Grund auf.

App Studio-Vorlagen sind themenorientierte Anwendungen mit vorgefertigter Struktur, Demo-Inhalten und Bearbeitungsmöglichkeiten:

Im Gegensatz zu anderen Vorlagen bietet Empty App kein Skript zum Erstellen von Anwendungen und ist völlig inhaltsfrei.

Alle App Studio-Vorlagen bieten die Möglichkeit, universelle Anwendungen zu erstellen, die auf Windows- und Windows Phone 8.1-Geräten verfügbar sind. Zusätzlich zur Web-App-Vorlage:

Der Zweck dieser Vorlage ist die Neugestaltung mobile Version Website mithilfe der Website-URL zur Web-App hinzufügen. Diese Funktion ist nur für Windows verfügbar Telefonanwendungen.

Erwähnenswert ist die Vielfalt der App Studio-Vorlagen und das Vorhandensein thematischer Komponenten in jeder von ihnen:

Erstellen einer Anwendung

Der Anwendungserstellungszyklus in App Studio besteht aus 4 Phasen:

Suche nach einer Idee;
Füllinhalt;
Stildesign;
Verwendung einer vorgefertigten Anwendung;

Um die Fähigkeiten des Tools zu demonstrieren, erstellen wir einen Weinkatalog basierend auf der Empty App. Nennen wir es Wine Expert, beginnen wir mit der Strukturierung und dem Hinzufügen von Inhalten.

Die Startseite für die neue Empty App sieht so aus:

Der Arbeitsbereich ist in vier Teile unterteilt:

Arbeiten Sie an der Struktur und dem Inhalt der Bewerbung: Inhalt;
Die nächsten zwei Registerkarten sind dafür verantwortlich Aussehen und Anwendungsstil: Themen Und Fliesen.
Informationen veröffentlichen enthält vorläufige Einstellungen für die Veröffentlichung einer Anwendung im Windows Store.

An Inhalten arbeiten

Im Bereich „Inhalt“ legen wir fest, aus welchen Seiten Wine Expert bestehen soll:

Über Wein;
Weinkatalog;
Weinproduktion;
Über die Schöpfer.

Um die Struktur zu erstellen, verwenden wir eine Reihe von Blöcken, die von App Studio vorgeschlagen werden:

Design und Stil der Anwendung

App Studio bietet auf der Registerkarte „Themen“ die Möglichkeit, das Anwendungsthema zu konfigurieren:

Standard: dunkler, heller Hintergrund;
Der vom Benutzer bevorzugte Hintergrund, einschließlich der Option, das Bild als „Hintergrundbild“ festzulegen.

Mithilfe von „Benutzerdefinierter Stil“ können Sie auch die Textfarbe und die Standardanwendungsleiste der Anwendung anpassen:

Die Registerkarte „Kacheln“ bestimmt das Erscheinungsbild der Anwendung auf dem Startbildschirm. Hintergrundbild und Hintergrund-Bildschirmschoner:

Lassen Sie uns die Anwendungskachel auf dem Startbildschirm einrichten:

Vorlage umdrehen– Wohnfliesen;
Zyklusvorlage– Scrollen durch die angegebene Sammlung aus der Anwendung;
Ikonische Vorlage– ein Bild aller drei Fliesengrößen.

Wählen Sie für den Weinkatalog die Flip-Vorlage aus und laden Sie die erforderlichen Bilder hoch, die den angegebenen Größen entsprechen:

In der linken obere Ecke Es gibt auch einen Bereich zum Laden eines Bildes, das neben dem Anwendungsnamen angezeigt wird. Füllen wir ihn ebenfalls aus:

Auf der Registerkarte „Splash&Lock“ führen wir die gleichen Aktionen mit Bildern durch:

Speichern Sie die Änderungen und fahren Sie mit dem nächsten Schritt fort.

Einrichten einer App zur Veröffentlichung im Windows Store

Schauen wir uns an, welche Daten „Informationen veröffentlichen“ von uns benötigt, um die Veröffentlichung einer Anwendung im Windows Store vorzubereiten, zusätzlich zum verständlichen App-Titel, der App-Beschreibung und der Sprache:

Eine der Bedingungen für die Veröffentlichung einer Anwendung im Windows Store besteht darin, dass der Anwendungsname (App-Name) vor der Veröffentlichung im Store reserviert wird. Wir reservieren den Anwendungsnamen im Development Center. Der Store weist jedem reservierten (registrierten) Namen eine eigene „Paketidentität“ zu. Der App Studio-Benutzer muss diese Informationen, seinen Namen und seine ID kennen.

Damit App Studio ein spezielles Anwendungspaket zur Veröffentlichung generieren kann, müssen Sie das „Anwendungsmanifest“ – das Anwendungsmanifest – ausfüllen. Hierzu steht unter „Info veröffentlichen“ die Einstellung „App dem Store zuordnen“ zur Verfügung:

Die letzte Phase der Arbeit mit der Anwendung

Die Bewerbung ist fertig – klicken Sie auf „Fertig stellen“:

Wir haben die Möglichkeit, eine Vorschau der Anwendung für jedes Gerät anzuzeigen.

Die Funktion „Generieren“ schlägt vor, auszuwählen, für welche Plattform Sie die Anwendung generieren möchten. Wählen Sie Windows Phone 8.1 und Windows 8.1 aus, um einen neuen Anwendungstyp zu erstellen. Universal-:

Beachten Sie im Feld „Generierungstyp“, dass wir ein Anwendungspaket für die Installation auf dem Gerät und ein Paket für die Veröffentlichung benötigen. Der Quellcode der Anwendung wird standardmäßig generiert.

Jetzt können wir alle von App Studio bereitgestellten Materialien herunterladen, um mit der erstellten Anwendung zu arbeiten.

Installieren der Anwendung auf Ihrem Gerät

Eine mit App Studio erstellte Anwendung kann dank der generierten „Installierbaren Pakete“ direkt auf einem Gerät außerhalb des Windows Store installiert werden.

Was dazu benötigt wird:

Installieren Sie ein Zertifikat auf dem Gerät:
- Laden Sie je nach Gerät (PC, Tablet, Telefon) das in App Studio bereitgestellte Installationspaket für das Zertifikat herunter;
- Führen Sie die Datei mit der Erweiterung .cer aus (wählen Sie bei der Installation „Lokaler Computer“ und legen Sie alle Zertifikate im folgenden Speicher ab: Vertrauenswürdige Stammzertifizierungsstellen).
Installieren Sie die Anwendung auf Ihrem Gerät:
- Installierbare Pakete herunterladen;
- Suchen Sie die Datei Add-AppDevPackage1.ps1, klicken Sie mit der rechten Maustaste und starten Sie „Mit PowerShell ausführen“.

Greifen Sie auf Anwendungsdaten in der Cloud zu

Um dynamische Daten für eine veröffentlichte Anwendung hinzuzufügen, zu löschen oder zu bearbeiten, müssen Sie zur entsprechenden Anwendung in der Dashboard-Liste im Dev Center gehen. Öffnen Sie die Sammlung und nehmen Sie alle erforderlichen Änderungen vor. Die Anwendung wird automatisch aktualisiert.

Entwicklerfunktionen

App Studio kann für einen professionellen Entwickler nützlich sein, indem es den Quellcode der Anwendung bereitstellt.

Für einen Entwickler kann es auch praktisch sein, die Struktur seiner Anwendung mit diesem Tool zu erstellen und sie dann mit Visual Studio 2013 (Update 2) zu verfeinern, ohne Zeit mit dem Schreiben grundlegender Elemente zu verschwenden.

Abschluss

Um eine Anwendung in App Studio zu erstellen, sind außer der Erstellung und dem Empfang der Anwendung keine Programmierkenntnisse erforderlich Quellcode absolut frei.

Entwickler werden auch daran interessiert sein, das neue Tool zu nutzen, um beispielsweise die Zeit für die Entwicklung der Grundstruktur der Anwendung zu verkürzen.

Erstellen einer Visual Studio-Anwendung mit Fenster

Einführung in die Erstellung von Fensteranwendungen

API-Funktionen für die Arbeit mit der Konsole

Fensteranwendungsstruktur

Fenstersteuerung

Grafiken in Fensteranwendungen

Im Windows-Betriebssystem sind 3 Arten von Programmstrukturen möglich:

Dialog (Hauptfenster - Dialog),
freitragende oder fensterlose Struktur,
klassische (Fenster-, Rahmen-)Struktur

Konversationsanwendungen für Windows verfügen über eine minimale Benutzeroberfläche und übermitteln Informationen an den Benutzer über Standarddialogfelder (z. B. das Meldungsfeld MessageBox()). Das Programm arbeitet „blind“.

Nicht-Fensteranwendungen (Konsolenanwendungen). ist ein Programm, das im Textmodus ausgeführt wird. Die Bedienung der Konsolenanwendung ähnelt der Bedienung eines MS-DOS-Programms. Aber das ist nur ein äußerer Eindruck. Die Konsolenanwendung ist mit Sonderfunktionen ausgestattet Windows-Funktionen. Konsolenanwendungen sind ein System von Mitteln zur Benutzerinteraktion mit einem Computer, basierend auf der Verwendung eines Textanzeigemodus (alphanumerisch) oder ähnlichem (MS-DOS-Befehlszeile, Far). Konsolenanwendungen sind nicht nur in kompilierter Form, sondern auch in Textform sehr kompakt und verfügen über die gleiche Fähigkeit, über API-Funktionen auf Windows-Ressourcen zuzugreifen wie Fensteranwendungen.

Fenster-(Rahmen-)Anwendungen basieren auf einem speziellen Satz von API-Funktionen, die die grafische Benutzeroberfläche (GUI, Graphic User Interface) bilden. Das Hauptelement einer solchen Anwendung ist das Fenster. Ein Fenster kann Steuerelemente enthalten: Schaltflächen, Listen, Bearbeitungsfenster usw. Diese Elemente sind eigentlich auch Fenster, jedoch mit besonderen Eigenschaften. Ereignisse, die bei diesen Elementen (und dem Fenster selbst) auftreten, führen dazu, dass Meldungen an die Fensterprozedur gesendet werden.

Der Unterschied zwischen Fenster- und Konsolen-Windows-Anwendungen besteht darin, mit welcher Art von Informationen sie arbeiten.

Wählen Sie im Dialogfeld „Neues Projekt Visual Studio“ Visual C#, Silverlight für Windows Phone und eine einfache Windows Phone-Anwendungsvorlage aus und nennen Sie sie „ExploringXAMLFeatures“.

Im Zielauswahldialog Betriebssystem Wählen Sie Windows Phone OS 7.1

Nach dem Erstellen des Projekts sieht das Visual Studio-Fenster folgendermaßen aus:

Schauen wir uns die Projektstruktur im Projektmappen-Explorer-Fenster an:

Dateiname

Zweck

AppManifest.xml

Die Manifestdatei, die zum Generieren der XAP-Datei erforderlich ist, in die die Anwendung für die Bereitstellung auf dem Telefon gepackt wird.

AssemblyInfo.cs

Eine weitere Konfigurationsdatei, die einige Metadaten der Hauptassembly der Anwendung definiert.

WMAppManifest.xml

Eine Metadatendatei, die verschiedene Anwendungseinstellungen enthält: Titel, Einstellung der ersten Seite, Pfade zu Symbolen, Definition des Notwendigen Systemfunktionen usw.

App.xaml

Dies ist die Anwendungsressourcendatei. Hier befinden sich globale Ressourcen (dies wird bei der Verwendung von Stilen besprochen) oder globale Ereignisse (die beim Start der Anwendung auftreten). Diese Datei ist auch der Einstiegspunkt der Anwendung.

App.xaml.cs

Codedatei (Code-Behind) für App.xaml. Hier können Sie Ereignisse und Fehler auf Anwendungsebene behandeln, einschließlich Anwendungs-Tombstoning. Dieses Konzept wird später besprochen, wenn Multitasking besprochen wird.

ApplicationIcon.png

Ein Bild, das als Anwendungssymbol auf dem Telefon dient. Dies ist eine wirklich wichtige Datei, da sie das Erste ist, was Benutzer sehen, wenn sie mit der Anwendung arbeiten.

Hintergrund.png

Dieses Bild wird verwendet, wenn die Anwendung an den Startbildschirm des Telefons angeheftet wird. Dies ist im Wesentlichen ein großes Anwendungssymbol. Es ist sinnvoll, es optisch an ApplicationIcon.png anzugleichen.

MainPage.xaml

Dies ist Teil der ausgewählten Bewerbungsvorlage. MainPaige ist kein sehr guter Name, wird aber von der Standardprojektvorlage verwendet. Diese Seite stellt die Schnittstelle dar, die der Benutzer sieht, wenn er die Anwendung startet.

MainPage.xaml.cs

MainPage.xaml-Seitencodedatei.

SplashScreenImage.jpg

Dieses Bild wird angezeigt, während die Anwendung geladen wird. Sie können Ihr eigenes Bild mit Animation einstellen, um darüber zu informieren, dass die Anwendung geladen wird. Es gibt eine Technik zum Erstellen sehr dynamischer Ladeseiten in XNA, die jedoch den Rahmen dieser Artikelserie sprengt.

XAML-Dateien definieren die Schnittstelle der Anwendung. Eigentlich ist es einfach XML-Dateien mit XAML-Markup-Sprache.

Obwohl dies das einfachste Projekt ist, enthält es alle Schlüsselelemente, die alle anderen Vorlagen und Projekttypen enthalten.

Bitte beachten Sie, dass einige der im Formular dargestellten Einstellungen Konfigurationsdateien, kann in der visuellen Oberfläche zum Bearbeiten von Anwendungseinstellungen bearbeitet werden.

Hinzufügen von Steuerelementen zu einer XAML-Seite

Beachten Sie, dass Visual Studio standardmäßig sowohl das Design als auch XAML der Seite rendert.

Wenn Sie zu anderen Lösungsdateien navigiert sind, doppelklicken Sie auf die Datei MainPage.xaml.

Fügen Sie im XAML-Code der Datei „MainPage.xaml“ innerhalb eines Grid-Elements namens „ContentPanel“ ein Button-Steuerelement ein:

Im Designfenster erscheint die Schaltfläche sofort ungefähr in der Mitte der Oberfläche. Achten Sie auf das Attribut Name? Dies ist die eindeutige Kennung des Elements, mit deren Hilfe Sie es im Code referenzieren können. Betrachten Sie dies als das ID-Attribut des Steuerelements. Fügen wir nun eine Aktion hinzu, wenn auf diese Schaltfläche geklickt wird. Es gibt zwei Möglichkeiten, ein Ereignis an einen Button (oder ein anderes Steuerelement) zu binden. In XAML können wir direkt in der Button-Definition ein Click-Attribut hinzufügen und InteliSense fragt automatisch, ob wir einen neuen Event-Handler generieren möchten:

Sie können den Ereignishandler direkt in den Seitencode „Home.xaml.cs“ binden, ohne ihn in der XAML-Datei anzugeben:

Public MainPage() ( InitializeComponent(); MyButton.Click +=new RoutedEventHandler(MyButton_Click); )

Beide Methoden funktionieren. Sie können jedes davon verwenden. Der Einfachheit halber verwenden wir hier die XAML-Methodendefinition. Sie können jetzt verwalteten Code in die MyButton_Click-Funktion schreiben, der die Schnittstelle ändert oder andere Funktionen aufruft. Vervollständigen wir unsere Beispielanwendung, indem wir Code hinzufügen, der den Text im TextBlock PageTitle (PageTitle ist ein Name, sodass Sie ihn direkt im Code referenzieren können) in „hello wp7“ ändert. Fügen Sie dazu den folgenden Code zur Funktion hinzu:

Private void MyButton_Click(object sender, RoutedEventArgs e) ( PageTitle.Text = "hello wp7"; )

In den Projekteinstellungen auswählen Windows-Gerät Emulator

Und starten Sie die Anwendung, indem Sie auf das grüne Dreieck oder die F5-Taste klicken. Nachdem Sie die Anwendung gestartet und auf die Schaltfläche „Drücken Sie mich“ geklickt haben, sollte der Bildschirm etwa wie im Screenshot unten aussehen:

Neue Seiten zu einem Projekt hinzufügen

Nur die einfachste Bewerbung besteht aus einer Seite. Wir wollen lernen, wie man komplexe mehrseitige Anwendungen schreibt. Wir können die Pivot- und Panorama-Vorlagen verwenden, wir können das MVVM-Entwurfsmuster (Model-View-ViewModel) verwenden und zunächst lernen wir, wie man dem Projekt neue Seiten hinzufügt und zwischen ihnen wechselt.

Klicken Sie im Projektmappen-Explorer-Fenster mit der rechten Maustaste auf den Projektnamen und wählen Sie im angezeigten Menü „Hinzufügen“ und dann „Neues Element“ aus. Wählen Sie im sich öffnenden Dialogfeld „Windows Phone Portrait Page“ aus und nennen Sie sie „SecondPage.xaml“:

Wir haben jetzt eine leere XAML-Seite, eine exakte Kopie der Seite „MainPage.xaml“, bevor wir sie bearbeitet haben.

Um die Seiten besser unterscheiden zu können, gehen wir zum XAML-Code der SecondPage-Seite und bearbeiten das TextBlock-Element mit dem Namen PageTitle Texteigenschaft wie nachstehend:

Navigation zwischen Anwendungsseiten

Wir haben also zwei Seiten im Projekt. Wenn die Anwendung gestartet wird, wird die Seite „MainPage.xaml“ angezeigt. Wie kann ich jetzt von MainPage.xaml zu SecondPage.xaml wechseln?

Versuchen wir es mit zwei einfache Wege, Wie kann man es machen.

Fügen Sie im XAML-Code der Datei MainPage.xaml nach dem zuvor hinzugefügten Button-Code den HyperlinkButton-Code wie unten gezeigt hinzu: