Click here to Skip to main content
13,198,325 members (85,669 online)
Click here to Skip to main content
Add your own
alternative version


5 bookmarked
Posted 5 Oct 2008

How to use Microsoft Silverlight in Oracle Weblogic Portal 10gR3

, 5 Oct 2008
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.


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.


  • 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()
        "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" 


Paste the following code:


  "-//W3C//DTD XHTML 1.0 Transitional//EN"

<html xml:lang="en" xmlns="" />

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"

<script type="text/javascript">
    // Retrieve the div element you created in the previous step.
    var parentElement = 
    // This function creates the Silverlight plug-in.


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

<Canvas Width="300" Height="300"


  <MediaElement x:Name="media" 


    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">
        <RadialGradientBrush GradientOrigin="0.75,0.25">
          <GradientStop Color="Orange" Offset="0.0" />
          <GradientStop Color="Red" Offset="1.0" />        
    <TextBlock Canvas.Left="5" 

  <!--<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">
        <RadialGradientBrush GradientOrigin="0.75,0.25">
          <GradientStop Color="Yellow" Offset="0.0" />
          <GradientStop Color="Orange" Offset="1.0" />        
    <TextBlock Canvas.Left="5" Canvas.Top="5">pause</TextBlock> 

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

function media_pause(sender, args) {

function media_begin(sender, args) {

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.


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


  • Version 1.0 - Article posted.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

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

You may also be interested in...


Comments and Discussions

GeneralThx Pin
DZaK8311-Oct-08 23:43
memberDZaK8311-Oct-08 23:43 
GeneralRe: Thx Pin
bnossov13-Oct-08 13:39
memberbnossov13-Oct-08 13:39 

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

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

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.171020.1 | Last Updated 5 Oct 2008
Article Copyright 2008 by bnossov
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid