UI not aligning - java

I am using LibGDX and Scene2D to create a simple menu for my game.
Here is a simple example that works for me:
table.add(gameLogo).row();
table.add(button1).row();
table.add(button2).row();
table.add(button3).row();
I didn't include the irrelevant code(including the table into the stage for example).
If I don't include .row() to each object that I add to the table, then the menu isn't aligning to the center, which is very odd, for example:
table.add(gameLogo).row();
table.add(button1);
table.add(button2).row();
table.add(button3);
Why is the menu behaving like that? should I use more tables or add some HorizontalGroups perhaps?
If you need any additional information, or images I can provide, although it does the same for even the simplest menu implemention possible with LibGDX and Scene2d.

This is a colspan problem.
Looking at your code, this is what you are currently doing :
I assume that you would like to display your menu like that :
In order to do that, as you can see, you need to set the colspan size of your gamelogo to 2, so that it will take as much size as 2 regular cells.
So, to achieve this result, your code should be :
table.add(gameLogo).colspan(2).center().row();
table.add(button1);
table.add(button2).row();
table.add(button3);
The align(Align.center) or center() methods will not work alone, since these methods are only used to align the widget inside it's own cell.
If you experience more problems with libgdx ui table, remember that you can enable a debug renderer to display the cells border :
table.setDebug(true);

Related

draw layout widget on libgdx

I am almost new on LibGDX
I need to draw an overlay on my game like this one:
There is a background, 2 text and a botton
I would like to draw it using a class and reuse it in many part of my game.
I try to extend a "stack" class but is not good.
Also I would like to add the class into a table so probably I need to extend an actor
Can somebody tell me witch layout/class/widget is the best to achive this?
Thanks
If your layout will be similar to the image you posted, you could use a Table for that.
https://javadoc.io/static/com.badlogicgames.gdx/gdx/1.11.0/com/badlogic/gdx/scenes/scene2d/ui/Table.html
I often use nested Tables if I need to span multiple columns/rows instead of trying to do everything in one Table. This makes things easier to work with IMO.
For the example image you posted, you could use two tables. Table1 is the entire widget and Table2 has the two Label (text) items. Then you can set the background on Table1, which will place the background behind everything in the table.
To layout each item in the Table, the Cell (part of LibGDX's Table) is typically used for this. You can set size, alignment, padding, spacing, etc. on each cell of the table to get the layout you want.
For example, to add a padding of 20 to the left side of the button:
table1.getCell(button).padLeft(20);
Here is the API for Cell.
https://javadoc.io/static/com.badlogicgames.gdx/gdx/1.11.0/com/badlogic/gdx/scenes/scene2d/ui/Cell.html

Creating set of JButtons according to retrieved database values

I'm working on a POS system for a fast food restaurant. I've developed Adding, updating and deleting products using a MySQL Database. Now I need to create the POS GUI (using SWING) which the cashier uses to create the bill. The interface I have in mind is like what MacDonald's uses, there's a set of buttons with the product images. (I have stored BLOBS of products successfully)
example image :
I have no idea on how to accomplish this, it would be awesome if its possible to generate a set of dynamic Jbuttons which gets the image of a product along with the name and price. Is this the best way to accomplish this? and how do I achieve this? A few details to put me on the correct path will be greatly appreciated!
Thanks.
You have at least four containers, the top row, the bottom row and each row containing a separate container in the middle (for the buttons).
The basic layout for the rows might be a GridLayout, each row would probably use a BorderLayout with the nav buttons in the WEST and EAST positions. CENTER container could use a GridLayout, but won't give you the look you're after. You could use a FlowLayout and even a GridBagLayout, but you'd need to ensure the size of the buttons where correct for your needs
On the left I see a JTable and two JPanels, containing the buttons, held together with a GridBagLayout.
On the right I see a JList. See How to Use Lists for more details. You'll probably also want to have a look at Concepts: Editors and Renderers and Writing a Custom Cell Renderer for details about how you could customise the look of the cells and How to Write a List Selection Listener for details about how to determine when the user changes the selection
Together, they are probably maintained by a GridBagLayout within a single container for ease of use
Along the button is probably another container using a GridBagLayout.
Altogether, they are probably held together by a GridBagLayout
Have a look at Laying Out Components Within a Container, How to Use GridBagLayout, How to Use BorderLayout and How to Use FlowLayout for more details
You will need to look into the GridLayout.
In your case, it might be a little bit more complex since you have multiple grids, some of which seem to be nested within each other.
You should be able to allocate the grid dynamically and then leave it to the layout manager to distribute things evenly over the page.
Depending on the complexity of your layout, it might also be a good idea to look into the GridPane provided by JavaFX.
Hi I look for you this problem and I find this solution ;
http://www.javasrilankansupport.com/2012/06/create-dynamic-jbutton-with-image-and.html

Grid Layout on Android?

I'm looking to create a grid layout - a complicated version actually. Since I am new at Java (I have created some Android Applications) I don't really know how to do this.
Let me explain: I want a grid layout, that looks like this:
But, instead of having pictures and colours inside of each box of the grid.. I want to have a box with 3 apps that the user can change. Kind of like the bottom part of Aviate launcher.
Like this:
So basically, I would like to have a grid layout, that the user can resize each part of the grid, each grid have a 3 apps inside, and the user can redefine those apps.
So how can I do something like that?
Thanks in advance if you understand the question.
I could not understand clearly. But, if you are looking for Gridlayout, try http://developer.android.com/training/displaying-bitmaps/index.html
Or, if you want to make a widget try open source project like https://github.com/twotoasters/HorizontalImageScroller-Android

How to edit the Scroll Bar

I have a JTable in a JScrollPane but I'd like to change the look of the ScrollBar to something a bit better looking; a 'custom design'. Maybe put an image that a user can drag instead of the default thick blue bar. Is this even possible?
The main thing I'd like to do is change the thickness of the bar. My application uses a small window and the ScrollBar looks too thick.
Any help will be much appreciated.
Edit:
Thanks for the responses so far. I just found this; answers my answer, in part: java scrollbar thickness
Unfortunately I cannot provide a sample at the current moment, but you should definitely look into this
The BasicScrollBarUI class allows you to modify different features of a typical JScrollBar, such as various different colors, sizes, and shadow effects. This should be what you are looking for. Basically the idea is that you are supposed to override the installDefaults method and just modify the protected fields to your liking.
But, if you want to get fancy, I would highly suggest looking into JavaFX due to the amount of customizability it supports, one being CSS styling (which should be very helpful to you).

Dynamic JList implementation

I have a list of entities where each entity render into widget based on JPanel. Widgets have dynamic behaviour - once placed on panel it can be changed by underlying entity. This happens automaticaly. Moreover some widgets can be resized by different actions, on button click for example.
The question is how to organise them into something like JList but without rubber stamp technics. In other words I wanna JList where each item rendered with cellrenderer stay "alive".
Right now I have implemented quick-and-dirty component based on JPanel with vertical BoxLayout, it uses JList's renderer component and it's model... but my implementation is too dirty...
Um.. yeah, using JTable is not suitable too.
Do you have some ideas?
If you don't want rubber stamping to take place then you'll have to create your own JList implementation that uses actual components.
You could try and work around the rubber stamping effect by caching each component for each row in your renderer and bind values into it and return that instance when JList asks the renderer for it. This is pretty risky because if you have 20 rows being displayed you'll have to cache 20 instances in your renderer, and only when the row isn't visible can you reuse one. That would mean if you had 5 unique configurations (A,B,C,D,E) of components you might have 10 of type A, 5 of type B, 2 of type C, and 3 of type D, and 0 of type E being displayed. However, you can't simply reuse one of those components without knowing if its being displayed or not. So you'd have to take into account if the row is being displayed and if it's the right type for the row you are rendering. And you'll have to clean up after the row is hidden.
Another option is make a single component for the row that encapsulates all X variations you have and put those on a CardLayout. Then you can simply cache one per row being displayed, and simply swap the card being displayed upon rendering that row. I think that might be the simplest option for you.
The harder part is going to be routing events click mouse clicks, keyboard events, etc to those active components to have them respond like normal components. Re-rendering the buttons when the user clicks them, and so forth is going to be challenging. Not impossible, but tedious.
Finally, variable row height JList is a pain. Especially in your calculations to figure out if a row is displayed or not because you can't simply do easy math like: int rowHeight = jlist.getHeight / model.size(). It doesn't work. You have to calculate each row's height and them up to figure out if a row is visible or not.
Doing what you're talking about is a lot of work, and very tricky coding to work around some of the assumptions of JList to make it work. In the end you might find it easier just to implement your own List control that makes different design decisions. Either way its going to require you are good at Swing to get it to work.
Ok. I don't find any implementation of such component. Let it be first one.
https://github.com/wertlex/JActiveList
P.S. I don't think this is proper way implementation... but it works.
use JList and ActionListener XD

Categories

Resources