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.