The Godfaza

I'm new to coding gadgets so bare with me. I have been trying to get a simple command to run when I drag the gadget off the dock to test the function. The code is:

Code Snippet

<script type="text/javascript">

function dockStateChanged()

{

document.write("state changed")

}

</script>

When I drag the gadget off the dock the text doesn't appear.


Re: Sidebar Gadget Development Running scripts when Docked State changes

ToddOs

Where are you hooking the dock events There are two you need to watch: System.Gadget.onDock and System.Gadget.onUndock. Also, I wouldn't use document.write. A simple alternative would be to have a "debug output" div where you add to innerHTML each time one of the events fires. A better solution would be to use System.Debug.outputString method to write to the debug stream, which you can watch with tools like Visual Studio or DebugView.

If you haven't already, I suggest you bookmark the Windows Sidebar Gadget API documentation.





Re: Sidebar Gadget Development Running scripts when Docked State changes

The Godfaza

With that method wouldn't the gadget constantly be running the script checking to see if it was docked or not. From what I understand the function I listed is only called when the gadget changes state which would free resources. If I could I would rather not have a script constantly checking the state of the gadget.




Re: Sidebar Gadget Development Running scripts when Docked State changes

ToddOs

In a matter of speaking, yes. In actuality, no. By hooking that event, you're telling Sidebar to call some bit of javascript whenever that specific event happens. It does not poll to find out when that event has happened. Sidebar will fire the appropriate event when the corresponding action happens (docking or undocking).

Read up on "event model" programming for more information.





Re: Sidebar Gadget Development Running scripts when Docked State changes

The Godfaza

So would the code be:

Code Snippet

<script type="text/javascript">

if (System.Gadget.onDock = (not sure if boolean or not so) true or 1)

{

code

}

else

{

code

}

</script>

Or would it still use my dockStateChanged function

EDIT: What I'm going for is to have the gadget resize when I take it off the dock and back on. I am attempting to make a youtube player so I want it small for dock and actual size for undocked. I need to run a script because the flash video player needs to have new height and width values when the gadget changes size.






Re: Sidebar Gadget Development Running scripts when Docked State changes

ToddOs

In your onload function, attach events to System.Gadget.onDock and System.Gaget.onUndock.

Here's some sample code from one of my own gadgets:

In my main HTML file, I have this for a body tag:

Code Snippet

<body scroll="no" unselectable="on" onload="loadMain()">

Here's the function loadMain(). You can define this in a separate js file linked in the HTML page, or within a script block in the HTML page's section. Your choice (I prefer separate files)

Code Snippet

function loadMain()

{

System.Gadget.onDock = DockChange;

System.Gadget.onUndock = DockChange;

System.Gadget.Flyout.file = "flyout.html";

System.Gadget.settingsUI = "settings.html";

System.Gadget.onSettingsClosed = onSettingsClosed;

}

DockChange is another method that checks the variable System.Gadget.docked to determine if the gadget is docking or undocking (System.Gadget.docked will be true if the gadget is docked, false if it's undocked). Alternatively, you can have separate functions for onDock and onUndock. I'm not going to paste that code here since it's not really necessary to see. The rest of loadMain() is just setting up my flyout and settings pages and handlers.





Re: Sidebar Gadget Development Running scripts when Docked State changes

The Godfaza

So when the state of the gadget state is changed it reads the HTML file again And thanks for the code. Gadgets are a little confusing and I want to start with a basic gadget with a flyout and have it resize when I move to the desktop. Do you have any good resources




Re: Sidebar Gadget Development Running scripts when Docked State changes

ToddOs

When the state of the gadget changes, the onDock or onUndock event is fired. What happens next is up to you. In the gadget from which I pulled the sample above, I hide one div and show another and then adjust the body size to match whichever div is showing. Which div shows depends on whether the gadget is docked or undocked.

Since Sidebar gadgets are mostly DHTML (HTML, JScript, and CSS), it would really help if you were at least familiar with those technologies. Books and online resources on web development would be a good place to start. For building a gadget, once you're comfortable with the underlying technology you should look through the API docs I linked earlier, and look at the code of other gadgets (since it's all plaintext stuff, you can do that in most cases -- some people obfuscate their code, but not many people actually do that).





Re: Sidebar Gadget Development Running scripts when Docked State changes

The Godfaza

What I was going after is mabee you know of some good tutorials. Everything I know about gadgets is from looking over other people code or doing the cut and paste MS tutorials. I would like something that goes step by step explaning what the functions do and how to proerly use them.

Thank you so much for your help. I didn't realize that dockchange was a function. Everything is working now.