SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Jan 2004
    Location
    St. Paul, MN
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Migrating from CBE to X

    Hi Folks: I have a CBE-based component that is used for doing online mapping works just fine. However, I've been toying with the idea of moving it forward to the X library. Seems a bit easier for long term maintenance and is getting more active development.

    So, most everything moves easily, except one. In X there doesn't seem to be a way to programmatically create dynamic elements. Was that intentional, am I missing something obvious?

    Thanks- Steve

  2. #2
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Steve!

    Thanks for using my libraries - and Welcome to SitePoint Forums!

    CBE creates its own object-tree - so it needs a wrapper around the standard methods for dynamic element creation.

    X doesn't have its own object tree or model. So just use the standard methods:

    document.createElement(...)
    etc...

    One more thing. CBE supports NN4 with its createElement method. If you need NN4 support we'll need to write something like: xCreateElement().

  3. #3
    SitePoint Member
    Join Date
    Jan 2004
    Location
    St. Paul, MN
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Mike, I do enjoy your library. If interested you can see it in action at:

    http://www.dnr.state.mn.us/maps/landview_dhtml.html

    I use CBE to manage navigation in the maps on the page.

    Back to the issue at hand. Thanks for the information. I have to admit that I've lived a sheltered life and have always worked through some cross browser library or another for this type of stuff. If the rest of X supports NN4 then the xCreateElement function sounds like a reasonable addition.

    Steve

  4. #4
    SitePoint Member
    Join Date
    Mar 2004
    Location
    Chambéry (France)
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    xCreateElement function addition ?

    As Steve I'm working on a DHTML interface for a webmapping tool. Trying to adaptate his code, I agree to say that a migration to X might be a good thing.
    But we have a problem to create elements dynamicaly. No xCreateElement function is implemented at this time. Although, in my case, I need to have a complete cross-browser compatibility, including support for NN4.
    Is this function going to be in the next versions ? May I create it myself refering to the cbe one ?

    Thanks in advance and congratulations for your both works

    Pierre GIRAUD

  5. #5
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I was on the verge of completely dropping NN4 support. This raises some questions that I don't have answers for yet. Nevertheless...

    I've only tested a little bit (on Win2K: NN4.8, IE6, IE5, Opera7.23, Moz1.6):

    From x_dom_nn4.js:
    Code:
    // x_dom_nn4.js, X v3.15.2, Cross-Browser.com DHTML Library
    // Copyright (c) 2004 Michael Foster, Licensed LGPL (gnu.org)
    
    // Returns a new Element object. For NN4, returns a new Object object.
    function xCreateElement(sTag)
    {
      var ele=null;
      if (document.createElement) ele = document.createElement(sTag);
      else if (xNN4) ele = new Object();
      return ele;
    }
    function xAppendChild(oParent, oChild, nn4Width) // returns oChild
    {
      var ele=null;
      if (oParent && oParent.appendChild) ele = oParent.appendChild(oChild);
      else if (xNN4) {
        if (typeof(oChild)=='object') delete oChild;
        if (!oParent || oParent.id.indexOf('_layer')==-1) {
          oParent = window;
          if (!nn4Width) nn4Width = xClientWidth();
        }
        else if (!nn4Width) nn4Width = xWidth(oParent);
        ele = new Layer(nn4Width, oParent);
      }
      return ele;
    }
    From x_core_nn4.js:
    Code:
    function xInnerHtml(e, sHtml) {
      if(!(e=xGetElementById(e))) return '';
      if (xStr(e.innerHTML)) {
        if (xStr(sHtml)) e.innerHTML = sHtml;
        else return e.innerHTML;
      }
      else if (xNN4) {
        if (xStr(sHtml)) {
          if (sHtml=='') sHtml = ' ';
          e.document.open();
          e.document.write(sHtml);
          e.document.close();
        }
        else return '';
      }
    }
    Here's something I was testing with:
    Code:
    <style type='text/css'>
    .nnContent {
      font-family:verdana,arial;
      font-size:16px;
      color:#ffffff;
      background:#ccccff;
      margin:10px;
    }
    </style>
    <script type='text/javascript' src='../x_core_nn4.js'></script>
    <script type='text/javascript' src='../x_dom_nn4.js'></script>
    <script type='text/javascript'>
    window.onload = function()
    {
      var i, s;
      
      var lyr1 = xCreateElement('div');
      lyr1.id = 'lyr1'; // nn4 assigns its own (read-only) id and name
      if (lyr1.style) lyr1.style.position = 'absolute';
      lyr1 = xAppendChild(document.body, lyr1, 200);
      xResizeTo(lyr1, 200, 200);
      xBackground(lyr1, '#ffcccc');
      xMoveTo(lyr1, 100, 100);  
      xShow(lyr1);
      s = "<div class='nnContent'>This is <b>lyr1</b></div>";
      xInnerHtml(lyr1, s+s);
    
      if (xNN4) {
        s = '';
        for (i=0; i<document.layers.length; ++i) {
          s += i + ': ' + document.layers[i].id + '\n';
        }
        alert(s);
      }
      
      var lyr2 = xCreateElement('div');
      lyr2.id = 'lyr2'; // nn4 assigns its own (read-only) id and name
      if (lyr2.style) lyr2.style.position = 'absolute';
      lyr2 = xAppendChild(lyr1, lyr2, 100);
      xResizeTo(lyr2, 100, 100);
      xBackground(lyr2, '#ccffcc');
      xMoveTo(lyr2, 50, 50);  
      xShow(lyr2);
      s = "<div class='nnContent'>This is <b>lyr2</b></div>";
      xInnerHtml(lyr2, s+s);
    
      if (xNN4) {
        s = '';
        for (i=0; i<lyr1.document.layers.length; ++i) {
          s += i + ': ' + lyr1.document.layers[i].id + '\n';
        }
        alert(s);
      }
    }
    </script>

  6. #6
    SitePoint Member
    Join Date
    Mar 2004
    Location
    Chambéry (France)
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As I was incorporating with great pleasure your codes, I got blocked when I tried to use the "mousedown" event whereas "mousemove" returns no problem.
    (using : xAddEventListener(this.layer,'mousedown', mousedown_wrapper))

    So I had a look at the code and suggest you those modifications :

    Code:
    function xAddEventListener(e,eventType,eventListener,useCapture) {
      if(!(e=xGetElementById(e))) return;
      eventType=eventType.toLowerCase();
      if((!xIE4Up && !xOp7) && e==window) {
        if(eventType=='resize') { window.xPCW=xClientWidth(); window.xPCH=xClientHeight(); window.xREL=eventListener; xResizeEvent(); return; }
        if(eventType=='scroll') { window.xPSL=xScrollLeft(); window.xPST=xScrollTop(); window.xSEL=eventListener; xScrollEvent(); return; }
      }
      var eh='e.on'+eventType+'=eventListener';
      if(e.addEventListener) e.addEventListener(eventType,eventListener,useCapture);
      else if(e.attachEvent) e.attachEvent('on'+eventType,eventListener);
      else if(e.captureEvents) {
    
    // ******* get the capture events for NN4 and not only for mousemove
    if(useCapture||eventType.indexOf('mousemove')!=-1||eventType.indexOf('mousedown')!=-1||eventType.indexOf('mouseup')!=-1) { e.captureEvents(eval('Event.'+eventType.toUpperCase())); }
        eval(eh);
      }
      else eval(eh);
    }
    function xRemoveEventListener(e,eventType,eventListener,useCapture) {
      if(!(e=xGetElementById(e))) return;
      eventType=eventType.toLowerCase();
      if((!xIE4Up && !xOp7) && e==window) {
        if(eventType=='resize') { window.xREL=null; return; }
        if(eventType=='scroll') { window.xSEL=null; return; }
      }
      var eh='e.on'+eventType+'=null';
      if(e.removeEventListener) e.removeEventListener(eventType,eventListener,useCapture);
      else if(e.detachEvent) e.detachEvent('on'+eventType,eventListener);
      else if(e.releaseEvents) {
    
    // idem   if(useCapture||eventType.indexOf('mousemove')!=-1||eventType.indexOf('mousedown')!=-1||eventType.indexOf('mouseup')!=-1) { e.releaseEvents(eval('Event.'+eventType.toUpperCase())); }
        eval(eh);
      }
      else eval(eh);
    }
    Please tell me if it's not the better, nevertheless it suits to my application.

    Pierre GIRAUD

  7. #7
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No need for all that. Just change "indexOf('mousemove')" to "indexOf('mouse')"
    Code:
      else if(e.captureEvents) {
        if(useCapture||(eventType.indexOf('mouse')!=-1)) { e.captureEvents(eval('Event.'+eventType.toUpperCase())); }
        eval(eh);
      }
      else eval(eh);
    }
    I'll be testing it.

    Is your project online?

    If you modify the library, please comply with the LGPL license - its very easy:

    1) Leave my copyright and license statements at the top of the file - do not remove them.

    2) Add your own comments (under mine) explaining your modification to that file.


    Thanks

  8. #8
    SitePoint Member
    Join Date
    Mar 2004
    Location
    Chambéry (France)
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    xCreateElement() not working in Opera

    Be sure that I will give you some urls as soon as it is be possible. I'll comply with the LGPL licence.
    From now, I have little compatibility problems. I've been using your new xCreateElement() function for the NN4 support. But I'm having problems with Opera (6.01 on XP). No element is created.

    The test
    Code:
    document.createElement
    returns true, but
    Code:
    ele = document.createElement(sTag)
    doesn't return any element.
    Nevertheless, it works fine in NN 4.77, NN 6.1, IE6.

    Any idea about this Opera own behaviour ?
    I'll search my side solutions.
    Thanks.


Bookmarks

Posting Permissions

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