Caton + OO + Google =?: 10月 2009

2009年10月28日星期三

心得 Silverlight Demo From Msdn

由於 Msdn 提供的教學影片是利用 silverlight 結合 javascript 及 asp.net 的方法來執行 silverlight 的事件，但現在本人以 visual stdio 2008 的開發平台來實做這個 demo 似乎有點多此一舉

所以以下就以 C# 的方式來編譯那些事件

範例網址

這個範例大致解說如下，建立四個圖片物件，分別有三種事件，
滑鼠移入物件: onMouseEnter（）將所選圖片透明度增加（預設0.65），圖片作部份位移
滑鼠移出物件: onMouseLeave（）還原位置及透明度
點選物件: onClick（）開啟網頁

在 C# 的 code 如下

onMouseEnter（）

由於 C# 定義較 javascript 嚴謹，所以要將sender 給予 Image的型態，（因為確定是由Image 所發生的物件）


   void onMouseEnter(Object sender, RoutedEventArgs e)
   {       
       Image img = (Image)sender;
       img.Opacity = 1;
       Canvas.SetTop(img, Canvas.GetTop(img) + 3);
       Canvas.SetLeft(img, Canvas.GetLeft(img) + 3);       
   }

onMouseLeave（）

原理同onMouseEnter（）


  void onMouseLeave(Object sender, RoutedEventArgs e)
   {

       Image img = (Image)sender;
       img.Opacity = 0.65;
       Canvas.SetTop(img, Canvas.GetTop(img) - 3);
       Canvas.SetLeft(img, Canvas.GetLeft(img) - 3);
   }

onClick（）

在C# 使用javascript 的 window 物件，必須要using "System.Windows.Browser"
但是沒有像javascript那麼齊全，例如就不能使用 window.open 這個方法，但是可以利用
Window.Eval 的方式來執行出來javascript的程式
下面就利用 eval 的方式執行出window.open來打開新網頁


        void onClick( object sender, RoutedEventArgs e)
        {            

            Image img = (Image)sender;
            
            switch (img.Name)
            {

                case "p1":                   

                    HtmlPage.Window.Eval("window.open('http://www.google.com.tw/);");

                    break;
                case "p2":
                    HtmlPage.Window.Eval("window.open('http://tw.yahoo.com/');");                   
                    break;

                case "p3":                   
                    HtmlPage.Window.Eval("window.open('http://www.pchome.com.tw/');");                         
                    break;

                case "p4":                   
                    HtmlPage.Window.Eval("window.open('http://tw.msn.com/');");                         
                    break;

                default:

                    break;

            }
            
        }

2009年10月23日星期五

Sliver light Demo2 輸入數字新增物件至Silverlight Canvas

標籤： Sliver Light

在這個例子中，試者修改畫布物件，輸入數目，變會在 canvas 上顯示多少個橢圓形

步驟可以參考

DEMO 網址

a. Index.html

在這裡有 3個 function

1. ShowTheEllipse: 執行建立物件的動作
2. ClearCanvase: 清除 Silverlight Canvas 的物件
3. addEllipse：新增物件到 Silverlight Canvas 上

code 如下


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title> Sliver Light Test 1</title>
<script type="text/javascript" src="Silverlight.js"></script>
<script type="text/javascript" src="SL2.js"></script>
<script type="text/javascript" src="index.js"></script>


<script type="text/javascript">


/// the canvas top
var top = 0;


function ShowTheEllipse() {

    // Get the inpute Value
    var GetValue = document.getElementById('txtInput').value;


    if (GetValue >= 0 && GetValue !="") {

        // Get the XAML Object
        var SlControl = document.getElementById('SilverlightPlugIn');

        // Claer the objevt in the canvas
        ClearCanvase();


        // Add the object in the canvas
        for (var i = 0; i < GetValue; i++) {

            var xaml = SlControl.content.createFromXaml(' <Ellipse Width="20" Height="15" Fill="Azure"/>');

            addEllipse(xaml);

        }



    }    
    else{

         alert("Error, must enter the number");
    } 
      

}


// Clear the objevt in the canvas
function ClearCanvase() {

    // Get the XAML Object
    var SlControl = document.getElementById('SilverlightPlugIn');

    var itemsContainer = SlControl.content.findName('Root');
    itemsContainer.children.clear();

    top = 0;

}



// Add the Ellipse object
function addEllipse(xaml) {

    // Get the XAML Object
    var SlControl = document.getElementById('SilverlightPlugIn');

    // Set the Canvas top
    xaml["Canvas.Top"] = top;
    var itemsContainer = SlControl.content.findName('Root');
    itemsContainer.children.insert(0, xaml);
    top += 20;
}

</script>
</head>
<body>

<input id="txtInput" type="text" />

<input id="ShowSilverlight" type="button" value="Enter the number to show the Ellipse in the seliverlight Canvase" onclick="ShowTheEllipse()"/>


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




</body>
</html>

b. 主要的js 檔呼叫 xaml 物件 , 如 index.js



function createSilverlight() {
var scene = new AdBanner.Scene();
Silverlight.createObjectEx({
    source: 'SL2.xaml',
    parentElement: document.getElementById('SilverlightPlugInHost'),
    id: 'SilverlightPlugIn',
    properties: {
        width: '300',
        height: '300',
        background: 'LightBlue',
        isWindowless: 'false',
        version: '1.0'
    },
    events: {
        onError: null,
        onLoad: Silverlight.createDelegate(scene, scene.handleLoad)
    },
    context: null
});
}

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

Silverlight.createDelegate = function(instance, method) {
return function() {
    return method.apply(instance, arguments);
}
}

c. Xaml 檔，定義 silverlight 物件的顯示，如 SL2.xaml

別忘了命名，在這裡將 Canvas 命名為 Root


<Canvas xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  x:Name="Root">


</Canvas>

d. X.Xaml.js ，定義 silverlight 物件的方法，如若在visual stdio 上，新增 XAML檔就會一起建立，如 SL2.js


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

AdBanner.Scene = function() {
}

AdBanner.Scene.prototype =
{
 handleLoad: function(plugIn, userContext, rootElement) {
     this.plugIn = plugIn;
 }
}

2009年10月22日星期四

Sliver light Demo1 使用javascript 改變 silverlight 物件

標籤： javascript, Sliver Light

以下這個例子包含我從創建簡單的slight 專案開始，這個專案是將html 輸入的文字秀到 silverlight 的畫布上

DEMO 網址

開啟專案的步驟

1. 建立專案，選擇 Sliverlight Application or Sliverlight Navigation Application

Sliverlight Application : 空白的專案

Sliverlight Navigation Application ：在專案中已有先建立簡單的瀏覽器的表框

2.

雖然原本有樣本可以使用(預設範例是 C# 或 VB 的方式)，但以下使用自行增加檔案來使用 javascript 執行 XAML

所以就新增物件如下

3.

新增html:

在 Web 選項中選擇 HTML Page，如圖

JS 檔： Web 選項中選擇： javascript File

xaml 檔 : Sliverlight 選項中選擇： SilverlightJScript Page

4.
設定執行首頁，在檔案上按右鍵，選 Set Start Page

5.

在 html 用 javascript 使用 silverlight 必須包含以下幾個檔案的設定

a. Index.html

b. 主要的js 檔呼叫 xaml 物件 , 如 SL1.js

c. Xaml 檔，定義 silverlight 物件的顯示，如 SL1.xaml

d. X.Xaml.js ，定義 silverlight 物件的方法，如 SL1.xaml.js

code 如下

a. Index.html

在這裡必須引用幾個JS 檔包含 Silverlight.js, SL1.js ,SL1.xaml.js


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title> Sliver Light Test 1</title>
<script type="text/javascript" src="Silverlight.js"></script>
  <script type="text/javascript" src="SL1.js"></script>
  <script type="text/javascript" src="SL1.xaml.js"></script>


<script type="text/javascript">

  function changeText() {
      // Get the inpute Value
      var GetValue = document.getElementById("txtInput").value;
       // Get the XAML Object
      var SlControl = document.getElementById("SilverlightPlugIn");
      // Get the Object SLText in the XAML file
      var SLText = SlControl.content.findName("SLText");
      // Change the ext
      SLText.Text = GetValue;
  }

</script>
</head>
<body>

<input id="txtInput" type="text" />

<input id="ShowSilverlight" type="button" value="Show in Silverlight Canvas" onclick="changeText()"/>


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

</body>
</html>

b. SL1.js



function createSilverlight() {
 var scene = new AdBanner.Scene();
 Silverlight.createObjectEx({
     source: 'SL1.xaml',
     parentElement: document.getElementById('SilverlightPlugInHost'),
     id: 'SilverlightPlugIn',
     properties: {
         width: '300',
         height: '300',
         background: 'LightBlue',
         isWindowless: 'false',
         version: '1.0'
     },
     events: {
         onError: null,
         onLoad: Silverlight.createDelegate(scene, scene.handleLoad)
     },
     context: null
 });
}

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

Silverlight.createDelegate = function(instance, method) {
 return function() {
     return method.apply(instance, arguments);
 }
}

c. SL1.xaml



<Canvas xmlns="http://schemas.microsoft.com/client/2007"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

<TextBlock x:Name="SLText" Width="67" Height="23.2" Canvas.Left="29"
    Canvas.Top="10" Foreground="#FFEFEFEF" Text="Enter and show" />


</Canvas>

d. SL1.xaml.js



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

AdBanner.Scene = function() {
}

AdBanner.Scene.prototype =
{
 handleLoad: function(plugIn, userContext, rootElement) {
     this.plugIn = plugIn;
 }
}

Eclipse4sl( silverlight develop with eclipse)

標籤：知識, Eclipse, Sliver Light

雖說 silver light 也可以在純文字下開發，但少了IDE 偵錯功能還是有點不方便，

所以除了在 visual studio 2008 上開發之外，也可以透過 eclipse 上的外掛來編譯 XAML 檔及開發

安裝方式如下（參考來源）

1. 安裝 jdk 1.0.5.11以上
2. eclipse 3.4 以上的IDE
3. .net Framework 3.5以上
4. silverlight 2 以上的 Runtime
5. silverlight 2 以上的 SDK
6. eclipse 中新增 Silverlight4sl 外掛（網址是 http://www.eclipse4sl.org/update/）

但目前安裝後僅有顯示XAML 的編輯工具，但編輯畫面沒有顯示出來....

Silver light 開發環境設定

標籤：知識, 網路, Sliver Light

Silverlight 是MS 所提供的一種網頁開發的技術，提供了許多在繪圖及網頁互動上的一些技術使網頁內容更為豐富。

Microsoft Silverlight 的 WIKI

安裝步驟可以參考

其實只要安裝第一點的 Silverlight 的開發人員工具在加上 visual stdio 2008 更新到sp1
就可以在 visual stdio 2008 進行開發

補充，其他只是讓開發更豐富的工具

如
第二點 Expression Blend 是一種提供圖形介面的操作方式，但是這裡只有試用版，若要使用必須額外購買

第三點的 Deep Zoom 是一種快速瀏覽影像的工具介紹

2009年10月19日星期一

Google Calendar的小工具介紹

標籤：知識, 網路, google api

除了 google calendar api 外， google 在 calendar 還提供了一些相關的應用

包含

Calendar Gadgets

這裡還可細分兩種

Event Gadgets
在google calendar 上加入小圖示，點入小圖示之後可以開啟一個小視窗可以包含圖片、網頁或 gadget

如圖

建立的方法有三種，這裡都有詳細的介紹

使用 Calendar Event Gadget Creator
使用 the iCalendar Format
使用 the Google Calendar data API

Sidebar Gadgets
開發 Gadget 在 google calendar 的右邊，範例的功能有世界時鐘、顯示年曆等等
說明網站在這邊，不過開發 Gadget 又要另一種的方式了

CalDAV

CalDAV 是一種行事曆同步協定，可以使其他行事曆 (如 Apple iCal、Mozilla Sunbird) ) 交換Google calendar 的資料。

Publishing Tools

透過這個小工具可以在網頁上鑲入google calendar
在網頁上（如blogger）中新增calendar 事件

2009年10月9日星期五

在html 中克服 ie 無法讀取 svg 的 library (SVG Web)

標籤：知識, 網路, javascript

SVG 是XML的一種可以用來顯示圖片，詳細的說明可以參照以下的網址

但可惜的是目前 IE 系列的瀏覽器還沒支援顯示SVG 的功能，
所幸可以透過安裝library 來解決這個問題

安裝及使用library 的步驟很簡單

1. 下載 library

2. 注意必須架在 HTTP server 上才可以正常執行，如IIS、 apache，不能直接用檔案開啟

3. 引用library （複製 library 的 src 資料夾）

<script src="src/svg.js" data-path="src" ></script>
src/svg.js js 檔相對於首頁的位置
src 相關的library

4. 引用 SVG 在 ie 和非 ie 有不同用法, 其中 sample.svg 只是檔名

用法1


 <!--[if IE]>
 <object src="sample.svg"classid="image/svg+xml"
         width="200" height="200"
         id="mySVGObject">
 <![endif]-->
 <!--[if !IE]>-->
 <object data="sample.svg" type="image/svg+xml"
         width="200" height="200"
         id="mySVGObject">
 <!--<![endif]-->
 </object>

用法 2

  <object type="image/svg+xml" data="sample.svg" width="200" height="200">
          <param name="mySVG" value="sample.svg"/>

2009年10月7日星期三

轉貼 HTML 教學網址錨點(anchor)

標籤：網路, javascript

錨點(anchor) 可以提供一個超連結，連到同一份 html 的不同位置，在撰寫 bloger 中若有大量的文章可以使用這個方法，方面文件的整理及搜尋

使用說明轉貼鋼鐵之翼

訂閱：文章 (Atom)

2009年10月28日 星期三

2009年10月23日 星期五

2009年10月22日 星期四

2009年10月19日 星期一

2009年10月9日 星期五

2009年10月7日 星期三