Blog Archives

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

Posted on 2012/05/30
by

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!

Leave a Reply ?

My TechDaysNL 2012 session is online

Posted on 2012/02/28
by

Friday 17 February I gave a presentation about Windows 8 ‘metro style’ development with JavaScript on the TechDays 2012 event in Den Hague, The Netherlands.

In this session I have covered the following topics:

  • - Metro design principles
  • - WinRT architecture
  • - WinJS library
  • - Demo’s on how to create your own ‘metro style’ app with Javascript.

Below you will find the recording of the session. Warning for my non-dutch readers: The session is spoken in Dutch.

 

Hope you enjoyed being at the Techdays 2012 and watching my session, or seeing it online on Channel 9.

If you have any questions about the presentation or the content don’t hesistate to contact me via the comments or via twitter @bloodyairtimer

Leave a Reply ?

I’m speaking at TechDays 2012

Posted on 2012/01/28
by

The last few years I have been attending the DevDays (which are now callled TechDays) and always had alot of fun being there with colleagues, catch up with some guys and learning alot of the sessions being held during these days. This year will be totally different, because this year I will be doing a session myself.

I will be speaking about developing Metro style apps in Windows 8 with Javascript. In this session I will guide you through the different steps to build your own ‘metro style’ app. In this session I will cover the following topics:

  • Promisses
  • Dataloading with XHR (asynchronous)
  • Datatemplates
  • Databinding
  • Adding controls to the AppBar
  • Livetiles
  • Navigation

For most of the above points I will also show you in demo’s how to do this by yourself. I’m pretty sure that after this session you will say: “Wow, that’s really easy to start developing ‘Metro style’ apps with Javascript!”.

I really hope to see you on Friday 17 february in Den Hague! More details about my session can be found at the Techdays site

Last thing to say is that I’m really proud to have this opportunity to speak at an event like this size.

See you there!

Leave a Reply ?

Creating a dynamic layout with XAML in Windows 8 ‘Metro style’ apps

Posted on 2012/01/19
by

A big percentage of all apps is showing data to the user, formatted in different ways. Sometimes it are images, the other time graphs, but a lot of times you use a data grid to present your data to the user. To present this data in the most smooth way to the user, you often want to make the columns / rows scalable. With this approach the data is shown in the most comfortable way to the user when they use different devices and resolutions. When using XAML in your Windows 8 metro style app, you can easily define a dynamic layout for your grid by using the ColumnDefinition and/or RowDefinition classes.

Below I will show you the XAML of an dynamic layout grid and will tell you about the used properties and how to add controls to the different positions created in the grid.

1 <Grid x:Name="LayoutRoot" Background="#FF0C0C0C">
2     <Grid.ColumnDefinitions>
3         <ColumnDefinition Width="Auto" />
4         <ColumnDefinition Width="*" />
5         <ColumnDefinition Width="Auto"  />
6         <ColumnDefinition Width="2*" />
7     </Grid.ColumnDefinitions>
8 </Grid>

As you can see above right now we only use the ColumnDefinitions to define the columns in our grid. You can see this as the skeleton for our grid. Later we will make sure that every columndefinition will have the right controls added to it.

In this article we only focus on the (easy) dynamic part of the layout. In later articles I will talk about a more complex dynamic layout. That’s why we for now will only talk about the Width property. The Width property can be assigned with the following values: Auto, * or a double value.

Auto The size is determined by the size properties of the content object.
* The value is expressed as a weighted proportion of available space.
Double value The value is expressed in pixels.

So if you have a columndefinition with width set to Auto and you add a control to the column that has a width of 100 pixels, than your column will be 100 pixels + a small amount needed for borders etc. You can see Auto as the fit to content option.

* is the option if you want to make sure that your grid is filled up 100%, because this one will fill up the space that is left after all other columndefinitions have taken their space. If you have multiple columns with Width=”*” than the width will be equally divided over the columns. In our example you see that the third column definition has the width set to “2*”. This means that this column will take up twice as much space as the other column. If there is for example 300 pixels left in our grid, than column 1 will get 100 pixels and column 3 will get 200 pixels.

The last option is setting a width to a double value. This value is the exact value in pixels that the column will take.

Adding controls to the grid

Okay, lets add some controls to the grid to see how that works. First I will show you the full example of the dynamic layout grid, further I will explain what’s happening.

 1 <Grid x:Name="LayoutRoot" Background="#FF0C0C0C">
 2     <Grid.ColumnDefinitions>
 3         <ColumnDefinition Width="Auto" />
 4         <ColumnDefinition Width="*" />
 5         <ColumnDefinition Width="Auto"  />
 6         <ColumnDefinition Width="2*" />
 7     </Grid.ColumnDefinitions>
 8     <TextBlock Width="Auto" Text="Column 1" Grid.Column="0"></TextBlock>
 9     <Button Width="Auto" Content="Column 2" Grid.Column="1"></Button>
10     <TextBlock Width="Auto" Text="Column 3" Grid.Column="2"></TextBlock>
11     <Button Width="Auto" Content="Column 4" Grid.Column="3"></Button>
12 </Grid>

As you can see in the above example we just start adding controls to are grid right after the ColumnDefinitions element. In our example we added two text blocks and two buttons. With the Grid.Column property we can define in which column these controls are added. Adding the controls to the grid can be done in a random order if you want. As you can see the Grid.Column property is a zero-based index.

Below is a screenshot of the dynamic layout that we created with the above XAML code.

DynamicLayout

You can repeat these above steps in the same way for rows. But than in the Grid.RowDefinitions. If you want to add a control to a specific row in your grid you should add the Grid.Row property to your control to define the row where you want your control to appear.

In a later post I will talk about a more complex dynamic layout and how you can measure the width/height of the columns/rows that are created with the * option. Also we will have a look at how work with these kind of layouts from the code behind.

[ 1 Reply ]