Insider's Eye

“WPF/E”開発を体験してみよう！

デジタルアドバンテージ　一色 政彦
2006/12/21
Page1 Page2 サンプル・コード Page3 Page4
　
<Canvas xmlns="http://schemas.microsoft.com/client/2007"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Loaded="javascript:root_Loaded">

  <Canvas x:Name="button">

    <Rectangle Stroke="#FF8E8E8E" StrokeThickness="2" RadiusX="2" RadiusY="2" Height="23" Width="92">
      <Rectangle.Fill>
        <LinearGradientBrush StartPoint="0.5,2.109" EndPoint="0.5,-1.109">
          <GradientStop x:Name="gradientStop1" Color="#FFFF9E00" Offset="1"/>
          <GradientStop x:Name="gradientStop2" Color="#FFEAEAEA" Offset="0.218"/>
        </LinearGradientBrush>
      </Rectangle.Fill>
    </Rectangle>

    <TextBlock Canvas.Top="3" Canvas.Left="21" FontSize="12" Foreground="#FF5A5A5A" Text="Click Me!" />

  </Canvas>

</Canvas>
XAMLファイルの内容（plugin.xaml）
　
  var hosts  = new Object();
  function agHost(hostElementID, id, width, height, backgroundcolor, sourceelement, source, windowlessmode, framerate, errorhandler) {
    var hostElement = document.getElementById(hostElementID);
    var innerHTML;

//assign error handler
    if(errorhandler == null) {
    errorhandler = "aghost_errorhandler";
    }

//IE detection
    if((navigator.appVersion.indexOf('MSIE') != -1)) {

    try {

        var WPFE = new ActiveXObject("AgControl.AgControl.0.8");

        innerHTML = '<object id="'+id+'" width="'+width+'" height="'+height+'" classid="CLSID:32C73088-76AE-40F7-AC40-81F62CB2C1DA">';

      if (sourceelement != null) {
          innerHTML += ' <param name="SourceElement" value="'+sourceelement+'" />';
      }
      if (source != null) {
          innerHTML += ' <param name="Source" value="'+source+'" />';
      }
      if (framerate != null) {
          innerHTML += ' <param name="MaxFrameRate" value="'+framerate+'" />';
      }
      if (errorhandler != null) {
          innerHTML += ' <param name="OnError" value="'+errorhandler+'" />';
      }
      if (backgroundcolor != null) {
          innerHTML += ' <param name="BackgroundColor" value="'+backgroundcolor+'" />';
      }
      if (windowlessmode != null) {
          innerHTML += ' <param name="WindowlessMode" value="'+windowlessmode+'" />';
      }
      innerHTML += '<\/object>';

      }

        catch(e) {

        innerHTML =  '<div width="'+width+'" height="'+height+'" >';
        innerHTML += '本ページのコンテンツを正しくご覧になるには、次のページから“WPF/E”（コード名）December 2006 CTP版をインストールしてください：';
        innerHTML +=  '<A href="http://go.microsoft.com/fwlink/?LinkID=77792&clcid=0x409">“WPF/E”プラグインのインストール・ページ</A>';
        innerHTML += '</div>'

        }
    }

    //FF/Windows detection
    else if((window.GeckoActiveXObject && navigator.userAgent.indexOf('Windows') != -1)) {

      innerHTML = '<embed id="'+id+'" width="'+width+'" height="'+height+'" pluginspage="http://go.microsoft.com/fwlink/?LinkID=77792&clcid=0x409';
         if (source != null) {
             innerHTML += '" Source="'+source;
         }
         if (sourceelement != null) {
          innerHTML += '" SourceElement="'+sourceelement;
         }
         if (framerate != null) {
             innerHTML += '" MaxFrameRate="'+framerate;
         }
         if (errorhandler != null) {
             innerHTML +='" OnError="'+errorhandler;
         }
         if (backgroundcolor != null) {
             innerHTML += '" BackgroundColor="'+backgroundcolor;
         }
         if (windowlessmode != null) {
             innerHTML += '" WindowlessMode="'+windowlessmode;
         }
      innerHTML += '" type="application/ag-plugin"/>';

      }

    //MAC detection
      else if(navigator.userAgent.indexOf("Macintosh") != -1){

        if(navigator.userAgent.indexOf("Firefox/1.5.0.8") != -1 || navigator.userAgent.indexOf("Safari") != -1){

          innerHTML = '<embed id="'+id+'" width="'+width+'" height="'+height+'" pluginspage="http://go.microsoft.com/fwlink/?LinkID=77793&clcid=0x409';
         if (source != null) {
             innerHTML += '" Source="'+source;
         }
         if (sourceelement != null) {
          innerHTML += '" SourceElement="'+sourceelement;
         }
         if (framerate != null) {
             innerHTML += '" MaxFrameRate="'+framerate;
         }
         if (errorhandler != null) {
             innerHTML +='" OnError="'+errorhandler;
         }
         if (backgroundcolor != null) {
             innerHTML += '" BackgroundColor="'+backgroundcolor;
         }
         if (windowlessmode != null) {
             innerHTML += '" WindowlessMode="'+windowlessmode;
         }
      innerHTML += '" type="application/ag-plugin"/>';

        //Disable Safari caching
        // For more information, see http://developer.apple.com/internet/safari/faq.html#anchor5

      innerHTML += "<iframe style='visibility:hidden'/>";

      }

      else {
        innerHTML =  '<div width="'+width+'" height="'+height+'" >';
        innerHTML += 'Firefox 1.5.0.8で、本ページのコンテンツを正しくご覧になるには、次のページから“WPF/E”（コード名）December 2006 CTP版をインストールしてください：';
        innerHTML +=  '<A href="http://go.microsoft.com/fwlink/?LinkID=78984&clcid=0x409">“WPF/E”プラグインのインストール・ページ</A>';
        innerHTML += '</div>'
        }
  }

    hostElement.innerHTML = innerHTML;
  }

  function aghost_errorhandler(line, col, hr, string) {
    if(line !=0 && col !=0)
    {
      var str = "("+line+","+col+"): "+string+"\n";
      str += "HRESULT: "+hr;
      alert(str);
    }
  }
agHost関連のJavaScriptファイルの内容（agHost.js）
IEの場合で、まずActiveXObjext関数を使って「AgControl.AgControl.0.8」のオブジェクトを生成しているのは（※その後は使用していない）、恐らくtry〜catch構文でエラー・ハンドリングを行うためのようだ。
　
function root_Loaded(sender, args) {
  var button = sender.findName("button");
  button.mouseEnter = "javascript:handleMouseEnter";
  button.mouseLeave = "javascript:handleMouseLeave";
  button.mouseLeftButtonUp = "javascript:handleMouseUp";
  button.mouseLeftButtonDown = "javascript:handleMouseDown";
}

function handleMouseEnter(sender, args) {
  var gradientStop1 = sender.findName("gradientStop1");
  var gradientStop2 = sender.findName("gradientStop2");
  gradientStop1.offset = 1;
  gradientStop2.offset = .403;
}

function handleMouseLeave(sender, args) {
  var gradientStop1 = sender.findName("gradientStop1");
  var gradientStop2 = sender.findName("gradientStop2");
  gradientStop1.offset = 1;
  gradientStop2.offset = .218;
}

function handleMouseUp(sender, args) {
  var gradientStop1 = sender.findName("gradientStop1");
  var gradientStop2 = sender.findName("gradientStop2");
  gradientStop1.offset = 1;
  gradientStop2.offset = .403;

  alert("クリックされました！");
}

function handleMouseDown(sender, args) {
  var gradientStop1 = sender.findName("gradientStop1");
  var gradientStop2 = sender.findName("gradientStop2");
  gradientStop1.offset = .7;
  gradientStop2.offset = .475;
}
イベント・ハンドラ関連のJavaScriptファイルの内容（eventHandlers.js）
　

　INDEX
　 [Insider's Eye] “WPF/E”vs. Adobe Flash、ガチンコ対決！
　   1．“WPF/E”の概要
　   2．“WPF/E”とFlashの機能比較（ランタイム）
　   3．“WPF/E”とFlashの機能比較（機能と制作）
　        比較表. “WPF/E”とFlashの比較
　 　
　 [Insider's Eye] “WPF/E”開発を体験してみよう！
　   1．“WPF/E”が動く仕組み
　   2．“WPF/E”の基本的な実装コード
      “WPF/E”のサンプル・コード
　   3．“WPF/E”の開発（Visual Studio編）
　   4．“WPF/E”の制作（Expression編）
　
　Insider's Eye


Insider.NET フォーラム 新着記事
  • 第2回　簡潔なコーディングのために （2017/7/26）
    　ラムダ式で記述できるメンバの増加、throw式、out変数、タプルなど、C# 7には以前よりもコードを簡潔に記述できるような機能が導入されている
  • 第1回　Visual Studio Codeデバッグの基礎知識 （2017/7/21）
    　Node.jsプログラムをデバッグしながら、Visual Studio Codeに統合されているデバッグ機能の基本の「キ」をマスターしよう
  • 第1回　明瞭なコーディングのために （2017/7/19）
    　C# 7で追加された新機能の中から、「数値リテラル構文の改善」と「ローカル関数」を紹介する。これらは分かりやすいコードを記述するのに使える
  • Presentation Translator （2017/7/18）
    　Presentation TranslatorはPowerPoint用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える
＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

注目のテーマ

Insider.NET 記事ランキング

本日 月間
＠IT