Skip to content

Commit 5118178

Browse files
gleidsonmtgleidsonmt
committed
refactoring toggle group
1 parent 3ec4c8e commit 5118178

File tree

4 files changed

+229
-57
lines changed

4 files changed

+229
-57
lines changed

‎glad‎

‎screenshots/img_1.png‎

17.4 KB
Loading

‎src/main/java/io/github/gleidsonmt/dashboardfx/presentation/presentations/styled/ToggleGroupPres.java‎

Lines changed: 183 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -16,31 +16,48 @@
1616
import javafx.scene.layout.VBox;
1717
import javafx.scene.text.Text;
1818

19+
import java.lang.reflect.Method;
20+
1921

2022
/**
2123
* @author Gleidson Neves da Silveira | gleidisonmt@gmail.com
2224
* Create on 28/04/2025
2325
*/
2426
public class ToggleGroupPres extends CustomizablePresentation {
2527

26-
private ToggleGroup groupCustom = new ToggleGroup();
28+
private final ToggleGroup groupCustom = new ToggleGroup();
2729

2830
public ToggleGroupPres() {
2931
super("Toggle Group");
3032
}
3133

3234
@Override
3335
public Tutorial create() {
36+
3437
return new Tutorial()
3538
.overview()
36-
.h3("ToggleButton Pres")
39+
.h3("Toggle Group")
3740
.separator()
3841
.text("Examples of building multiple options with toggle buttons and groups.")
39-
.text("First define a Container for your layout that can be any layout (StackPane, AnchorPane, etc).")
40-
.text("Give that a class container-option")
41-
.text("This will enable to switch outlined buttons to default.")
42-
.text("Before copying that examples start add this piece of code to your main css file.")
42+
.h3("Pill", "Toggle Group")
43+
.demo(createExample())
4344

45+
.code("""
46+
HBox container = new HBox();
47+
container.getStyleClass().add("container-option");
48+
ToggleGroup group = new ToggleGroup();
49+
ToggleButton left = new ToggleButton("On");
50+
left.getStyleClass().addAll( "w-50","btn-outlined", "pill-left");
51+
left.setStyle("-fx-border-width: 2px 0px 2px 2px; ");
52+
ToggleButton right = new ToggleButton("Off");
53+
right.getStyleClass().addAll( "w-50", "btn-outlined", "pill-right");
54+
right.setStyle("-fx-border-width: 2px 2px 2px 0px;");
55+
56+
group.getToggles().setAll(left, right);
57+
container.getChildren().setAll(left, right);
58+
""")
59+
.separator()
60+
.text("Add this classes to your main css file.", "padding-10")
4461
.code("""
4562
.container-option .toggle-button {
4663
-fx-effect: none;
@@ -56,78 +73,188 @@ public Tutorial create() {
5673
.container-option .toggle-button:selected .text {
5774
-text-color: white;
5875
}
59-
76+
6077
""", "css")
61-
.text("Create the container")
78+
.h3("Align", "Toggle Group")
79+
.demo(createExample2())
6280
.code("""
63-
...
81+
private Node createExample2() {
6482
HBox container = new HBox();
65-
container.getStyleClass().add("container-option");
66-
...
67-
""")
68-
.h3("Switch", "ToggleButton Pres")
69-
.text("Create the buttons")
70-
.code("""
71-
...
72-
ToggleButton left = new ToggleButton("On");
73-
left.getStyleClass().addAll( "w-50","btn-outlined", "pill-left");
74-
left.setStyle("-fx-border-width: 2px 0px 2px 2px; ");
75-
76-
ToggleButton right = new ToggleButton("Off");
77-
right.getStyleClass().addAll( "w-50", "btn-outlined", "pill-right");
78-
right.setStyle("-fx-border-width: 2px 2px 2px 0px;");
79-
...
80-
container.getChildren().setAll(left, right);
83+
container.setSpacing(5);
84+
container.getStyleClass().addAll("container-align");
85+
ToggleButton left = crateAlignToggle(Icon.FORMAT_ALIGN_LEFT);
86+
ToggleButton center = crateAlignToggle(Icon.FORMAT_ALIGN_CENTER);
87+
ToggleButton right = crateAlignToggle(Icon.FORMAT_ALIGN_RIGHT);
88+
ToggleButton justify = crateAlignToggle(Icon.FORMAT_ALIGN_JUSTIFY);
89+
container.getChildren().addAll(left, center, right, justify);
90+
new ToggleGroup().getToggles().addAll(left, center, right, justify);
91+
return container;
92+
}
93+
94+
private ToggleButton crateAlignToggle(Icon _icon) {
95+
SVGIcon icon = new SVGIcon(_icon);
96+
ToggleButton toggle = new ToggleButton();
97+
toggle.setGraphic(icon);
98+
toggle.getStyleClass().addAll("w-20 btn-outlined graphic-only".split(" "));
99+
return toggle;
100+
}
81101
""")
82-
.demo(createExample())
83-
.h3("Align", "ToggleButton Pres")
84-
.demo(createExample2())
85-
.h3("Blocks", "ToggleButton Pres")
102+
.separator()
103+
.text("Add this classes to your main css file.", "padding-10")
104+
105+
.code("""
106+
.container-align .toggle-button {
107+
-fx-border-color: derive(-dark-gray, 30%);
108+
-fx-background-radius: 3px;
109+
-fx-border-radius: 3px;
110+
-fx-border-width: 2px;
111+
-fx-effect: none;
112+
-fx-background-color: white;
113+
-fx-border-insets: -1px;
114+
}
115+
.container-align .toggle-button .icon {
116+
-fx-fill: derive(-dark-gray, 30%);
117+
}
118+
119+
.container-align .toggle-button:hover {
120+
-fx-border-color: -dark-gray;
121+
}
122+
123+
.container-align .toggle-button:hover .icon {
124+
-fx-fill: -dark-gray;
125+
}
126+
.container-align .toggle-button:selected {
127+
-fx-background-color: -fx-accent;
128+
-fx-border-color: -fx-accent;
129+
}
130+
131+
.container-align .toggle-button:selected .icon {
132+
-fx-fill: white;
133+
}
134+
135+
""", "css")
136+
.h3("Blocks", "Toggle Group")
86137
.demo(createCustom())
87-
.h4("Multiple Blocks", "Blocks")
138+
.code("""
139+
private Node createCustom() {
140+
VBox box = new VBox();
141+
box.setSpacing(20);
142+
143+
ToggleButton toggleOne = createToggle(
144+
"Hobby",
145+
"8GB / 4 CPUs * 160 GB SSD disk",
146+
"$40",
147+
"/mo");
148+
149+
ToggleButton toggleTwo = createToggle(
150+
"Startup",
151+
"12GB / 6 CPUs · 256 GB SSD disk",
152+
"$80",
153+
"/mo");
154+
155+
156+
ToggleButton toggleThree = createToggle(
157+
"Business",
158+
"16GB / 8 CPUs · 512 GB SSD disk",
159+
"$160",
160+
"/mo");
161+
162+
box.getChildren().setAll(toggleOne, toggleTwo, toggleThree);
163+
return box;
164+
}
165+
166+
private ToggleButton createToggle(String text, String legend, String price, String legendt) {
167+
ToggleButton toggle = new ToggleButton(text);
168+
toggle.getStyleClass().add("inner-toggle");
169+
toggle.setContentDisplay(ContentDisplay.GRAPHIC_ONLY);
170+
GridPane grid = new GridPane();
171+
172+
groupCustom.getToggles().add(toggle);
173+
174+
Text one = new Text(text);
175+
Text two = new Text(legend);
176+
Text three = new Text(price);
177+
Text four = new Text(legendt);
178+
179+
toggle.setGraphic(grid);
180+
181+
grid.getChildren().addAll(one, two, three, four);
182+
183+
GridPane.setConstraints(one, 0,0,1,1, HPos.LEFT, VPos.CENTER, Priority.ALWAYS, Priority.ALWAYS);
184+
GridPane.setConstraints(two, 0,1,1,1, HPos.LEFT, VPos.CENTER, Priority.ALWAYS, Priority.ALWAYS);
185+
GridPane.setConstraints(three, 1,0,1,1, HPos.RIGHT, VPos.CENTER, Priority.ALWAYS, Priority.ALWAYS);
186+
GridPane.setConstraints(four, 1,1,1,1, HPos.RIGHT, VPos.CENTER, Priority.ALWAYS, Priority.ALWAYS);
187+
188+
return toggle;
189+
}
190+
""")
191+
.h4("Storage Blocks", "Blocks")
88192
.demo(createStorage())
193+
.code("""
194+
HBox body = new HBox();
195+
VBox box = new VBox();
196+
197+
Text title = new Text("Storage");
198+
title.getStyleClass().addAll("h5", "text-bold");
199+
Text legend = new Text("Transfer your balance to your bank account");
200+
legend.getStyleClass().addAll("h5");
201+
ToggleGroup group = new ToggleGroup();
202+
203+
ToggleButton four = new ToggleButton("4 GB");
204+
ToggleButton eight = new ToggleButton("8 GB");
205+
ToggleButton sixteen = new ToggleButton("16 GB");
206+
ToggleButton thirtyTwo = new ToggleButton("32 GB");
207+
ToggleButton sixtyFour = new ToggleButton("64 GB");
208+
209+
body.setSpacing(20);
210+
211+
group.getToggles().setAll(four, eight, sixteen, thirtyTwo, sixtyFour);
212+
body.getChildren().setAll(four, eight, sixteen, thirtyTwo, sixtyFour);
213+
box.getChildren().addAll(title, body);
214+
215+
""")
89216

90217
;
91218
}
92219

93-
private Node createExample() {
220+
public Node createExample() {
94221
HBox container = new HBox();
95222
container.getStyleClass().add("container-option");
96223
ToggleGroup group = new ToggleGroup();
97224
ToggleButton left = new ToggleButton("On");
98-
left.getStyleClass().addAll( "w-50","btn-outlined", "pill-left");
225+
left.getStyleClass().addAll("w-50", "btn-outlined", "pill-left");
99226
left.setStyle("-fx-border-width: 2px 0px 2px 2px; ");
100227
ToggleButton right = new ToggleButton("Off");
101-
right.getStyleClass().addAll( "w-50", "btn-outlined", "pill-right");
228+
right.getStyleClass().addAll("w-50", "btn-outlined", "pill-right");
102229
right.setStyle("-fx-border-width: 2px 2px 2px 0px;");
103230

104-
group.getToggles().setAll(left, right);
231+
group.getToggles().setAll(left, right);
105232
container.getChildren().setAll(left, right);
106233
return container;
107234
}
108235

109236
private Node createExample2() {
110237
HBox container = new HBox();
111-
ToggleGroup group = new ToggleGroup();
112-
ToggleButton left = new ToggleButton("left");
113-
left.getStyleClass().addAll( "w-50","btn-outlined", "pill-left");
114-
left.setStyle("-fx-border-width: 2px 0px 2px 2px; ");
115-
ToggleButton middle = new ToggleButton("middle");
116-
middle.getStyleClass().addAll("rect", "btn-outlined");
117-
middle.setStyle("-fx-border-width: 2px 0px 2px 0px;");
118-
ToggleButton right = new ToggleButton("right");
119-
right.getStyleClass().addAll( "w-50", "btn-outlined", "pill-right");
120-
right.setStyle("-fx-border-width: 2px 2px 2px 0px;");
121-
122-
group.getToggles().setAll(left, middle, right);
123-
container.getChildren().setAll(left, middle, right);
124-
new SVGIcon(Icon.LOCATION_ON);
125-
container.getChildren().forEach(e -> {
126-
e.getStyleClass().add("out-toggle-item");
127-
});
238+
container.setSpacing(5);
239+
container.getStyleClass().addAll("container-align");
240+
ToggleButton left = crateAlignToggle(Icon.FORMAT_ALIGN_LEFT);
241+
ToggleButton center = crateAlignToggle(Icon.FORMAT_ALIGN_CENTER);
242+
ToggleButton right = crateAlignToggle(Icon.FORMAT_ALIGN_RIGHT);
243+
ToggleButton justify = crateAlignToggle(Icon.FORMAT_ALIGN_JUSTIFY);
244+
container.getChildren().addAll(left, center, right, justify);
245+
new ToggleGroup().getToggles().addAll(left, center, right, justify);
246+
// left, center, righg e jusity
128247
return container;
129248
}
130249

250+
private ToggleButton crateAlignToggle(Icon _icon) {
251+
SVGIcon icon = new SVGIcon(_icon);
252+
ToggleButton toggle = new ToggleButton();
253+
toggle.setGraphic(icon);
254+
toggle.getStyleClass().addAll("w-20 btn-outlined graphic-only".split(" "));
255+
return toggle;
256+
}
257+
131258
private Node createStorage() {
132259
HBox body = new HBox();
133260
VBox box = new VBox();
@@ -146,7 +273,7 @@ private Node createStorage() {
146273

147274
body.setSpacing(20);
148275

149-
group.getToggles().setAll(four, eight, sixteen, thirtyTwo, sixtyFour);
276+
group.getToggles().setAll(four, eight, sixteen, thirtyTwo, sixtyFour);
150277
body.getChildren().setAll(four, eight, sixteen, thirtyTwo, sixtyFour);
151278
box.getChildren().addAll(title, body);
152279

@@ -197,10 +324,10 @@ private ToggleButton createToggle(String text, String legend, String price, Stri
197324

198325
grid.getChildren().addAll(one, two, three, four);
199326

200-
GridPane.setConstraints(one, 0,0,1,1, HPos.LEFT, VPos.CENTER, Priority.ALWAYS, Priority.ALWAYS);
201-
GridPane.setConstraints(two, 0,1,1,1, HPos.LEFT, VPos.CENTER, Priority.ALWAYS, Priority.ALWAYS);
202-
GridPane.setConstraints(three, 1,0,1,1, HPos.RIGHT, VPos.CENTER, Priority.ALWAYS, Priority.ALWAYS);
203-
GridPane.setConstraints(four, 1,1,1,1, HPos.RIGHT, VPos.CENTER, Priority.ALWAYS, Priority.ALWAYS);
327+
GridPane.setConstraints(one, 0, 0, 1, 1, HPos.LEFT, VPos.CENTER, Priority.ALWAYS, Priority.ALWAYS);
328+
GridPane.setConstraints(two, 0, 1, 1, 1, HPos.LEFT, VPos.CENTER, Priority.ALWAYS, Priority.ALWAYS);
329+
GridPane.setConstraints(three, 1, 0, 1, 1, HPos.RIGHT, VPos.CENTER, Priority.ALWAYS, Priority.ALWAYS);
330+
GridPane.setConstraints(four, 1, 1, 1, 1, HPos.RIGHT, VPos.CENTER, Priority.ALWAYS, Priority.ALWAYS);
204331

205332
return toggle;
206333
}

‎src/main/resources/io/github/gleidsonmt/dashboardfx/css/master.css‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -175,3 +175,48 @@
175175
-fx-stroke-width: 2px;
176176
}
177177

178+
.container-option .toggle-button {
179+
-fx-effect: none;
180+
-fx-border-insets: 0px;
181+
-fx-background-insets: 0px;
182+
}
183+
184+
.container-option .toggle-button:selected {
185+
-fx-background-color: -fx-accent;
186+
-fx-border-width: 0px;
187+
}
188+
189+
.container-option .toggle-button:selected .text {
190+
-text-color: white;
191+
}
192+
193+
.container-align .toggle-button {
194+
-fx-border-color: derive(-dark-gray, 30%);
195+
-fx-background-radius: 3px;
196+
-fx-border-radius: 3px;
197+
-fx-border-width: 2px;
198+
-fx-effect: none;
199+
-fx-background-color: white;
200+
-fx-border-insets: -1px;
201+
}
202+
.container-align .toggle-button .icon {
203+
-fx-fill: derive(-dark-gray, 30%);
204+
}
205+
206+
.container-align .toggle-button:hover {
207+
-fx-border-color: -dark-gray;
208+
}
209+
210+
.container-align .toggle-button:hover .icon {
211+
-fx-fill: -dark-gray;
212+
}
213+
.container-align .toggle-button:selected {
214+
-fx-background-color: -fx-accent;
215+
-fx-border-color: -fx-accent;
216+
}
217+
218+
.container-align .toggle-button:selected .icon {
219+
-fx-fill: white;
220+
}
221+
222+

0 commit comments

Comments
 (0)