Dave's Two Cents

I was cleaning out my RSS reader and came across an interesting post from KELLABYTE. She wants a seamlessly integrated world. I have seen commercials for Verizon FIOS that may be deliver that. The challenge comes in delivering that across the spectrum of applications. Pairing you life with the cloud is a must in this situation. Let’s take a look at the different challenges that would limit this achievement.

For reference I have copied the data stream that kellabyte would like to consume:

• Email
• News (RSS)
• Social (Twitter, etc)
• Calendar
• Media (music, video)
• Documents
• Web
• Instant Messaging

The first hurdle is the Cloud. All this data would have to live behind some service (the Cloud) in order to be consumed seamlessly by different devices. Outside of techies there are very few people who feel comfortable storing all their personal data on the cloud (you can’t tell that by what people post on face book). When it comes to non social website data it can become an issue of privacy. The mental hurdle is a little less for an average person compared to large corporations. Losing control of where their proprietary data resides does not sit well for most CIOs.

Next all applications would have to be delivered as Software as a Service (SaaS) or Software plus Services. In this space you have Google Docs and Microsoft Office Live have made strides in the documents, email and calendar. But other providers need to be on board with developing SaaS. Should there be some overarching framework to ensure interoperability? Most would say that is what Service Oriented Architectures are trying to do but most organization struggle with developing pure SOA.

Moving to the cloud requires bandwidth both in the mobile space and in the ISP space. All these bits moving back and forth are going to eat up the current bandwidth that a common users has. A lot of AT&T customers currently complain about lagging networks think what would happen if everyone started moving to the cloud. The technology is catching up with services like FIOS and 4G mobile networks. Is it hard to imagine T1 lines to everyone’s home? This plays into the user experience. Usability will help drive adoption but it will also deter users as well. That is why there needs to be a strong infrastructure.

What would be the next hurdle that would need to be jumped, cost? Infrastructure changes require millions and millions of dollars. Application development requires funding. Hardware to support such a reality cost money. So what is the cost benefit analysis for companies that would under takes such an endeavor, the service providers, software makers, and application developers alike? Will there be a large enough user base to support such a capital undertaking? What kind of psychological barriers to adoption that need to be overcome.

Another technological challenge is security. I alluded to it before in that large corporations are reluctant to move to the cloud. Most of the infrastructure in existence was not developed with security in mind. Just think about what built in security mechanisms we have in TCP. A lot of the security we have has been bolted on as an afterthought. Moving to the cloud introduce a whole new round of privacy concerns. Unfortunately there are bad people in the world that are looking for opportunities to steal your data. I believe that until there is some strong belief of security is there gaining wide spread adoption will be a challenge.

The final challenge I want to address is the social aspects of this interconnectivity. Yes we interact socially through services like Twitter and Facebook but we lose out on the human interaction. We become tied to our devices so that we never unwind. This could lead to burn out if you don’t have a nontechnical outlet. You need something that requires you to become disconnected. Here is a personal experience. A group of coworker came around to my desk and asked who is up to going to lunch. I was game so off we went. As soon as we left the building out came the devices to check work emails. Really we weren’t gone 5 minutes. They couldn’t put down their devices for 30 minutes to enjoy lunch. Which goes to show that if they lost connectivity they would have major withdrawals. Is that a good thing?

There are the challenges so what are the benefits? For one, the prospect of the technology excites me. This opens a whole new line of thinking about how interact with the world around us. I believe that there are productivity gains to be had by being interconnected. I am also excited to see how we would interact with these technologies. The possibilities are endless and we are in an age of technological advances that will allow us to push the envelope.

I really enjoyed reading kellabyte’s post and really got me thinking as to what it would take to make interconnectivity a reality. I look forward to more debate on the topic.

One of the powerful features of Silverlight is the ability to have fine grain control over how your application looks. This power is given to use through “Lookless” controls or more commonly known as Templated Controls.  What this means is that the functionality of the control is contained in a class file and the look and feel is implemented in XAML.  All of the out of the box controls are created this way.  You can test this out in Expression Blend by adding a button to your canvas. Right click on the button select ‘Edit Template’ and see what is generated for you.

In this article I will work through how to create your own templated control.  Even if you never create a real control of your own, it is a good exercise to understand how templating works in Silverlight.  I will be creating a simple control that contains a text box and a button:

There is nothing fancy with the control I have created and I probably would not create a control like this.  I did something simple to demonstrate the power of templated controls.

The first thing you need to do is create the control. You can create this control in the current project or in a class library project.  Visual Studio helps in create templated controls by providing a template.  Go to File –> Add and select ‘New Item’.  From the ‘Add New Item’ dialog select ‘Silverlight Templated Control’. I am creating a control called TextWithButton (I know real original).

This is going to create a class file, a directory called ‘Themes’ (a hold over from WPF) and a XAML file called Generic.  The class file is for your implementation code. The Generic.xaml file is for your default template. Now we have to wire up the template to the implementation.  When you added the control the implementation class inherits from Control.  Control has a property called DefaultStyleKey that we can set in the constructor of our control.

this.DefaultStyleKey = typeof(TextWithButton);

Your control is going to go out to the Generic.xmal and find a style with this key.

Templated controls assume that there are parts (Framework Elements that make up your interface). Inside the Generic.xaml file you create the parts of your control ensuring to set the x:name property.  This will be used to get a reference to the parts from the class file.   You will also want to implement any Visual States that you will be working with.  Here are the visual states for my control:

<VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="GroupCommon">
                                <VisualState x:Name="Unfocused"/>                                
                                <VisualState x:Name="Focused">
                                	<Storyboard>
                                		<ColorAnimationUsingKeyFrames BeginTime="00:00:00" 
                                                                      Duration="00:00:00.0010000" 
                                                                      Storyboard.TargetName="InputText" 
                                                                      Storyboard.TargetProperty="(Control.Background).(SolidColorBrush.Color)">
                                			<EasingColorKeyFrame KeyTime="00:00:00" Value="#FFFAFAFA"/>
                                		</ColorAnimationUsingKeyFrames>
                                		<ColorAnimationUsingKeyFrames BeginTime="00:00:00"
                                                                      Duration="00:00:00.0010000" 
                                                                      Storyboard.TargetName="border" 
                                                                      Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)">
                                			<EasingColorKeyFrame KeyTime="00:00:00" Value="#FFCE4646"/>
                                		</ColorAnimationUsingKeyFrames>
                                	</Storyboard>                                
                                </VisualState>                    
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>

Now you want to override the OnApplyTemplate method. Here is my override:

        public override void OnApplyTemplate()
        {
            base.OnApplyTemplate();

            _inputTxt = GetTemplateChild(ElementTextBox) as TextBox;
            if (_inputTxt != null)
            {
                LoadText();
            }

            _inputButton = GetTemplateChild(ElementButton) as Button;
            if (_inputButton != null)
            {
                ConfigureButton();
            }
        }

Here I am using GetTemplateChild method, passing in the name of the part, and setting an internal variable casting the results as parts type. It also gives you a chance to call some methods to do some initialization work for you. When working with templated controls it is important to code defensively in order to ensure that a user hasn’t delete a control part you were expecting.

Now we have to tell our implementation which parts to expect.  We do that by setting the TemplatePart attribute on the class:

    [TemplatePart(Name = TextWithButton.ElementTextBox, Type = typeof(TextBox))]
    [TemplatePart(Name = TextWithButton.ElementButton, Type = typeof(Button))]

Here you tell the attribute what is the name of the part and the type.  You also need to specify and VisualStates you are expecting again by setting an attribute on the class:

    [TemplateVisualState(Name = VisualStates.StateFocused, GroupName = VisualStates.GroupFocus)]
    [TemplateVisualState(Name = VisualStates.StateUnfocused, GroupName = VisualStates.GroupFocus)]

I am doing something simple to implement state changes. In the constructor I am subscribing to focus events:

      this.GotFocus += new RoutedEventHandler(TextWithButton_GotFocus);
      this.LostFocus += new RoutedEventHandler(TextWithButton_LostFocus);

Here are the handlers for those events:

        void TextWithButton_LostFocus(object sender, RoutedEventArgs e)
        {
            VisualStateManager.GoToState(this, VisualStates.StateUnfocused, true);
        }

        void TextWithButton_GotFocus(object sender, RoutedEventArgs e)
        {
            VisualStateManager.GoToState(this, VisualStates.StateFocused, true);
        }

At this point you have a templated control that you can add to a page and it will render.  What we haven’t done yet is create any functionality. We are going to want to have the ability to bind to the text property of the text box part and to the command property of the button part.  There are other things that you can do like expose events but I am not going to cover those in this article.  In order to be able to bind to properties on your control you have to create Dependency Properties. 

Here is the property that I created to handled the text:

        public string ControlText
        {
            get { return (string)GetValue(ControlTextProperty); }
            set { SetValue(ControlTextProperty, value); }
        }

        // Using a DependencyProperty as the backing store for ControlText. 
        //This enables animation, styling, binding, etc...
        public static readonly DependencyProperty ControlTextProperty =
            DependencyProperty.Register("ControlText",
            typeof(string), typeof(TextWithButton),
            new PropertyMetadata(ControlTextChanged));

Dependency properties allow you to handle when the value is changed. Here is the implementation of the change event handler:

        private static void ControlTextChanged(DependencyObject d,
            DependencyPropertyChangedEventArgs args)
        {
            TextWithButton view = d as TextWithButton;

            if (view != null)
            {
                view.LoadText();
            }
        }

Here I cast the DependencyObject as the control type and call a method on it.  Notice that is the same method I am calling when the template is applied. I can now create a two way binding that will handle text from a view model through to the inner textbox.  Here is the LoadText implementation:

        private void LoadText()
        {
            if (!string.IsNullOrWhiteSpace(ControlText) && _inputTxt != null)
            {
                Binding binding = new Binding();
                binding.Source = this;
                binding.Path = new PropertyPath("ControlText");
                binding.Mode = BindingMode.TwoWay;
                _inputTxt.SetBinding(TextBox.TextProperty, binding);
            }
        }

Note the defensive coding. I do something similar for the button command (see code for implementation). 

I now bind to my ControlText property in my view from my view model:

            <cc:TextWithButton ControlText="{Binding SomeText, Mode=TwoWay}"
                               ButtonCommand="{Binding ButtonClickCMD}"
                               Margin="10"
                               Width="500" />

So let’s recap what we have done we have created a control with encapsulated functionality that can be templated by users without breaking that functionality.  We could have two different instances of this control on the same page that have two different styles:

            <cc:TextWithButton ControlText="{Binding SomeText, Mode=TwoWay}"
                               Margin="10"
                               Width="500" />
            <cc:TextWithButton ControlText="{Binding SomeText, Mode=TwoWay}"
                               ButtonCommand="{Binding ButtonClickCMD}"
                               Margin="10"
                               Width="500"
                               Style="{StaticResource TextWithButtonStyle1}" />

In the static recourse I change the layout and back ground of one of the controls so it looks something like this

These two controls share the same functionality but as you can see I get the ability to change how they look.

You may not need to create a templated control unless you are building your own control library.  By creating my I own, I now feel more confident when it comes to altering the templates of the native Silverlight controls.  Another good exercise is to look at the source control of the Silverlight Toolkit. Here you will see a similar approach done by the Silverlight Team.

Source Code