Saturday, December 14, 2013

From concept to reality in 6 weeks - part 20

So here we are at day 20 with only 3 calendar weeks left. Kind of hard to believe that 4 weeks ago today I started on this project. I am definitely over the hump now. The app is actually very stable and makes a good demo just as it is today. But of course I cannot stop today as I need to keep going. I have a couple of things to change this morning related to the latest nightly build from the mapping engine guys. As always the lead mapping engine developer was awake as I started my early day at 5:30am and he wanted to check I had everything before he went to bed. It is a privilege to work with people like him as he does such great quality work. Every day he sends me not only the build but an example app that shows how to use the new features. I will definitely miss working with him daily as it is a breath of fresh air to work with him. It reminds me of the time I worked at SGI as that defunct company was full of the brightest people on the planet. That just proves that because you have transforming technology and the greatest developers anyway, it does not guarantee success. Now every computer and mobile device has an OpenGL supported. Enough of waving eloquently, on to the Windows Store app.

Today was an interesting switch for me. I need to add the latest mapping engine binaries to my project to verify it was working and add some new code to show the selected point on a map. That was pretty easy, but then I got tired of the standard Windows Store MessageDialog as it is a big white bar across my screen. Plus it is modal which means I cannot do anything else while it is up. What I really want is a custom popup dialog that I can tap all over the map and update the contents of the popup as I tap around. If the user close the popup and then taps on the map then I want to re-show the popup dialog. How hard can that be? Apparently I had a good reason is using the MessageDialog as it was the easiest thing to do. Now I get to use this as a test to learn about notifications and bindings.

I need to switch to some more subtle music to get thru this next section so I start listening to Robben Ford & The Blue Line on Spotify.

The first thing I had to figure out was how to style the popup. I want a white background with a blue Close button in the bottom right hand corner. That should be easy. Turns out it is easy to get the layout as I can use the Visual C# Blend editor to help me with the design but then for reusable styles I have to create static resources in a XAML file which means editing XML. I guess I have too many years of doing HTML and CSS as I expect this to be easy. On the web I set a background color, a foreground or text color and then I change the colors for pseudo elements like hover states. Easy as it should be. The first thing I try in the Blend editor is to code complete on the properties to see if I can get the hover styles to work in Blend. It turns out that is a bad NO. I can easily set the background and foreground colors to make it close. I want to explore the existing styles that are available in Windows Store apps as I like the way the MessageDialog text is styled by default. Wait, I wonder if I can just style the existing MessageDialog? It turns out that is the big NO also. There are MSDN social blogs available where I keep looking but it just is not possible. I keep hoping to find something but the more I look the more frustrated I am becoming, so I just give up and realize I must create a custom dialog. Microsoft does not even publish the styles so without knowing the keys to the Microsoft kingdom you cannot enter that gate. I start to look into styles within Blend as I have seen code like this before:
Style="{ThemeResource BodyTextBlockStyle}"
So what do these styles actually look like? Do I have to set them and then run the app to see what it looks like? That is pretty sad, so I go looking for my answer on line and find this interesting site that shows some of the undocumented Metro styles. That helps a little bit but let me see if I can find button styles as I need to find the hover like styles in Metro UI and I find this social blog answer to my stylish problems. Now that is just about as complicated and unobvious as I could imagine. The only good news is that it actually works. The real answer is that you need to start with the existing default styles and modify them as you have to have the correct XML hierarchy or else nothing will work. I did find an article that described how to do this programmatically but I am just not going to go there. This is way more complicated that I need so why would I go all out and really torture myself? Just to be clear Microsoft does document the styles so for a button everything you need to know can be found if you know what to look for as they are called themed resources. This is an example of the complete documentation for TextBox styles and templates. I experiment with transparency which in Windows Store apps is an Opacity property to see if I should make the background for the dialog slight opaque and the answer is no as it does not look good. So I move on. All in all I found success on styling my custom popup and I did learn how to do it correctly but I never expected to wake up this morning and have to go thru all of that mess. Now onto notifications...

I need to connect my model classes to change the popup dialog contents and to be notified when it closes to do some cleanup. I am expecting this to be complicated. I like the notification manager in iOS but I am no way expect the same in Windows Store apps. The first thing I need to get a handle on is bindings. I have also see them in many examples over the last few weeks, so I need to make sure I understand how they work. I found yet another quick start guide on how bindings work that was useful. I then found the explanation of property notifications which all made sense. So you have a model that sends notifications when a property changes and the view is observing the model and receives the notifications. That all makes sense. Let me try to explore creating custom controls and then hook all of that up using notifications. I found an example on how to create a custom control which was helpful. I move all of the custom popup code to a new user control class. I then try to use my custom dialog in my main page and I get the strangest error:
Inconsistent accessibility: return type '...' is less accessible than method
What on earth does that mean. I go to the internet for help as it sort of makes sense but I don't know how to solve it. I found an explanation on stack overflow but it just feels odd to make my control public so I can use it in my main class. I quickly contact a co-worker to help me thru this but after a couple more hours of frustration on my lack of understanding, I give in a revert to working without property notifications as I understand the principle but in practice I am not man enough to get it working. I think I am just overly tired and under too much time pressure to think clearly. The last trick to get the easy way to work is that I have to learn how to pass a function as an argument to a method as my callback on when my dialog closes and I found a good explanation on my friend Mr. StackOverflow.

I just need to call it a day as this was my longest day so far and the long days are going to have to end soon as I am getting run down physically and my whole family is falling sick so I don't want to succumb to that sickness mess.

No comments: