Freigeben über

Exemplarische Vorgehensweise: Erstellen eines LightSwitch-Client für mobile Benutzer

  • Artikel

Mit Microsoft LightSwitch für Visual Studio Update 2 verwenden, können Sie einen HTML-Client, in dem mobile Benutzer Daten aus den Remotestandorten anzeigen, hinzufügen und aktualisieren können, indem sie Modern, verwenden Fingereingabe-ausgerichtete Geräte wie Telefone und Tablette erstellen.In dieser exemplarischen Vorgehensweise erstellen Sie einen Client für ein fiktives Umzugsunternehmen erstellt, Contoso Scrollen, sodass seine KundeDienstmitarbeiter leichter einschätzen können, wie viele Personen, LKWs und Felder jeder Auftrag erfordert.

Bei Contoso verbringen Planer die meisten ihrer Zeit im Büro, persönlich verweisen mit potenziellen Kunden oder am Telefon und ordnen Besuche der Folge-E-Mail-Nachrichten an.Diese Worker verwenden einen umfangreichen Desktopclient, der auf Grundlage Silverlight ist und der bessere Stützschwere Dateneingabe mit der Tastatur und Maus.Im Gegensatz dazu wandern die Planungsspezialisten ganzen Tag, machen Besuche der Folge-E-Mail-Nachrichten an verschiedenen Stellen und zeichnen Informationen wie die Größe, der Inhalt und die Eintragsanforderungen jedes Platzes auf.Diese mobilen Benutzern erfordern einen Client, der ihnen Informationen über jeden Besuch der Folge-E-Mail-Nachrichten von den Planern jedoch von auch Unterstützung nicht nur anzeigt, die bestimmte Typen von Daten eingeben, Fotos ausführen und das Verschiebungsteam über Parkeinschränkungen oder andere Details warnen.

Der Desktopclient für die Planer ist bereits erstellt wurde.Sie erstellen den mobilen Client, dem die Planungsspezialisten, um die Termine nachverfolgen, die die Planer dafür sorgen und Details über die einzelnen Verschiebung einzugeben.

Vorbereitungsmaßnahmen

  • Laden Sie herunter und installieren Sie Microsoft LightSwitch für Visual Studio Update 2.

  • Laden Sie die ContosoMoving-Beispielanwendung herunter.

  • Installieren Sie die NuGet-Paket-Manager-Erweiterung, wie die folgende Prozedur beschreibt.

Um die NuGet-Erweiterung installieren

  1. Klicken Sie auf der Menüleiste wählen Sie Tools, Erweiterungen und Updates aus.

  2. Im Dialogfeld Erweiterungen und Updates wählen Sie den Knoten Online aus.

  3. Im Visual Studio Gallery durchsuchen Textfeld geben Sie NuGet ein.

  4. In der Ergebnisliste wählen Sie NuGet-Paket-Manager aus und wählen dann die Schaltfläche Herunterladen aus.

    HinweisHinweis

    Sie Visual Studio neu starten, um die Erweiterung bereitzustellen.

Erste Schritte

Bevor Sie den mobilen Client erstellen, erstellen Sie einigen Beispieldaten für den Desktopclient, den Sie heruntergeladen haben.

So Beispieldaten erstellen

  1. Klicken Sie in der Menüleiste auf Datei, dann auf Öffnen und Projekt/Projektmappe.

  2. Suchen Sie die ContosoMoving.sln-Datei, die Sie heruntergeladen haben, und öffnen Sie diese.

  3. Klicken Sie in der Menüleiste auf Debuggen und dann auf Debuggen starten.

  4. Im ausgeführten Client auf der Menüleiste, wählen Sie Beispieldaten, Beispieldaten erstellen aus.

  5. Klicken Sie auf der Symbolleiste im Bildschirm Beispieldaten erstellen, wählen Sie die Schaltfläche Alle Beispieldaten hinzufügen aus.

    Beispieldaten werden für Zustand, Mitarbeiter, Kunde und Termin Entitäten erstellt.

  6. Wählen Sie in der Symbolleiste die Schaltfläche Speichern aus.

  7. Klicken Sie auf der Menüleiste wählen Sie Startseite aus.

  8. Wählen Sie in der Symbolleiste die Schaltfläche Aktualisieren aus.

    Eine Liste bevorstehender Terminen für alle Mitarbeiter angezeigt wird, und Sie können die anderen Bildschirme im Desktopclient untersuchen.

Fügen Sie einen mobilen Client hinzu

Als Nächstes fügen Sie ein HTML-Clientprojekt der vorhandenen Projektmappe hinzu.

So fügen Sie ein HTML-Clientprojekt hinzufügen

  1. In Projektmappen-Explorer wählen Sie den Knoten ContosoMoving aus.

  2. Klicken Sie auf der Menüleiste wählen Sie Projekt, Client hinzufügen aus.

  3. Im Dialogfeld wählen Sie Client hinzufügenHTML-Client aus, nennen Sie es MobileClient, und wählen Sie dann die Schaltfläche OK aus.

  4. Im Projektupgradedialogfeld, das angezeigt wird, wählen Sie die Schaltfläche OK aus.

    Das Projekt wird Microsoft LightSwitch für Visual Studio Update 2 aktualisiert, und ein Migrationsbericht wird im Browser.Die Dateistruktur der Projektmappe wird geändert, und Sie können die Projektmappe auf einem Computer nicht mehr öffnen, die nicht hat, dass LightSwitch installierte Version von.

    In Projektmappen-Explorer wurde der Knoten DatenquellenServer umbenannt, wurde der Knoten BildschirmeClient umbenannt, und ein Knoten wurde und den Namen MobileClient hinzugefügt.Der Knoten MobileClient wird als Start Client markiert, wird es, wenn Sie die Anwendung debuggen.Sie können den Start Client ändern, indem Sie das Kontextmenü für jeden Clientknoten öffnen und dann Als Startclient festlegen auswählen.

Erstellen Sie Bildschirme erstellt und definieren Sie Navigation

Als Nächstes erstellen Sie einen Ausgangsbildschirm erstellt und stößt Details, definieren die Navigation zwischen den Bildschirmen und stellen ein modales Dialogfeld erstellt.Mobile Clients verwenden ein anderes Navigationsmodell als Tischplattenclients.In der Regel ist nur ein Bildschirm in einem mobilen Client sichtbar, und Änderungen ein Commit durchgeführt, wenn Sie von einem Bildschirm zu anderen verschieben.

So fügen Sie einen Ausgangsbildschirm erstellen

  1. In Projektmappen-Explorer wählen Sie den Knoten MobileClient aus.

  2. Klicken Sie auf der Menüleiste wählen Sie Projekt, Bildschirm hinzufügen aus.

  3. Im Dialogfeld Neuen Bildschirm hinzufügen wählen Sie die Bildschirm zum Suchen von Daten Vorlage aus.

  4. Im Bildschirmname Textfeld geben Sie POS1 ein.

  5. In der Liste wählen Sie BildschirmdatenUpcomingAppointments aus und wählen dann die Schaltfläche OK aus.

Um den Ausgangsbildschirm anpassen

  1. Im Bildschirmdesigner wählen Sie den Knoten Termin aus, und wählen Sie dann Zeilenlayout in der Dropdownliste aus.

  2. Zeilenlayout | Termin unter dem Knoten löschen Sie alle Knoten mit Ausnahme Startdatum und Kunde.

  3. Klicken Sie auf der Menüleiste wählen Sie Debugging starten aus.

    Der mobile Client wird im Browser.

    An diesem Punkt die Bildschirmaktualisierungen nur die Termine.Als Nächstes fügen Sie einen Detailbildschirm hinzu, sodass Termindetails angezeigt werden, wenn ein Benutzer einen Termin Typen.

So fügen Sie einen Detailbildschirm erstellen

  1. In Projektmappen-Explorer wählen Sie den Knoten MobileClient aus.

  2. Klicken Sie auf der Menüleiste wählen Sie Projekt, Bildschirm hinzufügen aus.

  3. Im Dialogfeld Neuen Bildschirm hinzufügen wählen Sie die Detailbildschirm anzeigen Vorlage aus.

  4. Im Bildschirmname Textfeld geben Sie ViewAppointmentDetail ein.

  5. In der Liste wählen Sie BildschirmdatenTermin aus.

  6. Wählen Sie Termindetails, Termin AppointmentPhotos und Kontrollkästchen Terminräume, und wählen Sie dann die Schaltfläche OK aus.

    Im Bildschirmdesigner wird ein Registerkarten Layout erstellt, und die verschiedenen Typen von Daten werden von Registerkarten organisiert.

Um den Detailbildschirm anpassen

  1. In Projektmappen-Explorer öffnen Sie den Bildschirm ViewAppointmentDetail.

  2. Im Bildschirmdesigner wählen Sie den Zeilenlayout | Details Knoten aus.

  3. Löschen Sie Startdatum, Enddatum, Notizen, Verschiebungstyp, Mitarbeiter und Knoten Kunde.

  4. Öffnen Sie das Kontextmenü für den Knoten Registerkarten, und wählen Sie dann Registerkarte hinzufügen aus.

  5. Im Fenster Eigenschaften legen Sie den Wert der - Eigenschaft auf NameHinweise fest.

  6. Im Bildschirmdesigner wählen Sie den Knoten Zeilenlayout | Notizen aus, erweitern Sie den Knoten Hinzufügen, und wählen Sie dann Weitere Bildschirmdaten aus.

    Das Dialogfeld wird angezeigt. Bildschirmdaten hinzufügen

  7. Im Geben Sie die hinzuzufügenden Bildschirmdaten an Textfeld geben Sie Appointment.Notes ein und klicken Sie dann auf die Schaltfläche OK aus.

  8. Wählen Sie den Knoten Notizen aus, und aktivieren Sie dann das Textbereich-Steuerelement in der Dropdownliste aus.

  9. Im Fenster Eigenschaften legen Sie den Wert der - Eigenschaft auf HöheZu Container strecken fest.

  10. Wählen Sie den Knoten Zeilenlayout | Details aus, erweitern Sie den Knoten Hinzufügen, und wählen Sie dann Weitere Bildschirmdaten aus.

    Das Dialogfeld wird angezeigt. Bildschirmdaten hinzufügen

  11. Im Geben Sie die hinzuzufügenden Bildschirmdaten an Textfeld geben Sie Customer.Phone ein und klicken Sie dann auf die Schaltfläche OK aus.

  12. Wählen Sie den Knoten Telefon aus, und aktivieren Sie dann das Telefonnummern-Editor-Steuerelement in der Dropdownliste aus.

  13. Erweitern Sie den Knoten Hinzufügen, und wählen Sie dann Weitere Bildschirmdaten aus.

    Das Dialogfeld wird angezeigt. Bildschirmdaten hinzufügen

  14. Im Geben Sie die hinzuzufügenden Bildschirmdaten an Textfeld geben Sie Customer.Email ein und klicken Sie dann auf die Schaltfläche OK aus.

  15. Wählen Sie den Knoten E-Mail aus, und aktivieren Sie dann das E-Mail-Adress-Editor-Steuerelement in der Dropdownliste aus.

So Navigation definieren

  1. In Projektmappen-Explorer öffnen Sie den Bildschirm Startseite.

  2. Im Bildschirmdesigner wählen Sie den List | Upcoming Appointments Knoten aus.

  3. Im Fenster Eigenschaften wählen Sie die Eigenschaft Tippen für Element aus, und wählen Sie dann den Keine Link aus.

  4. Im Dialogfeld Tippen für Element bearbeitenVorhandene Methode auswählen aktivieren Sie das Optionsfeld, und wählen Sie dann showViewAppointmentDetail in der Dropdownliste aus.

  5. In der Liste wählen Sie AufgabeSpeichern aus.

  6. Im Termin Textfeld geben Sie UpcomingAppointments.selectedItem ein und klicken Sie dann auf die Schaltfläche OK aus.

  7. Wählen Sie auf der Menüleiste Sie Debugging starten, um den mobilen Client auszuführen.

    In jedem Termin ein Pfeil gibt an, dass Sie auf einen anderen Bildschirm navigieren können.

  8. Geben Sie einen Termin, um den Bildschirm ViewAppointmentDetail anzuzeigen.

So fügen Sie ein modales Dialogfeld erstellen

  1. In Projektmappen-Explorer öffnen Sie den Bildschirm ViewAppointmentDetail.

  2. Im Bildschirmdesigner wählen Sie den Knoten Dialogfelder aus, und wählen Sie dann den Knoten Dialogfeld hinzufügen aus.

  3. Im Fenster Eigenschaften legen Sie den Wert der - Eigenschaft auf NameEditContactInformation fest.

  4. Erweitern Sie den Knoten Hinzufügen, und wählen Sie dann Weitere Bildschirmdaten aus.

    Das Dialogfeld wird angezeigt. Bildschirmdaten hinzufügen

  5. Im Geben Sie die hinzuzufügenden Bildschirmdaten an Textfeld geben Sie Appointment.Customer.FirstName ein und klicken Sie dann auf die Schaltfläche OK aus.

  6. Erweitern Sie den Knoten Hinzufügen, und wählen Sie dann Weitere Bildschirmdaten aus.

    Das Dialogfeld wird angezeigt. Bildschirmdaten hinzufügen

  7. Im Geben Sie die hinzuzufügenden Bildschirmdaten an Textfeld geben Sie Appointment.Customer.LastName ein und klicken Sie dann auf die Schaltfläche OK aus.

  8. Erweitern Sie den Knoten Hinzufügen, und wählen Sie dann Weitere Bildschirmdaten aus.

    Das Dialogfeld wird angezeigt. Bildschirmdaten hinzufügen

  9. Im Geben Sie die hinzuzufügenden Bildschirmdaten an Textfeld geben Sie Appointment.Customer.Phone ein und klicken Sie dann auf die Schaltfläche OK aus.

  10. Wählen Sie den Knoten Telefon aus, und aktivieren Sie dann das Telefonnummern-Editor-Steuerelement in der Dropdownliste aus.

  11. Erweitern Sie den Knoten Hinzufügen, und wählen Sie dann Weitere Bildschirmdaten aus.

    Das Dialogfeld wird angezeigt. Bildschirmdaten hinzufügen

  12. Im Geben Sie die hinzuzufügenden Bildschirmdaten an Textfeld geben Sie Appointment.Customer.Email ein und klicken Sie dann auf die Schaltfläche OK aus.

  13. Wählen Sie den Knoten E-Mail aus, und aktivieren Sie dann das E-Mail-Adress-Editor-Steuerelement in der Liste aus.

  14. Im linken Bereich, im Ziehvorgang Straße, in Ort, in Zustand und in PostalCode unter dem E-Mail-Knoten.

    Der resultierende Dialogfelder-Abschnitt ähnelt der folgenden Abbildung.

    Layout für den Dialog

    HinweisHinweis

    Anstatt zu ziehen können Sie Straße, Ort, Zustand und PostalCode Felder auch hinzufügen, indem Sie die gleichen Schritte wie die FirstName und LastName Felder verwendet.

Um das Dialogfeld anzeigen

  1. In Projektmappen-Explorer öffnen Sie den Bildschirm ViewAppointmentDetail.

  2. Im Bildschirmdesigner öffnen Sie das Kontextmenü für den Zeilenlayout | Details Knoten, und wählen Sie dann Schaltfläche "Hinzufügen aus.

  3. Im Dialogfeld Schaltfläche "Hinzufügen wählen Sie das Optionsfeld Vorhandene Methode auswählen, wählen Sie ShowDialog in der Liste aus, und wählen Sie dann die Schaltfläche OK aus.

  4. Wählen Sie den Knoten Kontaktbearbeitungsinformationen anzeigen aus.

  5. Im Fenster Eigenschaften legen Sie den Wert der - Eigenschaft auf NameBearbeiten fest.

  6. Wählen Sie auf der Menüleiste Sie Debuggen, Debugging starten, um den Client auszuführen.

  7. Im laufenden mobilen Client unter einen Termin, um einen Bildschirm Termindetails anzeigen zu öffnen.

  8. Geben Sie die Schaltfläche Bearbeiten, um das Dialogfeld anzuzeigen.

    OK und Abbrechen Schaltflächen werden automatisch eingeschlossen.

Passen Sie die Benutzeroberfläche an

Sie können die Benutzeroberfläche des Client nicht nur, indem Sie Einstellungen im Bildschirmdesigner aber auch ändern durch das Hinzufügen von benutzerdefinierten Steuerelementen und das Schreiben von JavaScript-Code anpassen.

So fügen Sie die benutzerdefinierte Formatierung mithilfe von JavaScript-Bibliotheken anwenden

  1. In Projektmappen-Explorer öffnen Sie den Bildschirm Startseite.

  2. Im Bildschirmdesigner wählen Sie den Zeilenlayout | Termin Knoten aus, und wählen Sie dann Benutzerdefiniertes Steuerelement in der Liste aus.

  3. In der Liste Code schreiben die RowTemplate_render-Methode aus.

  4. Fügen Sie im Code-Editor den folgenden Code für die RowTemplate_render-Funktion hinzu:

    myapp.Home.RowTemplate_render = function (element, contentItem) {
    var itemTemplate = $("<div> </div>");
    var title = $("<h3>" + moment(contentItem.value.StartDate).format("ddd, MMM Do, h:mm") + "-" + moment(contentItem.value.EndDate).format("h:mma") + "</h3>");
    var subTitle = $("<span>" + contentItem.value.Customer.FirstName + " " + contentItem.value.Customer.LastName + " - " + contentItem.value.Customer.Phone + "</span>");
    title.appendTo($(itemTemplate));
    subTitle.appendTo($(itemTemplate));
    itemTemplate.appendTo($(element));
};

    Dieser JavaScript-Code verwendet die contentItem.value-Membervariable, wie anzuzeigen und die format-Methode zu bestimmen, um die Formatierung zu definieren.

  5. In Projektmappen-Explorer wählen Sie Dateiansicht in der Liste auf der Symbolleiste.

  6. Klicken Sie im Kontextmenü für den Knoten MobileClient, wählen Sie NuGet-Pakete verwalten aus.

  7. Im Dialogfeld NuGet-Pakete verwalten wählen Sie den Knoten Online aus.

  8. Im Online suchen Textfeld geben Sie moment.js ein.

  9. Wählen Sie die Schaltfläche Installieren, um die Moment.js-Bibliothek zu installieren, und wählen Sie dann die Schaltfläche Schließen aus.

  10. In Projektmappen-ExplorerMobileClient erweitern Sie den Knoten, und öffnen Sie dann die Datei default.htm.

  11. Fügen Sie im Code-Editor folgende Skripttag hinzu, nachdem das letzte </script>-Tag:

    <script type="text/javascript" src="Scripts/moment.js" charset="utf-8"></script>

    Dieses Tag fügt einen Verweis auf die moment.js-Bibliothek hinzu.

  12. Wählen Sie auf der Menüleiste Sie Debuggen, Debugging starten, um den Client auszuführen.

    Der Termin wird formatiert und die Zeit und die Telefonnummer werden hinzugefügt.

Um das Layout

  1. In Projektmappen-Explorer wählen Sie Logische Ansicht in der Liste auf der Symbolleiste und das geöffnete der Bildschirm Startseite aus.

  2. Im Bildschirmdesigner wählen Sie den List | Upcoming Appointments Knoten aus, und wählen Sie dann Kachelliste in der Dropdownliste aus.

  3. Wählen Sie den Benutzerdefiniertes Steuerelement | Termin Knoten aus.

  4. Im Fenster Eigenschaften legen Sie den Wert der - Eigenschaft Breite auf 280 Pixel fest.

  5. Im Fenster Eigenschaften legen Sie den Wert der - Eigenschaft Höhe auf 80 Pixel fest.

  6. Wählen Sie auf der Menüleiste Sie Debuggen, Debugging starten, um den Client auszuführen.

    Die bevorstehenden Termine der Hauptbildschirmanzeigen in einem Kachel-basierten Layout.Ändern Sie die Breite des Browserfensters, um zu zeigen, wie das Layout der Kacheln dynamisch angepasst, um gute mit den verfügbaren Spalten im auszuführen.In dieser Demonstration, wie das Listenlayout auf Grundlage der Ausrichtung und den Bildschirmgröße eines mobilen Geräts ändern kann.

So fügen Sie einen dynamischen Bildschirmnamen hinzufügen

  1. In Projektmappen-Explorer öffnen Sie den Bildschirm ViewAppointmentDetail.

  2. Im Bildschirmdesigner wählen Sie den Zeilenlayout | Details Knoten aus.

  3. In der Liste wählen Sie Code schreibenDetails_postRender aus.

  4. Fügen Sie im Code-Editor folgenden JavaScript-Code hinzu:

    myapp.ViewAppointmentDetail.Details_postRender = function (element, contentItem) {
    contentItem.dataBind("value.Customer.FirstName", function () {
        formatAppointmentScreenTitle(contentItem);
    });

    contentItem.dataBind("value.Customer.LastName", function () {
        formatAppointmentScreenTitle(contentItem);
    });

    function formatAppointmentScreenTitle(contentItem) {
        contentItem.screen.details.displayName = contentItem.value.Customer.FirstName + " " +
        contentItem.value.Customer.LastName + " " +
        moment(contentItem.value.StartDate).format("h:mma") + " - " +
        moment(contentItem.value.EndDate).format("h:mma");
    };
};

  5. Wählen Sie auf der Menüleiste Sie Debuggen, Debugging starten, um den Client auszuführen.

    Die TerminDetailbildschirme zeigen den Namen und die Start- und Endzeiten des Kunden für den Termin an.

Veröffentlichen Sie den Client

Bis jetzt haben Sie den Client getestet, indem Sie sie im lokalen Browser anzeigen.Um auf den Client von einem mobilen Gerät zuzugreifen, müssen Sie es auf Internetinformationsdienste (IIS) veröffentlichen.

HinweisHinweis

Sie können einen mobilen Client zu Windows Azure auch veröffentlichen, während Sie jede LightSwitch Anwendung wurden.Weitere Informationen finden Sie unter Gewusst wie: Hosten einer Anwendung unter Windows Azure.

Um den Server konfigurieren

  1. Auf dem Server, auf dem die Anwendung bereitgestellt, öffnen Sie Internetinformationsdienste (IIS)-Manager.

  2. Im Bereich Verbindungen erweitern Sie den Serverknoten, und wählen Sie dann den Knoten Standardwebsite aus.

  3. Öffnen Sie das Kontextmenü für den Knoten Standardwebsite, und wählen Sie dann Anwendung hinzufügen aus.

    Das Dialogfeld Anwendung hinzufügen wird angezeigt.

  4. Im Alias Textfeld geben Sie ContosoMoving ein.

  5. Im Physischer Pfad Textfeld geben Sie einen Pfad für die Clientdateien (beispielsweise, C:\inetpub\wwwroot\Contoso) ein, und wählen Sie dann die Schaltfläche OK aus.

  6. Wählen Sie im mittleren Bereich öffnen Sie das Kontextmenü für das Authentifizierung Symbol, und wählen Sie dann Feature öffnen aus.

  7. Im Bereich Authentifizierung legen Sie die folgenden Werte fest:

    Name

    Status

    Anonyme Authentifizierung

    Aktiviert

    Identitätswechsel

    Disabled (Deaktiviert)

    Formularauthentifizierung

    Aktiviert

    Windows-Authentifizierung

    Disabled (Deaktiviert)

Um den Client veröffentlichen

  1. In der Liste Debuggen auf der Symbolleiste auf, wählen Sie Release aus.

  2. In Projektmappen-Explorer wählen Sie den Knoten ContosoMoving aus.

  3. Klicken Sie auf der Menüleiste wählen Sie Build, ContosoMoving veröffentlichen aus.

    Der Assistent zum Veröffentlichen von LightSwitch-Anwendungen wird angezeigt.

  4. Klicken Sie auf der Seite Anwendungstyp das Optionsfeld Vollständige Anwendung, und wählen Sie dann die Schaltfläche Weiter aus.

  5. Klicken Sie auf der Seite Anwendungsserverkonfiguration auf die Optionsschaltfläche IIS-Server.

  6. Wählen Sie auf der Seite Ausgabe veröffentlichen die Optionsschaltfläche Jetzt auf einem Server remote veröffentlichen aus.

  7. Im Dienst-URL Textfeld geben Sie die URL für den Server ein, der IIS ausführt, in dem Sie den Client veröffentlichen möchten.

  8. Im Website/Anwendung Textfeld geben Sie Standardwebsite/ContosoMoving ein.

  9. Im Benutzername Textfeld geben Sie den Namen eines Benutzers ein, der über Administratorberechtigungen für den Server verfügt, der IIS ausführt.

  10. Im Kennwort Textfeld geben Sie das Kennwort für den Benutzer ein, und wählen Sie dann die Schaltfläche Weiter aus.

  11. Klicken Sie auf der Seite Sicherheitseinstellungen auf der Registerkarte Anwendungsadministrator, geben Sie Benutzername, Vollständiger Name und Kennwort für den Benutzer ein, der zuerst Administratoren Zugriff auf den Client hat.

    Wichtiger HinweisWichtig

    Sie benötigen diese Anmeldeinformationen, um auf den Client zuzugreifen, nachdem Sie ihn veröffentlichen.

  12. HTTPS auf der Registerkarte das Optionsfeld Nein, keine HTTPS-Verbindung erforderlich, und wählen Sie dann die Schaltfläche Weiter aus.

    Die Seite Datenverbindungen angezeigt wird.

  13. Im Geben Sie die Benutzerverbindung an Textfeld geben Sie die Verbindungszeichenfolge für die SQL Server-Datenbank ein, die die Daten hostet.

    Diese Datenbank kann auf dem gleichen Server wie IIS sein oder auf einem anderen Server.

    TippTipp

    Sie können die Schaltfläche mit den Auslassungspunkten Verbindungseigenschaften wählen, um das Dialogfeld zu öffnen und Eigenschaften eingeben, um die Verbindungszeichenfolge zu erstellen.

  14. Im Datenbankschema veröffentlichen Textfeld geben Sie die gleiche Verbindungszeichenfolge ein.

  15. Wählen Sie die Schaltfläche Veröffentlichen aus, um die Anwendung zu veröffentlichen.

Um den Client testen

  1. In der Adressleiste eines Webbrowsers, geben Sie http://IISServer/contosomoving/client ein, in dem IISServer der Name des Servers ist, in dem Sie den Client veröffentlichten.

  2. In den Benutzername und Kennwort Textfeldern geben Sie die Anmeldeinformationen, die Sie für den Clientadministrator angegeben haben, und wählen Sie dann die Schaltfläche Anmelden aus.

  3. Klicken Sie auf der Menüleiste wählen Sie Beispieldaten, Beispieldaten erstellen aus.

    HinweisHinweis

    Daten, die zur Entwurfszeit eingegeben wird, werden nicht, sodass Sie müssen die Beispieldaten der Produktionsdatenbank hinzufügen veröffentlicht.

  4. Klicken Sie im Bildschirm Beispieldaten erstellen wählen Sie die Alle Beispieldaten hinzufügen Symbolleisten-Schaltfläche.

    Beispieldaten werden für Zustand, Mitarbeiter, Kunde und Termin Entitäten erstellt.

  5. Wählen Sie in der Symbolleiste die Schaltfläche Speichern aus.

  6. In der Adressleiste des Browsers, geben Sie http://IISServer/contosomoving/mobileclient ein, in dem IISServer der Name des Servers ist, in dem Sie den Client veröffentlichten.

  7. Wenn Sie einen Benutzernamen und ein Kennwort aufgefordert werden, geben Sie ACarter als der Benutzer und pass@word1 als das Kennwort ein.

    Die bevorstehenden Termine für Adam Carter angezeigt werden.

Fügen Sie ein benutzerdefiniertes Steuerelement Upload-Fotos hinzu

Der Termindetailbildschirm verfügt über eine Registerkarte Terminfotos, damit ein Planungsspezialist für Contoso-Verschieben Fotos einer Kundenseite ausführen kann, um den Auftrag genauer zu schätzen.Um diese Aufgabe zu aktivieren, fügen Sie ein benutzerdefiniertes Steuerelement dem Client hinzu.

So fügen Sie ein benutzerdefiniertes Steuerelement hinzufügen

  1. In Projektmappen-Explorer wählen Sie Dateiansicht in der Liste auf der Symbolleiste aus.

  2. Öffnen Sie das Kontextmenü für den Knoten Skripts, wählen Sie Hinzufügen aus und wählen dann Vorhandenes Element aus.

  3. Im Dialogfeld Vorhandenes Element hinzufügen navigieren Sie zu ContosoMoving den Ordner, den Ordner Ressourcen, und öffnen Sie die Ordner ImageUploader.

  4. Wählen Sie die base64-file-encoder und image-uploader Dateien aus, und wählen Sie dann die Schaltfläche Hinzufügen aus.

  5. Öffnen Sie die Datei default.htm- und dann, im Code-Editor, fügen Sie den folgenden Verweis auf image-uploader.js am Ende des Skriptverweisblocks hinzu:

    <script type="text/javascript" src="Scripts/image-uploader.js" charset="utf-8"></script>

  6. In Projektmappen-Explorer wählen Sie Logische Ansicht in der Liste auf der Symbolleiste aus, und öffnen Sie dann den Bildschirm ViewAppointmentDetail.

  7. Im Bildschirmdesigner wählen Sie den Knoten Terminfoto aus, und wählen Sie Spaltenlayout in der Liste aus.

  8. Öffnen Sie das Kontextmenü für den Knoten Dialogfelder, und wählen Sie dann Dialogfeld hinzufügen aus.

  9. Im Fenster Eigenschaften legen Sie den Wert der - Eigenschaft auf NameImageUploader fest.

  10. Legen Sie den Wert der Höhe und Breite-Eigenschaften zu Zu Container strecken fest.

  11. Im linken Bereich des Bildschirmdesigners, erweitern Sie den Knoten AppointmentPhotos, und ziehen Sie dann den Knoten Ausgewähltes Element auf den Knoten Zeilenlayout | Bildladeprogramm im mittleren Bereich.

  12. Löschen Sie den neu hinzugefügten Knoten Termin.

  13. Wählen Sie den Knoten Bild aus, und wählen Sie dann Benutzerdefiniertes Steuerelement in der Liste aus.

  14. Im Fenster Eigenschaften wählen Sie den Rendercode bearbeiten Link aus.

  15. Fügen Sie im Code-Editor folgenden Code der Picture1_render-Funktion hinzu:

    createImageUploader(element, contentItem, "max-width: 300px; max-height: 300px");

    Dieser Code initialisiert das ImageUploader-benutzerdefinierte Steuerelement, wenn der Bildschirm gerendert wird.

  16. Im Bildschirmdesigner öffnen Sie das Kontextmenü für den Zeilenlayout | Terminfotos Knoten, und wählen Sie dann Schaltfläche "Hinzufügen aus.

  17. Im Dialogfeld Schaltfläche "Hinzufügen wählen Sie das Optionsfeld Vorhandene Methode auswählen.

  18. In der Liste wählen Sie showDialogAppointmentPhotos.AddAndEditNew aus.

  19. In der Liste wählen Sie Navigieren zuBildladeprogramm aus und wählen dann die Schaltfläche OK aus.

  20. Ziehen Sie die Schaltfläche Terminfoto hinzufügen, damit sie über das List | Terminfotos Knoten angezeigt wird.

  21. Wählen Sie auf der Menüleiste Sie Debuggen, Debugging starten, um den Client auszuführen.

  22. Im ausgeführten Client unter einen Termin.

  23. Klicken Sie im Termindetailbildschirm geben Sie die Registerkarte Terminfotos.

  24. Geben Sie die Schaltfläche Terminfoto hinzufügen, um das Dialogfeld zu öffnen. Bildladeprogramm

    Dialogfeld des Bildladeprogramms

Ordnen Sie die Adresse des Kunden zu

Der Planungsspezialist muss auch in der Lage sein, die Kundenseite zu suchen, so folgende eingefügt Zuordnungsfunktionalität, indem er ein Bing-Zuordnungssteuerelement verwendet.

So fügen Sie ein Zuordnungssteuerelement hinzufügen

  1. In Projektmappen-Explorer wählen Sie Dateiansicht in der Liste auf der Symbolleiste aus.

  2. Öffnen Sie das Kontextmenü für den Knoten Skripts, wählen Sie Hinzufügen aus und wählen dann Vorhandenes Element aus.

  3. Im Dialogfeld Vorhandenes Element hinzufügen navigieren Sie zu ContosoMoving den Ordner, und öffnen Sie den Ordner Ressourcen.

  4. Wählen Sie die Datei lightswitch.bing-maps.js aus, und wählen Sie dann die Schaltfläche Hinzufügen aus.

  5. Öffnen Sie die Datei default.htm- und dann, im Code-Editor, fügen Sie einen Verweis am Anfang des Skriptverweisblocks hinzu:

    <script type="text/javascript" charset="utf-8" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>

  6. Am Ende des Skriptverweisblocks, fügen Sie einen Verweis auf die JavaScript-Datei hinzu:

    <script type="text/javascript" src="Scripts/lightswitch.bing-maps.js" charset="utf-8"></script>

  7. In Projektmappen-Explorer wählen Sie Logische Ansicht aus der Liste auf der Symbolleiste aus, und öffnen Sie dann den Bildschirm ViewAppointmentDetail.

  8. Im Bildschirmdesigner öffnen Sie das Kontextmenü für den Knoten Registerkarten, und wählen Sie dann Registerkarte hinzufügen aus.

  9. Im Fenster Eigenschaften legen Sie den Wert der - Eigenschaft auf NameMap fest.

  10. Ziehen Sie den Knoten Zeilenlayout | Map, sodass er über dem Zeilenlayout | Notizen Knoten angezeigt wird.

  11. Öffnen Sie das Kontextmenü für den Zeilenlayout | Map Knoten, und wählen Sie dann Benutzerdefiniertes Steuerelement hinzufügen aus.

    Das Dialogfeld wird angezeigt. Benutzerdefiniertes Steuerelement hinzufügen

  12. Im Geben Sie die Daten für das neue benutzerdefinierte Steuerelement an Textfeld geben Sie Termin ein und klicken Sie dann auf die Schaltfläche OK aus.

  13. Im Fenster Eigenschaften wählen Sie den Rendercode bearbeiten Link aus.

  14. Fügen Sie im Code-Editor folgende Hilfsmethoden hinzu, bevor die Appointment_render-Funktion:

    function rebindMap(element, contentItem) {
    // Verify that we aren't updating the map continuously due to multiple bound values changing.
    var now = new Date();
    if (now.getTime() - mapLastUpdated.getTime() > 15) {
        setTimeout(function () {
            updateMap(element, contentItem);
            mapLastUpdated = new Date();
        }, 20);
    }
};

function updateMap(element, contentItem) {
    var mapDiv = $("#appointmentMap");
    // If we've previously created the map, make sure to clean up the div that contained it;
    // otherwise, the Bing map control fails to create properly.
    if (mapDiv.length > 0) {
        $(mapDiv).remove();
    }
    mapDiv = $("<div id='appointmentMap' class='msls-hauto msls-vauto' ></div>");

    $(mapDiv).appendTo($(element));
    mapControl = mapDiv.lightswitchBingMapsControl({
        street: contentItem.value.Street,
        city: contentItem.value.City,
        state: contentItem.value.State.Name,
        zipcode: contentItem.value.PostalCode,
        mapTypeId: Microsoft.Maps.MapTypeId.road,
        width: "600",
        height: "400"
    });
};

  15. Fügen Sie den folgenden Code der Funktion Appointment_render hinzu:

    mapLastUpdated = new Date();
    contentItem.dataBind("value.Street", function () { rebindMap(element, contentItem); });
    contentItem.dataBind("value.City", function () { rebindMap(element, contentItem); });
    contentItem.dataBind("value.Zip", function () { rebindMap(element, contentItem); });
    contentItem.dataBind("value.PostalCode", function () { rebindMap(element, contentItem); });

    Dieser Code wird die Felder des Termins zum Zuordnungssteuerelement, wenn der Bildschirm gerendert wird.

  16. Wählen Sie auf der Menüleiste Sie Debuggen, Debugging starten, um den Client auszuführen.

  17. Im ausgeführten Client unter einen Termin.

  18. Klicken Sie im Termindetailbildschirm geben Sie die Registerkarte Map, um eine Zuordnung der Adresse des Kunden anzuzeigen.

Fügen Sie Branding hinzu

Als Nächstes ändern Sie den Titel des Client zu etwas, das aussagekräftiger als MobileClient ist, und Sie fügen ein bewegliches Firmenlogo Contosos hinzu, um den Client personalisieren.

Um den Namen ändern

  1. In Projektmappen-Explorer wählen Sie Dateiansicht in der Liste auf der Symbolleiste.

  2. Öffnen Sie die Datei default.htm- und dann, im Code-Editor, ersetzen Sie das <title>MobileClient</title>-Element durch folgenden Code:

    <title>Contoso Moving Mobile</title>

Um ein Symbol hinzufügen

  1. In Projektmappen-Explorer erweitern Sie die Inhalt und Knoten Bilder.

  2. Löschen Sie die user-logo.png und user-splash-screen.png Dateien.

  3. Öffnen Sie das Kontextmenü für den Knoten Bilder, wählen Sie Hinzufügen aus und wählen dann Vorhandenes Element aus.

  4. Im Dialogfeld Vorhandenes Element hinzufügen navigieren Sie zu ContosoMoving den Ordner, und öffnen Sie den Ordner Ressourcen.

  5. Wählen Sie die Datei logo.png aus, und wählen Sie dann die Schaltfläche Hinzufügen aus.

  6. In Projektmappen-Explorer öffnen Sie das Kontextmenü für den Knoten logo.png, wählen Sie Umbenennen aus und geben user-logo.png ein.

  7. Öffnen Sie das Kontextmenü für den Knoten Bilder, wählen Sie Hinzufügen aus und wählen dann Vorhandenes Element aus.

  8. Im Dialogfeld Vorhandenes Element hinzufügen wählen Sie die Datei logo.png aus, und wählen Sie dann die Schaltfläche Hinzufügen aus.

  9. In Projektmappen-Explorer öffnen Sie das Kontextmenü für den Knoten logo.png, wählen Sie Umbenennen aus und geben user-splash-screen.png ein.

  10. Wählen Sie auf der Menüleiste Sie Debuggen, Debugging starten, um den Client auszuführen.

    HinweisHinweis

    Sie müssen möglicherweise den Browsercache löschen, bevor die Änderungen angezeigt werden.

Ändern Sie das Design

CSS (Cascading Stylesheets) der Designs eines Client zu definieren.Sie können das Standarddesign ändern, um die Darstellung des Client zu ändern, oder Sie können dieses Design ersetzen, indem Sie die CSS-Datei ändern.Sie verwenden ein Webtool, ThemeRoller, um a.css-Datei mit einem benutzerdefinierten Design zu erstellen.

Wenn Sie zwischen Designs wechseln

  1. In Projektmappen-Explorer wählen Sie Dateiansicht in der Liste auf der Symbolleiste.

  2. Öffnen Sie die Datei default.htm- und dann, im Code-Editor, ersetzen Sie die Zeile <link rel="stylesheet" type="text/css" href="Content/dark-theme.css" charset="utf-8" /> mit dem folgenden Code:

    <link rel="stylesheet" type="text/css" href="Content/light-theme.css" charset="utf-8" />

  3. In Projektmappen-ExplorerInhalt erweitern Sie den Knoten, und öffnen Sie dann die Datei user-customization.css.

  4. Suchen Sie die Datei für den Kommentar /* if light theme change ‘white’ to ‘black */, und ersetzen Sie dann msls-white-icons durch die folgende Zeichenfolge in jedem der vier Vorkommen:

    msls-black-icons

  5. Wählen Sie auf der Menüleiste Sie Debuggen, Debugging starten, um den Client auszuführen.

So fügen Sie ein vorhandenes Design anpassen

  1. In dem Webbrowser navigieren ThemeRoller Sie zu der Website.

  2. Klicken Sie auf der ThemeRoller-Symbolleiste wählen Sie die Schaltfläche Importieren oder aktualisieren aus.

    Das Dialogfeld wird angezeigt. Design importieren

  3. In Visual Studio in Projektmappen-Explorer, wählen Sie Dateiansicht in der Liste auf der Symbolleiste.

  4. Erweitern Sie den Knoten Inhalt, und öffnen Sie die Datei light-theme.css.

  5. Im Code-Editor kopieren Sie den gesamten Inhalt der Datei.

  6. In ThemeRoller fügen Sie den Inhalt der Datei Design importierenlight-theme.css in das Dialogfeld ein, und wählen Sie dann die Schaltfläche Importieren aus.

  7. Wählen Sie im linken Bereich die Registerkarte Global aus, und erweitern Sie dann den Knoten Eckradien.

  8. Im Gruppe Textfeld geben Sie 0.8em ein.

  9. Im SharePoint aktivieren Textfeld geben Sie 1.5em ein.

    Die Benutzeroberflächenelemente im rechten Bereich haben jetzt den Ecken gerundet.

  10. Klicken Sie auf der Registerkarte B wählen Sie den Löschen Link aus.

    LightSwitch verwendet nur die Global und Farbfeld A Einstellungen.Wenn Sie die zusätzlichen Felder entfernen, die Größe der CSS-Datei-Abnahmen.

  11. Wiederholen Sie den Vorgang, um zusätzliche Felder zu entfernen.

  12. Im rechten Bereich ziehen Sie eine Farbe aus der Farbpalette auf den Hintergrundbereich von Farbfeld A.

  13. Ziehen Sie eine andere Farbe auf das Optionsfeld 1-Element.

    Alle zugeordneten Elemente ändern auch Farbe.Wenn Sie auf ein Element zeigen, ändert es einer ergänzenden Farbe und gibt die markierte Bereiche an.

  14. Klicken Sie auf der ThemeRoller-Symbolleiste wählen Sie die Schaltfläche Herunterladen aus.

  15. Im Dialogfeld Design herunterladen wählen Sie die Schaltfläche ZIP herunterladen aus.

  16. Extrahieren Sie den Inhalt der komprimierten Datei zu einem lokalen Ordner.

  17. In Projektmappen-Explorer öffnen Sie das Kontextmenü für den Knoten Inhalt, wählen Sie Hinzufügen aus und wählen dann Vorhandenes Element aus.

  18. Im Dialogfeld Vorhandenes Element hinzufügen navigieren Sie zu dem Ordner, in dem die Dateien extrahiert haben, wählen Sie die Datei my-item.css auswählen und dann die Schaltfläche Hinzufügen.

  19. Öffnen Sie die Datei default.htm-, suchen Sie die Zeile <link rel="stylesheet" type="text/css" href="Content/light-theme.css" charset="utf-8" /> im Code-Editor, und ersetzen Sie dann die Zeile mit dem folgenden Code:

    <link rel="stylesheet" type="text/css" href="Content/my-theme.css" charset="utf-8" />

  20. Wählen Sie auf der Menüleiste Sie Debuggen, Debugging starten, um den Client auszuführen.

Veröffentlichen Sie den Client erneut

Da der Client abgeschlossen ist, veröffentlichen Sie ihn zu IIS erneut.

Um den Client erneut veröffentlichen

  1. In Projektmappen-Explorer wählen Sie den Knoten ContosoMoving aus.

  2. Klicken Sie auf der Menüleiste wählen Sie Build, ContosoMoving veröffentlichen aus.

  3. In Assistent zum Veröffentlichen von LightSwitch-Anwendungen wählen Sie die Schaltfläche Veröffentlichen, um den Client zu veröffentlichen.

  4. In der Adressleiste des Browsers, geben Sie http://IISServer/contosomoving/mobileclient ein, in dem IISServer der Name des Servers ist, in dem Sie den Client veröffentlichten.

  5. Wenn Sie einen Benutzernamen und ein Kennwort aufgefordert werden, geben Sie ACarter als der Benutzer und pass@word1 als das Kennwort ein.

    Der Client spiegelt die letzten Änderungen, die Sie vorgenommen haben.

    HinweisHinweis

    Sie müssen möglicherweise den Browsercache löschen.

Siehe auch

Weitere Ressourcen

HTML-Clientbildschirme für LightSwitch-Anwendungen