Monthly Archives: May 2012

Setting the focus to an textbox in the “iteminvoked” event in a WinJS metro app

The last time I focus alot on question regarding Windows 8 metro style development on Stackoverflow because I really like the new WinRT development environment and already have been doing some metro style app developement. A few days ago I saw this question on Stackoverflow and was interested, because it seems pretty simple. The question was that the asker was not able to set the focus to an input textfield.

First I tried it myself just with a little project, click a button and set the focus on the textbox. So far no problems, works like a charm. I send my testproject to the asker and asked him to test this on his machine to check if this works. Now the asker came up with additional requirements. (Just like every project Glimlach ) The focus needs to be set to the textbox when he has clicked a item in a listview. I have updated my project, added a listview with some testdata, attach the “iteminvoked” eventhandler to the listview and within the handler set the focus to the textbox. That’s where the problems start, somehow the focus is not set to the textbox anymore.

I started playing around with adding eventhandlers to the textbox and the listview “focusin” and “focusout” events. I saw that the textbox got focus but lost it when the “blur” event is re-attached to the listview. On MSDN I found the msSetImmediate method which I added to the “iteminvoked” event handler so the focus is set immediate after the processing is completed.

My code for attaching the “iteminvoked” eventhandler looks now like below.

var listView = document.getElementById("basicListView"); listView.winControl.addEventListener("iteminvoked", function (evt) { if (listView.winControl.selection.count() > 0) { msSetImmediate(setFocus); } });

And below the code for the setFocus function.

function setFocus() { //Set focus on input textbox; var input = document.querySelector("#input-box") input.focus(); }

Now when we run the solution and click an item in the listview, the focus is set to the textbox. For me it’s not totally clear why this is needed to make this work, but for now (Windows 8 Consumer Preview) this works.

The entire solution can be downloaded here TestFocusApplication

Happy developing!

Styling your WinJS / HTML5 controls in Windows 8 metro style apps with CSS

Inspired by a question on Stackoverflow on how to change a part of the Range control (which is a new input type control in HTML5) I decided to write this blog post on how to do this. Because it’s pretty easy to do and applies to all other WinJS controls. (At least the technique to find the applied styles and how to override them)

 

HTML5 range control in Windows 8 WinJS metro style app

Example of an HTML5 range control in a WinJS metro style app

Because this is a standard control that can be used there are already styles for created in the “Dark” en “Light” theme. We need to go find these styles to see what’s already applied to this control. As we can see from the example above there are already some color styles applied, blue on the left of the tracker, grey on the right and the tracker itself is white.

Okey, let’s find these styles and change them in the way we like to see this range control.

In our solution explorer under References we have the Microsoft Windows Library for JavaScript SDK where we can find the css folder which contain the ui-dark and ui-light css files. As you can see in below screenshot.

SolutionExplorer

Solution explorer for WinJS metro style application

When we open the ui-dark.css file we need to find the classes that apply for our range control. Luckily these file is well organized and with a small search we find the “Range” control section like below.

1 /* 2 Range control. 3 */ 4 input[type=range] { 5 width: 280px; 6 height: auto; 7 padding: 17px 0 32px 0; 8 } 9 input[type=range]::-ms-track { 10 padding: 0; 11 width: auto; 12 height: 11px; 13 border-style: none; 14 color: transparent; /* ticks hidden by default */ 15 }

I’m only showing part of the classes for this control, because you all will get how it looks like and you now know where to find the rest. You would probably expect that changing one of these properties would give you the desired result of changing the control. That’s only partial true, overriding one of these properties would change the control, but for example not all of the colors can be changed by overriding these classes.

Therefore you need to look further into the ui-dark.css file and look for the “Range control colors” section in the file. And as you can see below we found a complete section with the classes that we can override in our own css file to change the look and feel of our range control.

1 /* 2 Range control colors. 3 */ 4 input[type=range], input[type=range]::-ms-track { 5 background-color: transparent; 6 } 7 8 input[type=range]::-ms-fill-lower { 9 background-color: rgb(0, 130, 135); /* same in dark and light */ 10 } 11 input[type=range]:hover::-ms-fill-lower { 12 background-color: rgb(33, 146, 151); /* same in dark and light */ 13 } 14 input[type=range]:active::-ms-fill-lower { 15 background-color: rgb(37, 187, 196); /* same in dark and light */ 16 } 17 input[type=range]:disabled::-ms-fill-lower { 18 background-color: rgba(255, 255, 255, 0.24); 19 } 20 .win-ui-light input[type=range]:disabled::-ms-fill-lower { 21 background-color: rgba(0, 0, 0, 0.24); 22 }

And just like the other example this are only a subset of the available classes. If you would like to override these values, just copy the classes to your own css file and give them the value/color you like and you will see it being reflected on your control when you run your app.

RangeControlGreen

And as always if you have any questions don’t hesitate to contact me by mail, twitter or leave a comment on this post.

Happy styling…….

Lovely neighbourhood enters the Windows Phone marketplace

This weekend my official first Windows Phone app has been tested and certified for the Windows Phone marketplace. It’s called Lovely neighbourhood and can be downloaded by clicking on the name.

The concept of this app is that everyone knows the feeling that you are walking around somewhere and have the feeling “This is a lovely Neighbourhood”, I would like to live here. Well, with this app it shows you exactly what options you have to buy a house in this neighbourhood. You can filter the results based on price and distance from your location. When it has found the results it will show you them on the map. Based on how many items there are close to each other and your zoomlevel on the map it will cluster the pushpins.

When you tap on one of the house you would like to see it shows you the details about the the selected house. Besides that it will load the photo’s, neighbourhood information (average income, rental versus buying percentage etc) and also it shows which public objects (doctor, hospital, schools etc.) are close to this house so you can decide if this is really your “Lovely neighbourhood”.

Below you will find some screenshots of the app.

Screenshot_1Screenshot_2Screenshot_3Screenshot_4

In addition: This app only works when you’re located in the Netherlands because it will use the Huizenzoeker API to fetch data about the houses for sale.  

I’m open for feature requests, so if you have any good feedback or a feature request don’t hesitate to contact me by email or place a comment on this post.

And last but not least don’t forget to download the app.

WP-Download-English-Med