Size/Resize Containers Labels and Buttons in CN1 - java

i have difficulties in resizing elements in CN1, f.e. i want to resize a Button and put an image on it to use in a MenuBar, the Buttons are too big so that it exceeds the space of a Samsung S5 Display. Im working with the Designer and tried a lot with the Themes/Styles but dont seem to find a solution for this.
The MenuBar as in the screen has too large buttons, the left one is the Logo of the Company, the Buttons are three in total but only two can be seen..
For the yellow status icon, same problem same hassle :\
Do i really have to manage this in source code or is there a more convenient way with the UIDesigner.
Regards
EDIT : i now found out that using "icon" in the Designer is rubbish. Instead use this following Trick.
Put in a Text, define a Style in the ThemeEditor, set Font-Size in millimeters. Also set the Background Image and its behaviour to ScaleToFit, it should Resize now. Only Downside i have using this technique is that i have to use Whitespaces instead of a Text, is this really the best practice or does someone have a better approach?
Also another downside is that for every Image you have to Design a single Style

In order to support multi DPI's the icon needs to adjust it's size to the many screen sizes available.
Use multi-image https://www.codenameone.com/how-do-i---fetch-an-image-from-the-resource-file---add-a-multiimage.html

Related

Creating a fully dynamic GUI

I'm currently trying to learn JavaFX and FXML (and Java) and decided to write a textbased RPG. The basis for this was already written quite some time ago, but now I wanted to do the whole thing better. Including the visuals, that is, the GUI.
First of all: I'd like to do this using FXML. That does not mean however that I'm not interested in seeing a way using basic Java.
What I want to build is a fully dynamic GUI. No Matter how it is resized, the components (and ideally the text as well) would be at the same location, relative to the other components / window border.
The window would have some kind of top line with several buttons for saving, the menu, overview and whatnot. Below that, on the left side, would be Character information: Health, Experience, Money etc. On the right side would be the text output (using a Scrollpane) plus a text field, for user input. Below the text input/output I'd place the buttons used for actions and decisions. Bottom left corner does not contain anything, though it should be a separate area.
At first I tried using Splitpanes, not knowing that they can be resized anytime and have visible Dividers. Now I'm not sure what to do.
A Gridpane would give some of the functionality I need (separate the areas), but also does not give the flexibility I want (unless I just don't know how to do it). I couldn't get it to work. So I tried using simple Panels. But with them I couldn't figure out how to keep the panels keep their relative position and size, and how to make the Buttons stick to the borders.
So what would be the best way to go about this? GridPane? Panel? Something else I'm missing? Since I don't really know how to achieve this, any help in any direction would be highly appreciated.
Have you read the layout tutorial?
From your description, it sounds like a BorderPane might be best for the overall layout (i.e. the root of your scene graph): I'm not quite sure if you could easily make this give you the empty bottom left corner you want. Alternatively you could use a GridPane as you suggested, with appropriate ColumnConstraints and RowConstraints applied to size the cells in the pane.

How to create a customizable User Interface with swing

I've searched through google, but there doesn't seem to be anything on this. In almost every user interface, you can resize parts of it in order to make it more custom (from the users perspective). For instants, in eclipse, one can resize the consul relative to the area with the code by clicking on the spot in-between the two panels/parts and dragging. One can also click and drag the area in between the Package Explorer and the rest of the parts in order to resize that. How would I do this? By "this", I mean allow users to resize the amount of space given to each part of the layout? How do I get the little division-sign-like curser to show up? What layout should I use?
You seem to be describing a JSplitPane.
Take a look at How to use Split Panes for tones of examples

Why is it frowned upon to use a null layout in Swing?

Recently, I started creating a program for the company I work for. Just as background info, I'm still a student and a beginner programmer, so my solution is probably not recommended and I didn't know how to do it otherwise, but it works and I'm not going to be judged for it because it's a student job totally unrelated to programming.
The thing about the program is, it's going to be run on multiple different computer with different screen sizes and resolutions (800x600 and up). To make sure it takes as much of the screen as possible without losing any part of the program, I set the layout to null and hard-coded everything using relative values.
The program is kiosk-style and I first get the screen size values and go from there (for example, off the top of my head, the left-side menu takes an eighth of the screen, the top bar 2%, etc.). I also use font metrics to make sure the components are sized correctly and that everything gets displayed nicely.
My question is: why is it so frowned upon to make the layout null instead of using the layout managers? (I was told on some forums that this is a horrible way of doing things) I know how the layout manager works and know how to use the different layouts, but for the requirements of this program (multiple different resolutions, custom button shapes and placements, text changing on the components when you change language, etc.), I couldn't see myself using the layout managers to do it all.
How do you more experienced programmers use the layout managers in a situation like this? And what do you do when you want a button to be somewhere specific and other components somewhere else specific that don't really match any of the predefined layouts?
If you layer the layout managers correctly the screen will re-flow to different sizes for you, the idea is to use a single set of layout managers on ALL screen sizes.
If you use null you will have to do each screen size yourself. Not only that but if the app can be windowed you have to support every possible size they might scroll to.
That's kind of difficult to do, but the layout mangers are designed to do just that.
There are some common tricks. BorderLayout is a great layout to start with. Sometimes you might use it at multiple levels--often with just 2 or 3 components in it. That's because it's really good at giving all but one area the minimum required area and giving everything else to the CENTER.
FlowLayout can be useful but it's tricky if your components are different sizes.
I wouldn't try GridBagLayout unless you are planning to write code to feed your layout manager (an excellent solution at that!).
I also wouldn't use GUI builders, they don't know the overall way you want to reflow your layout.
In a nutshell: because all the work that you explain above is done (or at least: should be done) by the layout manager.
More often than not, when a null layout is used, it also implies that all positions and sizes are hardcoded to a single value, so no flexibility at all is given. This means that changes in window size, language, font size, display density or any other related parameter have no effect on the layout and you get the usual ugly effects: empty parts of the window; tiny, unresizable lists; buttons with their labels cut off; ...
It sounds like the work you do should really be done by the Layout Manager. Either find one that does that (my personal suggestion would be MiGLayout, which does a lot and is easy to use) or write your own.
You are practically using a layout - your own, with all your sophisticated calculations of positions.
You can move these logic to a custom layout manager class to pacify the critics.
hmmm trick should be by mixing LayoutMangers and by usage of numbers of nested JPanels that each could have diferrent Layout or not, really depends of number of JComponents, that allows you to create GUI that looks like as layed by using AbsoluteLayout but with same look/output to the GUI for every screen resolutions and ratio (4:3, 16:9, 16:10)

Component for glass pane console-style text display

I'm trying to provide a progress report for a slow operation, in the form of text scrolling up from the bottom of the screen with details on what's going on - it's an effect you may have seen a few times in video games when they're loading maps, making network connections and suchlike.
Glass pane seems to be the way to get the text overlay, that much I have working. My problem is exactly what component to use for the actual text display.
JTextArea can display text, but as far as I can see, it can only do it from the top of the screen down - is there a way to make it scroll text up from the bottom of the screen?
JLabel by contrast can align the first line of text to the bottom of the screen, and even take appended text on that line, but when I add more lines separated by newline characters, it just seems to swallow them up even after calling repaint and validate. Is there a way to make it scroll up with the new text?
Or is there another component I should be using instead?
I really like JXLayer for effects layered over Swing components. JXLayer was at one point scheduled to be included in Java 7. Unfortunately the moving around that has been going on Java.net lost all the good content that the author had. There are still some other great resources around (Java 7 required for this one) on the web. I use JXLayer to provide panels with a busy state having a web-like spinner and greyed out appearance.
Another alternative (not as capable as JXLayer IMHO) is MigLayout has absolute positioning, which is maybe easier than the GlassPane.
JLabel would be the easiest. Otherwise you will have to override paintComponent to do anything fancy like animating the text movement.

jButton resizing upon changing text label

I'm reasonably new to java GUIs and have been using netbeans to help me out.
I've set up a jButton such that when clicked its label changes. My issue is that the size of the button refuses to remain fixed despite setting a maximum and minimum size as well as the setting the preferredSize method. Do I need to change my layout? Should I go through and place each button on a panel or is there a simpler way?
I feel like this should be an easy problem to fix yet I've been at it for over an hour now. I'd appreciate any ideas. Thanks
If you are new to Swing don't use a GUI builder as you will run into all sorts of issues like this one.
It sounds like your Layout is preventing resizing. Make sure you are using the correct Layout Manager for your designed look. Double check any constraints that you have set for the layout. You could experiment with a different layout manager like FlowLayout to check to make sure your setPreferredSize () calls are working correctly etc.
There are a number of ways to handle this:
A clean and easy way would be to create image icons for the different buttons, making them the same size. This lets you completely control what they will look like.
A quick-and-dirty way to do this is the add spaces until the buttons are approximately the same size. This won't be perfect because the fonts that appear on JButons are typically not fixed-width.
The 'proper' Swing way would be to use a custom Layout. For instance, if you use a GridBagLayout to arrange your components, and set the 'weightx' and 'weighty' for the JButton to 1.0, then it will take up as much space as possible, which will keep it the same size.

Categories