23.01.2018 Views

MICROSOFT_PRESS_EBOOK_PROGRAMMING_WINDOWS_8_APPS_WITH_HTML_CSS_AND_JAVASCRIPT_PDF

You also want an ePaper? Increase the reach of your titles

YUMPU automatically turns print PDFs into web optimized ePapers that Google loves.

within the app container. For example, trying to create a jQuery datepicker widget<br />

($("myCalendar").datepicker()) will hurl out this kind of error. You can get around this on the<br />

app level by wrapping the code above with MSApp.execUnsafeLocalFunction, but that doesn’t<br />

solve injections coming from deeper inside the library. In the jQuery example given here, the<br />

control can be created but clicking a date in that control generates another error.<br />

In short, you’re free to use third-party libraries so long as you’re aware that they were<br />

generally written with assumptions that don’t always apply within the app container. Over time, of<br />

course, fully Windows 8–compatible versions of such libraries will emerge.<br />

Here My Am! with ms-appdata<br />

OK! Having endured seven pages of esoterica, let’s play with some real code and return to the Here My<br />

Am! app we wrote in Chapter 2. Here My Am! used the convenient URL.createObjectURL method to<br />

display a picture taken through the camera capture UI in an img element:<br />

captureUI.captureFileAsync(Windows.Media.Capture.CameraCaptureUIMode.photo)<br />

.done(function (capturedFile) {<br />

if (capturedFile) {<br />

that.src = URL.createObjectURL(capturedFile);<br />

}<br />

});<br />

This is all well and good: we just take it on faith that the picture is stored somewhere so long as we<br />

get a URI. Truth is, pictures (and video) from the camera capture API are just stored in a temp file; if you<br />

set a breakpoint in the debugger and look at capturedFile, you’ll see that it has an ugly file path like<br />

C:\Users\kraigb\AppData\Local\Packages\ ProgrammingWin8-JS-CH3-<br />

HereMyAm3a_5xchamk3agtd6\TempState\picture001.png. Egads. Not the friendliest of locations, and<br />

definitely not one that we’d want a typical consumer to ever see!<br />

With an app like this, let’s copy that temp file to a more manageable location, to allow the user, for<br />

example, to select from previously captured pictures (as we’ll do in Chapter 8, “State, Settings, Files, and<br />

Documents”). We’ll make a copy in the app’s local appdata folder and use ms-appdata to set the img src<br />

to that location. Let’s start with the call to captureUI.captureFileAsync as before:<br />

//For use across chained promises<br />

var capturedFile = null;<br />

captureUI.captureFileAsync(Windows.Media.Capture.CameraCaptureUIMode.photo)<br />

.then(function (capturedFileTemp) {<br />

//Be sure to check validity of the item returned; could be null if the user canceled.<br />

if (!capturedFileTemp) { throw ("no file captured"); }<br />

Notice that instead of calling done to get the results of the promise, we’re using then instead. This is<br />

because we need to chain a number of async operations together and then allows errors to propagate<br />

through the chain, as we’ll see in the next section. In any case, once we get a result in capturedFileTemp<br />

(which is in a gnarly-looking folder), we then open or create a “HereMyAm” folder within our local<br />

92

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!