From concept to reality in 6 weeks - part 9

I am starting to get a bit worried about my abilities to deal with Windows 8 as it is quite overwhelming at the moment. There is just too much to learn and not enough time, which means if I panic about this fact then it will only get worse. This has happened to me many times before in my 30 years so I just need to calm down and take it one day at a time. Eventually it will all fall into place. The good news for today is that I received email late last night that the mapping engine is partially working on Windows 8. I have full confidence in that team as I have worked with 3D geniuses before and they have to be the smartest people on the earth. There is just something about thinking in 3D and dealing with transformations and matrix algebra for a living that elevates their minds!

Right now I have to come back to the practical and make a decision. Do I load the data from a button click or try to finish the full API to load the data? Since the mapping engine is progressing so quickly, I think I need to get some data working on the map, which means I need to read the data from the server and populate some objects so I can draw them on a map. I don't need the UI right now as I can hardcode the data retrieval for now. Time to switch gears. Before I do that I need to get the project building again as I was so tired yesterday that I just had to give up and call it a night. Plus I had several of hours in the evening that I had to work on some marketing literature to give to a potential client. But today is a new day so time to start out on a positive note. Since I am a morning person it is much easier for me to thing clearly in the early morning so starting out at 5am when it is dark and quite suits me just fine.

I need to read a bit more about Data Binding before I totally give up on the UI changes I was trying to make to show the data load dialog. New plan - I have tons of working examples to compare to my project and find out what I am doing wrong in loading multiple pages from a selection list. That is a common paradigm that runs thru all of the example so this should be solvable by looking at any complex example. Even newer plan - bring up the example code on my Mac and then compare the project code on my Windows laptop since I am still at home and do not have the super fancy monitors like at work. That did not take long to find the missing piece. The Microsoft examples all come with the common folder that contains a class called "LayoutAwarePage" which contains all of the logic that I was missing to navigate between two pages. It is very involved so I certainly do not want to reinvent the wheel and just need to use it so I can get past my compile issues and see my pages working. But wait, there is way more to this than it appears on the surface. The example code uses a whole different paradigm to load secondary pages so I need to learn how to do this the correct way using VSE. Now I am giving up temporarily and going to get the data loading without a UI.

So far having spent half of the day trying to get the data from the secure server within the project I created. I keep getting a build error 'Could not copy the file "obj\x86\Debug\Bing.Maps\Themes\Generic.xbf" because it was not found'. I find if I try the use F7 to rebuild that most times it will work. Only two times did that not work so in those cases I had to clean the project and rebuild it from scratch. Odd that I have been seeing these messages today. I wonder if it has something to do with me running multiple VSE and apps in the debugger at the same time? I don't believe that is it because only my project uses Bing Maps.

Many hours later I have the the code completed that retrieves the 3 parts of the data from the secure server and saving the results to 3 different files. I have been learning way more about C# than I ever thought or wanted to know. In order to get the model code to work I had to learn about calling a super class, which has to be the most odd syntax I have ever see. On the method you have to add " : base()" and if the parent method or constructor requires then those have to be passed into "base()". Creating an abstract class, and protected variables is very straight forward. I kept struggling with how to show debug statements to the debugger output window. The code really changes depending on the target platform and the language used to build the Windows app. I kept finding code that did not compile. Finally I discovered the correct package as I had to add "System.Diagnostics" and then I could call "Debug.WriteLine". I then had to learn about "String.Format", which is very similar to other languages on formatting string given arguments. I then had to learn about DateTimeOffset class as I had to do some time math. It was not the easiest way I have seen as Ruby beats them all with beautiful things like "3.days.ago" or "2.hours.from_now". That is just so easy as it should be. I had to learn about switch statements, well I didn't actually have to but I wanted to instead of using a series of IF/ELSE statements. I spent way too much time trying to debug a problem with using a MessageDialog from within a background thread. I was close but then I would encounter a run-time error occasionally so I abandoned that for Debug.WriteLine as it was only for debug. Eventually I need to add a progress bar to show as data is being retrieved and loaded onto the map, but NOT today. There is only way to show a message dialog and that is using an "await" statement preceding the "ShowAsync()" method call. To make sure this can be done in a background thread you have to add this magic code:

var ignore = this.Dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.Normal, async () => { await messageDialog.ShowAsync(); } 

I know it is complicated to do such things as it is not much easier in iOS as there is special Apple magic there as well. This kind of code just makes me want to start my Thanksgiving break earlier!

I also learn about Exceptions and try/catch/throw, which is basically the same in all languages I have used, so that knowledge transferred nicely. I went back into my C# class files and cleaned up all of the imports, which is very similar to how that is done in Java. I am kind of disappointed that VSE does not add the "using" statements automatically as that would be very helpful. As it is I have to go searching all over the planet for the location of the class I want to use. That is why it took me so long to find the Debug statement.

Now that I have the data on downloaded from the server, I need to process the JSON data and store it into objects. It is amusing how every framework has it's own terminology for the model objects. Windows loves the term DAO. I am not a fan but I just don't run in those circles. Turns out it is pretty easy to get the data into objects as Windows 8.1 has a very nice JSON supporting library. I even saw a reference to the Apple iOS documents in one of the Microsoft class library document pages today. I cannot remember which one it was but I found it amusing. The only tricky part was getting the JSON list of objects to be stored in an ObjectCollection. I may have to wake up a bit early tomorrow so I can finish it off before going to a special Thanksgiving meal.

It just never fails. I was super frustrated yesterday and felt little progress was made. I tried to calm down and start all over today by throwing away most of what I had done yesterday and chalking it up to a learning experience and it certainly helped. Today I got the API working as I wanted to finish that this week. I still have nothing showing up on the map so that will have to wait for another day next week. The only unsolvable problem I had today was I wanted to show my customer what I had working but GoToMeeting works on my Mac but when I downloaded the app from the Windows Store it only let me join the meeting. I could not change presenter to my Windows laptop. I tried to exit and it still showed me as being off line. I will have to try to solve that problem before our iteration meeting next week.

From concept to reality in 6 weeks - part 8

Before I get too carried away with writing C# code to access the secure server data, I need to fix one bug that has been bothering me since I first created the main screen. The bottom AppBar has nice looking toggles but I need the 4 toggle buttons to be like radio buttons. it should be easy to fix since I made a note of the MSDN page that explains how to fix them. I like to close everything when I leave to go home each evening. This morning I start by double clicking on the GitHub kitten on my desktop and make sure I committed everything yesterday. I then open VSE and click on my project under the recent projects sections and I am ready to go. I went to Tim Heuer's blog on my Windows laptop and read the current top 3 blog posts as he has great words of wisdom. He mentions using Modern UI Icons and explains how to use a custom font for social icons; I already know how to do that but it is good to find out I am doing it the same way. I continue on as he seems to always mention stuff that I need to know, like the next blog post I found interesting on old style Callisto menus and Flyouts since I will need to create dialogs next. Then I see a post on how to show character ellipsis when truncating text, which is so useful as I will need that one also. I think I could keep reading all day long as the next blog post I see is on how to use the new SettingsFlyout as I need that one as well. He even makes his web page buttons use the new Windows 8 toggle buttons, which is going a bit crazy for me, but he is a Windows guy so I understand. I finished scanning all of the blog posts on his main page so switch over to the Windows laptop and try to access the blog post I need. I entered part of the name incorrectly and saw a very nasty looking 404 error page. That shows me about all I need to know about IIS, which is definitely not the happy part of Windows to me. After a couple of attempts I finally get to the correct page so how I need to fix my toggle buttons. The good news is that he saved a Gist so I will try to use it as-as. But wait, there is more, I read the comments and found out that this is all built-in for the current version of the Metro UI I am using. Before I move on I have to look up who Tim Heuer is and does. I see he is the Program Manager for UI platform (XAML) and tools at Microsoft, so he is a Microsoftie after all. That makes me feel better when I depend on his code to solve my problems!

I am beginning to think it is time to visit the local Barnes & Nobles bookstore during the Thanksgiving break and read up on Windows 8 now that I have a good feeling of how things work. I need to get beyond advanced beginning stage quickly and that for me would be my ticket. I can find all kinds of stuff on the web and the MSDN site but maybe a book that covers everything from start to finish would get me over the edge.

That means it is time to go back and understand two of the examples I got working that will help me with the JSON from the secure server API. The first example is Background Transfer that connects to a server in the background and transfers the data and then saves it in a file. The second example is Json Sample which processes JSON and saves it in objects. All I have to do is learn how they work and then combine that functionality into my project. How simple is that? Turns out it is going to be a lot of work but I also have the existing iPad code to use to help me on the model code. I jumped over the Safari and tried one of the URLs to retrieve the data and boom an error resulted. That cannot be good. I went over to my Windows laptop and tried the same URL in my modified Background Transfer app and I got an error but it was a bit different. I emailed all of this information to the developer in charge of the API. When I search globally for something in VSE it always show me a line number but I have no idea what line that is in the file I am looking at so I had to look up how to enable line numbers in VSE. I selected Options in the TOOLS menu in VSE and find the "Text Editor" menu on the left hand side. Then find "All Languages" under "Text Editor" and click on "General" and I see my "Line Numbers" is unchecked. Clicking on OK results in line numbers in my editor window! Of course I can always click on the line in the "Find Results" window and it takes me right to the match, but still I am old and cranky today and when I want to see line numbers I need line numbers.

This article is good as it describes the Windows 8 Application Lifecycle.

Today was a very frustrating day. When the API secure server was having issues, I switched over to create the UI to let the user decide how much data to load and how often to update the data if is a live data feed. First thing I had to decide was which layout to use for the page. Should it be a dialog or a page? It needs to be shown initially so I choose a page. For the layout I choose a split pane. On the left hand side are the choices and when selected the right hand side shows the form that the user fills in what data they want to see. Sounds very simple but I got stuck many times in this one page. First I wanted to show a slider and customize the labels displayed when the slide thumb is moved. Apparently I am not man enough for that task as I just had to give up after spending way too much time on that. Then I thought I would add a label to display the value when the thumb was moved as a one way binding. Not that easy for an advanced beginning like myself in the world of XAML and C#. I thought my experience in 9 years ago was relevant but the world has changed under me since that time. Things are way harder than I anticipated. Then I got hung up trying to configure the list on the left hand side as a bindable resource. All of the examples I looked at made sense until I tried to do the same thing. Finally I found a way to get it to work but I am not sure it is the right way. Then I switched to the second page where I had a custom date picker. I really dislike the basic date and time pickers supplied as part of Windows 8 Metro UI. It just looks horrible. I have some special requirements for what dates are selectable so that was a he change as well. I ran out of energy and time while juggling a couple of other work related tasks so at the end of the day I felt drained and wonder what I accomplished today for this project. I cannot have too many more days like this or I am going to be in serious trouble.

From concept to reality in 6 weeks - part 7

Time to begin a short Thanksgiving week, so I need to be super selective in what I work on as I have a 3 day week to get a lot done. I have a couple of cleanup tasks that I want to get done which should be quick.

Now that I have the app icon showing up in the Start Screen, I really need to customize the background color (the default is a blah gray color) and I would like the name of the app to show up in the tile when it is big enough. I visited my client's web site and found they really like a deep blue color. I used an app called Pixie on my Mac to find the sRGB color which I see is (0.0, 0.25, 0.75). I should really know what those values are in Hex, but since I do not, I bring up my Mac calculator and switch it to Programmer mode. I enter 255 * 0.25 in base 10 and switch to base 16, and I see that is 0x40. I then do the same for 255 * 0.75 and that is 0x7d. So my deep blue color is #00407d. Now all I have to do is figure out where to make that change. I looked on the "App.xaml" file but there is really very little in that file. I know the app icon names so I search in all files for "SplashScreen" and find that is set in "Package.appxmanifest" file. When I double click on that file in VSE it brings up an editor so thankfully I don't have to edit XML directly for the settings. Under the "Visual Assets" tab I see the background color is an exciting #464646 so I switch it to #00407d for the Tile and for the Splash Screen and then run the app again. That certainly was easy. I thought the icons had to be too easy to be true. Looking at the manifest editor, I see 33 icon sizes, which nice as now I see what icons are needed. When my customer's marketing department give me there finalized icons I now know where to add them. I am going to leave that for now.

I need to fix the icons for the toggles in the bottom bar as they look pretty bad. The icons to be displayed in the map are a bit different as they all need to be the same size and the icons centered in the 100x100 canvas. I need to play around with the 4 icons that to be shown in the bottom bar. I need to fix Inkscape as it stopped working when I upgraded to Mavericks. This morning when I tried to launch Inkscape, I received a notification that XQuartz upgrade was available. I accepted the upgrade and installed it. When I launched Inkscape by opening the 4 SVG files, now everything is working. I am glad I did not waste time on that this weekend as it magically fix itself with this upgrade. I go into the Document Properties for each of the 4 vector images pages and change them to 48x48. I need to look at the original files once more time so switch to those in Mac Finder and open them in Inkscape. Now my windows are messed up as I cannot get to the top of some of the image files to move them around on the Thunderbolt display. What a pain. I have seen this before, so I have an AppleScript file I can run to fix them all. Unfortunately I cannot remember where I found the script but it is a life saver when I need it. I first had the need for it when working at home on my laptop and using Remote Desktop Connection I lost some of my windows when I reconnected at work to a Thunderbolt display. This is what the "ShowAllWindows.scpt" looks like:

-- Example list of processes to ignore: {"xGestures"} or {"xGestures", "OtherApp", ...}
property processesToIgnore : {}
-- Get the size of the Display(s), only useful if there is one display
-- otherwise it will grab the total size of both displays
tell application "Finder"
set _b to bounds of window of desktop set screen_width to item 3 of _b set screen_height to item 4 of _bend tell
tell application "System Events"
set allProcesses to application processes set _results to ""
repeat with i from 1 to count allProcesses set doIt to 1
repeat with z from 1 to count processesToIgnore if process i = process (item z of processesToIgnore) then set doIt to 0
end if end repeat if doIt = 1 then tell process i repeat with x from 1 to (count windows)
set winPos to position of window x set _x to item 1 of winPos set _y to item 2 of winPos if (_x < 0 or _y < 0 or _x > screen_width or _y > screen_height) then set position of window x to {0, 22}
end if end repeat end tell end if end repeatend tell

I just double click on it to open it and then click on the green run button and then all of my title bars are visible for all windows I have open. Wait, I have not used this since upgrading to OSX Mavericks. It will not run now as I see a error dialog when I double click on it and it says I need to open the Privacy settings with the Security & Privacy system settings as I have to authorize AppleScript Editor. Now I can run the script but it does not fix my Inkscape windows. Now I have to figure out how to fix them. I am gong to close Inkscape and try opening them again. It happened again. It worked at home this morning, so I think it must be an issue with trying to open Inkscape on the Thunderbolt display. I close everything and try it on my laptop display. No work. I then unplug the Thunderbolt display and when I reopen them it is working. For now that is a workaround I can live with as I just need a simple edit to fix the icons. I select the vector drawings and click on the "Transform..." menu item under the "Object" menu. I select the "Scale" tab and scale the object by 125%. That is not quite large enough so I do 125% again and it is perfect. I do that to all 4 images. When I am done, I plug the Thunderbolt display back in and then go to icomoon.io and delete the 4 old icons and add the 4 new ones in and then select all of the font characters and then download my new font. If I need to do the rest at now I know how to fix them easily. I check in my changes on my Mac and then switch over the Windows 8 laptop.

Since I was working on the application manifest, I need to look at that some more to make sure all of the other tabs are set correctly as that will help in the future if I have to temporarily built a Windows Store app. I click on the Capabilities tab and switch to "Internet (Client & Server)" since I am going to access data from a server. I then click on the Declarations tab and look at the "Available Declarations" drop down menu choices. I need "Search" as I saw that working within Netflix this weekend. I want the app search to look like the built-in Windows 8 search launched from the charm as that would be good. I click on the "More information" link and read the MSDN page as that seems useful thing to do. I then click on the further link "Adding search  to an app", which took me to the page that explain how to add search. I need just a bit more information as I see 4 properties in the search declarations tab but there is no explanation of what they are for or a suggestion on proposed values. I found an MSDN article that helps me sort of as it still does not say anything about the properties. I will add a task to look at this later as I need to move on. I checked in my changes for the background tile color and declaration to use Windows 8 search. I then use GitHub client SYNC to bring in the new font changes, re-built the app and the icons look much better. I would be nicer if the vectors were about twice the thickness to match what is done in the Segoe font for icons. I want to deal with that later but on Friday my customer made it very clear that he wanted everything to look super professional, so I cannot leave these like this. I re-open the 4 icons in Inkscape and now I need to make the lines at least 2 times thicker. I cannot figure out how to edit the paths to make them thicker so I reverted to getting help from the person who created them. Even though I took snapshots of the screen last week, it was not obvious enough so I had to look it up again. Microsoft created a page just to explain it - you have to click on the Windows logo key and the Prt Sc button at the same time.

Now the real fight begins. I need to see if I can add static AppBars at the top and bottom of the window that never go away and the map is between the application toolbars. The obvious thing to do is to create a StackPanel and add a top AppBar, add the map and then app a bottom AppBar. That resulted in a big time failure as the map was the size of the AppBars. The quick start guide for adding layouts, says there is a special "Auto" value for width and height you have to set but that does not work. It was odd because the Visual Designer did not show the same thing I saw when I ran the app. I added both HorizontalAlignment and VerticalAlignment to have values for "Stretch", but the only thing that always worked was to set the height of the map to a fixed number like "590". I found mention of handling the resize in code behind, so I added my first C# methods to do this automatically so my magic "590" number will be only for XAML designer. That took way too long to figure out. Now that I look at the window, I think it looks really strange without the search box in the top AppBar, so I am going to use a single AppBar at the bottom and see how that looks. This means I need a do some house cleaning and some re-arranging. I went back and read more on Grid Layouts and see it will take care of this problem for me on setting the Height so I switched StackedPanel to a Grid and created a single Column with 3 Rows. The middle row has a Height="*" which did exactly what I wanted. Now I can go back and remove the code behind. I did learn how to access the names set in XAML like x:Name="GeographicMap" as those are instance values that I get automatically in code complete! I also learned that any UI component has ActualHeight and ActualWidth, which I can retrieve. When changing a UI component I then use Height and Width and the Windows Framework takes take of the layout computations. That is nice - although it is very similar to how Adobe Flex worked with automatic layouts. The only annoying thing that always gets me is I try to change XAML or C# code when the app is running and everything is in readonly mode. I have to remember that one day. I commit the change using a Grid and then work on using a single AppBar instead. Wouldn't you know it? I have to switch back to a StackedPanel if I want to the AppBar at the bottom as Windows 8 does not like my settings with a single column and two rows where the first one has a Width="*". No problem, I know how to fix that - I am going back to my StackedPanel with code behind. Done. I like the results as it is getting better with each passing day. This time I set a breakpoint in the code behind and used the Immediate Window on the bottom to inspect some values. That is just as I expected it to work.

I need to learn how Margins work as I need a top/bottom margin that is great than the sides. So after years of CSS margins and padding, I just assumed I could enter one, two or four values for a margin. Turns out that is true, but instead of starting at the top and going clockwise, in Windows XAML I have to start on the left side and work my way around. I debugged my problem by opening the Properties panel and seeing what it did with my margin values by filling in the Margins in the Layout section. Yet another thing learned but will be very difficult to remember after years or training to do it the CSS way. I am very happy with the result as I have nice balanced single application bar at the bottom of the window that is in a fixed position. For instance if I have a Margin="20,45,20,15" that means 20px on left, 45px on top, 20px on right, and 15px on bottom.

I finally have this google thing down as I always start with "msdn windows 8 quick start guide " and then add what I am looking for and that always gets me where I need to go quickly. I have had several other things going on today that has caused some interruptions that have slowed down progress. I had to talk to a potential customer, and talk to a partner that may help me build this prototype. I also had to come up with ideas for marketing literature to help gather even more UX business.

Meanwhile back at the ranch, I need to finish the steps to build an executable that works on another machine. I have to go thru the steps to "Create App Package" again since I have changed the app. While waiting for all of the steps to validate I have more time to write down steps I am following using the steps in this article. This gives me plenty of time to read about the next step which is signing the app.

The first thing is to locate the output folder created by the "Create App Package" task, which is:

c:\users\rick\workspaces\\\AppPackages\_1.1.0.0_x64_Test

The actual folder names have been changed to protect the customer in the above folder location. I then right click on the file "Add-AppDevPackage" and select "Run with PowerShell" from the menu. It opens a shell window where it asks me "Do you want to run software from this untrusted publisher?". Of course I trust the publisher as it is me! Quickly it finishes and prints the following, which is music to my ears:

Success: Your app was successfully installed.

Now the problem where is my executable that I can give my customer? I read the rest of the series of documents and it still is not clear to me so I have to go back and see if I missed it somewhere. It looks like I am really done and so I zipped up the folder and noticed the size was a little under 7 MB. We will see if that actually works.

Tomorrow is a big day as I get to retrieve the data from the secure server and display it on the Bing Map. My goal is to be done with that in 2 more days. Definitely achievable if everything goes smoothly.

From concept to reality in 6 weeks - part 6.5

I woke up early today and even though this is Saturday morning, I thought I would go a couple of things and then call it a short day.

The first thing I need to do is fix the Git repo. On my Mac and verified again that it was hosed. I already know it is messed up on Windows so no need to look at that again. By messed up I think I must have created a Git sub-module. No need that silliness so I am just going to delete it and try again. I copied the README.md from the project onto my Desktop. I went to GitHub and deleted the project. That big red button sure looks dangerous they show at the bottom of the Git repo settings. I like to live on the edge so I push it anyway. I then go over to my Windows laptop and copy the VSE files onto my desktop and delete the repo folder as it is totally worthless. I then go into GitHub and create a brand new repo setting the .gitignore to "CSharp", which does everything I need. I then access the repo on my Mac, move the README.md from my desktop into the repo and check it in. I then switch to Windows laptop and use the GitHub app to unpin the old repo and then clone the new one. I go into that folder and move the files from the desktop into the repo. I double click the solution file and clean and force a build in VSE. I also run it to verify everything looks good. I then check in all of the files and switch back to my Mac to make sure they all appear as I expected. Kind of took a while but now I feel much better as my files will not get lost. Not that it is a lot of work, but still.

Next up is making a temporary icon for the Windows 8 app as I am tired of seeing a while box with an "X" in it. It is should be easy to make one quickly like I did for the iPad app. In the VSE project I see 4 default icons. I use the UNIX "file" command to see the size of the files:

Logo.scale-100.png:         PNG image data, 150 x 150, 8-bit/color RGBA, non-interlaced

SmallLogo.scale-100.png:    PNG image data, 30 x 30, 8-bit/color RGBA, non-interlaced

SplashScreen.scale-100.png: PNG image data, 620 x 300, 8-bit/color RGBA, non-interlaced

StoreLogo.scale-100.png:    PNG image data, 50 x 50, 8-bit/color RGBA, non-interlaced

I go to my handy findicons.com site and enter some keywords and make sure the commercial-use free box is selected and that the transparent background is selected. I find two icons that look reasonable. I save all sizes to my desktop. I then use GIMP to composite a new icon with a transparent background. I start with 150x150 and then scale that one down to 50x50 and 30x30. For the 620x300 splash screen I take the 150x150 logo and then add the company text to the bottom. I export all of the logos to PNG, saving the appropriate names and I am done. I check in the files on my Mac and then sync the repo on Windows and verify the splash screen works and it does! Now I have to figure out how to add a tile to the Metro Start Screen to verify the logos work. It is just not obvious to me how to do that, so I go look up how to do it. That is pretty sad that I have to look it up, but I find the simple and yet no obvious to the casual Windows 8 user like me what to do. Once added properly I see my icon in the tile and I am done with that task.

Since I am moving right along at the speed of Windows, I think I will try to build the app so it can be deployed on another computer. I have no idea how to do that so I search in MSDN for some help and find two lines telling me just how easy it is. Not sure I would have ever figure out those simple steps but I am happy someone found it. I click on the link to "Create App Package..." thinking that I am done and then I see a couple of screens to sign into my Microsoft developer account. I am really expecting success when boom, a big red X of death comes up and tells me:

Your Microsoft account is not registered to submit apps to the Store. To register or check out registration, go the the Windows Developer Portal

I click the link next to the text thinking that will help me. Wait, I am already logged in on my Mac, so I search for help on how to do this. Took me several minutes and finally I found the right page and when I clicked on the Proceed button at the bottom, nothing happened. I opened my Safari console and saw a message an unrecognized character caused a javascript error. I guess I have to do it on my Windows laptop so I switch back over there. This is getting kind of out of hand all of the switching between my wonderful computer and the other one. I am given two choices to register, I can either pay $19 for developer account or $99 for corporate account. I tried the corporate account and that was horrible as it expected me to work for a real company and they would contact an officer of the company to verify I worked there. I guess they don't want my $99 so I switched over to the cheaper $19 version. I am not about to give away my credit card number so I go to my bank site and create a temporary ShopSafe number for the huge $19 charge. Just when I think I am done, the page says I have to validate my charge before I can use the account. I have to check my on-line banking account and check for the MFST charge and enter the code in the developer form. Then I am finally verified and ready to go because I see a page with the text:

Payment account verification 

We successfully verified your payment account.

That took me about as long as it did to find the Git repo and create the icons. Did that really have to be so painful? I then go back to VSE and click on the Retry button hoping for something good to happen. I guess something happened as I have to sign in again to my Microsoft account. This means I also have to "Help us protect your account" but waiting for an email before I can actually login. This is like a virus preventing a virus. I switch over to Mac to check my email, go back to Windows to enter the code and finally I see something good in VSE. I should have timed it but it has taken me over an hour to get to this screen. I have to reserve a unique name in the Windows Store. This is exactly the same problem on the Apple Store. I created the iPad app using my Apple developer account and then we have issues getting it transferred to their enterprise account. This is a prototype, so I am going to ignore this for the second time in the Windows Store and just keep going. The name I choose was not reserved, so I am good, except I see "Package identity in the Store" has a value of None. What is a package identity anyway? I searched for the answer in MSDN and was taken to a developer page that had way too much details for at this stage in my life. I just click the Next button and will ignore that for now. I see they want me to enter a version number but it defaults to 1.1.0.0, so I change it to 1.0.0.0 since this is my first version and I see an ugly red X again, so I quickly change it back to 1.1.0.0 and forgot I ever saw the message. Below that I get to choose what configurations I want to create so I check both "x86" and "x64", but leave the "ARM" box unchecked since Bing Maps do not work for that configuration as VSE warns me when I create a new project or try to load and example that I must set a valid CPU type. I click the Create button and the dialog goes away and I see the Output Console showing that things are building. When it is done the dialog pops back up as everything was successful! Yeah, wait I still have some more unknown number of steps left. Now VSE wants me to "Launch Windows App Certification Kit" to validate my app adheres to Windows Store requirements. I say a high chance of success since my app just is a UI at the moment but this may get interesting. The dialog goes away, I see a modal message popup which I have to accept, I see a DOS window flash up and then the kit is installed on my laptop. I then see a dozen check boxes all checked of things to verify. I leave them all selected and click Next. This process seems to have no end in sight. If the app fails I am going to call it a day. I am going to give up either way actually. I see the app appear on the screen and I tried to close it by mistake. The app validator is gong it automatically when the tests are running. The second time it appears on the screen I just leave it alone. I think this is going to be a weekly thing right before the iteration meeting as this is pretty darn exciting waiting for it to validate my tiny app that does nothing. Maybe next time I will uncheck everything and see what happens. Hopefully most of the time up until now will be first time setup stuff I am seriously hoping that way at least. Now I am beginning to think everyone of those checkboxes requires the app to start up and then be closed. I actually am beginning to like the idea that I have a tool to help me know the Windows 8 app is working properly. On Apple Store submissions you are at the mercy of an Apple employee to run an internal Apple app checker and to tell you why the app was rejected by responding thru iTunes Connect and then you try to re-submit it and hope you did not add anything to make it fail the second round. I finally see the infamous "We are almost done" message and the dialog changed appearance so there is hope. And then the "Overall Result PASSED" in green! I click the Finish button and the dialog closes. Oops, I think I just submitted the app to the actual Windows Store. I think I clicked on the wrong button somewhere as I wanted this to build a local app only. Now I have to figure out how to delete my app from the public Windows Store. I clicked on the Window Store tile and search for the app name and it did not find any matches, which is good. It never ask for price or categories so maybe it did what I wanted after all. Now I have to find where the package was saved to send it to my customer to see if he can install in and get it to run. Hey, I found the MSDN page that describes how to do what I just did. I think this article describes what needs to be done, but that is enough for my half day.

From concept to reality in 6 weeks - part 6

First thing up for today is that I am going to meet the customer at 9am for our kick off meeting. I have worked this customer before when creating the iPad version so I don't have the first time meeting jitters. I filled out the Kanbanery board with just enough details. All of the things I have done so far as preliminary work. I filled the backlog with the 9 general features that need to be working at the end of the 6 weeks - along with screenshots of the iPad for each feature. I added a task that I am working on now to come up with the UI for all of the screens that matches Windows 8. I also added a task for the 3rd party mapping engine we are using to track their progress. Definitely more than enough information for the first meeting.

Now I have to create a Keynote presentation that we like to use in our weekly iteration meetings that shows the features and when the customer can expect them to be working on a time line that matches our 6 weeks of work. Now that is scary as it appears to be so little time when you look at it that way. In preparing for the meeting this morning, I started looking at the Windows 8 UX guidelines again in case I missed something. I can fuss and complain all I want about the difference between Apple and Microsoft but I must say that the documentation that Microsoft has created is some of the best I have ever seen. Apple's developer documentation is good and Apple's UX guidelines are great and I have used them both to help me in the past, but everything I have seen so far from Microsoft is just great. Their examples are first class. The getting started guides are so extremely useful. The developer documentation is good. It just looks good, helps me get my job done and I can always find what I want.

For instance, this morning I thought I should show something to the customer on what I think the UI should look like. Instead of struggling thru the VSE visual editor, I thought I should do a wireframe. I have used Balsamiq in the past, so I search for that in the documentation and I am shocked that Microsoft has created a full set of templates just like I need. Wow! The biggest struggle so far is what do I put in the navigation bar and what should always be visible. I have 4 different tabs that change the content along with filtering and searching. Can I find some guidelines that help me make that decision? It turns out that I do in the Command patterns documentation. I found that page as I was quickly navigating thru the Getting Starting Guide and went into the Developing Windows Store App for C# page. The first item was UX Patterns which sounded like just what I wanted to read about. Along the way I found a great set of quick start guidelines one of which was how to load and save images as I will need that for the many icons I have to create. There was also a quick start guideline on connecting to web services which is just excellent as it also links to sample code. I still had one unanswered question about deploying this app on a device without using the Windows Store. That is a big deal and I need to think about it now so when the customer asked me today I have the answer. At the top of the documentation is a search box so I search for "beta testing". The very first search results match is exactly what I wanted! The person asked the question if there was something like TestFlight for Windows. Problem solved. You just build the app getting it ready for the store and then when it asks if the app should be published in the Windows Store, you say no and then the output can be distributed to whoever I want. Wow, that is easy. I need to try that one out. The documentation just flows as I expect. When I need to create an app, there are always things I have questions about. The only complaint I have is that it would be nice to have more screenshots of what the UI control looks like directly in the C# API documentation. For instance, when I go to the Slider documentation, I don't see a single image. Microsoft has just got out of their way to document what I need!

So let's do a Balsamiq mockup before the Keynote presentation, since I will use the screenshots of the  mockup in the presentation. Another reason to do this is when I opened Keynote I got a notice that a new version was available. I opened the App Store and see that Keynote, Pages, Numbers and iMovie all have updates today. So I started those updates and will wait for them to finish. I open Balsamiq and see it needs a new version of Adobe Air. No big deal, I just close Balsamiq, run the Adobe updater and then reopen Balsamiq. Since I am curious, I go the help menu and select "Download more controls (Mockups to Go)". I scroll down in Safari to the bottom of the page and see Windows 8 has 7 templates. These are the same that Microsoft provided. That is just what I expected. I followed the same set of instructions when adding the iPad/iPhone controls to Balsamiq so it was easy to get the Windows 8 templates working. It took about 2 hours to create the 3 Balsamiq mockup screens, along with the Keynote presentation. The hardest part about the presentation is proposing what will be done in each of the 7 iterations that makes sense and is doable. It will all change over time and initially I am sure my estimated tasks per iteration will be wrong, but as long as I finish it will be good. Talking to the customer all along the way to make he knows when things slip or change is key. There will be tradeoffs all along the way I am sure.

Back from a successful meeting with client. Communication is the most important part of delivering a product to a customer. It is absolutely worth it meeting each customer face-to-face for important meetings. It does not have to be done daily, unless of course you are at the same location, but for a kickoff meeting it is essential if at possible. Is was especially worth it since I showed him a couple of examples to bring home the point that Windows 8 is very different visually from iOS. We will have to make some tradeoffs as we want the app to look like a Windows 8 app but still provide the features like a CommandBar (at the bottom of the window) and an AppBar (at the top of the window) that are always visible.

Now back to where I was earlier today. I have a map expanded to fill the window horizontal and vertical - now I need to add both a CommandBar and an AppBar and for this I use yet another quick start guide. So far great success as the MainPage.xaml has built-in properties for both TopAppBar and BottomAppBar. If I click on the "New" button then VSE automatically creates them. All I needed to do was check both "isOpen" and "isSticky" to make them both appear by default in the black background colors. Then I tried to put buttons in the BottomAppBar and things just felt apart. I got the error 'The property "Content" can only be set once" when I added AppBarButtons as children of the BottomAppBar. That certainly made sense to me and that is what the quick start guide showed for CommandBar. Now I see what happened, I need a different mechanism for an AppBar so I have to use a Grid to say how the buttons expand. Makes sense kind of as the documentation did say the app was responsible for managing resizing for AppBar but not CommandBar. Now I see what they mean. Manage means figure out the cystic error message in VDE. This certainly can be frustrating figuring out something new when it seems like it should work but it does not and the error messages don't help. Something VDE gets confused and the secret was when making major XAML changes, I have to rebuild the project. Wow - now that reminds me of working with Eclipse editing Flex ActionScript and many years ago the same thing in Java. At least now I just have to remember if I get errors that don't make sense, then hit F7 to rebuild. Not what I expected but it does work and I see my buttons. Now I must figure out how to add SVG images to the buttons. Hopefully that just works - nope.

Now I get to discover how to convert an SVG file into an XAML path so I can use it for my app icons. I found in the Image class under the Remarks section it says only JPEG, PNG, BMP, GIF, TIFF, and ICO formats are supported. That is a bummer. My Inkscape app stopped working, which I assume is a feature of switching to Mavericks. I updated my X11 server and re-downloaded Inkscape and not such luck. I am going to try using Gimp and see if it will export to XAML format. That sure would be nice, but I have so many SVG images that I need some way. I tried using ImageMagick "convert" command and that did nothing useful - no error just an basically empty file. Definitely Gimp does not support XAML format, so I tried exporting to ICO since that is one of the supported formats. I tried to use the ICO file for the AppBarToggleButton, only to find out that the documentation says those type of buttons only support FontIcon, PathIcon and SymbolIcon types. When I was just about ready to give up on finding a tool to convert the SVG to XAML paths, I found a tool that lets me create a Font from a series of SVG files! Now that makes me happy. Then I found someone who explained how to add a new font to VSE and I also needed to following these directions. And I have victory and success at the same time. Not sure there is any difference between those terms but I am just so happy that I got it to work! The tips to getting this to work is to use icomoon.io to create a new font, then import all of the SVG files and then download the resulting fonts. Visual Studio and Windows prefers the TTF file. I created a new folder for the project called "Fonts". I added the "icomoon.ttf" to this folder using VSE. I then make a note of the HEX values for each character in the font and when adding an AppBarToolButton.Icon property inside the AppBarToolButton in XAML I add a reference to the FontFamily as "/Fonts/icomoon.ttf#icomoon" and then add the Glyph as a HEX value like "". DONE. I went ahead and all of the SVG images I know I will need and recreated the font file. This time I know to be patient about the SkyDrive since it takes a while to sync from my Mac to the Cloud and then become available on my Windows laptop 3 inches away from my Mac!

I needed a small encouragement so I looked up the BingMaps API to figure out how to center the map in the geographic center of the USA. That means I had to find the latitude and longitude for that coordinate as well. That was easy by using Mrs. Google for "geographic center of USA in latitude longitude", which returns it as 39..8282 N, 98.5795 W. I also need to fix the map so it is inside the top and bottom AppBar components since it is current underneath it.

To end of the day I had some serious Git issues checking in all of the changes I had made today. Otherwise I would have been home a long time ago.

From concept to reality in 6 weeks - part 5

Today I am going to to switch and work on the Windows 8 Metro UI for all of the screens. This is going to be time consuming process since I need to hook up all of the screens together into a logical app. Then I can add the code to get the data from the server and display the results on a BingMap. If I can finish all of this before Thanksgiving Day then I am going to feel much better about my chances for success at the end of the 6 weeks. I am on day 5 out of 30 working days so it better all come together soon.

I head over to the Microsoft Developers Network (MSDN) site and use the faceted search to filter down to the exact examples that I need related to Visual Studio 2013, C#, XAML, and User Interface. That leaves me 23 results, all of which I have already downloaded on my laptop as part of the 300 MB download. The following are examples that cover everything I need:

1. Basic Controls - list of the typical form controls available in XAML
2. AppBar - I definitely need a application control bar (hopefully there is a way to make it always visible or I could just default it to normal behavior that you have to swipe to see it)
3. Date and Time Picker - I am not a fan but I am going to start with this (yesterday I saw many 3rd party component libraries that had nice ones, so maybe one day I will use one of them)
4. Popup - I may need a fly-out popup dialog
5. Perpetuum Software - received a support email last night and need to try adding package to an existing project instead of using it directly

Time to create a new Git repository to store all of my prototype files. I already have GitHub client on my laptop so that was easy as I went to GitHub.com and created a new repository and then open GitHub on my laptop and the repository was there so I cloned it - done. I see it put the repository in C:\Users\Rick\Documents\GitHub\ folder. That is not where I want to put it. I see a gear icon next to "tools" at the top so when I click on that I see a menu and at the bottom of the menu is my "options..." choice. I clicked on that and see I can change the location of the "default storage directory". I thought it was a dialog since the GitHub client grayed out the left side which was white and the dialog has a black background and is on the right hand side. I clicked the "X" in the upper right since I thought it was a dialog and it closed the GitHub app. Opps, I guess I need to watch out for that in Windows 8 apps. I opened the GitHub client again and went into options and I see a nice dark gray Cancel button at the bottom left of the black options box, which is what I was supposed to click on. Not going to make that mistake again - wait, I am sure I will. I then go back to the main GitHub window and I cannot find a way to delete the repo and start again. I right clicked and then selected "stop tracking this repo" and the repo displayed from the list. I then clicked the refresh action in the toolbar and it reappeared, so that is good. I then opened Windows File Explorer and when to the C:\Users\Rick\Documents\ and deleted the GitHub folder. Back in Github I click on the clone action next to the repo and it put it where I wanted it to go this time in C:\Users\Rick\workspaces\ folder. If I click on repositories at the top on the left hand side, I see my cloned repo. I click on the stickpin to make sure it stays there. I right click on the repo and select "open a shell here" and I get a new Windows Power Shell opened to that folder. That is nice as I can check in my files that way, since VSE wants me to use the Microsoft Team Foundation stuff and has built in hooks for it.

When I jumped over the VSE to create a new project, I had to make a decision on whether to create a Blank, Grid, Hub, or Split app. As you click on each template it provides a very nice description on the right hand side along with a visual wireframe of how the template will appear in the app. I found this more detailed description that helped me make my decision that I need a custom template so I need to use the Blank project template. I checked the box to add to source control and the dialog popped up for me to select Team Foundation or Git - that was an easy choice! I then noticed that VSE  used the name of the project to create a different folder than the one I had created at github.com. I had to go into Git Shell and fix that problem by moving the files created by VSE into my github project. I closed VSE and opened the project in the new location and now I am ready to go.

The first thing I have to do is add "Bing Maps" as an external reference. Now I want to figure out how to add Perpetuum controls, but I am going to leave that for later as I can live without them for a while. Wait, I see a flag in upper right hand corner of VSE and a 2 next to it. I click on it and they are notifications. One is an update to NuGet Package manager which is familiar to me since that was where my problem loading Perpetuum was located. The only bad news is that the update requires a restart of all of my VSE windows (I currently have 4 of them open). it was quicker than I expected. The second notification is to update Help content. I haven't used the help feature yet, but I clicked on it and it opened the Help viewer. This is very similar to one in Apple's XCode IDE, so it will probably be useful at some point. There are three new document packages to be installed. As the update started at the bottom of the window I see there are actually 43 packages so I guess my assumption from the changes window telling me there were 3 was not exactly correct. That is going to take a while so I am going to switch back to VDE and do some work.

I clicked on the "Toolbox" vertically rotated text on the top right edge of VDE and it opened the list of visual elements I can drag to my MainPage.xaml file. Bing Maps are there so I have everything setup correctly, thank goodness. I drag it over to the design canvas and see a bizarre message that looks like an error with a big red X icon to the left of the text. It tells me to click the OK and wait for designer to restart, then I can re-create my map on the art board. How odd. Problem is that it still does not work and every time I drag the map to the art board I see the same message. I guess it is an error after all instead of just a one time setup problem. Stack overflow had the answer as I was not the first person to see this error. The whole problem is that I need to set a specific CPU configuration as Bing Maps does not support the "Any CPU" configuration. After changing that, I am able to drag a map onto the art board. I then stretched the map to fill the whole grid system which I turned on so I could see it. The border turns a red/white stripe to want me that I right at the border. This is kind of similar to the Apple Storyboard affordances for auto layout. When I build and run the project I see the big white message across the middle of the map that I need to sign up for a developer account. I then skipped over to my Bing Map examples I have working and copied the "Credentials" line into my XAML file. I noticed that it has hardcode weight and height so that cannot be correct. I need something like 100%. A quick Stack Overflow resulted in the wonderful "Stretch" attribute value for both HorizontalAlignment and VerticalAlignment.

I gave up on trying to use the mouse to close windows as it is just too difficult to hit the top of the window when my primary monitor is below the 1080p TV monitor screen. I looked up keyboard shortcuts on line for Windows 8 and found Alt-F4 which works every time. Now I can easily open my apps I start from VSE on the 1080p TV and then close it using the keyboard.

Lost some time on internal stuff for work that was unrelated to this project so only have spent half a day so that sets me back a tad. I have to make up for it tomorrow. Before going home, created a Kanbanery board since that is the tool me use to manage Agile projects using a Kanban style. Added tasks for all of the the things I have done in the past 5 days related to this project. Created 9 tasks in the backlog that describe the whole app as general stories. After I finish the Metro UI design, then I will take each of those and break them down into smaller more manageable tasks. Right now the key is showing progress each day so the customer can see that visually with tasks being completed and moved to DONE column.

From concept to reality in 6 weeks - part 4

This morning I need to check on a couple of things. First thing I need to check on progress being made and the time left. It may seem that 6 weeks is a lot of time but that is essentially 30 working days. I have finished 3 days so I have 27 days left. Not enough time but I have to make due with what I have.

• Day 1 - setup laptop
• Day 2 - get development environment working
• Day 3 - get Bing Maps working

Speaking of Bing Maps, I need to check on my usage after one day of testing maps. I ran a report on the Bing Maps Portal and turns out I must be getting free usage as it said "No Data to Report", so I guess that is a good thing. Maybe it was a bargain and I get the first day free!

I have a choice to make this morning as I could explore Bing Maps further to figure out why I could only get one of the GPX files to work as all of the others failed miserably by crashing the test app. That would be good to know and if I could get multiple files to work then I could load them all at the same time and see if Bing Maps is still responsive with thousands of poly-lines and points on the map at the same time. This would simulate the actual case I will encounter soon. For now I need to leave that for another day as today I must get the real geographic location data from the server as that is still a big unknown. A lot of things are unknown at this time but at least I have a sense for what needs to be done now. Last week I explored the Windows 8 Metro UI components and after using several apps, I see how the app should work.

Before going further I need to set up SkyDrive on my Mac so in the future I can find files on my Mac, then save them to my SkyDrive and see them on my Windows 8 laptop as that will save me time. I noticed when I went to the SkyDrive site yesterday that a message at the bottom of the window offered a free app to help me do just this. This should be interesting as I already have DropBox, Google Drive and now I get a Microsoft way of doing the same thing. The good news is that I am predicting a quick install and no reboot required as opposed to what I have been seeing the last 3 days. Just as I expected. What is so strange about this for me is that Microsoft can create an easy install and setup on a Mac and yet make some things so painful on their own computers. After just a couple of minutes I see the blue clouds in my Dock and open the drive and I see my GPX files I was working on yesterday. Now I can search for example code on my Mac using my nice 27" thunderbolt display and store it in the SkyDrive.

I immediately go to the Windows 8.1 app samples and start looking for my perfect example of accessing a server to retrieve JSONP. I see so many hopeful examples so I go back to my laptop into the folder where I downloaded all of the Windows 8.1 samples. It is so tempting to open the DirectX and Direct3D apps as the names look so interesting and I am so curious, but I resist the temptation and skip over them (there are tons of them so as I scroll thru them I have to constantly ignore so many fun things), but then I see tons of HTML and JavaScript examples which I also must resist and keep going until I find the Json Sample. After double clicking on the project file and clicking on F7 to build the project, then F5 to run the project in the debugger I see a window to enter JSON at the top and the bottom has the parsed results and I can do the other way as well. That is pretty nice. Now I have to look at the code to see how it all works... Actually it is easier to read on the Thunderbolt display as I can browse the source code on line for the JSON example.

I accidentally hit the Windows key on my laptop and I just cannot figure out how to get back to the JSON app. This is not the first time this has happened to me. I right click on the menu bar and see the app running in the Task Manager and I can select the app in the list and it comes back up on the screen. There must be a way to cycle thru apps. Right, now I remember it is Alt-Tab on Windows. That is one annoying problem solved. I should have recalled that one, but Windows 8 is so different from Windows/XP that I used for many years that I just don't assume things I used to know still work.

Time to take a quick C# refresher as the first thing I encountered that I don't remember what it means is "jsonObject^ jsonObject" which I assume means a pointer, but I have to check on the Wikipedia summary article for C#. At least C# supports a goto statement so that is an advancement back to when I first saw a computer 35 years ago! Similar to Objective-C, you can use "C" in C# so I get structs and enums. Good news, I don't have to worry about adding a "@" as in Objective-C to create a Objective-C string so it is different from a "C" string, so C# is less confusing in that regard for strings. I also don't have to force boxing as in Objective-C by adding "@" to convert a int to an Integer, so C# has already helped me twice as it auto boxes. Unfortunately the Wikipedia article did not mention the syntax I was looking for, so now I have to find the explanation on the official C# page. It turns out that it is harder to find that I expected. After looking up pointers in C# I finally realized I was looking at C++ code. But it did not hit me until I looked at the actual code I was using in VSE and saw it was different from what I was looking on on the web site. I missed the tabs on the left hand side, which defaults to C++, so I switched it to C# and now I feel better about what I am seeing. It is amazing how much easier it is to read C# and C++, but then again maybe it is because I have never done C++.

Then I move onto to understanding the XAML file. Unfortunately for the example code I am looking at, the Metro UI elements are dynamically filled in at run-time so the visual C# editor does not help me understand what is going on. I don't miss the days of XML so that it going backwards for me. I am going to grin and bear it as XAML is THE way to do visual layout in C#. It reminds of the in-house XML based tool I used a couple of years ago to generate iOS iPad/iPhone screens which was built using XAML principles for grid layout and relative sizes. It was a precursor to the XML that Apple created which is behind the iOS storyboards. The big difference is that I never need to know or see the XML for iOS storyboards.

Now this is something I guess I never knew about Windows. To bring up the global find dialog in VSE, you have to type the shortcut of Ctrl-Shift-F or so the EDIT menu says. But I have to actually type Shift-Ctrl-F. I guess I just never realized or cared to know that the sequence of keys clicked matters. I really still believe it so I have to try it several times by clicking on different places in VSE to select the different views. Sure enough only Shift-Ctrl-F ever works. I still think this has to be a bug in VSE or a mode problem that I need something selected or not selected for the find to work. Anyway, I finally found how the "S1_ParseAndStringify" XAML file is loaded as that is in the partial class "Constants.cs" - that was odd and hard to follow how the XAML file was loaded in the "MainPage.xaml" but now the mystery was solve by using the global find dialog. I think that is enough learning about C# to get me going.

I need to get back to figuring out to transfer data from a remote server. Good news, I found an example where I can enter my remote server URL and get the data. That sounds like a perfect place to start so I load the Background Transfer example in VSE. Now I am losing the little of confidence in VSE that I had. In the example, there was a URL that I wanted to change to the secure remote server URL. I kept trying to find ways of editing the Visual C# view and then I tried editing the XAML file but nothing happened. VSE would not let me edit either one. I then searched the web to find an explanation of how to do this simple task and found an explanation of how to edit XAML. That just does not seem right that I have to read how to edit a file. Turns out you have to launch another tool called Expression Blend. This is the kind of product fragmentation that I thought was way too over kill when I first used Visual Studio over 8 years ago. Apparently that was not fixed and has gotten worse over time. Maybe my Visual Studio Professional will fix everything for me. One more slip like that and I am going for broke and start using Pro! I save the changes in Expression Blend and then close it and go back to VSE. I see a message telling me the file I am looking at was changed and it asked me if I want to reload the file with the changes. Of course I say yes. Then I see the visual part of the XAML file did not change. I did not think about it and hit the F7 key to build the project. Then magically the view changed to match the XAML file I saw had my changes. I looked at the file in VSE and see a lock in the tab and hovering over the icon I see the full path to the file and "(Read Only)", so that explains everything. Then guess what? It worked like a charm when I ran it, wait I cannot use that word as it means something else in Windows 8. Now all I have to do is find the file on the file system somewhere. I quickly go to Windows File Explorer hoping that it can help me and search for "DownloadedFile.txt" on "This PC" and finally near the end of the search it found the file for me! It was located in "C:\Users\Rick\Pictures". When I looked at the code behind I thought that is where it would be as I saw this line:

destinationFile = await KnownFolders.PicturesLibrary.CreateFileAsync( 
                    destination, CreationCollisionOption.GenerateUniqueName);

I doubled clicked on the file in Windows File Explorer and the file was loaded into Notepad and I saw the correct contents. Now we are in business as I know how to connect to a remote RESTful service and get my data.

I want to check on one last tricky part that is required for the final prototype, since I want to explore all of the most difficult parts of the app at the very beginning. After geographic maps and getting data from a secure remote server, I need a range slider which I don't think is part of the standard Metro UI elements. I either need to make sure it does not exist already or be able to find one publicly available that I can easily use. When search for "Windows 8 Metro UI" in Google, the first match is quite amusing as it explains how to get rid of Metro on Windows 8. The second link I clicked on was CSS to convert Twitter Bootstrap to look like Windows 8 Metro. Once I added "MSDN" to the start of that search then I started finding interesting things, like the Font-Awesome equivalent for Windows 8 Metro called Seqoe UI Symbol font. I will need that later one for sure. That reminds me I need a way to render SVG files on the map so I need to check on that today also. I found an example that draws a path at a GPS point, so that will work just fine - this example uses Silverlight but should be easy to replicate in C# as I just wanted to make sure it was possible.

I have searched and researched and found no such slider component. I then recalled using Infragistics many years ago and low and behold they are still in business; however, they did not have the dual range slider component I was looking for. I then reverted to using StackOverflow and found a page that listed useful 3rd party components for .NET development. Component Factory was WindowsForms so not what I need to use at all. Telerik has some nice looking components but not what I needed. ComponentOne has tons of great looking components, but still not the one I needed.
Peter Blum's site had many components but nothing that looked worthwhile comparing to the others already mentioned. I am definitely seeing a trend as viblend has several of the components I had seen previously with the Calendar being the most common shared one among them all. The last one was DevExpress and it sure was proud of all of their awards and they listed them as huge images at the top of their page. Unfortunately they also brag about their $499.99 price tag and that is pretty scary to me. I like their list of components and they have a Spark Range Selector that matches what I need. What I really need that I am missing is a Date Picker and Range Slider. Maybe I am not searching for the right text. If I search in Google for "Spark Range Selector" then I find tons of Adobe Flex 4 Spark components that match what I want. That brings back memories from 5 years ago when I wrote Flex components for an app and now I remember that "spark" was the name for the version 4 UI components Adobe delivered. Not going to help me now. I go back to Ms. Google and search for "windows 8 range selector" and find that Telerik has the exact one I need as well. My sticker shock is increasing as their Windows 8 .NET UI Control Suite is $999. Hey, if I want all of their components it would normally cost $7,739 and I can get them all for the bargain price of $1,999. I think I need to find another solution quickly. I found a free one I am going to try that I found using Google called Perpetuum Software as they have the dual range slider I need. I keep searching and found what $399 would buy me from Syncfusion. I am going to give up and try the Perpetuum components since they are free without support. Now I am loosing confidence since I could not down their components on Windows as the sign up form never appeared! I go to my Mac and access the same page in Safari and it works. I downloaded the license and the standard version of their components and put them on my SkyDrive. How odd is that? If I can get the Range Slider then I will put up with such foolishness. My folder never showed up on Windows 8, so I just moved the files out into the main Documents folder and they still up. I guess I was not patient enough as they finally showed up after I had already moved the files out of the Downloads folder. I extracted their files and when I tried to load the package in VSE I got an error so time to give up for the day. I tried to chat with Perpetuum but it said the chat service was not available so I sent them an email. Maybe tomorrow I will come to work and everything will be fully explained in the reply email - at least I can hope but I seriously doubt that will happen.

From concept to reality in 6 weeks - part 3

Last night I went by BestBuy to buy an HDMI cable so I can test my apps on the 1080p TV at work to simulate the actual device that the app will have to run on that I am building. Those cables are common and come in all lengths and quality of connectors. I choose the 8 foot rocket fish brand since it was the cheapest. I also asked if there was any non-Apple computer sold at BestBuy that could drive a Cinema or Thunderbolt display. The response was shocking to me Apple tuned ears. The sales person took me over to the Windows Surface 2 and showed me the mini display port. This morning I had to look that up to see how Microsoft marketed it in the on-line brochure.

That was a side note as today's task is to get a Windows 8 app built. This totally acceptable since it is early in the project and this change of direction is to be expected and embraced. Now if that happens a couple of weeks before the product release then I will not be nearly as happy. It is good news for me since I looked at the Visual Studio Express device menu and the choices are very limited. I see 4 different devices in the emulator none of which are close to 1080p. The choices are "WVGA 512MB", "WVGA", "WXGA", and "720p". I am happy to move to building native Windows 8 apps, so I must find some example code for maps as my first working code in VSE for today.

Since I already have VSE installed and working, I just need a different SDK loaded on my laptop. I also found another useful page on the MSDN portal. In my initial exploration, I seem to always find two pages that describe the same thing in two different ways on Microsoft web sites. In this case, the later page had the link to the latest Windows 8 SDK dated 17 October, 2013. As before the initial download was very small and the actual SDK is 1.6 GB in size, so I quickly connected an ethernet cable in hopes it would make this go a bit faster.

Then I find out that they are many Visual Studio Express products. Thank you Microsoft for helping me easily develop the same product on multiple platforms. I must now download Visual Studio Express for Windows as I have Visual Studio Express for Windows Phone working on my laptop. This is definitely not what I expected. When I click on the correct download link, somehow the form filled in my email address and nothing else. I have to retype my "Full name", select my "Country/Region". I just entered this stuff two days ago and already it has forgotten me. Maybe if I paid for the Ultimate version then it would remember me! Wait they have a 90 day free trial for all of their products and I cannot find the cost anywhere on the web site. I am supposed to be done in 6 weeks so I could actually use any of them, if only I could figure out what is different from Visual Studio Ultimate, Premium, Professional or Test Professional. Only Visual Studio Express has the distinction of a Web, Windows, and Windows Desktop versions so maybe they would help me one day. I did learn that Microsoft also has a special program called BizSpark which is for startups to get 3 years free software and support. As I open the accordions on the Visual Studio page as quickly see from the first paragraph what each offers and the Professional version allows me to create all different apps in a single IDE. I am going to keep going with Express for now until I see a need to get a more complex product as I am sure the Professional version will have all kinds of things I don't need and will not use.

When I download the VDE for Windows, this time I went out on a limb and signed up for a personal account (https://attentive2design.visualstudio.com). As the download was working, a form popped up on my screen asking for a project name, description and let me connect to either "Team Foundation Version Control" or "Git". Wow, that is a really hard choice. I can use Git and the GitHub client I installed on the laptop of figure yet another Microsoft tool for version control, that probably easily integrates into Visual Studio. So Git it is. Then I get another important choice for a "Process template", none of which are really appealing to me: "Microsoft Visual Studio Scrum 2013", "MSF for Agile Software Development 2013", or "MSF for CMMI Process Improvement 2013". I can definitely say the last one is scary but maybe because I have no clue what it means. I could look it up but I have zero interest in knowing. I have done scrum before but not I do Agile so I will pick that just for fun. Now I see what it is doing. It is creating a Visual Studio Online account where I can share task progress with other people - it is another Kanban board with management tools. I am going to skip that and leave that for another day for now.

Wait, the VSE download finished so I have to launch it and then answer a bunch of questions. Today is my lucky day as I get to into my Microsoft account and password twice in two sequential screens. I thought I was logging in once and then up pops a second login screen to get my developer license. The good news is that it showed me my developer license will expire on 18 December, 2013. Probably the day I am trying to get serious work done and that will be the day I switch to using Professional.

Now I need to find some Windows 8 example code include some maps. Now things have really changed as native Windows 8.1 apps use Bing Maps instead of the phone apps that use Nokia HERE.com maps. I guess I now get to switch to Bing Maps, well that is a bad description as I hardly knew anything about the Nokia maps except what I read in my downtime when software was loading on my laptop. Using the Bing Maps API is only temporary until I get the working Windows version from our mapping partner. After the download and installer completed, a message popped that I had to restart VSE. I then noticed that the different versions of VSE have the same icon but different colors. The VSE for Phone is read and the VSE for Windows 8 is blue. While relaunching I read the Bing Maps download page and it order to use it I have to get a license key. Again I can get a 90 free trial, which is more than enough for what I need. If I am still using Bing Maps in 90 days then I will probably be fired as it will be a complete failure on my part. When reading the license page, I see I only get 10,000 billable transactions, so I have to go read about that. After all of that I want to see if I can use Nokia HERE.com maps for Windows 8.1 apps. I went ahead and signed up for a Nokia developer account and then logged into that account. When I clicked on the link within the developer portal to get an evaluation key, then I was had to click on a link in an email to activate my account. Once I signed in then I had to go back to the main developer site as I was stuck on a page with no menus at all - that clearly is not the way to win partners. On the first screen I see I am now hosed as the choices under "Application platform" do not include Windows, but only Windows Phone. Plus the "Solution" choices don't match I need to do either. OK, time to go back to Bing maps...

Once I logged into my Microsoft account, and answered several questions in many forms I was logged into the Bing Maps Account Center. From past experience I knew I need a map key, so I clicked on "Create of view keys". In the text above the form I see a curious link labeled "TOU", and when I click on it then I see just about the worse fine print text you can imagine where I have to read a terms of use document to understand what is going on - for the sack of time I give up as that is the smart thing to do. I am definitely confused now as I see a text box labeled "Application URL". Am I supposed to make that up? I am just happy I now have a key so I should be able to create a simple Windows 8 app with a Bing map. I had to quickly read a bit more before getting started on how to use the Bing maps first. I have an example to work thru to make sure the Bing maps are setup correctly and working as expected. My first major road block of the day - I installed "Bing Maps SDK for Windows 8.1 Store apps", then restarted VSE for Windows and do not see the Bing Maps reference to add it to my VSE project. Bummer. I am going to try a different tactic by downloading all of the Bing Map samples. The download was easy and then I extracted all of the files and when I tried to open one of the project files, then bad error messages started appearing as these examples were built for VSE for Windows 8 and not 8.1. I tried to following the directions to retarget the solution but that did not work. I tried to build the app and nothing I tried helped as VSE kept fussing about the missing Bing reference. It looked like the name was incorrect as it was referring to an older version of Bing Maps. I deleted the reference from the project along with the missing Visual Studio C++ Runtime package. I then had to look up how to add a reference to my project and followed the directions by right clicking on "References" in the "Solution Explorer" and clicking on "Add Reference...". On the left hand side, I opened "Windows" and selected "Extensions" and clicked on "Bing Maps..." entry but that did nothing. Then I went back in and realized the first column was a checkbox that I had to select. Then clicking on OK actually did something and automatically added the matching C++ Runtime library. My project built and when I tried to run it, I got a bunch of Watch windows up and when I closed all of them, I saw the message in the status bar saying "This item does not support previewing". Now I have to figure out how to run a Windows 8.1 app as it just did not work like I wanted it to - apparently wishful thinking does not help when working with VSE.

Just when I get going I have to read some articles and when I go back to my laptop is has become very dim and nothing I do changes the brightness. At first I went Settings and the brightness is already set to 100%. I then have to figure out where the automatic brightness is being set. I search for "display settings" hoping that will be my ticket to brighter days. It was not under "Display" in the "PC and devices" screen that appeared. I thought of where I might find this on my Mac and I immediately went to "Power and sleep" and it was the first item under "Brightness" named "Adjust my screen brightness automatically". Problem solved.

Back to my map issues. I accidentally tried to repair my VSE and so I am waiting yet again for the VSE install process to complete. I realized Windows 8 is new but somethings just never change - waiting for installers and reboots is a way of life on Windows not matter how new it looks like on the surface - pun intended. Now I am beginning to think I need Visual Studio Professional just when my computer started rebooting. I read up on IE 11 and they found just about the most geeky name for what every other browser called the Web Inspector - Microsoft picked the name of F12 Tools. Another unfortunate thing happens every time my laptop is rebooted is that the HDMI display does not work. I have to go into the menu and automatically detect the display. Now I have my map display correctly on my laptop. I thought I could just drag my VSE to the 1080p TV and then restart the app and it would display on that device. Again, I am just taking too much for granted. Now I have to figure out how to run the app on the TV. I found the article and it I learned I have to use Windows logo key + Shift + Right Arrow to move the app to another monitor. The good news is that I have a Bing Map displayed on the 1080p TV and it looks pretty good. I zoomed into a traffic problem in Carrollton, WI and turned on the Aerial view and the stop light turned on. The road problem is dashed red and white lines on the road so they jump out when zooming around on the map. Then I had to look up how to stop an app, as it is easy to disconnect the app from the VSE debugger or to stop debugging, but closing a full screen app with no windows controls gets interesting. So interesting in fact that Microsoft wrote an article on how to do it - you drag the app to the bottom of the screen!

A little about Bing Maps - the first example I tried was the Pixel to Location Sample, which each tap and hold results in a point being added to the map. It just was not intuitive to tap and hold as that is not an obvious behavior for me. Now I must be in a roll as I have 4 Bing Map examples running. Each one has the same problem of being an older version of VSE so each must be re-targeted, then I have to delete the 2 missing libraries and then add Bing Map back in. In all cases I have to use my Bing Maps key by editing the MainPage.xaml file where the text "INSERT_YOUR_BING_MAP_KEY" text appears and the apps just work. The only real exception is the "GPX Route Viewer Sample" as that one is really special. It is under version control and not the Git kind so I have to respond to 3 dialogs fussing that I don't have that plugin in VSE. Once I get past the warnings that my changes will not be under source control and that I need to extra careful and I cannot connect to the Microsoft version control system, then I am fine. Maybe it is a marketing ploy to get me to use it - sorry that is just not going to work. The reason why I picked this example is that I found sites that have large GPX routes that I can download. The first one I tried is a long distance walk across the southern part of England. The second gem I found was a site that has data for each state so I naturally went to the NC section. I picked 3 of them, 309 airports, 8961 churches, and mother of them all of 12,875 water features. I tried downloading them locally on my laptop and also use Microsoft's SkyDrive, but I could not get them to show up every time in the Windows 8 file chooser for the Bing Map app sample. I was able to get the England walking path to load and to animate so that is pretty fine for today. It turns out that the SkyDrive thing is not as simple as I thought. On my laptop all I have to do it know where to go instead of using the web site since the files got saved as XML instead of the required GPX file extension when I used my Mac to upload the files. it turns out that location is C:\Users\Rick\SkyDrive, so I just downloaded the files on my laptop and then moved them into that folder and it then worked. Then I realized it was there all of the time in the Windows Explorer left side bar! Besides my SkyDrive problems, the NC files crash the Windows 8 app so there is something in there that is does not like. I then found the final gem of the day as a site that has GPX files for Nepal Himalayas treks.