Thursday, November 21, 2013

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.

No comments: