[js] Alle objecten langslopen

[Kaastosti]

Ik kreeg hier gisteren de hint om objecten te gaan gebruiken ipv een array. Allemaal hartstikke leuk, dus ik druk aan de slag. Ik heb nu een aantal functies (hier onder), waarmee verschillende objecten gemaakt worden. Nou wil ik, op het moment dat iemand met z'n pointer over een menu gaat, dat de children van dat menu worden getoond. De manier waarop boeit nog niet echt, aangezien ik pas later aan de layout en grafische aspecten ga werken, nu eerst de techniek.

Inmiddels heb ik een aantal tutorials over objecten doorgelezen, maar deze beperken zich echt tot het uitleggen hoe mooi het wel niet is en wat je er allemaal mee kunt. Dat was dan ook de basis voor m'n werkje.

JavaScript:

function Menu(id, parent, name, link)
{
    this.id = id;
    this.parent = parent;
    this.name = name;
    this.link = link;
    if(this.parent == 0)
    {
        this.show();
    }
}
    
    Menu.prototype.show = function()
    {
        if(this.link)
        {
            //document.write alles
        }
        else
        {
            //document.write alles zonder link
        }
    }


//=========================== dit lukt nog niet
    function showChildren(id)
    {
        while(this.Menu)
        {
            if(this.parent == this.id)
            {
                alert('this.name');
            }
        }
    }
//===========================
    
    function Item(id, parent, name, link)
    {
        Menu.apply(this, arguments);
    }
    Item.prototype = new Menu();

    function Sub(id, parent, name)
    {
        Menu.apply(this, arguments);
    }
    Sub.prototype = new Menu();

Eigenlijk hoort volgens mij ook de functie showChildren een prototype functie te zijn van Menu, maar als ik dat doe weigert hij 'm te vinden alszijnde een functie. Wat doe ik fout en is m'n manier van werken met objecten ok op deze manier? Als dat laatste fout zit kan het namelijk nog lang duren

[ Voor 30% gewijzigd door Kaastosti op 10-04-2003 11:13 ]

[.oisyn]

taal mist in topictitel, en javascript hoort in /13: HTML, JavaScript, Flash en Director topics *20-03*

PW -> WG

[Kaastosti]

Sorry hoor, ben ook nog niet zo lang wakker Ik was er echt van overtuigd dat ik 'm bij WG geplaatst had (ik weet, javascript is niet PW)... en tjah [JS] in topic idd vergeten... stupid me

[Clay]

Ik denk dat het wat ver gaat om submenu een subclass te laten zijn van menu, en idem voor item. een submenu -is- een menu, items zitten er slechts in. Het enige verschil met je toplevel menu is dat die niet hidden kan/moet worden, maar dat kan alleen een item uit het supermenu doen, en die bestaat voor dat menu niet. Ik zou de hele overerving overboord doen, en iets als dit doen:

PHP:

// woei, kleurtjes! ;)

// Menu
function Menu() {
   this.items = [];
}

Menu.prototype.createItem = function(label, link) {
   return this.items[this.items.length] = new item(this, label, link);
}

Menu.prototype.createSub = function(label) {
   return this.createItem(label).linkTo(new Menu());
}
   
// Item
function Item(parent, label, link) {
   this.parent = parent;
   this.label = label;
   this.link = link || false;
   this.subMenu = null;   
}

Item.prototyp.linkTo(menu) {
   return this.subMenu = menu;
}

showChild kan dan in de mouseover van het item zelf, dan hoef je er ook niet naar te zoeken, het item kent zijn sub dan immers.

* Clay moet zelf overigens ook nog zo'n script maken

[Kaastosti]

Ah op die manier
Het is allemaal nog een beetje nieuw voor me, deze manier van werken, maar ik ga het zeker eens proberen. Ook de syntax is nog een beetje wennen...
Maar stel dat ik op deze manier alle items en subs aanmaak... is het dan mogelijk om er met een loop oid doorheen te lopen? Volgens mij niet, aangezien ze geen index hebben.

[Clay]

dan geef je ze die Je kan ze altijd ergens in een globale array stoppen om dat soort dingen mogelijk te maken.

[Verwijderd]

Nadeel is wel dat je nu voor elk menu-item apart de parents en children moet opgeven, wat dan ook weer betekent dat je niet zo makkelijk een item verplaatst binnen de menu-boom. Zelf gebruik ik een simpele array-matrix van menu-item objects (bevattende het label en een link).

[Clay]

je hoeft zelf helemaal geen parents of childs op te geven, dat gaat vanzelf, da's het mooie juist bv met het voorbeeld boven:

PHP:

menu = new Menu()
menu.createItem('fiets', 'link');
   sub = menu.createSub('brommer');
   sub.createItem('vrrr', 'link');

Een item moet wel ff z'n parent kennen ja, maar dat lijkt me in elke aanpak van een dergelijk script wel handig.
Het verplaatsen van items binnen de boom vind ik zelf niet zo superbelangrijk. Wil je dat per se real time kunnen doen? Dan nog geloof ik dat een OO oplossing dat makkelijker kan dan een verzameling array's

[Verwijderd]

Het hele idee van een dynamisch menu, is dat je makkelijk items kan toevoegen en verplaatsen. Anders zou ik het wel statisch doen. Wellicht kan dat ook wel met OO, maar niet op deze manier.

[Clay]

Ik heb nog geen menu gezien waar ik online, ter plekke, dus voor alle duidelijkheid: real-time terwijl ik op die site zit, menu(sub)items van a maar b zie/moet/wil verplaatsen.
In de basis is het ook gewoon het Dom waarmee je dit voor elkaar moet krijgen. De laag die je daar omheen bouwt, dus een array-based, of een OO-based menu, speelt daarbij eigenlijk geen rol.

[Verwijderd]

Enigste wat ik zeg is dat als je niet makkelijk menu-items kan verplaatsen e.d., dan maak je geen menufunctie, maar een printfunctie. Anyway, als je OO wil, dan kom je denk ik op twee objecten: het menu-item en een menu-item opslag. Dan moet je beslissen of je de menu-interrelaties (parent-child) in het menu-item of in de opslag class opslaat. Als je dat laatste doet, dan is de simpelste implementatie een array-matrix lijkt me.

Een ander idee is om de DHMTL DOM kunnen gebruiken. Een div node aanmaken bijv. en daar dan siblings aan toevoegen. De menudefinite doe je dan dus in HTML. Daar fiets je vervolgens doorheen met javascript/DOM om de onmouseovers e.d. toe te voegen.

[Verwijderd]

Ik had toevallig een nog een script liggen. Is een soort globale script. Je kan dan een Parent object maken en child nodes eraan vast. Niet echt helemaal OO. Je moet het wel nog aanpassen.

function MenuItem(sItemName){

this.name="";
if(sItemName=="") {
this.name="undefined"
this.value="";
} else {
this.name=sItemName;
this.value=sItemName;
}


this.parentName="";
this.parentObject=this;

// This is where I store the child-objects for the current object
this.childNodes=new Array();

this.currChildNode=0;


// functions definitions
this.getParentObject=getParentObject;
this.getName=getName;
this.setName=setName;
this.addChild=addChild;
this.deleteItem=deleteItem;
this.hasChildren=hasChildren;
this.getItem=getItem;
this.getChildCount=getChildCount;
this.isInItemRange=isInItemRange;
this.setParent=setParent;
this.setParentObject=setParentObject;
this.getParent=getParent
this.getLastChild=getLastChild;
this.setValue=setValue;
this.getValue=getValue;

// -----------

/*
set the value for the current object
/*
function setValue(sValue){
this.value=sValue;
}

/*
returns the value for the current object
/*
function getValue(){
return this.value;
}

/*
returns the last child in the array in the current object
/*
function getLastChild()
{
returnValue=new Object();
if(this.hasChildren()==true){
returnValue=this.childNodes[(this.childNodes.length-1)];
}
return returnValue;
}


function setParentObject(objectParent)
{
this.parentObject=objectParent;
}

function setParent(objectParent)
{
this.parentName=objectParent.getName();
this.setParentObject(objectParent);
}

/*
set the parent object
*/
function getParent()
{
return this.parentObject;
}

/*
returns the array with child-objects
*/
function getItemsArray()
{
return this.childNodes;
}

/*
returns number of child-objects
*/
function getChildCount()
{
var returnValue=0;

if(this.hasChildren()==true)
{
returnValue=this.childNodes.length;
}
return returnValue;

}


/*
returns a child-object with a given index
*/
function getItem(iIndex)
{
returnValue=new Object();
if(this.hasChildren()==true)
{
if(this.isInItemRange(iIndex)==true)
{
dumpObject=this.childNodes[iIndex];
returnValue=dumpObject;
}
}
return returnValue;
}


/*
checks if the index is in the range of the amount of child-objects
*/
function isInItemRange(iRange)
{
returnValue=false;

if(iRange<this.childNodes.length)
{
returnValue=true;
}

return returnValue;
}

/*
returns teh parent object
*/
function getParentObject(){
return this.parentObject;
}

/*
returns the name of the current object
*/
function getName(){
return this.name;
}

/*
set the name for the current object
*/
function setName(sName){
if(sName!=""){
this.name=sName;
}
}

/*
add a child
*/
function addChild(sName,sValue){
if(sName!="")
{
countItems=this.childNodes.length;
var itemObject = new MenuItem(sName);

itemObject.setValue(sValue);

if(this.getParent().getName()==this.getName()){
itemObject.setParentObject(this.getParent());
} else {
itemObject.setParentObject(this);
}

this.childNodes[countItems]=itemObject;
}
}

function deleteItem(sName){
if(sName!=""){
alert("not ready");
}
}

/*
checks if teh current object has childrens
*/
function hasChildren()
{
var returnValue=false;
if(this.childNodes.length>0)
{
returnValue=true;
}
return returnValue;
}
}


--------------------------------------------------

// Eerst maak je een hoofd-object aan
var menu=new item("menu");

// Haal de laatste child in 'menu' en voeg daar aan 'Menu 1'
menu.getLastChild().addChild("Menu 1","Menu 1");
menu.getLastChild().getLastChild().addChild("Menu 1a","Menu 1a");
menu.getLastChild().getLastChild().addChild("Menu 1b","Menu 1b");

/*
je hebt nu
Menu
Menu1
Menu 1a
Menu 1b
/*


// Haal de laatste child in 'menu' en voeg daar aan 'Menu 2'
menu.getLastChild().addChild("Menu 2","Menu 2");

/*
je hebt nu
Menu
Menu1
Menu 1a
Menu 1b
Menu2
/*


Oh ja

Mocht je ff snel willen ittereren :

function showAllObjects(objectIn){
var element=objectIn;
var i=0;
for(;i<element.getItemsCount();i++){
var subElement=element.getItem(i);

alert("Name = "+ subElement.getName()+"\nValue=subElement.getValue()");

showAllObjects(subElement);
}
}

toggleAllSectoren(sectoren);

[ Voor 8% gewijzigd door Verwijderd op 11-04-2003 10:59 ]

[Verwijderd]

Ziet er opzich heel netjes uit. Je hebt wel een probleem als je menu zeer vertakt is. Stel dat je een child wil toevoegen aan een 10de generatie child van het hoofdmenu. Dat doe je menu.10x getLastChild.addChild (oid) of je spreekt specifiek dat submenuitem aan met [10de generatie submenuitem].getLastChild.addChild. Beide zijn niet echt overzichtelijk en dat maakt het ongemakkelijk om items te verplaatsen etc.