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.