Overview   Package  Class  Use  Tree  Deprecated  Index  Help 
 PREV PACKAGE   NEXT PACKAGE FRAMES    NO FRAMES    

Package com.bramosystems.oss.player.script.client

Provides classes and interface to export the API as a Javascript library in non-GWT applications such as traditional page-based web applications.

See:
          Description

Interface Summary
ExportProvider Deprecated. As of 1.3, replaced with AbstractExportProvider.
 

Class Summary
AbstractExportProvider Abstract implementation for providers of the player and seekbar widgets exported as Javascript objects.
ExportUtil Utility class to export the player and seek bar widgets as Javascript objects that can be used in non-GWT applications.
 

Package com.bramosystems.oss.player.script.client Description

Provides classes and interface to export the API as a Javascript library in non-GWT applications such as traditional page-based web applications. This enables the players to be used as widgets on websites.

Exporting the player widgets

Exporting widgets requires some simple steps: These steps are further explained:

Inherit the Script module

As required by the GWT compiler, the com.bramosystems.oss.player.script.Script module should be inherited to use the class and interface in this package. 

    <!-- MyGWTApp.gwt.xml -->
    <inherits name="com.bramosystems.oss.player.script.Script" />

Implement the ExportProvider interface

The ExportProvider interface defines methods to retrieve the widgets to be exported as Javascript objects. Therefore, create a class that implements the interface and return the player widgets of your choice. The following sample shows a basic implementation: 

    public class MyCoolProvider implements ExportProvider {
       private Plugin plugin;

       public AbstractMediaPlayer getPlayer(Plugin plugin, String mediaURL, boolean autoplay, String width,
                 String height, HashMap<String, String> options) throws LoadException,
                 PluginNotFoundException, PluginVersionException {
          this.plugin = plugin;
          return PlayerUtil.getPlayer(plugin, mediaURL, autoplay, height, width);
       }

       public Widget getMissingPluginWidget() {
          return PlayerUtil.getMissingPluginNotice(plugin);
       }

       public Widget getMissingPluginVersionWidget() {
          return PlayerUtil.getMissingPluginNotice(plugin);
       }

       public MediaSeekBar getSeekBar(int height, HashMap<String, String> options) {
          return new CSSSeekBar(height);
       }
    }

Add a GWT type-replacement mapping

The ExportProvider implementation is instantiated by the ExportUtil class using deferred binding while exporting the players. For the process to be a success, a type-replacement mapping is required in your modules' definition.

A sample is shown below: 


   <!-- MyGWTApp.gwt.xml -->
   <replace-with class="com.example.MyCoolProvider">
      <when-type-is class="com.bramosystems.oss.player.script.client.ExportProvider"/>
   </replace-with>
Of course, other GWT type-replacement conditions could be used as required.

Export the widgets

The ExportUtil class defines static methods to export the player and seekbar widgets. The class could be used in module entry implementations as shown below: 

   public class Xporter implements EntryPoint {

     public Xporter() {
        ExportUtil.exportPlayer();
        ExportUtil.exportSeekBar();
     }

     public void onModuleLoad() {
        ExportUtil.signalAPIReady();
     }
   }
The ExportUtil.exportPlayer() method instantiates the ExportProvider implementation and exports the player widget returned by the getPlayer() method. If the required plugin is not found the getMissingPluginWidget() method is called while the getMissingPluginVersionWidget() is called when the required plugin version is not found.

The player widget is exported as a bstplayer.Player(plugin,mediaURL,autoplay,width,height,options) object where:

See sample usage below.

Similary, the ExportUtil.exportSeekBar() method instantiates the ExportProvider implementation and exports the seekbar widget returned by the getSeekBar() method.

The seekbar widget is exported as a bstplayer.SeekBar(height,containerId,options) object where: See sample usage below.

The ExportUtil.signalAPIReady() method notifies the host page that the Javascript objects are now available and can be created and used as required. This method calls the onBSTPlayerReady() Javascript function, which SHOULD be defined on the host page. The Player and/or SeekBar objects SHOULD be created within this function.

Using the exported widgets

The exported API should be available as a GWT compilation in its module folder/directory. Using the widgets is thereafter simple:

Add the module script to the host page

GWT applications end up as an module-name.nocache.js javascript file, hence add this to the HTML host page. 

      <script type="text/javascript" src="module-name/module-name.nocache.js"></script>

Create the widgets HTML container elements

Create the HTML elements that will contain the widgets. This can be as simple as defining HTML <div> tags at required places. 

      <div id="my-player" />
      <div id="_progress" />

Define the onBSTPlayerReady() function

This function will be called when the Player and/or SeekBar objects are bound to the host page 

      <script type="text/javascript">
          var onBSTPlayerReady = function() {
          }
      </script>

Create the widgets and use as required

Create the Player object within the defined onBSTPlayerReady() function. Once the object is created, the widget can be attached to the page by calling the inject() method. The inject() method takes the id of the HTML element as a parameter. Following is an example: 

      <script type="text/javascript">
          var onBSTPlayerReady = function() {
              player = new bstplayer.Player("Auto", "some-cool-sound.mp3", false, "100%", "50px", null);
              player.inject('my-player');

              seekbar = new bstplayer.SeekBar(10, '_progress', null);
          }
      </script>
The Player object supports all the public methods defined in the AbstractMediaPlayer class, except all the addXXXHandler methods.

Instead of the addXXXHandler methods, the Player object defines an addEventListener(name, function) method with the following event names:

The SeekBar object supports the following methods: Also, an addEventListener(name, function) method is defined with the following event name: The example below illustrates a custom player implementation: 

         <script type="text/javascript">
             var player;
             var seekbar;
             var onBSTPlayerReady = function() {
                 seekbar = new bstplayer.SeekBar(10, '_progress', null);
                 seekbar.addEventListener("onSeekChanged", function(evt){
                     player.setPlayPosition(evt.seekPosition * player.getMediaDuration());
                 });

                 player = new bstplayer.Player("Auto", "nice.mp3", false, null, null, null);
                 player.addEventListener("onPlayState", function(evt){
                     switch(evt.playState) {
                         case 'Paused':
                             document.getElementById("playButton").disabled = false;
                             document.getElementById("pauseButton").disabled = true;
                             document.getElementById("stopButton").disabled = false;
                             break;
                         case 'Started':
                             document.getElementById("playButton").disabled = true;
                             document.getElementById("pauseButton").disabled = false;
                             document.getElementById("stopButton").disabled = false;
                             break;
                         case 'Stopped':
                         case 'Finished':
                             document.getElementById("playButton").disabled = false;
                             document.getElementById("pauseButton").disabled = true;
                             document.getElementById("stopButton").disabled = true;
                             break;
                     }
                 });
                 player.addEventListener("onPlayerState", function(evt){
                     if(evt.playerState == 'Ready') {
                         document.getElementById("playButton").disabled = false;
                         document.getElementById("pauseButton").disabled = true;
                         document.getElementById("stopButton").disabled = true;

                         playTimer = window.setInterval(function(){
                             seekbar.setPlayingProgress(player.getPlayPosition() / player.getMediaDuration());
                         }, 1000);
                     }
                 });
                 player.addEventListener("onLoadingProgress", function(evt){
                     seekbar.setLoadingProgress(evt.progress);
                 });
                 player.inject('_pid');
             }
         </script>

         <div style="width:350px">
             <div id="_pid"></div>
             <div>
                 <button id="playButton" onclick="player.playMedia()" disabled >Play</button>
                 <button id="pauseButton" onclick="player.pauseMedia()" disabled >Pause</button>
                 <button id="stopButton" onclick="player.stopMedia()" disabled >Stop</button>
             </div>
             <div id="_progress"></div>
         </div>

Overview   Package  Class  Use  Tree  Deprecated  Index  Help 
 PREV PACKAGE   NEXT PACKAGE FRAMES    NO FRAMES    
Copyright © 2009-2011. All Rights Reserved.