如何在 Oracle Weblogic Portal 10gR3 中使用 Microsoft Silverlight
在 Oracle Weblogic Portal 10gR3 中使用 Microsoft Silverlight 1.0 软件开发工具包的分步说明。
引言
Oracle Weblogic Portal 是一个纯 J2EE 平台，使用 Silverlight 使我们有机会创建丰富的交互式门户。
本文提供了在 Oracle Weblogic Portal10gR3 中使用 Microsoft Silverlight 1.0 软件开发工具包的分步说明。
要求
- Oracle Weblogic Portal10gR3。
使用代码
首先，为您的浏览器安装 Silverlight 插件。打开 Oracle Workshop for Weblogic 10gR3，并创建两个项目：Portal EAR 项目和 Portal Web 项目。我将它们分别命名为 WLSilverlight 和 WLSilverlightPortal。
展开 WLSilverlightPortal 项目，然后展开 *WebContent* 文件夹（见图 1），并创建一个 *portlets* 文件夹。
右键单击 *portlets* 文件夹并创建另一个文件夹，我将其命名为 *silverlight*。
当您右键单击 *silverlight* 文件夹时，Oracle Weblogic Workshop 不允许您从下拉列表中选择 XAML 文件，但您可以通过以下方式导入或创建它：右键单击 *silverlight* 文件夹，然后选择新建 –> HTML，并将其重命名为 *myxaml.xaml*。
再次右键单击 *silverlight* 文件夹，并从 Microsoft Silverlight 1.0 软件开发工具包中导入 *Silverlight.js* 文件。
在 *silverlight* 文件夹中创建另一个 JavaScript 文件，并将其命名为 *createSilverlight.js*。将以下代码复制到该文件中
function createMySilverlightPlugin()
{
Silverlight.createObject(
"myxaml.xaml", // Source property value.
parentElement, // DOM reference to hosting DIV tag.
"mySilverlightPlugin", // Unique plug-in ID value.
{ // Per-instance properties.
width:'300', // Width of rectangular region of
// plug-in area in pixels.
height:'300', // Height of rectangular region of
// plug-in area in pixels.
inplaceInstallPrompt:false, // Determines whether to display
// in-place install prompt if
// invalid version detected.
background:'#D6D6D6', // Background color of plug-in.
isWindowless:'false', // Determines whether to display plug-in
// in Windowless mode.
framerate:'24', // MaxFrameRate property value.
version:'1.0' // Silverlight version to use.
},
{
onError:null, // OnError property value --
// event handler function name.
onLoad:null // OnLoad property value --
// event handler function name.
},
null); // Context value -- event handler function name.
}
您可以在 Source 属性值中看到在上一步中创建的 XAML 文件的名称。在 *silverlight* 文件夹中创建一个 *.jsp* 文件。在 Oracle Workshop Source 模式下打开 *.jsp* 文件。突出显示以下行
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"
粘贴以下代码
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" />
以下代码必须插入到 *.jsp* 中的 <body> 标签中
<!-- Where the Silverlight plug-in will go-->
<div id="mySilverlightPluginHost"
</div>
<script type="text/javascript">
// Retrieve the div element you created in the previous step.
var parentElement =
document.getElementById("mySilverlightPluginHost");
// This function creates the Silverlight plug-in.
createMySilverlightPlugin();
</script>
在 Workshop Source 中打开 *myxaml.xaml* 文件，并复制并粘贴以下 XAML 代码
<Canvas Width="300" Height="300"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<MediaElement x:Name="media"
Source="Butterfly.wmv"
Width="300" Height="300" />
<!-- Stops media playback.-->
<Canvas MouseLeftButtonDown="media_stop"
Canvas.Left="10" Canvas.Top="265">
<Rectangle Stroke="Black"
Height="30" Width="55"
RadiusX="5" RadiusY="5">
<Rectangle.Fill>
<RadialGradientBrush GradientOrigin="0.75,0.25">
<GradientStop Color="Orange" Offset="0.0" />
<GradientStop Color="Red" Offset="1.0" />
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>
<TextBlock Canvas.Left="5"
Canvas.Top="5">stop</TextBlock>
</Canvas>
<!-- Pauses media playback. -->
<Canvas MouseLeftButtonDown="media_pause"
Canvas.Left="70" Canvas.Top="265">
<Rectangle Stroke="Black"
Height="30" Width="55"
RadiusX="5" RadiusY="5">
<Rectangle.Fill>
<RadialGradientBrush GradientOrigin="0.75,0.25">
<GradientStop Color="Yellow" Offset="0.0" />
<GradientStop Color="Orange" Offset="1.0" />
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>
<TextBlock Canvas.Left="5" Canvas.Top="5">pause</TextBlock>
</Canvas>
媒体文件 *Butterfly.wmv* 已导入到 *silverlight* 文件夹中，您可以在 MediaElement 的 Source 属性中看到它的名称。您还可以在 *myxaml.xaml* 文件中看到三个按钮：Play、Pause 和 Stop。为了使这些按钮起作用，将以下 JavaScript 代码复制到 *jsp* 文件中，在 createMySilverlightPlugin(); 行的下方。
function media_stop(sender, args) {
sender.findName("media").stop();
}
function media_pause(sender, args) {
sender.findName("media").pause();
}
function media_begin(sender, args) {
sender.findName("media").play();
}
右键单击 JSP 文件，然后从下拉菜单中选择“在服务器上运行”。查看在 Oracle Weblogic Workshop 中运行的电影。在 *silverlight* 文件夹中创建一个门户，并从 JSP 文件创建一个 Portlet。将 Portlet 拖放到门户中。您的 *silverlight* 文件夹看起来类似于（图 2）
在 Oracle Weblogic Workshop 中，右键单击门户文件，然后从下拉菜单中选择“在服务器上运行”。您将看到如下所示的图片
使用示例代码
要运行此示例，只需将附加的 *silverlight* 文件夹导入到 Oracle Weblogic Portal Web 项目中，如图 2 所示。
结论
本文演示了如何使用 Silverlight 构建具有 .NET 媒体的丰富交互式 Oracle Weblogic 门户。
历史
- 1.0 版 - 文章已发布。