I tried to add an overlay plugin. https://vaadin.com/directory/component/overlays
I have a problem with image overlay. Im getting that error:
The type com.vaadin.terminal.Resource cannot be resolved.
It is indirectly referenced from required .class file
problem is with this line:
io.setImage(res);
how can I fix it? I put icon-new.png to the class package folder and added into maven overlays plugin
My code:
final ImageOverlay io = new ImageOverlay(button);
Resource res = new ClassResource(this.getClass(), "../icon-new.png");
io.setImage(res);
io.setComponentAnchor(Alignment.TOP_LEFT); // Top left of the button
io.setOverlayAnchor(Alignment.MIDDLE_CENTER); // Center of the image
io.setClickListener(new OverlayClickListener() {
public void overlayClicked(CustomClickableOverlay overlay) {
Notification.show("ImageOverlay Clicked!");
}
});
layout.addComponent(io);
io.setEnabled(true);
I need to achive that on the button will show up an overlay. If the user clicked on this button and added a new content something like taht show up on the button
That's because it's compatible with Vaadin 6 only as it's indicated in the add-on page:
If you scroll to the comments section, someone is suggesting a fork of the add-on compatible with Vaadin 7, but I could not see anything related to 8:
HI ALL! You can find version 1.1.3 for Vaadin 7.6 here: https://github.com/Haulmont/vaadin-overlays/releases
YURIY ARTAMONOV
Add-ons that are compatible with multiple Vaadin versions, indicate this explicitly, and usually (but not necessarily... dev's choice) have different version numbering, eg: 1.x for Vaadin 6, 2.x For Vaadin 7, 3.x for Vaadin 8, etc:
Either way, clicking on the link for a specific Vaadin version, will select the latest add-on release compatible with it. Or, if you select an add-on release from the drop-down, the Vaadin version compatible with it will be updated accordingly.
Edit after update
You can use a regular button + the predefined BUTTON_ICON_ALIGN_RIGHT Valo style. From the javadoc:
/**
* Align the icon to the right side of the button caption. Can be combined
* with any other Button style.
*/
public static final String BUTTON_ICON_ALIGN_RIGHT = "icon-align-right";
Please note that for the best UI result, I've used 24x24 icons, but depending on your requirements you can tweak your theme for the size you need. Also if you don't have icons and don't want to spend money or time buying or creating your own icons, you can use the existing Vaadin Font Icons (list of icons and matching java enum)
public class ButtonWithIconOnTheRightComponent extends VerticalLayout {
public ButtonWithIconOnTheRightComponent() {
// text filed to specify icon URL
TextField urlField = new TextField("Icon URL", "http://files.softicons.com/download/toolbar-icons/status-icons-set-by-iconleak/png/16x16/30.png");
// button which updates its icon using the URL specified in the text field above
Button button = new Button("Update icon", event -> event.getButton().setIcon(new ExternalResource(urlField.getValue())));
// use valo style to align icon to the right
button.addStyleName(ValoTheme.BUTTON_ICON_ALIGN_RIGHT);
// add components to the UI
addComponents(urlField, button);
setSpacing(true);
}
}
Related
I have encountered a problem when using the the addCommand() method of the Form class along with the Native theme - other themes work fine. See the following example:
Form hi = new Form("Hi World");
hi.addComponent(new Label("Hi World"));
// with native theme - can't click on the first command in the list
hi.addCommand(new Command("Dummy1") {
public void actionPerformed(ActionEvent ev) {
Dialog.show("Dummy1 Clicked!", "You clicked the Dummy1", "OK", null);
}
});
hi.addCommand(new Command("Dummy2") {
public void actionPerformed(ActionEvent ev) {
Dialog.show("Dummy2 Clicked!", "You clicked the Dummy2", "OK", null);
}
});
hi.show();
When I create an application using the code above, a click on the second command ("Dummy2") produces the expected Dialog, but a click on the first command ("Dummy1") does nothing.
This only happens when using the Native theme. If I switch to Flat Blue, then clicking on either command produces the expected Dialog.
This behavior happens both on the Simulator and on a real Android device (don't know about iOS).
Fyi, my toolchain is NetBeans IDE v8.2, Java 1.8.0_25, with the CodenameOne plugin v3.6.0.
Has anyone else seen this? Am I missing something? If so, is there a workaround?
If the element is very narrow and very close to the top the click might be misinterpreted as a click out of bounds or on the status bar area. You need to set the styling of the SideCommand to have a sensible default as this element is very application specific. Otherwise touches might be lost.
I tried styling the SideCommand but it didn't seem to help. What worked for me was to define a style for TitleArea and simply uncheck Derived for the Padding settings (I left them all set to 0px).
I have no idea why this works - I would have thought that the derived values would have been zero in any case.
i have a little problem when i try to disable an Action of my Netbeans platform project. When the app starts, some Actions must be disabled, and i do that with this method:
CallableSystemAction.get(BuildProjectAction.class).setEnabled(FLAG);
It works, because the BuildProjectAction is disabled, but the corresponding items of the MenuBar and the Toolbar remains enabled until i click on one of it.
Only later that i have clicked on it, the comportament start to work correctly.
First question: Why?
If i want disable an Action, it's obvious that i want disable also the relative Icon in the Menu and in the Toolbar, so it must be automatic when i call Action.setEnabled(false).
It doesn't have sense that the Icons are not refreshed if i don't click on they.
Same problem if i try to use .getToolbarPresenter().setEnabled(false); and .getMenuPresenter().setEnabled(false);
For start the application with the icons disabled, I have tried to set the lazy attribute to FALSE and declare the image programmatically with the method setIcon(new ImageIcon(image)); that sets the same image for Menu and Toolbar.
And it works; there is only another problem: Menu and Toolbar have icons of different size (16x16 and 24x24).
It doesn't have sense that the if i set the icon with the #ActionRegistration(iconBase = "image.png") the correct icon is automatically selected, but if i use the method .setIcon(), it doesn't.
I have read some articles about Action, CookieAction, Lookup, but the only thing that i want is disable the graphic elements in the same moment when i disable the Action.
Second question: How i can do that?
This is an example of my Action.
#ActionID(
category = "Run",
id = "BuildProjectAction")
#ActionRegistration(
lazy = true,
iconBase = "images/icons/compile.png",
displayName = "#CTL_BuildProjectAction")
#ActionReferences({
#ActionReference(
path = "Menu/Run",
position = 3),
#ActionReference(path = "Toolbars/Run",
position = 3),
#ActionReference(
path = "Shortcuts",
name = "D-B")
})
#Messages("CTL_BuildProjectAction=Build Project")
public final class BuildProjectAction extends CallableSystemAction {
#Override
public void actionPerformed(ActionEvent e) {...}
#Override
public void performAction() {}
#Override
public String getName() {
return Bundle.CTL_BuildProjectAction();
}
#Override
public HelpCtx getHelpCtx() {
return HelpCtx.DEFAULT_HELP;
}
Thanks
The easiest way to create an action that is disabled at startup is to use the platform’s New Action Wizard to create your action, and to create one that depends on a "context" -- this is, on finding a specific object in the global lookup. If no object is available in the lookup, as at startup, then the action will be disabled.
The menu and toolbar graphic elements are bundled together with your action via the annotations. This means that enabled/disabled state of your context-aware action will automatically affect the icons in the menu and toolbar as well.
This article by Geertjan Wielenga has a walkthrough on creating a context-aware action:
http://netbeans.dzone.com/how-to-make-context-sensitive-actions
When you want to enable your action, you will add the object on which the action depends into the global lookup, which will cause the action (and its graphic elements) to be enabled.
This entry in the platform’s Developer FAQ has some examples of how to add an object to the global context:
http://wiki.netbeans.org/DevFaqAddGlobalContext
If you need to create an action that depends on a more complex set of conditions there is some discussion, as well as a code sample illustrating how to do this, in this platform developer list thread:
http://forums.netbeans.org/ptopic55295.html
The grayed-out versions of the icons that are shown when your action is disabled are created automatically by the platform. You only have to provide the "normal" non-grayed-out images.
As for the icons of different sizes, it’s a matter of filename convention. If your annotation declares the icon with #ActionRegistration(iconBase = "image.png”), then you will provide a 16x16 image called “image.png” and a 24x24 version called “image24.png”. The platform will find and use the appropriate size in the menu and toolbar.
I have an Eclipse RCP application with a sort of three column layout:
The editor area is at the extreme right. Now, when you get an IPageLayout to work with, the editor area is already added in. That's fine: we add area B to the left of the editor, and area A to the left of B, and the layout is exactly what we need.
The issue is that when you move the sash between A and B, views A and B change without resizing the editor area (good;) but when you move the other sash between B and the editor area, all three views are resized; the layout manager acts to maintain the ratio of the widths of A and B, and that's not what we want. We want the user to be able to move each sash independently, and have it influence only the two views it touches.
It seems like the root cause of this is that the editor is in place when you get your IPageView, and therefore you have to position the IFolderLayouts relative to it. If you could position the editor relative to B, instead, then resize would do the right thing.
So my questions:
Is there any way to tell the IPageView to position the editor relative to a view, instead of the other way around?
Barring that, is there any other way to influence the layout algorithm, like writing some kind of layout manager?
I know of no way to alter the layout tree of IPageLayout in Eclipse 3.x. In Eclipse 4.2, however, the Application Model can be changed dynamically at runtime.
So, if you would consider migrating your application to Eclipse 4, this solution could be an option. To keep the original application and UI code as untouched as possible, this solution will
take full advantage of the compatibility layer of Eclipse 4 to create an Application Model from the Eclipse 3 based RCP application. There is no need to create an Application Model or alter the UI code of the application.
rearrange the editor area's layout after the application is active. This is done by creating an addon class in a separate plugin.
allow easy migration to more Eclipse 4 functionality in the future: Should you decide to build an own Application Model, you can just unhook the addon plugin.
I started with the regular RCP Mail template of Eclipse 3 and altered the perspective to recreate the problem. This is the Perspective class I used in my test application:
import org.eclipse.ui.IPageLayout;
import org.eclipse.ui.IPerspectiveFactory;
public class Perspective implements IPerspectiveFactory {
public static final String ID = "wag.perspective";
public void createInitialLayout(IPageLayout layout) {
String editorArea = layout.getEditorArea();
layout.setEditorAreaVisible(true);
layout.addStandaloneView(AView.ID, false, IPageLayout.LEFT,
0.25f, editorArea);
layout.addStandaloneView(BView.ID, false, IPageLayout.LEFT,
0.25f, editorArea);
layout.getViewLayout(AView.ID).setCloseable(false);
layout.getViewLayout(BView.ID).setCloseable(false);
}
}
It basically creates the scenario you described: a three column layout where one sash effects all three parts and the other one only two.
I then proceeded to migrate the application and alter the Application Model.
Migrate the Eclipse 3 based RCP application to Eclipse 4
There are online tutorials available for this process. I found Eclipse 4.1: Run your 3.x RCP in 4.1 and Eclipse 4 and the Compatibility Layer - Tutorial to be very helpful.
I recommend including the org.eclipse.e4.tools.emf.liveeditor and its required plug-ins in your product dependencies. With the live editor, you can take a look at the Application Model that is created by the compatibility layer.
Once the application starts, thet sashes will still behave the same way. Open the live editor on your application window and take a look at your model.
You can see that the PartSashContainer including the placeholder for the AView contains another PartSashContainer. Moving the sash between AView and that container will update the rest of the layout tree, while moving the sash between BView and the editor does not effect other parts of the layout.
You could now drag the placeholder for the AView to the container where the BView and the editor are located. This would instantly create the effect you desire: The sashes will only affect their direct neighbours. But these changes will only be saved in one's own runtime workspace. Something else is needed to alter the layout structure automatically.
Altering the Application Model at runtime
Since I didn't want to touch the original code if possible, I created another plugin to make a contribution to the Application Model.
Create a Plug-In Project without an Activator without using a template.
Add an Addon class: select New->Other->Eclipse 4->Classes->New Addon Class
Add a Model Fragment: select New->Other-Eclipse 4->Model->New Model Fragment. Open the created fragment.e4xmi file and add a Model Fragment. For the Element Id, put org.eclipse.e4.legacy.ide.application (this is the standard id of legacy applications) and for the Featurename addons. Add an Addon to the Model Fragment. Enter an ID and set the Class URI to your addon class.
Now add your fragment.e4xmi to your org.eclipse.e4.workbench.model extension point:
<extension
id="id1"
point="org.eclipse.e4.workbench.model">
<fragment
uri="fragment.e4xmi">
</fragment>
</extension>
Add your contribution plugin to the dependencies of your application product. When you start your application and look at the model with the live editor, you should see your Addon listed in the model.
Now we can implement the Addon. This is the code of my Addon class:
package wag.contribution.addons;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;
import javax.annotation.PostConstruct;
import javax.annotation.PreDestroy;
import javax.inject.Inject;
import org.eclipse.e4.core.services.events.IEventBroker;
import org.eclipse.e4.ui.model.application.MApplication;
import org.eclipse.e4.ui.model.application.ui.MElementContainer;
import org.eclipse.e4.ui.model.application.ui.MUIElement;
import org.eclipse.e4.ui.model.application.ui.advanced.MPlaceholder;
import org.eclipse.e4.ui.workbench.modeling.EModelService;
import org.osgi.service.event.Event;
import org.osgi.service.event.EventHandler;
public class LayoutSorter {
#Inject private IEventBroker broker;
private EventHandler handler;
// The part IDs we are interested in, sorted in the sequence they should be
// shown
private static List<String> PART_IDS = Arrays.asList(new String[] {
"wag.aView", "wag.bView", "org.eclipse.ui.editorss" });
// Listen to the e4 core service's event broker to find the magical time
// when the application is created and try to sort the layout.
#PostConstruct
void hookListeners(final MApplication application,
final EModelService service) {
if (handler == null) {
handler = new EventHandler() {
// Try to sort the layout. Unsubscribe from event broker if
// successful.
#Override
public void handleEvent(Event event) {
try {
sort(application, service);
// sort did finish: stop listening to the broker.
broker.unsubscribe(handler);
} catch (Exception e) {
// Something went wrong, the application model was not ready yet.
// Keep on listening.
}
}
};
// Subscribe "ServiceEvent.MODIFIED" to grab the application.STARTED
// event. Does anybody know how to do this in a better way?
broker.subscribe("org/osgi/framework/ServiceEvent/MODIFIED",
handler);
}
}
private void sort(MApplication application, EModelService service) {
// find all placeholders
List<MPlaceholder> placeholders = service.findElements(application,
null, MPlaceholder.class, null);
// only keep the ones we are interested in
for (int i = placeholders.size() - 1; i > -1; i--) {
if (!PART_IDS.contains(placeholders.get(i).getElementId())) {
placeholders.remove(i);
}
}
// find the parents of the placeholders
List<MElementContainer<MUIElement>> parents = new ArrayList<>(
placeholders.size());
for (MPlaceholder placeholder : placeholders) {
parents.add(placeholder.getParent());
}
// find the parent that is "deepest down" in the tree
MElementContainer<MUIElement> targetParent = null;
for (MElementContainer<MUIElement> parent : parents) {
for (MUIElement child : parent.getChildren()) {
if (parents.contains(child)) {
continue;
}
targetParent = parent;
}
}
// move all parts to the target parent
if (targetParent != null) {
for (int i = 0; i < placeholders.size(); i++) {
if (targetParent != placeholders.get(i).getParent()) {
service.move(placeholders.get(i), targetParent, i);
}
}
}
}
#PreDestroy
void unhookListeners() {
if (handler != null) {
// in case it wasn't unhooked earlier
broker.unsubscribe(handler);
}
}
}
(Please note that the code above is a bit of a hack because it is only really suited for this specific problem.)
After a restart, the application should now behave in the desired way. Take a look at the Application Model to see your changes.
One thing to be aware of is that local changes are saved in the runtime workspace in the file .metadata\.plugins\org.eclipse.e4.workbench\workbench.xmi if saving is switched on, so for recreating the unaltered model for testing this file has to be deleted.
I don't think, it's possible to achieve exactly what you want (so the answers to your questions would be 1. no, 2. no). But there it a 3rd alternative, which IMO behaves quite nicely.
When trying in Eclipse: Start with viewA on left and Editor on right. Then when you drag viewB to the right side of viewA, you get the (wrong) setup you describe. But then you drag it to the left part of the Editor, then you get different configuration, where dragging right sash behaves as you want. Dragging of left sash resizes viewA and Editor and MOVES viewB.
I would say that the code to achieve this would be:
IFolderLayout areaA = layout.createFolder("A", IPageLayout.LEFT, 0.33f, editorArea);
IFolderLayout areaB = layout.createFolder("B", IPageLayout.LEFT, 0.5f, editorArea);
I have a two simple IceFaces buttons created this way. (I don't use xhtml but create things from Java code.)
HtmlCommandButton comp = new HtmlCommandButton();
comp.setId(id);
comp.setImmediate(immediate);
boolean clientSide = props.getBooleanValue("clientside", false);
if(clientSide) {
comp.setOnclick(props.getValue("script") + ";return;");
} else {
// ignore
}
I create two buttons this way: one with clientSide == true with a simple alert('hello'); script and one would run the attached javascript server side in a BSF box.
Thw two buttons are displayed, the clientSide button works with it's alert well. However when I click on the other button that has no onClick set programmatically, I get an error message in Firebug console (in IE9 as well):
uncaught exception: couldn't find container for property: bridge
I use ICEFaces 1.8.2. After Googling around I saw this error related to jsp:root tags, but I have no jsp in my project.
The button was rendered outside of the HTML form. That's all.. :-)
I'm developing a SWT/JFace application using the libraries from Eclipse 3.4.1.
I encounter the following problem on Windows (Vista 32bit) and Ubuntu 8.10 32bit:
I create a menu bar in the createMenuManager method of the JFace ApplicationWindow. I add MenuManagers for file, edit and help.
I then add an ExitAction to the file MenuManager like so:
filemenu.add(new ExitAction(this));
The ExitAction is defined this way:
public class ExitAction extends Action {
final ApplicationWindow window;
public ExitAction(ApplicationWindow w) {
this.window = w;
setText("E&xit");
setToolTipText("Exit the application");
setAccelerator(SWT.MOD1 + 'Q');
}
}
Now when my application starts I want be able to press "CTRL+Q" to quit the application. This does however not work. Only AFTER I click on "File" in the menu bar and THEN clicking "CTRL+Q" the application will quit.
I've tried this with different accelerators- same behavior.
It does work however if I create a "MenuItem" instead of an "Action" to contribute to the menu bar.
Is this a SWT bug or do I miss something?
Torsten.
Update: There is a duplicate bug of mine which also contains a workaround.
The bug url is: https://bugs.eclipse.org/bugs/show_bug.cgi?id=243758
Basically the workaround is to call create() on the ApplicationWindow and then getMenuBarManager().updateAll(true); which will force all menu items to get initialized.
Of course you have to call the above methods after you created the menu items.
AFAIK setAccelerator(.) does nothing else than adding the appropriate text to your MenuItem. You are responsible to register for an KeyUp event and react on it.
You can use Display.addFilter(SWT.KeyUp, myListener) to register your Listener independently of your widgets.
Turns out that this is a bug in Eclipse 3.4.
I have submitted a bug report: https://bugs.eclipse.org/bugs/show_bug.cgi?id=253078