Postupy: Vytvoření klienta LightSwitch pro mobilní uživatele
S použitím LightSwitch, můžete vytvořit klienta HTML, ve kterém můžete zobrazit, přidat a aktualizaci dat ze vzdáleného umístění pomocí moderní, dotykovým ovládáním zařízení, například telefonů a tabletů mobilní uživatelé.V tomto návodu vytvoříte klienta pro fiktivní přesunutí společnost Contoso přesunutí, tak, aby jeho pracovníci služeb zákazníkům lze snadněji odhadnout, kolik uživatelů dodávky polí a bude vyžadovat každou úlohu.
Na Contoso plánovače věnovat většinu svého času v systému office, diskuzích potenciální zákazníci osobně nebo v telefonu a uspořádání monitorováním návštěvách.Tyto pracovníci používat bohaté počítačového klienta, který je založen na technologii Silverlight a lépe podporuje zadávání silně dat pomocí klávesnice a myši.Naproti plánování specialistů cestovní celý den, takže zpracovat návštěvy v různých umístěních a nahrávání informace, jako je velikost, obsah a položka požadavky každé místnosti.Tyto mobilní uživatelé muset klient, který pouze jim jsou uvedeny informace o jednotlivých monitorováním návštěvu z plánovače, ale také podporuje zadáním určité typy dat, trvá obrázků a přesunout týmu o parkovací omezení nebo jiné podrobnosti výstrahy.
Klientské pro plánovače již byla vytvořena.Budete vytvářet mobilní klienta, který plánování specialistů slouží ke sledování všechny události, které plánovače uspořádat a k zadání podrobnosti o každém přesunu.
Požadavky
- Stáhněte si ContosoMoving vzorové aplikace.
Začínáme
Před vytvořením mobilního klienta, vytvoří ukázkových dat pro stolní počítače, který můžete stáhnout.
Chcete-li vytvořit ukázková data
V nabídce, zvolte soubor, Open, projekt/řešení.
Vyhledejte stažený soubor ContosoMoving.sln a poté jej otevřete.
V panelu nabídek zvolte možnost Ladit, Spustit ladění.
V klientu spuštěné v nabídce, zvolte ukázková Data, vytvořit ukázková Data.
Na panelu nástrojů v vytvořit ukázková Data obrazovky, zvolte přidat všechna Data ukázky tlačítko.
Ukázková data je vytvořen pro stav, zaměstnance, zákazníka, a událost entity.
Na panelu nástrojů zvolte Uložit tlačítko.
V nabídce, zvolte Home.
Na panelu nástrojů zvolte aktualizace tlačítko.
Zobrazí se seznam nadcházející události pro všechny zaměstnance a mohou také prostudovat další dialogová okna v klientovi stolní počítače.
Přidání mobilní klienta
Dále přidáte projekt klienta HTML do existující řešení.
Chcete-li přidat projekt klienta HTML
V Průzkumníka řešení, zvolte ContosoMoving uzlu.
V nabídce, zvolte projektu, přidat klienta.
V přidat klienta dialogové okno zvolte klienta HTML, pojmenujte jej MobileClienta poté zvolte možnost OK tlačítko.
Objekt MobileClient uzel projektu bude přidán do Průzkumníka řešení.
Vytvořit obrazovky a definovat navigace
Dále vytvoříte domácí obrazovky a podrobnosti obrazovky, definovat navigaci mezi obrazovky a vytvořit modální dialogové okno.Mobilní klienti používat různé navigační model než stolní klienti.Obvykle pouze jednu obrazovku je zobrazen v době v mobilního klienta a změny budou potvrzeny při přesunutí z jedné obrazovky do druhé.
Chcete-li vytvořit základní obrazovka
V Průzkumníka řešení, zvolte MobileClient uzlu.
V panelu nabídek zvolte možnost Projekt, Přidat obrazovku.
V přidat nové obrazovce dialogové okno zvolte Procházet na obrazovce údaje šablony.
V název obrazovky text zadejte Home.
V obrazovce dat seznam, zvolte UpcomingAppointmentsa poté zvolte možnost OK tlačítko.
Chcete-li přizpůsobit obrazovce Domovská stránka
V Návrháři obrazovky, zvolte událost uzel a poté zvolte možnost rozložení řádků v rozevíracím seznamu.
V části rozložení řádků | Událost uzel, odstraňte všechny uzly s výjimkou datum zahájení a zákazníka.
V nabídce, zvolte spustit ladění.
Mobilní klient se zobrazí v prohlížeči.
V tomto okamžiku na obrazovce se zobrazí pouze události.Podrobnosti o obrazovce vedle přidáte tak, aby podrobnosti události se zobrazí, když uživatel provede ověření klepnutím událost.
Chcete-li vytvořit podrobnosti obrazovky
V Návrháři obrazovky, zvolte nadcházející události uzlu.
V vlastnosti okna, zvolte klepněte na položku: None odkazu.
V akce Upravit ItemTap dialogové okno zvolte vyberte existující metodu přepínač a potom vyberte UpcomingAppointments.ViewSelected v seznamu.
V přejít na seznam, zvolte **(nová obrazovka)**a poté zvolte možnost OK tlačítko.
Zobrazí se dialogové okno Přidat novou obrazovku.
V přidat nové obrazovce dialogové okno zvolte zobrazit podrobnosti o obrazovku šablony.
V název obrazovky text zadejte ViewAppointment.
V obrazovce dat seznam, zvolte událost.
Vyberte podrobnosti události, událost fotografie, a události místnosti zaškrtávacích políček a pak zvolte OK tlačítko.
V Návrháři obrazovky karty rozložení je vytvořena a různé typy dat jsou uspořádány do záložek.
V nabídce, zvolte spustit ladění ke spuštění mobilního klienta.
Událost k zobrazení klepněte zobrazení události obrazovky.
Změní velikost okna prohlížeče a Všimněte si, jak se změní rozložení mezi dva sloupce a jeden sloupec.
Chcete-li přizpůsobit obrazovce podrobnosti
V Průzkumníka řešení, spusťte ViewAppointment obrazovky.
V Návrháři obrazovky, zvolte rozložení řádků | Podrobnosti o uzlu.
Odstranit datum zahájení, koncové datum, poznámky, přesunout typ, zaměstnance, a zákazníka uzlů.
Přesunout stav uzlu tak, že se zobrazí v části Město uzlu.
Zvolte rozložení řádků | pravý uzel, rozbalte položku přidat uzel a poté zvolte možnost další Data obrazovce.
Přidat Data obrazovce se zobrazí dialogové okno.
V zadejte data obrazovky, chcete-li přidat text zadejte Customer.Phonea poté zvolte možnost OK tlačítko.
Rozbalit přidat uzel a poté zvolte možnost další Data obrazovce.
Přidat Data obrazovce se zobrazí dialogové okno.
V zadejte data obrazovky, chcete-li přidat text zadejte Customer.Emaila poté zvolte možnost OK tlačítko.
Chcete-li vytvořit modální dialogové okno
V Průzkumníka řešení, spusťte ViewAppointment obrazovky.
V Návrháři obrazovky, otevřete místní nabídku pro panel příkazů uzel podrobnosti a potom klikněte na příkaz přidat tlačítko.
V přidat tlačítko dialogové okno zvolte vyberte existující metodu přepínač a potom vyberte Appointment.edit v seznamu.
V přejít na seznam, zvolte **(nová obrazovka)**a poté zvolte možnost OK tlačítko.
Zobrazí se dialogové okno Přidat novou obrazovku.
V název obrazovky text zadejte EditAppointmenta poté zvolte možnost OK tlačítko.
V vlastnosti okna, zobrazit dialogové okno jako zaškrtávací políčko zaškrtnuto, což znamená, že na obrazovce se zobrazí jako modální dialogové okno.
V Návrháři obrazovky odstranit rozložení sloupce | sloupce uzlu.
Rozbalit přidat uzel a poté zvolte možnost další Data obrazovce.
Přidat Data obrazovce se zobrazí dialogové okno.
V zadejte data obrazovky, chcete-li přidat text zadejte Appointment.Customer.FirstNamea poté zvolte možnost OK tlačítko.
Rozbalit přidat uzel a poté zvolte možnost další Data obrazovce.
Přidat Data obrazovce se zobrazí dialogové okno.
V zadejte data obrazovky, chcete-li přidat text zadejte Appointment.Customer.LastNamea poté zvolte možnost OK tlačítko.
Rozbalit přidat uzel a poté zvolte možnost další Data obrazovce.
Přidat Data obrazovce se zobrazí dialogové okno.
V zadejte data obrazovky, chcete-li přidat text zadejte Appointment.Customer.Phonea poté zvolte možnost OK tlačítko.
Rozbalit přidat uzel a poté zvolte možnost další Data obrazovce.
Přidat Data obrazovce se zobrazí dialogové okno.
V zadejte data obrazovky, chcete-li přidat text zadejte Appointment.Customer.Emaila poté zvolte možnost OK tlačítko.
V podokně na levé straně, přetáhněte ulice, Město, stav, a PSČ pod e-mailu uzlu.
[!POZNÁMKA]
Existuje několik způsobů, můžete také přidat ulice, StreetLine2, Město, stav, a PSČ pole pomocí stejného postupu jako FirstName a LastName polí.
Chcete-li zobrazit dialogové okno
V Průzkumníka řešení, spusťte ViewAppointment obrazovky.
V Návrháři obrazovky, zvolte upravit událost uzlu.
V vlastnosti okna, rozbalte položku ikonu, seznamu a poté zvolte možnost upravit.
V nabídce, zvolte ladění, spustit ladění ke spuštění mobilního klienta.
V klientu spuštěné klepněte na možnost událost k otevření zobrazení události obrazovky.
Klepněte upravit událost tlačítko pro zobrazení dialogového okna.
OK a zrušit tlačítka jsou zahrnuty automaticky.
Přizpůsobení uživatelského rozhraní
Uživatelské rozhraní klienta lze upravit, 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.
Chcete-li použít vlastní formátování s použitím knihovny jazyka JavaScript
V Průzkumníka řešení, spusťte Home obrazovky.
V Návrháři obrazovky, zvolte rozložení řádků | Událost uzel a poté zvolte možnost vlastní ovládací prvek v seznamu.
V psát kód seznam, zvolte RowTemplate_render metody.
V editoru kódu přidejte následující kód pro 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é k určení toho, chcete-li zobrazit a format metody pro definování formátování.
V Průzkumníka řešení, otevřete místní nabídku pro MobileClient uzel a poté zvolte možnost spravovat balíčky NuGet.
V dialogovém okně Správa balíčků NuGet vyberte uzel Online.
Do textového pole Vyhledávání online zadejte údaj moment.js.
Kliknutím na tlačítko Nainstalovat proveďte instalaci knihovny Moment.js a potom klikněte na tlačítko Zavřít.
V Průzkumníka řešení, rozbalte položku MobileClient uzel a pak otevřete default.htm souboru.
V Editoru kódu přidejte následující značku skriptu za poslední značku </script>:
<script type="text/javascript" src="Scripts/moment.js" charset="utf-8"></script>
Toto klíčové slovo přidá odkaz na knihovnu moment.js.
V nabídce, zvolte ladění, spustit ladění ke spuštění klienta.
Událost formátována a jsou přidány čas a telefonní číslo.
Chcete-li změnit rozložení na seznam vedle sebe
V Průzkumníka řešení, spusťte Home obrazovky.
V Návrháři obrazovky, zvolte seznam | Nadcházející události uzel a poté zvolte možnost dlaždice seznamu v seznamu.
V nabídce, zvolte ladění, spustit ladění ke spuštění klienta.
V dialogovém okně domácí zobrazeny nadcházející události v rozložení na základě dlaždice.Změníte šířku okna prohlížeče k předvedení, jak rozložení dlaždic dynamicky přizpůsobí využít k dispozici vodorovné mezery.Tato ukázka znázorňuje, jak se může změnit rozložení seznam závislosti na velikosti orientaci a obrazovky mobilního zařízení.
Chcete-li přidat nadpis dynamické obrazovky
V Průzkumníka řešení, spusťte ViewAppointment obrazovky.
V Návrháři obrazovky, zvolte rozložení řádků | Podrobnosti o uzlu.
V psát kód seznam, zvolte Details_postRender.
V editoru kódu přidejte následující kód jazyka JavaScript:
myapp.ViewAppointmentDetail.Details_postRender = function (element, contentItem) { contentItem.dataBind("value.Appointment.Customer.FirstName", function () { formatAppointmentScreenTitle(contentItem); }); contentItem.dataBind("value.Appointment.Customer.LastName", function () { formatAppointmentScreenTitle(contentItem); }); function formatAppointmentScreenTitle(contentItem) { contentItem.screen.details.displayName = contentItem.value.Appointment.Customer.FirstName + " " + contentItem.value.Appointment.Customer.LastName + " " + moment(contentItem.value.Appointment.StartDate).format("h:mma") + " - " + moment(contentItem.value.Appointment.EndDate).format("h:mma"); }; };
V nabídce, zvolte ladění, spustit ladění ke spuštění klienta.
Podrobnosti události obrazovky zobrazit jméno zákazníka a počáteční a koncový čas pro událost.
Přidat vlastní ovládací prvek pro odesílání fotografií
Obrazovka podrobnosti události má událost fotografie kartu tak, aby specialistou plánování pro přesun Contoso může trvat obrázky webu zákazníka přesněji odhadnout úlohu.Chcete-li povolit tuto úlohu, přidáte vlastní ovládací prvek ke klientovi.
Chcete-li přidat vlastní ovládací prvek
V Průzkumníka řešení, otevřete místní nabídku pro skripty uzel, zvolte přidata poté zvolte možnost existující položku.
V přidat existující položku dialogové okno pole, přejděte do ContosoMoving složku a pak otevřete ukázky prostředků složky.
Zvolte image_uploader ve formátu base64 souboru kodér a obrázků – soubory a pak zvolte přidat tlačítko.
Otevřete soubor Default a pak v editoru kódu, přidejte na konci bloku skriptu odkazuje na následující odkaz na obrázek uploader.js:
<script type="text/javascript" src="Scripts/image-uploader.js" charset="utf-8"></script>
V Průzkumníka řešení, spusťte ViewAppointment obrazovky.
V Návrháři obrazovky, zvolte seznam | Fotografie uzel a poté zvolte možnost dlaždice seznamu v seznamu.
V vlastnosti okna, otevřete výšku vlastnosti seznamu a poté zvolte možnost Stretch do kontejneru.
V Min text zadejte 150.
V Návrháři obrazovky, otevřete místní nabídku pro fotografie kartu panel příkazů uzel a poté zvolte možnost přidat tlačítko.
V přidat tlačítko dialogové okno zvolte vyberte existující metodu přepínač, zvolte Photos.addEditNew v seznamu a poté zvolte možnost OK tlačítko.
Zobrazí se dialogové okno Přidat novou obrazovku.
V název obrazovky text zadejte UploadPhotoa poté zvolte možnost OK tlačítko.
V Návrháři obrazovky odstranit rozložení řádků | pravý uzlu.
Zvolte titulek uzel a poté změňte typ ovládacího prvku, který má textová oblast.
Zvolte obrázek uzel a poté změňte typ ovládacího prvku, který má vlastní ovládací prvek.
V vlastnosti okna, zvolte upravit kód vykreslení hypertextový odkaz.
V editoru kódu přidejte do funkce Picture1_render následující kód:
createImageUploader(element, contentItem, "max-width: 300px; max-height: 300px");
Tento kód inicializuje ImageUploader vlastní ovládací prvek při vykreslení na obrazovce.
V Průzkumníka řešení, spusťte ViewAppointment obrazovky.
V Návrháři obrazovky, zvolte přidat fotografii tlačítko uzel a poté změňte ikonu vlastnost, která má přidat obrázek.
V nabídce, zvolte ladění, spustit ladění ke spuštění klienta.
V klientu spuštěné klepněte na možnost události.
Na obrazovce podrobnosti události, klepněte fotografie karty.
Klepněte přidat fotografii tlačítko otevřete obrázků dialogového okna.
Mapovat adresy zákazníka
Plánování specialist musí být také nemůže najít zákazníka, takže dále přidáte mapování funkce pomocí ovládacího prvku, mapy Bing.
Chcete-li přidat ovládacího prvku map
V Průzkumníka řešení, otevřete místní nabídku pro skripty uzel, zvolte přidata poté zvolte možnost existující položku.
V přidat existující položku dialogové okno pole, přejděte do ContosoMoving složku a pak otevřete ukázky prostředků složky.
Zvolte lightswitch.bing maps.js souboru a poté zvolte možnost přidat tlačítko.
Otevřete soubor Default a potom 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>
Na konci bloku odkazů skriptu přidejte odkaz na soubor jazyka JavaScript:
<script type="text/javascript" src="Scripts/lightswitch.bing-maps.js" charset="utf-8"></script>
V Průzkumníka řešení, spusťte ViewAppointment obrazovky.
V Návrháři obrazovky, otevřete místní nabídku pro karty uzel a poté zvolte možnost přidat záložku.
V vlastnosti okna, nastavte hodnotu název vlastnost, která má mapy.
Otevřete místní nabídku pro rozložení řádků | Mapa uzel a poté zvolte možnost přidat vlastní ovládací prvek.
Přidat vlastní ovládací prvek se zobrazí dialogové okno.
V zadat data pro nové vlastní ovládací prvek text zadejte událosta poté zvolte možnost OK tlačítko.
V vlastnosti okna, zvolte upravit kód vykreslení hypertextový odkaz.
V editoru kódu, přidejte následující metody nástroje 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, height: "400" }); };
Přidat následující kód, který Appointment_render funkce:
updateMap(element, contentItem); 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 vytvoří vazbu se pole události ovládacího prvku mapy při vykreslení na obrazovce.
V nabídce, zvolte ladění, spustit ladění ke spuštění klienta.
V klientu spuštěné klepněte na možnost události.
Na obrazovce podrobnosti události, klepněte mapy kartu zobrazíte mapu adresu zákazníka.
Přidat značky
Dále změníte název klienta na určité akce více než MobileClient a budete přidáte Contoso přesun loga společnosti přizpůsobení klienta.
Změna názvu
V Průzkumníka řešení, otevřete soubor Default a potom v editoru 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
V Průzkumníka řešení, rozbalte položku obsahu a obrázky uzlů.
Odstranit uživatel logo.png souboru.
Otevřete místní nabídku pro obrázky uzel, zvolte přidata poté zvolte možnost existující položku.
V přidat existující položku dialogové okno pole, přejděte do ContosoMoving složku a pak otevřete ukázky prostředků složky.
Zvolte uživatel logo.png souboru a poté zvolte možnost přidat tlačítko.
[!POZNÁMKA]
Můžete také upravit obrázek, který se zobrazí na úvodní obrazovce, pokud nahradíte uživatele úvodní screen.png souboru.
V nabídce, zvolte ladění, spustit ladění ke spuštění klienta.
[!POZNÁMKA]
Potřebujete vymazat mezipaměť prohlížeče předtím, než se změny zobrazí.
Změna motivu
Stylů CSS (CSS) k definování motiv klienta.Můžete změnit výchozí motiv chcete-li změnit vzhled svého klienta nebo nahradíte tohoto motivu změnou soubor CSS.Nástroj webu, ThemeRoller, použije k vytvoření souboru a.css s vlastní motiv.
Chcete-li přepnout mezi motivů
V Průzkumníka řešení, otevřete soubor Default a potom v editoru kódu nahraďte "light" v následující dva řádky <link rel="stylesheet" type="text/css" href="Content/light-theme.css" />, <link rel="stylesheet" type="text/css" href="Content/msls-light.css" />s tmavě.
V nabídce, zvolte ladění, spustit ladění ke spuštění klienta.
Chcete-li přizpůsobit existující motiv
Ve webovém prohlížeči, přejděte ThemeRoller webu.
Na panelu nástrojů ThemeRoller vybrat importu nebo upgrade tlačítko.
Import motiv se zobrazí dialogové okno.
V sadě Visual Studio v Průzkumníka řešení, zvolte zobrazení souboru ze seznamu na panelu nástrojů.
Rozbalit obsahu uzel a pak otevřete tmavě theme.css souboru.
V editoru kódu zkopírujte celý obsah souboru.
V ThemeRoller, umožňuje vložit obsah tmavě theme.css souboru do Import motiv dialogové okno pole a zvolte možnost Import tlačítko.
V levém podokně vyberte položku globální kartu a potom rozbalte poloměr rohu uzlu.
V skupiny text zadejte 0.8em.
V tlačítko text zadejte 1.5em.
Prvky uživatelského rozhraní v pravém podokně mít zaoblenými hranami.
V pravém podokně, přetáhněte barvu z palety barev na pozadí oblast vzorek A.
Přetáhněte ji na jinou barvu přepínač elementu.
Všechny související prvky také změnit barvu.Po klepnutí na element, změní se na doplňkové barvy, určující barvu výběru.
Na panelu nástrojů ThemeRoller vybrat Stáhnout tlačítko.
V stáhnout motiv dialogové okno název motivu mé theme a poté zvolte možnost stáhnout Zip tlačítko.
Extrahujte obsah komprimovaný soubor do místní složky.
V Průzkumníka řešení, otevřete místní nabídku pro obsahu uzel, zvolte přidata poté zvolte možnost existující položku.
V přidat existující položku dialogové okno pole, přejděte do složky, kde extrahovány soubory, zvolte mé theme.css souboru a poté zvolte možnost přidat tlačítko.
Otevřete soubor Default, vyhledejte řádek <link rel="stylesheet" type="text/css" href="Content/dark-theme.css" charset="utf-8" /> v editoru kódu a potom nahradit "tmavý theme" s mé motiv.
V nabídce, zvolte ladění, spustit ladění ke spuštění klienta.
Další kroky
Nyní máte funkční aplikaci mobilního klienta.Chcete-li otestovat v mobilním zařízení, publikujte aplikaci Internet Information Services (IIS) nebo Microsoft Azure.
Viz také
Další zdroje
Obrazovky klienta HTML pro aplikace LightSwitch
Postupy: Nasazení třívrstvé aplikace LightSwitch
Postup: hostování aplikace LightSwitch v systému Microsoft Azure