Section 2 of 4 (chromeless window mouse drag / move)
Covered in this blog series: window drag, window minimize, launching Window’s default browser and using JavaScript and VBScript in the same document.
Various pieces of following information contain code and material discovered to work across all current versions of Windows as of February 2010. While some snippets are pseudo hacks and function properly as described, there isn’t any documentation from Microsoft about future support.
In 2009 I delved deep into the uncharted territory of chromeless HTAs, pushing it’s application powers to the limit. In the beginning stages of design I noticed that there were a few items of functionality unavailable to the HTA. The first one I noticed was the inability to window drag a chromeless HTA. Surely I had to be mistaken. Nonetheless, anyone running into the ‘access denied’ error while attempting to write a drag function knows full well where I’m coming from. After a little investigation it’s not hard to find that for security purposes, Microsoft has disabled such functionality. After further investigation, I noticed that the Internet’s popular HTA apps didn’t have the traditional mousedown / drag / release feature in their windows. Instead, they all had awkward work-arounds. Better yet, I couldn’t find a single instance of a chromeless HTA with a MINIMIZE button, nor access to the platform’s default browser. While I initially assumed this to be the an error, I declined to believe it until I could prove it.
After countless hours of research and testing, I verified what I had previously refused to believe. Still desirous of harnessing the power of the HTA, I decided to spend some quality time on real, viable solutions to these issues.
As any decent developer worth his salt knows, the best solution is always the simplest one. Complex work-arounds rarely function smoothly in the end. Below is the smooth and correct way to implement these functionalities into your HTA.
.HTA Chromeless Window Mouse Drag / Move Instructions
Download >>> example, documentation and instructions
[http://quio.me/_devbin/window_drag.zip]
[Note: download the above file to follow along with the instructions below]
With most all of the DOMs ‘drag’ functionality disabled in the HTA, it’s impossible to write a script to move the window in the HTA’s document flow. While there are a host of goofy and inane fixes that do nothing more than confuse the user, the solution I’ve crafted is rock-solid and ubiquitously supported.
The crux of the fix is to embed a modeless dialog in a separate HTA contained as a child within the primary HTA at the top of your chromesless window where the title bar would be. *Fhew* Then, with a mouse move event (an up and down event to capture and release also) track the movement of the modeless dialog and move the parent HTA window respectively. It sounds a bit difficult on the surface. However, the example is very straight forward.
(note: For sanity’s sake, I’ve labeled all objects and elements associated with the “title bar”, prefixed with either “tb" or "title” after the letter "q" for Quio.)
In the example download “window_drag” folder, all of the associated files for the example are contained in the root folder. For reference, there is a mirror of each file with the extension ".bak" The additional files in the “bin/” directory are simply for display and design purposes.
The Example Code:
1. In the “index.hta” file you’ll notice an embedded JavaScript tag referenceing “qtb.js” (abbr. for Quio Title Bar):
<script type="text/javascript" src="qtb.js"></script>
Here in the "qtb.js" file you will set the second embeded child HTA ("titlebar.hta" in this example)
In the "qtb.js" file you’ll also be setting the TOP, LEFT, HEIGHT and WIDTH of the modeless dialog which is placed on top of all other layer elements in the HTA.
2. In the “titlebar.hta” file you’ll be setting the “qtba.js” file which holds the mouse down, up and move events. The “titlebar.hta” file is also where the element is set for the mouse capture events and design control.
Note the “app_tb.css” file where the design elements and real estate dimensions are reiterated (match the settings in “qtb.js”)
That's all there is to it.
Recap:
While seemingly complex to configure on the surface, all of the programmatic coding and object/element placement within the DOM sit static in these example files and doesn't require any fundamental programming know-how.
File List and Function:
index.hta - Your main HTA file. This file sets-up “qtb.js”
qtb.js - This file sets up “titlebar.hta” as a modeless dialog. Also, dimensional settings for the title bar are set here.
titlebar.hta - This file sets up “qtba.js” and hold the title bar element which captures the mousedown event to trigger mousemove functionality.
qtba.js - This file is the foundation of the mouse events used for capturing, releasing and following the mouse cursor. I left a statement at the bottom of this file for those who have multiple window dialogs in their application to use.
app_tb.css - This file sets the design elements of the title bar. Utilizing background images, Microsoft filters and transitions (hey, its’ an HTA… why not take advantage), devising a design scheme to match your program’s interface seamlessly is unproblematic.
*** For minimizing HTA apps, reference the previous article at http://quiome.blogspot.com
*** Tomorrow’s article will cover accessing Windows default browser.
While the code for this application functionality is relatively small in scale, it entails several weeks of investigation,trial and error and know-how to program. If this helps you, your staff, or others complete a project, please feel free to donate to the cause. I'm also available for hire for micro projects and debugging. Please feel free to drop me a line for current availability and pricing [customapps@quio.me]
Covered in this blog series: window drag, window minimize, launching Window’s default browser and using JavaScript and VBScript in the same document.
Various pieces of following information contain code and material discovered to work across all current versions of Windows as of February 2010. While some snippets are pseudo hacks and function properly as described, there isn’t any documentation from Microsoft about future support.
In 2009 I delved deep into the uncharted territory of chromeless HTAs, pushing it’s application powers to the limit. In the beginning stages of design I noticed that there were a few items of functionality unavailable to the HTA. The first one I noticed was the inability to window drag a chromeless HTA. Surely I had to be mistaken. Nonetheless, anyone running into the ‘access denied’ error while attempting to write a drag function knows full well where I’m coming from. After a little investigation it’s not hard to find that for security purposes, Microsoft has disabled such functionality. After further investigation, I noticed that the Internet’s popular HTA apps didn’t have the traditional mousedown / drag / release feature in their windows. Instead, they all had awkward work-arounds. Better yet, I couldn’t find a single instance of a chromeless HTA with a MINIMIZE button, nor access to the platform’s default browser. While I initially assumed this to be the an error, I declined to believe it until I could prove it.
After countless hours of research and testing, I verified what I had previously refused to believe. Still desirous of harnessing the power of the HTA, I decided to spend some quality time on real, viable solutions to these issues.
As any decent developer worth his salt knows, the best solution is always the simplest one. Complex work-arounds rarely function smoothly in the end. Below is the smooth and correct way to implement these functionalities into your HTA.
.HTA Chromeless Window Mouse Drag / Move Instructions
Download >>> example, documentation and instructions
[http://quio.me/_devbin/window_drag.zip]
[Note: download the above file to follow along with the instructions below]
With most all of the DOMs ‘drag’ functionality disabled in the HTA, it’s impossible to write a script to move the window in the HTA’s document flow. While there are a host of goofy and inane fixes that do nothing more than confuse the user, the solution I’ve crafted is rock-solid and ubiquitously supported.
The crux of the fix is to embed a modeless dialog in a separate HTA contained as a child within the primary HTA at the top of your chromesless window where the title bar would be. *Fhew* Then, with a mouse move event (an up and down event to capture and release also) track the movement of the modeless dialog and move the parent HTA window respectively. It sounds a bit difficult on the surface. However, the example is very straight forward.
(note: For sanity’s sake, I’ve labeled all objects and elements associated with the “title bar”, prefixed with either “tb" or "title” after the letter "q" for Quio.)
In the example download “window_drag” folder, all of the associated files for the example are contained in the root folder. For reference, there is a mirror of each file with the extension ".bak" The additional files in the “bin/” directory are simply for display and design purposes.
The Example Code:
1. In the “index.hta” file you’ll notice an embedded JavaScript tag referenceing “qtb.js” (abbr. for Quio Title Bar):
Here in the "qtb.js" file you will set the second embeded child HTA ("titlebar.hta" in this example)
In the "qtb.js" file you’ll also be setting the TOP, LEFT, HEIGHT and WIDTH of the modeless dialog which is placed on top of all other layer elements in the HTA.
2. In the “titlebar.hta” file you’ll be setting the “qtba.js” file which holds the mouse down, up and move events. The “titlebar.hta” file is also where the element is set for the mouse capture events and design control.
Note the “app_tb.css” file where the design elements and real estate dimensions are reiterated (match the settings in “qtb.js”)
That's all there is to it.
Recap:
While seemingly complex to configure on the surface, all of the programmatic coding and object/element placement within the DOM sit static in these example files and doesn't require any fundamental programming know-how.
File List and Function:
index.hta - Your main HTA file. This file sets-up “qtb.js”
qtb.js - This file sets up “titlebar.hta” as a modeless dialog. Also, dimensional settings for the title bar are set here.
titlebar.hta - This file sets up “qtba.js” and hold the title bar element which captures the mousedown event to trigger mousemove functionality.
qtba.js - This file is the foundation of the mouse events used for capturing, releasing and following the mouse cursor. I left a statement at the bottom of this file for those who have multiple window dialogs in their application to use.
app_tb.css - This file sets the design elements of the title bar. Utilizing background images, Microsoft filters and transitions (hey, its’ an HTA… why not take advantage), devising a design scheme to match your program’s interface seamlessly is unproblematic.
*** For minimizing HTA apps, reference the previous article at http://quiome.blogspot.com
*** Tomorrow’s article will cover accessing Windows default browser.
While the code for this application functionality is relatively small in scale, it entails several weeks of investigation,trial and error and know-how to program. If this helps you, your staff, or others complete a project, please feel free to donate to the cause. I'm also available for hire for micro projects and debugging. Please feel free to drop me a line for current availability and pricing [customapps@quio.me]
No comments:
Post a Comment