Sarah71

If I would like to create a layout with a navigation bar on the top for access to 3 different areas/panel of the gadget .... how Can I do this

I hope you can help me!




Re: Web Gadget Development Layout for gadget

ToddOs

Something like the tabs on my Soapbox gadget I did that by creating a binding for a "tabstrip" that exposes an event that tells the container when a tab has changed. Then I create three "panels" (in my case, another binding) that I show or hide depending on what happened in the tab change event handler. Displaying the tabs is simple enough, as they're just list items (<li>) that have been styled via CSS to be "inline" rather than "block". There are some good tutorials on how to make tabs out of a list (for example) out on the web (I like A List Apart, but there are other HTML-centric design resources out there). I covered bindings in another post. The rest is just glue.

You can look at the code to the Soapbox gadget if you like (here's the manifest, which should give you enough info to find the actual source files). Hopefully someday we'll get a binding repository where people can share bits like my tabstrip binding.





Re: Web Gadget Development Layout for gadget

Sarah71

Yess like this!!!

But how Can I introduce this layout in a gadget ... I've not experience with gadget I've always done this in HTML pages... can yuo send me a simple example

Very thanks for help me!




Re: Web Gadget Development Layout for gadget

ToddOs

There are a number of ways to create HTML elements in a gadget, but my preferred method is DOM creation (document.createElement()). Others include stuffing code into p_elSource.innerHTML (string manipulation is messy), or using Donavon's BindContent.js. You have to go through this pain because gadgets consist of only javascript, CSS, and manifest files. That means there's no html file for you to directly write your HTML.

As for an example, I don't have anything simple available right now. For now, pick your way through the soapbox gadget code I mentioned before for the layout question, and the binding post I mentioned for info on bindings. I'll work on writing up a sample based on Soapbox's tablist and will post here when I've got something shareable.





Re: Web Gadget Development Layout for gadget

Sarah71

ToddOs wrote:

simple available right now. For now, pick your way through the soapbox gadget code I mentioned before for the layout question, and the binding post I mentioned for info on bindings. I'll work on writing up a sample based on Soapbox's tablist and will post here when I've got something shareable.

Thanks for your reply ToddOs ... but where Can I find the "gadget code mentioned before..." I can't see the code

Thanks!






Re: Web Gadget Development Layout for gadget

ToddOs

If you visit the manifest file, that lists the code files used by the gadget (you may have to view source if IE renders the manifest like an RSS feed rather than an xml file). Files in the manifest are referenced relatively, so where you see "tabstrip.js", you can append that to the URL for the manifest (minus "gadget.xml") and get the code. For example, http://download.gallery.start.com/d.dll/2~1~591~4101/tabstrip.js. You may have to view the source or download the file to get proper formatting, but the code is all there. You can do the same with other files listed in the manifest, like soapbox.js (uses the tabstrip binding, handles switching panes), soapbox.css (has the tabstrip styles, though that one is a little hard to read -- I need to separate out the tabstrip stiles from other styles), etc.

As I mentioned before, I'll work on a simpler example and post code and info on that in a bit. I have no idea when I'll get that done though, so in the meantime you can poke around in the soapbox gadget code.





Re: Web Gadget Development Layout for gadget

Sarah71

Thanks for help me!




Re: Web Gadget Development Layout for gadget

Sarah71

But is there a solution for test the results of the HTML created using DOM (or other solutions)




Re: Web Gadget Development Layout for gadget

albidochon

hi, sarah,

you can test your manifest here :

http://test.livegadgets.net/gadgets/TestPlatform/testpages.htm m=http://my_serveur_url/directory/manifest.xml

where my_serveur_url is what it means

and the directory where you upload your gadget's files.

albidochon





Re: Web Gadget Development Layout for gadget

OEIL2MOSCOU

Hello Sarah ,

Go to this post : http://forums.microsoft.com/MSDN/ShowPost.aspx PostID=1037876&SiteID=1

The answer is given by Toddos ;

Oeil de moscou