Click here to Skip to main content
Click here to Skip to main content

How to use Microsoft Silverlight in Oracle Weblogic Portal 10gR3

, 5 Oct 2008 CPOL
Rate this:
Please Sign up or sign in to vote.
Step-by-step instructions on how to use the Microsoft Silverlight 1.0 Software Development Kit in Oracle Weblogic Portal10gR3.

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.

image001.png

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:

<!--<span class="code-comment"> Where the Silverlight plug-in will go--></span>
<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" />

  <!--<span class="code-comment"> Stops media playback.--></span>    
  <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>
  
  <!--<span class="code-comment"> Pauses media playback. --></span>
  <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):

image002.png

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:

image003.png

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, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

bnossov
Web Developer
United States United States
Boris works as a Portal Developer.
Hi is excited about SharePoint, WPF, Silverlight and trying to implement them in portal development

Comments and Discussions

 
GeneralThx PinmemberDZaK8312-Oct-08 0:43 
GeneralRe: Thx Pinmemberbnossov13-Oct-08 14:39 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.150414.1 | Last Updated 5 Oct 2008
Article Copyright 2008 by bnossov
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid