How would I go about checking whether the user is using an IME to input text? For instance, if you look at Google Docs, they seem to use some kind of intermediate IFrame to capture it before putting it in the actual document <div>s.
The W3C DOM Level 3 specifies the event compositionstart and friends for detecting IME input. For browsers that don't support those events, some hacking around is required.
The Closure library has an example for this: http://closure-library.googlecode.com/svn/docs/closure_goog_events_imehandler.js.source.html
Related
I am looking to use Blockly to allow non-techie users to specify test scripts.
One part of it will require a File Selector, however, I can't see that Blockly has one. Does it?
Actually, I can't find a complete list of standard blocks. Does anyone have a URL?
If there is no standard Blockly File Selector, (how) can I access the Windows File Selector? (and how, in general, can I execute DOS commands?)
As far as I know, I think that you cannot get a File Selector from Blockly but maybe this post is useful for you in which a man creates a custom Block for this purpose.
Also, I could not find a list with only the names of all the standard blocks but I saw that on the playground of Blockly you can see all the standard blocks that Google provides to you. If you want to see the code of all of them you can see it on Blockly GitHub.
I suppose that if Blockly does not have a File Selector it will not also has access to the Windows File Selector but maybe you can create a custom Block for that purpose via Javascript (I do not know what programming language are you using for). This link can help with Javascript Windows File Selector.
I expect it will be useful for you!
You can override the showEditor_ function on a blockly input - this works quite well with FieldTextInput. See https://youtu.be/eYHo0VeSLCI for an example of an 'intercepted' click opening a jquery mobile dialog, that then fills in the text value. The text value is then retrieved by the javascript generator to load the selected file at 'runtime'.
I've pasted below some cut down code:
Show a standard text input
let fileInput = new Blockly.FieldTextInput('** CHOOSE A FILE **')
Then you can attach a click handler which would show your file selector - so the standard browser file selector may do...
fileInput.showEditor_=(()=>alert("Intercepted"))
You'll need to replace the alert with your file selector code. Your code will also need to set the value of the text input - with something like this:
let block = Blockly.mainWorkspace.getBlockById(block_id)
block.setFieldValue(filename, widget_id)
Where widget_id identifies the text input and block_id the actual containing block.
While deep linking Windows UWP apps with cortana, I'm unable to fetch the text spoken. In the Voice Command Definition file I'm using a <ListenFor> element with {*} in order to allow user to speak anything, but I'm unable to fetch it.
If you're trying to set up a VCD to accept freeform dictated text, you'll need to use a PhraseTopic field. See the 1.2 VCD spec for details.
For example, if you've got a Command block containing
<ListenFor> Take a note to {noteTopic} </ListenFor>
You'd want a corresponding PhraseTopic
<PhraseTopic Label="noteTopic" Scenario="Dictation">
</PhraseTopic>
There's various options (Subjects and Scenarios) you can use to refine the dictation service's behavior.
You could also use Scenario="Search" and have you VCD look something like this:
<ListenFor> Take a note to {noteTopic} </ListenFor>
<PhraseTopic Label="noteTopic" Scenario="Search"/>
I want to active ime and input chinese.
How to trigger compositionStart, compositionUpdate,compositionEnd.
I use this.remote.type([]) method, but not trigger text input events.
Thanks.
The IME must be activated independently, just like on the real OS, before type commands will be processed through it. Unfortunately, the underlying WebDriver library used by Intern does not currently implement IME activation. Once it does, you will be able to activate and test IMEs with Intern.
It's very easy to add new methods to wd. There is a guide at the end of the README: https://github.com/admc/wd#adding-new-method--contributing
Once it is done just, open a pull request and that will go into the npm package pretty quickly. This is how most of the existing methods were added to wd.
I am a seasoned C# coder, but quite the JavaScript novice, and I am now trying to get a pure JavaScript component, the very competent Kendo UI DataSource, to talk nicely to my C# MVC3/4 controllers.* I would like to be able to examine certain JavaScript objects so I can fine tune my client side model mapping code, but the view of objects in the Chrome debugging console is a little cluttered and low level.
Is there a Chrome add-in I can use for visualising JavaScript objects while debugging script, and failing that, a nice object visualizer that I can use to output object visualizations as HTML. I can then toggle whether this is active, built a visual object graph for a debugging session, then switch the visualiser off again for normal operations in my client scripts.
** This question is a much broader and differently targetted one that shares only the same goal of my other question, How can I accept JSON requests from a Kendo UI data source in my MVC4 application? However, that question is more technology specific and covers the whole client-server roundtrip, where this one is specific to only visualising JavaScript objects on the client.
EDIT:
Based on suggestions below, console.log does provide adequate output for runtime inspection, but often the console is a busy place, and I would prefer to output a persistent visualization elsewhere, with all properties in the object expanded, but without the 'internals' e.g. __id and __proto, as seen in the image. I would just like to see models as an array of two objects, each with only Id and Name properties.
I find it more useful to send the object to the console than inspect it inside the debugger. It's less cluttered and you don't have to go searching through your code for a breakpoint. If you just do a console.log(object), then hit F12 and select the Console, your object will be sitting there ready to be inspected.
Edit
If you do a console.log on the models property, it will come out like this:
Or, if you prefer, you could use something like this to spit out the information without you having to click any arrows:
function logModels(models) {
for (o in models) for (p in models[o])
console.log(p +'\t' + models[o][p]);
}
Which looks like this:
You can also filter the console to only display Logs by clicking the appropriate button at the bottom of the bar.
I want to add text to body element but I don't know how. Which method will work on the body tag?
Sorry for my english and thanks for replies.
In Watir, you can manipulate a web page (DOM) using JS, just like that:
browser.execute_script("document.getElementById('pageContent').appendChild(document.createTextNode('Great Success!'));")
I assume that the point of the question is:
All users are not just interacting by just clicking buttons and links on the web app, some of them are doing nasty things like altering http requests to make your system do something that it is not supposed to do... or to just have some fun.
To mimic this behavior, you could write a ui-test that alters forms on the web page, so that for example, one could type in anything into any field instead of a limited dropdown.
To do that, ui test has to:
manipulate DOM to set form inputs free of limitations (replace select's with input's, etc.)
ui test has to know, which values to use, in many cases it's pointless to enter random values. Your webapp has to provide some good "unwanted" options.
Why would you want to modify the webpage in Watir? It's for automated testing, not DOM manipulation.
If you want to add something to the DOM element in javascript, you can do it like that:
var txt = document.createTextNode(" This text was added to the DIV.");
document.getElementById('myDiv').appendChild(txt);
Or use some DOM manipulation library, like jQuery.
If you have not worked your way though the watir tutorial, I would suggest you do so. It deals with things like filling in text fields etc.
Learn to use the developer tools for your browser, Firebug for Firefox, or the built in tools for IE and CHrome. They will let you look at things as you interact with the site.
If the element is not a normal HTML input field of some sort, then you are dealing with a custom control. Many exist and they are varied and there is no one set solution for dealing with them. Without knowing which control you are using, and being able ourselves to interact with a sample of it, or at least see the HTML, it is very very difficult to advise you, we basically have to just guess (which is often a waste of everyone's time)
Odds are if you have a place you can enter text, then it is some form of input control, it might not start out that way, you may need to click on some other element, to make the input area appear, but without a sample of HTML all we can do is guess.
If this is a commercial control, see if you can find a demo site that shows the control in action. Try googling things like class names for the elements and often you get lucky