How to assign/use keyboard shortcuts in Aware IM apps

Contains tips for configurators working with Aware IM
Post Reply
hpl123
Posts: 2579
Joined: Fri Feb 01, 2013 1:13 pm
Location: Scandinavia

How to assign/use keyboard shortcuts in Aware IM apps

Post by hpl123 »

Hi all,
Here is a tip on how to assign and use keyboard shortcuts in Aware IM applications. This is a Jquery plugin so unfortunately not native extjs which would be better (support?) but nevertheless it works really well. I am currently just playing around with this so haven´t worked out the full solution etc. yet but I have gotten to the point of having the steps to create keyboard shortcuts which runs Aware IM commands , processes etc. when pressed. The shortcuts works throughout applications i.e. even if different tabs of forms etc. are open, the shortcuts works. Another cool thing with this plugin is that it shows a nice small notification window telling the user which keyboard combination they have pressed (and this can probably be changed so we can tell the user which application specific command is executed). The plugin is a paid Codecanyon plugin so you have to pay to use it.

If anyone start using this plugin and further develops it etc. please share your findings and also if you use it, please post comments about any problems you experience, reliability etc.. I intend to use it but not for some time.

PS: In the instructions below the Aware IM userDetails command is executed and you can easily change this to run process etc..

Source:
http://codecanyon.net/item/assign-jquery/157596

Demo:
http://www.designcise.com/product/assig ... index.html

Instructions:
In startup.html (or possible your header html (better for usage in multiple applications)) add the following in the head tag (and you have to use the correct path for these files once you have extracted them etc..):

<link rel="stylesheet" type="text/css" href="css/example.css" />
<script type="text/javascript" src="js/jquery-1.8.js"></script>
<script type="text/javascript" src="js/jquery.assign-min.js"></script>

Code: Select all

<script type="text/javascript">
    	jQuery(document).ready(function($) {
			// message box
			$('<div id="msgBox"/>').appendTo($('body')).css({display: 'block', opacity: 0});

			var timer = null;

			// Key Press Event
			$('body, #example-4 textarea').on('assign.keyPress', function(e, key, method) {
				window.clearTimeout(timer);

				// display shortcut in message box
				$('#msgBox').stop(true, true).html('<h6>Pressed</h6>"' + key + '" ' + method).css('opacity', 0.65);
			});

			// Key Release Event
			$('body, #example-4 textarea').on('assign.keyRelease', function(e, key, method) {
				window.clearTimeout(timer);

				// display shortcut in message box
				$('#msgBox').stop(true, true).html('<h6>Released</h6>"' + key + '" ' + method).css('opacity', 0.65);

				// fade out after a couple of secs
				timer = setTimeout(function() {
					$('#msgBox').stop(true, true).animate({opacity: 0}, 'slow');
				}, 1000);
			});

			// Start process (key:"h")
			$('body').assign(['h'], function() {
				javascript: AwareApp.userDetails('new_tab');
			});

		});
</script>
NB: When I added the code above to startup.html in a new <script> code section, it didn´t work. I had to place it inside the existing <script> code section so there was only 1 <script> code section (see below for full code):

Code: Select all

<script type="text/javascript">
	Ext.onReady(function(){

		// find the DIV with XML node
		var div = Ext.get ('main_screen');
		if (div == null)
			return;

		var xmlText = "";
		for (var i = 0; i < div.dom.childNodes.length; ++ i)
		{
			xmlText += div.dom.childNodes [i].nodeValue;
		}
		var xmlDoc = parseXMLDocument (Ext.String.trim (xmlText));
		if (xmlDoc == null)
		{
			alert ('Unable to parse XML');
			return;
		}
		if (xmlDoc.parseError && xmlDoc.parseError.reason && xmlDoc.parseError.reason != '')
		{
			alert ('XML parsing error ' + xmlDoc.parseError.reason + ' on line ' + xmlDoc.parseError.line + ' ' + xmlDoc.parseError.srcText);
			return;
		}

		var startupMsg = Ext.get ('bas_startup_msg');
		if (startupMsg)
			startupMsg.remove ();

		AwareApp.start (xmlDoc);
	});
    	jQuery(document).ready(function($) {
			// message box
			$('<div id="msgBox"/>').appendTo($('body')).css({display: 'block', opacity: 0});

			var timer = null;

			// Key Press Event
			$('body, #example-4 textarea').on('assign.keyPress', function(e, key, method) {
				window.clearTimeout(timer);

				// display shortcut in message box
				$('#msgBox').stop(true, true).html('<h6>Pressed</h6>"' + key + '" ' + method).css('opacity', 0.65);
			});

			// Key Release Event
			$('body, #example-4 textarea').on('assign.keyRelease', function(e, key, method) {
				window.clearTimeout(timer);

				// display shortcut in message box
				$('#msgBox').stop(true, true).html('<h6>Released</h6>"' + key + '" ' + method).css('opacity', 0.65);

				// fade out after a couple of secs
				timer = setTimeout(function() {
					$('#msgBox').stop(true, true).animate({opacity: 0}, 'slow');
				}, 1000);
			});

			// Start process (key:"h")
			$('body').assign(['h'], function() {
				javascript: AwareApp.userDetails('new_tab');
			});

		});
</script>
Henrik (V8 Developer Ed. - Windows)
hpl123
Posts: 2579
Joined: Fri Feb 01, 2013 1:13 pm
Location: Scandinavia

Re: How to assign/use keyboard shortcuts in Aware IM apps

Post by hpl123 »

hpl123 wrote: In startup.html (or possible your header html (better for usage in multiple applications))
It doesn´t work to place the links resources and script in a header html (to use this with multiple applications) but what you can do instead is this:

1. Place the resource links (to js and css files) in startup .html.
2. Place the actual code (without <script> tags) in an advanced script (initialization) in your app. I tested it now with the new "Advanced" option in a VP (button under "Other" in "Selected panel" panel and I added it to the "Banner" frame) and that works and this might work when placed in other "Advanced" script options elsewhere in your application.
Henrik (V8 Developer Ed. - Windows)
hpl123
Posts: 2579
Joined: Fri Feb 01, 2013 1:13 pm
Location: Scandinavia

Re: How to assign/use keyboard shortcuts in Aware IM apps

Post by hpl123 »

Here is the custom message solution I wrote about in the original post i.e. have a custom message telling the user which command they have executed is shown. Use this code instead of the code posted at first.

Jquery

Code: Select all

jQuery(document).ready(function($) {
            // message box
			$('<div id="msgBox"/>').appendTo($('body')).css({display: 'block', opacity: 0});

			// Start process (key:"h")
			$('body').assign(['h'], function() {
			  $('#msgBox').html('<p>Command<br/>New User</p>').css({display: 'block', opacity: 1});
              setTimeout(function() {$('#msgBox').html('').hide();}, 1000);
              javascript: AwareApp.userDetails('new_tab');
			});

        // Start process (key:"p")
			$('body').assign(['p'], function() {
			  $('#msgBox').html('<p>Command<br/>Open User Details</p>').css({display: 'block', opacity: 1});
              setTimeout(function() {$('#msgBox').html('').hide();}, 1000);
              javascript: AwareApp.userDetails('new_tab');
			});

		});
CSS

Code: Select all

#msgBox {
    display: none;
    width: 30px;
    height: 30px;

    border-radius: 5px;
    border: 5px solid #666;

    position: fixed;
    bottom: 10px;
    right: 10px;
}
Henrik (V8 Developer Ed. - Windows)
Post Reply