Is it possible to align the icon for a tree menu item to the right instead of left?
Like this :
item1 >
item2 >
item3 >
Where the ">" is an image. I am using standard GWT. Tried with both CellTree and normal Tree.
/Andreas
Edit: Just realised this is a Google Web Toolkit question. I know nothing about Google Web Toolkit - but if they let you use normal CSS you can style any list in the way I describe below:
You can't do it with the standard list-style property, but you can definitely do it with background-image:
li {
list-style: none;
background-image: url('arrow.gif');
background-position: right center;
}
You can put any Widgets as treeItem into the Tree. So if you want to put an item inside the tree which has the icon left just create a horizonal panel, put your text and the icon inside and then put the horizontal panel into the tree... (I know this sounds a little bit complex but it is actually really simple and you can do alot of other cool stuf with it)
Tree t = new Tree();
HorizontalPanel hc = new HorizontalPanel();
hc.add(new Label("some text"));
hc.add(new Image("http://tueffel.net/images/icons/icon13.gif"));
TreeItem ti = new TreeItem(hc);
HorizontalPanel hc2 = new HorizontalPanel();
hc2.add(new Label("some text"));
hc2.add(new Image("http://tueffel.net/images/icons/icon13.gif"));
ti.addItem(new TreeItem(hc2));
t.addItem(ti);
RootPanel.get().add(t);
I have a CellTree with my own TreeModel which return a NodeInfo with custom renderer.
something like this:
viewModel = new MyTreeModel( dirs.getRootItems(), filter );
treeDrives = new CellTree( viewModel, null, treeResources );
public class MyTreeModel {
#Override
public <T> NodeInfo<?> getNodeInfo( final T value ) {
return new DefaultNodeInfo<Item>( new ListDataProvider<Item>( dirs ), new DirectoryCell(), selectionModel, null );
}
}
private final class DirectoryCell extends AbstractCell<Item> {
#Override
public void render( com.google.gwt.cell.client.Cell.Context context, Item value, SafeHtmlBuilder sb ) {
// my own html renderer ...
sb.appendHtmlConstant(value.toString);
sb.append"<img src=\"" + value.getImgUrl() + "\" //>");
}
new TreeItem(new HTML("Item Text <img src='path/to/image.png'>"));
Related
I'm realitively new to vaadin and I'm struggling with this problems for 2 days now and I'm desperate.
I modified the original addressbook example and it was perfect until that point when I had to expand the ContactForm with another controlls.
It's easier to show what i want to achieve.
It would be good if I could scroll on the right, but I cant. I show what i have already maybe some of you will notice my fault. I wont post all of the code, just the necessary parts.
This is where I create the main layout.
public class VaadinKoliUI extends UI {
#Override
protected void init(VaadinRequest request) {
TabSheet tabsheet = new TabSheet();
HorizontalLayout residentalsTab = new ResidentalsUI();
residentalsTab.setSizeFull();
tabsheet.addTab(residentalsTab,"Lakók");
tabsheet.setSizeFull();
setContent(tabsheet);
}
}
public class ResidentalsUI extends HorizontalLayout implements View{
private Grid residentalsList = new Grid();
ResidentalFormTest residentalForm = new ResidentalFormTest(this);
public ResidentalsUI(){
buildLayout();
}
private void buildLayout(){
HorizontalLayout actions = new HorizontalLayout(filter,excelDownload, newResidental);
actions.setWidth("100%");
filter.setWidth("100%");
actions.setExpandRatio(filter, 1);
VerticalLayout left = new VerticalLayout(actions, getResidentalsList());
left.setSizeFull();
getResidentalsList().setSizeFull();
left.setExpandRatio(getResidentalsList(), 1);
HorizontalLayout mainLayout = new HorizontalLayout(left, residentalForm);
mainLayout.setSizeFull();
mainLayout.setExpandRatio(left, 1);
this.setSizeFull();
this.addComponent(mainLayout);
}
}
public class ResidentalFormTest extends Panel{
FormLayout content = new FormLayout();
Button save = new Button("Save", this::save);
//more buttons and controlls
public ResidentalFormTest(ResidentalsUI rUI) {
this.rUI = rUI;
buildLayout();
}
private void buildLayout() {
this.setSizeUndefined();
content.setMargin(true);
HorizontalLayout actions = new HorizontalLayout(save, cancel);
actions.setSpacing(true);
content.addComponents(actions, name, sex, address, email, phoneNumber, major,classYear,neptunCode,
roomNumber, rfidCode,comment,equipment,equipment1,equipment2);
actions.setSizeUndefined();
this.setContent(content);
}
}
So from what I understood yet, I have to use a Panel because the FormLayout is not capable to show a scrollbar. I should set my root to full with .setSizeFull() and the childs to undefined with .setSizeUndefined() so it would be the size of the browser window and if something is bigger it would show a scrollbar.
If I modify the VaadinKoliUI class as the following I have the scrollbar but the ui shrinks.
public class VaadinKoliUI extends UI {
#Override
protected void init(VaadinRequest request) {
TabSheet tabsheet = new TabSheet();
HorizontalLayout residentalsTab = new ResidentalsUI();
residentalsTab.setSizeUndefined();
tabsheet.addTab(residentalsTab,"Lakók");
tabsheet.setSizeFull();
setContent(tabsheet);
}
}
Like this:
And now I don't know what to do.
But if someone has an easier and quicker idea, to make the ContactForm to scrollable please tell me.
Thanks in advance
Balázs
I should set my root to full with .setSizeFull() and the childs to undefined...
In your case you should see the root as being your Panel and the FormLayout as the child. As per the Vaadin book:
Normally, if a panel has undefined size in a direction, as it has by
default vertically, it will fit the size of the content and grow as
the content grows. However, if it has a fixed or percentual size and
its content becomes too big to fit in the content area, a scroll bar
will appear for the particular direction
The image below is a naive attempt at a visual representation:
This being said, from the moment you modified ResidentalFormTest to extend a Panel and set the FormLayout as it's content, in order to make your panel have a scroll:
set the panel size to 100%, in ResidentalFormTest.buildLayout():
this.setSizeFull()
set the content size to undefined so it can "expand" beyond the panel size: in ResidentalFormTest.buildLayout(): content.setSizeUndefined()
To fix the space allocation between the grid and panel I reckon a 3:1 ratio should suffice. in ResidentalsUI.buildLayout():
mainLayout.setExpandRatio(left, 3);
mainLayout.setExpandRatio(residentalForm, 1);
NOTE: At times it may come in handy to inspect (or experiment with changes) the rendered elements' properties, styles, etc. Some browsers (chrome, firefox) have built-in support for such developer tools, accessible through a menu or a keyboard combination such as CTRL+SHIFT+I
I think you should have
VaadinKoliUI.setSizeFull
ResidentalsUI.setSizeFull
ResidentalsUI.residentalsList.setSizeFull
ResidentalFormTest.setSizeFull
ResidentalFormTest.content.setSizeUndefined
ResidentalsUI.left.setSizeFull
I also suggest to eliminate the HorizontalLayout mainLayout in ResidentalsUI since it is a horizontal layout itself (and if possible to rename it since it isn't a UI and remove the implements View since it does not seem a view).
Your expand ratios looks good, here are the classes I would wrote:
public class VaadinKoliUI extends UI {
#Override
protected void init(VaadinRequest request) {
TabSheet tabsheet = new TabSheet();
ResidentalsLayout residentalsTab = new ResidentalsLayout();
residentalsTab.setSizeFull();
tabsheet.addTab(residentalsTab,"Lakók");
tabsheet.setSizeFull();
setContent(tabsheet);
}
public class ResidentalsLayout extends HorizontalLayout {
private Grid residentalsList = new Grid();
ResidentalFormTest residentalForm = new ResidentalFormTest(this);
public ResidentalsLayout(){
buildLayout();
}
private void buildLayout(){
HorizontalLayout actions = new HorizontalLayout(filter,excelDownload, newResidental);
actions.setWidth("100%");
filter.setWidth("100%");
actions.setExpandRatio(filter, 1);
VerticalLayout left = new VerticalLayout(actions, getResidentalsList());
left.setSizeFull();
residentalsList.setSizeFull();
left.setExpandRatio(residentalsList , 1);
addComponents(left, residentalForm);
setExpandRatio(left, 1);
setSizeFull();
}
}
public class ResidentalFormTest extends Panel {
FormLayout content = new FormLayout();
Button save = new Button("Save", this::save);
//more buttons and controlls
public ResidentalFormTest(ResidentalsLayout rUI) {
this.rUI = rUI;
buildLayout();
}
private void buildLayout() {
setSizeFull();
content.setMargin(true);
HorizontalLayout actions = new HorizontalLayout(save, cancel);
actions.setSpacing(true);
content.addComponents(actions, name, sex, address, email, phoneNumber, major,classYear,neptunCode, roomNumber, rfidCode, comment, equipment, equipment1, equipment2);
content.setSizeUndefined();
setContent(content);
}
}
Let me know if it works as expected.
Title says it all. Let's say I have a right-click menu with "Strikethrough selected text" option. When I have selected some text in jtextpane, right-click --> "Strikethrough selected text" , and the selected text gets strikedthrough.
Any ideas?
Swing text components use Actions to provide the various formatting features of a text pane.
Following is the code for the UnderlineAction of the StyledEditorKit.
public static class UnderlineAction extends StyledTextAction {
/**
* Constructs a new UnderlineAction.
*/
public UnderlineAction() {
super("font-underline");
}
/**
* Toggles the Underline attribute.
*
* #param e the action event
*/
public void actionPerformed(ActionEvent e) {
JEditorPane editor = getEditor(e);
if (editor != null) {
StyledEditorKit kit = getStyledEditorKit(editor);
MutableAttributeSet attr = kit.getInputAttributes();
boolean underline = (StyleConstants.isUnderline(attr)) ? false : true;
SimpleAttributeSet sas = new SimpleAttributeSet();
StyleConstants.setUnderline(sas, underline);
setCharacterAttributes(editor, sas, false);
}
}
}
So basically you will need to create your own "StrikeThroughAction" by replacing the "underline" StyleConstants methods to use the "strikethrough" StyleConstants methods.
Once you create a Action you can then use the Action by creating a JMenuItem or JButton with the Action. When the component is clicked the strike through attribute will then be added to the selected text.
in your right click action
objJTextPane.setContentType( "text/html" );
String[] args = objJTextPane.getText().split(objJTextPane.getSelectedText());
objJTextPane.setText("<strike>" + objJTextPane.getSelectedText() + "</strike>"+ args[1].toString());
apply your logic in splitting string.
I'm having problems understanding how a TreeViewer's item is highlighted while a user is dragging an item.
Here's what happens: I start dragging the bottom item within the Treeviewer, and the items next to it highlight accordingly. The problem is, I can't get the highlighted item from the DragOver event. But if i drop the item from this position, the event in Drop method will have the "item" field holding the highlighted item. The tree's selection isn't changed when the highlight occurs
What i want to do: I want to change the image of the pointer according to the highlighted item. The problem is I don't know how to understand which one is highlighted. Another mistery to me is that in the Drop method the highlighted item will be the target of the drop (the secont Field from the top, in this case). I do not want to use SWT.FULL_SELECTION
Here's the image:
Source snippets (what i want is the functionality of DragOver in cases when I'm not directly hovering over an item)
final DropTarget valuesTarget = new DropTarget(tree, DND.DROP_MOVE);
valuesTarget.addDropListener(new DropTargetAdapter()
#Override
public void dragOver(DropTargetEvent event)
{
if (transfer.isSupportedType(event.currentDataType))
{
final DropTarget target = (DropTarget)event.widget;
final Tree tree = (Tree)target.getControl();
final Point relativeDropPoint = getRelativeDropPoint(event);
final TreeItem targetItem = tree.getItem(relativeDropPoint);
if (targetItem != null)
{
event.feedback =
DND.FEEDBACK_SELECT | DND.FEEDBACK_SCROLL;
if (event.item.getData() instanceof NotAcceptableClass)
{
event.detail = DND.DROP_NONE;
}
}
}
}
private Point getRelativeDropPoint(DropTargetEvent event)
{
final Tree tree = (Tree)((DropTarget)event.widget).getControl();
final Point tableLocation = tree.toDisplay(0, 0);
return new Point(event.x - tableLocation.x, event.y
- tableLocation.y);
}
Take the TreeItem directly from DropTargetEvent.item.
If you would be using JFace TreeViewer with associated content and label providers then you could use ViewerDropAdapter, which would take care of resolving the item.
As you can see from the images below the expand and collapse icons are gray, as is the row selection highlight. This causes you to not see the expand or collapse icon (Note: Not the folder icon) when the row is highlighted, I want to have a white expand or collapse icon for the row that is selected. How can that be done?
Something else that would also be cool is, to have the expand and collapse icons completely hidden until the JTree gains focus. like windows 7's tree.
Google says -according to this post: http://www.exampledepot.com/egs/javax.swing.tree/DefIcons.html - :
// Retrieve the three icons
Icon leafIcon = new ImageIcon("leaf.gif");
Icon openIcon = new ImageIcon("open.gif");
Icon closedIcon = new ImageIcon("closed.gif");
// Create tree
JTree tree = new JTree();
// Update only one tree instance
DefaultTreeCellRenderer renderer = (DefaultTreeCellRenderer)tree.getCellRenderer();
renderer.setLeafIcon(leafIcon);
renderer.setClosedIcon(closedIcon);
renderer.setOpenIcon(openIcon);
// Remove the icons
renderer.setLeafIcon(null);
renderer.setClosedIcon(null);
renderer.setOpenIcon(null);
// Change defaults so that all new tree components will have new icons
UIManager.put("Tree.leafIcon", leafIcon);
UIManager.put("Tree.openIcon", openIcon);
UIManager.put("Tree.closedIcon", closedIcon);
// Create tree with new icons
tree = new JTree();
// Update row height based on new icons;
Certainly, I'm not sure if you can modify only the color of the images on-the-go. But you can always create new icons, right?
You can try this. You should note however to get this to work, I had to override setUI on the tree to only allow my TreeUI.
private class IconTreeUI extends BasicTreeUI {
private Icon collapseIcon = null;
private Icon expandIcon = null;
#Override
public Icon getCollapsedIcon() {
if (collapseIcon == null) {
collapseIcon = new ImageIcon(yourCollapseImageHere);
}
return collapseIcon;
}
#Override
public Icon getExpandedIcon() {
if (expandIcon == null) {
expandIcon = new ImageIcon(yourExpandImageHere);
}
return expandIcon;
}}
How to add Hyperlink in SWT Table column ?
I`m using org.eclipse.swt.widgets.Table class.
Is there any way to do this without using TableViewer, JFace ?
I tried this way but not working correctly (not showing hyperlinks).
for(int i=2; i<4; i++){
Hyperlink link = new Hyperlink(table, SWT.WRAP);
link.setText(temp[i]);
link.setUnderlined(true);
TableEditor editor = new TableEditor(table);
editor.setEditor(link, tableItem[index-1], i); //set hyperlinks in column i
}
Below is one way to draw the hyperlink using TableView with a LabelProvider, as mentioned in Tonny Madsen's answer.
The code below just paints the hyperlink.
TableViewerColumn column = ...
column.setLabelProvider( new MyHyperlinkLabelProvider( tableViewerFiles.getTable() ));
private final class MyHyperlinkLabelProvider extends StyledCellLabelProvider {
MyHyperlink m_control;
private MyHyperlinkLabelProvider( Composite parent ) {
m_control = new MyHyperlink( parent, SWT.WRAP );
}
#Override
protected void paint( Event event, Object element ) {
String sValue = ... [Get cell value from row element]
m_control.setText( sValue );
GC gc = event.gc;
Rectangle cellRect = new Rectangle( event.x, event.y, event.width, event.height );
cellRect.width = 4000;
m_control.paintText( gc, cellRect);
}
}
private class MyHyperlink extends Hyperlink {
public MyHyperlink(Composite parent, int style) {
super(parent, style);
this.setUnderlined(true);
}
#Override
public void paintText(GC gc, Rectangle bounds) {
super.paintText(gc, bounds);
}
}
Yes, that is certainly possible. To do this you have to implement SWT.ItemPaint (and possibly also SWT.ItemErase and SWT.ItemMeassure).
It is easier with TableView though if you use the correct LabelProvider...
You need to set the size of the editor:
editor.grabHorizontal = true;
//or
editor.minimumWidth = 50;