Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12

Thread: Clientside XML

  1. #1
    New to the CF scene
    Join Date
    Sep 2002
    Location
    sweden, far north..
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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.
    (^-^)b

  • #2
    Moderator
    Join Date
    May 2002
    Location
    Hayward, CA
    Posts
    1,460
    Thanks
    1
    Thanked 23 Times in 21 Posts
    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?
    "The first step to confirming there is a bug in someone else's work is confirming there are no bugs in your own."
    June 30, 2001
    author, Verbosio prototype XML Editor
    author, JavaScript Developer's Dictionary
    https://alexvincent.us/blog

  • #3
    New to the CF scene
    Join Date
    Sep 2002
    Location
    sweden, far north..
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    All of the samples

    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.
    (^-^)b

  • #4
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    Originally posted by Alex Vincent
    (Remember, I'm the standards evangelist around here )
    The? , 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.

  • #5
    New to the CF scene
    Join Date
    Sep 2002
    Location
    sweden, far north..
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    >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. :-)
    (^-^)b

  • #6
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    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)

  • #7
    New to the CF scene
    Join Date
    Sep 2002
    Location
    sweden, far north..
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    > 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.
    (^-^)b

  • #8
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    :: 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.:

    Code:
    <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:

    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">
    
    
    <!--Game area-->
    
      <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>
    
    <!--Command area-->
    
    <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.

  • #9
    New to the CF scene
    Join Date
    Sep 2002
    Location
    sweden, far north..
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Originally did it?

    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..
    (^-^)b

  • #10
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts

    Re: Originally did it?

    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.

  • #11
    New to the CF scene
    Join Date
    Sep 2002
    Location
    sweden, far north..
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Interesting point

    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..
    (^-^)b

  • #12
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts

    Re: Interesting point

    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •