What is the best way to implement the UI for author mode

What is the best way to implement the UI for author mode

• sachin kumar rana

  A couple things:

  • Don't use tables for layout. Use CSS. There are plenty of sites that describe how to do that (I like http://www.alistapart.com/, personally, but there are a bunch out there like http://www.positioniseverything.net/ and http://www.csszengarden.com/, though the latter two are not as focused on web development and design as A List Apart).
  • Use labels for your form elements. <label>Url: <input value=""/></label>.
  • Use the DOM to create (var foo = document.createElement("label");) and add (foo.appendChild(anotherNode);) your elements. When you do this, you don't have to call document.getElementById() because you already have a reference to your element from the createElement() call. getElementById() is a bad idea, but not for the reason you specify (gadgets are sandboxed in iframes, so you won't conflict with other gadget; as well, you'd run into problems first adding two elements with the same Id before you ran into problems using getElementById() to retrieve said element(s)). The problem is that getElementById() has to search the DOM to find an element that you should already know about. By creating and adding your elements through script, you won't have to call getElementById() at all.

  Styling a form is very much trial and error, but with proper CSS massaging you should be able to get something that still looks good. You might have to compromise on your design sometimes, since HTML was never meant to be pixel-perfect. HTML should flow and resize, and that can cause some good-looking fixed designs to look really bad when font size or dimensions are changed.

  
  

• Rob Duffy

  Gadget.xml is the way to "include" js files. If your helper functions are in different namespaces, you'll need to register all namespaces you want to access. For example take a look at http://download.gallery.start.com/d.dll/1~1~822~9548/soapboxvert.js. At the top of the file, I register two namespaces, ToddOs.SoapBoxVert and ToddOs.Utils. Within that file, all of my classes are defined inside of ToddOs.SoapboxVert, but I need the second namespace declaration because I'm using utilities from http://download.gallery.start.com/d.dll/1~1~822~9548/utils.js. In utils.js, I only register one namespace (ToddOs.Utils), because I'm not referencing back to classes in the ToddOs.SoapBoxVert namespace.

  If your helper methods are not in a namespace, then shame on you! But in that case, they should still work. Depending on how you defined your helpers, you might need to instantiate a class to have access to class methods (ie, you can't call "foo.bar();" until you've first done "var foo = new Foo();" because bar() is a method on the Foo class).

  
  

• sugrhigh

  Thanks ToddOs,

  You are helpful as usual. I certainly check it out.

  By the way, I have another question regarding the code organization:

  I have my main Bao.js file which will implement my gadget. I also wrote some library so I can reuse in Bao.js, let's call them: A.js, B.js.

  How to link these *.js files I have put: <item><link>...A.js</link></item><item><link>...B.js</link></item> in the gadget.xml but in Bao.js still can not use those because of undefined.

  Thanks,

  Bao Nguyen

  
  
  
• What is the best way to implement the UI for author mode