Tag Archives: WinJS

Using any file type in the file save picker

In Windows 8 you can easily configure the File Open Picker to allow the user to select a file with any type – just use the well-known asterisk:

var openPicker = new Windows.Storage.Pickers.FileOpenPicker();
openPicker.fileTypeFilter.replaceAll(["*"]);

You can try the same with the File Save Picker as well:

var savePicker = new Windows.Storage.Pickers.FileSavePicker();
savePicker.fileTypeChoices.insert("Any", ["*"]);

However, this raises a runtime error:

0x80070057 – JavaScript runtime error: The parameter is incorrect.

WinRT information: This file picker does not allow the all files extension.

Fortunately there is a nice hack to force the File Save Picker to allow any file type:

savePicker.fileTypeChoices.insert("Any", ["."]);

Technorati-címkék: ,,,

WinJS Tricks: Access is denied exception with multiple MessageDialogs

Using what you learned in the previous episodes of the WinJS Tricks Series about MessageDialogs and their custom buttons, you can write the following code, that displays two MessageDialogs in a sequence:

var dlg = new MessageDialog( 'First message' );

dlg.commands.append( new UICommand( 'OK', function() {
  new MessageDialog( 'Second message' ).showAsync().then( function() {
    // Do something useful here...
  } );
} ) );

dlg.showAsync();

The “only” problem with this code is that it unmerficully crashes your app without any notification. If you run your app in Debug mode you can get the following Access is denied exception:

MessageDialog-Access-denied

Do you see the bug? If not, you can learn why that happens and how to fix it from the next episode of the series:

(720p, full screen view recommended)

 

Technorati-címkék: ,,,,

WOWZAPP preparation materials

wowzapp2012On November 9-10 thousands of developers are coming together in event venues worldwide to build apps for the next generation of Windows in WOWZAPP 2012. Many countries are joined to this event where experts, developers and trainers will be available to assist your learning and coding your apps. Check the nearest location on the WOWZAPP website and register!

Here is a quick list of articles I wrote in the last months that WOWZAPP attendees may found useful:

Windows Store

JavaScript development

Tools

Windows 8 inatallation

Good luck and have fun!

 

Technorati-címkék: ,,,

WinJS Toolkit – JavaScript Toolkit for Windows 8

If you are creating Windows Store applications in JavaScript you may be interested in a new project, called the WinJS Toolkit I created on CodePlex:

https://winjstoolkit.codeplex.com/

The WinJS Toolkit is a set of classes and helper functions that help creating Windows Store applications in HTML5, CSS3 and JavaScript. The WinJS Toolkit also contains templates that you can add to Visual Studio to simplify creating new items in your solution. The goal is to speed up the Windows Store app development by pre-baked code that most apps need.

The project is in very early stage, currently it contains only a few functions and three item templates for VS 2012, but I wanted to publish it on this week to make it available for WOWZAPP. Although the project is just born I believe that it can provide value even in this basic form for this event and your other projects too.

The current version contains the following features:

Extension methods

  • String.format prototype

The WinJSTK class

  • WinJSTK.isConnected() function: Detects internet connection availability.
  • WinJSTK.composeMailAsync() function: Composes an e-mail message.

Tools

  • Item template for a WinJS class
  • Item template for About flyout
  • Item template for Privacy policy flyout

Please help spread the word and use the #WinJSTK hashtag if you tweet about the project.

I appreciate and welcome all feedback, and of course all of you are invited to contribute to the project.

 

Technorati-címkék: ,,

Using AppBar icons on classic buttons

You can create fancy application bars in your Windows Store apps thanks to the 194 Metro style icons provided in the WinJS.UI.AppBarIcon object. Just add the data-win-control attribute to a div and a button, and they will be transformed into the appbar:

<div id="appbar" data-win-control="WinJS.UI.AppBar">
  <button 
    data-win-control="WinJS.UI.AppBarCommand"
    data-win-options="{id:'cmdPrev', label:'Previous', icon:'previous'}"
    type="button">
  </button>
</div>

One of the interesting questions is, that what previous means in the above code? You can find the name of the icons in the WinJS.UI.AppBarIcon object, which is loaded from the ui.strings.js file of WinJS:

winjs-references

This is a classic resource file loaded with values like this:

"appBarIcons\\previous": "\uE100", // ? group:Media
"appBarIcons\\next":     "\uE101", // ? group:Media
"appBarIcons\\play":     "\uE102", // ? group:Media
"appBarIcons\\pause":    "\uE103", // ? group:Media
"appBarIcons\\edit":     "\uE104", // ? group:File
"appBarIcons\\save":     "\uE105", // ? group:File
"appBarIcons\\clear":    "\uE106", // ? group:File
"appBarIcons\\delete":   "\uE107", // ? group:File
"appBarIcons\\remove":   "\uE108", // ? group:File

What the \uE100 value means? The appbar relies on the Segoe UI Symbol font which contains bunch of icons, and the given value is the code of the character:

appbar-icons-charmap

So actually appbar doesn’t display any image, it uses characters as icons, which is a brilliant solution, because it is faster, and you don’t have to worry about sizing.

You can catch it all in the DOM Explorer of Visual Studio, except the most important part, because Visual Studio cannot display these special character entities (that’s why there are question marks in the previous code snippet). Thankfully Jamie Rodriguez created a simple function that lists all WinJS.UI.AppBarIcon item.

Because the appbar is a mutation of the classic <button>  element, you can use the same technique in your own code. This is how you can reference to character entities in the markup:

appbar-icons-single

So first &#x then the code, and finally a semicolon. And the result is:

appbar-icons-custom

Naturally, icons look a bit different in a rectangular button than in a circle, so I made a simple function to display all icons in a button:

for( var icon in WinJS.UI.AppBarIcon ) {
  var btn = document.createElement( 'button' );
  var hex = WinJS.Resources._getWinJSString( "ui/appBarIcons/" + icon )
                 .value.charCodeAt( 0 );
  btn.innerHTML = '{0} (&amp;#x{1};): &#x{1};'.format( icon, hex.toString( 16 ) );
  document.body.appendChild( btn );
}

Here is the full gallery (click for the high resolution image):

appbar-icons-all

Of course you can use not only those characters that are available in the WinJS.UI.AppBarIcon object, but any character of any font, which is much more convenient, than sizing and positioning img elements…

 

Technorati-címkék:

Analyze the performance of your JavaScript Windows Store app

Applications published in the Windows Store must be fast and fluid, otherwise they won’t pass the certification because of the following requirement:

3.8 Your app must meet the basic performance criteria on a low-power computer
The app must launch in 5 seconds or less
The app must suspend in 2 seconds or less

Unfortunately the Windows Application Certification Kit is not enough the thoroughly test this requirement, because that tool runs only a few performance test. To test your JavaScript app, you can use the Performance Analyzer for HTML5 Apps tool from the Windows 8 SDK. After you install Visual Studio, this tool will be installed as well, but it won’t appear on the Start screen, so you have to start appperfanalyzer_js.exe manually from the C:\Program Files\Windows Kits\8.0\bin\<platform>\AppPerfAnalyzer folder.

This is the beautiful (?), modern (?) UI of the app (to get the full experience, click the image to see it in the original size):

appperf-start

Use the Please select an app to analyze to select your (or Microsoft’s Mosolygó arc) app, then click Let’s get started to start the analysis. By clicking the Advanced button, you can customize which tests you want to run:

appperf-advanced

The tool guides you through an 8-step wizard, giving you detailed instructions in every step:

appperf-step

You should take the given times seriously, otherwise the Analyzer won’t be able to collect enough data to analyze your app. The result is a HTML report with numbers and charts, which you can find in the C:\Users\<username>\AppData\Local\Microsoft\HTML5AppAnalyzer\Traces folder.

The following features of your app are analyzed:

  • Activation time
  • UI responsivemess
  • Layout passes
  • Synchronous XMLHttpRequest on UI thread
  • Image scaling
  • Memory footprint
  • Runtimer broker memory reference set
  • Memory leaks
  • Idle state CPU usage
  • Successful suspend
  • Memory reduction when suspended
  • App memory growth
  • Runtime broker memory growth

By using the HTML5 App Analyzer, you can learn a lot about the performance of your app, so you can occasionally run his tool regardless of the certification process. You can find performance best practices for JavaScript Windows Store apps here: http://msdn.microsoft.com/en-us/library/windows/apps/hh465194.aspx

 

WinJS Tricks Series: Custom MessageDialog buttons

In the last episode of the WinJS Tricks Series I showed you how you can create a simple message box in JavaScript in your Windows Store applications. In today’s episode we dive deeper and customize the buttons on the dialog, and you will learn how you can set the text, the keyboard hotkeys and the event handlers for your buttons.

Just like with message boxes, that are called message dialogs in Windows Store apps, buttons are not buttons any more, and button parameters are also have different names. Check the video to learn the new concepts:

(720p, full-screen view recommended)

Please rate or like the video if you are interested in the next episodes. Thanks!

 

Technorati-címkék: ,,,,