I want to do something like that:
So at the left side atm I have in the rootController a ListView
#FXML
ListView<String> listView;
which has two Elements, to stick to the picture let's call them ListElement A and B.
First I added these Elements
ObservableList<String> names = FXCollections.observableArrayList("A", "B");
Second I add them to the List:
listView.setItems(names);
in the start method i call the initRootLayout method
void initRootLayout() {
FXMLLoader fxmlLoader = new FXMLLoader(MainDo.class.getResource("view/RootLayout.fxml"));
try {
rootLayout = fxmlLoader.load(); // rootLayout == BorderPane
Scene scene = new Scene(rootLayout);
RootController rootController = fxmlLoader.getController();
primaryStage.setScene(scene);
primaryStage.show();
} catch (IOException e) {
e.printStackTrace();
}
}
My Problems:
If I start my application it loads the everything fine, except the fact that the content of the list is not shown. It looks like that:
If i fix that Problem, I am looking for the feature that A and B have a different fix Tab Pane. So if I am clicking on A and B was shown before, another Tab Pane is shown where i can show different content. So if i have n Elements in the List, I also have n Tab panes.
Can someone please help me here? I tried that already the last 8 hours with zero success.
Thanks
Related
I'm trying to prevent a CollapsingToolbar from expanding for one of my fragments.
Currently, when I use the method setExpanded(), I am able to see the toolbar in its collapsed state.
appBarLayout.setExpanded(false, true);
However, the collapsingToolbar is still expandable, which is not what I want. I want the collapsingToolbar to not be expandable for this particular fragment.
In other words, I want the collapsingToolbar to behave and look like a regular toolbar (i.e. "not expandable") for this particular fragment only.
I am using Mike Penz's Material Drawer. The code below shows the relevant code, with notes indicating what I have tried.
private void buildDrawer(){
Drawer drawer = new DrawerBuilder()
.withActivity(this)
.withFullscreen(true)
.withTranslucentStatusBar(true)
.withToolbar(toolbar)
.withAccountHeader(accountHeader)
.addDrawerItems(
item1,
item2,
new DividerDrawerItem(),
item3,
item4
)
.withOnDrawerItemClickListener(new Drawer.OnDrawerItemClickListener() {
#Override
public boolean onItemClick(View view, int position, IDrawerItem drawerItem) {
FragmentManager fragmentManager = getSupportFragmentManager();
FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
Fragment f = new Fragment();
switch (position) {
//other cases not shown
case 2:
f = new LocateFragment();
appBarLayout.setExpanded(false, true);
//Adding the following three lines don't work - causes the toolbar to be unscrollable, but in its expanded form
//AppBarLayout.LayoutParams p = (AppBarLayout.LayoutParams)collapsingToolbarLayout.getLayoutParams();
//p.setScrollFlags(AppBarLayout.LayoutParams.SCROLL_FLAG_SNAP);
//collapsingToolbarLayout.setLayoutParams(p);
//toolbar.setCollapsible(false); doesn't work either
collapsingToolbarLayout.setTitle("Locate Events");
setInvisibleAddPhotoFab();
break;
//other cases not shown
}
fragmentTransaction.replace(R.id.frame_fragments, f);
fragmentTransaction.commit();
return false; //close drawer onclick
}
})
.build();
loadBackdrop();
}
This is what I want - I want the toolbar to be unexpandable:
Currently, however, it is still expandable, so the image below is NOT what I want:
UPDATE:
I was able to collapse the toolbar and prevent it from expanding like so (code below), but I've run into another issue - the title no longer appears on the collapsingToolbar when I set it like so: collapsingToolbarLayout.setTitle("string");
appBarLayout.setExpanded(false, true);
int px = (int)TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 80, getResources().getDisplayMetrics());
CoordinatorLayout.LayoutParams lp = (CoordinatorLayout.LayoutParams)appBarLayout.getLayoutParams();
lp.height = px;
appBarLayout.setLayoutParams(lp);
I was able to resolve this problem using the following (as shown here by #DanielPersson):
collapsingToolbarLayout.setTitleEnabled(false);
toolbar.setTitle(title);
I'm building a nokia s40 app. I've set this app to be in full screen mode and I notice that when I set this full screen mode, I've lost the native back buttons.
I need to build a back button like the native back button (always on screen, in the bottom right side of the screen). I've tried it with a borderlayout and putting it on the south, but the text from the center container doesn't appears over this...and has transparent background.
If anyone has some sample code, it will be great.
this code simply located a button in the bottom right side of the screen. it's work well.
public void startApp() {
Display.init(this);
Form f = new Form();
//Create a ComponentGroup for all components except backbutton
final ComponentGroup cg = new ComponentGroup();
final Button backButton = new Button("BackButton");
// add this part to your code
f.addOrientationListener(new ActionListener() {
public void actionPerformed(ActionEvent evt) {
Dimension d = new Dimension(Display.getInstance().getDisplayWidth(), Display.getInstance().getDisplayHeight());
cg.setPreferredSize(d);
backButton.setX(Display.getInstance().getDisplayWidth() - backButton.getPreferredW());
}
});
//set CoordinateLayout to f
f.setLayout(new CoordinateLayout(Display.getInstance().getDisplayWidth(), Display.getInstance().getDisplayHeight()));
//Dimension d = new Dimension(Display.getInstance().getDisplayWidth(), Display.getInstance().getDisplayHeight());
cg.setPreferredH(Display.getInstance().getDisplayHeight());
cg.setPreferredW(Display.getInstance().getDisplayWidth());
cg.setLayout(new BorderLayout());
cg.addComponent(BorderLayout.NORTH, new Button("NORTH"));
cg.addComponent(BorderLayout.EAST, new Button("ESET"));
cg.addComponent(BorderLayout.WEST, new Button("WEST"));
cg.addComponent(BorderLayout.CENTER, new TextArea("sdsdsd"));
cg.setX(0);
cg.setY(0);
backButton.getStyle().setBgColor(0x2233ff);
backButton.setX(Display.getInstance().getDisplayWidth() - backButton.getPreferredW());
backButton.setY(Display.getInstance().getDisplayHeight() - backButton.getPreferredH() - f.getTitleArea().getLayoutHeight());
f.addComponent(cg);
f.addComponent(backButton);
f.show();
}
you can do like this to any form.
if you want back Button is showed in all forms you can write some OOP programming to do this.
it works well.
This question already has answers here:
Add fixed positioned Combobox inside FlowPane
(2 answers)
Closed 9 years ago.
I have a FlowPane with panels which will be used to display data in front of the user.
![enter image description here][1]
I added also scrollpane when the number of the panels is bigger than the visible area.
I also want to add filter which will sort the panels by type and will display only the appropriate. The red area will hold the ComboBox which will be the filter.
And as you can see the red are pushes down the FlowPane which will make a gap between the top component and the scroll when I make the area transparent.
Is there a way to use the z-index and place the red are in front of the FlowPane? Or some other solution?
This is the result that I would like to get:
![enter image description here][2]
Investigate this example based on your code in previous questions:
public class Demo extends Application {
#Override
public void start(Stage stage) throws Exception {
StackPane stackPane = new StackPane();
stackPane.setAlignment(Pos.TOP_LEFT);
stackPane.getChildren().addAll(infrastructurePane(), getFilterPane());
Scene scene = new Scene(stackPane);
stage.setScene(scene);
stage.show();
}
public Pane getFilterPane() {
ObservableList<String> options =
FXCollections.observableArrayList(
"Option 1", "Option 2", "Option 3");
ComboBox<String> combo = new ComboBox<String>(options);
HBox pane = new HBox();
pane.setPadding(new Insets(20));
pane.setStyle("-fx-background-color: rgba(255,0,85,0.4)");
pane.getChildren().add(combo);
pane.setMaxHeight(40);
// Optional
//pane.setEffect(new DropShadow(15, Color.RED));
return pane;
}
public ScrollPane infrastructurePane() {
final FlowPane flow = new FlowPane();
flow.setPadding(new Insets(5, 5, 5, 5));
flow.setVgap(5);
flow.setHgap(5);
flow.setAlignment(Pos.CENTER);
final ScrollPane scroll = new ScrollPane();
scroll.setHbarPolicy(ScrollPane.ScrollBarPolicy.AS_NEEDED); // Horizontal scroll bar
scroll.setVbarPolicy(ScrollPane.ScrollBarPolicy.AS_NEEDED); // Vertical scroll bar
scroll.setFitToHeight(true);
scroll.setFitToWidth(true);
scroll.setContent(flow);
// scroll.viewportBoundsProperty().addListener(new ChangeListener<Bounds>() {
// #Override
// public void changed(ObservableValue<? extends Bounds> ov, Bounds oldBounds, Bounds bounds) {
// flow.setPrefWidth(bounds.getWidth());
// flow.setPrefHeight(bounds.getHeight());
// }
// });
//flow.setPrefWrapLength(170); // preferred width allows for two columns
flow.setStyle("-fx-background-color: yellow;");
for (int i = 0; i < 28; i++) {
flow.getChildren().add(generateRectangle());
}
String cssURL = "/com/dx57dc/css/ButtonsDemo.css";
String css = this.getClass().getResource(cssURL).toExternalForm();
flow.getStylesheets().add(css);
return scroll;
}
public Rectangle generateRectangle() {
final Rectangle rect2 = new Rectangle(10, 10, 10, 10);
rect2.setId("app");
rect2.setArcHeight(8);
rect2.setArcWidth(8);
//rect2.setX(10);
//rect2.setY(160);
rect2.setStrokeWidth(1);
rect2.setStroke(Color.WHITE);
rect2.setWidth(220);
rect2.setHeight(180);
rect2.setOnMouseClicked(new EventHandler<MouseEvent>() {
#Override
public void handle(MouseEvent event) {
rect2.setFill(Color.ALICEBLUE);
}
});
return rect2;
}
public static void main(String[] args) {
launch(args);
}
}
EDIT:
As per comment, here is the combo without pane. Since there is no pane the mouse events will not be blocked. Replace only this method with above one:
public ComboBox getFilterPane() {
ObservableList<String> options =
FXCollections.observableArrayList(
"Option 1", "Option 2", "Option 3");
ComboBox<String> combo = new ComboBox<String>(options);
combo.setTranslateX(10);
combo.setTranslateY(10);
return combo;
}
if you're using JavaFX 8, you can try a Notification Pane from ControlsFX project
It looks like:
It's pretty unclear to get which behaviour you don't want and which one you want.
This sentence "And as you can see the red are pushes down the FlowPane which will make a gap between the top component and the scroll when I make the area transparent." is particularly hard to understand.
But if you just want to "use the z-index and place the red are in front of the FlowPane?", maybe all you're asking for is just a StackPane ?
StackPane lays out its children in a back-to-front stack.
The z-order of the children is defined by the order of the children
list with the 0th child being the bottom and last child on top. If a
border and/or padding have been set, the children will be layed out
within those insets.
http://docs.oracle.com/javafx/2/api/javafx/scene/layout/StackPane.html
If you want the red area be part of the ScrollPane:
Create a VBox
Add The Red Area Component to VBox
Add the FlowPane to VBox
Set VBox as the ScrollPanes Content
If the Layout with VBox's doenst look statisfying try Borderpane and set the "Red Area" top and your flowpane as center.
Is there a way to use the z-index and place the red are in front of the FlowPane? Or some other solution?
see QuidNovi's answer
i working little bit with the ListView from JavaFx2. I´m running into one issue.
Is it possible to turn off the clipping of the ListCell/ListView?
I add an ImageView that has to be wider than the ListView and JavaFx2 shows automatically a scrollbar.
This my code snipped how i add the ImageView to my List:
list.setCellFactory(new Callback<ListView<String>, ListCell<String>>() {
#Override
public ListCell<String> call(ListView<String> param) {
final ListCell<String> blub = new ListCell<String>() {
#Override
protected void updateItem(String item, boolean empty) {
super.updateItem(item, empty);
if (item != null) {
StackPane p = new StackPane();
Label label = new Label(item);
p.getChildren().addAll(img, label);
setGraphic(p);
p.setAlignment(Pos.CENTER_LEFT);
}
}
};
blub.setStyle("-fx-background-color:transparent");
return blub;
}
});
Big thanks!
I don't think it's possible.
Maybe try to play with the Skin of the ListView. It seems that the scroll bar are managed in this class. It do not use a scroll pane.
Another solution could be replacing the ListView by a VBox in a ScrollPane.
Finally, you could try to modify img (by the way, where it come from, and what Class is it ?) to only show what you need.
Anyway, I'm interested by the solution you will use.
I was trying to set ticker on a Label with lwuit 1.5, faced this issue:
if I set label.setRTL(true) and then call
label.startTicker(UIManager.getInstance().getLookAndFeel().getTickerSpeed(), true);
ticker just shows first 21 characters of the label's text and ignores the rest.
I've tried:
label.setRTL(false);
label.startTicker(UIManager.getInstance().getLookAndFeel().getTickerSpeed(), true);
it shows up OK, the text goes from left to right, but when I set this in a FocusListener (cause ticker should start when the label receive focus and stop after it loosed focus) it just change direction (goes from right to left).
here's what i do:
Label test = new Label();
Container c1 = new Container(new FlowLayout());
test.setText("1234567890ABCDEFGHIJ1234567890");
test.setFocusable(true);
test.setRTL(false);
test.addFocusListener(new FocusListener (){
public void focusGained(Component cmpnt) {
((Label)cmpnt).setRTL(false);
((Label)cmpnt).startTicker(UIManager.getInstance().getLookAndFeel().getTickerSpeed(), false);
}
public void focusLost(Component cmpnt) {
((Label)cmpnt).stopTicker();
}
});
c1.addComponent(test);
Look at setLabelFor, it will ticker the label for test when test gains focus. You should probably set RTL globally in the look and feel class.
I found the problem. wrong direction happens because I've implemented focusListener before adding the label to container (c1). so I just did this:
c1.addComponent(test);
test.addFocusListener(new FocusListener (){
public void focusGained(Component cmpnt) {
((Label)cmpnt).setRTL(false);
((Label)cmpnt).startTicker(UIManager.getInstance().getLookAndFeel().getTickerSpeed(), false);
}
public void focusLost(Component cmpnt) {
((Label)cmpnt).stopTicker();
}
});
and it simply worked.
in fact I got the idea from Label class source code (lines 149 ~ 153):
// solves the case of a user starting a ticker before adding the component
// into the container
if(isTickerEnabled() && isTickerRunning() && !isCellRenderer()) {
getComponentForm().registerAnimatedInternal(this);
}
this part does not work, but I don't know why. just hope someone fix this bug.