Ohne Worte :-)

Mehr Infos unter www.popfly.ms.

Na endlich ... Masterchief kehrt zurück um die Welt zu retten ... mal wieder.

Halo 3 kommt am 26. September. Bestellt hab ich schon.

Derzeit gibt es auf MSN eine Fülle von sehr, sehr, sehr coolen Videos dazu. Die laufen bei mir gerade in der Heavy Rotation, wie es bei dem Klingelton-Sendern so schön heißt :-)

PS: Die Videos gibt es sogar in HD. Na mit welcher Technologie das wohl gemacht wurde?
:-)

Die Videos gibt es hier in HD und hier in normaler Auflösung. Also Boxen aufdrehen und freuen.

Wer jetzt noch keine Karte für die XTOPIA hat, ist ziemlich spät dran. :-)

Am 3. September läuft der Frühbuchertermin aus, und danach werden die (derzeit schon recht knappen) Tickets richtig rar und man muss den vollen Preis zahlen.

Die Vorbereitungen laufen schon auf Hochtouren und ich freu mich riesig drauf.

Mehr Infos: www.xtopia.de

Jetzt wo die API von Silverlight 1.0 mit dem RC fest ist, spriessen immer mehr Anwendungen aus dem Boden. Ich persönlich komme gerade selber nicht mehr ganz nach, daher bin ich froh, das Tim Sneath diese Liste erstellt hat.

2D Physics Engine, Amazon Search Visualization, Ant Attack, AOL Social Mail Gadget, Beatboxing, Bubble Factory, Bubblemark, Color Picker, Comic Book Viewer, Destroy All Invaders, Digger, Discovery Channel Never Miss TV, DotNetNuke Video Module, Dr Popper, EuroJobWeb, Flowers-For-You, Glyph Map, GOA WinForms Demo, Grand Piano, Infragistics Controls Demo, InkPresenter, JavaScript / .NET Chess, JellyGraph, Khet, Laugh-o-Sphere, Layout Controls, Line Graph, Major League Baseball, Michael’s Journal, Monotone, Nibbles Tutorials, Office Ribbon, Popfly, Python Console, Reflection Builder, Reflector for Silverlight, ReMIX07 Tokyo, Roxio Buzz, Silverlight Airlines Demo, Silverlight Chess Game Replay, Silverlight Mind Map, Silverlight Pad, Silverlight Rocks, SilverNibbles, Skinkers LiveStation, Sprawl, Surface Prototype, Telerik RadControls 3D Cube, Vertigo Flight Simulator, XPS Viewer, Zero Gravity

Und genau wie Tim, weiß ich von noch viel mehr Anwendungen, die mit dem offiziellen Launch bzw. mit der XTOPIA einhergehen werden. Habe sogar an einigen direkt mitarbeiten dürfen, bzw. beratend zur Seite gestanden.

"Microsoft evaluiert neue Suchoberfläche" stand heute bei ZDNET online. Na ja. Es ist eher eine (von vielen) Idee und gute Präsentation von mehreren Technologien die man miteinander kombinieren kann.

Man nehme die Suchfunktionen von Windows Live und baue eine Oberfläche mit typischen RIA (Rich Interactive Application) - Features und schon hat mein Erlebnis der besonderen Art: TAFITI :-)

Diese Suche nutzt die verschiedenen Features von Windows Live (Bildersuche, Newssuche, Feeds, etc.) und stellt die Ergebnisse mittels einer Silverlight Anwendung da. Suchergebnisse können per Drag&Drop gespeichert werden, in Bäumen dargestellt werden und viel mehr.

www.tafiti.com

PS: Kann übrigens jeder nachbauen wenn er mag.

Mit Silverlight ist es möglich dynamisch Daten nach zu laden. Das hat den Vorteil, das man nur bei wirklichen Bedarf Daten laden muss. Dadurch kann man seine Anwendung sehr gut für niedrige Bandbreiten optimieren.

Um die Bandbreite noch besser zu ausnutzen zu können unterstützt Silverlight das ZIP-Format. Das folgende Beispiel zeigt den notwendigen Code zu Download von 23 Bildern, die sich innerhalb einer ZIP-Datei befinden und anschließenden dynamisch zur Anwendung hinzugefügt werden.

In diesem Beispiel habe ich zusätzlich einen Fortschrittsbalken erstellt, der auf das Event DownloadProgressChanged reagiert und anzeigt wieviel Prozent bereits geladen wurden.

Das gesamte Beispiel kann hier herunter geladen werden.

_0_Base.Scene.prototype =
{
    handleLoad: function(plugIn, userContext, rootElement) 
    {
        this.plugIn = plugIn;
        
        this.progressControl = plugIn.content.findName("ProgressControl");
        this.progressControl.addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this, this.progressControlMouseDown));
        
        var progressBar = plugIn.content.findName("ProgressBar");
        progressBar.width = 0; 
    },
    
    progressControlMouseDown: function (sender, object)
    {
        // alert('progressBarMouseDown');
        
        // Create a Downloader object.
        var downloader = this.plugIn.createObject("downloader");
        
        // Add DownloadProgressChanged and Completed events.
        downloader.addEventListener("downloadProgressChanged", onDownloadProgressChanged);
        downloader.addEventListener("completed", onCompleted);
        
        // Start download
        downloader.open("GET", "muc.zip");

        // Execute the Downloader request.
        downloader.send();
    }
}

function onDownloadProgressChanged(sender, eventArgs)
{
    // Calculate the downloaded percentage.
    var percentage = Math.floor(sender.downloadProgress * 100);

    var plugIn = sender.getHost();
    var progressText = plugIn.content.findName("ProgressText");
    var progressBar = plugIn.content.findName("ProgressBar");
    var progressRectangle = plugIn.content.findName("ProgressRectangle");

    // Update the Rectangle and TextBlock objects of the visual progress indicator.
   
    var offset = progressRectangle.width / 100;
    progressText.text = percentage + " %";
    progressBar.width = percentage * offset; 
}

function onCompleted(sender, eventArgs)
{
    alert("onCompleted");
    var plugIn = sender.getHost();
    var container = plugIn.content.findName("Container");
    
    for(var i=1; i<24; i++)
    {
        var xaml = '<Image Canvas.Left="' + i * 10 + '" Canvas.Top="' + i * 10 + '" Width="160" Height="120" />';
        var img = plugIn.content.createFromXAML(xaml);
        img.setSource(sender, "muc"+i+".jpg");
        container.children.add(img);
    }
}

Wenn man dynamische Oberflächen erzeugen möchte, die erst zur Laufzeit erzeugt werden. Dann kann die sehr praktische Methode "CreateFromXAML" in Silverlight verwenden.

        var xaml = '<Ellipse';
        xaml += ' Width="' + GetRandomValue() + '"';
        xaml += ' Height="' + GetRandomValue() + '"';
        xaml += ' Fill="#FFFFFFFF"';
        xaml += ' Stroke="#FF000000"';
        xaml += ' Canvas.Left="' + GetRandomValue() + '"';
        xaml += ' Canvas.Top="' + GetRandomValue() + '"/>';
        
        // alert(xaml);
        
        var plugIn = sender.getHost();
        var elli = plugIn.content.createFromXaml(xaml);
        
        var container = plugIn.content.findName("Container");
        container.children.add(elli);

Das gesamte Codebeispiel ist hier zu finden.

Da es momentan nur den Canvas als Layout-Container für Silverlight gibt, muss sich selber Gedanken über das Anordnen von Element in Silverlight machen. Das ist relativ einfach.

Die kleine Beispielanwendung (Blaues Rechteck) passt die Größe des Silverlight-Controls automatisch an die Größe des Browserfensters an. Das innere schwarze Rechteck wiederum wird automatisch unten angeordnet, egal wie groß gerade das Fenster ist.

Der Javascript-Code dazu ist recht einfach:

_0_Base.Scene.prototype =
{
    handleLoad: function(plugIn, userContext, rootElement) 
    {
        this.plugIn = plugIn;
        
        // Sample button event hookup: Find the button and then attach event handlers
        this.text = rootElement.children.getItem(0);    
        
        plugIn.content.onResize = onResized;        
    }
}

function onResized (sender, eventArgs)
{
    updateLayout(sender);
}

function updateLayout(sender)
{
    var plugIn = sender.getHost();
    var offset = 20;
    
    var MainContainer = plugIn.content.findName("MainContainer");
    var SmallContainer = plugIn.content.findName("SmallContainer");
    
    MainContainer.Width = plugIn.content.actualWidth;
    MainContainer.Height = plugIn.content.actualHeight;
    
    SmallContainer.Width = MainContainer.Width - 2*offset;
    SmallContainer.setValue("Canvas.Top", MainContainer.Height - SmallContainer.Height - offset);
    
}

Die gesamte Beispielanwendung gibt es hier.

Ein Kollege von mir behauptet steif und fest er sei der Erfinder von "Hello World". Tja, leider hat er anscheinend dazu kein Patent eingereicht. Hätte er das, müsste er heute nicht Events in Asien organisieren ;-)

Hier ist quasi die Silverlight-Variante von "Hello World".

Der nötige HTML-Code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>01_HelloWorld</title>

    <script type="text/javascript" src="Silverlight.js"></script>
    <script type="text/javascript" src="Default.html.js"></script>
    <script type="text/javascript" src="Scene.xaml.js"></script>
</head>

<body>
    <div id="SilverlightPlugInHost">
        <script type="text/javascript">
            createSilverlight();
        </script>
    </div>
</body>
</html>

Die XAML-Datei

<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <TextBlock x:Name="myText" Text="Hello World" />
</Canvas>

Die passende Scene.xaml.js

if (!window._0_Base)
    window._0_Base = {};

_0_Base.Scene = function() 
{
}

_0_Base.Scene.prototype =
{
    handleLoad: function(plugIn, userContext, rootElement) 
    {
        this.plugIn = plugIn;
        
        // Sample button event hookup: Find the button and then attach event handlers
        this.text = rootElement.children.getItem(0);    
        
        this.text.addEventListener("MouseEnter", Silverlight.createDelegate(this, this.handleMouseEnter));
        this.text.addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this, this.handleMouseDown));
        this.text.addEventListener("MouseLeftButtonUp", Silverlight.createDelegate(this, this.handleMouseUp));
        this.text.addEventListener("MouseLeave", Silverlight.createDelegate(this, this.handleMouseLeave));
    },
    
    // Sample event handlers
    handleMouseEnter: function(sender, eventArgs) 
    {
        this.text.text = "MouseEnter";
    },
    
    handleMouseDown: function(sender, eventArgs) 
    {
        this.text.text = "MouseDown";
    },
    
    handleMouseUp: function(sender, eventArgs) 
    {
        this.text.text = "MouseUp";
    },
    
    handleMouseLeave: function(sender, eventArgs) 
    {
        this.text.text = "MouseLeave";
    }
}

Die gesamten Sourcen dazu findet man hier.

Für Visual Studio 2005 gibt es jetzt eine Projektvorlage im dort direkt Silverlight 1.0 Anwendungen entwickeln zu können.

Das schöne daran ist, das man sofort einen Button mit den üblichen Funktionen "MouseEnter", "MouseLeave" und Co. hat. Selbstredend ist der Button Rund :-)

Den Sourcecode für dieses unglaublich hervorragende Design gibt es hier.

Frisch aus dem Studio gibt es wieder eine Handvoll alter und neuer Demos zu Silverlight. Dieses Demos sind bereits für den den Release Candidate 1 angepasst worden. Viel Spaß.

Amazon Search Visualization
Bubblemark
Comic Book Viewer
Digger
Dr Popper
Glyph Map
GOA WinForms Demo
Grand Piano
JavaScript / .NET Chess
Laugh-o-Sphere
Monotone
Nibbles Tutorials
Office Ribbon
Popfly
Python Console
ReMIX07 Tokyo
Roxio Buzz
Silverlight Airlines Demo
Silverlight Mind Map
Silverlight Pad
Silverlight Rocks
Skinkers LiveStation
Sprawl
Surface Prototype
Telerik RadControls 3D Cube
XPS Viewer
Zero Gravity