LightSwitch

HTML Client Tutorial

LightSwitch for Visual Studio 2012 HTML Client Preview

ThenewHTML5andJavaScriptbasedclientisanimportantcompaniontoourSilverlightbaseddesktop clientthataddressestheincreasingneedtobuildtouchorientedbusinessapplicationsthatrunwellon modernmobiledevices. Inthistutorial,wellbuildanapplicationthatconnectstoexistingdataservicesandprovidesatouch first,modernexperienceformobiledevices.Tohelpgroundthetutorial,wevecreatedafictional companyscenariothathasaneedforsuchanapplication.

Contents
TheMoveItApplication................................................................................................................................. 2 ImplementtheMoveItApp .......................................................................................................................... 6 Step1:AddaCompanionHTMLClienttoanExistingApplication ............................................................... 7 Step2:DefineCoreScreensandAppNavigation ......................................................................................... 9 Step3:CustomizetheUIwithCSSandJavaScript......................................................................................15 Step4:TesttheApplicationonaTabletDevice .........................................................................................20 Step5:CreateModalDialogs......................................................................................................................23 Step6:CustomizetheApplicationsTheme ...............................................................................................29 Step7:UsingaDevices BuiltinCameratoShootandUploadPhotos......................................................34 Step8:AddaBingMapCustomControl ....................................................................................................36 Step9:RepublishtheAppandTestiton aTabletDevice ..........................................................................38

Helpful resources
Asyouwalkthroughthistutorial,pleasebearinmindthatthereareusefulresourcesavailabletohelp youshouldyougetstuckorhaveaquestion [thefollowingareexternallinks]: x x LightSwitchHTMLClientforum topostfeedbackandaskquestions,andcheckbackforany correctionstothewalkthroughdocument. HTMLClientResourcesPageontheDeveloperCenter formorelearningresources. 1

The MoveIt Application

MoveItisanapplicationthatsusedbyContosoMovers,Inc totaketheinventoryofcustomers residencespriortomoving.ThedatacollectedviatheapplicationhelpsContosoMovers determinethe resourcesrequiredtomoveaparticularclientsbelongingshowmanytrucks,people,boxes,etc. need tobeallocated.Theapplicationiscomprisedoftwoclientsthatservedistinctbusinessfunctions: 1. Schedulersuseadesktopapplication toservicenewcustomerrequestsandcreate appointments.Thisapplicationisarichdesktopapplicationprimarilygearedtowardsheavy dataentrywiththekeyboardandmouse,sinceSchedulersareonthephonewithcustomersa lotandneedtoenterquiteabitofinformationintothesystemduringthecourseofaday. 2. PlanningSpecialistsuseatabletdevice toquicklytakeinventoryonlocationofeach residenceonthe specialistsschedulefortheday.Takinginventoryinvolvesdetailingeachroom intheresidence,itssizeandentryrequirements(ifany),andlistingitscontents.Picturesare oftentakenofeachroomsothemovershaveapointofreferencewhentheyarrive. Secondarily,PlanningSpecialistsmaymakenotesaboutparkingrestrictionsforthemoveteam (i.e.,wheretheycanparkthetruckduringthemove). ThistutorialwalksthroughbuildingoutthemobileclientusedbyContosoMovers planningspecialists. Beforewedothat,letsrunthroughacompleteversionoftheapplicationthatisalreadypublishedon thisVHDtogetabetterfeelforwhatwellbuild.

Run the Desktop Client for Schedulers

First,letslookattherichdesktopclientusedbySchedulers,sincethatishowmostofthedatainthe systemoriginates.ThedesktopclientcanberunbyenteringthefollowingURLinyourbrowser: http://localhost/ContosoMovingComplete/Client.Ifyoudliketoreachtheapplicationfromanother machine,theURLishttp://<machinename>/ContosoMovingComplete/Client,where<machinename> isthemachinenameyouspecifiedwhentheVHDwasfirstsetup. TheapplicationusesFormsAuthentication.Enterthefollowingcredentialsintheappsloginscreen, and thenchooseLogIn: x x UserName:admin Password:admin!!

Whentheapplicationisfirstlaunched,upcomingappointmentsaredisplayedinthehomescreen.Two keyentrypointsNewCustomer andNewAppointmentareprovidedforenteringthedetailsofa newcustomerandsettingupnewappointments.

ChoosetheNewAppointmentbuttontocreateanewappointment.TheCreateNewAppointment screenisusedtocaptureinformationaboutthe appointmentsuchaspreferreddate/time,address,and contactinformation.Typically,acustomerwillprovideenoughinformationoverthephonetocreatea roughprofileaboutthemove;forexample,isthemoveforaresidentialhome,apartment,oroffice building,theroomsinvolvedinthemove,andanyspecialinstructionsorquestionsthatthePlanning Specialistshouldfollowupwiththecustomerabout. Feelfreetoaddseveralofyourownappointmentsinthesystem,aswellasexploreotherscreens accessiblefromthemenubar.

Run the Mobile Client for Planning Specialists

TheVHDalsocontainsaprebuiltversionofthemobileclientthatPlanningSpecialistsuse thisisthe clientwellprimarilyfocusonthroughoutthistutorial.Youcanruntheprebuiltmobileclientby openingupabrowsertohttp://localhost/ContosoMovingComplete/MobileClient/.Ifaccessingthesite fromamobiledevice,substitute<machinename>forlocalhost.Note: Ifyourunintoproblemsloading themobileclientfromMetroInternetExplorer,youmayneedtoconfigureIEsIntranetsettings refer totheGettingStartedguidefortheLightSwitchHTMLClientPreviewVHD. Theapprequiresausernameandpassword.Youmayuseanyofthefollowing: Username ACarothers Dcarreras RCarroll JCastellucio Password pass@word1 pass@word1 pass@word1 pass@word1

Ifyoudontgetpromptedforlogincredentials,yourbrowsermaybecachingyourpreviouslogin tothe Silverlightclient.Ifso,pleasebesuretocloseallofyourbrowserwindows,and/orclearthecacheif necessary. 4

Onlaunchingthisclient,youllimmediatelynoticethattheexperienceispersonalizedonlythelogged inPlanningSpecialistsappointmentsaredisplayedandtheUIstyleisoptimizedfornavigatingthe applicationwithyourfinger.Also,verylittlechromeisdisplayedinorderforthecontenttobethe primaryfocuswithintheapplication.

TappinganappointmenttilewillopentheAppointmentDetails screen.Thisscreenisthenucleusofthe applicationitswhereInventorySpecialistswillspendmostoftheirtime.Assuch,thescreenhasbeen constructedtofacilitatethemostcommontasks:viewthecustomerinformationandtakinginventory. Youcanalwaysnavigatebacktothepreviousscreenbytappingthe<glyphtotheleftofthescreentitle, orbysimplyusingthebrowsersbacknavigationbutton.

Editingcustomerinformationisalsoaninfrequentbutnecessarytask.TappingtheEdit buttoninthe Summary sectiondisplaysamodaldialogwherethePlanningSpecialistcanmodifycustomer information. 5

Implement the MoveIt App

Nowthatweveseentheappinaction,letsbuildourownversion.Topicswellcoverthroughoutthe restofthetutorialarebrokeninto2mainparts: Part1: Step1:AddaCompanionHTMLClienttoanExistingApplication Step2:DefineCoreScreensandAppNavigation Step3:CustomizetheUIwithCSSandJavaScript Step4:TesttheApplicationonaTabletDevice Part2: Step5:CreateModalDialogs Step6:CustomizetheApplicationsTheme Step7:UsingaDevicesBuiltinCameratoShootandUploadPhotos Step8:AddaBingMapCustomControl Step9:RepublishtheAppandTestitonaTabletDevice

Letsgetstarted! 6

Step 1: Add a Companion HTML Client to an Existing Application

1. OpentheprojectlocatedatC:\Content\ContosoMovingStart ontheVHD.Ifwelookat SolutionExplorer weseethattheprojectalreadycontainsthecoredataservicelogicofthe application(locatedundertheServer node).TheSilverlightdesktopclientusedbyMoveIt Schedulershasalreadybeenbuilt(locatedundertheClient node),andthereisnomobileclient yet. PressF5toruntheSilverlightdesktopclientindebugmode.

2. NowletsaddanewHTMLclienttotheproject. Exitdebugmode,andinSolutionExplorer opentheshortcutmenufortheContosoMoving rootnodeandchooseAddClient.

3. IntheAddClient dialog,enterauniquename,forexampleMobileClient.

Note: IfadialogboxpopsupandpromptsyoutogetaDeveloperLicenseforWindows8, chooseCancel youdontneeditforthistutorial.

AfterchoosingOK intheAddClient dialogbox,thenewclientappearsinSolutionExplorer and isautomaticallydesignatedtobethestartupclient.Thestartupclientsettingsimplyspecifies whichclientlauncheswhenyoupressF5;thiscanbechangedatanytimebyopeningthe shortcutmenuforaclientnodeinSolutionExplorer andchoosingSetasStartupClient.

Step 2: Define Core Screens and App Navigation

Nowletsaddsomescreensforournewmobileclient.ForthosewhohaveusedLightSwitchbefore,the nextsetofstepsshouldfeelveryfamiliar.

Create the Home Screen

Letsmakeourhomescreendisplayalistofupcomingappointmentsforthecurrentlyloggedinuser. 4. InSolutionExplorer,opentheshortcutmenufortheMobileClient nodeandchooseAdd Screen. TheAddNewScreen dialogboxopens. 5. IntheAddNewScreen dialogbox,specifythefollowing: x ScreenTemplate:BrowseDataScreen x ScreenName:Home x ScreenData:UpcomingAppointments (thisqueryisalreadydefinedaspartofthe Serverproject itfiltersforupcomingappointmentsbasedonthecurrentlyloggedin user).

6. LetsmakesomesimplemodificationstohoweachAppointmentisdisplayedinthelist. a. First,changetheAppointment itemscontroltouseRowsLayout.

b. Secondly,letsopttodisplayonlytheStartDate andCustomer foreachappointment itembydeletingtheotherfields.ScreenDesignershouldnowlooklikethefollowing:

10

7. PressF5 toruntheapplication.Thedefaultbrowserwilllaunchandthehomescreenofthe MobileClientwilllooksomethinglikethescreenshotbelow.Thedateformattingisntideal,but thiswilldofornow lateron,wewillfurthercustomizethehomescreen. 8. Exitthedebugsessionbyclosingthebrowser.

11

Create the Appointment Details Screen Theappointmentdetailscreenisthenucleusoftheapplicationitswheretheinventoryspecialists will spendmostoftheirtime. 9. Addanewscreenwiththefollowingsettings: x ScreenTemplate:ViewDetailsScreen x ScreenName:ViewAppointmentDetail x ScreenData:Appointment.Also,selectthecheckboxestoincludeallrelateddata.

LookingattheScreenContenttree,youllnoticethatseveraltoplevelscreensectionshave beencreatedbydefaulttobettersegmentrelateddata.Layoutcaneasilybecustomized,but wellstickwiththedefaultsfornow.

Wire up Screen Navigation

Nowallweneedtodoiswireupourtwoscreenssuchthattheapplicationnavigatestothe ViewAppointmentDetailscreenwhenanappointmentistappedintheHome screen. 10. InSolutionExplorer,opentheHome screen. 11. IntheScreenContenttree,choosetheUpcomingAppointments Listcontrol. 12. InthePropertieswindow,choosetheActions,Item Tap hyperlinktoconfigurewhathappens whenalistitemistapped theEditItemTapActiondialog boxwillappear.

12

13. IntheEditItemTapAction dialogbox,configurethetapactionasfollows:

ThisstatesthatwellnavigatetotheViewAppointmentDetailscreenwhenalistitemistapped. BecausetheViewAppointmentDetail screenwascreatedusingtheViewDetails screen template,ascreenparameternamedAppointment wasautomaticallydefinedtoallowusto passtheappointmentwewanttoviewinthat screen.Anyotherscreenparameterswouldalso beconfigurablehere. 14. LetshitF5andruntheapplication!YoullnowseethateachAppointmentnowhasaglyph indicatingthatyoucannavigatetoanotherscreen.

13

14

15. TapanappointmenttoopenitsAppointmentDetails screen.

Step 3: Customize the UI with CSS and JavaScript

UpuntilnowwevemostlykeptdefaultUIandwehaveafunctionalapp,buttheUIcandefinitelybe improved.Letsstartaddressingsomeofthoseimprovementsheretolearnhowyourknowledgeof HTML,CSS,andJavaScriptcanbeappliedtocustomizeandextendyourapplicationsUI.

Tile Layout using CSS

AppointmentsintheHomescreencurrentlystretchoutacrossthepage.Thismaybeokfornarrow displays,butitsaveryinefficientuseofscreenrealestateifthescreeniswider(forexample,considera tabletdeviceinlandscapemode). Acommonvisualizationforlistsistouseatilebasedlayoutaswesawinthecompletedapp.Itturns outthisiseasytodowithcustomCSS,whichwellnowincorporateintoourHomescreen. 16. Adda.cssfiletotheMobileClient project: 15

a. SwitchfromLogicalView toFileView usingtheSolutionExplorer commandbar.

b. ExpandtheMobileClient project,opentheshortcutmenufortheContent folderand chooseAdd,ExistingItem. c. NavigatetotheC:\Content\Resourcesfolder,choosethefilenamedtilelist.css,and thenchooseAdd.Thetilelist.cssfileisaddedtotheContent folder. d. Ifyouopentilelist.cssyoullnoticethatitcontainsastraightforwarddefinitionofaCSS class.

ul.tilelist { width:100%; padding:10px; display:inlineblock !important; } ul.tilelist li { liststyletype:none; margin:6px; width:300px; height:100px; float:left !important; }

17. Includethenewlyadded.cssfileindefault.htm. e. Openthedefault.htm file intheMobileClient project. f. Insertthefollowingstatementjustafterthelast<link/> tag.

<link rel="stylesheet" type="text/css" href="Content/tilelist.css" charset="utf8" />

18. CustomizetheListcontrolintheHome screentoprogrammaticallyaddthetilelistCSSclassinits postRender() event.ThepostRender eventisausefulAPIentrypointbecauseitallowsyouto customizeascreenelementsHTMLusingstandardJavaScriptandjQuerysyntax. g. SwitchbacktoLogicalView andopentheHome screen. h. IntheScreenDesigner,selecttheUpcomingAppointments listcontrol.

16

i.

ChoosetheWriteCodedropdown listlocatedatthetoprightoftheScreenDesigner window,andchooseAppointment_postRender.ThiswillopentheJavaScriptcode editor.

ThegeneratedAppointment_postRender() functionstubhastwoparameters: element,whichrepresentstheHTMLdivelementofthescreenitem; contentItem,whichrepresentstheactualscreensdataobject. j. Insertthefollowinglineofcodeinthefunction.ThisisstandardjQuerysyntaxthat looksuptheunorderedlist(ul)containedwiththeelement,andaddsthetilelistCSS classtoit.

lightSwitchApplication.Home.prototype.Appointment_postRender=function (element,contentItem){ $(element).find('ul').addClass("tilelist"); };

19. PressF5 thehomescreennowdisplaysupcomingappointmentsinatilebasedlayout.Try narrowingandwideningthewidthofthebrowserwindow noticehowthelayoutofthetiles dynamicallyadjuststomakegooduseofavailablehorizontalspace.Thisgivesusanideaofhow thelistlayoutwouldchangebasedonorientationofthemobiledevice,orhowthescreenwould berenderedonsmallorlargedevices.

17

Custom Formatting using Existing JavaScript Libraries

TheAppointmentitemsmakebetteruseofscreenrealestate,butthecontentwithineachtileclearly canbeimproved.Letsdotwothings:formattheappointmentdate/timetobemorelegible,and includethecustomersnameandphonenumber. Wecancustomizehoweachlistitemisrenderedbydefiningacustomcontrolforthelistitem. 20. ExitthedebugsessionandopentheHome screen. 21. SelecttheAppointment item,andchangeitscontrolfromRowsLayout toCustomControl.

22. ChoosetheWriteCodedropdown listandchooseRowTemplate_render.Thiswillopenthe JavaScriptcodeeditor.

18

23. InsertthefollowingcodeintheRowTemplate_render function.Again,thecodeinthisexample isstandardJavaScript itdefinesHTMLcontentandaddsittoanappointmentsdivelement.In thisfunction,contentItemrepresentstheAppointmentdataitem,sowecanrefertothe appointmentsStartDate andFirstName fieldsbycontentItem.value.startDate and contentItem.value.firstName respectively. IMPORTANT: NotethecamelCasingforthesefields JavaScriptiscasesensitivesoits importanttokeepthecasingexactlyasprovidedintheexamplebelow.
lightSwitchApplication.Home.prototype.RowTemplate_render=function (element, contentItem){ var itemTemplate=$("<div></div>"); var title=$("<h3>" +moment(contentItem.value.startDate).format("ddd,MMMDo, 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)); };

Weneedtodoonemorestep therearemanyJavaScriptlibrariesavailableonthewebthat helpparseandformatdates.ThecodeabovethatformatstheappointmentsstartDate usesa JavaScriptlibrarycalledMoment.jsthatwellneedtoincludeinourproject.Anyoftheavailable JavaScriptdatelibrariescouldbeusedforthisexample,butletsuseMoment.jsasitwillgiveus theopportunitytousetheNuGetmanagementfeaturesinsideVisualStudio2012. 24. InSolutionExplorer,switchtoFile View,opentheshortcutmenufortheMobileClient project andselectManageNuGetPackages. 25. IntheManageNuGetPackagesdialogbox,dothefollowing: a. ChoosetheOnline category(onthetopleft). b. Entermoment.jsintheSearchtextbox(topright).Searchresultswilldisplaythe NuGetpackageforMoment.js. c. ChoosetheInstall buttonforMoment.js.

19

26. Indefault.htm,referencemoment.jsusingthescripttag(youcaninsertitasthelastofthe scriptreferencetags).

<script type="text/javascript" src="Scripts/moment.js" charset="utf8"></script>

27. HitF5toruntheapp!

HopefullyyouwillhaveobservedintheseexampleshowstandardHTML,JavaScript,andCSS forwhich thereisavibrantcommunityprovidingmanyresources canbeusedtoeasilyextendLightSwitchUI.

Step 4: Test the Application on a Tablet Device

Sofarwehaveruntheapplicationindebugmodeandseenitinthedesktopbrowser.Itdbeniceto publishtheapplicationandreachitfromamobiledevicesbrowsersincethatswhatitsdesignedtobe usedon. 20

TheVHDcomespreconfiguredwithIIS8andSQLExpress,sowehaveeverythingweneedtopublishthe applicationtothelocalserverontheVHD aslongasyourmobiledeviceisconnectedtothesame networkyouwillbeableto runtheappfromyourdevice. 28. Beforepublishing,youmustexitandreopenVisualStudio2012asanadministrator.Fromthe WindowsStartscreen,rightclickontheVisualStudio2012tile,andselectRunasadministrator. 29. OnceyouhavestartedVisualStudio2012asanadministrator,loadtheLightSwitchprojectyou justcreatedbyselectingitfromtheRecent menusectionontheleft. 30. Onthemenubar,chooseBuild,ConfigurationManager.

31. IntheActivesolutionconfiguration dropdown,chooseRelease,andthenchoosetheClose button.

21

32. InSolutionExplorer,opentheshortcutmenufortheLightSwitchprojectsrootnodeand choosePublish. 33. IntheLightSwitchPublishApplicationWizard,setthefollowingvalues: a. ApplicationType:Web b. ApplicationServerConfiguration:keepdefaults. c. PublishOutput: i. ChooseRemotelypublishtoaservernow ii. ServiceURL:http://localhost iii. Site/Application:DefaultWebSite/ContosoMoving iv. Sinceyouarepublishingtolocalhost,theusernameandpasswordis unnecessary. Ifyouseeayellowexclamationmarknexttothegrayedout usernametextbox,youmaysafelyignoreit.

d. SecuritySettings:SetRequireSecureConnection(HTTPS) toOff. e. DatabaseConnections:Choosetheellipsis() buttonnexttotheSpecifytheuser connection textbox.IntheConnectionProperties dialogbox,specify: i. Servername:.\SQLExpress Notethedot(.)beforethebacklash. ii. UseSQLServerAuth: x Username:sa 22

x Password:passw)rd iii. Enteradatabasename:ChoosetheContosoMoving databasefromthe dropdownlist.Thisdatabaseisalreadyprepopulatedwithusers and appointments,soitwillsaveyoualotoftimetousethisoneratherthan creatinganewone. iv. ChoosetheOK button. v. InthewizardsDatabaseConnections page,makesurePublishdatabase schema ischecked,andthencopytheconnectionstringfromSpecifytheuser connection totheSpecifyadministratorconnection textbox,andthechoose theNext button. f. Authentication: Sincetheexistingdatabaseisalreadyprepopulatedwithdataand usersSelect No,anApplicationAdminstrator alreadyexists.(Theprepublishedadmin accountisusernameadmin,passwordadmin!!) g. SpecifyaCertificate:MakesuretheSpecifyacertificate checkbox isunchecked. h. Choose thePublish button. 34. Afterpublishsucceeds,theHTMLmobileclient willbeavailableattheURL: http://<machine name>/ContosoMoving/MobileClient,where<machinename> isthemachinenameyou specifiedwhentheVHDwasfirstset up.Youshouldbeabletoaccessitfromanysupported browseronyourPC(includingtheMetroIE10),andfromanysupportedmobiledevice, providedthatitisonthesamenetwork. a. Whenpromptedforlogincredentials,youcanuseanyofthefollowingusernameand passwordcombinationsintheapplicationssampleEmployeedata: Username ACarothers Dcarreras RCarroll JCastellucio Password pass@word1 pass@word1 pass@word1 pass@word1

b. Note:Tologoutandloginasanotheruser,besuretocloseallof yourbrowsers windows.Ifnecessary,youmayneedtoclearyourbrowserscache.

Step 5: Create Modal Dialogs

LetsnowdirectourattentiontotheViewAppointmentDetails screen,wherePlanningSpecialists spendmostoftheirtime.Becausereceptionistsoccasionallytranscribecustomerinformation incorrectly,PlanningSpecialistsoftenverifycontactinformationwhentheymeetacustomerandupdate itasneeded.Welladdsupporttodothisbydefiningasimpleeditdialog. 35. OpentheViewAppointment Details screen. 36. LetsbeginbycleaninguptheUIinthemainDetails section(welllateraddmorecontextual datainthescreentitle,sothisallowsustosimplifytheDetails section):

23

a. Removethesefields:StartDate,EndDate,Notes,MoveType,Employee (sinceits alwaysthecurrentuserinthisapplication),Customer, andSummary. b. SelecttheTabs node,andthenchooseAddTab. c. IntheProperties window,changetheName toNotes. d. IntheAdd dropdownfortheNotes tab,chooseOtherScreenData. e. IntheAddScreenData dialogbox,enterAppointment.Notes,andthenchooseOK. f. ChangethecontrolforNotes tobeaTextArea.Thiswillmakeitaneditablefieldby default. g. IntheDetails section,addtheCustomersphonenumberandemail: i. ChooseOtherScreenData fromtheAdd dropdown.

ii. Typeinthenameofthefieldtoadd:Customer.Phone.

iii. Repeatwith Customer.Email.

24

TheScreenContenttreeshouldnowlooksomethinglikethis:

h. Bonuspoints:Tomakebetteruseofscreenspace,breakthedataintotwocolumnsby usingtheColumnsLayout control.Also,turnoffattachedlabelsforfieldsbyselecting therootColumnsLayout (calledGroup inthescreenshotbelow)andsettingitsLabel Position propertytoCollapsed.

Nowitstimetocreateourmodaldialog.YoumayhavenoticedtheDialogs nodeinScreenDesigner asitsnameimplies,modaldialogsaredefinedwithinthissection.UIdefineddisplayswithinpopup visualswheninvoked,butdialogsalsohaveautomaticdatabindingwithOKandCancelbehaviorbuilt in. 25

37. UndertheDialogs node,addadialog,andnameitEditContactInformation. a. GesturetoaddOtherScreenData,andenterinAppointment.Customer.FirstNamein theresultingdialog.

b. Repeat theabove withAppointment.Customer.LastName. c. RepeattheabovewithAppointment.Customer.Phone and Appointment.Customer.Email,settingthetypesofthosefieldstoPhoneNumberEditor and EmailAddressEditor,respectively.

d. Add Street, City, State,and PostalCode bydraggingthemfromthe Appointment sidebarintothedialog,orbyaddingthemasabove.Theresultingdialogshouldlook likethis: 26

Nowthatwehaveadialog,letsaddabuttonthatinvokesthedialog. 38. AddaNewButton intheDetails section.

39. ConfiguretheAddButton dialogasfollows;thisconfigurationshowstheShowDialog method referencingtheEditContactInformation dialogwejustdefined.

27

40. IntheProperties window,namethebuttonEdit. 41. PressF5andruntheapplication.IntheAppointmentDetail screen,taptheEdit buttonto invokethedialog notehowOKandCancelbehaviorisprovidedasabuiltincapability.

Update the Appointment Screen to have a Dynamic Screen Title

LetsplacecontextualinformationinthescreentitlesinceweremovedtheStartDate andCustomer Name fieldsfromtheDetails tab. 42. 43. 44. 45. OpentheViewAppointmentDetail screen. ChoosetheDetails tabintheScreenContenttree. OpentheWriteCode menuandchooseDetails_postRender. Addthecodebelow:

lightSwitchApplication.ViewAppointmentDetail.prototype.Details_postRender=function (element,contentItem){ msls.bind(contentItem,"value.customer.firstName",function (){ formatAppointmentScreenTitle(contentItem); }); msls.bind(contentItem,"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"); }; };

ThisexamplemakesuseofaLightSwitchAPIhelperwehaventseenbefore:msls.bind(). ThisAPI providesa simple,yetpowerful,meanstodatabindscreencontenttofunctions.Inthecodesample above,thismeansthatwheneverthedataforfirstName orlastName changes,thefunction formatAppointmentScreenTitle() willbereevaluated,therebyupdatingthescreentitle. 28

WecanseethisinactionifweruntheappandchangethecustomersnameintheEditAppointment dialog noticehowthescreentitleupdates dynamically.

Step 6: Customize the Applications Theme

Add an icon in the header
Onewaytocustomize yourapplicationistointroduceacustomiconintheheader:

46. IntheSolutionExplorer,switchtoFileView.UndertheMobileClient node,expandtheContent andImages nodes.Youwillseeandefault logo.pngfile.

47. Deletelogo.png. 48. OpentheshortcutmenufortheImages folderandchooseAdd, ExistingItem.Navigatetothe c:\Content\Resourcesfolderandchooselogo.png.Note: YoumaychooseanyotherPNGfileto serveasalogo,butyouwillneedtorenameittologo.pngonceyouaddittotheproject.

Switch between Dark and Light themes

Outofthebox,LightSwitchcomeswithtwothemes:adark (default)andalight theme.Toswitch betweenthethemes: 49. IntheSolutionExplorer,switchtoFileView.UndertheMobileClient node,opendefault.htm. 29

50. Aroundline26,youwillfindthefollowingline:
<link rel="stylesheet" type="text/css" href="Content/msls.theme.dark.css" />

51. Toswitchbetweenthedarkandlightthemes,simplysubstitutedark orlight intothehref portionoftheline:href="Content/msls.theme.___.css".

Integrate ThemeRoller themes

TheappearanceofaLightSwitchMobileappcanbecustomizedviaThemeRollerforJQueryMobile. SomeaspectsofThemeRollermightnotintegratequiteperfectlyyet,butrestassuredthatthiswillbe addressedinafuturerelease. 52. LaunchThemeRollerbynavigatingtohttp://jquerymobile.com/themeroller/. Youwillbepresentedwithataskpaneontheleft,andalivepreviewofaJQueryMobileapp on theright. 53. ModifytheThemeRollersettingstosuityourneeds.Notethatthesidebarontheleftcontains severaltabs;thesettingsyouwillwanttomodifywillbeunderGlobal andSwatchA.Allother swatchesandtheirrespectivepreviewswillbeignored(andshouldprobablybedeleted,forthe sakeofkeepingdowntheCSSsize).

30

a. Notethatforsomesettings,youcanjustdragcolorsfromthetopbartotheapplication elements.Forothersettings(e.g.,fontcolor),youwillneedtoopenuptherespective settingsinthetaskpane. b. Tip:Ifyouwanttouseaprebuiltthemeratherthancreatingyourown,clickImport andthenchooseImportDefaultTheme atthetopofthewindow.Thiswillpopulate5 swatches.Chooseanythatyoulikeanddeletetherest,sothatyourchosenswatch becomesSwatchA.

54. Onceyouredonecustomizingtheappearanceofyourtheme,clickDownload.SpecifyaTheme Name (forexample,customtheme),andclickDownloadZip.

31

55. Downloadthezipfiletoatemporarylocation andunzipit.Intheresultingfolder,navigateto thethemes folderwithin. 56. BackinVisualStudio,opentheSolutionExplorertoFileView,andnavigatetotheMobileClient project.Open theshortcutmenufor theContentfolder andchoose Add, ExistingItem,and thenchoosethe <themename>.css fileinthethemes folderinsidetheunzippedthemefolder.

57. WhilestillinFileView,opendefault.htm fromtherootoftheHTMLclient. a. Movethelinewiththebasetheme(msls.theme.dark.cssor msls.theme.light.css)just below thestartofthelinkssection.Thatis,itshouldnowbepositionedrightbelowthe Content/jquery.mobile1.0.css reference. Seeimagebelow(wherebytheredline arrowrepresentsthemove).

32

b. AddareferencetoyourThemeRollercustomthemeimmediatelybelowthenewly repositionedbasetheme reference(customthemeoutlinedingreenintheimage above):

<link rel="stylesheet" type="text/css" href="Content/customtheme.css" charset="text/css" />

c. Notethatsomesettings,likethecoloroflistitemsandsomeoftheheaders,are determinedbythebasethemeratherthanThemeRoller.Therefore,thechoiceofthe darkversus lightthemewillprobablystillberelevantforyou. 58. Press F5; theappshouldincludeyournewstyle.Pleasebewarethattherearesomeknown issues withthemes,and wereworkinghardtoresolvethembythenextrelease.

59. If,havingcreatedtheThemeRollerfile,youwanttomodifyit: a. OpentheThemeRollerwebsiteandclickImport atthetopofthewindow.Copypaste thecontentsofyourcurrentcustomthemeandclickImport. b. Whenyouaredonemakingchanges,pressDownload,unzipthefile,navigatetothe themes folder,andopenyour<themename>.css file.Copypastethecontentsofthat updatedfileintoyourformerthemefile.

33

c. Undersomecircumstances(e.g.,whenyoureplacethethemefileratherthanits contents),thebrowsermightbeusingacachedCSSandnotloadingyournewchanges. Ifthisisthecase,andyouarenotseeingthechangesthatyoudjustmade,besureto clearyourbrowserscache.

Add an application title

ThedefaulttitleforaLightSwitchHTMLclientisinitiallyblank whichmeansthatbrowserswilltypically renderthenameoftheserverorthewebaddressasthetitle(typically shownnexttothetabthat representsthepage).Tocustomizeit: 60. IntheSolutionExplorer,switchtoFileView.UndertheMobileClient node,opendefault.htm. 61. Modify<title></title> nearthetopofthefiletoincludeatitleforyourapp.Forexample, <title>MoveIt</title>.

Step 7: Using a Devices Built-in Camera to Shoot and Upload Photos

Letsgiveplanningspecialiststheoptiontouseusetheirmobiledevicetouploadpicturesofthehome. Theintentisthattheinventoryspecialistwilltakeapicturewiththedevice,saveitlocally,andthen uploaditviatheMoveItapp. NOTE: DuetoApplespolicyofdisablingthefileuploadbrowsebutton,uploadingviaiOSs Safaribrowserisnotsupportedatthistime. 62. OpenSolutionExplorerandswitchtoFileView,andthenchoosetheMobileClient,Scripts folder. 63. OpentheshortcutmenufortheScripts folderandchooseAdd,Existing Item. 64. Fromwithinthedialog,navigatetoC:\Content\Resources,andselecttoaddthefollowingtwo file: a. imageuploader.js b. imageuploaderbase64encoder.aspx 65. Opendefault.htm toaddareferencetoimageuploader.js (theaspxpagedoesnotneeda reference).Thescriptreferenceshouldgoattheendofthescriptreferencesblock. 34

<scripttype="text/javascript"src="Scripts/Generated/usercode.js"></script> <script type="text/javascript" src="Scripts/imageuploader.js" charset="utf 8"></script>

66. SwitchbacktoLogicalView andopen theViewAppointmentDetail screen.IntheScreen Designer,selecttheAppointmentPhotos tab.

67. ChangetheAppointmentPhoto summaryfieldtoaRowsLayout.

68. ChoosetheDialogs node,andthenchooseAddDialog.NamethedialogImageUploader. 69. FromtheleftScreenDesignerpane,dragtheSelectedItemnodeof AppointmentPhotos into thenewdialog.DeletetheAppointment item.

70. SelectthenewlyaddedSelectedItemnode,andintheProperties windowchooseHeight.Clear theStretchtoContainer checkbox. 71. SwitchthedialogsPicturefieldfroman Image toaCustomControl.IntheProperties window, choosetheEditRenderCodehyperlinkandaddthefollowingcode:
createImageUploader(element,contentItem,"maxwidth:300px;maxheight:300px");

Thecallredirectsalloftheheavyliftingtotheimageuploader.jsfile.Thecustomizablestyling statement("maxwidth:300px;maxheight:300px")specifiestheimagepreviewsize. 72. IntheScreenDesigner,choosetheAppointmentPhotos sectionandthenchooseAdd,New Button.IntheAddButton dialogbox,choosetheAppointmentPhotos.AddAndEditNew method,andImageUploader astheNavigateTodesignation.

35

73. Oncethebuttoniscreated,dragitabovetheAppointmentPhotos list. 74. PressF5toruntheapp.SelectanappointmentandswitchtotheAppointmentPhotos tab. ClickAddAppointmentPhoto andsee theimageuploaderinaction.

Step 8: Add a Bing Map Custom Control

NowletsmodifytheViewAppointmentDetail screentodisplayamapforthecurrentappointments address.Weneedtobeginbyaddingsomefilestoourproject,andreferencingthemfromthe default.htmfile. 75. InSolutionExplorer,switch to File View andchoosetheScripts folderoftheMobileClient project. 76. OpentheshortcutmenufortheScripts folderandchooseAdd,ExistingItem. 77. NavigatetotheC:\Content\Resourcesfolderandaddlightswitch.bingmaps.js. 78. Openthedefault.htm fileandaddscriptreferencesforthelightswitch.bingmaps.js file,anda CDNreferencetotheBingMapscontrol(takenoteofthewherethefilereferenceswereadded inthecodebelowbecauseordermatters):
<linkrel="stylesheet"type="text/css"href="Content/msls.theme.font.css"/> <linkrel="stylesheet"type="text/css"href="Content/msls.theme.dark.css"/> <script type="text/javascript" charset="utf8" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script> <scripttype="text/javascript"src="Scripts/winjS/winjs1.0.RC.js"></script> <scripttype="text/javascript"src="Scripts/JQuery/jquery1.6.4.js" charset="utf8"></script>

36

<scripttype="text/javascript"src="Scripts/JQuery/jquery.mobile1.0.js" charset="utf8"></script> <scripttype="text/javascript"src="Scripts/JQuery/datajs1.0.0.js" charset="utf8"></script> <scripttype="text/javascript"src="Content/Resources/msls.prerequisite.resources.js"></script> <scripttype="text/javascript" src="Content/Resources/msls.defaultprerequisite.resources.js"></script> <scripttype="text/javascript"src="Scripts/msls1.0.0.js"></script> <script type="text/javascript" src="Scripts/lightswitch.bingmaps.js" charset="utf8"></script> <scripttype="text/javascript"src="Scripts/Generated/data.js"></script>

79. OpentheViewAppointmentDetail screeninthedesigner. 80. IntheDetails section,clickAddTab aftertheRooms tab,andnameitMap,andthenchoose Add,NewCustomControl. 81. IntheAddCustomControl dialogbox,specifyAppointment asthedataforthecustomcontrol.

82. UsetheWriteCode menutoedittheAppointment_render logicforthecontrol. 83. Addthefollowingutilitymethods abovetherenderfunction:

var mapLastUpdated; var mapControl; function rebindMap(element,contentItem){ //Checktomakesurewearen'tupdatingthemapcontinuouslyduetomultipleboundvalues 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"); //Ifwe'vepreviouslycreatedthemap,makesuretocleanupthedivitwascontainedin; //otherwisethebingmapcontrolfailstocreateproperly. if (mapDiv.length>0){ $(mapDiv).remove(); } mapDiv=$("<divid='appointmentMap'class='mslshautomslsvauto'></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" }); };

84. Nowbindthemapcontroltheaddressfieldsontheappointmentbyaddingthecodeto the Appointment_render method: 37

lightSwitchApplication.ViewAppointmentDetail.prototype.Appointment_render=function (element, contentItem){ updateMap(element,contentItem); mapLastUpdated=new Date(); msls.bind(contentItem,"value.street",function (){rebindMap(element,contentItem);}); msls.bind(contentItem,"value.city",function (){rebindMap(element,contentItem);}); msls.bind(contentItem,"value.zip",function (){rebindMap(element,contentItem);}); msls.bind(contentItem,"value.postalCode",function (){rebindMap(element,contentItem);}); };

85. PressF5.Aftertheapplicationloads,taponanappointment,andthentaptheMap section.

Step 9: Republish the App and Test it on a Tablet Device

86. Beforerepublishing,ifyouarenotalreadyrunningVisualStudioasanadmin,exitandreopen VisualStudio2012asanadministrator.ThisisdonebyrightclickingontheVisualStudio2012 tileintheWindowsstartscreen,andselectingRunasadministrator. 87. InSolutionExplorer,opentheshortcutmenufortheContosoMoving projectandchoose Publish. 88. Thepublishwizardremembersyourexistingconfigurationandautomaticallyshowsthe Summarypage.ChoosethePublish button.Asbefore,theMobileClient appwillbeavailableat theURL: http://<machinename>/ContosoMoving/MobileClient/.

38

39