HTML / CSS / DHTML

Windows Vista Gagdet - Example of talking to SQL Server

Chris Crowe — Fri, 06 Apr 2007 19:11:00 GMT

I have created a simple example of a Windows Vista Gadget that will talk to SQL Server using OLEDB with ADO.

This code is very similar to code that one would have used in the past with writing code for ASP pages.

The code is written in Javascript and DHTML.

Basicall the code works like this:

The gadget has an HTML body tag and we assign an onload event to it to trigger our Javascript code which will talk to SQL Server and render all the categories from the Northwind database.

Our simple code in the loadMain event is as follows:

function loadMain()
{
var serverName = "server";
var database = "northwind";
var username = "sa";
var password = "-";

if (password == "-")
{
data = "this is a sample - please configure the servername, database, username and password variables in \\js\\sql.js";
}
else
{
    var oSqlConnection = new ActiveXObject("adodb.connection");
    oSqlConnection.open("Provider=sqloledb;Data Source=" + serverName + ";Initial Catalog="+database+";User Id="+username+";Password="+password+";");
   var oRecordSet = oSqlConnection.Execute("SELECT CategoryID, CategoryName from Categories");
   var data = "";
   while (oRecordSet.eof == false)
   {
        data = data + oRecordSet(1) + "
";
        oRecordSet.moveNext();
    }
   oRecordSet.close();
   oSqlConnection.close();
   }
    document.getElementById("data").innerHTML = data;|
}

This code shows a simple way to to talk to SQL Server, run a query and then render the results to an HTML tag.

You can download this code from here

For you to run this code there are a few things you will need to do first.

Have a SQL Server available which has the Northwind database ( you can change the connection string and query )
Change the server variable to the server that is running SQL Server
Change the database if required
Chnage the username if required
Change the password

This is just an example and is really up to you how you may use it. I hope it helps with your gadget development.

A great colour wheel for those of us who must deal with colours and combinations of colours.

Chris Crowe — Wed, 04 Apr 2007 20:13:00 GMT

I came across a great tool for looking at colours and their complimentary colours, infact six types of compilimentary colours.

Place this HTML Color Code tool on your website free. | Professional Turnkey Websites

As you can see you can use the colour wheel live on this site, but you may also want to check out the site owners site at http://www.siteprocentral.com/html_color_code.html

This is a great tool and I hope people will find it usefull.

Windows Vista Gadgets

Chris Crowe — Sun, 01 Apr 2007 08:06:00 GMT

I have been playing aroung with Windows Vista Gagets lately and have currently written about 10. Some are for my work - simple things like who is on Helpdesk duty today, and another for our IS Severity system that will show up planned outages and unplanned outages, colour coded based on the rating of the problem. This is similar to an RSS feed except the data is always live and not cached so that when a job is closed it is removed from the list.

Another is the Weather Gadget for http://weather.cobbnz.com, a collegue at works owns the site and I have written the Web Site UI and a few tools. This has become quite popular in the last few days since it was uploaded to http://gallery.live.com

Another 5 are simple radio station gadgets for New Zealand radio stations News Talk ZB, Radio Pacific, MoreFM, ZM, and RDU.

The weather and the radio station gadgets are all available from live.com and clicking on my profile link will take you to a page where they all are.

My Gadgets
http://gallery.live.com/Author.aspx?a=290b49b8-95bc-49a1-b4fe-919b6ea4edd5&l=1

For those looking into writing your own gadgets see these resources

Tutorial on how to write a gadget from scratch
http://msdn.microsoft.com/library/default.asp?url=/library/en-us/sidebar/sidebar/overviews/gdo.asp
A number of code project articles all about gadgets
http://www.codeproject.com/gadgets/

Hint: If you want to see the source for any gadget, download it, and then rename from .gadget to .zip and you have all the source code.

Rounded Corners Demo

Chris Crowe — Fri, 26 May 2006 09:04:00 GMT

The following code will allow you to create rounded corners on your HTML pages.

The output from the following HTML is like this:

You can change the colour of the background by changing the background attribute of the .bg-rounded-container class - currently set to Orange.

For a live demo click here

<style type="text/css">
 
.bg-rounded-container {
 BACKGROUND:  orange; 
 WIDTH: 400px; 
 POSITION: relative; 
 HEIGHT: 50px
}
 
.bg-rounded-content {
 FONT-FAMILY: Tahoma, "Arial Narrow", sans-serif;
 font-weight: bold;
 font-size: 14pt;
 text-align: center;
 PADDING-RIGHT: 10px; 
 PADDING-LEFT: 10px; 
 PADDING-BOTTOM: 12px; 
 PADDING-TOP: 12px
}
.bg-rounded-top-left {
 FONT-SIZE: 0.1em; 
 BACKGROUND-IMAGE: url(/images/bg-rounded-corners.png); 
 WIDTH: 7px; 
 BACKGROUND-REPEAT: no-repeat; 
 HEIGHT: 7px
}
.bg-rounded-top-right {
 FONT-SIZE: 0.1em; 
 BACKGROUND-IMAGE: url(/images/bg-rounded-corners.png); 
 WIDTH: 7px; 
 BACKGROUND-REPEAT: no-repeat; 
 HEIGHT: 7px
}
.bg-rounded-bottom-right {
 FONT-SIZE: 0.1em; 
 BACKGROUND-IMAGE: url(/images/bg-rounded-corners.png); 
 WIDTH: 7px; 
 BACKGROUND-REPEAT: no-repeat; 
 HEIGHT: 7px
}
.bg-rounded-bottom-left {
 FONT-SIZE: 0.1em; 
 BACKGROUND-IMAGE: url(/images/bg-rounded-corners.png); 
 WIDTH: 7px; 
 BACKGROUND-REPEAT: no-repeat; 
 HEIGHT: 7px
}
.bg-rounded-top-left {
 BACKGROUND-POSITION: 0px 0px; 
 FLOAT: left
}
.bg-rounded-top-right {
 BACKGROUND-POSITION: 0px -7px; 
 FLOAT: right
}
.bg-rounded-bottom-right {
 BACKGROUND-POSITION: 0px -14px; 
 RIGHT: -1px; 
 BOTTOM: -1px; 
 POSITION: absolute
}
.bg-rounded-bottom-left {
 BACKGROUND-POSITION: 0px -21px; 
 LEFT: 0px; 
 BOTTOM: -1px; 
 POSITION: absolute
}
 
</style type="text/css">
</head>
<body>
<div class="bg-rounded-container">      
<div class="bg-rounded-top-left"></div>      
<div class="bg-rounded-top-right"></div>      
<div class="bg-rounded-content">Rounded Corners Demo</div>      
<div class="bg-rounded-bottom-left"></div>      
<div class="bg-rounded-bottom-right"></div>    
</div>

Microsoft Scripting Resources

Chris Crowe [IIS MVP] — Sun, 25 Sep 2005 22:59:00 GMT

I came across a number of cool scripting utilities today that may help others; these are:

Do-It-Yourself Script Center Kit
Scriptomatic 2.0
TechNet Script Center Sample Scripts
WMI Code Creator v1.0
HTA Helpomatic
TechNet Script Center Sample Scripts
Technet Script Center
ADSI Scriptomatic
Tweakomatic

Do-It-Yourself Script Center Kit

The Do-It-Yourself Script Center Kit includes all the materials you need to create your own version of the TechNet Script Center, either as stand-alone Web pages, stand-alone .vbs files, or as a .chm Help file. Included in the Kit are a database ( Microsoft Access ) of all the scripts found in the TechNet Script Center Script Repository as of January 2005, as well helper scripts for creating Web pages, .vbs files, and .chm files.

The Kit also includes instructions for using these helper scripts.

For more details see:
http://www.microsoft.com/downloads/details.aspx?displaylang=en&FamilyID=D187C9D7-FFA8-49CD-BB33-363DB8FA481E&sGuid=8c9e492e-9f9b-4f33-8bad-26c69ee9a42b&hash=P8DMHJ

Scriptomatic 2.0

A completely new version of the famous Scriptomatic, the utility that writes WMI scripts for you. (And, in the process, teaches you the fundamental concepts behind writing WMI scripts for yourself.) U

nlike its predecessor, Scriptomatic 2.0 isn’t limited to writing just VBScript scripts; instead, Scriptomatic 2.0 can write scripts in Perl, Python, or JScript as well.

In addition, Scriptomatic 2.0 gives you a host of new output formats to use when running scripts, including saving data as plain-text, as a stand-alone Web page, or even as XML.

Scriptomatic 2.0 handles arrays, it converts dates to a more readable format, and it works with all the WMI classes on your computer; on top of all that, it also writes scripts that can be run against multiple machines.

For more details see:
http://www.microsoft.com/downloads/details.aspx?familyid=09DFC342-648B-4119-B7EB-783B0F7D1178&displaylang=en

Incase you want the old 2002 version :
http://www.microsoft.com/downloads/details.aspx?familyid=9EF05CBD-C1C5-41E7-9DA8-212C414A7AB0&displaylang=en

TechNet Script Center Sample Scripts

Sample scripts found in the TechNet Script Center. The sample scripts are not supported under any Microsoft standard support program or service. You can, however, report issues and bugs by sending e-mail to scripter@microsoft.com.

For more details see:
http://www.microsoft.com/downloads/details.aspx?familyid=B4CB2678-DAFB-4E30-B2DA-B8814FE2DA5A&displaylang=en

HTA Helpomatic

The HTA Helpomatic is a utility that helps script writers create HTML Applications (HTAs). HTAs enable you to provide a graphical user interface for your scripts, an interface that can include anything from list boxes to radio buttons to checkboxes. The HTA Helpomatic includes sample VBScript code and sample HTML code showing you how to do things like add a button to an HTA. Equally important, the Helpomatic also shows you how you can run a script any time that button is clicked. As an added bonus, the Helpomatic enables you to modify the scripts and HTML code and test those modifications in the utility itself.

For more details see:
http://www.microsoft.com/downloads/details.aspx?familyid=231D8143-F21B-4707-B583-AE7B9152E6D9&displaylang=en

WMI Code Creator v1.0

The WMI Code Creator tool generates code that uses WMI to obtain management information or perform management tasks. You can use the tool to learn how to manage computers using WMI scripting and WMI .NET. The tool generates code that runs on the local computer, a remote computer, or a group of remote computers based on your selection from the Target Computer menu on the tool. You can also execute the generated code directly from the tool.

The tool is meant to help IT Professionals quickly create management scripts and to help developers learn WMI scripting and WMI .NET. The tool helps take the complexity out of writing code that uses WMI and helps developers and IT Professionals understand how powerful and useful WMI can be for managing computers.

Using the tool, you can query for management information such as the name and version of an operating system, how much free disk space is on a hard drive, or the state of a service. You can also use the tool to execute a method from a WMI class to perform a management task. For example, you can create code that executes the Create method of the Win32_Process class to create a new process such as Notepad or another executable. The tool also allows you to generate code to receive event notifications using WMI. For example, you can select to receive an event every time a process is started or stopped, or when a computer shuts down.

The tool also allows you to browse through the available WMI namespaces and classes on the local computer to find their descriptions, properties, methods, and qualifiers.

The code that creates the tool is also included in the download. The tool was created using WMI .NET, and the code for the tool can help developers understand how WMI .NET is used to create applications and manage information. Be sure to read the end-user license agreement that is included in the download.

For more details see:

http://www.microsoft.com/downloads/details.aspx?familyid=2CC30A64-EA15-4661-8DA4-55BBC145C30E&displaylang=e

Technet Script Center

The TechNet script center is a repositaty specially tailed for scripting, there are columns and verything you need to learn how to write scripts for Windows is right there!

Find articles, documentation, webcasts, and even hands-on labs for all levels, right at your fingertips.

For more details see:
http://www.microsoft.com/technet/scriptcenter/default.mspx

ADSI Scripomatic

The ADSI Scriptomatic is designed to help you write ADSI scripts; that is, scripts that can be used to manage Active Directory or IIS.

The ADSI Scriptomatic also teaches you an important point about ADSI scripting: like WMI, there are consistent patterns to ADSI scripts.

For example, the ADSI Scriptomatic will help you write a script to delete a user account. It will also help you write scripts for deleting groups and organizational units.

And if you take a close look at the scripts for deleting different objects, you’ll see something very interesting: theyre practical identical!

For more details see:
http://www.microsoft.com/technet/scriptcenter/tools/admatic.mspx

Tweakomatic

Tweakomatic is a nifty new utility that writes scripts that enable you to retrieve and/or configure Windows and Internet Explorer settings. So what, you might say. Well, think about it. Because these are Windows Management Instrumentation (WMI) scripts, they can be used to configure settings on remote computers. Need to change something on a remote computer? Then haul out Tweakomatic. And think about this: because Tweakomatic writes scripts, you could do something like run these scripts as logon or logoff scripts. In other words, you could quickly, easily, and automatically configure settings on any or all the computers in your organization. Tweakomatic is undoubtedly the single best thing Microsoft has released since Windows itself

For more details see:
http://www.microsoft.com/technet/scriptcenter/tools/twkmatic.mspx

Get ideas of keywords for your web sites

Chris Crowe [IIS MVP] — Thu, 22 Sep 2005 07:12:00 GMT

Get ideas for new keywords that can help you improve your relevance to queries that user submit to search engines

Google
https://adwords.google.com/select/KeywordSandbox

Example from Google

I used the following keywords:

Metabase, ADSI, Blog, iis, sharepoint, internet,information,services,ii5,iis6,Windows,Sharepoint

and got the following results ( Note: more results where returned that displayed below )

internet providers
internet service providers
internet access
windows
cable internet
information
internet
services
dial up internet
internet banking
internet roaming
blog
escort services
windows media player
windows xp upgrade
cable internet service
sash windows
internet services
dating services
dial up internet access
phone services
cleaning services
cheap internet service
international internet
nanny services
hosting services
internet radio
information security
windows server
windows 98 upgrade
windows 2000
mailing services
moving services
management information system
iis

Overture
http://inventory.overture.com/d/searchinventory/suggestion/

Example from Overture

I used the following key word:

IIS

and got the following results ( Note: more results where returned that displayed below )

Searches done in August 2005
Count	Search Term
6481	iis
1076	download iis
593	o2 xda iis
572	xda iis
553	read iis server log
460	microsoft iis
403	iis intranet
371	iis server
369	ti 30x iis
344	php iis
336	iis window xp
333	identix.com iis
331	iis web server

ASP.Net Server Control - Dynamic Lookup Edit Control with Popup Window

Chris Crowe [IIS MVP] — Sat, 27 Aug 2005 06:48:00 GMT

Welcome to my ASP.NET Server Control : LookupEditControl. This control uses a number of different technologies to do its magic.

Dynamic requests, DHTML, and JavaScript

There is a lot of talk these days about AJAX but not a lot of source in the edit control stage from what I have found. There is always the Google Suggest discussions but no real code.

I have written an ASP.Net server control (currently still in development) that does what I need and works quite well, but not 100% well, still more work to do.

Here are some of the features that I have implemented and currently basically work

ASP.Net Server Control
Multi Browser Compatible (IE 6, and Firefox 1.04, maybe others?)
Supports Multiple Columns in the popup window
Supports saving a value that is visible in the Columns just like a DropDownList
Supports updating values when you have tabbed off the control, this was for those times when you type too quick and the control is still doing its lookup.
Supports defining the width of the Popup Window
Supports CSS styles for the columns and the Popup Window
Supports Keyboard Up/Down
Supports Mouse Selection
Popup Window Displays over Select Tags with no bleeding

I really am looking for people to help me with this project as I need testers and people with ideas who may be better than me to help clean up the code.

If you want to see it in action browse to http://code.crowe.co.nz/LookupEditControl/

Please let me know what you think of this control as I have spent a lot of time and I am quite happy with it but there are issues yet to be fixed.

HTML - How to popup a DIV tag over a SELECT tag

Chris Crowe [IIS MVP] — Fri, 19 Aug 2005 01:46:00 GMT

The following code will allow you to popup a DIV tag so that even if the DIV tag is displayed over a SELECT tag the DIV will not show any of the select tag. The way it does this is by placing an IFRAME over the top of the DIV tag.

Examples in both IE and Mozzila below.

IE 6

Mozilla Firefox 1.04

The code also uses a free 3rd party Javascript library called Anchor Position by Matt Kruse - http://www.mattkruse.com/

This library allows you to get the location of an element on the page. It will return the XY coordinates of the element. It is used to handle the placement of the DIV tag in the example below.

I also use a blank.htm file for the src parameter of the IFRAME - you may be able to get rid of this by using a javascript function instead.

The following code works in both IE 6 and also Mozilla Firefox 1.04 - I have not tested on other browsers at this time.

For a live demo see http://blog.crowe.co.nz/attachments/DivTagDemo.htm

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>How to popup a DIV over a SELECT Tag</title>
</head>
<body bgcolor=#FFFFCC>

<script language="javascript" src="AnchorPosition.js"></script>
<!-- 
This is our DIV Tag that will popup over the current content, when we popup our div tag, we place 
an IFRAME over the top of the div tag. This is so we can hide the Select tag.
We then place a table after the IFRAME and force it to be positioned starting at the top left 
of our div tag.
-->
When you click the link below the popup will show over the top of the div
<div id="floatingdiv" style="position:absolute;display:none;left=30;top=20;width=300;height=150">
<iframe id="selectblocker" style="position:relative;" 
 frameBorder="0" scrolling="no" src="blank.htm"></iframe>
<table border=1 cellspacing=5 id="contents" style="position:absolute; background-color: #CCFF99">
<tr>
<td valign='top'>This is the actual contents that we want to display within the DIV tag area.</td>
</tr>
</table>
</div>

<form method="POST" action="">
<table border=1 cellspacing=2 cellpadding=2>
<tr><td>Enter your name</td><td><input type="text" name="name" id="name" size=10 style="width:200px">
</td></tr>
<tr><td>Please select your occupation</td><td><select size="1" name="D1" id="D1" style="width:200px">
 <option>Programmer</option>
 </select>
 </td></tr></table> 
</form>
<!-- move our hide and show links away from the div tag -->
<a href="Javascript:Show();">Show</a>  
<a href="Javascript:Hide();">Hide</a>




<script language="javascript">
function Show(){
var divTag = document.getElementById("floatingdiv");
var iFrameTag = document.getElementById("selectblocker");
var tableTag = document.getElementById("contents");
var AnchorPos = getAnchorPosition("name")
divTag.style.left=AnchorPos.x+20;
divTag.style.top=AnchorPos.y+22;
divTag.style.width=300;
divTag.style.height=150;
iFrameTag.style.left = 0;
iFrameTag.style.top = 0;
iFrameTag.style.width = divTag.style.width;
iFrameTag.style.height = divTag.style.height;
iFrameTag.style.zIndex = divTag.style.zIndex-1;

tableTag.style.left = 0;
tableTag.style.top = 0;
tableTag.style.width = divTag.style.width;
tableTag.style.height = divTag.style.height;
tableTag.style.zIndex = divTag.style.zIndex;
divTag.style.display = "block";
}
function Hide(){
var divTag = document.getElementById("floatingdiv");
divTag.style.display = "none";
}
</script>

</body>
</html>