Windows Store Apps Development – II Windows Store Apps Development – II © 2014 Aptech Limited All rights reserved No part of this book may be reproduced or copied in any form or by any means – graphic, electronic or mechanical, including photocopying, recording, taping, or storing in information retrieval system or sent or transferred without the prior written permission of copyright owner Aptech Limited All trademarks acknowledged APTECH LIMITED Contact E-mail: ov-support@onlinevarsity.com Edition - 2014 Dear Learner, We congratulate you on your decision to pursue an Aptech Worldwide course Aptech Ltd designs its courses using a sound instructional design model – from conceptualization to execution, incorporating the following key aspects: ¾¾ Scanning the user system and needs assessment Needs assessment is carried out to find the educational and training needs of the learner Technology trends are regularly scanned and tracked by core teams at Aptech Ltd TAG* analyzes these on a monthly basis to understand the emerging technology training needs for the Industry An annual Industry Recruitment Profile Survey is conducted during August - October to understand the technologies that Industries would be adapting in the next to years An analysis of these trends & recruitment needs is then carried out to understand the skill requirements for different roles & career opportunities The skill requirements are then mapped with the learner profile (user system) to derive the Learning objectives for the different roles ¾¾ Needs analysis and design of curriculum The Learning objectives are then analyzed and translated into learning tasks Each learning task or activity is analyzed in terms of knowledge, skills and attitudes that are required to perform that task Teachers and domain experts this jointly These are then grouped in clusters to form the subjects to be covered by the curriculum In addition, the society, the teachers, and the industry expect certain knowledge and skills that are related to abilities such as learning-to-learn, thinking, adaptability, problem solving, positive attitude etc These competencies would cover both cognitive and affective domains A precedence diagram for the subjects is drawn where the prerequisites for each subject are graphically illustrated The number of levels in this diagram is determined by the duration of the course in terms of number of semesters etc Using the precedence diagram and the time duration for each subject, the curriculum is organized ¾¾ Design & development of instructional materials The content outlines are developed by including additional topics that are required for the completion of the domain and for the logical development of the competencies identified Evaluation strategy and scheme is developed for the subject The topics are arranged/organized in a meaningful sequence The detailed instructional material – Training aids, Learner material, reference material, project guidelines, etc.- are then developed Rigorous quality checks are conducted at every stage ¾¾ Strategies for delivery of instruction Careful consideration is given for the integral development of abilities like thinking, problem solving, learning-to-learn etc by selecting appropriate instructional strategies (training methodology), instructional activities and instructional materials The area of IT is fast changing and nebulous Hence considerable flexibility is provided in the instructional process by specially including creative activities with group interaction between the students and the trainer The positive aspects of Web based learning –acquiring information, organizing information and acting on the basis of insufficient information are some of the aspects, which are incorporated, in the instructional process ¾¾ Assessment of learning The learning is assessed through different modes – tests, assignments & projects The assessment system is designed to evaluate the level of knowledge & skills as defined by the learning objectives ¾¾ Evaluation of instructional process and instructional materials The instructional process is backed by an elaborate monitoring system to evaluate - on-time delivery, understanding of a subject module, ability of the instructor to impart learning As an integral part of this process, we request you to kindly send us your feedback in the reply prepaid form appended at the end of each module *TAG – Technology & Academics Group comprises of members from Aptech Ltd., professors from reputed Academic Institutions, Senior Managers from Industry, Technical gurus from Software Majors & representatives from regulatory organizations/forums Technology heads of Aptech Ltd meet on a monthly basis to share and evaluate the technology trends The group interfaces with the representatives of the TAG thrice a year to review and validate the technology and academic directions and endeavors of Aptech Ltd Aptech New Products Design Model Key Aspects Scanning the user system and needs assessment Evaluation of Instructional Processes and Material Need Analysis and design of curriculum Design and development of instructional material Assessment of learning Strategies for delivery of instructions Preface Windows Store Apps also known as Metro-styled Apps is a mobile app that runs on Smartphones, tablet, computers, and other mobile devices running Windows or Windows 8.1 Windows Store App is a new application that runs on Windows devices Users can create their own apps using programming language such as C# Apps have one Window that supports multiple views that interact with each other The book, Windows Store Apps Development – II begins with creating a UI with XAML Designer This book introduces the working with tiles, data and files It also allows to connect to networks and Web services It also covers the launching, debugging and publishing Windows Store Apps This book is the result of a concentrated effort of the Design Team, which is continuously striving to bring you the best and the latest in Information Technology The process of design has been a part of the ISO 9001 certification for Aptech-IT Division, Education Support Services As part of Aptech’s quality drive, this team does intensive research and curriculum enrichment to keep it in line with industry trends We will be glad to receive your suggestions Design Team Table of Contents Sessions Creating a UI Using XAML Designer Adding Personality to UI Working with Tiles and Search Working with Data and Files Connecting to Networks and Web Services Managing User Info Launching, Debugging, and Publishing Windows Store App Session Launching, Debugging, and Publishing Windows Store App new Windows.UI.Xaml.Media.Imaging.BitmapImage(); newImageBitmap.SetSource(imageStream); var newElement = new Image(); newElement.Source = imageBitmap; newElement.Height = 100; Thickness elementMargin = new Thickness(); elementMargin.Top = index * 100; element.Margin = elementMargin; FilesCanvas.Children.Add(newElement); } catch (Exception error) { WriteMsgText(error.Message + “\n”); } } // Write a message to MessageBlock on the UI thread private Windows.UI.Core.CoreDispatcher messageDispatcher = Window Current.CoreWindow.Dispatcher; private void WriteMsgText(string message, bool overwrite = false) { messageDispatcher.InvokeAsync(Windows.UI.Core CoreDispatcherPriority.Normal, (s, a) => { if (overwrite) FilesBlock.Text = newMessage; Concepts else FilesBlock.Text += newMessage; }, this, null); } The code snippet is used to display all the images specified in the GetFolderAsync method This method gets a single sub folder from the current folder using the specified folder name V 1.0 © Aptech Limited Session Launching, Debugging, and Publishing Windows Store App The InvokeAsync method executes the specified delegate asynchronously on the thread the Dispatcher is associated with To copy images, code should be added In the MainPage.xaml.cs or MainPage.xaml.vb file, add the following code to the MainPage class Code Snippet 12 demonstrates how to copy images Code Snippet 12: C# async internal void CopyImages(Windows.Storage.StorageFolder newRootFolder) { // Copy images from first folder in root\DCIM var newDCIMFolder = await newRootFolder.GetFolderAsync(“DCIM”); var newFolderList = await newDCIMFolder.GetFoldersAsync(); var newCameraFolder = newFolderList [0]; var newFileList = await newCameraFolder.GetFilesAsync(); try { var newFolderName = “Images “ + DateTime.Now.ToString(“yyyy-MM-dd HHmmss”); Windows.Storage.StorageFolder newImageFolder = await Windows.Storage.KnownFolders.PicturesLibrary CreateFolderAsync(newFolderName); foreach (Windows.Storage.IStorageItem newFfile innewFileList) { CopyImage(newFfile, newImageFolder); } } catch (Exception error) { WriteMsgText(“Failed to copy images.\n” + error.Message + “\n”); } } V 1.0 © Aptech Limited Concepts Session Launching, Debugging, and Publishing Windows Store App async internal void CopyImage(Windows.Storage.IStorageItem newFfile, Windows.Storage.StorageFolder newImageFolder) { try { Windows.Storage.StorageFile storageFile = (Windows.Storage StorageFile) newFfile; await stFile.CopyAsync(newImageFolder, storageFile.Name); WriteMsgText(storageFile.Name + “ copied.\n”); } catch (Exception error) { WriteMsgText(“File copy failed.\n” + error.Message + “\n”); } } In this code, the images are copied from the first folder in the DCIM folder to the new image folder Build and execute the application Press F5 to build and deploy the application in debug mode To run your application, insertion of a camera memory card or any other storage camera device into the machine is necessary From the AutoPlay list of options, choose one of the content event options which you specified in your package.appxmanifest file The camera memory card in the DCIM folder, the sample code displays or copies pictures The camera memory card stores pictures in a PRIVATE\ACHD or AVCHD folder which is required to update the code accordingly In case of unavailability of camera memory card, a flash drive can be used as long as it has a folder named DCIM in the root Concepts 7.1.6 Transferring Data in the Background and Supporting with Background Tasks Windows.Networking.BackgroundTransfer APIs are provided in the Windows Runtime It is used to improve the Windows Store App with advanced upload features and file download that run in the background during App suspension, Operation lifecycle management, and persistence beyond app termination The Background Transfer feature works as follows: ỴỴ The request is configured and initialized using BackgroundDownloader or V 1.0 © Aptech Limited Session Launching, Debugging, and Publishing Windows Store App BackgroundUploader class objects It is used to initiate a transfer of Windows Store App Background Transfer ỴỴ Each transfer operation is managed individually by the system and through an app UI progress information is available for display 7.2 Debugging and Testing A set of testing and debugging tools are included in the Visual Studio which helps to ensure that the Windows Store App is of the highest quality 7.2.1 Debugging and Testing with Visual Studio 2012 Windows Store Apps run on a broad range of devices, and Visual Studio provides you with a number of ways to run and interact with those apps ÎÎ Run Windows Store Apps from Visual Studio F5 is used to make it easy to test apps, profile, and debug during development Figure 7.2 displays the debug mode Figure 7.2: Debug Mode Image Courtesy: msdn.com Debug Windows Store Apps in Visual Studio The Visual Studio debugger controls the execution of a program and also examines its state Debugger can be used to find the cause of defects in Windows Store App Also, it is used to understand exactly how your app works Executing code is displayed by the visual studio when the execution in the debugger gets suspended The change of values of the program can be seen by executing the program one statement at a time V 1.0 © Aptech Limited Concepts ỴỴ Session Launching, Debugging, and Publishing Windows Store App 7.2.2 Debugging DLL Load Failures with the Event Viewer Following steps show using the Event Viewer to debug DLL load failures in Windows Store Apps and desktop Apps: Open Event Viewer Go to Windows Logs and select Application channel View the Level: information and Source: User-loader properties To see error messages: Open Event Viewer Select Show Analytic and Debug Logs from the View menu to enable the analytic log channel Go to Applications and Services Logs, select Microsoft and then, select Windows later then, select User-Loader analytic channel 7.2.3 Using the Windows App Certification Kit Before app get certified and listing in the Windows Store, validate and test it on your system You will learn to install and run the Windows App Certification Kit Following are the prerequisites for developing a Windows app: ÎÎ Windows or Windows 8.1 must be installed ÎÎ Windows App Certification Kit version 3.1 must be installed which appears along with the Windows Software Development Kit (SDK) for Windows 8.1 ỴỴ A valid developer license must be in your computer Note: When the app package is created in Visual Studio, run the Windows App Certification Kit The installation of Windows App Certification Kit version 3.1 or higher version will replace any earlier version of the kit that is installed on the system Concepts 7.3 Packaging the Windows Store App Using Visual Studio, Windows Store can be accessed and Windows Store App can be packaged for distribution Before uploading app to store, it must be packaged and prepared When you create a Windows Store project or item based on a template then, the packaging process gets started When Windows Store App is created, Visual Studio creates a source file for the app package V 1.0 © Aptech Limited Session Launching, Debugging, and Publishing Windows Store App 7.3.1 Optimizing Images for Different Screen Resolutions In different screen resolutions, the logos and splash screen should look properly before publishing the Windows Store App Also it should provide some versions of each image at different sizes to make images fit into app Then, it will reduce the degree to Windows which will stretch or shrink to the graphics ỴỴ Obtaining image files The App logos, Store logo, and splash screen are required in the following sizes shown in table 7.3 Square 70 x 70 Logo Scale Factors For Scale 180 (180%) For Scale 140 (140%) For Scale 100 (100%) For Scale 80 (80%) Square 150 x 150 Logo Scale Factors For Scale 180 (180%) For Scale 140 (140%) For Scale 100 (100%) For Scale 80 (80%) Image Dimensions Image Dimension is 126 x 126px Image Dimension is 98 x 98px Image Dimension is 70 x 70px Image Dimension is 56 x 56px Image Dimensions Image Dimension is 270 x 270px Image Dimension is 210 x 210px Image Dimension is 150 x 150px Image Dimension is 120 x 120px Table 7.3: Image Sizes How to add image files Add the appropriate sizes of image files to the project and then, in the manifest file, it should be identified According to the type of asset, name the files Adding the image files to your project: Open the Windows Store App project To the Assets folder in the project, add the image files To identify the files in the manifest: Open the App Manifest Designer (Package.appxmanifest) from the Solution Explorer and then, choose the Application UI tab For logos and the splash screen, display the settings by selecting All Image Assets from the list of visual assets Specify one in the Short Name text box on your main logo For the main logo, indicate a logical name in the Square 150 x 150 Logo text box and the default value is Assets\Logo.png In the Scaled Assets area of the page, choose the Browse button next to the Scale 80 box, move to the Assets folder, show the file that contains the image that’s scaled to 80%, and then, V 1.0 © Aptech Limited Concepts ỴỴ Session Launching, Debugging, and Publishing Windows Store App choose the Open button Choose the appropriate files by completing the Square 150 x 150 Logo settings and add them to the Scale 100, Scale 140, and Scale 180 boxes Steps 4-6 to be repeated for other dimensional, Store logo, and the splash screen 7.3.2 Localizing the Package Manifest By considering the local name of the display, other identifying features and description that are described in the package manifest file, Windows Store App can be made more attractive to international audiences While localizing a field, set its value to ms-resource: TokenName TokenName identifies a resource in a file that’s located in a language-appropriate folder, as shown in Code Snippet 13 Code Snippet 13: ms-resource:calculator ms-resource:numbers tile.png This code localizes the values of DisplayName and Desc tags Concepts Follow the following steps to create the resource file: Open the Solution Explorer For the project name, open the shortcut menu Choose Add Choose New Item Click Resources file Click Yes In application, type values for each resource, and then, save the file Update Design view by switching to Source view if the resource changes are not displayed, and then, switch back to Design view For additional languages to create resource files, copy the file from Solution Explorer or in Windows Explorer, and then, rename it using name.language.resx or using name.language-culture.resx patterns V 1.0 © Aptech Limited Session Launching, Debugging, and Publishing Windows Store App 7.3.3 Generating the Package Manifest When it generates the manifest for the app package, Visual Studio resides in the following tables: ỴỴ The value of the field is a generated GUID, by default ỴỴ If Windows Store is associated with the app or the Create App Package command is invoked then, sign in with a developer account, from the associated app on the Store, the value of the field is restored ỴỴ If you have invoked the Create App Package command but not signed into the account of Microsoft developer, then from the source manifest, the value of this field is taken 7.3.4 Creating an App Package Through Windows Store or to other local computer app can be distributed Following steps guide you to create an app package by using the Create App Packages wizard: Step 1: Start the wizard On the menu bar, choose ProjectStoreCreate App Packages then, the Create App Packages will be displayed Creating an app package for the Store Select the Yes button To create a developer account, choose Create an account link Select the Next button In the Sign In dialog box, enter the Microsoft account and password, and then choose the Sign In button Then, the wizard Select an app name page appears For local testing and distribution how to create an app package First, choose the No button, and then choose the Next button Wizard’s Select and Configure Packages page appears To publish in the Windows Store, the following procedure is applied: Before choosing the Reserve button, type a name in the Reserve a new app name text box Choose the Next button after selecting the app name for which you want to create this package Wizard’s Select and Configure Packages page appears V 1.0 © Aptech Limited Concepts Step 2: Name the app Session Launching, Debugging, and Publishing Windows Store App Step 3: Select and configure app packages Enter the package files creating location (In the Output location text box) The package can be uploaded from this location Select the Automatically increment check box (recommended) to maintain version automatically To increment the version numbers manually To create and the solution configuration mappings under Select the packages To create a package for each build configuration, select the check box Choose the Solution Configuration for specified each build configuration If any Include public symbol files are present there then, select or clear them This is essential to enable crash analysis for the app check box Create button should be chosen Once this packaging process gets completed, the Package Creation Completed page appears Step 4: Validate app packages Validation of app should be done against devices that you plan to target before it is certified In Windows Store, submit it for certification and listing 7.3.5 Signing an App Package By default, all Visual Studio generated app packages are signed with a test certificate Visual Studio generates a folder when you create a package and includes the signed package itself The public key which is used to sign the package is contained by the certificate (.cer) file that is included in the folder Before the app package is installed, the key must be installed on the system Generating the Test Certificate When the project is created, the certificate file (.pfx) is generated and it is added to your project Concepts The Publisher attribute of the Identity element of the source manifest (.appxmanifest) file is set by the certificate’s Subject field ỴỴ The default value of the Publisher attribute is your user name if you create a local package ÎÎ The Publisher attribute is set to the Publisher ID which is either created by a package for the Windows Store or associates your app with it When you sign in during package creation, it is obtained from your developer account at the Store V 1.0 © Aptech Limited Session Launching, Debugging, and Publishing Windows Store App Code Snippet 14 adds a property to certificate creation to the project file Code Snippet 14: RisingStar_TemporaryKey.pfx The connected path or full path of the source certificate itself is the value of the PackageCertificateKeyFile The values of following properties are set when the Visual Studio creates a certificate ỴỴ The value of the Basic Constraints extension is set to Subject Type=End Entity ỴỴ The value of the Enhanced Key Usage (EKU) extension is set to Code Signing Certification validity gets over for one year from the date when they were created Modifying installed apps If installed package files are modified, launching the app may prevented by signing verification Make the changes in the original source files using a developer license to modify a package, and then redeploy the modified package In the Visual Studio output directory, find the Add-AppDevPackage PowerShell script in the appx file Select Run with PowerShell on the shortcut menu for Add-AppDevPackage.ps1 file Following steps are performed by the script: a Certificate that the script will install, displays information about it On the problem of changing the execution policy, a warning message is displayed on your local machine by the script b Execution policy can be confirmed by entering the following: Enter Y to change the execution policy Enter N, to skip the operation and continue with the next operation Enter S, to pause the existing pipeline and go back to the command prompt Enter the word exit to resume the pipeline c Checks for developer license and if the present license has expired, you are provided to get one d Checks for if any item is missing If items are missing, displays a message to install them V 1.0 © Aptech Limited Concepts 7.3.6 Sharing an App Package Locally Session Launching, Debugging, and Publishing Windows Store App e The presence of any required dependency packages verified by it f Dependency packages and the app package are installed by it Choose the tile which shows the name of the app on the Start screen Then, the app starts 7.3.7 Building an App Package at a Command Prompt Before installing a Windows Store App, on one or more local computers, upload it to the Windows Store Then, build an app package An app package can be built by either opening a Visual Studio command prompt or by using Team Foundation Build Windows Store App can be built at a command prompt and indicate no additional targets or flags Under OutDir, the output appeared in a project-specific folder i.e initially, build an app by opening a Visual Studio command prompt and then, specify the following command line: MSBuild MyProject.csproj /p:OutDir=C:\builds\droplocation\ In the following location, app package and other build output is created as follows: C:\builds\droplocation\MyProject\ By specifying the following the project-specific folder, behavior can be overridden /p:GenerateProjectSpecificOutputFolder=false 7.3.8 Validating an App Package in Automated Builds By validating an app you should make sure that it will pass through the validation tests, which are required by a Windows Store when app is published Integrating Windows ACK validation with Team Foundation Build To make it editable, unload the project file Copy the following PostPackageEvent target, and then near the end of the file, it should be pasted Code Snippet 15 demonstrates the PostPackageEvent Code Snippet 15: Concepts V 1.0 © Aptech Limited Session Launching, Debugging, and Publishing Windows Store App In report, the output file ValidationResult.xml, will be written Make sure that the directory exists before you queue the build, if you specify a static location rather than $(outdir) Also, ensure that before you queue the build again, delete the output file Build should be automated When the build finishes, examine the test results in the ValidationResult.htm file In the last entry of the PostPackageEvent target, the test results appear which is previously pasted into the ValidationResult.htm file 7.3.9 Overriding a Package Manifest The source manifest (.appxmanifest) file is transformed by package build process which is included in the package contents Changes into the manifest can be introduced in this transformation This transformation can be overridden by providing self target manifest file Open the shortcut menu from the Solution Explorer for the project name, choose Add, and then, choose New Item In the Add New Item dialog box, choose XML file, and name the file AppxManifest.xml Rather than in a sub folder, the file should be in the project root Edit the rest of the AppxManifest.xml file to match the requirements of the app Delete the Package.appxmanifest file, or exclude it from the project Concepts V 1.0 © Aptech Limited Session Launching, Debugging, and Publishing Windows Store App 7.4 Check Your Progress Background task can be used to run _ code in the background (A) Heavyweight (C) Short (B) Lengthy (D) Lightweight Registering is necessary to handle the Suspending event in which app is required to save its _ (A) Application data (C) Initial data (B) Registered data (D) App data App should be designed in such a way that, it should get _ and should resume when the user switches back to it (A) Registered (C) Suspended (B) Terminated (D) Stopped As a the chosen app will be activated every time when that type of file is launched (A) Chosen app (C) Windows app (B) Default app (D) Suspended app The app receives activation events for the scheme names, listed in the package manifest (A) URI (C) CRI (B) MRI (D) FRI Concepts V 1.0 © Aptech Limited Session Launching, Debugging, and Publishing Windows Store App D A C B A Concepts 7.4.1 Answers V 1.0 © Aptech Limited Session Launching, Debugging, and Publishing Windows Store App Summary Windows suspends your app in memory when users move your app off-screen and enables another app to have the foreground ỴỴ The system sends the Activated event when the user switches to the Terminated app ỴỴ By releasing exclusive resources and file handles which helps other apps can access them while this app is not using them ỴỴ As a default app, the chosen app will be activated every time when that type of file is launched ỴỴ URI scheme name should be registered to handle all URI launches for that type of URI scheme ỴỴ User connects a device to their computer auto play to provide your application as an option ỴỴ A set of testing and debugging tools are included in the Visual Studio which helps to ensure that the Windows Store App is of the highest quality ỴỴ Using Visual Studio Windows Store can be accessed and Windows Store App can be packaged for distribution Concepts ẻẻ V 1.0 â Aptech Limited ... Preface Windows Store Apps also known as Metro-styled Apps is a mobile app that runs on Smartphones, tablet, computers, and other mobile devices running Windows or Windows 8.1 Windows Store App... Windows devices Users can create their own apps using programming language such as C# Apps have one Window that supports multiple views that interact with each other The book, Windows Store Apps. . .Windows Store Apps Development – II © 2014 Aptech Limited All rights reserved No part of this book may