The JavaFX 2 colour picker has a button that pops up a colour chooser pane like so:
I'd like to do something similar, in that I'd like a custom pane to pop up when the button is clicked on and disappear when something else is clicked (in my case, a few image thumbnails). What would be the best way of achieving this? Should I use a ContextMenu and add a pane to a MenuItem somehow, or is there something else I should look at?
It's kind of difficult to do well with the current JavaFX 2.2 API.
Here are some options.
Use a MenuButton with a graphic set in it's MenuItem
This is the approach taken in Button with popup showed below's executable sample code.
Use a PopupControl
Take a look at how the ColorPicker does this in it's code.
ColorPicker extends PopupControl. You could do this, but not all of the API required to build your own PopupControl is currently public. So, for JavaFX 2.2, you would have to rely on internal com.sun classes which are deprecated and will be replaced by public javafx.scene.control classes in JDK8.
Use a ContextMenu
So, I think your idea to "use a ContextMenu and add a pane to a MenuItem" is probably the best approach for now. You should be able to do this by using a CustomMenuItem or setting a graphic on a normal MenuItem. The ContextMenu has nice relative positioning logic. A ContextMenu can also be triggered by a MenuButton.
Use a Custom Dialog
To do this, display a transparent stage at a location relative to the node.
There is some sample code to get you started which I have temporarily linked here.
The sample code does relative positioning to the sides of the main window, but you could update it to perform positioning relative to the sides of a given node (like the ContextMenu's show method).
Use a Glass Pane
To do this, create a StackPane as your root of your main window. Place your main content pane as the first node in the StackPane and then create a Group as the second node in the stackpane, so that it will layer over the top of the main content. Normally, the top group contains nothing, but when you want to show your popup, place it in the top group and translate it to a location relative to the appropriate node in your main content.
You could look at how the anchor nodes in this demo are used to see how this might be adaptable to your context.
Is there a relevant update for this for JavaFX8?
There is not much difference of relevance for Java 8, in general the options are as outlined in this post based on Java 2.2 functionality. Java 8 does add Dialog and Alert functionality, but those are more targeted at use of dialogs with borders, titles and buttons rather than the kind of functionality desired in the question. Perhaps you might be able to start from the Dialog class and heavily customize it to get something close to what is needed, but you are probably better off starting from a blank stage or PopupControl instead.
Related
In a map application based on Leaflet, I would like to have a large application menu, kind of a settings menu. I managed to put a nice button into the top right corner as a L.Control and it gets fired on a click.
The menu should position either to the left of the menu button or simply in the middle of the screen.
I am wondering whether it is best practice to use
a Popup,
a Layer,
another Control or
just position a at the right place on the page.
Trying the latter, I found that I have to set z-index to a very high value to see it, and it feels a bit odd not to use the Leafleat features.
What would be the "right" solution to use with Leaflet?
If you want a full screen map, you can use https://github.com/Turbo87/leaflet-sidebar
I use it here: http://franceimage.github.io/map
You can create a nice customized icons based toolbar using Leaflet easybutton plugin.
You will have all the leaflet based controls (Click, hover, position etc.) to set that up as per your requirements.
Here are the implementation examples:
http://danielmontague.com/projects/easyButton.js/v1/examples/
and github repo: https://github.com/CliffCloud/Leaflet.EasyButton
I have an editor which can supply two different ContentOutlinePages to the outline, depending on the user's choice.
However, when I change the ContentOutlinePage to be displayed, I have to close and reopen the Outline View to see any changes. I understand that the Outline View requests a new ContentOutlinePage when the editor is activated, but is there a way to force it to request a new page at any other time?
I tried just calling
activePage.activate(editor);
where activePage is the active workbench page and editor ist the editor that is currently being displayed, but that didn't work.
Rather than have two content pages you could have one page that can show both of your outlines. To do this you cannot extend the normal ContentOutlinePage, instead you need a class like this:
public class MyContentOutlinePage extends Page
implements IContentOutlinePage, ISelectionChangedListener
The amount of code in the standard ContentOutlinePage is quite small so it is not much extra work to implement a page which meets your needs.
Update:
You would have one top level control containing the SashForm and TreeViewer and always return the top control in getControl(). You would hide either the SashForm or TreeViewer depending on which you want to show.
The top level control could be something like PageBook or a Composite using StackLayout.
Is there any way to customize the map annotation bubbles in Appcelerator Titanium? Specifically, I'd like them to be able to display more text than what they show (ideally, by expanding to fit the text). I know I can make them clickable and take the user to a page with more info, but I simply don't have enough information to warrant that. It's basically just the title text is too long (and I can't change the text itself, it comes from sources I have no control over).
Alternatively (if customizing what's there isn't an option), is there an easy way to do custom bubbles? I don't really want to have to reinvent the wheel and rewrite the pins themselves and their event handlers, but if it comes down to it (and someone can point me to some code that can get me started, since I know if it's required, someone's done it), then so be it.
iPhone-specific options are fine.
At this moment the latest Titanium SDK gives you such possibilities for annotation bubble customization:
Add subtitle for the bubble (subtitle option). You will see additional text under the title. On Android subtitle can be multiline (using '\n').
Add left and right view to the bubble (leftView\rightView options). You can add custom view to the left or right part of the bubble. And view can consist of different elements (label, image...).
Read more here.
If this is enough for your task - you can use it. But for deeper customization you must create your own view and show it on annotation click event.
I'm using tiny mce in one of my projects and client do not want to use the Horizontal tool bar of tiny mce. He wants a centralized custom tool bar from where user can control all the properties like text color, type of text, size, back grounds and every thing that is needed to do while designing a web page using templates. I configured the mce instance with out its default tool bar and controlled the properties from the customized tool bar. And the properties are applied to the tiny mce instance as a whole. But now, the requirement has come up that, the text editing should be in MS office style.That means, if user has placed cursor at one place and changes color, nothing will be affected, but if he starts typing from the cursor position the text should have the color which was set recently. I tried to use the external tool bar option. But, my work area and customized tool bar are at different z index levels. So, positioning the tool bar fails. If I append the tool bar to my customized tool bar, it is not click-able. So, how to invoke tiny mce's core functionality using customized tool bar?
Or, Kindly suggest, should I change editor ? Then, which one should I go for ?
EDIT
As per the suggestion, I'm writing the function save the property styles and insert the span at caret position. But I'm facing some problems and could not do it after spending whole day. I could add span at caret position by using following code.
marker = ed.selection.getBookmark();
ed.selection.moveToBookmark(marker);
tinyMCE.execCommand('mceInsertContent',false,'<span id="mytitle"></span>');
But still, I failed to type inside the new span. Also, I could not figure out how to set styles to this span.
If your aim is to have your tinymce behave like MS Office you should write an own plugin which will take care of this.
I suggest if a user has placed the cursor at one place and changes color you save this color as a setting to your tinymce instance like: ed.color = 'choosencolor';
When the user start typing now you can insert a span on the first keystroke and set the color as css class or style property to this span.
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.