(untagged)

How to use Microsoft Silverlight in Oracle Weblogic Portal 10gR3

bnossov

0.00/5 (No votes)

5 Oct 2008

Step-by-step instructions on how to use the Microsoft Silverlight 1.0 Software Development Kit in Oracle Weblogic Portal10gR3.

Download source code - 2.66 MB

Introduction

Oracle Weblogic Portal is a pure J2EE platform, and using Silverlight gives us a chance to create rich interactive portals.

This article presents step-by-step instructions on how to user the Microsoft Silverlight 1.0 Software Development Kit in Oracle Weblogic Portal10gR3.

Requirements

Oracle Weblogic Portal10gR3.

Using the code

First, install the Silverlight plug-in for your browser. Open Oracle Workshop for Weblogic 10gR3, and create two projects: a Portal EAR Project and a Portal Web Project. I called them WLSilverlight and WLSilverlightPortal.

Expand the WLSilverlightPortal project and then expand the WebContent folder (see pic. 1), and create a portlets folder.

Pic. 1

Right click the portlets folder and create another folder, I called it silverlight.

The Oracle Weblogic Workshop does not give a chance to select the XAML file from the dropdown when you right-click the silverlight folder, but you can import it or create it by the following way: right click the silverlight folder, then New –> HTML, and rename it as myxaml.xaml.

Right click the silverlight folder again and import the Silverlight.js file from the Microsoft Silverlight 1.0 Software Development Kit.

Create another JavaScript file in the silverlight folder and name it createSilverlight.js. Copy the following code to the file:

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.
}

You can see the name of the XAML file created in the previous step in the Source property value. Create a .jsp file in the silverlight folder. Open the .jsp file in Oracle Workshop Source mode. Highlight the line:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd"

Paste the following code:

<!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" />

The following code has to be inserted in the .jsp <body> tag:

<!-- 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>

Open the myxaml.xaml file in the Workshop Source and copy and paste the following XAML code:

<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>

The media file Butterfly.wmv was imported into the silverlight folder and you can see its name in the Source property of MediaElement. You can also see three buttons in the myxaml.xaml file: Play, Pause, and Stop. To make these buttons functional, copy the following JavaScript code into jsp file, beneath the line 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();
}

Right-click the JSP file and select “Run on Server” from the dropdown. See the movie running in Oracle Weblogic Workshop. Create a portal in the silverlight folder and create a Portlet from the JSP file. Drag and drop the Portlet into the portal. Your silverlight folder looks similar to (pic. 2):

Pic. 2

In Oracle Weblogic Workshop, right-click the portal file and select “Run on Server” from the dropdown. You will see a picture like this:

Using the example code

To run this example, simply import the attached silverlight folder into the Oracle Weblogic Portal Web Project, as shown in Pic. 2.

Conclusion

This article demonstrates how to build rich interactive Oracle Weblogic Portals with .NET media using Silverlight.

History

Version 1.0 - Article posted.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here