Susan IbachTechnical Evangelist
Every time I start digging through Windows Phone stuff I find a blog or video about tombstoning (well okay not that kind). Now that I have my Hello World App I am ready to figure out what the heck tombstoning is! If you want to build an app you will need to know it, if you don’t have tombstoning, your app might not be accepted in the marketplace. So today I’m going to figure this out!
For those of you just joining, I am learning to build a phone app from scratch. If you can code you can build a phone app. The first two blogs in the series will get you started if you need help.
Part 1 Getting the tools you need
Part 2 Writing Hello World
So apparently tombstoning is all about making sure your app gives the user a nice experience if they have to do something like answer a call on their phone (I know, who ever uses their phone for phone calls anymore, let’s say you have to answer a text message, that’s more realistic). You wouldn’t want a user to enter a bunch of information on the screen painstakingly done on a tiny keyboard, leave the page to send a text, come back and have to enter it all over again! That would not make you popular! So tombstoning is about making sure when you come back to the app everything is the way you left it.
At the end of our Hello World app we had a page with a textbox, button, and textblock that looked like this
Now apparently a simple way to test tombstoning is to click on the “Windows” button to go back to the menu, and then use the back button to return to your application.
So If I type Susan into the textbox, hit the Windows key, yup I leave the application, then I hit the Back button and I am back at the application and hey it remembers the value in my text box! Sweet! So I guess I don’t have to worry about writing any code for tombstoning. I know in the pre-Mango applications it didn’t work this way, because your application was deactivated when you left and it didn’t remember state. But they fixed that in Mango. This could be my shortest blog post ever! But no… you see what happened, is when I pressed the window button and went back to the menu, my app was deactivated and became dormant. When I tapped the back button to return to my app it became active again. Here’s a diagram I found that describes what my mango phone application is doing.
BUT!!!! Yes there is a but, the phone can’t just leave all applications in memory forever, that would make the other applications run really slow, and drain battery power. So what happens is the phone keeps an eye on the memory and if there is too much running on the phone it will “tombstone” your application. When that happens it won’t remember stuff like what you had typed into a text box. Here is another diagram I found that shows the extra bubble for tombstoned.
But how the heck do you test this? If the phone decides when it is going to tombstone an app instead of just leaving it dormant, how on earth do I write code to say “if the app was tombstoned go get the values the user entered and put them back in the text box again” and how do I test that if I don’t have a phone? Turns out they thought of that. If you go to the Solution Explorer windows, right click on your project and go to Properties.
When you get to the project properties choose Debug and select the checkbox that says Tombstone upon deactivation while debugging.
Now if I use the Windows button to exit my application in the simulator it will tombstone my app so I can test my tombstoning logic in my application to make sure it will work in case a phone device does tombstone my app behind the scenes.
So let’s see what happens now when I run my application, and then use the Windows button to exit and the Back button to return to my application and sure enough, the name I had typed into the text box is gone!
Okay so now I can see the problem users will have if I don’t do tombstoning. Users who leave my app to do something else on the phone don’t want to come back and lose everything they had typed in. I found a great big MSDN article on how to preserve and Restore Page State, I’ll try to break it down to the basic concepts here, but feel free to go read the article.
So after a little digging I discovered that the best place to remember what someone typed in is in the OnNavigatedFrom event handler of the page. This event fires when you leave the page in your application. To get to the code for your page so you can add the event handler you can right click on the background of the page where you see your screen and choose View code, or in Solution Explorer you can expand your page by clicking on the little arrow so you see the code-behind page listed in Solution Explorer. You can then double click on the code behind page to navigate to the code
Now I can add a OnNavigatedFrom event handler, the syntax is a little different in VB and C#. What I want to do is remember the value the user typed into my text box when I leave the page. After a little digging I found that you can use the State dictionary to remember the values. Basically you call the Add method of the State dictionary and tell it the value you want to store, and what you want to call the value stored so you can get it back later. Call the add method once for each value you want to remember. You do need a little error handling though in case the value is already stored, so I added a little logic that says if the value is already there, delete it and add it back with the new value. When I am done my code looks like this:
Protected Overrides Sub OnNavigatedFrom(e As System.Windows.Navigation.NavigationEventArgs)
If Me.State.ContainsKey("NameEntered") Then
Now I need to add code so that when they come back to the page it reads the value I saved and puts it back in the textbox again. I do this in a OnNavigatedTo event handler. Again I add a little bit of error handling because if someone enters the app for the very first time there won’t be a value stored in state yet, and I don’t want that to crash my application, so basically I say if you find a value go get it and put it in the text box. The code looks like this:
Protected Overrides Sub OnNavigatedTo(e As System.Windows.Navigation.NavigationEventArgs)
If Me.State.ContainsKey("NameEntered") Then
TxtName.Text = Me.State("NameEntered")
Now to test it! Run the application, use Windows button to exit, back to return and Woo hoo! I have successfully told my phone application to remember the value even if it gets tombstoned. If you see a little '”resuming…” message then you know for sure your application was tombstoned, but depending on how long it takes to restore your application you may not see the message.
Now, the programmer in me has one issue with the code I just wrote. Most of the time, my application will not be tombstoned it will just be dormant. So I now have code that runs 100% of the time as you enter and leave the page, but really only needs to run some of the time. Not the best performing code! It turns out you can actually find out programmatically if your application was tombstoned and then you should only restore state IF it was tombstoned.
If you go to the application code page (go to solution explorer, expand the little arrow pointing to App.xaml, and you will see App.xaml.vb or App.xaml.cs, double click on that .vb or .cs file to get to the application code page). By the way there is a whole lab on how to do this tombstoning stuff you can download as well if you want.
If you scroll down through the code you will find a Application_Activated event this is where we can check to see if the application was dormant or tombstoned, because this event receives an argument called IsApplicationInstancePreserved which will be true if the app was dormant, and false if the app was tombstoned. The problem I have though is that I need to be able to find this out in my OnNavigatedTo event handler on the page. There may be more clever ways to do this (open to suggestions from the peanut gallery here) but what I am going to do is create a class called Statemanager with a shared/Static property called restorestate that I can set in the Activated event and read in the OnNavigatedTo event.
Private Sub Application_Activated(ByVal sender As Object, ByVal e As ActivatedEventArgs)
If e.IsApplicationInstancePreserved Then
StateManager.RestoreState = False
StateManager.RestoreState = True
Visual Studio Tip: I could create the class before I create the event, but when I get the squiggly under the class name, i just hover the mouse over the little red line (or click on that line and then do CTRL + . on the keyboard, that’s a period by the way) and a little pop-up menu appears that offers to generate the class for me since it doesn’t exist. I choose Generate Class StateManager from the pop-up menu and voila Visual Studio makes the class for me. of course then it complains that the property RestoreState does not exist, so I use the same little trick, click on the line with the squiggly do my CTRL + . and pick Generate field for StateManager (yeah I could do a property here instead of a field, I am just being lazy, I know that in good OO design you always have properties, but this is just a hello world application right now). But I love this little feature in Visual Studio that generates classes, properties, and method stubs for me .
I can now double click on my StateManager class to edit the code, or if you didn’t use the little tip above you could have created the StateManager class yourself by right-clicking the project HelloBonjour and choosing Add Class to create the class from scratch myself and added a shared/static field for RestoreState. Either way, when you are done Your class should look something like this:
Friend Shared RestoreState As Boolean
Now I can go back to my OnNavigatedTo event handler and specify to only load state if RestoreState is true.
Protected Overrides Sub OnNavigatedTo(e As System.Windows.Navigation.NavigationEventArgs)
If StateManager.RestoreState Then
If Me.State.ContainsKey("NameEntered") Then
TxtName.Text = Me.State("NameEntered")
That’s it that’s all and that’s definitely more than enough for this blog post, time to pat myself on the back for figuring out yet another step in the steps towards building a windows phone app. You know I am beginning to believe I can do this! The whole tombstoning thing always had me confused, I feel a lot better now that I have that piece figured out.
So got you curious about Imagine cup yet? If you are considering taking part, it helps to have a mentor, your mentor can be a faculty member or someone from industry. If you are talking to a faculty member about being a mentor, you can point them to this blog for some reasons they might want to mentor a team in Imagine Cup. There is also a great article here written by a faculty member who mentored a team and wrote about the experience.
Mentoring a competitive Imagine Cup team is incredibly rewarding and, according to one mentor, slightly addictive. As a team mentor, your role is to act as an advisor who helps your students work together efficiently and effectively as a team. It takes discipline and knowledge to focus others on creating a world-changing solution – not an easy task - but we know that you’re up to the challenge.
Obviously, you can't do your team's work for them or solve any problems they encounter; however, you can discuss technical issues with your students and refer them to the valuable resources and what better way to help students understand the relevance of what they are learning in class then by helping them apply it to solve real world problems.
Here are a few FAQ about mentoring from the Imagine Cup website
Can anyone be a mentor? Anyone can do it — an industry professional, faculty member, Microsoft student intern, a not-for-profit organization member or a private sector company employee, or even a former competitor. The only people who can't be mentors are current competition judges
What is my role as a mentor? Do what you can to help your team. You might help brainstorm for project ideas, talk about progress, or even moderate discussions and clarify answers. You'll also want to help your team organize tasks and timelines, and figure out roles and responsibilities. What you don't want to do is lead discussions, control the group in any way, or contribute to any of the work related to the team's competition entry.
How much of a time commitment is mentoring? It depends on your skills and the needs of the team. In general, you should expect to spend between half a day and one day per week with your team as competition deadlines approach.
What about remote mentoring? You're not required to be in the same geographic area as your team, but it does make day-to-day coaching easier.
Does every team need a mentor? No, but having a mentor is a good idea so that teams have steady access to advice, information, and support.
It is recommended, but not required, that each team have one (1) mentor in addition to your Team members. Limit one (1) mentor per Team. A mentor can be from an educational institution, a not-for-profit organization or a private sector company. Please note: IT Challenge is an individual competition and does not have mentors.
Can I mentor more than one team? Yes.
Okay I’m convinced, how do I become a mentor? Start by registering as a mentor. Or, visit the Mentor Forum to learn more and meet other mentors.
Mentoring a team can be an incredibly rewarding experience, and having a mentor really does increase your chances of success. Work together and lets show the world the potential and passion of Canadian students at the 2012 Imagine Cup!
If I can publish a phone app, anyone can, at least that’s my theory! So if you have ever thought about it, try it yourself as I blog. There are always roadbumps on the way. With the pressure of having you doing this with me I think I can do this. Last blog I managed to get the tools up and running. Today my goal is to get some code running.
As cliche as it is, I am going to build a Hello World app, if I am going to build a phone app, I need to make sure I know how to use the tools, that way when I start to get weird error messages on the screen, then I know it’s my code, and not because I don’t even know how to use the tool! By the way, this may look like a long blog, but that’s just because I have a lot of screenshots to help anyone who is new to Visual Studio.
If you don’t already have the tools installed you can check out Part 1 – Installing the Phone tools (the title doesn’t match but that’s what I did in the actual blog post)
Okay let’s go.
I have Visual Studio installed on my PC, you may have to launch Visual Studio Express for Phone, but once you are in the tool the steps should be nearly identical.
Step 1 – Launch Visual Studio 2010 (Start | All Programs | Visual Studio 2010 | Microsoft Visual Studio 2010)
Step 2 – Create a phone project (Okay I admit it, I like VB .NET better than C#, I can write C# but I have to think harder to do it, if I am going to embarrass myself by sharing my code with you, I might as well go all out and use VB.NET, all you C# aficionados can scoff if you wish, but I like it)
Choose File | New Project | Installed Templates (either pick Visual Basic or Visual C#) | Windows Phone Application
Sure there’s a bunch of other project types there, but I figure the first one will work for a Hello World application. I’ll have to figure out the difference between all those other ones later.
Now I get a window popping up asking which Windows Phone Platform I want to target for the application. I am going to choose 7.1, because 7.1 is the Mango release, I know there are some nice new features in that release and I want to be able to use them in my application. I also know that pretty much all Windows Phone users in Canada have the Mango update so I am not limiting who can use my application.
Okay now I see a screen with a whole bunch of scary looking XAML. I just want to create a hello world app, so let’s hide that XAML stuff for now. There is a tiny double arrow you can click on to hide the XAML pane.
Now I just have a page in front of me which says MY APPLICATION, and page name.
Let’s start by changing the text “MY APPLICATION” to “HELLO BONJOUR APPLICATION”. If you click on the text that says My application it will select the TextBlock control that displays the text. That TextBlock control has properties that affect how it is displayed. When you select the TextBlock you can see the property window displayed in the bottom right hand corner.
TIP: if you like you can click on that property window and drag it out and resize it so it is easier to see. If you close the property window, you can get it back by:
Go into the property window and change the Text Property to “Hello Bonjour Application”. The text on the screen should now show your new application title. I know from developing windows and web applications that you spend a lot of time editing properties, so good to get used to that right away.
Now let’s add a Button, a TextBox, and a TextBlock to the screen. In order to add controls to the screen I need to display the toolbox window. On the far left of your Visual Studio window you will see a little tab called toolbox. You will need to click on that so that you can see the toolbox and add controls by dragging them to your screen. Lucky for me, although I have never built a phone app, I have used Visual Studio so I can actually help you out there if you haven’t.
Once you can see the toolbox, drag a TextBox control, a Button Control and a TextBlock control to the screen and put them under the page name textblock. When you are done your screen should look something like this.
Tip: If you find it annoying the way you have to keep re-opening the toolbox, there is a little pushpin icon that allows you to pin it in place so it stays there all the time. The pushpin is a toggle, so if you want the toolbox to go away again you can just click on that pushpin icon again.
When you add controls, it is always a good idea to rename them, having controls called Button1 and textBox1, textBox2 is not very easy to keep track of later. I use a prefix to remember the type of control (e.g. txt, btn, blk) and then a meaningful name of some sort for each control. Let’s rename our controls. Button – btnDisplayMessage, TextBox – txtName, textBlock – blkMessage. You will find that makes life easier when you start adding code as well. To rename a control, bring up the properties and click on the control name, then you can type in a new name.
Let’s also change a couple of properties to change how they are displayed.
Now we need to add some code, what we’ll do is have the user type their name into the text box, then click on the button. When you click on the button we’ll display a message saying Hello <insert name here> on the screen.
Since we want our code to run when you click on the button, we can add an event handler to the button by double clicking on the button. That automatically creates a click event handler where you can write code that will execute when you click on the button. We are going to write code that says get the content of the Text property of the TxtName field (that will contain whatever the user types in) and put that value into the text property of our textblock concatenated to a string that says “Hello/Bonjour” so basically you need to add the following code to your event handler.
BlkMessage.Text = "Hello\Bonjour " & TxtName.Text
When you are done it should something like this (I reformatted a little bit to make it more readable)
Private Sub BtnDisplayMessage_Click(sender As System.Object,
e As System.Windows.RoutedEventArgs
) Handles BtnDisplayMessage.Click
BlkMessage.Text = "Hello\Bonjour " & TxtName.Text
You now have two windows open, one is the designer window (MainPage.xaml) where you can add more controls and change properties. The other is the code window (MainPage.xaml.vb) where you can add and modify code. You can move back and forth freely between the windows by clicking on the tabs.
We’re done! Now we can test our application!
You can launch the application a couple of ways, you can click on the debug button in the toolbar. you can choose Debug | Start Debugging from the menu, or you can right click on the project name in the Solution Explorer window and choose Debug | Start new instance.
Now you wait a few little while for the emulator to load, dum de dum, (it takes a little time the first time you launch it) and then the application appears in the emulator.
If you have a touch screen you can actually touch the textbox and the on screen keypad will appear in the emulator. If you don’t have a touchscreen, you can use your mouse to click inside the textbox and the onscreen keyboard will appear. This is where I go a little batty. You have to use the on screen keyboard by clicking the keys with your mouse, or tapping it with your fingers. You can’t use your desktop or laptop keyboard. Maybe they did that on purpose to remind us what it will be like for a phone user who doesn’t have a real keyboard
Now you can click on the button and ha! I just realized, when I screwed up my project and had to restart that I forgot to change the label on the button! So in the screen shots you will see that the button label is not set to “click here”! Man, I should really go fix that shouldn’t I…I am not going to go recreate all the screen shots though, forgive me! Hey i guess I get to show you how to go back to your code,
tip: DO NOT click on the ‘X’ beside the emulator. That works, but it unloads the emulator and then you have to wait for it to reload again. Instead go back to Visual Studio and choose Debug | Stop Debugging from the menu or click on the Stop debugging button in the toolbar. Then when you start debugging again it will be faster.
Okay go back, select the button, <F4> to bring up properties, Change Content to “Click Here”. Now run it again to test <Start Debugging> Ha! fixed it! Now Type “S u s a n” into the text box, click on the “Click Here” button and cool! the textblock now says Hello/Bonjour Susan. I love it!
So now that I have a very very simple application that I can run in the emulator I can play around a bit, start adding more controls to see what they look like, figure out how to line up the fields so they look nicer, play around with font sizes, explore the emulator buttons. That is why I like Hello World apps. They get me just far enough that I can start to explore. Next blog…I’m going to figure out how to put the application on my actual Windows Phone! But I got my Hello World finished, time to go celebrate with chocolate (I hope my kids have some Halloween candy left)
I’ve always been a fan of the little tips and tricks in electronics that make our lives a little easier (than it already is!). So I’ve compiled a top-10 list of tips and tricks for you to try out on your new phone!
1. YOUR VOICE IS YOUR PHONE’S COMMAND
To use the windows phone 7 voice controls, simply hold the windows button on your phone and talk to your phone. Try saying something like “Calories in a California roll”.
2. APP PINUPS
You can add more apps to your start screen (or “pin” them). When you are in the long applications list, touch and hold an app you want to pin to the screen. And when the menu appears, click “pin to screen”.
3. GOODBYE, PESKY APP
You’ve tried an app, and you don’t like it. You can certainly uninstall it by heading over to the long apps list, touching and holding an app you want to uninstall, and clicking “uninstall”.
4. MAKEOVERS ARE ALWAYS FUN
You can customize the look of your phone by changing the theme! Swipe on over to the menu list, select settings and choose theme. Here you can choose the color of the background and the accent. Background options are black and white, and you get a whole arrangement of colors for the accent!
5. WHEN IN DOUBT: SWIPE
Windows phone 7 is built with the concept of panoramic tiles that you swipe to reveal more content off screen. So it’s always a good idea to try swiping to the left as there might be more stuff waiting for you to see.
6. PEOPLE ARE APPS TOO
It’s not just about adding apps to the start page, you can also add people! You can find them in your contacts book, click on the “pin” icon (HINT: It looks like a thumbtack). And they’ll be added to your start page! Happy speed dialing!
7. WHY AM I BEING CHARGED LONG DISTANCE?
It’s easy to make mistakes while dialing, and can easily call long distance on accident. Windows Phone 7 can worry about that for you, head over to Settings, swipe over to Applications, and choose Phone. Turn on “International Assist” to automatically correct some common mistakes while dialing internationally or dialing while abroad.
8. MY PICTURES ARE WHERE?
It’s always good to keep a backup of your pictures, and windows phone 7 comes with SkyDrive to let you do just that. If you haven’t already done so when you set up your phone the first time, just head over to Settings, swipe to the left and then scroll down to Pictures & Camera. You’ll find the option to set the Auto Upload feature on.
9. IS IT THERE YET?
Want to know if your text got to its destination? You can turn on SMS delivery confirmation by going to Settings, swipe to Applications, Messaging and flicking the On switch for SMS delivery confirmation.
10. CTRL+F FOR PHONES? REALLY?
Internet Explorer on Windows Phone 7 has a “find” feature that allows you to find a word on a page (Yes, just like Ctrl+F). Simply press the three dots, click on “find on page” and then type in the word you’re looking for. Just press the back button to get back to the page without the search words highlighted.
- Alaa Shaabana
I'm wired, literally. That's right. My phone is currently plugged in, working it's little heart out as it attempts to update all that I hold dear. Which is mainly my email and Facebook. Sad, I know. "Wait, wired?" You say? Yes, I share your shock and sadness. You'd think that in the 21st century having to plug my phone in to update my email would be behind me, but no. I could blame my phone, but I've recently discovered that it's not its fault. So who's fault? The blame has to lie somewhere, correct? I'm going to blame my service provider. I'm not going to name names, in order to protect the incredibly guilty party, but said service provider happens to not support my Windows Phone.
I’m just going to let the full force of that statement sink in. Shocking eh? What kind of depraved service provider would do such a thing? One with a heart like the Grinch, "two sizes too small". No data! You think to yourself, that can't be! Everyone provides data. Well, apparently they were perfectly willing to accommodate me should I have a Blackberry or an iPhone but aren't so willing to take the next step and support the Windows Phone.
Where does this leave me? Sitting at my computer as my phone updates. While plugged in, this baby is a whole new world of awesome with cool apps and features that let me roam the internet. Unplugged I feel constrained, caged. Sure, there's lots of features that can be used without the internet or data but I like to roam free, spread my wings.
Speaking of roaming free, I'm sure you're thinking "I thought we were gonna hear about FearFest Jess! What's the deal?". To you I would say "Hold your horses! Patience is a virtue." But I'll try to make up for forcing you to wait so long for an update. Did I go to FearFest? No. Why? Because at 11pm Thursday the world appeared to spin on its ear and instead of Wonderland I ended up in my hometown.
Now in all seriousness what I'm about to say is going to sound like I'm plugging the phone but the truth is that the way that I've organized my phone allowed me to navigate the confusing emails and texts I got that night and assemble them into a vague plan that helped me get home. By sorting my contacts into groups I was able to keep everyone's texts and emails together in one view by coordinating them under a group I named Family. On my old phone, my texts were never sorted and I couldn't even search in them to find what I needed. I had to try to think back chronologically to see when the last text was received. It was like playing Where's Waldo. This way I was able to see which plans were cancelled, who was coming when, and what I wanted to do once I got home plus set up my calendar so I knew where to be and when. Crisis averted.
What's that? It's a bird! It's a plane! It's my Windows Phone.
- Jessica Pellow