Select to view content in your preferred language

Custom Widget Video Tutorial?

3430
6
10-16-2014 12:25 PM
BrianO_keefe
Regular Contributor II

I am wondering if anyone has (or would make) a video tutorial that shows how to create a 'Hello World' widget for WAB (B3).

I have tried to wrap my head around Dojo but can't find any tutorials that walk through their library simply or step-by-step. A video tutorial that covered a simple Hello World Widget tutorial would be perfect... anyone?

6 Replies
MichaelJenkins
Occasional Contributor III
BrianO_keefe
Regular Contributor II

Watching it right now. Thx!

0 Kudos
MichaelJenkins
Occasional Contributor III

Great!  It helped me gain some basic understanding of the process and it is essentially a "Hello World" example.

GISP
0 Kudos
BrianO_keefe
Regular Contributor II

Objects.

That video sent me on a spiraling google-express to depression until... Introduction to AMD Modules - The Dojo Toolkit

What is a module?

A module is a value that can be accessed by a single reference. If you have multiple pieces of data or functions that you want to expose in a module, they have to be properties on a single object that represents the module. Practically speaking, it's overkill to create a module for a simple value likevar tinyModule = 'simple value';, but it would be valid. Modules start to make a lot more sense for modularizing your code - splitting it up into logical subsets for handling specific functionality. If you want to represent a person with information like name and address, perhaps even add some methods to your person, it starts to make sense to put all that code in a single location. A module is stored in your file system in a single file.

I'm sure the developers working hard on custom widgets are chuckling at me, but this has eluded me from every tutorial I have watched and read on Dojo. Nobody has clarified this until something clicked just now.

Basically...

define({

    library: 'dojo',

    version: 1.10

});

The module becomes nothing more than a JS Object with two attributes in this instance. And...

define(function(){

    var privateValue = 0;

    return {

        increment: function(){

            privateValue++;

        },

        decrement: function(){

            privateValue--;

        },

        getValue: function(){

            return privateValue;

        }

    };

});

The module becomes a JS Object with three methods (increment, decrement, getValue) that all manipulate a variable / attribute that is untouchable any other way.

Everything clicked. Now... to the batmobile!

RickeyFight
MVP Regular Contributor

Here is an updated video for WAB 1.1: Customizing and Extending

TimWitt2
MVP Alum

Brian,

I had issues creating a custom widget for the WAB until I started looking at already existing widgets and deconstructed them. Sadly the WAB helpfile on custom widgets is very thin and without deeper javascript knowledge hard to understand.

I know this doesn't help you in understanding it more, but I just wanted to let you know that you are not alone!

Tim