In my Vaadin (v.23.2.6) application I am creating a bean of class Book. This bean has set of tags.
Tags are retrieved from the database and contain two properties - tagName and tagDescription.
In my UI form I specified MultiSelectComboBox for Tags.
this.tagsField = new MultiSelectComboBox<>("Tags");
this.tagsField.setAllowCustomValue(true);
this.tagsField.setAutoOpen(false);
this.tagsField.setItemLabelGenerator(Tag::getTagName);
It is working, but I do want to display value of tagDescription when cursor is hovering over the tagName in the selection list.
What kind of event listener I can use for that purpose? Shall I use Notification or there is something else that can help me with this implementation?
Please advise.
While it's technically possible, you don't want to listen to hover (mouseover) events on the server. That's overkill and will lead to a lot of unnecessary network traffic. Instead, you can take care of it in the client with a Renderer. For example, using the standard HTML title attribute:
tagsField.setRenderer(LitRenderer.<Tag>of(
"<span title='${item.description}'>${item.name}</span>")
.withProperty("description", Tag::getTagDescription)
.withProperty("name", Tag::getTagName)
);
Related
I would like some advice on how to specify the element for certain event handler. I'm trying to change the color on a paragraph when I click on it but it change the color regardless of where I click on the browser.
function onmouseA(){
document.getElementById("test").style.color = "#C5D9FF";
}
document.onmousedown = onmouseA;
I actually did specify the with the id="test", but it doesn't work properly, need some advice, thanks.
I am trying to attach change event handler to the instance of kendoNumercTextBox.
I am able to get the instance of kendoNumercTextBox control using its ID, however Im not able to get the instance using class name
here is the code http://dojo.telerik.com/emIWa/11
NOTE
I DO NOT want to attach event handler at the time of instantiating
the control. I want to get the existing instance and then attach the
event handler.
Also i am actually using Kendo ASP.NET MVC, however
dojo doesn't allow me to write cshtml so i am using kendo UI for
the demo purpose above. But i think end result would be same.
The NumericTextBox is created like below in cshtml
#(Html.Kendo().NumericTextBoxFor(x =>x.numerictextbox).HtmlAttributes(new {#class = "MyClass"}))
You need to use a more specific jQuery selector. This for example will get the correct element which is the one with the data-role attribute:
var numerictextboxByClassName = $(".MyClass [data-role]")
If you use the developer tools in your browser to inspect the text box, you'll see that 'MyClass' is on several elements that comprise the widget, hence the need to be more specific. It is also worth noting that the handler will only attach to the first instance found using the selector so this method cannot be used to attach a handler to several such controls at the same time.
I found the following answer when looking for code to navigate the editors text area elements.. The code works, the onlyu problem is i dont understand why..
var documentWrapper = editorname.document; //replace by your CKEDitor instance ID
var documentNode = documentWrapper.$; // or documentWrapper['$'] ;
The answer was got from the folloing stackOverflow link :
ckeditor scrollIntoView to a div element within the editor
In particular could someone explain to me the syntax documentWrapper.$;
Ive no idea what this means??
Thanks
#oggiemc
The "$" represents the actual DOM object that the CKEDITOR class object is pointing to.
In this case you're working with the "CKEDITOR.dom.document" class. Find the documentaion here:
http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dom.document.html
Your object named "documentWrapper" is a CKEDITOR object. It would have any properties described in the CKEDITOR API docs for that class object. You would also use CKEDITOR methods on it.
When you work with "documentWrapper.$", you're working with a DOM object that's described in the Document Object Model Specifications. See Specs here:
http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/
This object will have the properties described for this object type in the DOM specs. You wouldn't use CKEDITOR methods on this object, you would use the methods described in the DOM specs for this object type.
So the "$" is a generic representaion of whichever DOM object (document, head, body, div, span, p, etc.) the CKEDITOR class object is pointing to.
documentWrapper.someFunction(); would use a CKEDITOR method on a CKEDITOR class object.
documentWrapper.$.someFunction(); would use a DOM method on a DOM object.
Joe
Difference between editor passed as argument to plugins/dialogs and editor returned by getParentEditor().
They would usually be the same object. But if you have multiple editor instances on one page, you need to use getParentEditor to make sure you're working with the correct editor instance.
Especially if multiple editors are sharing one toobar: How Do I Get Multiple CKEditor Instances to Share the Same Toolbar?
http://docs.cksource.com/CKEditor_3.x/Howto/Shared_Toolbar
You can take a look at the code for dialog radio buttons in the CKEditor directory:
ckeditor\_source\plugins\forms\dialogs\radio.js
Or on the docs site:
http://docs.cksource.com/ckeditor_api/symbols/src/plugins_forms_dialogs_radio.js.html
When the plugin is loaded it uses the active editor instance to load the text for the title and labels because they will be the same for all the instances sharing the toolbar:
ckeditor_source\plugins\forms\dialogs\radio.js(5):
CKEDITOR.dialog.add( 'radio', function( editor )
(42) label : editor.lang.checkboxAndRadio.radioTitle,
(43) title : editor.lang.checkboxAndRadio.radioTitle,
But for the methods used in the dialog, it uses getParentEditor(), so that the actions will be performed on the correct editor instance:
ckeditor_source\plugins\forms\dialogs\radio.js(30):
editor = this.getParentEditor();
(22) onOk : function() ........ editor = this.getParentEditor();
Joe
I have a report that will require chunks of text (that will be created dynamically) to be embedded from a Java program that runs the report.
Is there a way I can put a text object into the design and then somehow get hold that of that object in my Java program. If this is possible I assume I would be able to insert text into that text object.
Is this the best way to do this?
A code snippet would be gratefully accepted.
Thanks in advance.
You can easily do this by using Java Event Handlers. Any event in the generation process can be modified either by JavaScript (stored on the report design itself) or via a POJO when more complex processing is needed.
Add a TextItem to your report. This will be the intended destination for your block of text. You can add other types of controls and interact with them the same way, TextItem just seems to make sense for this particular question. Add anything you want to the text item, we are going to over-ride the value from the POJO anyway.
Now create a POJO that implements the TextItemEventAdapter interface (this should be in your BIRT distribution). You can then choose what event to bind your POJO to. onCreate probably makes the most sense. To do that, implement the onCreate method from the interface.
/* (non-Javadoc)
* #see org.eclipse.birt.report.engine.api.script.eventadapter.TextItemEventAdapter#onCreate(org.eclipse.birt.report.engine.api.script.instance.ITextItemInstance, org.eclipse.birt.report.engine.api.script.IReportContext)
*/
#Override
public void onCreate(ITextItemInstance text, IReportContext reportContext) {
super.onCreate(text, reportContext);
text.setText(getText());
}
In the above snippet, the getText() method is another method on your class that builds your text block. Implement your business logic here.
Once you have built the class, you need to bind it to the report's text item control. On the report, select the text item. Under "Properties" look for "Event Handler". Here you can add your POJO as the event handler for the control. When the control is rendered, your POJO will now supply the text.
To ease development, have your Java Project and your BIRT project in the same workspace. This will allow the report and the POJO to see each other enabling testing and debugging inside Eclipse.
Here is a lot more background about report events and event handling: http://www.eclipse.org/birt/phoenix/deploy/reportScripting.php
Good Luck!
I have some questions regarding GWT (2.1) with MVP and events.
Got DockLayoutPanel with some components in it. A Tree component to the west and a SimplePanel in center. Each component has a presenter and a view. The problem is that I want to handle the components events in their presenter class, but now they are only catchable in the container which is the DockLayoutPanelPresenter . I want to handle the tree's event s in the TreePresenter. I think that the TreePresenter should handle its 'SelectedItem' events and the it can put it on the eventbus so that my other components can react to it.
Has anyone else faced this? Posted on GWT groups list, but got no reply. I think this is an imporant topic for decoupling components.
In this case, where different regions of the page each have a Presenter, you could use the approach suggested by David Chandler of the GWT team:
http://groups.google.com/group/google-web-toolkit/browse_thread/thread/2812e1b15a2a98a6/8c82d629b7a48e56?lnk=gst&q=EastActivityMapper#8c82d629b7a48e56
You should read the post, but in summary, you would do something like this:
WestActivityMapper westActivityMapper = new WestActivityMapper();
WestActivityManager westActivityManager = new WestActivityManager(westActivityMapper, eventBus);
westActivityManager.setDisplay(westPanel);
EastActivityMapper EastActivityMapper = new EastActivityMapper();
EastActivityManager eastActivityManager = new EastActivityManager(eastActivityMapper, eventBus);
EastActivityManager.setDisplay(eastPanel);
dockLayoutPanel.addWest(westWidget, 50);
dockLayoutPanel.addEast(eastWidget, 50);
RootLayoutPanel.get().add(dockLayoutPanel);
The west activity mapper would be responsible for displaying your Tree, and the east mapper would contain the body of your application.
We are using this approach to display a list of items in our west docked panel (not a tree, but close enough) which then updates what is displayed in the body of our app. When a user selects an item from the list we trigger a new Place event, and include the list item's id as the Place Token, so that the user can use the back button. However, you could also use the EventBus as you pointed out.