I have a GWT app with a bunch of textboxes. In firefox I would expect that when I type a word in a textbox that I have already typed in and submitted, that firefox would offer to autocomplete that text. But for this GWT app it is not happening.
The ids and the name of the html elements are the same everytime. I don't know if it makes a difference, but I am using UiBinders for presentation.
Also in IE it seems that none of my css stuff is loaded. And when I IE developer tools on my GWT page, it can focus in on any of the textboxes it just focuses on the encompassing DIV around all the textboxes.
The problem with autocompletion is caused by how the DOM tree is created in a dynamic web application, such as the one created using GWT. Basically, all the DOM elements (textboxes, etc) are dynamically created, after the page is loaded. However, AFAIK, the browser only supports autocompletion on "static" elements, ones that are part of the HTML host page. So, for that reason you won't get autocompletion support from your browser in a GWT app. Fot some cases, you can still emulate it via SuggestBox.
You could try including the elements you want autocompletion for in your HTML host page, and then wrapping your GWT Widgets around them - that might work :) But it's not the "prettiest" solution, since you probably want autocompletion for a number of unrelated fields/elements.
Related
Does anyone know of a ready-made plugin that allows adding input, textarea, select etc. on tinymce?
The tinymce.dom.Selection API (https://www.tiny.cloud/docs/api/tinymce.dom/tinymce.dom.selection/#select) allows you to select elements or set content in the TinyMCE editor. You can assign the API class to an action or an interaction element like a button or form, and any selected content will be replaced with the contents the API action passes in.
If that's not a good fit for what you need, is there an example of the type of adding input, a textarea, or a select you're looking for?
There are no official plugins that allow such interactive elements to be added. TinyMCE is a text editor that is built to create blog posts, articles, etc. By design, it is not a page builder. However, there may be some unofficial plugins on GitHub that may implement such features.
If you are going to insert forms and text areas that should not be edited or reconfigured afterward, you can use templates. They may come as any valid HTML. Thus, some fixed forms can be just saved as templates.
Another way is, of course, inserting HTML directly into the code.
I need to show a form to the user from Lotus notes customization extension file (Forms85.nsf). For that I have created a form in Customization file i.e. in Forms85_x.nsf Extension file. The form is properly loaded with all the controls (buttons ,textboxes ,comboboxes) while I’m previewing in Domino server but, whenever I’m trying to access the form from users browser it doesn’t show the controls like button. But the controls in the forms are loading properly while I’m having the form in users own mail file i.e. someone.nsf.
When you say "buttons", are you talking about action buttons in the action menu, or buttons on the form?
The mail template is web-enabled, but you may done something on your form that won't work on the web.
What code do you have behind your buttons? Are you using Lotuscript of Formula?
Also, to be picky (but we are all developers, and it is a requirement to be precise for us), you probably mean that you previw it in Notes (using the Notes client), not Domino. Domino is the server, and the only way to view an appliaction on teh Domino server is by using a browser.
You can do really cool things in Domino web applications, with justa little bit of CSS and Javascript. I frequently use jQuery to create more advance web application, calling Lotusscript agents through Ajax to read/write/update documents in the database. Perhaps you can use that technique?
Customizing iNotes does not work like that. You found the right place to add your customization code, but unfortunately not the right way to do it. The forms in forms85_x.nsf are not supposed to be used as "normal" forms. You put html and javascript in there as plain text (no passthrough html).
Action buttons can be added by using special javascript commands, not by adding buttons in the form. Start reading here about how to do this.
Just forget about everything you know about web-development in domino (classic or xpages) and learn how to do "iNotes" as the only thing in common are the "languages" html and javascript and css
Plone 4.2.1.1
plone.tiles 1.2
plone.app.tiles 1.0.1
plone.app.blocks 1.0
plone.app.drafts 1.0a2
Products.TinyMCE 1.2.15
I have a Plone site with two rich text tiles on a page, created following Using tiles to provide more flexible Plone layouts.
The problem is that when editing the tiles, TinyMCE will not load.
In Firebug on the Net tab I see a whole slew of 404s that look like this:
http://example.com/en/front-page/##edit-tile//plugins/pagebreak/editor_plugin.js
By comparison, I know that the correct URLs should look like this:
http://example.com/portal_javascripts/MyTheme/plugins/xhtmlxtras/editor_plugin.js
When I set my portal_javascripts in Development Mode, it works, but when I turn Development Mode off, that's when I see this problem.
So apparently it's due to some kind of javascript conflict, but I don't know where to look for it.
I really need to solve this problem, so any help would be greatly appreciated!
Additional information:
When portal_javascripts has development mode turned off, the condition in this line is never true: https://github.com/plone/Products.TinyMCE/blob/1.2.x/Products/TinyMCE/skins/tinymce/tiny_mce_src.js#L47
That's because the tiny_mce.js file is merged with other files and the name is randomized, and so looking it up by name will always fail. Consequently, the baseURL property of the tinymce object will not be set in init.
Instead, baseURL ends up being set here:
https://github.com/plone/Products.TinyMCE/blob/1.2.x/Products/TinyMCE/skins/tinymce/tiny_mce_src.js#L8397
This is where the URL http://example.com/my-page/##edit-tile/ is used for baseURL.
I verified this by turning off merging and caching in portal_javascripts, but leaving development mode off. Then it works, because it finds tiny_mce.js by name.
Also, I found that when it fails, all of TinyMCE's plugins are added as explicit <script> elements in the head of the iframe (with the ##edit-tile URLs, which can't be loaded). By contrast, when it works, all the plugins are loaded here:
https://github.com/plone/Products.TinyMCE/blob/1.2.x/Products/TinyMCE/skins/tinymce/tiny_mce_src.js#L8458
IOW, they are not added explicitly to the iframe as <script> elements.
(In case I wasn't clear, when I mention iframe, I'm talking about the tile's editing overlay, not TinyMCE's. There is an iframe inside an iframe....)
I really like the approach in GWT where you can define "divs", "spans" etc in a regular html page, then in the GWT entry point simply push a button or some other component inside the div.
So small example, here is a snippet of a gwt html page:
<body class='page'>
<iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position: absolute; width: 0; height: 0; border: 0"></iframe>
<div>
Query Terms: <span id="txtQuery"></span>
<span id="btnQuery"></span><br>
...
</div>
</body>
And here is a small java snippet contained in the gwt entry point:
ClickHandler clickHandler = ...
TextBox txtQuery = new TextBox();
Button btnQuery = new Button("Query", clickHandler);
RootPanel.get("txtQuery").add(txtQuery);
RootPanel.get("btnQuery").add(btnQuery);
One of the reasons I like this approach is that it allows non java coders to design / write the html stuff, and I also like the separation between GWT / java code and the html code.
However... this may work well for a simple web page, but how do you scale this approach up into many webpages? From what I understand, the "GWT way" of doing things is to have one webpage and use history to hide and show various GWT components. I have built 2 projects in GWT using this standard technique, but recently discovered that you can do the sort of thing I showed above.
Is there any way of scaling the above 2 snippets into multiple html pages, where GWT injects its components into standard html pages?
here is no GWT way. At least not in GWT mission statement. If you want to pursue your aproach there are multiple ways how you can do it.
GWT app per page. (e.g. on each page a gwt app specific for this page is included). You simply compile a new GWT module for each page where you need some GWT functionality. You can use few of them together on one page, or none. This approach is good if you GWT apps are going to be really simple, and you don't need to use stuff like GXT Grid on every single page with different settings, otherwise you will waste user browser will have to download large chunks of JS code over and over, and this will be a big problem if you have a lot of pages.
One big GWT app for all pages. Just put everything into single GWT app, create some kind of switch (some js variable) so the app knows what it has to create. Some code splitting might be used, so on each page only things which are really required will be downloaded. Since the same JS will be used on each page, caching should solve the problem with downloading application code over and over (but you still have the problem with actually parsing/running the code very time user changes the page)
There is also a third approach, the most effective of all, but the hardest as well. As soon as the user loads one of the pages, there is no more navigation, gwt module simply takes template for page to which user wants to navigate, and replaces current html code with newly generated template. This is quite easy to achieve, if you will use TextResource from ClientBundle and HTMLPanel. The problem is with navigation in address field (GWT app will have to be responsible for changing the address, so the users can create bookmarks or send the link to their friends). You will use one single GWT script for this and some code splitting is recommended.
All three approaches are totally valid, depending on your requirements you can pick any of them. Also if all you want is to provide people ability to use HTML to layout GWT screens, you might want consider using combination of HtmlPanel and ClientBundle's TextResource.
If the goal is to have designers work on HTML rather than Java, then how about UiBinder? It'd give you what you want (separate HTML –or rather, XHTML-like– code from Java code) inside a GWT project.
I have four textareas in my form. TinyMce editor applies to only first row of the textarea, remaining rows for textareas dont get editor in google chrome. It works fine in firefox instead.
It's hard to know without seeing the code, but I'm going to go ahead guess that you are referencing your multiple textareas using the same ID. IDs must be unique - so give them each their own individual ID and then attach the editor with four separate calls, or reference them by class instead.
Or attach some code for us to take a look at.