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:
Related
I'm working in a GUI Java Application in Eclipse IDE. I'm using Window Builder to speed the UI design.
As a part of refactoring, I've changed the sequential and repetitive code to encapsulated versions in other packages, this breaks the "Design" view, but does not affect the application itself.
The problem is that any change made to the ui needs to be seen through the compiled app, (after compile and run the app I mean), and I need to manually relaunch app any time I make a change.
So, my question is:
Is there any plugin or tool that detects changes and automatically relaunches the application, as nodemon does in Nodejs applications.
Thanks in advance.
There is no such tool AFAIK. The next thing is to place the program in Debug mode add a refresh button to redraw the widget and hope for the best (the JVM might or might not be able to re-initialize your class).
Alternatively, you can create a class that monitors the filesystem for recompiles and then restarts your application.
All bleh...
The best tip I can give you is to redesign your application in a way that Windowbuilder can understand.
I assume you have refactored your UI into multiple modular parts. If your UI consists of e.g. a Customer Detail panel and a Customer List panel, you might want to develop each of these separately. This is something WB can handle fine.
Create your modular UI classes in such a way that WB can understand them by subclassing a Widget (preferably Composite). The class below can be added to the palette of Windowbuilder and dragged into your 'composite' application.
public class MyCustomerDetail extends Composite {
public MyCustomerDetail(Composite pParent, int pStyle) {
super(pParent, pStyle);
GridLayout gridLayout = new GridLayout(2, false);
setLayout(gridLayout);
Label label = new Label(this, SWT.NONE);
label.setLayoutData(new GridData(SWT.BEGINNING, SWT.CENTER, false, false));
label.setText("Customer Name");
Text name = new Text(this, SWT.SINGLE | SWT.LEAD | SWT.BORDER);
name.setLayoutData(new GridData(SWT.FILL, SWT.CENTER, true, false));
}
}
Don't make a POJO class with a GUI method. The following class cannot be handled by WB and is of bad taste altogether.
public class MyCustomerDetail {
public void createUI(Composite pParent) {
Label label = new Label(pParent, SWT.NONE);
label.setLayoutData(new GridData(SWT.BEGINNING, SWT.CENTER, false, false));
label.setText("Customer Name");
Text name = new Text(pParent, SWT.SINGLE | SWT.LEAD | SWT.BORDER);
name.setLayoutData(new GridData(SWT.FILL, SWT.CENTER, true, false));
}
}
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);
}
}
I am trying to make a JTabbedPane in Java 7 on OSX that has tabs positioned to the left with their text horizontal (instead of vertical). However, with the code:
import javax.swing.*;
import java.awt.Dimension;
class Probs extends JDialog {
JTabbedPane options = new JTabbedPane();
Probs(JFrame owner) {
//main constructor
super(owner, "User Preferences", true);
//set the tabs to be left aligned
options.setTabPlacement(JTabbedPane.LEFT);
//construct the authorization panel
JPanel authorization = new JPanel();
authorization.add(new JLabel("test"));
options.addTab("test", authorization);
add(options);
setSize(new Dimension(300,300)); //should use pack here
setResizable(false);
setLocationRelativeTo(null);
setVisible(true);
}
public static void main(String[] args) {
JFrame test = new JFrame();
new Probs(test);
test.dispose();
}
}
I get a dialog box which looks like: this image
I would like the tab text to be horizontal (the 'test' title on the tab be oriented horizontally instead of vertically).
I searched around on Google for a while and have only run into occurrences wherein people wanted to achieve vertical text on their tabs, I could not manage to locate any in which people wanted to have horizontal text (what I am trying to achieve).
In particular, I am trying to achieve something which exactly looks like the image mentioned in the first post of this question. It is basically the exact opposite of that question because the person in that tab started with what I am trying to achieve (I believe). Basically, I am trying to determine how to create the image displayed in the first post of that question.
Can someone please tell me how to have left-oriented tabs while preserving horizontal tab titles (as opposed to vertical)?
Thank you for your time and assistance.
Again, since I can't replicate the problem, Try this suggestion:
JPanel authorization = new JPanel();
authorization.add(new JLabel("test"));
options.addTab("", authorization);
JLabel labTab2 = new JLabel("test"); // create a label
options.setTabComponentAt(0, labTab2); // set it to the component
The alignment is determined by your operating system. If you want to change the alignment of the tab text, you have to change the look and feel of your swing application. This worked for me. See here.
The system look and feel at MacOSX didn't support what you want in JTabbedPane. You must create a customized JComponent to do this or to set the look and feel of your application to cross platform (java metal) as stated before by #MonkeySupersonic.
I suggest the readings:
Apple Java Development Guide (section: User Interface Toolkits for Java) - https://developer.apple.com/library/content/documentation/Java/Conceptual/Java14Development/04-JavaUIToolkits/JavaUIToolkits.html
mac User Interface Guidelines - https://developer.apple.com/macos/human-interface-guidelines
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);
I am trying to create a gradient fill for a series in an area chart that I am building through the BIRT chart API, but the book "Integrating and Extending BIRT" and the Interwebs seem curiously silent about how to get it to work. It seems no matter what I do, I always get a flat color from the default palette. I've tried using SeriesDefinition.getSeriesPalette().update(Gradient) and even creating my own Palette with the gradient fill in it and setting that on the SeriesDefinition, but to no avail. I've also noticed that if I do not perform a shift() on the Palette, even if it's shift(0), which the Javadocs claim will do nothing, I get NullPointerException when I try to generate the chart:
Caused by: java.lang.NullPointerException
at org.eclipse.birt.chart.render.Area.renderDataPoints(Area.java:521)
at org.eclipse.birt.chart.render.Line.renderSeries(Line.java:570)
at org.eclipse.birt.chart.render.AxesRenderer.renderPlot(AxesRenderer.java:2181)
at org.eclipse.birt.chart.render.AxesRenderer.render(AxesRenderer.java:314)
at org.eclipse.birt.chart.factory.Generator.render(Generator.java:1368)
... 108 more
Here's the latest (non-working) code that I've tried:
Gradient gradient = FillUtil.createDefaultGradient(BirtReportBuilder.COLOR_WHITE);
gradient.setStartColor(ColorDefinitionImpl.WHITE());
gradient.setEndColor(ColorDefinitionImpl.create(76, 116, 131));
gradient.setDirection(90);
SeriesDefinition sdY = SeriesDefinitionImpl.create();
sdY.getQuery().setDefinition("\"Quantity\"");
Palette pal = PaletteImpl.create(gradient);
pal.shift(0);
sdY.setSeriesPalette(pal);
sdY.getSeries().add(as1);
yAxisPrimary.getSeriesDefinitions().add(sdY);
So what's the magic incantation to get the BIRT charting API to use my Gradient as the area fill?
This code works for me, I get a ugly coloured serie...
sdY.getSeriesPalette().update(GradientImpl.create(ColorDefinitionImpl.create(255,255,255), ColorDefinitionImpl.create(200,0,0,150), 90, false));
Hope it will help you ;p