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);
}
Related
I am trying to create a textfield that has an image part within itself, similar to this.
imageView.fitHeightProperty().bind(Bindings.createDoubleBinding(
() -> textField.getHeight() -
textField.getPadding().getTop() -
textField.getPadding().getBottom(),
textField.heightProperty(), textField.paddingProperty()));
imageView.fitWidthProperty().bind(imageView.fitHeightProperty());
textField.paddingProperty().bind(Bindings.createObjectBinding(
() -> new Insets(textField.getPadding().getTop(),
textField.getPadding().getRight(),
textField.getPadding().getBottom(),
textField.getPadding().getRight() * 2 + imageView.getFitWidth()),
imageView.fitWidthProperty(), textField.paddingProperty()));
My current approach is to use a StackPane to hold the TextField, then also add an ImageView as the StackPane's child. The ImageView needs to know how resize itself, so I have bound its fitHeight to the TextField's height, with consideration of the TextField's padding.
The ImageView's fitWidth is then bound to its own fitHeight.
Lastly, I need to make my TextField's text offset to the right (because the image is blocking it), so I once again did another binding that is dependent on the ImageView's fitWidth.
This ends up with circular dependency, which causes the stack to overflow. Is there any other way to do it without hard coding the TextField's left padding?
Here is a little exemple, i've used (StackPane/TextField/ImageView) but instead of the Image i advise you to draw your own shape with SVG to have the full control on it (MouseHover/Focused...), i've also used a CSS to achieve this :
Java :
private StackPane sp = new StackPane();
private TextField tf = new TextField();
private ImageView iv;
//Init StackPane
sp.getStylesheets().add(getClass().getResource("style.css").toExternalForm());
sp.getStyleClass().add("identifiant");
sp.setPrefSize(200, 40);
sp.setLayoutX(100);
sp.setLayoutY(100);
//Init ImageView
iv = new ImageView(getClass().getResource("Img.png").toString());
StackPane.setAlignment(iv, Pos.CENTER_LEFT);
StackPane.setMargin(iv, new Insets(0, 0, 0, 10));
//Init TextField
StackPane.setAlignment(tf, Pos.CENTER_LEFT);
StackPane.setMargin(tf, new Insets(2, 5, 0, 30));
//Add all content
sp.getChildren().addAll(iv,tf);
Css :
.identifiant{
-fx-background-color:#45444a;
-fx-effect:innershadow(three-pass-box , rgba(0,0,0) , 6, 0.0 , 0 , 0);
-fx-background-radius:8px;
}
.text-field{
-fx-background-insets:0;
-fx-background-color:#45444a;
-fx-text-fill:white;
}
Hope this will help you !
I want to add multiple images in a ScrollPane when clicking a button. Now when I click the button a new rectangle is created and fitted with a new image.
The problem is the scrollbar is not displaying when a new image is added.
Here is the code:
#FXML
public void handleButtonPause(){
Rectangle r = new Rectangle();
if(counterIm==0){
//Ap1.setMinSize(Sp1.getWidth(), Sp1.getHeight() - 10);
r.setY(Sp1.getHeight() *((double)1/36));
r.setWidth(Sp1.getWidth()*0.75);
rectWidth=r.getWidth();
r.setHeight(Sp1.getHeight()/6);
rectHeight=r.getHeight();
}
else {
r.setY(Sp1.getHeight()*((7*counterIm+1)/36));
r.setWidth(rectWidth);
r.setHeight(rectHeight);
}
r.setX(Sp1.getWidth() / 10);
r.setArcWidth(20);
r.setArcHeight(20);
Ap1.getChildren().add(r);
Image image = new Image(new File("C:\\Users\\Manuel\\Desktop\\error.png").toURI().toString());
r.setFill(new ImagePattern(image));
Sp1.setVvalue(1);
counterIm=counterIm+1;
I don't know how your composition looks like.
A good approach could be to put the images into a VBox and put the VBox into the ScrollPane.
And check if you have set the VBar Policy of your SrollPane:
srollbar.setVbarPolicy(ScrollBarPolicy.AS_NEEDED);
You can also set the maximal height of the VBox to double maximum to make it sure it will always grow vertically:
vbox.setMaxHeight(Double.MAX_VALUE);
I want to know if it's possible to position different elements in a panel like an horizontalPanel for example.
In my Java code, I have an horizontalPanel with two elements, one image and one Label.
I want that my image to be in the left of the Panel and the Label in the middle.
For example:
HorizontalPanel pHeader = new HorizontalPanel();
Image movieData = new Image();
movieData.setUrl("http://i.myegy.to/images/1c58b25ce86e.original.png");
Label titleHead = new Label ("Movies");
pHeader.add(movieData);
pHeader.add(titleHead);
How can I place these both elements?
Thank you for your help.
Mickey74
You can use setCellHorizontalAlignment:
pHeader.setCellHorizontalAlignment(movieData, HasHorizontalAlignment.ALIGN_LEFT);
pHeader.setCellHorizontalAlignment(titleHead, HasHorizontalAlignment.ALIGN_MIDDLE);
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 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.