I have one big SimpleLayoutPanel which is located in RootLayoutPanel.get() and this is a constraint.
Now I want to place some extra panel and want it have position:fixed within browser screen. Is it possible?
I can set this style neither with setStyleName()/CSS, nor with DOM.setStyleAttribute(). In both cases my style is overrining by GWT's
Thanks
the code I succeeded
I used both root panels simultaneously
public void onModuleLoad() {
SimpleLayoutPanel simpleLayoutPanel = new SimpleLayoutPanel();
simpleLayoutPanel.setStyleName("SimpleLayoutPanel");
DOM.setStyleAttribute(simpleLayoutPanel.getElement(), "backgroundColor", "blue");
RootLayoutPanel rootLayoutPanel = RootLayoutPanel.get();
rootLayoutPanel.add(simpleLayoutPanel);
LayoutPanel layoutPanel = new LayoutPanel();
layoutPanel.setStyleName("LayoutPanel");
DOM.setStyleAttribute(layoutPanel.getElement(), "position", "fixed");
DOM.setStyleAttribute(layoutPanel.getElement(), "bottom", "0px");
DOM.setStyleAttribute(layoutPanel.getElement(), "height", "100px");
DOM.setStyleAttribute(layoutPanel.getElement(), "width", "100px");
DOM.setStyleAttribute(layoutPanel.getElement(), "backgroundColor", "red");
RootPanel rootPanel = RootPanel.get();
rootPanel.add(layoutPanel);
}
Both RootLayoutPanel and RootPanel can be used simultaneously.
I succeeded this way. The elements I need to receive resize events, have been put into RootLayoutPanel. And the elements I need to have positioned with fixed, have been put into RootLayout.
I found no way to put everything into one root panel flavour.
If I understood correctly you should be able to use the parent panel's add(Widget/Panel, int x, int y) method to specify exact location at pixel level. So if you have your Root panel called root, and want to add another panel somePanel at 100, 100, root.add(somePanel, 100, 100) should do the job.
Related
We have a project for university which is a program to hold handouts and feedback for courseworks done.
What we've thought of is breaking the whole thing down into smaller pieces, for example:
You have a coursework which requires to write a program and a report on results etc.
So the user will create a new coursework by selecting the "code" and "report" options, since that's what is required. And then we need to create the respective tabs in the program so the user can input what is needed.
I have created all necessary forms and windows, It's just I'm not sure how to move on forward.
a) where should I put my code? should I have it on the "create" event?
b) how do I do this whole custom population thing?
Obviously, I'm not asking for the entire thing in code. I'm not even sure what to read and what to search for.
Following are some screenshots of the ui to help explain what I mean.
New project window
How the main window should be after creating a new projet. Notice the various tabs.
A form for report feedback
On your "Create" button click check for the checkbox.isSelected() and use the method below as:
if(reportCheckbox.isSelected()){
addonScreen(new reportFrame(),"Report Submission");
addonScreen(new reportFeedbackFrame(),"Report Feedback");
}
Use a desktop pane as a container...add your tabbed pane to it
public static JTabbedPane tabbedPane = new JTabbedPane();
jDesktopPane1.add(tabbedPane);
Use this method to add tabs to the layout at runtime
public static void addOnScreen(JInternalFrame inFrame, String title) {
//border for the internal frame
javax.swing.plaf.InternalFrameUI ifu = inFrame.getUI();
((javax.swing.plaf.basic.BasicInternalFrameUI) ifu).setNorthPane(null);
Border b1 = new LineBorder(new Color(114, 139, 173), 3, true) {
};
tabbedPane.setBounds(0, 0, jDesktopPane1.getWidth(), jDesktopPane1.getHeight());
inFrame.setLocation(0, 0);
inFrame.setSize(jDesktopPane1.getWidth(), jDesktopPane1.getHeight());
inFrame.setBorder(b1);
JPanel jp = new JPanel();
jp.setLayout(new GridLayout());
jp.setOpaque(true);
jp.add(inFrame);
tabbedPane.addTab(title, jp);
tabbedPane.setSelectedComponent(jp);
inFrame.requestFocusInWindow();
inFrame.setVisible(true);
tabbedPane.setVisible(true);
}
I am using MigLayout I find it flexible etc,but I am having a problem with centring stuff with it. I tried using gapleft 50% but it seems like the percent number needs to change on different frame sizes, because it's also depending on component's size. so if the component is centred using gapleft 25%, it will be on a different location if i resize the width of my frame.
I've tried using just align center and it doesn't nothing at all.
I've also tried new CC().alignX("center").spanX() and same thing:
(source: gyazo.com)
It's sticks to left, however it does work when I use gapleft, why?
super.setLayout(new MigLayout());
this.loginPane = new LoginPanel();
BufferedImage logo = ImageIO.read(new File("assets/logo.png"));
JLabel logoLabel = new JLabel(new ImageIcon(logo));
super.add(logoLabel, new CC().alignX("center").spanX());
It's sticks to left, however it does work when I use gapleft, why?
Based on this single line:
super.setLayout(new MigLayout()); // why super? Did you override setLayout() method?
By default MigLayout rows doesn't fill all available width but only the necessary to display the longest row (based on components width). Having said this your JLabel fits the logo image width and nothing more and it looks like stick to left side. You have to tell the layout manager that it has to fill all available width when you instantiate it:
super.setLayout(new MigLayout("fillx"));
Or
LC layoutConstraints = new LC();
layoutConstraints.setFillX(true);
super.setLayout(new MigLayout(layoutConstraints);
Then, your component constraints will work as expexted.
Picture
Based on this code snippet:
MigLayout layout = new MigLayout("fillx, debug");
JPanel content = new JPanel(layout);
JLabel label = new JLabel("Warehouse");
label.setFont(label.getFont().deriveFont(Font.BOLD | Font.ITALIC, 18));
CC componentConstraints = new CC();
componentConstraints.alignX("center").spanX();
content.add(label, componentConstraints);
Note: you can enable debug feature by doing this:
super.setLayout(new MigLayout("fillx, debug"));
Or
LC layoutConstraints = new LC();
layoutConstraints.setFillX(true);
layoutConstraints.setDebugMillis(500);
super.setLayout(new MigLayout(layoutConstraints);
I have a class PanelTrial extends JPanel & implements GroupLayout. In it, I have a JTabbedPane namely jTabbedPane on left & another JPanel namely rightPanel on right. In rightPanel, I load 2 panels (namely compoPanel, btnsPanel) alternatively during runtime.
My Issue : Width of compoPanel, btnsPanel is different (and I want it to be different). Initially compoPanel (that is bigger in W) is loaded in the rightPanel. I am looking for is, when I load btnsPanel in rightPanel, I want the jTabbedPane's size to increase and occupy all free space. I update the PreferredSize of jTabbedPane & rightPanel - and their sizes also change. BUT location of rightPanel doesn't move to extreme right - this makes it in the middle of jTabbedPane.
Here is the code that I use :
orgTabDimen = new Dimension(350, 600);
newTabDimen = new Dimension(500, 600);
orgRghtDimen = new Dimension(280, 574);
newRghtDimen = new Dimension(50, 574);
private void updateRightPanel(boolean showBtnPanel) {
rightPanel.removeAll();
GroupLayout layout = (GroupLayout) rightPanel.getLayout();
if (showBtnPanel) {
// SHOW BTNSpANEL
layout.setHorizontalGroup(layout.createSequentialGroup()
.addComponent(btnPanel));
layout.setVerticalGroup(layout.createParallelGroup(
Alignment.TRAILING).addComponent(btnPanel));
// Set respective dimesions
rightPanel.setPreferredSize(newRghtDimen);
this.jTabbedPane1.setPreferredSize(newTabDimen);
} else {
// SHOW COMPOpANEL
layout.setHorizontalGroup(layout.createSequentialGroup()
.addComponent(compoPanel));
layout.setVerticalGroup(layout.createParallelGroup(
Alignment.TRAILING).addComponent(compoPanel));
rightPanel.setPreferredSize(orgRghtDimen);
this.jTabbedPane1.setPreferredSize(orgTabDimen);
}
jPanel1.validate();
this.validate();
}
Can anyone help me solve this issue - am stuck up here. Can't figure out a way where the btnsPanel shows up on extreme right. I even tried with calling invalidate(), but that also didn't help me.
Any help is highly appreciative.
Thanks
I am using RowLayout for a container. The layout is having the Horizontal Orientation. I do not specify any height to the container. I expect it to get the height based on the height of its children. But GXT does not show the children of the container at all unless I explicitly specify height to it.
Is there a way to make the container to get the height depending on its children without specifying the height when using RowLayout with Horizontal Orientation?
public class RowLayoutNoHeight implements EntryPoint {
public void onModuleLoad() {
ContentPanel cp = new ContentPanel();
cp.setSize(300, 400);
final LayoutContainer innerPanel = new LayoutContainer();
innerPanel.setBorders(true);
innerPanel.setLayout(new RowLayout(Orientation.HORIZONTAL));
Text firstText = new Text("First text");
Text secondText = new Text("Second text");
// Here, innerPanel will not have any height. That is, I don't see the
// text components in the UI
innerPanel.add(firstText, new RowData(1, -1));
innerPanel.add(secondText, new RowData(1, -1));
Viewport viewPort = new Viewport();
cp.add(innerPanel);
viewPort.add(cp);
RootPanel.get().add(viewPort);
}
}
GWT version - 2.4
GXT Version - 2.2.5
Browser- IE 8 and Firefox 7.0.1
Thanks,
Ganesh
You have given your innerPanel a Layout which will only affect the widgets within that panel, simply add
cp.setLayout(new RowLayout(Orientation.HORIZONTAL));
after you declare your main panel.
If you could do a layout(true) for your container, you will find your problem disappears right away!
I need to create widget, similar to google maps one.
In it's simplest form, the map of all planet is divided into image tiles. While user scrolls the widget into different directions, new empty cells appeared and widget requests these tiles from the server and put it into the widget.
How it can be implemented in GWT?
I found no way to set absolute position dynamically in ScrollPanel. I found no way to draw something lefter than left or upper then top in AbsolutePanel. How to combine panels correctly?
Thanks.
UPDATE 1
Here is one of the examples. In this example labels do not show, because the size of containing absolute panel is zero by height (looked in firebug). I can't just set it's size because this won't help for label at -100,-100.
public void onModuleLoad() {
Label label_minus100_minus100 = new Label("(-100,-100)");
Label label_0_0 = new Label("(0,0)");
Label label_100_100 = new Label("(100,100)");
AbsolutePanel absolutePanel = new AbsolutePanel();
absolutePanel.setStyleName("absolutePanel");
absolutePanel.add(label_0_0, 0, 0);
absolutePanel.add(label_minus100_minus100, -100, -100);
absolutePanel.add(label_100_100, 100, 100);
DOM.setStyleAttribute(absolutePanel.getElement(), "overflow", "visible");
ScrollPanel scrollPanel = new ScrollPanel();
scrollPanel.add(absolutePanel);
scrollPanel.setStyleName("scrollPanel");
RootPanel rootPanel = RootPanel.get();
rootPanel.add(scrollPanel);
}