Dieses Beispiel zeigt zwei "magische" Methoden. Ihre Funktionalität unterscheidet sich von den ersten 8 Methoden, da der zurückgegebene Markup in ein Element eingefügt wird (falls dieses Element vorhanden ist). Hierdurch ist es möglich Klassen zu erstellen die durch Kombination mit anderen Klassen diese "nativ" erweitern. Dies können z.B. zusätzliche Icons, Lables oder auch aktive Elemente sein, deren Funktionalität sich ebenfalls innerhalb der Erweiterungs-Klasse befindet.
Diese Erweiterungs-Methode hat den Nachteil, dass sie nicht auf Namenskollisionen innerhalb des erzeugten Objektes reagieren kann. Bei "grob fahrlässiger" Klassenzusammenstellung kann es geschehen, dass der angegeben Markup nicht im gewüschten "Container" landet, da das System den "Container" intern umbenennen musste, um den Ansprüchen einer anderen zugefügten Klasse genüge zu tun. Evtl. werde ich deswegen diese Eweiterungsmöglichkeit auf die Super-Klasse beschränken, welche der ersten Klasse mit diesen Erweiterungs-Methoden vorgeordnet ist, um dieses Problem zu umgehen. Diese Einschränkung blockiert allerdings die Erweiterung der Erweiterungs-Methode, wobei diese Möglichkeit evtl. wertvoller ist. Zur Zeit gilt diese Einschränkung noch nicht und ich hoffe einen nicht einschränkenden Weg implementieren zu können bzw. einen Weg zu finden diese Probleme zu umgehen, wobei mir noch nicht ganz klar ist, ob die Benutzung dieser Methode und die Klassen Zusammenstellung die der Benutzer vornimmt, genügend Informationen enthält um diesen evtl. Weg zu realisieren. Deswegen kann es noch zu einer Änderung der Syntax der Rückgabe-Werte dieser "magischen" Methoden kommen. Falls sich dieses "Problem" als Feature erweist, welches nicht völlig bizarre Auswirkungen hat (ich bin mir nicht 100% sicher welche weiteren Anwendungsmöglichkeiten sich ergeben), werde ich die jetzige Funktionalität erhalten und zusätzlich sichere Methoden implementieren, um "Spezialisten" ein interessantes Werkzeug zu erhalten. Monster ist schließlich Monster und zum Monster-Sein gehört natürlich auch erratisches Verhalten, welches von Liebhabern geschätzt werden kann...
this.elementOpenHTML=function(param,$this$)
{
return {
[element name]:[
]
}
}
this.elementCloseHTML=function(param,$this$)
{
return {
[element name]:[
]
}
}
Mehrere Klassen die zur Definition eines Objektes benutzt werden, können diese Methoden benutzen. Hierdurch ist die Erweiterung von Erweiterungen möglich. Hierbei gilt wieder die Reihenfolge des Markups, wie sie sich auch mit den zuerst beschriebenen "magischen" Methoden ergibt (Super-Klassen bilden umschließenden Markup).
Im folgenden Beispiel, werden beide Methoden benutzt, um einem Bild-Objekt ensprechende Beschriftungen hinzu zu fügen. Das Beispiel zeigt zusätzlich die Benutzung im Zusammenhang mit den 3 verschiedenen Arten von Klassen.
app.newClass("imageDemo","content",function(param,app,superClass){
this.classType="imageDemo"
this.nonPrototype=function(param,$class$){
return {
size:{width:"25%",position:"floatleft"}
,sizes:{
image:{height:"fit",width:"fit",keepAspect:true}
,content:{style:"text-align:center"}
,top:{height:"calc((parent-{element:imagecontainer,relative:element})/2)"}
}
}
}
this.bodyOpenHTML=function(param,$this$)
{
return [
]
}
this.contentOpenHTML=function(param,$this$)
{
return [
{tagName:"div",$id$:"top"}
,{tagOpen:"div",$id$:"imagecontainer"}
,{tagOpen:"img",$id$:"image",src:this.src,border:0}
,{tagClose:"div"}
]
}
})
// used in standard class
app.newClass("[imageDemo.withLable]","imageDemo",function(param,app,superClass){
this.classType="[imageDemo.withLable]"
this.elementOpenHTML=function(param,$this$)
{
return {
imagecontainer:{tagName:"div",$id$:"labletop",children:this.name}
}
}
this.elementCloseHTML=function(param,$this$)
{
return {
imagecontainer:{tagName:"div",$id$:"lablebottom",children:this.src}
}
}
})
// used in component class
app.newClass("[imageDemo.addNameLable]","",function(param,app,superClass){
this.classType="[imageDemo.addNameLable]"
this.elementOpenHTML=function(param,$this$)
{
return {
imagecontainer:{tagName:"div",$id$:"labletop",children:this.name}
}
}
})
app.newClass("[imageDemo.addSrcLable]","",function(param,app,superClass){
this.classType="[imageDemo.addSrcLable]"
this.elementCloseHTML=function(param,$this$)
{
return {
imagecontainer:{tagName:"div",$id$:"lablebottom",children:this.src}
}
}
})
// used by alias class
app.newClass("[imageDemo.labled]","imageDemo[imageDemo.addNameLable][imageDemo.addSrcLable]")
app.newObject("imageDemo",{src:"gfx/nosferatu.jpg"})
app.newObject("imageDemo",{src:"gfx/creature_from_the_black_lagoon.jpg"})
app.newObject("imageDemo",{src:"gfx/cookie_gross.jpg"})
app.newObject("imageDemo",{src:"gfx/dracula.jpg"})
app.newObject("[imageDemo.withLable]",{src:"gfx/nosferatu.jpg",name:"Nosferatu"})
app.newObject("[imageDemo.labled]",{src:"gfx/creature_from_the_black_lagoon.jpg",name:"Black Lagoon"})
app.newObject("imageDemo[imageDemo.addNameLable]",{src:"gfx/igor-holding-brain.jpg",name:"Igor"})
app.newObject("imageDemo[imageDemo.addNameLable][imageDemo.addSrcLable]",{src:"gfx/dracula.jpg",name:"Dracula"})
.app-imageDemo
,.app-imageDemo_withLable
,.app-imageDemo.labled
,.app-imageDemo-imageDemo_addNameLable
,.app-imageDemo-imageDemo_addNameLable-imageDemo_addSrcLable
{
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border: 2px solid #cccccc;
margin:3px;
padding:3px;
background-color:#ffffff;
}