dynapi-widgetdev — List related to DynAPI Widget development

[Dynapi-Widgetdev] Adding action lisenter to elements created by setHTML

[ngy <ng...@tp...>]

Hi everyone,
I am still stuck on the same problem which has to do with adding an 
actionListener to an input button within a form
I mean,
I have a DynLayer with some HTML form set to it and also an actionListener
I want to know how I can refer to the object inside the HTML
for eg. myLayer.setHTML('<form>'+
'<tr><td><input TYPE="BUTTON" OnClick="RUN THE FUNCTION addItems() that 
is a prototype of the Widget"></td></tr>'+
</form>')

myWidget.listener = new EventListener()
MyWidget.listener.onclick= function(e){
if (e.getTarget()==THIS IS WHERE I WANT TO CHECK WHETHER THAT PARTICULAR 
BUTTON WAS CLICKED){
//do something
}

}
thanks in advance

Nikhil

[Dynapi-Widgetdev] Newbie trying really hard (help)

[ngy <ng...@tp...>]

HI FOLKS,
I have created a layer in a file called selectlist.js and have the 
following code there

this.setHTML('<form NAME="main" ACTION="somewhere.asp" METHOD="GET">'+
    '<input TYPE="HIDDEN" NAME="Avail">'+
    '<input TYPE="HIDDEN" NAME="Sel">'+
    '<table width ="100%" height="100%" BORDER=1 CELLPADDING=0 
CELLSPACING=0>'+
        '<tr>'+
            '<td VALIGN="TOP" STYLE="width: 50px;"       
WIDTH=50>Available Items:<br>'+
                '<select MULTIPLE NAME="AvailItems" size=7>'+
                    '<option VALUE="1">Item 1 should not exceed the 
width</option>'+
                    '<option VALUE="2">Item 2</option>'+
                '</select>'+
            '</td>'+
            '<td ALIGN="CENTER">&nbsp;<input TYPE="BUTTON" NAME="AddBtn" 
VALUE=">>" OnClick="parent.addItems(this.form.AvailItems, 
this.form.SelItems); parent.removeItems(this.form.AvailItems);">&nbsp;<br>'+
                '<br>&nbsp;<input TYPE="BUTTON" NAME="RemoveBtn" 
VALUE="&nbsp;&nbsp;&nbsp;&nbsp;<<&nbsp;&nbsp;&nbsp;&nbsp;" 
OnClick="parent.addItems(this.form.SelItems, this.form.AvailItems); 
removeItems(this.form.SelItems);">&nbsp;<br>'+'</td>'+'<td 
VALIGN="TOP">Selected Items:<br>'+
                '<select MULTIPLE NAME="SelItems" SIZE="5">'+
                   
                '</select>'+
            '</td>'+
        '</tr>'+
    '</table>'+
    '</form>',false);


now, where the button is initialized, I have on click methods that are 
prototype to the Selectlist.
these are as follows

SelectList.prototype.addItems = function(fromCtrl, toCtrl) {
    var i;
    var j;
    var itemexists;
    var nextitem;

    // step through all items in fromCtrl
    for (i = 0; i < fromCtrl.options.length; i++) {
        if (fromCtrl.options[i].selected) {
            // search toCtrl to see if duplicate
            j = 0;
            itemexists = false;
            while ((j < toCtrl.options.length) && (!(itemexists))) {
                if (toCtrl.options[j].value == fromCtrl.options[i].value) {
                    itemexists = true;
                    alert(fromCtrl.options[i].value + " found!");
                }
                j++;
            }
            if (!(itemexists)) {
                // add the item
                nextitem = toCtrl.options.length;
                toCtrl.options[nextitem] = new 
Option(fromCtrl.options[i].text);
                toCtrl.options[nextitem].value = fromCtrl.options[i].value;
            }
        }
    }
}

SelectList.prototype.removeItems = function(fromCtrl) {
    var i = 0;
    var j;
    var k = 0;

    while (i < (fromCtrl.options.length - k)) {
        if (fromCtrl.options[i].selected) {
            // remove the item
            for (j = i; j < (fromCtrl.options.length - 1); j++) {
                fromCtrl.options[j].text = fromCtrl.options[j+1].text;
                fromCtrl.options[j].value = fromCtrl.options[j+1].value;
                fromCtrl.options[j].selected = 
fromCtrl.options[j+1].selected;
            }
            k++;
        } else {
            i++;
        }
    }
    for (i = 0; i < k; i++) {
        fromCtrl.options[fromCtrl.options.length - 1] = null;
    }
}P
My Problem is that when I change the OnClick function of the buttons

OnClick="parent.addItems(this.form.SelItems, this.form.AvailItems); 
removeItems(this.form.SelItems); to
OnClick="top.listpanel.addItems(this.form.SelItems, 
this.form.AvailItems); removeItems(this.form.SelItems);

where in the HTML document the widget has been initalized like

listpanel = new SelectList(myParameters, myParameters, myParameters, 
myParameters, myParameters, );
it seems to be working

How do I refer to the methods of the Layer without having to use the 
name "listpanel" in this case in order to refer to it.


how can I refer to these methods within the HTML

any help would be appreciated

[Dynapi-Widgetdev] Select List Question

[ngy <ng...@tp...>]

   Hi everyone,
I am trying to make a select list where which is made up of 2 lists and 
2 buttons, in which highlighting the option and clicking the Add/remove 
button adds /removes it to/from the selection list. I tried looking for 
some widgets but could not find any.


I even tried to make the widget by creating a dynLayer and setting its 
HTML to the <selection tag and stuff like that.

The methods for adding and removing the elements are where I am stuck - 
the metods addTems() removeItems() and so on that I am using are 
prototype methods that I want to refer to with the onClick() method of 
the buttons, but I could only do that by saying something like 
top.listpanel.addItems(MyParameter1, MyParameter2),.  Mind you this is 
in the selectlist.js file.

this means that I have to initalize my selectlist with the standard name 
listpanel or something like that. I would like to make a reference to 
the method of the selectlist.js from within the setHTML layer of the 
tag. I dont know what is it that I am doing wrong.

would really appreciate any help, and even better ... does anyone have 
an already created selection List like the one that I was talking about 
and would like sharing it with me??

Thanks in advance

Nikhil

[Dynapi-Widgetdev] Viewport HELP

[ngy <ng...@tp...>]

Hi forum,
I am a newbee with javascript and therefore pretty much new with the 
dynapi. However I have tried to figure it out over the past week and 
have succeeded in making some changes to the dynapi Viewport in order to 
fulfill my need.
What I am trying to use dynapi for, is something like an image 
navigator; i.e , I wanna give an image as a param and the widget that is 
created is a viewport with a small thumbnail of the same on the lower 
left hand corner that one can use to scroll through an image that doesnt 
fit into the viewport.

code for the imagenavigator.js is as follows :

/*
   DynAPI Distribution
   ViewPort Class

   The DynAPI Distribution is distributed under the terms of the GNU 
LGPL license.

   Requirements:
    dynapi.api.*
    dynapi.util [thread, pathanim]
    dynapi.gui [label]
*/

// note: we need an onremove event

function ImageNavigator(content,offsetX, offsetY, width, height) {

    this.DynLayer = DynLayer;
    this.DynLayer();
    this.moveTo(offsetX, offsetY);
    this.setSize(width, height);

    this.contentPane = new DynLayer();
    this.addChild(this.contentPane);

    this.bufferW = 0;
    this.bufferH = 0;
   

    this.mainImage = DynImage.getImage(content);
    this.max = new DynImage(this.mainImage);
    this.max.moveTo(0,0);
    this.max.setSize(width*2,height*2);

    this.navigator = new DynLayer(null, 0,height*0.75,width*0.25, 
height*0.25,"#000000", true);
    this.addChild(this.navigator);

    this.min = new DynImage(this.mainImage);
    this.min.setSize(width*0.25, height*0.25);
    this.navigator.addChild(this.min);

    this.highlighter = new DynLayer(null, 
0,0,this.navigator.getWidth()*0.5, this.navigator.getHeight()*0.5,"red", 
true)
    this.navigator.addChild(this.highlighter);
    DragEvent.enableDragEvents(this.highlighter);
    DragEvent.setDragBoundary(this.highlighter);
   
    var highlightEvent = new EventListener(this.highlighter);
   
    highlightEvent.ondragstart = function(e){
        target=e.getTarget()
            this.jumpTo(-target.getX()*8, -target.getY()*8)
    };
        this.highlighter.addEventListener(highlightEvent);
   
    var scrollEvent = new EventListener(this);
    scrollEvent.onpathrun = function(e) {
                                e.getTarget().invokeEvent('scroll');
                            };
    this.contentPane.addEventListener(scrollEvent);

    var viewportListener = new EventListener(this);
    viewportListener.onresize = function(e) {
                                    var o = e.getTarget();
                                    if (!o.created || !o.content) return;

                                    o.findDimensions();

                                    if (!o.enableHScroll) 
o.contentPane.setX(0);
                                else if 
(o.contentPane.x<-o.availableScrollX) 
{o.contentPane.setX(-o.availableScrollX);}

                                    if (!o.enableVScroll) 
o.contentPane.setY(0);
                                else if 
(o.contentPane.y<-o.availableScrollY) 
{o.contentPane.setY(-o.availableScrollY);}

                                    o.invokeEvent("scroll");
                                };
    viewportListener.oncreate = function(e) {
                                    var o = e.getTarget();
                                    if(is.def && o.css) 
o.css.overflow='hidden'
                                     o.reset(false);
                                };
    this.addEventListener(viewportListener);

    this.contentResizeListener = new EventListener(this);
    this.contentResizeListener.onresize = function(e) {
                                              var o = e.getTarget();
                                              o.findDimensions();
                                              
o.invokeEvent("contentchange");
                                          };
    this.contentResizeListener.onload = function(e) {  // for loadpanel
                                            var o = e.getTarget();
                                            if (o.created && o.content) {
                                                o.reset();
                                            }
                                        };
 
   

    this.setContent(this.max);

}
ImageNavigator.prototype = new DynLayer();
ImageNavigator.prototype.reset = function(b) {
                                     this.contentPane.moveTo(0,0);
                                     this.findDimensions();
                                     if (b!=false) 
this.invokeEvent("contentchange");
                                 };
ImageNavigator.prototype.setContent = function(content) {
                                          if (this.content && 
this.contentPane.children.length>0) {
                                              if 
(this.content==this.max) return;
                                              this.max.removeFromParent();
                                              
this.max.removeEventListener(this.contentResizeListener);
                                          }
                                          if (!content) this.content = 
new DynLayer();
                                          else this.content = this.max;

                                          this.content.moveTo(0,0);
                                          this.contentPane.moveTo(0,0);

                                          
this.contentPane.addChild(this.content);
                                          
this.content.addEventListener(this.contentResizeListener);

                                          this.findDimensions();

                                          this.invokeEvent("contentchange");
                                      };
ImageNavigator.prototype.findDimensions = function() {
                    if (!this.content) return;
                    
this.contentPane.setSize(this.content.getWidth(),this.content.getHeight());

                    this.availableScrollX = 
this.content.getWidth()-this.getWidth()+this.bufferW;
                    this.availableScrollY = 
this.content.getHeight()-this.getHeight()+this.bufferH;
                    this.enableHScroll = this.availableScrollX>0;
                    this.enableVScroll = this.availableScrollY>0;
                };
       
ImageNavigator.prototype.jumpTo = function(x,y) {
                                      this.content.moveTo(x,y);
                                      this.invokeEvent("scroll");
                                  };
                 
ImageNavigator.prototype.setRatio = function(rx,ry) {
                                        this.setRatioX(rx);
                                        this.setRatioY(ry);
                                    };

ImageNavigator.prototype.setRatioX = function(rx) {
                                         if (rx!=null) 
this.contentPane.setX(-this.availableScrollX*rx);
                                     };

ImageNavigator.prototype.setRatioY = function(ry) {
                                         if (ry!=null) 
this.contentPane.setY(-this.availableScrollY*ry);
                                     };
ImageNavigator.prototype.getRatioX = function() {
                                         if (!this.content || 
!this.enableHScroll) return 0;
                                         else if (this.contentPane.x==0) 
return 0;
                                         else if 
(this.contentPane.x==-this.availableScrollX) return 1;
                                         else return 
1-(this.availableScrollX+this.contentPane.x)/this.availableScrollX;
                                     };
ImageNavigator.prototype.getRatioY = function() {
                                         if (!this.content || 
!this.enableVScroll) return 0;
                                         else if (this.contentPane.y==0) 
return 0;
                                         else if 
(this.contentPane.y==-this.availableScrollY) return 1;
                                         else return 
1-(this.availableScrollY+this.contentPane.y)/this.availableScrollY;
                                     };

ImageNavigator.prototype.scrollUp = function() {this.scrollSlide(null,0);};

ImageNavigator.prototype.scrollDown = function() 
{this.scrollSlide(null,-this.availableScrollY);};

ImageNavigator.prototype.scrollLeft = function() 
{this.scrollSlide(0,null);};

ImageNavigator.prototype.scrollRight = function() 
{this.scrollSlide(-this.availableScrollX,null);};


ImageNavigator.prototype.scrollSlide = function(x,y) {
                                           if (x!=null && 
this.enableHScroll) {
                                               
this.invokeEvent("scrollstart");
                                               
this.contentPane.slideTo(x,this.contentPane.y);
                                           }
                                           else if (y!=null && 
this.enableVScroll) {
                                               
this.invokeEvent("scrollstart");
                                               
this.contentPane.slideTo(this.contentPane.x,y);
                                           }
                                       };
ImageNavigator.prototype.cancelScroll = function() {
                                            this.contentPane.stopSlide();
                                            this.invokeEvent("scrollend");
                                        };
 


THE PROBLEM that I am facing is in the highlightEventListener that says 
"Error: this.jumpTo is not a function
Source File: htmlcode/dynapi/src/lib/dynapi/gui/imagenavigator.js
Line: 50"

However, when I comment that line out and implement the listener in the 
HTML, it is working alright. here is the code for the HTML of the same:

<html>
<head>
<title>DynAPI Image Viewer - ViewPort</title>
<script type= "text/javascript" language="JavaScript" 
src="../src/dynapi.js"></script>
<script language="Javascript">
DynAPI.setLibraryPath('../src/lib/')
DynAPI.include('dynapi.api.*')
DynAPI.include('dynapi.event.*')
DynAPI.include('dynapi.util.thread.js')
DynAPI.include('dynapi.util.pathanim.js')
DynAPI.include('dynapi.gui.viewport.js')
DynAPI.include('dynapi.gui.label.js')
DynAPI.include('dynapi.gui.dynimage.js')
DynAPI.include('dynapi.gui.imagenavigator.js')
DynAPI.include('dynapi.ext.*')
</script>
<script language="Javascript">

DynAPI.onLoad = function() {
    iviewer = new ImageNavigator("machinery.jpg", 400, 200, 800, 600)
   
    /*var myListener=new EventListener(iviewer.highlighter)
        myListener.ondragstart=function(e){
            target=e.getTarget()
            iviewer.jumpTo(-target.getX()*8, -target.getY()*8)
           
        }
        myListener.ondragend=function(e){
            target=e.getTarget()
            iviewer.jumpTo(-target.getX()*8, -target.getY()*8)
        }*/
    iviewer.highlighter.addEventListener(myListener)
    DynAPI.document.addChild(iviewer)
   
}

</script>
</head>
<body bgcolor="#ffffff">

</body>
</html>



I know that I do not have enough experience to but I tired. I could 
really do with some help. Also, some good website with some tutorials on 
JAVASCRIPT / DYNAPI would be of help

thanks in advance

Nikhil

[Dynapi-Widgetdev] simple menu

[Paco V. <Pac...@te...>]

Hi!

I'm looking for a good solution to implement a generic menu in
cross-browser DHTML. Is DynApi what I need? or maybe there are simplest
solutions available... Do you know if there is a menu widget available
somewhere?

Thanks in advance and best regards.

/paco vela

Re: [Dynapi-Widgetdev] doubt on DynAPI original

[<hv...@ya...>]

you seem to be running an outdated dynapi
distribution, please upgrade

Henrik Våglin [ hv...@ya... ]


 --- RAJU CHANDRAN <ra...@ya...> skrev: > 
> I couldn't test DynAPI -19991024 tabs1.html and
> tabs2.html in IE
> 
> I am using IE5.0 
> 
> Is there a browser compatibility issue for this API
> version?
> 
> I would like to incorporate the tab widgets into my
> project
> 
> Thanks
> 
> Raju
> 
>  
> 
> 
> 
> ---------------------------------
> Do You Yahoo!?
> New! SBC Yahoo! Dial - 1st Month Free & unlimited
access 

=====
// Henrik Vaglin

**************************************************
Visit my comics artpage at 
http://photos.yahoo.com/bc/hvaglin?d&.flabel=fld5&.src=bc
**************************************************

_____________________________________________________
Följ VM på nära håll på Yahoo!s officielle VM-sajt www.yahoo.se/vm2002
Håll dig ajour med nyheter och resultat, med vinnare och förlorare...

[Dynapi-Widgetdev] doubt on DynAPI original

[RAJU C. <ra...@ya...>]

I couldn't test DynAPI -19991024 tabs1.html and tabs2.html in IE

I am using IE5.0 

Is there a browser compatibility issue for this API version?

I would like to incorporate the tab widgets into my project

Thanks

Raju

 



---------------------------------
Do You Yahoo!?
New! SBC Yahoo! Dial - 1st Month Free & unlimited access

[Dynapi-Widgetdev] Techiques

[<sab...@ma...>]

Hi all you widget-developers hiding out there...

In my work with widgets, I=B4ve developed some simple, yet powerful =
techniques I=B4d like to share.
The result is highly customizeable widgets without comprimizing the =
simplicity of use.
As a bi-product you even get faster development, easier mainteinance and =
better documentation. (!)
It is my hope they will be adopted you, the widget developer!

The strategy builds on combining two tricks:
1) Grouping the constants into a static object
2) Grouping the parameters


Grouping the constants.
By grouping the constants into an object, you make it easy to identify =
them.
By making the object a property of the widget, you enable the =
"constants" to be overridden.
Example:

MyWidget.defaults =3D {
 x: 0,
 y: 0,
 z: 0,
 w: 300,
 h: 200,
 marginLeft: 7,
 marginRight: 0,
 marginTop: 3,
 marginBottom: 0,
 borderColor: 'silver',
 canvasColor: 'black'
}

I=B4ve choosen to call the contants "defaults", to indicate they are =
customizable.
If a user wants to permantly change the behavior of a widget, he would =
do like this:

MyWidget.defaults.x =3D 100
MyWidget.defaults.marginLeft =3D 13

=20

Grouping the parameters
Using constants is very well, but changing them is only appropiate for =
permanent changes.
To allow for individual customization of the instances, you would have =
to accept the options as parameters.
This is traditionally done like this:

function =
MyWidget(x,y,z,w,h,marginLeft,marginRight,marginTop,marginBottom,borderCo=
lor,canvasColor) {
}

This approach however, has several problems.
For one, the users have to be magicians:

var mw =3D MyWidget(100,100,1,400,300,10,null,null,5,'red','white')

Looking at the function call, it is not clear which numbers mean what.

Secondly, you (usally) have to pass all the parameters. - Even if you =
only want to change a few.
This fact holds most programmers back from making highly customizable =
widgets.
Even 20 parameters seems overwhelming.
Highly customizable widgets with, say 60 parameters... - Looks like a =
joke.

Thirdly, when you come up with new parameters, you have to place them =
last - in the interest of combatibility, even though the logical place =
might be next to similar parameters.

The solution is to group the parameters into an object:

function MyWidget(options) {
}

The client would now write:

var mw =3D =
MyWidget({x:100,y:100,z:1,w:400,h:300,marginLeft:10,marginBottom:5})

Note that looking at the function call itselves is much more =
informative.
You dont have to worry about getting the order right, and you dont have =
to pass all available parameters.


Combining the tricks
By combining the tricks, you get the powers of both with no more effort.
The true treasure, however is achieved by restricting the options to the =
constants defined.
The default-definition then also documents the options available.
Or, in the new light, you=B4d say we now have a set of options which can =
be manipulated in two ways:

Permanent changes: (should be performed before making instances)
MyWidget.defaults.x =3D 100

Customized instances:=20
mw =3D new MyWidget({x:100})


Implementation
(example is written to DynApi 2.5.7)

function MyWidget(options) {
 this.DynLayer =3D DynLayer;
 this.DynLayer();
 var o =3D this.calcSettings(options)

 this.setBgColor(o.borderColor)
 this.setX(o.x)
 this.setY(o.y)
 this.setSize(o.w,o.h)
 this.setZIndex(o.z)

 this.mainlyr =3D new DynLayer()
 this.mainlyr.setBgColor(o.canvasColor)
 this.mainlyr.setX(o.marginLeft)
 this.mainlyr.setY(o.marginTop)
 this.mainlyr.setWidth(o.w-o.marginLeft-o.marginRight)
 this.mainlyr.setHeight(o.h-o.marginTop-o.marginBottom)
 this.addChild(this.mainlyr);

 this.o =3D o
}

MyWidget.prototype =3D new DynLayer()
var p =3D MyWidget.prototype

p.calcSettings =3D function(options) {
 var o =3D new Object()
 for (var i in MyWidget.defaults) {
  o[i]=3D((options[i]!=3Dnull)?options[i]:MyWidget.defaults[i])
 }
 return o
}

MyWidget.defaults =3D {
 x: 0,
 y: 0,
 z: 0,
 w: 300,
 h: 200,
 marginLeft: 7,
 marginRight: 2,
 marginTop: 3,
 marginBottom: 2,
 borderColor: 'silver',
 canvasColor: 'black'
}

=20
As you can see, there=B4s really nothing to it.
We have 2 objects:
1) The defaults, defined in the code
2) The options passed to the widget

calcSettings() merges the two objects and returns the resulting object.

You can see a working examples here:=20
DynApi 2.5.7: =
http://d.rosell.dk/cm2.10/edit/clientlib/api/dynapi-2.5.7/coma-examples/M=
yWidget.htm
DynApi 2.9: =
http://d.rosell.dk/cm2.10/edit/clientlib/api/dynapi-2.9/coma-examples/MyW=
idget.htm
=20

Implementation "deluxe"
Beeing in an object-orientated mood, you might feel like subgrouping.
In the above example, I=B4d personally prefer this declaration:

MyWidget.defaults =3D {
 x: 0,
 y: 0,
 z: 0,
 w: 300,
 h: 200,
 margins: {
  left: 7,
  right: 2,
  top: 3,
  bottom: 2
 },
 colors: {
  border: 'silver',
  canvas: 'black'
 }
}

In this case the above implementation fails its maners.
Passing "colors: {border:'yellow'}" would delete the canvas-property.
This forces the user to specify all subproperties, and raises a =
compatibility-issue:
If you decide to add a new color, the users will have to change their =
code too.

The solution is ofcourse only to overide the subproperties specified.
This piece of code does the trick:

p.copyObjectProperties =3D function(oFrom,oTo) {
 for (var i in oFrom) {
  switch(typeof oFrom[i]) {
   case 'object':
    if (!oTo[i]) oTo[i] =3D new Object()
    this.copyObjectProperties(oFrom[i],oTo[i])
    break;
   case 'array':
    if (!oTo[i]) oTo[i] =3D new Array()
    this.copyObjectProperties(oFrom[i],oTo[i])
    break;
   default:
    oTo[i]=3DoFrom[i]
  }
 }
}
p.calcSettings =3D function(options) {
 var o =3D new Object()
 this.copyObjectProperties(MyWidget.defaults,o)
 this.copyObjectProperties(options,o)
 return o
}

The code also works for sub-sub-sub-sub-sub properties...

You can see a working examples here:=20
DynApi 2.5.7: =
http://d.rosell.dk/cm2.10/edit/clientlib/api/dynapi-2.5.7/coma-examples/M=
yWidget2.htm
DynApi 2.9: =
http://d.rosell.dk/cm2.10/edit/clientlib/api/dynapi-2.9/coma-examples/MyW=
idget2.htm


Real world conciderations
Adobting these techiques could easily lead to total abondon of =
traditional constructor parameters, due to the ease of defining =
default-values.
I personally prefer having some of the parameters in the constructor the =
traditional way.
A label-widget, e.g:=20

function Label(label, options) {
}

Having "label" as its own parameter calls for more coding, but seems =
more natural in use.

If you have many standalone-properties, you might want to save some =
lines of coding, like this:

function PopUp(x,y,w,h,title,html,options) {
    var args =3D ['x','y','w','h','title','html']
    var o =3D this.calcSettings(options)
    for (var i in args) eval('if ('+args[i]+'!=3Dnull) =
o.'+args[i]+'=3D'+args[i])
..
}
PopUp.defaults =3D {
 x: 0,
 y: 0,
 z: 0,
 w: 300,
 h: 200,
..
}

This techinique also has the advantage of defining the =
default-definitions the same place as the options, separating constants =
and code.

A final word
I hope you followed me all the way, and feel like implementing the =
deluxe-model.
If not, just applying the first "trick" (grouping the constants) is =
enough to make our widget-world a better place to live in.

I thought that maybe the "copyObjectProperties(oFrom,oTo)" could make it =
into the dynapi-core?
I find it strange that JavaScript lacks a method for hardcopying =
objects, and the function occasional handy.

Bye for now, and happy widget-writing!


Bj=F8rn Rosell

[Dynapi-Widgetdev] Select List

[Bhagia, M. <mah...@ge...>]

Hi All,

Does anyone know /have select list issue 

accessing select list element in a layer2 which is in layer1 

For eg: 

layer1.children[0].doc.form1.elementXXX

but when element is select list, this gives error 

Thanks
Mahesh

Re: [Dynapi-Widgetdev] Scroll Pane

[Doug M. <do...@cr...>]

I had a problem with form elements not repainting in NS..
I found that this occured most often when I was scrolling a layer containing
a form.
The solution is to hide then show the layer, this forces it to be redrawn by
NS.

//hide the layer
theLayer.setVisible(false);
//show the layer
setTimeout("theLayer.setVisible(true);",0)

So there will be a bit of a blink.. What I did was call these two line AFTER
you have stopped scrolling.. This was you aren't calling it 50 times a
second, which would make scrolling very slow. But when done scrolling you
see a freshly repainted form.



----- Original Message -----
From: "Bhagia, Mahesh" <mah...@ge...>
To: <dyn...@li...>
Sent: Wednesday, May 08, 2002 7:32 AM
Subject: [Dynapi-Widgetdev] Scroll Pane


> Hi,
>
> Does anyone know / have a working example using HTML form in scrollpane,
>
> currently I have radio buttons, select list in a form, when I scroll,
> (select list ) it doesn't redraw in NS4,
>
> Regards
> Mahesh Bhagia
>
>
>
> _______________________________________________________________
>
> Have big pipes? SourceForge.net is looking for download mirrors. We supply
> the hardware. You get the recognition. Email Us: ban...@so...
> _______________________________________________
> Dynapi-Widgetdev mailing list
> Dyn...@li...
> https://lists.sourceforge.net/lists/listinfo/dynapi-widgetdev
>

[Dynapi-Widgetdev] Scroll Pane

[Bhagia, M. <mah...@ge...>]

Hi,

Does anyone know / have a working example using HTML form in scrollpane, 

currently I have radio buttons, select list in a form, when I scroll,
(select list ) it doesn't redraw in NS4, 
 
Regards
Mahesh Bhagia	

[Dynapi-Widgetdev] Re: IE6 & Ri Fast Tree

[<ar...@ar...>]

Managed to solve this one by putting a blank gif in the events layer defined in fastreenode.js

Cheers :o) 
Ben 

--------------------------------------------------------------------
mail2web - Check your email from the web at
http://mail2web.com/ .

[Dynapi-Widgetdev] IE6 & Ri Fast Tree

[Ben E. <ben...@ar...>]

Hi all, I'm having a bit of a problem in IE6 with Richard's Ri Fast Tree
widget.

See
http://test.choicescafe.co.uk/frontend/shop_home.asp?Shop_ID=8&shop_name=The
%20Pyramid&subcat1_id=none&subcat2_id=none

The tree is on the left - works fine in IE5.5, but in IE6 (Win XP and 2000)
the placing of the div's seems to be out - ie. the onmouseover event
triggers when the cursor is not actually over the node.

Please can anybody shed some light on this for me? Any help appreciated.

Cheers, Ben

================================================================
= Array[x] =
= delivering design aware programming solutions =
= www.arrayx.co.uk = = ben...@ar... =
= +44 (0)7780 696840 = = 1 Flintham Drive, Sherwood, Notts. NG5 3DS UK =

STANDARD DISCLAIMER: This message is confidential. You should not copy it or
disclose its contents to anyone. You may use and apply the information only
for the
intended purpose. Internet communications are not secure and therefore
Array[x]
does not accept legal responsibility for the contents of this message. Any
views or
opinions presented are only those of the author and not those of Array[x].
If this
email has come to you in error please delete it and any attachments.
----------------------------------------------------------------------------



---
Outgoing mail is certified Virus Free.
Checked by AVG anti-virus system (http://www.grisoft.com).
Version: 6.0.303 / Virus Database: 164 - Release Date: 24/11/2001

RE: [Dynapi-Widgetdev] Enumerating the functions of a widget dynamically ?

[<ma...@ab...>]

if you include dynapi.util.console, there is a dump() method you=20
can use, ie DynAPI.console.dump(myWidget)

/martin

--------------------------------------
harald martin str=F6m
www.pluxemburg.com | www.burnfield.com


> -----Original Message-----
> From: dyn...@li...=20
> [mailto:dyn...@li...] On=20
> Behalf Of Tony
> Sent: den 18 januari 2002 05:52
> To: Widget Dev List
> Subject: [Dynapi-Widgetdev] Enumerating the functions of a=20
> widget dynamically ?
>=20
>=20
> Hello to Everyone !
>=20
> Would anyone know of a built in method for enumerating all=20
> the functions in
> a widget ?
> I've checked the mailing lists, the site, and the API and=20
> could not find
> anything on the subject, I'm about to roll my own method and=20
> thought it
> would be best to ask the experts first.
>=20
> Thanks!
> Tony
>=20
>=20
>=20
>=20
>=20
> _______________________________________________
> Dynapi-Widgetdev mailing list
> Dyn...@li...
> https://lists.sourceforge.net/lists/listinfo/dynapi-widgetdev
>=20

RE: [Dynapi-Widgetdev] Enumerating the functions of a widget dynamically ?

[Tony <to...@sl...>]

Geez, This almost always happens to me... Shortly after I post a message
looking for help
I manage to find the answer !!

	var i   = 0;
	var buf = "";

	for (i in DynAPI) { buf+=DynAPI[i]+"\n" };
	document.write( "<pre>"+buf+</pre>" );

-----Original Message-----
From: dyn...@li...
[mailto:dyn...@li...]On Behalf Of Tony
Sent: Thursday, January 17, 2002 10:52 PM
To: Widget Dev List
Subject: [Dynapi-Widgetdev] Enumerating the functions of a widget
dynamically ?


Hello to Everyone !

Would anyone know of a built in method for enumerating all the functions in
a widget ?
I've checked the mailing lists, the site, and the API and could not find
anything on the subject, I'm about to roll my own method and thought it
would be best to ask the experts first.

Thanks!
Tony





_______________________________________________
Dynapi-Widgetdev mailing list
Dyn...@li...
https://lists.sourceforge.net/lists/listinfo/dynapi-widgetdev

[Dynapi-Widgetdev] Enumerating the functions of a widget dynamically ?

[Tony <to...@sl...>]

Hello to Everyone !

Would anyone know of a built in method for enumerating all the functions in
a widget ?
I've checked the mailing lists, the site, and the API and could not find
anything on the subject, I'm about to roll my own method and thought it
would be best to ask the experts first.

Thanks!
Tony

[Dynapi-Widgetdev] history / site structure widget for DynAPI

[scythe <si...@si...>]

Hello everyone

I have developed a simple widget that emulates "pages", "links" 
and "history" of usual html documents for DynAPI sites that 
contain all the navigation and information in one actual html 
document

It gives:

1) huge usability boost

the site's "subpages" can be indexed in search engines, correctly 
linked from outside et cetera (for reasons why this is important 
see http://useit.com/alertbox/980614.html)

history buttons work with dynamic documents

2) easy template-based parent/child approach to creation of 
multilevel ("mainpage/level1page1/level2page1") layer-based 
content structure of any complexity in a single document

Example of the widget:
www.sie.com.ua/~construct

I am interested in everyone's opinion if this can be useful for 
someone. 

If it is, I will design the widget accordingly and add some extra 
functionality such as actual browser "back" and "forward" buttons 
compartibility, page title change and some other

This seemed handy to me while creating rather big corporate 
structured DynAPI site that uses a single page with object-
oriented information architecture

Please reply to my mailbox directly

regards, scythe (si...@si...)

[Dynapi-Widgetdev] Scrollbar (or scrollpane) doesn't display in ns6 / bug 423938

[<ait...@ya...>]

Hello,
If you try dynapi/examples/dynapi.gui.scrollbar.html
in netscape 6.2, you can see that scrollbars are not
displayed. I see the problem in the bug 423938
(14/05/2001). With a refresh, the problem still
appear. Do you have any suggestion or correction for
this problem ?
Thanks for your responses.
A.Aïtoulha


___________________________________________________________
Do You Yahoo!? -- Une adresse @yahoo.fr gratuite et en français !
Yahoo! Courrier : http://courrier.yahoo.fr

[Dynapi-Widgetdev] How do I make a dynlayer stay in view on scroll?

[<cal...@ho...>]

I wanna capture the scroll event and let a layer smoothly animate its =
way towards the same window position after having scrolled. You know =
like the watermark feature Geocities used to have... I know this is done =
in regular DHTML. But how do I do it as smooth as possible into a DynAPI =
function/widget (for my ccreation widgetpack)?

Henrik V=E5glin [ hv...@ya... ]

[Dynapi-Widgetdev] frame.lyrobj error with dynapi 2.56

[<ait...@ya...>]

Hello,
Try dynapi/examples/dynapi.gui.scrollpane.html in
dynapi.2.56. There is the error message "frame.lyrobj
is not a object", probably due to scrollobj = new
ScrollPane(<object>). Did there is a compatibility
problem ? what is the correction ?
Thanks.
A.Aïtoulha


___________________________________________________________
Do You Yahoo!? -- Une adresse @yahoo.fr gratuite et en français !
Yahoo! Courrier : http://courrier.yahoo.fr

Re: [Dynapi-Widgetdev] Bubbling up of events

[Richard B. <ma...@ri...>]

Hi, does this make a difference:

myListener.onmouseout=function(e) {
    target=e.getTarget()
    target.setBgColor('#c0c0c0')
    e.setBubble(true);
}

Probably not, as I think it defaults to true anyway, but you can try.
I wouldn't be surprised if the fault lay with list.js, as it has other
problems with it's eventlisteners, because it's using secondary inheritance,
which doesn't work well in Dynapi.
I guess the test would be to just put a single dynlayer on your taskbar
object, and see if bubbling was ok then.

Otherwise maybe put the code online somewhere, or attach it in a zip.

Cheers,
Richard
www.richardinfo.com

BTW, dynapi.widgetdev isn't used that much, probably more help would come
from dynapi.help


----- Original Message -----
From: "Steven Brownlee" <sbr...@mo...>
To: <Dyn...@li...>
Sent: Monday, October 29, 2001 2:59 PM
Subject: [Dynapi-Widgetdev] Bubbling up of events


> I coded my own widget that creates a simple layer that acts like a
> Windows taskbar on the left-hand side of the screen for navigational
> elements.  I then put a List object inside of it -
>
> navBar = new TaskBar(-130,0,150,300,-5,-126,10,'#c0c0c0')
> list = new List()
>
> myListener=new EventListener(list)
> myListener.onmouseover=function(e) {
> target=e.getTarget()
> target.setBgColor('#ffffff')
> }
> myListener.onmouseout=function(e) {
> target=e.getTarget()
> target.setBgColor('#c0c0c0')
> }
>
> list.moveTo(1,1)
> list.setWidth(148)
> list.setBgColor('#000000')
> list.boldOnSelect(true)
> list.listStyle.padding = 10
> list.add("The CoraSys Mission",1)
> list.add("CoraSys Products",2)
> list.add("CoraSys Services",3)
> list.add("Customer Service",4)
>
> list.addEventListener(myListener)
> navBar.addChild(list)
> DynAPI.document.addChild(navBar)
>
> Now in NS4 it works fine.  However, in IE and NS6, when I mouseOver the
> List or ListItems and then mouseOut, the mouseOut doesn't bubble up to
> my TaskBar object.  Any ideas on how to do this?  Would posting the code
> for the TaskBar object help?
>
> ==================================
> Steven R. Brownlee
> Lead Technologist
> Mind Over Media
>
> P: 412.391.1100 x220
> F: 412.391.0185
> E: ste...@mo...
> W: http://www.momknows.com/
> ==================================
>
> IF YOU BELIEVE that people automatically resist change,
> offer them a new car of their choosing, no strings attached.
>
> _______________________________________________
> Dynapi-Widgetdev mailing list
> Dyn...@li...
> https://lists.sourceforge.net/lists/listinfo/dynapi-widgetdev
>

[Dynapi-Widgetdev] Bubbling up of events

[Steven B. <sbr...@mo...>]

I coded my own widget that creates a simple layer that acts like a
Windows taskbar on the left-hand side of the screen for navigational
elements.  I then put a List object inside of it -=20

	navBar =3D new TaskBar(-130,0,150,300,-5,-126,10,'#c0c0c0')
	list =3D new List()
=09
	myListener=3Dnew EventListener(list)
	myListener.onmouseover=3Dfunction(e) {
		target=3De.getTarget()
		target.setBgColor('#ffffff')
	}
	myListener.onmouseout=3Dfunction(e) {
		target=3De.getTarget()
		target.setBgColor('#c0c0c0')
	}

	list.moveTo(1,1)
	list.setWidth(148)
	list.setBgColor('#000000')
	list.boldOnSelect(true)
	list.listStyle.padding =3D 10
	list.add("The CoraSys Mission",1)
	list.add("CoraSys Products",2)
	list.add("CoraSys Services",3)
	list.add("Customer Service",4)
=09
	list.addEventListener(myListener)
	navBar.addChild(list)
	DynAPI.document.addChild(navBar)

Now in NS4 it works fine.  However, in IE and NS6, when I mouseOver the
List or ListItems and then mouseOut, the mouseOut doesn't bubble up to
my TaskBar object.  Any ideas on how to do this?  Would posting the code
for the TaskBar object help?

=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=
=3D=3D=3D=3D=3D=3D=3D=3D=3D
Steven R. Brownlee
Lead Technologist
Mind Over Media

P: 412.391.1100 x220
F: 412.391.0185
E: ste...@mo...
W: http://www.momknows.com/=20
=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=
=3D=3D=3D=3D=3D=3D=3D=3D=3D

IF YOU BELIEVE that people automatically resist change,
offer them a new car of their choosing, no strings attached.

[Dynapi-Widgetdev] layer with a drag handle

[Matt F. <ma...@ne...>]

Is there a way to attach a handle layer to another layer.
For example:

[Drag Here]+---------------------------+
             |                           |
             |      Layer                |
             +---------------------------+

So when you click on the "drag here" layer everything will move.
I have thought about doing something like:

draghere=new dynlayer();
draghere.setHTML("Drag Here");
draghere.moveTo(layer.getX()-draghere.getContentWidth(),layer.getY());
DynAPI.document.addChild(draghere);

But the problem that I have with this is how do I have the layer move if
it isn't a part of it, and if I do get it to work, since they are
different objects instead of child and parrent objects they may separate
from one of eachother and have a delay (wich would look kinda wierd).
Also I would like to have a parent or child of the layer to simplify things.
	
Any sugestions?

Thanks
Matt

[Dynapi-Widgetdev] widgets update

[Mendjeli m. <mme...@gh...>]

Hi,
I just started tu use this great API,  i wanted to know when=20
a standardisation on widgets libs and new widgets will be avalaible?
Thanx....=20

Re: [Dynapi-Widgetdev] Menu Widget - resize or pack?

[Jim R. <gr...@cy...>]

And of couse, now I find the answer,

	DynLayer.getContentWidth()
	DynLayer.getContentHeight()

Although this isimplemented in label.js, I think that should be moved
into DynLayer object as I can see it being very, very useful.

Jim Richards wrote:
> 
[snip ...]

> But the other thing I will need to do is work out the width and height
> so I can position it correctly (eg: look at the third menu item
> with Teaching and Learning, it's too wide.) I also want to size
> them correctly, or resize if they need to be wider.