I have written an Eclipse plugin which provides some UI which uses the CTabFolder component.
The CTabItems provided by Eclipse have a blue border when active and a white border when inactive (grey if the CTabItem is an Eclipse View).
The CTabItems which I have created are always bordered in white and the text on the active tab is underlined.
How can I control the style of my CTabItems to more closely match the Eclipse tabs?
EDIT:
I have come up with the following code which extracts the correct colors from the active Eclipse theme.
IWorkbench workBench = PlatformUI.getWorkbench();
ITheme theme = workBench.getThemeManager().getCurrentTheme();
ColorRegistry colreg = theme.getColorRegistry();
Color c1 = colreg.get(IWorkbenchThemeConstants.ACTIVE_TAB_BG_START);
Color c2 = colreg.get(IWorkbenchThemeConstants.ACTIVE_TAB_BG_END);
However, this isn't ideal as IWorkbenchThemeConstants is within an eclipse ui internal package.
Is there an alternative public way to reference the same colors referred to by these internal IWorkbenchThemeConstants?
You can use methods for defining gradient on selected and non-selected CTabFolder items. For example
CTabFolder folder = new CTabFolder(shell, SWT.BORDER);
folder.setBackground(new Color[]{display.getSystemColor(SWT.COLOR_YELLOW), display.getSystemColor(SWT.COLOR_RED)}, new int[]{100}, true);
folder.setSelectionBackground(new Color[]{display.getSystemColor(SWT.COLOR_WHITE), display.getSystemColor(SWT.COLOR_BLUE)}, new int[]{100}, true);
will produces this (ugly) tabs
So you just have to hit right colors which eclipse have..
Or you could write your own CTabFolderRenderer and set it to your CTabFolder instance.
EDIT
For Eclipse colors try
folder.setSelectionBackground(new Color[]{new Color(display, new RGB(242, 244, 247)), new Color(display, new RGB(157, 167, 195))}, new int[]{100}, true);
EDIT
Found the way how to do it correctly
folder.setSelectionBackground(new Color[]{display.getSystemColor(SWT.COLOR_TITLE_INACTIVE_BACKGROUND_GRADIENT), display.getSystemColor(SWT.COLOR_TITLE_BACKGROUND)}, new int[]{100}, true);
Related
Vaadin 8 editor of grid doesn't work correctly when I double click on cell that I can edit.
I use the simple code for create grid and add for one column editor component.
VerticalLayout content = new VerticalLayout();
content.setMargin(false);
content.setSpacing(false);
content.setSizeFull();
setContent(content);
Grid<OrderModel> grid = new Grid(OrderModel.class);
grid.setItems(generate());
grid.setSizeFull();
grid.getEditor().setEnabled(true);
grid.getColumn("planningStatus").setEditorComponent(getCombobox());
Next I run app and start to scroll grid till column "planningStatus".
How it works:
So. What should I do or how I should fix it for correct open editor in grid?
Could your problem be related to issue reported here: https://github.com/vaadin/framework/issues/7746 ?
There exists now also add-on which fixes couple of known Editor cell sizing issues:
I have a question concerning ctabfolders in eclipse rcp.
I created an e4 RCP app with a window comprising a stack part container, which contains a stack.
this stack contains 1 part. in this part, there is a ctabfolder and one ctabitem.
when I launch the app via the product file, I see this:
there are 2 problems:
1. the partCTabFolder appears at the top of the window, and I would like to remove it.
2. the test1 CTabItem is not selected; I disabled the flag "simple" with setSimple(false), so the CTabItem should be displayed with rounded borders, which is not the case until I click on it.
in this case, the window appears like this:
the problem 1 remains, but the 2nd one is resolved.
I know that part classes are created lazily, but I think it does not apply here since the part is the only one and is displayed as soon as the window is run.
here is the code of the #PostConstruct method:
#PostConstruct
public void postConstruct(Composite parent) {
parent.setLayout(new FillLayout(SWT.HORIZONTAL));
CTabFolder tabFolder = new CTabFolder(parent, SWT.BORDER);
tabFolder.setSimple(false);
tabFolder.setSelectionBackground(Display.getCurrent().getSystemColor(SWT.COLOR_TITLE_INACTIVE_BACKGROUND_GRADIENT));
CTabItem tbtmTest = new CTabItem(tabFolder, SWT.NONE);
tbtmTest.setText("test1");
Composite composite = new Composite(tabFolder, SWT.NONE);
tbtmTest.setControl(composite);
composite.setLayout(new GridLayout(2, false));
new Label(composite, SWT.NONE);
new Label(composite, SWT.NONE);
new Label(composite, SWT.NONE);
Label lblHelloWolf = new Label(composite, SWT.NONE);
lblHelloWolf.setText("Hello World!");
}
is it possible to get rounded CTabItem borders as soon as the part is displayed?
How to get rid of the "partCTabFolder" text at the top of the window?
thank you
The "partCTabFolder" tab is because you have put your part in a 'Part Stack' - the part stack uses tabs for each part. If you don't want this just put your Part directly in the main window or a Part Sash Container.
CTabFolder only draws the full curved tab for the selected part. Other tabs just have to slightly rounded outline. You can make your tab the selected tab initially by calling:
tabFolder.setSelection(tbtmTest);
I'm stuck with this Codename one UI component for two days and still couldn't get a proper solution...I added tabs in my application but when I run the application, the tabs I added don't look as I expected.
The height of my tab is too big and I want to reduce it.
See the screenshot of how the tab currently looks below:
And here is the code I'm using in my application:
Tabs t = new Tabs();
Style s = UIManager.getInstance().getComponentStyle("Tab");
FontImage icon1 = FontImage.createMaterial(FontImage.MATERIAL_QUESTION_ANSWER, s);
Container container1 = BoxLayout.encloseY();
Container container2 = BoxLayout.encloseY();
t.addTab("Tab1", icon1, container1);
t.addTab("Tab2", container2);
hi.add(BorderLayout.SOUTH, t);
hi.show();
Open your GUI Builder and style the Tab Uiid to reduce the padding as necessary:
Style the Unselected, Selected and Pressed to have the same padding size, see the image below to know the key elements to touch:
I want to add an image and a label in a group on a composite by using eclipse 4 RCP. Example image is like below. How can I do this?
My example code is below:
Group group_incom = new Group(dynamicDataComp, SWT.NONE);
group_incom.setLayout(new GridLayout(2,true));
group_incom.setText("Incom. Msg.");
Label lbl_incomMsg = toolkit.createLabel(group_incom, "# of Incoming Messages : ", SWT.NONE);
Image img = new Image(lbl_incomMsg.getDisplay(), "<path>");
lbl_incomMsg.setImage(img);
lbl_incomMsg.setLocation(15, 15);
lbl_incomMsg.pack();
The problem is, I can see the image but I can not see the label text.
Label can display text or an image, it won't display both. So either use two Label controls one for the image and one for the text or use CLabel which can display both.
Like the subject reads:
How much good-looking UIs can be built using Eclipse RCP?
Can they be built to look as good as the app screen below?
Or, lets just define good being: support for rounded borders, gradient backgrounds, rich text, true type fonts and all those stuff that applies to modern rich UI look and feels.
(source: mimblog.de)
The upcoming eclipse e4 will support for eclipse itself, or RCP applications, all sort of skins including gradient-based ones.
(source: toedter.com)
With its new themes based on CSS like Declarative Syntax, it is really simple to contribute to a rich interface... even the latest 3.6 builds can make use of the CSS themeing support.
An example CSS-File could look like this:
.h2 {
color: white;
font-size: 20pt;
}
.container {
background-color: gradient radial #575757 #101010 60%;
}
and the Java-Code to use it
final Composite p = new Composite(parent, SWT.NONE);
p.setData(CSS_CLASS_KEY, "container");
p.setBackgroundMode(SWT.INHERIT_DEFAULT);
p.setLayout(new GridLayout(2, false));
Label l = new Label(p, SWT.NONE);
l.setData(CSS_CLASS_KEY, "h2");
l.setText("This is a headline");
l.setLayoutData(new GridData(SWT.FILL, SWT.DEFAULT, false, false, 2, 1));
engine.applyStyles(p, true); // Apply the CSS-Instructions of the current active theme
The last line applies the current theme CSS-Information on all elements below the given widget.
Switching between themes is quite easy using:
engine.setTheme("org.eclipse.e4.demo.contacts.dark");
Which makes the 3.x ViewPart look like this with a radial black gradient:
or a bright one: