I'm trying to write an application using JavaFX 2.0 that includes a web browser control that allows a user to navigate through the text and images on a HTML page using only the keyboard -- basically like "caret browsing" in Internet Explorer.
The goal is to be able to select bits of text or images and copy them to a variable for further manipulation without using a mouse.
I took a look at the HTMLEditor control here:
http://docs.oracle.com/javafx/2.0/ui_controls/editor.htm#CHDBEGDD
but I don't need any editing capability cluttering up the UI, and the documentation says:
The formatting toolbars are provided in the implementation of the
component. You cannot toggle their visibility.
WebView seems like a logical choice (http://docs.oracle.com/javafx/2.0/webview/jfxpub-webview.htm), but I'm not sure how to get a cursor onto the page.
Any advice would be appreciated.
The current WebView support for caret browsing seems patchy at best to me.
Here is what I found running a quick test:
I can invoke webView.requestFocus to have the WebView request focus for responding to key presses, but it just operates on the WebView as a whole, not individual components within the WebView.
WebView does not implement a selection management API similar to TextInputControl for fine grained programmatic management of selections.
WebView does allow you to select text. However, I had to initiate the selection with a mouse drag, and after that I could use a keyboard to enlarge or shorten the selection (left or right arrow keys for a character by character selection and ctrl + left or right arrow keys for word by word selection - up and down arrows did not affect the selection).
After selecting some text in WebView I could press Ctrl-C on it (in Windows) to copy it to a clipboard and paste the text into another program. Only raw text was copied - associated style/html info and images were not copied.
To copy images I had to right click on an image and select Copy Image from a drop down menu and I could paste the image into MS Paint - I could not find a way to do this without a mouse.
In other browsers I can press TAB and Shift + TAB to go from one hyperlink to the next - in WebView, once it has focus, TAB will just go from one control (e.g. an html text field in the WebView) to the next (e.g. an html button in the text field).
The backspace key works as in other browsers (takes you to the previous page).
The above restrictions, and likely others I didn't test for, will likely make it hard to accomplish what you are trying to do. You could try stuff such as capturing keypress events using an eventfilter, then generating mouse events to initiate the selection and copy process, but that sounds difficult to me, and even then, there is currently no public API in JavaFX to generate mouse events, only an unstable com.sun api.
WebView does expose a document object model, and the document is scriptable by JavaScript. Try capturing key events with an eventfilter, listening to the document property for changes and executing JavaScript against the WebView at appropriate times to get and set the current selection. This also seems a little tricky to implement well.
Accomplish as much as you can with the current WebView control and public API and log issues at http://javafx-jira.kenai.com as and when you encounter short-comings.
Related
In my application, we have various types of dropdown GWT components used. I am using the JAWS latest version for the accessibility.
JAWS have some default keyboard manager setting for the "Downarrow" which perform the respective function. In my application, when the dropdown is opened, on pressing the "downarrow" JAWS is reading the list of values in dropdown one by one along with the respective highlighted thing.
But on the "enter" keypress, the selection of that particular value is not happening.
When in turned-off the JAWS, the down arrow perform its respective function of moving to the next record and on Enter click, that particular value is selected in dropdown.
somewhere JAWS default settings is overridden by the application setting. I tried various attributes like "aria-labelledby", "role - combobox, menuitem". but no luck. Could somebody help on this?
By default, the up/down arrow keys when JAWS is running will move you to the next element in the DOM. If that element is an interactive component that uses the up/down key for interaction (such as a radio), then JAWS will automatically switch to "forms mode" (kind of like a mini application mode) so that the arrow keys can be interpreted by the compoent instead of the screen reader. (The user has options on whether automatic forms mode is turned on). To get out of forms mode, press Escape.
If you have your own custom component that behaves like a native component, as long as you have the proper ARIA roles and attributes (such as role="radiogroup" and role="radio"), JAWS should switch to forms mode automatically.
See https://www.freedomscientific.com/Support/TechnicalSupport/Bulletin/1665 for more details. The title of that article talks about role="applications" and role="document" but it talks about forms mode and the Enter key.
I am developing a small application with SWT Browser widget. I am highlighting a search text word with
<a id="xyz" href=''><mark>test</mark></a>
in a HTML document. and replace all the search words in HTML Text in this way so we get all the search words highlighted.
htmltext.replaceAll("(?i)"+Pattern.quote(searchword), "\\<a id='xyz' href=''> <mark>$0\\</mark></a>
I want to implement functionality that if I click on next button, next highlighted word should get focus and if I click on previous button previous highlighted text should get focus. how can I accomplish Next and Previous Hit using Javascript in Eclipse RCP application.
This is best solved by combining JavaScript with Java code. It depends what kind of HTML content are you going to handle, if it's stateful (e.g. cannot reload), dynamic with lot of JS code, or plain static. In most cases, the best solution would involve most of logic to be written in JS and just minimal code in Java to bind JS actions to SWT GUI.
There's several things you need to implement:
keyword searching
toggling highlighting
toggling highlight from one word to another
1. Search: you realise that you won't be able to search for words that span through many HTML elements, like W<span>o</span>rd? If that's ok then you can just search and replace from Java as you do now. I'd go for individually tagging each word match with id: <span id="match1"> and remembering how many matches in total were found.
You could likely do such search on JS side as well by adding a function that iterates through DOM and searches for specific text and wraps it with another DOM object.
2. Toggling highlighting: It's best done in JavaScript. Append to your HTML a JS code fragment that toggles DOM element style. Something like:
`
function highlight(id) {
document.getElementById(id).className = 'highlighted'
}
You'll be able to call this JS from SWT by invoking swtBrowser.execute("highlight('match1')")
Further you should implement function that takes off highlighting.
3. Toggling highlighting between elements:
This can be done both on Java side and on JS side. I would probably go with JS and add two more functions: highlightNext() and highlightPrev() that would just call highlight() function with proper ids.
Then in Java you could make SWT buttons that call JS functions through SWTBrowser.execute().
I am trying to create a dialog that has an xtype of "textfield"...I need to specify that anytime the user updates this field it will always overwrite the same JCR content node.
I am including this component/dialog in multiple pages, so that the author can edit the text. The issue is that the text will be updated for that page. (because I am using a relative path).
What I need to happen...The content is updated and written to a central location so that no matter which page the user edits this text it will always update to a central location.
A real world example:
We have modal dialogs that show throughout the site. Some of these dialogs are global. Out client has requested to have an edit option on any page that these dialogs show. The acceptance criteria is that they can edit on any page and that edit will be applied globally.
My problem is that I am not sure how to set the path that the text field will write to.
I am retrieving the content from here:
<cq:include path="/content/jjj/en/misc/deviceoutmodal/jcr:content/buttontext1" resourceType="zig/components/text"/>
How can I write to the same path?
I think this would be best achieved with design dialogs — you can set a property based on the component (or template), which will then get used by every instance of that component.
The editor can edit the property when in Design mode, (or through the Designer as far as I remember). Design dialogs are created like regular dialogs but named design_dialog.xml. The example use-case that Adobe lists is for a logo component:
The Logo component displays the logo of the website Geometrixx. The
logo image and the home link can be configured globally (same for
every page of the website) so that every instance of this component is
identical. Therefore a design dialog is needed to provide the image
and path of the home link to the design of the corresponding Page. The
Logo component is placed in the upper left corner of all pages on the
website.
I'm currently making a GWT project where I display some HTML in a RichTextArea, and I want the RichTextArea to be selectable/highlight-able by a mouse but NOT be editable/modifiable by the user. In addition to this question, could you also tell me how to retrieve some highlighted text in string from without me having to add a text-background toolbar, which, after highlighting a text from the RichTextArea, you change the color of the text-background, upon which, you add a separate periodically looping thread which checks to see when the text-background changes substantially from white (or a native color of the webpage) and finally extracting the string whose text-background color differs as the selected text.
I really hate to give any pointers without explanation but i think your requirements are bigger ::: so --->
http://examples.roughian.com/index.htm#Widgets~RichTextArea
http://www.java2s.com/Code/Java/GWT/RichTextArea.htm
I'm viewing HTML in an SWT Browser widget. I am appending logging messages to the end of the content and would like to keep the bottom visible all the time. Currently, whenever I append text to the content, I first set the new text:
browser.setText(content);
And then I scroll down the Browser widget via JavaScript:
browser.execute("window.scrollTo(0,100000);");
The problem with this is that when I set the text, the widget switches to the top again before scrolling down, so when I append lots of messages quickly, the browser widget is showing the top part most of the time, occasionally flickering when switching to the bottom. This makes it impossible to follow what is being logged at the bottom.
I am aware that I could use a tree viewer and get all the convenience of the Eclipse platform, but there is a Swing version of the app too and both should use the same HTML with CSS presentation.
Ideally I'd like to avoid embedding a Swing component, but if there is one that would allow this, I'd be happy to hear about it. I have tried it with a JEditorPane inside a JScrollPane, appending to the content via the editor kit's read method:
editorPane.getEditorKit().read(/*...*/);
And then scrolling down like this:
editorPane.setCaretPosition(editorPane.getDocument().getLength());
This works very smoothly for the standalone Swing app, but embedded in Eclipse it flickers and does not keep up with fast updates of the HTML content.
Right now the only way I can make this work smoothly inside Eclipse is prepending to the Browser widget's content instead of appending, but I'd really prefer adding new messages at the bottom, not at the top.
Rewriting the whole HTML content every time seems unnecessarily busy-work, and there may not be a way to prevent some browsers from scrolling to the top each time you redraw the entire page. Especially if you allow the logs you show to get very long, this will get slower and slower as the log gets longer.
A better solution might be to use JavaScript to append to the page. You're already using
browser.execute()
How about something like this (assuming "itemID" is the ID of the DIV containing the content):
String newContent = newContent.replaceAll("\n", "<br>").replaceAll("'", "\\\\'");
browser.execute("document.getElementById(\"itemID\").innerHTML += '"
newContent + "'");
You have to do the replaceAll() and you may need a couple more transformations, depending on your log content. I've noticed that browser.execute() doesn't like it if the script contains newlines, for example, and single quotes in your string needed to be quoted as I show above.
I would have just added this as a comment, but it wouldn't let me (not enough reputation). You can ship XUL in a nonstandard location on the mac, by setting a system property.
System.setProperty("org.eclipse.swt.browser.XULRunnerPath", "/fubar/xul/Versions/1.9.0.7/");