../Basics/Html in the UIHome
Html in the UI
Since IE4 in Windows 95 Microsoft added a lot of HTML (the "programming" language used to make web pages) into its operating systems, which is rather cool because html is an easy and flexible language with a lot of possibilities (including scripts and flash). This page describes what you will need to do to use these possibilities (including how to launch applications from a web page):
UI parts that (could) use html pages are the windows (using the webview), the quicklaunch area in the taskbar, the desktop (using active desktop), the search panel in IE, the winamp minibrowser etc...

HTML is easy, if you're still new to it a great site to learn is the W3C school. Also, a good download even if it's not updated anymore is the HTMlib. Now let's move the interesting parts.
Wherever you want html in, the features you might include in your webpage are the same.

Beside having cool toolbars using bitmaps, text or icons you could include a clock (check the example below), some cool OnMouseOver effects, use Flash (check FlashKit to get you started), have a single click do multiple launches,a winamp control (check AmpBar), or mostly for the taskbar, a mediaplayer (from WebFX)...

Some user suggestions: Dave wrote a small stock ticker that gets stock info using PHP. Mario Estrada launches the start menu when clicking on a flash animation. And ishiez suggested a DHTML or JavaScript newsticker, a random link at startup or refresh with a PHP script, mailto: and AOL Instant Message links...You could also show the icq status of your friends by including the code provided in the ICQ Status Indicator (make sure you use something to refresh the page).

If you have something you'd like to share with us (idea or concrete stuff) just me (kmr) or post in the forums.

Examples are provided in each related page, but you can use them everywhere with litle modifications, especialy the quicklaunch ones.
Launching apps (1 - run: protocol)
The big piece... if you'd like to improve your customised webpage you will need the ability to start apps from a link or a script. If you tried to just write the path to an app in your links, you noticed a dialog pops up, but read on, there are better ways to run apps from webpages.

First of all, Daan Kets from blackbit.net had the great idea to create a "run:" protocol that gives the ability to run apps with a link like: <a href="run:x:\path\executable.exe">. You can download the file (Run Protocol handler) at blackbit. Updated with an installer, very nice. [If 404, get it at Customize.org.]

Check the readme for all the info.
  • Concerning the lauching of apps using active desktop: use <a target="_self" href="run:x:\path\executable.exe"> (notice the target="_self") to launch your apps from active desktop, or a blank Internet Explorer window will appear.

  • You could only have to type the app name (like regedit) if it is registered in HKLM\Software\Microsoft\Windows\CurrentVersion\App Paths\, where each key is the short name and the default value is the full path, more info at the shortcutting page.

  • The application supposes the launched app argument is after a question mark, so if you want to launch an url that contains a question mark (like a .php file) add "iexplore.exe?" before the url to make everything after the first quotation mark be considered as the argument.

  • If you would like to use scripts (onClick...) change the url by scripting using window.location.href="run:x:\path\executable.exe"; or if this doesn't work (?) with a double url change: window.location.href="javascript:window.navigate(\"run:"+appName+"\")"; In this case don't forget to double the backslashes if you use them. You can download a zipped .js file containing a small Open() function that does this here.

  • When trying to open special folder, like my computer, as described at the shortcutting synthax page, remember to use the question mark to separate explorer.exe from its argument. explorer /root,,::{xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx} should be: explorer.exe?/root,,::{xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx}
Launching apps (2 - WSH)
There is another way though: using a WSH (Windows script host) object in your scripts: "WScript.Shell". When created you can use its Run method to launch apps. For info on this method check the MSDNlib.
You can download some zipped .js and .vbs files containing variations of functions using this method.

You should quote the file's path (using &quot; or &#34; instead of " as it is a special character) to use normal file names (not ms-dos 8.3). Once again you will have to experiment on what works for you in the path syntax (backslashes, double backslashes or forward slashes and using or not using quotes), but keep in mind you're dealing with something similar to the run command or a shortcut. A tip (thanks Takeru): if you don't succeed in making a good path that does what you want, create a normal shortcut and link to it.
Using Vb rather than java will let you manipulate things in the windows directory.

This script uses ActiveX so it will ask for confirmation before being able to be used, check the ActiveX box for more info.
Launching apps (3 - window.showhelp method)
Another way, proposed by David Spivey from MyWeb is by using the window.showhelp function provided by windows on a special .hlp file (provided here); synthax is:
var runonce; window.showHelp('runner.chm');
function runapp(app){
	if (app==null) return;
Then use the runapp() function to launch apps. Here are some examples he provided for html in the quicklaunch. The first is Qlaunch, which is modeled after select bar, but also includes enhancements, such as a right-click menu and positioning and skinning for windows XP. The second is quickmedia, another media player for the quicklaunch. This also supports skinning for 98 to XP and a right click menu.
Recreate the taskswitch
Replace the taskswitch area of your taskbar with a html version, thus having access to all formatting/display options provided by html and css.

Task switch HTML is a COM object created by grigri that gets the task items in use. This is, as plastic says it, revolutionary. As long as you know how to make webpages anything is possible. There is no need for a taskbar anymore, anything can be recreated. Its only major flaw (besides some security issues) is it doesn't get the icon associated with a task.

Get it at a temporary page (has an example in it).

An HTML in the taskbar example by kmr can be found at the taskbar page.
More options
Check the Shortcutting syntax page for more things to link. You can even create some .bat files to have some more control.

Winamp control: this plugin for winamp, or even better the WinampCOM plugin can help you control winamp from a webpage. Use them to create the most configurable winamp control (ex: AmpBar for the taskbar).
ActiveX objects (including Windows Script Host)
You can also do alot of things by creating/calling ActiveX objects in web pages, to manipulate excel sheets, text files etc.. or along with another technology called W.S.H. (Windows Script Host). You can create some of the objects using this synthax:
<script type="text/vbscript">
Set objectName = CreateObject( "Object" )
<script type="text/javascript">
var objectName = new ActiveXObject("Object");
In particular, the "Scripting.FileSystemObject" object allows to access file properties. More info found at the MSDNLib. Check also the MS Office Applications Objects, to manipulate Office applications, for example "Excel.Applications" for Excel.

To use WSH (to run apps for example), replace Object by "WScript." plus any of these, especially the last ones (".Shell", ".Network"...). There is also the WSH reference at the MSDNlib.

ActiveX will ask for confirmation before being able to be used, but that's only the first time so it's not that bad. Same deal if you have an antivirus running. If you would like to remove it anyway change the dword value 1201 to 0 in HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Internet Settings\Zones\0. Note that this will make you vulnerable to unsigned scripts, so I don't recommend it. You can also change the icon on this dialog, check here.

Check the Shortcutting syntax page for more info about WSH/ActiveX.

xhtml 1.1