|
Untitled-1
Untitled-1
Untitled-1
|
|
 |
|
|
Untitled-1
 |
 |
|
Creating an organization lookup sidebar gadget, part 1 of 2.
|
|
|
 |
|
Location: Blogs Bean LabsProgramming (C#/.Net/etc) |
 |
| Posted by: frijoles |
3/14/2007 |
Like most organizations, ours has an employee organization chart that we use to look up email addresses, phone numbers, etc. A coworker recently suggested I make a Windows Vista Sidebar Gadget that tied in with our OrgChart. It basically does a quick lookup of someone and shows us their details. I spent yesterday coding it, and although it is still being developed, I thought I'd paste some code here for it.
Vista SideBar Gadgets work with HTML, Javascript, and a sprinkle of tags that the gadget itself understands. For this gadget, I will be using a WebService, which holds the user data, and the gadget HTML page. We won't need any gadget tags for this one. Since I had no idea how to interface a gadget to a webservice, some of the code below is from this page, which has no documentation, just straight code.
Creating the WebService
To start with, begin by opening up Visual Studio 2k5 (I did say this was step by step, right?). Go to File->New->Web Site. Create an ASP.NET Web Site. Pick a location for it and click ok (don't forget to change the language for it, like I did, if you need to). After the project is created, you should be looking at a default.aspx page. We're not going to use that, but feel free to leave it around anyway. You can use it later if you need a test page for something.
Right click your web project in the solution explorer and add a new item. Select 'Web Service'. Don't bother changing the name. A new web service .asmx file will be created, as well as the code, which is what we're interested in. For starters, we're going to work with just the HelloWorld functionality that is included in the default webservice file. After we get the gadget talking to the web service, we will modify it to return user data.
Open up IIS, browse to your new folder, and turn it in to an application.
Compile the application and open a browser to test the new webservice (point your browser to WebService.asmx). With luck, you'll see the webservice test page, and your HelloWorld method should be a link that you can click on. If you are hitting the page from localhost, you can invoke the webservice to see what it does. Right now it doesn't do much.
Put aside the webservice after you've tested it. Now comes the fun part.
Creating a Simple Sidebar Gadget
SideBar gadgets are fairly easy to create. For lots of tutorials and documentation, see the MS tutorial site. Basically they contain any graphics you'll need, any HTML pages, and the gadget manifest. The manifest tells the gadget some basic information, such as the name, who created it, and where the main file is. For our example, we're going to create a gadget called Org.gadget.
To begin, open up the following folder:
c:\Users\YOURNAME\AppData\Local\Microsoft\Windows Sidebar\Gadgets\
Since you and I probably don't have the same name, your Users folder will be slightly different. Create a new folder in the Gadgets directory called Org.gadget and move to that folder.
Right click and create a new text file. Name your text file 'gadget.xml'. This is the manifest. Open it up with a text editor and paste the following code in to it:
<?xml version="1.0" encoding="utf-8" ?>
<gadget>
<name>OrgChart</name>
<namespace>blogs.mscorlib.com</namespace>
<version>1.0</version>
<author name="Frijoles">
<info url="blogs.mscorlib.com" />
</author>
<description>OrgChart Sidebar Gadget</description>
<hosts>
<host name="sidebar">
<base type="HTML" apiVersion="1.0.0" src="Query.html" />
<permissions>full</permissions>
<platform minPlatformVersion="0.3" />
</host>
</hosts>
</gadget>
Most of this is sell explanitory. There's a name (OrgChart), a namespace and version, author, and a description. The meat of this is the area which has the 'base' tag. That's the main page, query.html. There's a few other things you can include, such as an icon and copyright. Save the file.
Right-click and create another text file. Call this one 'query.html'. This will be our main interface. You can actually use a regular web browser to test this file, but I've found that sometimes that doesn't work as well as testing it as an actual gadget. Also, you can't use the gadget tags, of course.
In the query.html file, we're going to put our main interface. It's going to be fairly simple, just a text box and a button. Let's start with the top part:
<html>
<head>
<title>OrgChart</title>
<style>
body{
width:130;
height:110;
padding-top: 5px;
color:black;
}
</style>
The above will give us the basic size of the gadget. Gadgets are restricted to 130px wide, so we set it to that. 110 is a good height that I picked out of the air.
Next comes the javascript, which I'll break down in to functions:
<script type="text/javascript">
function init()
{
service.useService("http://<YOUR SERVER>:80/<PATH TO YOUR WEBSERVICE>/WebServiceTest/WebService.asmx?WSDL","WebService");
}
Further below we have an element on the page called 'service'. The above tells the service element where the webservice is.
function handleResult(){
var html = "";
var r = event.result;
if (r.error){
html += "Error:\n\n";
html += r.errorDetail.string;
}
else {
var xml = r.raw;
var user = [];
var fields = ["HelloWorldResult"];
for (var i=0; i<fields.length; i++)
{
var f = fields[i];
var elm = xml.getElementsByTagName(f).item(0);
user[fields[i]] = elm.firstChild.nodeValue;
}
html += "<div>" + user.HelloWorldResult + "</div>";
}
event.srcElement.innerHTML = html;
}
When service returns data back, it will be handled and parsed for us. We'll modify this function later to show our search results. For now, it will just look for the field HelloWorldResult. After finding it, it will spit it back out to us as user.HelloWorldResult. If you look at the ?WSDL generated, you will see HelloWorldResult in the XML.
function DoSearch()
{
var parmValue = document.getElementById("parameter").value;
service.WebService.callService("HelloWorld", parmValue);
}
</script>
And this function is what actually tells the service to fire the webservice. Last but not least, the actual HTML in the page:
</head>
<body onload="init()">
<div id="search">
<input type="text" class="inputbox" name="parameter" value="" size="12">
</div>
<div id="searchimg">
<a href="javascript:DoSearch()">Search</a>
</div>
<div id="service" style="behavior:url(webservice.htc);" onResult="handleResult()"></div>
</body>
</html>
We have a search box, we have a link to push that fires the button, and we have the service element. The service tag calls the webservice.htc file, which will handle all the gritty details of connecting up to the webservice.
Speaking of the htc file, that is the last part, downloading the webservice.htc file, which you can get directly from Microsoft. Just make sure to get the latest and greatest version. An older version I was using kept returning errors. The newer version fixed that problem. You can also find the file via a Google search for webservices.htc. I'm going to paste the url here, since DNN doesn't want to support my massive direct link to the download:
http://msdn.microsoft.com/library/shared/deeptree/asp/rightframe.asp?dtcfg=/archive/deeptreeconfig.xml&url=/archive/en-us/samples/internet/behaviors/library/webservice/default.asp?frame=true&hidetoc=false
After you have saved the file, right-click the sidebar and select 'add gadgets'. You should see 'OrgChart' in the list. Drag it over to your sidebar and see if it works. You should see a white box with a textbox and a button that says 'search'. Click search and, after a moment, you will see (with luck) 'Hello World'. It may take a moment if your webservice has not been run.
Thus concludes the first part of this article. Hopefully I can get the second part done soon. I didn't think this would take so long to write.
|
|
| Permalink |
Trackback |
Comments (1)
Add Comment
|
Re: Creating an organization lookup sidebar gadget, part 1 of 2. |
By frijoles on
3/16/2007 |
| ... I'm less than pleased with the formatting of this. I will clean it up, but it will take a bit. |
|
|
|
|
 |
|
 |
|
|
|
|
|
|
|
|