Flex key combination listening function implementation

Source: Internet
Author: User

Recently, I was using Flex as a drawing software and needed to copy, paste, and delete images. Generally, users are used to using Ctrl + C/Ctrl + V to copy and paste images, the delete key is used to delete the table. The delete function is easy to use. You can simply listen to the press event on the keyboard of the stage. However, listening to Ctrl + C/V becomes a problem for flex, because of the Flex listening mechanism, once the ctrl key is pressed, the event cannot be listened to by other keys, that is, after pressing Ctrl, flex cannot detect other keys. To implement the CTRL + C/V key combination, you can only listen through Js.

This involves two issues:

1. Communication between flex and Js.

2.html page focus. Because JS cannot listen to any events when the focus is on SWF, when we need to listen for copy/paste events, we need to set the page focus to window.

The Code is as follows:

Flex code (Class Name keyboardmanager. ):

The stage parameter of the initialize () function is the stage of applicatoin. This function is called during keyboradmanager. As class initialization.

Externalinterface. addcallback ("name", func); the statement means that when JavaScript uses the applicatoin. Name statement, the flex end calls the function func. To put it simply, register a callback function func for Js.

Private var keysdown: Object = new object (); // queue public function initialize (stage: stage): void {externalinterface. addcallback ("keydown", onkeydown); externalinterface. addcallback ("keyup", onkeyup); stage. addeventlistener (keyboardevent. key_down, swfkeydown);} public function onkeydown (keycode: uint): void {keysdown [keycode] = true; checkkeyrole (keycode);} public function onkeyup (keycode: Ui NT): void {If (keycode in keysdown) {Delete keysdown [keycode] ;}} public function swfkeydown (E: keyboardevent): void {var focus: Object = mx. core. application. application. focusmanager. getfocus (); If (E. keycode = keyboard. control) {// when the focus is in the input box, the user may need to copy/paste the text, so the request for obtaining the focus is not sent to Js. When JS gets the focus, it intercepts keyboard input to invalidate the copy and paste function of windows. If (! (Focus is textinput) {externalinterface. call ("setfocus");} onkeydown (E. keycode);} else if (E. keycode = keyboard. delete) {onkeydown (E. keycode) ;}}/*** check whether the pressed key has the shortcut key function */private function checkkeyrole (keycode: uint): void {Switch (keycode) {Case keyboard. c: If (isdown (Keyboard. control) {// todo: copy the image} break; Case keyboard. v: If (isdown (Keyboard. control) {// todo: pasted graph} break; Case keyboard. delete: // todo: Delete the graph break;}/** determines whether a key has been pressed */Public Function isdown (keycode: uint ): boolean {return Boolean (keycode in keysdown );}

JS Code:

Document. onkeydown = func, that is, adding a keyboard listening event to the HTML page

$ {Application}. Name (ARG): Call the callback function registered by the flex client.,$ {Application} is the name of the SWF compiled by Flex.

document.onkeydown = onKeyDown;document.onkeyup = onKeyUp;            function onKeyDown(){var code = window.event.keyCode;${application}.keyDown(code);}function onKeyUp(){var code = window.event.keyCode;${application}.keyUp(code);}function setFocus(){window.focus();}

Let's start with the swfkeydown function and follow up the idea of key combination listening.

1. When a user has a keyboard action, it is first captured by the swfkeydown function (because the page focus must be on SWF at this time ).

2.swf keydown detects the keyboard event and determines which key is pressed. If it is the delete key, you do not need to use js to listen to the combination key and directly call the onkeydown function for corresponding processing.

3. If you press the ctrl key to determine the focus of the SWF system at this time, if the focus is on the textinput component, you must copy the text without processing it. When the system focus is not on the textinput component and the user presses the ctrl key, he must copy the image. At this time, we call the JS function setfoces () to set the focus back to the HTML page, at this time, the JS keyboard listening takes effect.

4.swf keydown function calls the onkeydown function. swfkeydown puts the ctrl key into the key queue keysdown.

5. When the user presses the C/V key again, It is captured by the onkeydown function of JS, and then calls the onkeydown function of the Flex end.

6. onkeydown calls the checkkeyrole function with the keycode Parameter

7. checkkeyrole: Based on the keycode, judge whether the user presses the key C/V at this time, and then call iskeydown () to determine whether the ctrl key is pressed.

8. If iskeydown returns true, copy/paste the image. If iskeydown returns false, no operation is performed.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.