DIY编程器网

标题: PHP开发者究竟需不需要Silverlight ? [打印本页]
作者: admin    时间: 2014-10-13 13:32
标题: PHP开发者究竟需不需要Silverlight ?
　　你认为PHP开发者不需要Silverlight吗？再好好考虑一下。通过动态产生XAML（扩展应用程序标记语言），PHP开发者使用微软公司的Silverlight绝技可以使他们的技能锦上添花，并且可以给他们的PHP页面增加全新的视觉组件，本文详细介绍通过使用XAML代码、JavaScript和PHP构建一个简单的Silverlight应用程序。

　　Silverlight给那些热爱.NET的开发者，特别是那些精通微软开发工具如Visual Studio? 2008和最新的Expression? Studio的人提供许多诱人之处，但对于PHP开发者而言，仍然可以大受裨益的，事实上，使用Silverlight、XAML、PHP和JavaScript代码，将会使你的PHP页面增色不少。

　　为了演示Silverlight作为一款浏览器插件它的众多功能，我打算不用微软的开发的工具开发一款简单的Silverlight应用程序来进行说明，这个demo主要集中讲述Silverlight运行时作为一个XAML解释器的角色，由于它没有进入.NET开发，你可以在Silverlight 1.0或2.0 alpha版本中使用它。

　　创建一个强壮的PHP应用程序，你需要遵守许多关键原则：

　　●在Silverlight应用程序中使用XAML
　　●使用PHP投递动态XAML
　　●在XAML代码中添加鼠标事件创建一个高度敏感的UI

　　注意：这里所要做的事情在任何一个文本编辑器中都能实现，包括记事本，就我个人经验而言，我推荐Editplus，它非常友好而且使用起来也很简单。

　　第1步：使用XAML组件创建一个示例页面

　　第一步是最复杂的一步，这一步的目标是要将某些内容建立起来并让它可以脱离Expression Studio运行。

　　首先，确保你安装了最新的Silverlight运行库。你可以选择使用最近发布的Silverlight 1.0，但由于本站的其他文章可能需要安装Silverlight 2.0 alpha版本，故你还是最好选择安装最新的2.0版本。

　　接下来，以XAML格式创建一个控制面板，绘制一排有颜色的小圆点，如图1所示。大量的所见即所得的XAML编辑器发行了多个不同阶段的产品，但在这里，我选择了微软的Expression? Design，在绘制了一系列的小圆点后，我使用了Export功能，将其设置为Silverlight，并接受所有默认的选项。


图1：XAML控制面板

　　或者你将清单1中的代码拷贝并粘贴到一个名叫controlPanel.xaml的文件中也行。

　　清单1：controlPanel.xaml

           
  1. ＜?xml version="1.0" encoding="utf-8"?>＞
  2. ＜Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="controlPanel_design"＞
  3. ＜Canvas x:Name="Layer_1" Width="640" Height="80" Canvas.Left="0" Canvas.Top="0"＞
  4. ＜Ellipse x:Name="Ellipse" Width="71" Height="71" Canvas.Left="99.5133"
  5. Canvas.Top="5.5" Stretch="Fill" StrokeThickness="3" StrokeLineJoin="Round"
  6. Stroke="#FF000000" Fill="#FFFF0000"/＞
  7. ＜Ellipse x:Name="Ellipse_0" Width="71" Height="71" Canvas.Left="192.86"
  8. Canvas.Top="5.5" Stretch="Fill" StrokeThickness="3" StrokeLineJoin="Round"
  9. Stroke="#FF000000" Fill="#FFFFFF00"/＞
  10. ＜Ellipse x:Name="Ellipse_1" Width="71" Height="71"
  11. Canvas.Left="286.207" Canvas.Top="5.5" Stretch="Fill" StrokeThickness="3"
  12. StrokeLineJoin="Round" Stroke="#FF000000" Fill="#FF00C800"/＞
  13. ＜Ellipse x:Name="Ellipse_2" Width="71" Height="71"
  14. Canvas.Left="379.553" Canvas.Top="5.5"
  15. Stretch="Fill" StrokeThickness="3" StrokeLineJoin="Round"
  16. Stroke="#FF000000" Fill="#FF230FD2"/＞
  17. ＜Ellipse x:Name="Ellipse_3" Width="71" Height="71"
  18. Canvas.Left="472.9" Canvas.Top="5.5" Stretch="Fill" StrokeThickness="3"
  19. StrokeLineJoin="Round" Stroke="#FF000000" Fill="#FFC80FA0"/＞
  20. ＜/Canvas＞
  21. ＜/Canvas＞
复制代码
           

　　关于XAML有两件事情需要注意：

　　正如你所看到的那样，它实际上还是XML，因此，只要文档类型还是那样定义的，它还是可以象其他XML文件那样进行投递。
　　注意图1中的图像是如何转换成Ellipse标签嵌套在Canvas标签中的，从编程角度而言，产生这样的代码并不困难。

　　在你的网页中使用XAML产生Silverlight应用程序关键的文件是Silverlight.js，Visual Studio 2008和Expression Studio开发工具都会自动创建这个文件，并包含在你的web项目中，对于本文给出的demo而言，你需要从http://assets.devx.com/ria/21291.js下载，你可以在MSDN上的“安装Silverlight插件”（http://www.devx.com/RIA/Link/36025）文章了解更多关于这个文件的信息。

　　注意：建议不要独立使用这个文件，因为微软经常更新JavaScript。实际上，要创建这个文件，我是通过创建一个空白的Microsoft ? Expression? Blend 2项目，然后拷贝Silverlight.js文件到我们的demo中。

　　你也可以在你的网页上再添加一些JavaScript内容来实例化Silverlight对象。因此，我创建了一个createSilverlight.js文件，它的代码如清单2所示。

　　清单2：createSilverlight.js
　

           
  1. function createControlPanel()
  2. {
  3. Silverlight.createObjectEx({
  4. source: "controlPanel.xaml",
  5. parentElement: document.getElementById("dotControlPanel"),
  6. id: "slControlPanel",
  7. properties: {
  8. width: "100%",
  9. height: "100%",
  10. inplaceInstallPrompt:true,
  11. version: "1.0"
  12. }
  13. });
  14. }


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

  20. Silverlight.createDelegate = function(instance, method) {
  21. return function() {
  22. return method.apply(instance, arguments);
  23. }
  24. }
复制代码
           

　　仔细研究一下清单2，你会发现一些有趣的事情：

　　● createSilverlight.js是示例代码的标准文件名，同通常也保留了创建Silverlight的功能，但正如你在这里所看到的，名字完全由你自己定。
　　● 注意其中的Silverlight.createObjectEx调用，它的源是一个XAML文件，也就是你刚刚创建的那个文件，但实际上那个源可以是任何能够返回XAML代码的文件，包括编译后的二进制文件或PHP脚本文件。
　　● parentElement指定了显示结果要用到的DOM对象。
　　● id就是这个Silverlight控件的ID，如果创建了多个控件，确保它是唯一的。
　　● 特别要注意properties属性，你可以指定真实的尺寸规格，也可以象我这里这样使用100%，但你必须要小心inplaceInstallPrompt和version的值。在前面引用的那篇MSDN文章（http://www.devx.com/RIA/Link/36025）对安装提示做了详细说明。这里的版本号，由于之前早就定了要使用Silverlight 1.0运行时程序库，所以这里就指定为1.0。但你在开发.NET应用程序时，如果使用了新版本的某些功能，那么请在这里指定为2.0.

　　为了将它们集成到一起，创建一个测试页PHPdemo.htm，它的内容如下。

　　清单3： PHPdemo.htm


           
  1. ＜html＞
  2. ＜head＞
  3.   ＜title＞Silverlight PHP Demo＜/title＞
  4. ＜script type="text/javascript" src="Silverlight.js"＞＜/script＞
  5. ＜script type="text/javascript" src="createSilverlight.js"＞＜/script＞
  6. ＜style type="text/css"＞
  7. .controlPanel {
  8. height: 80px;
  9. width: 640px;
  10. }
  11. .XAMLCanvas {
  12. height: 480px;
  13. width: 640px;
  14. }
  15. ＜/style＞
  16. ＜/head＞

  18. ＜body＞
  19. ＜div id="dotControlPanel" class="controlPanel"＞
  20. ＜script type="text/javascript"＞
  21. createControlPanel();
  22. ＜/script＞
  23. ＜/div＞
  24. ＜div id="dotDisplayCanvas" class="XAMLCanvas"＞
  25. ＜/div＞
  26. ＜/body＞
  27. ＜/html＞
复制代码
           


　　没有什么好解释的，这里引入了两个外部JavaScript文件，通过css设置了一些尺寸规格，然后添加了两个div，一个用于控制面板，一个用于显示结果，在div里面，调用了一个JavaScript函数，实例化Silverlight对象。

　　在Web浏览器中运行这个页面，你应该会看到某些Silverlight发生作用了，如图2所示。



　　第2步：添加XAML鼠标事件

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

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

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


           
  1. MouseLeftButtonUp="dropDots"
复制代码
           

　　然后在createSilverlight.js文件中，添加下面的代码：
           
  1. function dropDots(sender, mouseEventArgs)
  2. {
  3. alert('dots dropped!');
  4. }

复制代码
           

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

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

　　sender.fill = "red";

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

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

　　alert(sender.Fill.Color);

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

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

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

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

　　清单4：drawDots.php

           
  1. ＜?
  2. header('Content-type: text/xml');
  3. ?＞
  4. ＜Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="controlPanel_design"＞
  5. ＜Canvas x:Name="Layer_1" Width="640" Height="80" Canvas.Left="0"
  6. Canvas.Top="0"＞
  7. ＜Ellipse x:Name="Ellipse" Width="71" Height="71" Canvas.Left="99.5133"
  8. Canvas.Top="5.5" Stretch="Fill" StrokeThickness="3" StrokeLineJoin="Round"
  9. Stroke="#FF000000" Fill="#FFFF0000"/＞
  10. ＜Ellipse x:Name="Ellipse_0" Width="71" Height="71"
  11. Canvas.Left="192.86" Canvas.Top="5.5" Stretch="Fill" StrokeThickness="3"
  12. StrokeLineJoin="Round" Stroke="#FF000000" Fill="#FFFFFF00"/＞
  13. ＜Ellipse x:Name="Ellipse_1" Width="71" Height="71"
  14. Canvas.Left="286.207" Canvas.Top="5.5" Stretch="Fill" StrokeThickness="3"
  15. StrokeLineJoin="Round" Stroke="#FF000000" Fill="#FF00C800"/＞
  16. ＜Ellipse x:Name="Ellipse_2" Width="71" Height="71"
  17. Canvas.Left="379.553" Canvas.Top="5.5" Stretch="Fill" StrokeThickness="3"
  18. StrokeLineJoin="Round" Stroke="#FF000000" Fill="#FF230FD2"/＞
  19. ＜Ellipse x:Name="Ellipse_3" Width="71" Height="71"
  20. Canvas.Left="472.9" Canvas.Top="5.5" Stretch="Fill" StrokeThickness="3"
  21. StrokeLineJoin="Round" Stroke="#FF000000" Fill="#FFC80FA0"/＞
  22. ＜/Canvas＞
  23. ＜/Canvas＞

复制代码
           

　　接下来，在createSilverlight.js中添加一个函数：
           
  1. function createDisplayCanvas()
  2. {
  3. Silverlight.createObjectEx({
  4. source: "drawDots.php",
  5. parentElement: document.getElementById("dotDisplayCanvas"),
  6. id: "slDisplayCanvas",
  7. properties: {
  8. width: "100%",
  9. height: "100%",
  10. inplaceInstallPrompt:true,
  11. version: "1.0"
  12. }
  13. });
  14. }
复制代码
           

　　最后，替换PHPDemo.htm中的内容：
           
  1. ＜div id="dotDisplayCanvas" class="XAMLCanvas"＞
  2. ＜/div＞
复制代码
           
　　为
           
  1. ＜div id="dotDisplayCanvas" class="XAMLCanvas"＞
  2. ＜script type="text/javascript"＞
  3. createDisplayCanvas();
  4. ＜/script＞
  5. ＜/div＞
复制代码
           

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


　　第4步：用PHP创建动态XAML

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

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

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

           
  1. function getFillColor(color)
  2. {
  3. var fill = color;
  4. if (fill < 0) {
  5. fill = (16777216 + parseInt(fill));
  6. }
  7. fill = fill.toString(16);
  8. if (fill.length > 6) {
  9. fill = fill.substr(fill.length - 6);
  10. }
  11. while (fill.length < 6) {
  12. fill = "0" + fill;
  13. }
  14. fill = "ff" + fill;
  15. return fill;
  16. }
复制代码
           

　　注意最后添加到字符串的“ff”，Silverlight使用8位数表示十六进制颜色值，因此需要在6位值的前面加上两个字符“ff”。
　　使用下面的代码完全替换掉dropDots()函数：
           
  1. function createControlPanel()
  2. {
  3. Silverlight.createObjectEx({
  4. source: "controlPanel.xaml",
  5. parentElement: document.getElementById("dotControlPanel"),
  6. id: "slControlPanel",
  7. properties: {
  8. width: "100%",
  9. height: "100%",
  10. inplaceInstallPrompt:true,
  11. version: "1.0"
  12. }
  13. });
  14. }


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

  20. Silverlight.createDelegate = function(instance, method) {
  21. return function() {
  22. return method.apply(instance, arguments);
  23. }
  24. }0
复制代码
           

　　注意这里使用了新的全局变量“dotColors”。
　　在createDisplayCanvas()函数中，用：
　　source: "drawDots.php?colors=" + dotColors,
　　替换掉：
　　source: "drawDots.php",
　　至此，createSilverlight.js的内容如下：
　　清单5：修改好的createSilverlight.js
           
  1. function createControlPanel()
  2. {
  3. Silverlight.createObjectEx({
  4. source: "controlPanel.xaml",
  5. parentElement: document.getElementById("dotControlPanel"),
  6. id: "slControlPanel",
  7. properties: {
  8. width: "100%",
  9. height: "100%",
  10. inplaceInstallPrompt:true,
  11. version: "1.0"
  12. }
  13. });
  14. }


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

  20. Silverlight.createDelegate = function(instance, method) {
  21. return function() {
  22. return method.apply(instance, arguments);
  23. }
  24. }1
复制代码
           

　　用清单6中的代码完全替换掉drawDots.php。
　　清单6：修改后的drawDots.php
           
  1. function createControlPanel()
  2. {
  3. Silverlight.createObjectEx({
  4. source: "controlPanel.xaml",
  5. parentElement: document.getElementById("dotControlPanel"),
  6. id: "slControlPanel",
  7. properties: {
  8. width: "100%",
  9. height: "100%",
  10. inplaceInstallPrompt:true,
  11. version: "1.0"
  12. }
  13. });
  14. }


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

  20. Silverlight.createDelegate = function(instance, method) {
  21. return function() {
  22. return method.apply(instance, arguments);
  23. }
  24. }2
复制代码
           

　　正如你所看到的，XAML中的鼠标事件触发了一个包括一个全局变量的JavaScript程序，它填充选中的小圆圈的颜色，然后调用createDisplayCanvas()重新绘制画布，通过GET将这个字符串传递给PHP。

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

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



欢迎光临 DIY编程器网 (http://diybcq.com/) Powered by Discuz! X3.2