I'm trying to implement a kind of "guided typing" widget for data entry, in which the user's text entry is highly controlled and filtered. When the user types a particular character I need to intercept and filter it before displaying it in the widget. Imagine if
you will, a Unix shell embedded as a webapp; that's the kind of thing I'm trying to implement. I've tried two approaches.
In the first, I extend a TextArea, and add a KeyPressHandler to filter the characters. This works, but the browser-provided spelling correction is totally inappropriate, and I don't see how to turn it off. I've tried:
DOM.setElementProperty(textArea.getElement(),
"spellcheck", "false");
But that seems to have no effect- I still get the red underlines over
"typos".
In the second approach I use a FocusWidget to get KeyPress events, and a separate Label or HTML widget to present the filtered characters back to the user. This avoids the spelling correction issue, but since the FocusWidget is not a TextArea, the browser tends to intercept certain typed characters for internal use; e.g. FireFox will use the "/" character to begin a "Quick Find" on the page, and hitting Backspace will load the previous web page.
Is there a better way to accomplish what I'm trying to do?
You might just be able to use event.preventDefault() on your keypress events to avoid these browser behaviors. Otherwise, maybe a hybrid of the two approaches? Have a hidden TextArea with focus, accepting key events, and then post the typed characters to a separate Label.
There is no specific GWT method on TextBox for this, but this simple line of
GWT code fixes the problem for Chrome (for other browsers, YMMV - it may depend upon how completely they implement HTML5) by setting an attribute on the underlying input element:
myTextBox.getElement().setAttribute("spellCheck", "false");
Perhaps this attribute is a relatively new feature.
Related
I have both a speech and text Prompt in a Scene and in the Scene that is transitioned to. The separate speech prompts are spoken with just a brief break between them. The text prompts are displayed as sentences in the same paragraph. Ideally, I would like a pause between the speech prompts, and a new paragraph between the text prompts.
How might I do this?
Scenes represent logical separations - not necessarily discrete UX elements. Each scene can put one or more prompts into the prompt queues (there are multiple queues - more on that in a moment). They're taking out of each queue in the order they were put in, unless you clear the queue before you add another item. However - the system treats all of the prompts in the queue as building towards a single reply. So there is no automatic way to visually or audibly separate them.
However, there are a couple of tricks you can use, with caveats.
Audibly, you can add a brief pause using the SSML break tag. So you might set your On Entry "speech" prompt response to something like:
<break time="250ms"/> Welcome to another scene.
However, splitting the response visually is more difficult. There is no formatting allowed in the text response. There are a couple of tricks you may be able to try, however, but they're not guaranteed to work on all visual displays.
The easiest might be to send the first part of your response as a firstSimple prompt, and the second part in a lastSimple prompt. Typically you'd use the first to give results from what the user might have just done, and the last to prompt them for further action, but they may be rendered as separate "bubbles" on some platforms.
You could also consider a rich response card. You an format the contents of the card a little, but you can't use two separate scenes to fill the contents of a single card. On some platforms, you can only show one card.
I want to use an editor to display a log from a program, I just need a very basic text field:
With a vertical scrollbar
With a contextual menu for copy/paste
Prevent the user from changing the text
In order to activate the copy/paste menu, I use the class racket:text% from framework rather than the basic one.
How to prevent the user from changing the text?
I read the documentation, as far as I understand the closest thing I found is lock method:
https://docs.racket-lang.org/gui/editor___.html?q=lock#%28meth._%28%28%28lib._mred%2Fmain..rkt%29._editor~3c~25~3e%29._lock%29%29
But it is not convenient, as it also prevent my program to write the data.
I also find get-read-write? but cannot find set-read-write.
Use the lock method, and just unlock the editor around any modifications that you want to do. You may find it useful to write a call-with-unlock helper function or with-unlock macro.
If you do your updates from the eventspace's handler thread (and you probably should; use queue-callback if they originate from another thread), then as long as you re-lock the editor at the end of an update, the user will never be able to interact with the unlocked editor.
GWT's Editor framework is really handy and it can not only be used for editing POJOs but also for read-only display.
However I am not entirely sure what the best practice is for doing inline edits.
Let's assume I have a PersonProxy and I have one Presenter-View pair for displaying and editing the PersonProxy. This Presenter-View should by default display the PersonProxy in read-only mode and if the user presses on a edit button it should allow the user to edit the PersonProxy object.
The solution I came up with was to create two Editors (PersonEditEditor and PersonDisplayEditor) that both added via UiBinder to the View. The PersonEditEditor contains
ValueBoxEditorDecorators and the PersonDisplayEditor contains normal Labels.
Initially I display the PersonDisplayEditor and hide PersonEditEditor.
In the View I create two RequestFactoryEditorDriver for each Editor and make it accessable from the Presenter via the View interface. I also define a setState() method in the View interface.
When the Presenter is displayed for the first time I call PersonDisplayDriver.display() and setState(DISPLAYING).
When the user clicks on the Edit button I call PersonEditDriver.edit() and setState(EDITING) from my Presenter.
setState(EDITING) will hide the PersonDisplayEditor and make the PersonEditEditor visible.
I am not sure if this is the best approach. If not what's the recommended approach for doing inline edits? What's the best way to do unit-testing on the Editors?
If you can afford developing 2 distinct views, then go with it, it gives you the most flexibility.
What we did in our app, where we couldn't afford the cost of developing and maintaining two views, was to bake the two states down into our editors, e.g. a custom component that can be either a label or a text box (in most cases, we simply set the text box to read-only and applied some styling to hide the box borders).
To detect which mode we're in, because we use RequestFactoryEditorDriver (like you do), we have our editors implement HasRequestContext: receiving a null value here means the driver's display() method was used, so we're in read-only mode. An alternative would be to use an EditorVisitor along with some HasReadOnly interface (which BTW is exactly what RequestFactoryEditorDriver does to pass the RequestContext down to HasRequestContext editors).
Yes,Presenter-View pair should be. But Here two ways to achieve this feature if you like to go with:
1) Integrate Edit/View code design in one ui.xml i.e.Edit code in EDitHorizonatlPanel and View code in ViewHorizontalPanel.The panel has different id. By using id, show/hide panel with display method. if getView().setState() ==Displaying then show ViewHorizontalPanel and if getView().setState()==Editing then show EditHorizontalPanel.
2) Instead of using labels, Use textboxes only. set Enable property is false when you need it in view mode otherwise true
You have created two Presenter/view but I think if Edit/View function has similar code so no need to rewrite similar code again and again for view purpose.
If a big project has so many Edit/View function and you will create such type of multiple View/Presenter than your project size become so huge unnecessary.
I think that whatever I have suggest that might be not good approach but a way should be find out which help to avoid code replication.
The object is to Show-Hide text located under their respective Titles, so a User reads the title and shows or hides text belonging to that title if the User wants to read more.
I tried whatever I could find so far on here, we're talking dynamically setting text coming from a spreadsheet, can't use IDs, must work with .class, must be missing something, I have this piece of code:
... html.push('<div class="comments">' + comment + '</div></div></div>');
but when I try this Show-Hide code nothing happens, even if the error console shows nothing. Basically I want to Show-Hide the .comments class divs with a show-hide toggle link located under each of them. I say them because the .comments divs are reproduced dynamically while extracting text coming from Google spreadsheet cells/row (one .comments div per spreadsheet row). I tried .next, child and parent but they all divorced me so I dunno looks like a dynamic issue. So far I only managed to globally toggle all divs to a visible or hidden state but I need to toggle independantly individual divs.
I prefer a jQuery solution but whatever worked so far was achieved with native javascript.
Note: If a cross-browser truncate function which would append a more-less link after a number of words (var) in each .comments divs would be easier to implement then I would gladly take that option. Thx for any help, remember I am still learning lol!
I have been working on an entirely JS UI project and have brought myself to using $('', { properties }).appendTo(BaseElement) to work best for adding HTML elements because it appropriately manipulates the DOM every time.
If you are having good luck with push elsewhere, however, breakpointing on the line where you do your $('.class').hide() and see what $('.class').length is. Alternately, you can just add alert($('.class').length) to your code if you are unable to breakpoint the code. If it is 0, then your elements have not been properly added to the DOM. Changing to append will ensure they are part of the DOM and therefore targetable via JQuery.
im working on a CMS it is almost finished
but im struggling serious unfamiliar problems in WYSIWYG editor.
i was first using ckeditor but after experiencing problems with it i switched to tinymce.
some problems are solved but this time someother problems showed up.
problems occuring especially on tables.
1-Anchor element underline removal not working
2-Duplicating Phone numbers
--->might be due to skype phone number converting toolbar
3-too many s how to clean those why even those are there?
4-how to convert
<p>text</p>
back into just
text
because tinymce converting some texts into p element *automatically if it's not the client doing it unknowingly.
*=even though i did that force_paragraph:false setting.
5-As client reports : sometimes cursor turns into loading cursor and wysiwyg editor causes browser to stuck.not even allowing to click links outside of the editor.
6-as i experience sometimes it really does stuck and not allow you to edit anything at all.
here is that problematic page created with tiny_mce and causing lots of errors in process of editing:
Here some answers
2-Duplicating Phone numbers --->might be due to skype phone number converting toolbar
Might be - this cannot ba a tinymce related problem.
3-too many & nbsp;s how to clean those why even those are there?
Browsers will show several spaces (character code 32) as a single one. Thus & nbsp;s are inserted alternating instead of natural spaces.
4-how to convert
text
back into just text
Tinymce is a rte editor and will generate html code. In order to be able to style editor content, the content need to be wrapped inside a block element - eighter ps or divs. You may use server side code to remove tags.
6-as i experience sometimes it really does stuck and not allow you to edit anything at all.
Please describe a bit more in detail - there needs to be a reason for this.