Helpful Information

Category: XML

Clientside XML

What do you think of this approach to XML on the clientside?
http://www.naltabyte.se/space

This is a serious question, I work there, and I'm trying to figure out how much of XML it is, and how much it is programming.

I'm looking for a better idea of where this belongs, what to label it.

As such, it's clientside XML, written into the HTML-code, as normal HTML-tags.

Umm, there is nothing normal about XML inside HTML. You might find it in XHTML, if the XML elements were properly namespaced and if the DTD was modified to allow them.

VML is the basis for SVG...

That's a questionable statement, imho.

(Remember, I'm the standards evangelist around here ;) )

Can you point me to a file which has both HTML and XML in it simultaneously?

All the samples uses custom-tags to achieve the results, mixed with normal html-tags.
Like this:
<move x="2" y="2" to="120">
<img src="*.gif'>
</move>

That's the working approach for everything Naltabyte does, without exeptions.
That's what I'm wondering about, how do you label that?
XML or behaviours?

I still need to conform to all the other XML-rules, about nesting, tree-structure, etc, but I'm really creating applications.

Originally posted by Alex Vincent
(Remember, I'm the standards evangelist around here ;) )

The? :p, you seem to be forgetting about someone...

Anyway, I don't think the SVG working group was formed much after VML, and if you've ever worked with the two, there aren't many similarities. So I'd have to disagree with the VML statement.

As for using "custom tags", I've been doing it for years. Their approach is flawed in the amount of extensibility it has. If you want to know why (has to do with IE's behaviors and custom namespaces), its very easy to explain.

And my "widgets" have always been crossbrowser by using a combination of ViewLink behaviors for IE, and XBL for Moz.

The only issue with this approach I've found is graceful degradibility. All custom tags have to be empty (and just use attributes) to degrade nicely, but then it starts becoming inconvenient. And also any page with them will never validate against an XHTML DTD, unless you want to add it in via an inline DTD.

>has to do with IE's behaviors and custom namespaces

Ouch* I never touch any of that stuff, namespaces and such, the methodology used by this company means that there are no such things, and the crossbrowser-compatibility is there to begin with.

It's only browser-specific if I really, really want it to be, for example, if I use VML.

But the actual question is still unanswered.
Is this approach best described as XML or is it to be regarded as exotic DHTML or something to that effect??

We have extensive experience of solving problems using tags so I wont get into that, we have experienced vast advantages in doing so instead of using other approaches, because it means reusing code to a ridicoulus level, but -- I dont know what to label it.

For my own piece of mind, what the &#l� is it they pay me to do?
I dont know what to tell my friends I'm doing for a living. :-)

IE doesn't truly support namespaces. What this classifies as is exotic DHTML imitating XML through features (or bugs) of a browser. IE allows you to create parsable tags through its "HTML namespaces" feature. (It actually requires custom tags to be done that way, <bla>something</bla> is very different in IE in terms of DOM than <pre:bla>something</prebla>).

Mozilla implements an "HTMLUnknownElement" interface, in which unknown html tags inherit properties from. HTML doesn't support namespaces, but bla:something is still a valid tagname, so Moz applies the HTMLUnknownElement properties and methods to it.

Essentially, you get the same thing in IE and Moz, but through very different paths.

But giving meaning to the custom tags is the same, you must apply a behavior for IE and a binding for Moz in order to make the tag "do stuff.". Could be adding content, creating methods, properties, whatever.

But that's getting a little sidetracked, essentially what they do is create elaborate DHTML effects in an encapsulated fashion by making use of behaviors, bindings, and HTML "features".

This is my favorite way of encapsulating effects, simply because no Javascript is exposed, and you aren't messing around with a bazillion <div>'s or <span>'s, just sensible tagnames.

But scripts in this fashion are usually limited to IE5.5+/Win and Gecko. (IE5/Win if you don't want to include ViewLink content)

> But giving meaning to the custom tags is the same, you must >apply a behavior for IE and a binding for Moz in order to make >the tag "do stuff".

That can't be true, because the tools I use dont do that.
I write the function and the function and tag are then automatically linked up as a 'tag-behaviour'.
There's a sample on site.

>Essentially, you get the same thing in IE and Moz, but through >very different paths.

I use the same methods and tools, and the code is exactly the same, I have gone through it line by line, and there are no special considerations in regard to browsers to be found, except for when I use stuff like VML.
There's no difference whatsoever.

:: is not impressed with their javascript "protection" ::

Sifting through the code, it just seems to be an inefficient way of implementing custom tags. It also eliminates the most signifcant advantage I ever found - not exposing Javascript. This stuff exposes a multitude of functions and variables it doesn't need to.

Essentially, all of your custom tags except for <custom/> are replaced at runtime with <div>'s.:

<HTML>
<HEAD>

<SCRIPT src="http://www.naltabyte.se/customtags?animation">

</SCRIPT>
</HEAD>

<BODY scroll="no" style="border: 0pt none ; background-color: buttonface;"
id="soft" theid="a1" onkeydown="return checkMotion(event)">

<DIV style="width: 600px; height: 400px; overflow: hidden;">

<CUSTOM newtags="clip,move,motioncontrol,resize,trigger" _moz-userdefined="">

</CUSTOM>
<DIV setaction="clip" id="coll"
style="border: 1px solid rgb(255, 255, 255); background-image: url(http://www.naltabyte.se/crossbrowsers/images/space.gif); position: absolute; top: 30px; left: 30px; width: 300px; height: 300px; background-color: black; overflow: hidden;"
lock="no" hide="yes" x="0" y="0">

<DIV setaction="move" id="a1" assign="reappear"
style="position: absolute; height: 30px; width: 30px; z-index: 5; left: 70px; top: 165px;"
x="0" y="5" lock="no">

<IMG src="images/war.gif" height="30" width="30" style="height: 30px; width: 30px; z-index: 5;"/>

</DIV>

<DIV setaction="move" id="a2" assign="reappear"
style="position: absolute; height: 30px; width: 30px; z-index: 5; top: 135px; left: 185px;"
x="-5" y="5" lock="no">

<IMG src="images/war2.gif" height="30" width="30" style="height: 30px; width: 30px; z-index: 5;"/>

</DIV>

<DIV setaction="move" id="a3" assign="reappear"
style="position: absolute; top: 150px; height: 30px; width: 30px; z-index: 5; left: 110px;"
x="-5" y="0" lock="no">

<IMG src="images/war2.gif" height="30" width="30" style="height: 30px; width: 30px; z-index: 5;"/>

</DIV>

<DIV setaction="move" id="a4" assign="reappear"
style="position: absolute; height: 25px; width: 25px; z-index: 5; top: 221px; left: 96px;"
x="4" y="1" lock="no">

<IMG src="images/war2.gif" style="height: 25px; width: 25px;"/>

</DIV>

<DIV setaction="move" id="a5" assign="reappear"
style="position: absolute; top: 50px; height: 25px; width: 25px; z-index: 5; left: 84px;"
x="7" y="0" lock="no">

<IMG src="images/war2.gif" style="height: 25px; width: 25px;"/>

</DIV>

<IMG src="images/planet.gif" id="im" style="z-index: 2; height: 610px; width: 610px;"/>

<DIV setaction="resize" run="im" to="" x="2" y="2" lock="yes"/>

</DIV>

<DIV setaction="motioncontrol" run="a1" speed="5"
key52="fireMove('upright');release('t1:t2:t3:t4')"
key51="fireMove('upleft');release('t1:t2:t3:t4')"
key50="fireMove('downright');release('t1:t2:t3:t4')"
key49="fireMove('downleft');release('t1:t2:t3:t4')"
shoot="<div style='color:yellow'>�</div>" to="10" lock="yes" id="mcon">

</DIV>

<DIV setaction="trigger" id="t1" lock="yes" run="a2" from="fire" onevent="hiding('a2')"/>

<DIV setaction="trigger" id="t2" lock="yes" run="a3" from="fire" onevent="hiding('a3')"/>

<DIV setaction="trigger" id="t3" lock="yes" run="a4" from="fire" onevent="hiding('a4')"/>

<DIV setaction="trigger" id="t4" lock="yes" run="a5" from="fire" onevent="hiding('a5')"/>

</DIV>
</BODY>
</HTML>

Is the parsed representation, as opposed to the source code:

<?xml version="1.0" ?>
<html>
<head>
<title>NALTABYTE: DEMO</title>
<script language="Jscript.Encode" src="DELETED"></script>
<script src="aml_1.js"></script>
<custom newtags="clip,move,circle,resize,trigger,motioncontrol,preload," />
</head>
<body scroll="no" style="border:solid buttonface 1px;background-color:buttonface">



<clip id="d1" style="background-image:url('space.gif');background-color:silver;position:absolute;top:30;left:30;height:300;width:300;border:1 solid white 2px;z-index:2;">

<move id="r5" assign="bounce" x="3" y="3" style="position:absolute;top:100;left:70">
<img src="war2.gif" style="height:20;width:20" />
</move>
<move id="r4" assign="bounce" x="4" y="3" style="position:absolute;top:130;left:100">
<img src="war2.gif" style="height:20;width:20" />
</move>
<move id="r3" assign="reappear" x="3" y="3" style="position:absolute;top:80;left:120">
<img src="war2.gif" style="height:20;width:20" />

</move>
<move id="r1" events="mouseover" assign="reappear" x="-4" y="-3" style="position:absolute;top:130;left:140">
<img src="war2.gif" style="height:20;width:20" />
</move>
<circle id="r2" size="14" assign="reappear" style="position:absolute;top:70;left:50">
<img src="war2.gif" style="height:20;width:20" />
</circle>
<move id="boxer" lock="yes" assign="reappear" x="2" y="2" style="position:absolute;top:150;left:170">
<img src="war.gif" height="35" width="35" />
</move>

<img id="planet" src="planet.gif" height="10" />
<resize y="1" x="1" run="planet" to="300" />

</clip>



<trigger run="inmove" to="r1" onevent="r1.style.visibility='hidden'"></trigger>
<trigger run="inmove" to="r2" onevent="r2.style.visibility='hidden'"></trigger>
<trigger run="inmove" to="r3" onevent="r3.style.visibility='hidden'"></trigger>
<trigger run="inmove" to="r4" onevent="r4.style.visibility='hidden'"></trigger>
<trigger run="inmove" to="r5" onevent="r5.style.visibility='hidden'"></trigger>

<motioncontrol
run="boxer"
k1="insertMove(boxer,6,6,'','yellow')"
k2="insertMove(boxer,6,-6,'','yellow')"
k3="insertMove(boxer,-6,6,'','yellow')"
k4="insertMove(boxer,-6,-6,'','yellow')" />

<preload load="war.gif,war2.gif,space.gif,planet.gif"
message="" color="" style="visibility:hidden;" />

</body>
</html>

Whatever works I guess though must be the prevailing attitude in this case, as even though there are better ways of doing this (i.e. the way I assumed they were doing it originally), it seems to work well enough.

I did this, this way, from the beginning.
And I did this this way because it's requiring an insanely small amount of code.
There is no 'original approach'.
I dont know how you imagine this is being done, but each tag is run by a short function that is re-instanced once per tag.
In other words, I dont use arrays or loops, or collections that I need to run through.
It's in a sense multithreaded.
The translation of XML to the webpage is stolen from IE's own method of displaying XML, which works exactly the same way.
If you open an XML-document in a frame in IE, and calls for it's innerHTML from another frame, this is what you get back.

The point is, it's extracted from the server, where it's XML, and it's used and manipulated there as such, through other interfaces, but as a live game on the web, this is what happens.

Finally, as I work with this, I must ask you how you define 'inefficient'?
I'm a very lazy person, and if there was a faster way to do this, I would, belive me..

Originally posted by amikael

Finally, as I work with this, I must ask you how you define 'inefficient'?
I'm a very lazy person, and if there was a faster way to do this, I would, belive me..

Very simply:

With this method, you are rewriting the page's entire DOM at least once per load. Rerendering the entire page is not very efficient. <custom>bla</custom> is by default rendered inline, <div> is block. You can change that through CSS, but you'll still end up rerendering the page when replacing tags.

I was more concerned with the process of development, which is much easier this way.

I never notice any loss of effeciency, so I dont experience this 'rendering-problem', whatever that is.
Perhaps I have a computor thats a bit to powerful, to notice that effect.
I'm rather comfortable with rewriting and changing the DOM all the time, because I really dont see the point in leaving it static.
It's the structure that saves and manages data for me, so I kind'a have to change it...
The scripts running my apps dont have variables, they use the DOM-tree for any and all data-handling during runtime.

So, the bottom line is, I suppose, that it's easier for me, but harder on the browser.

Oh well..

Originally posted by amikael
I'm rather comfortable with rewriting and changing the DOM all the time, because I really dont see the point in leaving it static.

Naturally, a changing DOM of the page is what DHTML revolves around.

But you are essentially rewriting the entire page for no (necessary) reason. While you may not notice the difference, nor may anyone else, it is still inefficiency which can be fixed at the cost of writing the same code in two different formats.

If its worth it that you don't need to pretty much copy and paste Javascript between two files, and change the tags surrounding them (for behaviors and bindings), then obviously for your purposes nothing is wrong with this method.

But it still leaves a lot of variables and functions exposed, which is typical of most DHTML... and not necessarily a good thing.

This is an interesting way of implementing custom tags though, and certainly one I didn't think of.