Partager via

Going Flex to Silverlight: Understanding our DisplayList API.

  • Article

Disclaimer: This is part two of my Going Flex to Silverlight series, where I'll be talking about how one is able to transfer concepts they have learnt in Flex world but are looking to explore what Silverlight also has to offer. Whatever reason they have chosen, is entirely up to them and this isn't to be taken as a feature for feature comparison.

In the Adobe Flex (ActionScript) to create a child element/object within the code base, you would punch out something like this:

   var txt:TextField = new TextField();
    txt.x = 100;
    txt.y = 0;
  txt.text = "Click for more info...";
    addChild(txt)

Which would then render MyButton onto the DisplayObjectContainer in question (provided it derives from a DisplayObject).

Inside Silverlight, there is a similar approach but instead of just limiting to syntax code, one is able to piece together elements within elements through loading XAML at runtime. In that, you can access XAML pieces parked on your host, bring them in at runtime and instantiate them (children and all) through the CreateFromXAML.  example:

     // Retrieve a reference to the control.
    var control = sender.getHost();
    
    // Define a XAML fragment and create it.
    var xamlFragment = '<TextBlock Canvas.Top="200" Text="Click for more info..." />';
    textBlock = control.content.createFromXaml(xamlFragment);

    // Add the XAML fragment as a child of the root Canvas object.
    sender.children.add(textBlock);

 As you can see, there are some similarities in approach, suffice to say that one is mode of approach. It's also important to note that you are also able to create child elements through managed code such as C# using Flex style syntax - which - can be found in both WPF and Silverlight. Yet, if you prefer JavaScript you can use the CreateObject(type) approach, which is similar I guess to the Coldfusion approach to life as well (CreateObject is used to instantiate Coldfusion Classes inside managed code).

Another cool feature within the CreateFromXAML bag of tricks, is that you can also create XAML pieces loaded in via .ZIP files themselves similar to I guess Flex Modules API. This is done via CreateFromXamlDownloader Method.

 function onDownloadCompleted(sender, eventArgs)
{
    // Determine whether the download was successful.
    if (currentDownloadProgress != 1)
    {
        alert("Failed to succesfully download zip file");
        return;
    }

    // Retrieve the XAML content from the downloaded package file.
    var jacketBrowserXaml = sender.getResponseText("jacketBrowser.xaml");

    // Create the objects from the XAML content.
    var jacketBrowser = control.content.createFromXaml(jacketBrowserXaml);

    // Add downloaded XAML content to the control.
    sender.findName("root").children.insert(0, jacketBrowser);

    // Retrieve a reference to the Image object representing the jacket.
    var jacketImageSlice = sender.findName("jacketSlice");

    // Set the Source property of the Image object to the specific jacket image
    // within the downloaded Zip package file.
    jacketImageSlice.setSource(sender, "rotation01_green.png");
}

The children collection there after has also all the typically Method calls made available for you then to find different elements by various means. Yet, if you are unsure of where an element exists within the XAML DOM itself but do remember it's name, one is able to then use the FindName Method

 function onLoaded(sender, eventArgs)
{
    // Retrieve a reference to the control.
    var control = sender.getHost();

    // Retrieve a reference to the specified object.
    var object = control.content.findName("myTextBlock");

    // If a valid object reference, display an alert dialog box.
    if (object != null)
    {
        alert(object.toString() + " found");
    }
}

This is also the very similar to the way Flex does it inside Flash.display.DisplayObjectContainer's in that it would allow something along the lines of:

    var target:DisplayObject = container.getChildByName("myTextBlock"); 
    trace(container.getChildIndex(target)); // 0

This however would be done on the same node level as the actual Parent of the child. The FindName method however searches the entire Silverlight hierarchy for the element that have the name you provided.

Summary
There is a lot that Silverlight has on offer and when you dig deeper into what it has today, even in it's alpha state, there is a lot of goodness to be found. I'll continue to expose some of these gems going forward, and if you want me to discuss a topic of some kind, drop me an email on it. That being said, one thing I'd like you all to take away from this post is that the CreateXAMLFromDownloader is a massive step forward if you ask me in terms of performance / architecture design & development for applications should they enter the Silverlight path post its release.

More Info: https://msdn2.microsoft.com/en-us/library/bb412361.aspx

Comments

  • Anonymous
    May 27, 2007
    The comment has been removed

  • Anonymous
    May 27, 2007
    I need Canvas.Save(Stream) function! I want to be able to save my silverlight creations as gif or jpg.

  • Anonymous
    May 27, 2007
    cool post!

  • Anonymous
    May 27, 2007
    As far as I know, the Bitmap API approach is being looked into for Silverlight but with more strategic approach.