My first Widget

This Q&A forum allows users to post and respond to "How Do I Do ....." questions. Please do not use to report (suspected) errors - you must use your regional help desk for this. The information contained in this forum has not been validated by LANSA and, as such, LANSA cannot guarantee the accuracy of the information.
Post Reply
soa
Posts: 287
Joined: Mon Dec 07, 2015 3:15 pm

My first Widget

Post by soa » Wed Apr 05, 2017 11:41 am

I'm trying to create a widget to wrap a javascript tool call wavesurfer (it plays audio files and displays a waveform - very cool).

https://wavesurfer-js.org/

I have the cdn referenced in my Resources

I'm getting an error:

Fatal Error:

Uncaught TypeError: Cannot read property 'on' of undefined
Reported By:

nesawvsrf.js, line 120

Is there an obvious error in my implementation?

The widget code is

//----------------------------------------------------------
// PROVIDE A SINGLE JAVASCRIPT FUNCTION TO DEFINE THE WIDGET
//----------------------------------------------------------

function( PROTOTYPE, WIDGET )
{

var Wavesurfer;
//--------------------------------------------------------
// WIDGET-INTERFACE FUNCTIONS (CALLED FROM THE VL-RUNTIME)
//--------------------------------------------------------

//
// 'onCreateInstance' - gets called when LANSA creates an instance of the widget.
//
PROTOTYPE.onCreateInstance = function()
{


}

//
// 'onRealizeControl' - gets called when LANSA creates a visual representation of the widget.
//
// Parameters:
//
// - parentDiv : the div that's been created as a container for this control.
//
PROTOTYPE.onRealizeControl = function( parentDiv )
{
construct(parentDiv);
}

//
// 'onSizeChanged - gets called when the widget changes size.
//
PROTOTYPE.onSizeChanged = function()
{
// The widget might need to redraw itself.
}
function construct(parentContainer)
{
var waveform = document.createElement("div");
waveform.id ="waveform";
parentContainer.appendChild(waveform);

Wavesurfer= WaveSurfer.create({
container: '#waveform',
waveColor: 'violet',
progressColor: 'purple'
});
}

//-------------------------------
// WIDGET-PROPERTY IMPLEMENTATION
//-------------------------------

//
// FilePath - Location of file to play
//
// Type: String
//


PROTOTYPE.setFilePath = function( strValue )
{
Wavesurfer.load(strValue);
}

//-----------------------------
// WIDGET-METHOD IMPLEMENTATION
//-----------------------------

//
// Play - Play file
//
PROTOTYPE.Play = function()
{

Wavesurfer.play;

// Implementation...
}

Wavesurfer.on('ready', function () {
Wavesurfer.play();
});

// Done
return WIDGET.Completed;
}

And the test page is

Begin_Com Role(*EXTENDS #PRIM_WEB)
Define_Com Class(#NESAWaveSurfer) Name(#WaveSurfer) Displayposition(1) Height(100) Left(103) Parent(#COM_OWNER) Tabposition(1) Tabstop(False) Top(96) Width(100)

Evtroutine Handling(#Com_owner.Initialize)


Endroutine

Evtroutine Handling(#WaveSurfer.ready)

#WaveSurfer.FilePath := 'https://bosho.boardofstudies.nsw.edu.au ... 2NS1qe.MP3'
* #WaveSurfer.Play

Endroutine

End_Com

dannyoorburg
Posts: 152
Joined: Mon Jan 04, 2016 9:50 am
Location: Australia

Re: My first Widget

Post by dannyoorburg » Wed Apr 05, 2017 1:39 pm

Hi,

the

Wavesurfer.on('ready', function () {
Wavesurfer.play();
});

is defined in the main flow, it'll execute when Wavesurfer is still an undefined variable.

You probably want to move that into your construct function.

Cheers,
Danny

BrendanB
Posts: 25
Joined: Tue Nov 24, 2015 10:29 am

Re: My first Widget

Post by BrendanB » Wed Apr 05, 2017 1:45 pm

QuickExport20170405134140.zip
(16.29 KiB) Downloaded 154 times
Jim,

attached is modified version of your widget/webpage.

obviously, i am loading the file locally (the mp3 file). so you will need to change the webpage for that...

Brendan.

Post Reply