首页 > 无线通信 > 技术文章 > PHP开发者究竟需不需要Silverlight ?

PHP开发者究竟需不需要Silverlight ?

录入：edatop.com 点击：

　　第2步：添加XAML鼠标事件

　　主体工作完成后，我们接下来要做的才是真正有趣的事情，接下来的几步将分块进行，最后逐个构建，因此你必须确保一切正常，在这一步中，我们往清单1的代码中加入鼠标事件XAML代码。

　　Silverlight支持多种事件，你可以将其引入到XAML中，在这个JavaScript示例中，通过代码进行处理，对于这个demo，你可能最想加入的是鼠标事件：MouseLeftButtonUp，尽管其他鼠标事件如MouseMove、MouseEnter等也一样可以应用到这里，这些事件在Silverlight鼠标支持更多的描述。

　　回到清单1 XAML控制面板代码中去，在每个ellipse标签的末尾，添加下面的代码：

MouseLeftButtonUp="dropDots"

　　然后在createSilverlight.js文件中，添加下面的代码：

function dropDots(sender, mouseEventArgs){alert('dots dropped!');}

刷新一下这个页面，现在你会发现，当你在小圆圈上点击时，会弹出一个对话框

　　接下来对alert语句稍微做一下改动，如下：

　　sender.fill = "red";

　　这就是一个简单的与XAML交互的例子，看起来还是瞒easy的，再重新刷新一下这个页面，在小圆圈上点击时，你会发现它的颜色就变成红色了。

　　现在再用下面的语句替换到sender.fill：

　　alert(sender.Fill.Color);

　　这样返回的就是当前小圆圈颜色的值了。

　　第3步：将PHP添加为XAML的源

　　那么PHP该放到那儿呢？正如前面提到的，你可以将其作为Silverlight对象的一个源使用。

　　将清单4中的代码保存为drawDots.php。

　　清单4：drawDots.php

＜?header('Content-type: text/xml');?＞＜Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="controlPanel_design"＞＜Canvas x:Name="Layer_1" Width="640" Height="80" Canvas.Left="0" Canvas.Top="0"＞＜Ellipse x:Name="Ellipse" Width="71" Height="71" Canvas.Left="99.5133" Canvas.Top="5.5" Stretch="Fill" StrokeThickness="3" StrokeLineJoin="Round" Stroke="#FF000000" Fill="#FFFF0000"/＞＜Ellipse x:Name="Ellipse_0" Width="71" Height="71" Canvas.Left="192.86" Canvas.Top="5.5" Stretch="Fill" StrokeThickness="3" StrokeLineJoin="Round" Stroke="#FF000000" Fill="#FFFFFF00"/＞＜Ellipse x:Name="Ellipse_1" Width="71" Height="71" Canvas.Left="286.207" Canvas.Top="5.5" Stretch="Fill" StrokeThickness="3" StrokeLineJoin="Round" Stroke="#FF000000" Fill="#FF00C800"/＞＜Ellipse x:Name="Ellipse_2" Width="71" Height="71" Canvas.Left="379.553" Canvas.Top="5.5" Stretch="Fill" StrokeThickness="3" StrokeLineJoin="Round" Stroke="#FF000000" Fill="#FF230FD2"/＞＜Ellipse x:Name="Ellipse_3" Width="71" Height="71" Canvas.Left="472.9" Canvas.Top="5.5" Stretch="Fill" StrokeThickness="3" StrokeLineJoin="Round" Stroke="#FF000000" Fill="#FFC80FA0"/＞＜/Canvas＞＜/Canvas＞

　　接下来，在createSilverlight.js中添加一个函数：

function createDisplayCanvas(){Silverlight.createObjectEx({source: "drawDots.php",parentElement: document.getElementById("dotDisplayCanvas"),id: "slDisplayCanvas",properties: {width: "100%",height: "100%",inplaceInstallPrompt:true,version: "1.0"}});}

　　最后，替换PHPDemo.htm中的内容：

＜div＞＜/div＞　　为

＜div＞＜script type="text/javascript"＞createDisplayCanvas();＜/script＞＜/div＞

　　重新刷新一下页面，这下你会发现现在页面上显示了两排小圆圈，如图3所示。

　　第4步：用PHP创建动态XAML

　　至此，所有小块都完成了，你可以加入最后的代码了，在第2步中，你创建了一些鼠标事件，在第3步中，你创建了一些PHP代码，你可能已经猜到下面将要做什么了。
对于这个demo，你的控制面板有且只有一个功能就是：增加带颜色的小圆圈，其实，你还可以做得更多，但限于篇幅，我这里只介绍一下使用URL字符串传递一连串的JavaScript变量，概括如下：

　　●每次点击小圆圈时，JavaScript将添加一个新值到字符串中。
　　●然后将这个字符串传递给你的PHP脚本。
　　●PHP脚本将这个字符串转变为数组。
　　●基于数组的长度和值，返回一套小圆圈。

　　createSilverlight.js要做一点改动，由于颜色是作为一个通用的名字进行传递的，但我更喜欢使用十六进制值表示，正如你在前面看到的，Fill.Color返回的值很长，为了将其转换为十六进制，需要添加下面这个函数：

　　注意最后添加到字符串的"ff"，Silverlight使用8位数表示十六进制颜色值，因此需要在6位值的前面加上两个字符"ff"。

　　使用下面的代码完全替换掉dropDots()函数：

var dotColors="";function dropDots(sender, mouseEventArgs){if (dotColors != ""){dotColors += ",";}dotColors += getFillColor(sender.Fill.Color);createDisplayCanvas();}

　　注意这里使用了新的全局变量"dotColors"。

　　在createDisplayCanvas()函数中，用：

　　source: "drawDots.php?colors=" + dotColors,

　　替换掉：
　　source: "drawDots.php",

　　至此，createSilverlight.js的内容如下：

　　清单5：修改好的createSilverlight.js

　　用清单6中的代码完全替换掉drawDots.php。

　　清单6：修改后的drawDots.php

＜?header('Content-type: text/xml');?＞＜?$arrColors = explode(",",$_GET["colors"]);srand(time());?＞＜Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="resultCanvas"＞＜Canvas x:Name="Layer_1" Width="640" Height="80" Canvas.Left="0" Canvas.Top="0"＞＜?$n = 0;foreach ($arrColors as $c) {$n++;$lft = (rand()%530);$top = (rand()%370);echo('＜Ellipse x:Name="Ellipse_' . $n . '" Width="100" Height="100" Canvas.Left="' . $lft . '" Canvas.Top="' . $top . '" Stretch="Fill" Fill="#' . $c . '"/＞');}?＞＜/Canvas＞＜/Canvas＞
　　正如你所看到的，XAML中的鼠标事件触发了一个包括一个全局变量的JavaScript程序，它填充选中的小圆圈的颜色，然后调用createDisplayCanvas()重新绘制画布，通过GET将这个字符串传递给PHP。

　　新的PHP脚本将GET字符串转换成数组，然后通过每一个形成一个环，另外，我还在Ellipse XAML echo内为Canvas.Left和Canvas.Top设置了随机数以增加公式的随机性，这对于其他的东西没有任何实用的价值，只不过是想刺激一下想象力，产生更多的创造力和激发人们对这个技术的热情。

　　最终结果可以下载zip压缩包。

上一篇：面向工业电脑与嵌入式系统的节电长效内存
下一篇：FTTx构建移动全业务接入网