From concept to reality in 6 weeks - part 11

I am skipping part 10 since yesterday was like a whole day's work when I intended to only work a half day. Since I have worked two half days that has to count for a whole day. Since I was working with someone else yesterday I did not keep up the blog while working with him, so a little catch up first.

I committed the cardinal sin of Windows development in that I had no rebooted my computer a single time since installing the initial patches to get the machine working. What was I thinking? Did I think that things were magically fixed by moving to Windows 8? It finally bit me as I could not build a deployable Windows 8 app as VSE complained that the simulator was running. I doubled checked all of the processes using Task Manager and it was definitely not running. I closed VSE and reopened it and nothing was fixed. I was working with the mapping engine lead developer and I showed him the message. He immediately told me to reboot my Windows laptop. He said he has to reboot his machine multiple times a day as the Visual Studio Professional that he uses gets slower and slower during the day's usage. Then I remembered what I was working on. I used to work at a company that had a policy that every one had to reboot their computer each evening - the justification was so they could install nightly patches on the whole company intranet and did not want anything running that would prevent the installers from succeeding. I am going to have to remember to reboot my Windows 8 machine every weekend whether I want to do it or not.

Rebooting definitely fixed part of my problem, but I had to look up the error code on the MSDN error page to determine what the message meant and it showed 0x80073D05 as the error code. The last error I saw when I gave up was 'Could not copy the file "obj\x86\Release\Bing.Maps\Themes\Generic.xbf"'. That message is odd since I had commented out the Bing Maps to switch temporarily to the mapping engine in my MainPage.xaml file. I am going to forget about that for now as I was trying to make a release build to give to the mapping engine developer to see if it worked for him. He did the amazing thing of getting Windows 8.1 to work from BootCamp on his Mac. He did say if he had to do it all over again he would not do it as it was very painful and not worth it. He also made an executive decision to use the ANGLE open source project which maps OpenGL on top of DirectX on Windows, which greatly sped up his development time.

When I clean my VSE project, I have to remember that I must manually copy the mapping engine DLL files from "bin\x86\Debug" to "bin\x86\Debug\AppX" folder temporarily until they fix the reference dependencies to work correctly in VSE. Now I am getting another seemingly unrelated error so I am reboot to start from a fresh slate this morning since we were doing all kinds of interesting things last night to get the mapping engine working and for me to make a release build.

After rebooting I was able to run the app once and the second time I ran it I got a dreaded error message:

An unhandled exception of type 'System.AccessViolationException' occurred in ...

Additional information: Attempted to read or write protected memory. This is often an indication that other memory is corrupt.

What that means is that it is time to send this to the mapping engine developer and switch back to Bing Maps so I can finish the JSON parsing today.

As of this morning, I have someone else helping me build a custom component for a dual range slider! That is great news since he is also a Windows developer and can help me when I get stuck on other tasks. Now I am feeling better already. We connected using Skype from my Mac but I could not get the microphone to work on Skype on my Windows laptop. That is when I gave up and switched to GoToMeeting as I knew he could help me get that to work where I failed last week. We also worked thru issues of me showing my screen from the Windows laptop. I was trying to use the GoToMeeting from the Windows Store, but when I switched to using the http://gotomeeting.com site then I was able to login and then change presenter from my Mac to my Windows machine. The only problem I encountered was the display was truncated at the bottom so I had to go into the PC Settings for the Display and reduce the resolution. It was good enough for a short demo.

Now I have the fun of trying to find my NullReferenceException that is causing the app to crash when I download the server data. I search for help in Mrs. Google and found an article that has the great keyboard accelerator that is really hard to type : Esc + Ctrl + Alt + E. I added a checkbox for "Common Language Runtime Exceptions". Enabling that immediately found the problem - I remember having to do that a long time ago in a Java land far far away. I also had to do it with Adobe Flex development. That just seems like a very long time ago and I am not happy to have to go back there again.

Once I fixed the problem with my initialization of the active downloads array by moving it into the constructor, I moved onto the parsing the JSON which I had written but could not verify yet because of the exception. I had a couple of conversion issues that I had to deal with as I thought the JSON had numbers but they were strings and vice versa. Nothing a couple of IF statements won't fix like the following by looking at the JsonObject Class documentation:

JsonValue value = jsonObject.GetNamedValue("id");

Id = (jsonValue.ValueType == JsonValueType.Number) ? value.GetNumber() : value.GetString();

The next JSON issue I had to deal with was one of the values can have a value of "null". It is a shame I have to deal with all of these edges cases, but if I don't then I have to deal with exceptions. Let me see, that is a hard decision. OK - I decided I need to check for NULLs like this:

jsonObject["id"] = (Id == null) ? JsonValue.CreateStringValue("") : jsonValue.CreateStringValue(Id);

Now I have 2 of the 3 APIs working by calling the server asynchronously, process the response as JSON, store into DAO objects and then call ToString() to verify they look OK. Now I am making serious progress, except I left the most difficult one for the end. I was building up my confidence to make sure I understood how to process JSON before tackling the tough one.

I must say that listening to Mark Knopfler and Chet Atkins playing together on "Neck and Neck" definitely makes working on Windows more pleasant. I used to listen to Chet Aktins when I was a kid and he got me hooked on playing guitar.

The last JSON is definitely non-standard but at least now that I am an C# JSON parsing expert, I can definitely finish the parsing later today when I get home. A couple of interesting things I learned today, how to parse a DateTimeOffset and the standard date time formats available in C#.

I need to take a break and do some physical exercise like running.

From concept to reality in 6 weeks - part 9.5

After an shockingly bad Thanksgiving break, I need to quickly recover and focus on the task at hand of getting the app done as I have exactly five weeks left before the deadline hits. Really I am at day 10 since I have day 8.5 and now today is day 9.5. Of course that is not 25 days like it would seem as I have Christmas and New Year's Day breaks in there to deal with. I do have the weekends if I have to catch up for lost time. So let's just pretend I have 25 days left. Let's quickly recap what is working I have done so far:

• Day 1 - working Windows 8 laptop
• Day 2 - development environment Windows 8.1 SDK working on laptop
• Day 3 - Bing Maps displaying
• Day 4 - retrieve data from remote server
• Day 5 - learn Metro UI & 3rd party component libraries
• Day 6 - use single bottom AppBar
• Day 6.5 - learn how to submit app to Windows Store
• Day 7 - custom icons & fonts + deliver 1st iteration to customer
• Day 8 - component framework lifecycle to learn about dialogs
• Day 9 - retrieve live data from secure server and process as JSON

So that brings us up to today as I need to finish the JSON parsing, but first I need to make sure I understand how to get the free 3rd party component library I downloaded to work in my app. Last week I downloaded the free license and was not able to get the Perpetuum demos to work. This morning I am going to start that process one more time. There are a couple of reasons why I need to get this working today. I have received daily messages from the developer working on our 3rd party mapping engine and I need to meet him this evening to try to get his stuff working on my machine. I really need to make sure I know how to do this with another 3rd party library first.

I went back to look at the two emails I received from Perpetuum Software which were in response to me not getting their demos to work. It was a free license which means I get no support, but I really thought it was in their best interest to at least help me a bit with their demos since they came with no documentation. The first thing I did was add the original demo project and license files on my SkyDrive from my Mac. Then I deleted the project I had on Windows and started over. I had to retarget the project to Windows 8.1. I then opened the "App.xaml.cs" file and added my free license on the correct line and uncommented out the line. I rebuilt the project and saw the same error but then it went on to build the project.

Error occurred while restoring NuGet packages: System.ArgumentException: The path is not of a legal form

I pretended to not see that error and then ran the project file and it worked. Now I am feeling like I am off to a good start for my half day today!

I then went back into my email to look at the 2nd message on how to get the Perpetuum components to work in my app. I was told to find the DLL folder in the PerpetuumSoft.Controls.Demo project and copy that into my app project, so I followed those directions. I then right clicked on References and clicked on "Add Reference..." and then opened the Browse section on the left and clicked on the "Browse..." button. I then navigated to the PerpetummDll folder I created and added the PerpetuumSoft.Controls.dll and PerpetuumSoft.WinRT.Framework.dll, which resulted in PerpetuumSoft.Controls and PerpetuumSoft.WinRT.Framework showing up on the References section. I then opened my App.xaml.cs file and on the first line in the App constructor, I started typing "perp" and VSE completed PerpetuumSoft and kept completing until I had the following:

PerpetuumSoft.WinRT.Framework.Licensing.LicenseManager.SetKey(@"");

I then added the contents of the email I received with my license key between the double quotes. I rebuilt my app and received no errors. I did not use any of the components but at least it is building. That is good enough for now but eventually I will use their calendar and dual range selectors, so I switch back to finishing off the JSON parsing...

A couple of new lessons to learn at the beginning before I start. First is how to create an abstract method that I implement in subclass? I need to declare the method as "public abstract Process(string text)" in the parent class and then in all subclasses I need to declare it as "public override Process(string text)". That makes sense - I just needed to re-learn how to do it. Next I have to learn how to compare two strings. I first tried string.Equals(string) but that was a failure to compile. I looked up the String class and found a static Compare method so I tried that but it failed in the very same way:

The best overloaded method match for "string.Compare(string, string)" has some invalid arguments

 That is an odd message since this is exactly how the documentation says it should work. Then I look at the second error associated with the same line, which is

Argument 2: cannot convert from 'method group' to 'string'

Then I remember that I forgot to add "()" when calling a method as it was trying to pass a method to the Compare function. That is going to get me every time until I remember it unfortunately. But the good news is that all of my changes compile. Now I need to implement one of the process methods to make sure the JSON I retrieve from the server will be stored correctly in my DAO objects I created on Day 9. That means I need to learn how to process and array of JSON objects as well as how to change the ToString method so I can see the results of my parsing. I also need to know how to work with C# Arrays. If I can going to do all that then I need to know how to concatenate strings to show arrays within my ToString method. That should take care of my learning for the day as I will put all of that into action for my JSON parsing and checking the results.

I definitely fixed one bug where I was calling "await" in the wrong place. I found this article which describes how to determine the state of the app in the main App.xaml.cs file. In that method I called:

MainPage.Current.WaitForDownloads();

Which is very simple and checks for out standings running tasks:

public async void WaitForDownloads() { await DiscoverActionDownloadsAsync(); }

The method being called is very similar to the code I found in the Background Transfer sample code, with the primary different being how to output is logged.

Unfortunately, now two of my remote server calls are returning JSON but when I process the first JSON response I am getting a "System.NullReferenceException", but I have no clue where that occurred since the VSE debugger stops in a place that does not help me at all as it is in an "await" block. I went to the DEBUG menu and look under the Windows sub-menu and selected "Call Stack" to see that helped me but it did not. I went back into the debugger and inspected DownloadOperation variable to see the RequestedUri and now I know which server request is the one that fails. It turns out that is the one I have not written yet but I double checked the code and I don't see what the problem is. I set a break point in the code where I parse the results and it did not get to there yet.

Time for tennis so this will have to wait until tomorrow.

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.