Does anyone know of a GWT widget that works like a spelling suggestor?
Ideally it would be similar to this: http://www.polishmywriting.com/
I need a click-triggered popup on user generated text so that I can suggest replacements (I am not building a spell-checker, but something similar). I also really like the way the polishmywriting menu is set up (when you click on an underlined word).
Is there a widget that would allow me to make something similar?
Basically I'm trying to clone the little popups used by spellchecking in Gmail and polishmywriting.
If not, what would be my first step to make it?
Thanks for your time and answers,
DTrejo
Have you had any luck yet? I know it's been quite a lot of time, but found this just now.
It is a very specific widget, so maybe you won't be able to find exactly what you are looking for. In that case, making one from scratch might prove as a challenge.
The first thing you will notice is that a regular gwt TextArea won't do the job of holding the text. You will need something more flexible to dynamically put clickable labels in the text itself.
TinyMCE is a platform independent web based Javascript HTML WYSIWYG editor control, released as Open Source.
http://en.wikipedia.org/wiki/TinyMCE
There is also a gwt wrapper available, so you might find that useful:
http://code.google.com/p/tinymce-gwt/
If you check the polishmywriting editor after the spell checking markup is displayed, you will notice it is not a TextArea. The text is a series of paragraphs and the labeled parts are span elements. This are the elements you can easily access with gwt and put some click handlers there to open the popup.
And for the popups, it shouldn't be difficult. Use a standard gwt PopupPanel. The popup panel can be displayed in a relative position to other elements displayed on the page:
popup.showRelativeTo(otherElement);
If you did find something useful in the mean time, feel free to share.
Related
Are there plugins that achieve the following:
You can add text blocks into a section of a page (left, right, normal,bottom). the text isnt shown ommediately but after clicking the title/header of the text block which slides open the text. I'm in need of such an extension as I want to place much content on a site without throwing the whole text on a viewer. There seem not to ve any available.
By default TYPO3 doesn't force any particular frontend library so probably you won't find such ext (maybe somebody created extension like this but for 99% it will be required to fit it tou your needs)
Instead there are generic extensions like Grid Elements or Dynamic Content Elements (DCE) - you can use it to predefine your custom HTML structures and then reuse them easily (no need for advanced PHP programming of your own plugins).
So finally you can combine them with dedicated JS libs for frontend i.e. Bootstrap and its Accordion Collapse
If you use TYPO3 6.2 or higher have a look at df_contentslide. After install you'll find another section under appearance in CEs. Now you can slide every content element. It is easy to use and with little knowledge also easy to style.
I'm building an extended editor around TinyMCE and I have to implement a Math formula module. I've choosen Mathjax for formula rendering, using plain html/css. So far, I've managed to create a plugin that popup a panel with a textarea, you can enter your latex in, there's a preview in the panel.
Once you validate the formula, it's injected into tinymce content. This new content is A LOT of spans with inlined styles, and OF COURSE, I don't want tinymce to be able to edit that directly. (sidenote: we only store latex, not the rendered html output from mathjax)
Basically, I want that a piece of html inside Tinymce to be ignored totally, but displayed in place. I want my carret to be able to move before that piece of html, and after, but not inside.
The "non editable content" plugin seems to be close of what I'm looking for, but it has some limitation (you can't ADD no editable content on the fly, having nested html content inside an element flagged as "non editable" broke some things, etc.)
Is someone could help with that ? I started to tweak the non editable plugin, but it's really really hard to understand existing code. Has someone already did something like that, or is there another third party plugin ?
thanks
Ok im struggling to find anything on this as im probably searching the wrong keywords.
I have a backed form thats use to display content on a page. When entering the details i want to be able to use a basic text editor to style the text, like bold, bullets, underline.
On top of that i would also like to allow them to wrap section in paragraph tabs, apply a certain style i.e style id="x".
Its more for backend so it doesnt have to be really user friendly but if there was an uncomplicated way of showing the styles in the form as i apply them, basically a WYSIWYG view. If not i will settle for applying the styles without having to see all the hmtl and css tags in the editor but when the information is passed via the INSERT query it will show pass all the relevant code like My Style and so on.
Now im quite happy to spend the time learning how to do this if you point me in the right direction but i have no idea what keywords to search. Ideally if there is a script out there i can just edit to my needs would be great too rather than starting from scratch.
Finally since im learning php and mysql still keeping it dumbed down will help and also since my values im passing is going to be full of characters the code wont like what functions should i look up to pass the code and content into the database to avoid breaking the code
I'm not entirely sure what you mean, but it seems you can achieve what you want using an editor like for example TinyMCE in combination with JQuery?
With JQuery you can show/hide items and ander your css like
$("p").mouseover(function () {
$(this).css("color","red");
});
In our project we decided to try to design our UIs with UIBinder instead of doing everything in Java mixing GWT widgets and logic. We found out how much prettier they look panels, buttons and such from scratch, which saves a lot of time especially for presenting a demo. However, when we use number box widgets, like IntegerBox or DoubleBox, they don't appear as pretty as TextBoxes, they are like plain HTML boxes, thus quite ugly in contrast with the rest of the widgets. We did some Google search but nothing came up about this topic.
Is there any trick to accomplish this, to use GWT native number boxes with UIBinder and to appear in the pretty style? Or maybe we should just use TextBoxes for everything and write our own wrappers for setText-getText and parse the values.
This is really important as we have to make client-side calculations with input numbers before sending data back to the server.
UIBinder is not in any way responsible for things looking "pretty", it only generates Java code, the same kind of code that you were coding by hand previously. If things look "prettier", it's likely because you <inherits>-ed a theme in your gwt.xml.
Contrary to TextBox though, IntegerBox and DoubleBox don't have an associated hard-coded style name. If you want to have them style the same as every TextBox, you can then simply addStyleName("gwt-TextBox") to them (the hard-coded style name of the TextBox widget), or in your ui.xml: <g:IntegerBox addStyleNames="gwt-TextBox" … (note the plural here; this is documented in UIObject's javadoc).
I am making a vertical Menu using GWT MenuBar and selection of particular MenuItem shows content on the right, I am trying to make something similar to TabPanel, but with Tabs on left instead of being on top. Now, since I've got the Menu items and actions in place, I want to remove the effect of hovering over and changing color, and keep that menu item selected which was clicked last and whose content is loaded on the right.
I am open to any comments, if you have a better solution to implement this, using some other components(with-in) GWT, please drop in a comment with your suggestions, I'll really appreciate that.
Or if you can just tell me how can I disable this effect, of hovering and sticking to only that selection, That would be awesome too..
Thanks to everyone, taking time to read this and suggesting a solution.
It's all defined in the CSS of your GWT's theme (probably the default one), so it's a matter of overriding those styles - make sure it's not the other way around :) Inspect the code with a tool like Firebug to see what's exactly being set and change that.