Sdílet prostřednictvím

Postupy: Vytvoření klienta LightSwitch pro mobilní uživatele

  • Článek

Pomocí Microsoft LightSwitch for Visual Studio Update 2, můžete vytvořit klienta aplikace HTML, ve kterém můžete zobrazit, přidat a aktualizaci dat ze vzdáleného umístění pomocí moderních, dotyková zařízení, jako jsou telefony a tablety mobilních uživatelů.V tomto návodu vytvoříte klienta pro fiktivní stěhovací společnosti Contoso přesunutí, tak, aby jeho pracovníci služeb zákazníkům lze snadněji odhadnout, kolik lidí vozíků polí a bude vyžadovat každou úlohu.

Ve společnosti Contoso plánovače trávit většinu svého času v kanceláři, mluví potenciálním zákazníkům osobně nebo na telefonu a uspořádání návštěvy další nabídka.Tito pracovníci používat bohaté plochy klienta, který je založen na programu Silverlight a lépe podporuje zadávání těžkých dat pomocí klávesnice a myši.Naopak cestovní plánování odborníků celý den provedení další nabídka návštěvy v různých umístěních a záznam informací, jako je například velikost, obsah a vstupní požadavky každé místnosti.Tato mobilní uživatelé potřebují klientovi, který nejen jejich zobrazuje informace o každé návštěvě další nabídka z plánovače, ale také podporuje zadávání specifických typů dat, fotografování a přesunutí týmu o parkovací omezení nebo jiné podrobnosti výstrahy.

Na ploše klienta pro plánovače již byla vytvořena.Budete vytvářet mobilního klienta, který plánování specialisty používat sledování událostí, které plánovače uspořádat a zadání podrobností o každém přesunu.

Požadavky

  • Stáhnout a nainstalovat Microsoft LightSwitch for Visual Studio Update 2.

  • Stáhněte ukázkové aplikace ContosoMoving.

  • Nainstalujte rozšíření programu Správce balíčků NuGet, jak popisuje následující postup.

Chcete-li nainstalovat rozšíření NuGet

  1. V řádku nabídek zvolte Nástroje, aktualizace a rozšíření.

  2. V aktualizace a rozšíření dialogové okno pole, zvolte Online uzlu.

  3. V Galerie Visual Studio hledání text zadejte NuGet.

  4. V seznamu výsledků vyberte Správce balíčků NuGeta pak zvolte Stáhnout tlačítko.

    [!POZNÁMKA]

    Po restartování aplikace Visual Studio, aby rozšíření k dispozici.

Začínáme

Před sestavením mobilního klienta bude vytvoření ukázkových dat pro stolní počítače klienta, který jste stáhli.

Vytvoření ukázkových dat

  1. Na panelu nabídky vyberte možnosti Soubor, Otevřít, Projekt/řešení.

  2. Vyhledejte stažený soubor ContosoMoving.sln a otevřete ji.

  3. V panelu nabídek zvolte Ladit, Spustit ladění.

  4. Spuštění klienta v řádku nabídek zvolte Ukázková Data, Vytvoření ukázkových dat.

  5. Na panelu nástrojů Vytvoření ukázkových dat na obrazovce, zvolte Přidat všechna Data vzorku tlačítko.

    Vytvoření ukázkových dat pro Stav, zaměstnance, zákazníka, a událost entity.

  6. Na panelu nástrojů zvolte Uložit tlačítko.

  7. V řádku nabídek zvolte Home.

  8. Na panelu nástrojů zvolte aktualizace tlačítko.

    Zobrazí se seznam nadcházející schůzky pro všechny zaměstnance a můžete prozkoumat další dialogová okna v klienta pro stolní počítače.

Přidání mobilního klienta

Dále přidáte klientský projekt v HTML do existující řešení.

Chcete-li přidat klientský projekt v HTML

  1. V Průzkumníku, zvolte ContosoMoving uzlu.

  2. V řádku nabídek zvolte projektu, Přidat klienta.

  3. V Přidat klienta dialogové okno pole, zvolte HTML klienta, pojmenujte jej MobileClienta pak zvolte OK tlačítko.

  4. V dialogovém okně projekt upgradu zobrazené, zvolte OK tlačítko.

    Projekt je upgradován na Microsoft LightSwitch for Visual Studio Update 2, a migrace sestava se zobrazí v prohlížeči.Změnit strukturu souboru řešení a řešení v počítači, který nemá tuto verzi LightSwitch nainstalován již otevřít.

    V Průzkumníku, Zdroje dat uzel byl přejmenován Server, obrazovky uzel byl přejmenován Klient, a uzel byl přidán s názvem MobileClient.MobileClient uzel je označen jako spuštění klienta, tak se zobrazí při ladění aplikace.Můžete změnit spuštění klienta otevření místní nabídky pro všechny uzly klienta a potom zvolíte nastavit jako spouštěcí klienta.

Vytvořit blokování a definovat navigaci

Dále vytvoříte základní obrazovka a podrobnosti obrazovky definovat navigaci mezi obrazovkami a vytvořit modální dialogové okno.Mobilní klienti používají různé navigační model než stolní klienti.Obvykle pouze jednu obrazovku je zobrazen v době do mobilního klienta a změny potvrzeny při přesunu z jedné obrazovky na druhou.

Chcete-li vytvořit základní obrazovka

  1. V Průzkumníku, zvolte MobileClient uzlu.

  2. V řádku nabídek zvolte projektu, Přidat obrazovky.

  3. V Přidat nová obrazovka dialogové okno pole, zvolte Procházet obrazovky Data šablony.

  4. V Přezdívku text zadejte Home.

  5. V Obrazovky Data seznam, zvolte UpcomingAppointmentsa pak zvolte OK tlačítko.

Chcete-li upravit základní obrazovka

  1. V Návrháři obrazovky, zvolte událost uzlu a pak zvolte Rozložení řádků v rozevíracím seznamu.

  2. Ve skupinovém rámečku rozložení řádků | Událost uzel, odstranit všechny uzly s výjimkou Datum zahájení a Zákazník.

  3. V řádku nabídek zvolte Spuštění ladění.

    Mobilní klient se zobrazí v prohlížeči.

    V tomto okamžiku na obrazovce se zobrazí pouze události.Dále přidáte podrobnosti obrazovky tak, aby podrobnosti schůzky se zobrazí, když uživatel znaky událost.

Chcete-li vytvořit obrazovku podrobnosti

  1. V Průzkumníku, zvolte MobileClient uzlu.

  2. V řádku nabídek zvolte projektu, Přidat obrazovky.

  3. V Přidat nová obrazovka dialogové okno pole, zvolte Zobrazit podrobnosti o obrazovku šablony.

  4. V Přezdívku text zadejte ViewAppointmentDetail.

  5. V Obrazovky Data seznam, zvolte událost.

  6. Vyberte Podrobnosti schůzky, Událost AppointmentPhotos, a Místností událost políček a pak zvolte OK tlačítko.

    V Návrháři obrazovky karty vytvořené rozložení a různé typy dat jsou uspořádány do karty.

Chcete-li přizpůsobit obrazovce podrobnosti

  1. V Průzkumníku, otevřená ViewAppointmentDetail obrazovky.

  2. V Návrháři obrazovky, zvolte rozložení řádků | Podrobnosti o uzlu.

  3. Odstranit Datum zahájení, Koncové datum, poznámky k, Přesunout typu, zaměstnance, a zákazníka uzly.

  4. Otevření místní nabídky karty uzlu a pak zvolte Přidat záložku.

  5. V Vlastnosti okno, nastavte hodnotu název vlastnost poznámky k.

  6. V Návrháři obrazovky, zvolte rozložení řádků | Poznámky uzel, rozbalte Přidat uzlu a pak zvolte Jiné obrazovky Data.

    Přidat Data obrazovky zobrazí se dialogové okno.

  7. V zadat data obrazovku Přidat text zadejte Appointment.Notesa pak zvolte OK tlačítko.

  8. Zvolte poznámky uzlu a pak zvolte Textu ovládací prvek rozevíracího seznamu.

  9. V Vlastnosti okno, nastavte hodnotu Výška vlastnost Roztáhnout do kontejneru.

  10. Zvolte rozložení řádků | Podrobnosti o uzel, rozbalte Přidat uzlu a pak zvolte Jiné obrazovky Data.

    Přidat Data obrazovky zobrazí se dialogové okno.

  11. V zadat data obrazovku Přidat text zadejte Customer.Phonea pak zvolte OK tlačítko.

  12. Zvolte telefonní uzlu a pak zvolte Editor telefonních čísel ovládací prvek rozevíracího seznamu.

  13. Rozbalte Přidat uzlu a pak zvolte Jiné obrazovky Data.

    Přidat Data obrazovky zobrazí se dialogové okno.

  14. V zadat data obrazovku Přidat text zadejte Customer.Emaila pak zvolte OK tlačítko.

  15. Zvolte e uzlu a pak zvolte Editor e-mailovou adresu ovládací prvek rozevíracího seznamu.

Chcete-li definovat navigaci

  1. V Průzkumníku, otevřená Home obrazovky.

  2. V Návrháři obrazovky, zvolte seznam | Nadcházející události uzlu.

  3. V Vlastnosti okna, zvolte Klepněte na položku vlastnost a pak zvolte žádný odkaz.

  4. V Upravit klepněte na položku dialogové okno pole, zvolte Zvolit existující metodu přepínač a potom zvolte showViewAppointmentDetail v rozevíracím seznamu.

  5. V úkol seznam, zvolte Uložit.

  6. V událost text zadejte UpcomingAppointments.selectedItema pak zvolte OK tlačítko.

  7. V řádku nabídek zvolte Spuštění ladění ke spuštění mobilního klienta.

    V každé události šipka označuje, že můžete přejít na jinou obrazovku.

  8. Klepněte na událost, chcete-li zobrazit ViewAppointmentDetail obrazovky.

Chcete-li vytvořit modální dialogové okno

  1. V Průzkumníku, otevřená ViewAppointmentDetail obrazovky.

  2. V Návrháři obrazovky, zvolte dialogy uzlu a pak zvolte Dialogové okno Přidat uzlu.

  3. V Vlastnosti okno, nastavte hodnotu jméno vlastnost EditContactInformation.

  4. Rozbalte Přidat uzlu a pak zvolte Jiné obrazovky Data.

    Přidat Data obrazovky zobrazí se dialogové okno.

  5. V zadat data obrazovku Přidat text zadejte Appointment.Customer.FirstNamea pak zvolte OK tlačítko.

  6. Rozbalte Přidat uzlu a pak zvolte Jiné obrazovky Data.

    Přidat Data obrazovky zobrazí se dialogové okno.

  7. V zadat data obrazovku Přidat text zadejte Appointment.Customer.LastNamea pak zvolte OK tlačítko.

  8. Rozbalte Přidat uzlu a pak zvolte Jiné obrazovky Data.

    Přidat Data obrazovky zobrazí se dialogové okno.

  9. V zadat data obrazovku Přidat text zadejte Appointment.Customer.Phonea pak zvolte OK tlačítko.

  10. Zvolte telefonní uzlu a pak zvolte Editor telefonních čísel ovládací prvek rozevíracího seznamu.

  11. Rozbalte Přidat uzlu a pak zvolte Jiné obrazovky Data.

    Přidat Data obrazovky zobrazí se dialogové okno.

  12. V zadat data obrazovku Přidat text zadejte Appointment.Customer.Emaila pak zvolte OK tlačítko.

  13. Zvolte e uzlu a pak zvolte Editor e-mailovou adresu ovládací prvek v seznamu.

  14. V levém podokně přetáhněte ulice, města, Stav, a PSČ uzlu e-mailu.

    Výsledné dialogy oddílu se podobá následujícímu obrázku.

    Rozvržení dialogu

    [!POZNÁMKA]

    Existuje několik způsobů, můžete také přidat ulice, města, Stav, a PSČ polí pomocí stejného postupu jako jméno a Příjmení pole.

Chcete-li zobrazit dialogové okno

  1. V Průzkumníku, otevřená ViewAppointmentDetail obrazovky.

  2. V Návrháři obrazovce otevřít místní nabídku pro rozložení řádků | Podrobnosti o uzlu a pak zvolte Přidat tlačítko.

  3. V Přidat tlačítko dialogové okno pole, zvolte Zvolit existující metodu přepínač, zvolte ShowDialog v seznamu a pak zvolte OK tlačítko.

  4. Zvolte Zobrazit upravit kontaktní informace uzlu.

  5. V Vlastnosti okno, nastavte hodnotu jméno vlastnost Upravit.

  6. V řádku nabídek zvolte ladění, Spuštění ladění Chcete-li spustit klienta.

  7. V provozu mobilního klienta klepněte na událost, chcete-li otevřít Zobrazení podrobností události obrazovky.

  8. Klepněte Upravit tlačítko zobrazíte dialogové okno.

    OK a zrušení tlačítka jsou zahrnuty automaticky.

Přizpůsobení uživatelského rozhraní

Pouze změnou nastavení v Návrháři obrazovky, ale také přidáním vlastních ovládacích prvků a psaní kódu jazyka JavaScript, můžete přizpůsobit uživatelské rozhraní klienta.

Chcete-li použít vlastní formátování pomocí knihovny jazyka JavaScript

  1. V Průzkumníku, otevřená Home obrazovky.

  2. V Návrháři obrazovky, zvolte rozložení řádků | Událost uzlu a pak zvolte Vlastní ovládací prvek v seznamu.

  3. V Psát kód seznam, zvolte RowTemplate_render metoda.

  4. V editoru kódu přidejte následující kód RowTemplate_render funkce:

    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));
};

    Tento kód jazyka JavaScript používá contentItem.value členské proměnné, chcete-li zjistit, co je zobrazeno a format metody pro definování formátování.

  5. V Průzkumníku, zvolte Zobrazení souboru ze seznamu na panelu nástrojů.

  6. V místní nabídce MobileClient uzel, zvolte Spravovat balíčky NuGet.

  7. V Spravovat balíčky NuGet dialogové okno pole, zvolte Online uzlu.

  8. V Hledání Online text zadejte moment.js.

  9. Zvolte nainstalovat tlačítko nainstalovat knihovny Moment.js a pak zvolte Zavřít tlačítko.

  10. V Průzkumníku, rozbalte MobileClient uzel a pak otevřete default.htm souboru.

  11. V editoru kódu přidejte následující značky script po poslední </script> značky:

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

    Tato značka přidá odkaz na knihovnu moment.js.

  12. V řádku nabídek zvolte ladění, Spuštění ladění Chcete-li spustit klienta.

    Událost je formátován a doplňují čas a telefonní číslo.

Chcete-li změnit rozložení

  1. V Průzkumníku, zvolte Logické zobrazení v seznamu na panelu nástrojů a otevřít Home obrazovky.

  2. V Návrháři obrazovky, zvolte seznam | Nadcházející události uzlu a pak zvolte Seznam vedle sebe v rozevíracím seznamu.

  3. Zvolte vlastní ovládací prvek | Událost uzlu.

  4. V Vlastnosti okno, nastavte hodnotu Šířka vlastnost 280 pixelů.

  5. V Vlastnosti okno, nastavte hodnotu Výška vlastnost 80 pixelů.

  6. V řádku nabídek zvolte ladění, Spuštění ladění Chcete-li spustit klienta.

    Základní obrazovka zobrazuje nadcházející události v rozložení pro dlaždice.Změna šířky okna prohlížeče k prokázání toho, jak rozložení dlaždic je dynamicky upravována dobré využít k dispozici místa ve vodorovném směru.Tato ukázka znázorňuje jak změnit rozložení seznam závislosti na velikosti orientace a obrazovky mobilního zařízení.

Chcete-li přidat název dynamické obrazovky

  1. V Průzkumníku, otevřená ViewAppointmentDetail obrazovky.

  2. V Návrháři obrazovky, zvolte rozložení řádků | Podrobnosti o uzlu.

  3. V Psát kód vyberte Details_postRender.

  4. V editoru kódu přidejte následující kód jazyka JavaScript:

    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. V řádku nabídek zvolte ladění, Spuštění ladění Chcete-li spustit klienta.

    Na obrazovkách podrobnosti schůzky zobrazit jméno zákazníka a počáteční a koncový čas schůzky.

Publikovat klienta

V tomto okamžiku jste otestovali klient zobrazením v prohlížeči místní.Klient přístup z mobilního zařízení, musíte ji publikovat do služby Internetová informační služba (IIS).

[!POZNÁMKA]

Můžete také publikovat mobilního klienta Windows Azure jako libovolný LightSwitch aplikace.Další informace naleznete v tématu Jak: hostitelské aplikace ve Windows Bledě azurová.

Chcete-li nakonfigurovat server

  1. Na serveru, pokud nasadíte aplikaci, spusťte Správce Internetová informační služba (IIS).

  2. V připojení podokně rozbalte uzel serveru a pak zvolte Výchozí webový server uzlu.

  3. Otevření místní nabídky pro Výchozí webový server uzlu a pak zvolte Přidat aplikaci.

    Zobrazí se dialogové okno Přidat aplikaci.

  4. V Alias text zadejte ContosoMoving.

  5. V fyzickou cestu text zadejte cestu pro soubory klienta (například C:\inetpub\wwwroot\Contoso) a pak zvolte OK tlačítko.

  6. V prostředním podokně otevřete místní nabídku pro ověřování ikonu a pak zvolte Otevřete funkci.

  7. V ověřování podokně nastavte následující hodnoty:

    Název

    Stav

    Anonymní ověřování

    Povoleno

    Zosobnění technologie ASP.Net

    Zakázaný

    Ověřování pomocí formulářů

    Povoleno

    Ověřování v systému Windows

    Zakázaný

Chcete-li publikovat klienta

  1. V ladění seznam na panelu nástrojů, zvolte vydání.

  2. V Průzkumníku, zvolte ContosoMoving uzlu.

  3. V řádku nabídek zvolte sestavení, Publikovat ContosoMoving.

    Zobrazí se Průvodce publikováním aplikace LightSwitch.

  4. Na Typ aplikace stránky, zvolte Kompletní aplikaci přepínač a potom zvolte Další tlačítko.

  5. Na stránce Konfigurace aplikačního serveru zvolte možnost IIS Server.

  6. Na stránce Publikovat výstup zvolte tlačítko Nyní vzdáleně publikovat na server.

  7. V Adresa URL služby text zadejte adresu URL serveru se spuštěnou službou IIS, kde chcete publikovat klienta.

  8. V Web/aplikace text zadejte Výchozí webový server/ContosoMoving.

  9. V Uživatelské jméno text zadejte jméno uživatele, který má oprávnění správce na serveru se spuštěnou službou IIS.

  10. V heslo textové pole, zadejte heslo pro uživatele a pak zvolte Další tlačítko.

  11. Na Nastavení zabezpečení na stránce Aplikace Správce karta, zadejte Uživatelské jméno, Celé jménoa heslo pro uživatele, který bude zpočátku mají přístup správce ke klientovi.

    Důležitá poznámkaDůležité

    Budete potřebovat tato pověření pro přístup klienta po jeho publikování.

  12. Na HTTPS , vyberte Ne, je HTTPS nejsou vyžadovány přepínač a potom zvolte Další tlačítko.

    Datová připojení se zobrazí stránka.

  13. V zadat připojení uživatelů text zadejte připojovací řetězec k databázi serveru SQL Server, který bude hostit vaše data.

    Tato databáze může být na stejném serveru jako služba IIS nebo na jiném serveru.

    Tip

    Můžete použít tlačítko se třemi tečkami otevřete Vlastnosti připojení dialogové okno pole a zadejte vlastnosti sestavit připojovací řetězec.

  14. V schéma databáze publikovat text zadejte stejný připojovací řetězec.

  15. Pro publikování aplikace zvolte tlačítko Publikovat.

Chcete-li testovat klienta

  1. Do adresního řádku webového prohlížeče zadejte http://IISServer/contosomoving/client, kde IISServer je název serveru, kam jste publikovali klienta.

  2. V Uživatelské jméno a heslo textová pole, zadejte pověření, která jste zadali pro správce klienta a pak zvolte Protokolu v tlačítko.

  3. V řádku nabídek zvolte Ukázková Data, Vytvoření ukázkových dat.

    [!POZNÁMKA]

    Data, která je zadána v době návrhu není publikována, tak musíte přidat ukázková data do produkční databáze.

  4. Na Vytvoření ukázkových dat na obrazovce, zvolte Přidat všechna Data vzorku tlačítko na panelu nástrojů.

    Vytvoření ukázkových dat pro Stav, zaměstnance, zákazníka, a událost entity.

  5. Na panelu nástrojů zvolte Uložit tlačítko.

  6. Do pole Adresa v prohlížeči zadejte http://IISServer/contosomoving/mobileclient, kde IISServer je název serveru, kam jste publikovali klienta.

  7. Po zobrazení výzvy k zadání uživatelského jména a hesla, zadejte ACarter jako uživatel a pass@word1 jako heslo.

    Nadcházející schůzky pro Adam Carter zobrazovat.

Přidat vlastní ovládací prvek odesílání fotografií

Na obrazovce podrobnosti schůzky Událost fotografie karty tak, aby plánování specializovaných na stěhování Contoso můžete fotografovat webu zákazníka přesněji odhadnout úlohy.Chcete-li tento úkol, přidáte vlastní ovládací prvek klientovi.

Chcete-li přidat vlastní ovládací prvek.

  1. V Průzkumníku, zvolte Zobrazení souboru v seznamu na panelu nástrojů.

  2. Otevření místní nabídky pro skripty uzel, zvolte Přidata pak zvolte Existující položku.

  3. V Přidat existující položku dialogové okno pole, přejděte ContosoMoving složku, Otevřít zdroje složku a pak otevřete ImageUploader složky.

  4. Zvolte ve formátu base64 soubor kodéru a obrázků soubory a pak zvolte Přidat tlačítko.

  5. Otevřete soubor default.htm a pak v editoru kódu přidejte následující odkaz na obrázek uploader.js na konci bloku skriptu odkazy:

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

  6. V Průzkumníku, zvolte Logické zobrazení v seznamu na panelu nástrojů a potom otevřít ViewAppointmentDetail obrazovky.

  7. V Návrháři obrazovky, zvolte Událost fotografie uzlu a zvolte Rozložení sloupců v seznamu.

  8. Otevření místní nabídky pro dialogy uzlu a pak zvolte Dialogové okno Přidat.

  9. V Vlastnosti okno, nastavte hodnotu jméno vlastnost ImageUploader.

  10. Nastavte hodnotu Výška a Šířka vlastnosti Roztáhnout do kontejneru.

  11. V levém podokně návrháře obrazovka rozbalte AppointmentPhotos uzel a přetáhněte jej Vybranou položku uzel rozložení řádků | Odeslání obrázku uzel v podokně uprostřed.

  12. Odstranit nově přidané událost uzlu.

  13. Zvolte Obrázek uzlu a pak zvolte Vlastní ovládací prvek v seznamu.

  14. V Vlastnosti okna, zvolte Úpravy kódu vykreslení hypertextový odkaz.

  15. V editoru kódu přidejte následující kód funkce Picture1_render:

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

    Tento kód inicializuje vlastního ovládacího prvku ImageUploader při vykreslení na obrazovce.

  16. V Návrháři obrazovce otevřít místní nabídku pro rozložení řádků | Událost fotografie uzlu a pak zvolte Přidat tlačítko.

  17. V Přidat tlačítko dialogové okno pole, zvolte Zvolit existující metodu přepínač.

  18. V showDialog seznam, zvolte AppointmentPhotos.AddAndEditNew.

  19. V Přejděte na seznam, zvolte Obrázkůa pak zvolte OK tlačítko.

  20. Přetáhněte Přidat fotografii událost tlačítko tak, aby se přes seznam | Událost fotografie uzlu.

  21. V řádku nabídek zvolte ladění, Spuštění ladění Chcete-li spustit klienta.

  22. Spuštění klienta klepněte na událost.

  23. V dialogovém okně Podrobnosti schůzky klepněte Událost fotografie kartu.

  24. Klepněte Přidat fotografii událost tlačítko Otevřít Obrázků dialogové okno.

    Dialogové okno obrázků

Mapování adresy zákazníka

Plánování specializované musí být také schopen najít zákazníka, tedy dále přidáte mapování funkce pomocí ovládacího prvku Bingu map.

Chcete-li přidat ovládací prvek mapy

  1. V Průzkumníku, zvolte Zobrazení souboru v seznamu na panelu nástrojů.

  2. Otevření místní nabídky pro skripty uzel, zvolte Přidata pak zvolte Existující položku.

  3. V Přidat existující položku dialogové okno pole, přejděte ContosoMoving složku a pak otevřete zdroje složky.

  4. Zvolte lightswitch.bing maps.js souboru a pak zvolte Přidat tlačítko.

  5. Otevřete soubor default.htm a pak v editoru kódu přidejte odkaz na začátku bloku skriptu odkazy:

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

  6. Na konci bloku skriptu odkazy přidáte odkaz na soubor jazyka JavaScript:

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

  7. V Průzkumníku, zvolte Logické zobrazení ze seznamu na panelu nástrojů a potom otevřít ViewAppointmentDetail obrazovky.

  8. V Návrháři obrazovce otevřít místní nabídku pro karty uzlu a pak zvolte Přidat záložku.

  9. V Vlastnosti okno, nastavte hodnotu jméno vlastnost mapy.

  10. Přetáhněte rozložení řádků | Mapa uzel, takže se objeví nad rozložení řádků | Poznámky k uzlu.

  11. Otevření místní nabídky rozložení řádků | Mapa uzlu a pak zvolte Přidat vlastní ovládací prvek.

    Přidat vlastní ovládací prvek zobrazí se dialogové okno.

  12. V zadat data pro nové vlastní ovládací prvek text zadejte událosta pak zvolte OK tlačítko.

  13. V Vlastnosti okna, zvolte Úpravy kódu vykreslení hypertextový odkaz.

  14. V editoru kódu přidejte následující pomocné metody před Appointment_render funkce:

    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. Přidejte následující kód, který Appointment_render funkce:

    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); });

    Tento kód sváže pole události ovládacího prvku mapy při vykreslení na obrazovce.

  16. V řádku nabídek zvolte ladění, Spuštění ladění Chcete-li spustit klienta.

  17. Spuštění klienta klepněte na událost.

  18. V dialogovém okně Podrobnosti schůzky klepněte mapy kartu zobrazíte mapu v adrese zákazníka.

Přidání značky

Dále změníte název klienta na smysluplnější než MobileClient a přidáte Contoso přesunutí logo společnosti přizpůsobit klientovi.

Chcete-li změnit název

  1. V Průzkumníku, zvolte Zobrazení souboru ze seznamu na panelu nástrojů.

  2. Otevřete soubor default.htm a potom v okně editor kódu nahraďte <title>MobileClient</title> element s následujícím kódem:

    <title>Contoso Moving Mobile</title>

Chcete-li přidat ikonu

  1. V Průzkumníku, rozbalte obsahu a obrazy uzlů.

  2. Odstranit uživatel logo.png a uživatel úvodní screen.png soubory.

  3. Otevření místní nabídky pro obrazy uzel, zvolte Přidata pak zvolte Existující položku.

  4. V Přidat existující položku dialogové okno pole, přejděte ContosoMoving složku a pak otevřete zdroje složky.

  5. Zvolte logo.png souboru a pak zvolte Přidat tlačítko.

  6. V Průzkumníku, otevřete místní nabídku pro logo.png uzel, zvolte Přejmenovata potom zadejte uživatel logo.png.

  7. Otevření místní nabídky pro obrazy uzel, zvolte Přidata pak zvolte Existující položku.

  8. V Přidat existující položku dialogové okno pole, zvolte logo.png souboru a pak zvolte Přidat tlačítko.

  9. V Průzkumníku, otevřete místní nabídku pro logo.png uzel, zvolte Přejmenovata potom zadejte uživatel úvodní screen.png.

  10. V řádku nabídek zvolte ladění, Spuštění ladění Chcete-li spustit klienta.

    [!POZNÁMKA]

    Budete muset vymazat mezipaměť prohlížeče dříve, než se změny zobrazí.

Změna motivu

Kaskádové šablony stylů (CSS) pro definování motivu klienta.Můžete změnit výchozí motiv, chcete-li změnit vzhled vašeho klienta nebo může nahradit tento motiv změnou souboru .css.Webové nástroje, ThemeRoller, použije k vytvoření souboru a.css s vlastní motiv.

Chcete-li přepnout mezi motivy

  1. V Průzkumníku, zvolte Zobrazení souboru ze seznamu na panelu nástrojů.

  2. Otevřete soubor default.htm a potom v editoru kódu nahraďte řádek <link rel="stylesheet" type="text/css" href="Content/dark-theme.css" charset="utf-8" /> s následujícím kódem:

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

  3. V Průzkumníku, rozbalte obsahu uzel a pak otevřete uživatel customization.css souboru.

  4. Hledání souboru komentáře, /* if light theme change ‘white’ to ‘black */a potom nahradit msls-white-icons se v každém ze čtyř výskytů následující řetězec:

    msls-black-icons

  5. V řádku nabídek zvolte ladění, Spuštění ladění Chcete-li spustit klienta.

Chcete-li upravit existující motiv

  1. Ve webovém prohlížeči přejděte ThemeRoller webu.

  2. Na panelu nástrojů ThemeRoller vybrat Import nebo inovace tlačítko.

    Import motiv zobrazí se dialogové okno.

  3. V aplikaci Visual Studio v Průzkumníku, zvolte Zobrazení souboru ze seznamu na panelu nástrojů.

  4. Rozbalte obsahu uzel a pak otevřete světla theme.css souboru.

  5. V editoru kódu zkopírujte celý obsah souboru.

  6. V ThemeRoller, vložte obsah světla theme.css souboru do Import motiv dialogové okno pole a pak zvolte Import tlačítko.

  7. V levém podokně vyberte Global kartu a potom rozbalte uzel Poloměry rohů uzlu.

  8. V skupiny text zadejte 0.8em.

  9. V tlačítko text zadejte 1.5em.

    Prvky uživatelského rozhraní v pravém podokně mají zaoblené rohy.

  10. Na B , vyberte Odstranit odkaz.

    LightSwitchpoužívá se pouze Global a vzorek A nastavení.Je-li odebrat další vzorníky, zmenší velikost souboru .css.

  11. Opakujte proces odebrání další vzorníky.

  12. V pravém podokně přetáhněte barvu z palety barev na pozadí oblast vzorek A.

  13. Přetáhněte jinou barvu na rádio 1 prvku.

    Všechny související prvky také změnit barvu.Pokud nastavíte ukazatel myši na prvek, změní na doplňkové barvy, označující výběr barev.

  14. Zvolte na panelu ThemeRoller Stáhnout tlačítko.

  15. V Stáhnout motiv dialogové okno pole, zvolte Stáhnout Zip tlačítko.

  16. Extrahujte obsah komprimovaný soubor do místní složky.

  17. V Průzkumníku, otevřete místní nabídku pro obsahu uzel, zvolte Přidata pak zvolte Existující položku.

  18. V Přidat existující položku dialogové okno pole, přejděte do složky, které jste extrahovali soubory, zvolte Můj item.css souboru a pak zvolte Přidat tlačítko.

  19. Otevřete soubor default.htm, vyhledejte řádek <link rel="stylesheet" type="text/css" href="Content/light-theme.css" charset="utf-8" /> v editoru kódu a potom nahradit řádek s následujícím kódem:

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

  20. V řádku nabídek zvolte ladění, Spuštění ladění Chcete-li spustit klienta.

Znovu publikujte klienta

Nyní, když klient je dokončena, bude znovu publikovat do služby IIS.

Chcete-li znovu publikovat klienta

  1. V Průzkumníku, zvolte ContosoMoving uzlu.

  2. V řádku nabídek zvolte sestavení, Publikovat ContosoMoving.

  3. V Průvodce publikováním aplikace LightSwitch, zvolte Publikovat tlačítko Publikovat klienta.

  4. Do pole Adresa v prohlížeči zadejte http://IISServer/contosomoving/mobileclient, kde IISServer je název serveru, kam jste publikovali klienta.

  5. Po zobrazení výzvy k zadání uživatelského jména a hesla, zadejte ACarter jako uživatel a pass@word1 jako heslo.

    Klient odráží nejnovější změny, které jste provedli.

    [!POZNÁMKA]

    Budete muset vymazat mezipaměť prohlížeče.

Viz také

Další zdroje

Obrazovky klienta HTML pro aplikace LightSwitch