MICROSOFT_PRESS_EBOOK_PROGRAMMING_WINDOWS_8_APPS_WITH_HTML_CSS_AND_JAVASCRIPT_PDF

within the app

within the app container. For example, trying to create a jQuery datepicker widget ($("myCalendar").datepicker()) will hurl out this kind of error. You can get around this on the app level by wrapping the code above with MSApp.execUnsafeLocalFunction, but that doesn’t solve injections coming from deeper inside the library. In the jQuery example given here, the control can be created but clicking a date in that control generates another error. In short, you’re free to use third-party libraries so long as you’re aware that they were generally written with assumptions that don’t always apply within the app container. Over time, of course, fully Windows 8–compatible versions of such libraries will emerge. Here My Am! with ms-appdata OK! Having endured seven pages of esoterica, let’s play with some real code and return to the Here My Am! app we wrote in Chapter 2. Here My Am! used the convenient URL.createObjectURL method to display a picture taken through the camera capture UI in an img element: captureUI.captureFileAsync(Windows.Media.Capture.CameraCaptureUIMode.photo) .done(function (capturedFile) { if (capturedFile) { that.src = URL.createObjectURL(capturedFile); } }); This is all well and good: we just take it on faith that the picture is stored somewhere so long as we get a URI. Truth is, pictures (and video) from the camera capture API are just stored in a temp file; if you set a breakpoint in the debugger and look at capturedFile, you’ll see that it has an ugly file path like C:\Users\kraigb\AppData\Local\Packages\ ProgrammingWin8-JS-CH3- HereMyAm3a_5xchamk3agtd6\TempState\picture001.png. Egads. Not the friendliest of locations, and definitely not one that we’d want a typical consumer to ever see! With an app like this, let’s copy that temp file to a more manageable location, to allow the user, for example, to select from previously captured pictures (as we’ll do in Chapter 8, “State, Settings, Files, and Documents”). We’ll make a copy in the app’s local appdata folder and use ms-appdata to set the img src to that location. Let’s start with the call to captureUI.captureFileAsync as before: //For use across chained promises var capturedFile = null; captureUI.captureFileAsync(Windows.Media.Capture.CameraCaptureUIMode.photo) .then(function (capturedFileTemp) { //Be sure to check validity of the item returned; could be null if the user canceled. if (!capturedFileTemp) { throw ("no file captured"); } Notice that instead of calling done to get the results of the promise, we’re using then instead. This is because we need to chain a number of async operations together and then allows errors to propagate through the chain, as we’ll see in the next section. In any case, once we get a result in capturedFileTemp (which is in a gnarly-looking folder), we then open or create a “HereMyAm” folder within our local 92

appdata. This happens via Windows.Storage.ApplicationData.current.localFolder, which gives us a Windows.Storage.StorageFolder object that provides a createFolderAsync method: //As a demonstration of ms-appdata usage, copy the StorageFile to a folder called HereMyAm //in the appdata/local folder, and use ms-appdata to point to that. var local = Windows.Storage.ApplicationData.current.localFolder; capturedFile = capturedFileTemp; return local.createFolderAsync("HereMyAm", Windows.Storage.CreationCollisionOption.openIfExists); }) .then(function (myFolder) { //Again, check validity of the result operations if (!myFolder) { throw ("could not create local appdata folder"); } Assuming the folder is created successfully, myFolder will contain another StorageFolder object. We then use this as a target parameter for the temp file’s copyAsync method, which also takes a new filename as its second parameter. For that name we’ll just use the original name with the date/time appended (replacing colons with hypens to make a valid filename): //Append file creation time (should avoid collisions, but need to convert colons) var newName = capturedFile.displayName + " - " + capturedFile.dateCreated.toString().replace(/:/g, "-") + capturedFile.fileType; return capturedFile.copyAsync(myFolder, newName); }) .done(function (newFile) { if (!newFile) { throw ("could not copy file"); } Because this was the last async operating in the chain, we use the promise’s done method for reasons we’ll again see in a moment. In any case, if the copy succeeded, newFile contains a StorageFile object for the copy, and we can point to that using an ms-appdata URI: lastCapture = newFile; //Save for Share that.src = "ms-appdata:///local/HereMyAm/" + newFile.name; }, function (error) { console.log(error.message); }); The completed code is in the HereMyAm3a example. Of course, we could still use URL.createObjectURL with newFile as before (making sure to provide the { oneTimeOnly=true } parameter to avoid memory leaks). While that would defeat the purpose of this exercise, it works perfectly (and the memory overhead is essentially the same since the picture has to be loaded either way). In fact, we’d need to use it if we copy images to the user’s pictures library instead. To do this, just replace Windows.Storage.ApplicationData.current.localFolder with Windows.Storage.KnownFolders.picturesLibrary and declare the Pictures Library capability in the manifest. Both APIs give us a StorageFolder, so the rest of the code is the same except that we’d use URL.createObjectURL because we can neither use ms-appdata:// nor file:// to refer to the pictures library. The HereMyAm3a example contains this code in comments. 93