own widget with backbase elements within constructor

23 July, 2008 - 19:32 — kati

Hi,

I have a custom widget that looks like:

<?xml version="1.0" encoding="UTF-8"?><d:tdl xmlns="http://www.w3.org/1999/xhtml" xmlns:b="http://www.backbase.com/2006/btl"  xmlns:d="http://www.backbase.com/2006/tdl" xmlns:exp="http://www.backbase.com/2007/examples">

        <d:namespace name="http://www.backbase.com/2006/btl">

                <d:uses element="positionElement dimensionElement containerElement" src="../../visualElement/visualElement.xml"/>               

                <d:resource type="text/javascript">

                        <![CDATA[

                                function __wggThrow( message ) { 

                                        var str = "";

                                        //-- handling of error object

                                        if( WGGDataTypeUtils.isObject( 'object' ) ) {

                                                str = message.message;

                                        } else {

                                        //-- handling of string

                                                str = message;

                                        }

                                        var trace = "";

                                        try {

                                                if( message.fileName )

                                                        trace += message.fileName;

                                                if( message.lineNumber )

                                                        trace += ", row " + message.lineNumber;

                                                if( trace.length > 0 )

                                                        trace = " (" + trace + ")";

                                        } catch(e) {

                                        }

                                        throw "{b:markerContextMenu} " + message + trace;

                                }

                        ]]>             

                </d:resource>

                <d:element name="markerContextMenu" extends="b:positionElement b:dimensionElement b:containerElement" abstract="false">                                         

                        <d:attribute name="id"/>                        

                        <d:attribute name="style"/>

                        <d:attribute name="width" default="200px" />                    

                        <d:attribute name="height" default="200px" />

                        <d:constructor type="text/javascript">

                                <![CDATA[

                                        var labels = new Array();

                                        labels[0] = "A";

                                        labels[1] = "B";

                                        var box = bb.document.createElementNS( btl.namespaceURI, "box" );

                                        /*

                                        for( var aName in copiedAttributes ) {

                                                if( !copiedAttributes[aName] ) continue;

                                                if( copiedAttributes[aName] == "" ) continue;                                                                                           

                                                box.setAttribute( aName, copiedAttributes[aName] );

                                        }

                                        */

                                        var contextMenu = bb.document.createElementNS( btl.namespaceURI, "b:contextMenu" );

                                        var menuPopUp = bb.document.createElementNS( btl.namespaceURI, "b:menuPopUp" );

                                        //-- zoomTo

                                        var menuPopUpItem0 = bb.document.createElementNS( btl.namespaceURI, "b:menuPopUpItem" );

                                        menuPopUpItem0.setAttribute( "label", labels[0] );

                                        //menuPopUpItem0.setAttribute( "icon", this.getProperty("icon")[0] );

                                        menuPopUpItem0.addEventListener( "click", 

                                                                         this.zoomTo, true );

                                        //-- was anderes

                                        var menuPopUpItem1 = bb.document.createElementNS( btl.namespaceURI, "b:menuPopUpItem" );

                                        menuPopUpItem1.setAttribute( "label", labels[1] );

                                        //menuPopUpItem1.setAttribute( "icon", this.getProperty("icon")[1] );

                                        menuPopUp.appendChild( menuPopUpItem0 );

                                        menuPopUp.appendChild( menuPopUpItem1 );

                                        contextMenu.appendChild( menuPopUp );

                                        box.appendChild( contextMenu );

                                        this.appendChild( box );                        

                                ]]>                             

                        </d:constructor>                        

                        <d:template xmlns="http://www.w3.org/1999/xhtml" type="application/xhtml+xml">

                                <div>

                                </div>

                        </d:template>   

                </d:element>

        </d:namespace>

</d:tdl>

The definition within the html page:

        <b:markerContextMenu id="myContextMenu">

        </b:markerContextMenu>

The output is:

<div id="myContextMenu" xmlns="http://www.w3.org/1999/xhtml" style="width: 200px; height: 200px;"/>

What's wrong with the constructor why the box doesn't appear within the div (template)?

thanks in advance
kati

I've seen this...

23 July, 2008 - 23:53 — nbever

Hi Kati,

I think I've seen this one before and I believe it is because you don't have a viewGate for your widget. I think if you add a "" tag inside of your template section it'll start working.

The problem is (of course) that you don't want someone using your widget and adding content to it - but I have no idea how to establish a viewGate without that tag. Hopefully someone from BB can explain that concept and how to work with it a little clearer if that does turn out to be the issue.

-Nate

Solution

24 July, 2008 - 09:41 — kati

Hi Nate,

thx for your answer.

It's sufficient to add a node to the template so that it looks like follows

                        <d:template xmlns="http://www.w3.org/1999/xhtml" type="application/xhtml+xml">  

                                <div><d:content/></div>

                        </d:template>  

kati

I think nothing is wrong

24 July, 2008 - 22:38 — Rus

I think nothing is wrong with the constructor. To make sure just move out all the code from the constructor, wrap it out like this:

<d:handler event="DOMNodeInsertedIntoDocument" type="text/javascript"><![CDATA[

   // Your former constructor's body is gonna be here now

]]></d:handler>

and see what happens.

By the way, "...how to establish a viewGate without that tag", just use something like:

this.viewGate = this.viewNode.getElementsById('viewgate');