fuhouyin/MaterialFX
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

♻️ Minor changes

Browse Source 
📝 Added Wiki pages to the project
📝 Update README
📝 Added CHANGELOG

Signed-off-by: palexdev <alessandro.parisi406@gmail.com>
This commit is contained in:
palexdev 2022-01-22 17:12:42 +01:00
parent 4d625adba9
commit 8313709240
27 changed files with 1272 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
.github/workflows/FUNDING.yml vendored Normal file
View File

@ -0,0 +1,13 @@
# These are supported funding model platforms
github: palexdev
patreon: # Replace with a single Patreon username
open_collective: # Replace with a single Open Collective username
ko_fi: # Replace with a single Ko-fi username
tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
liberapay: # Replace with a single Liberapay username
issuehunt: # Replace with a single IssueHunt username
otechie: # Replace with a single Otechie username
lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']

67
CHANGELOG.md Normal file
View File

@ -0,0 +1,67 @@
# Changelog
All notable changes to this project will be documented in this file.
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
(Date format is dd-MM-yyyy)
## Type of Changes
- **Added** for new features.
- **Changed** for changes in existing functionality.
- **Deprecated** for soon-to-be removed features.
- **Removed** for now removed features.
- **Fixed** for any bug fixes.
## [11.13.0] - 22-01-2022
_This version won't follow the above scheme as the amount of changes and commits is simply too huge and there would be no
way to correctly show all the changes without making mistakes (duplicates, "overlapping" changes...), for this reason
I'll try to sum up only the major changes below._
- The demo has been completely remade
- Added new beans and properties
- Added new mechanisms for bindings
- Added new collections, in particular an ObservableList that combines the capabilities of JavaFX's FilteredList and SortedList.
Also those two are read-only, but MaterialFX also offers a version that allows to directly make changes to the source list
- ReactFX, Flowless removed in favor of my own Virtual Flow implementation, VirtualizedFX. As a result all controls having lists have been reworked.
- The table view has been reworked as well to use a Virtual Flow (scrollable) so it's efficiency is now on a whole new level. There's also a paginated
version of the table (like before) but it still uses a Virtual Flow, which of course makes it efficient
- MFXLabels have been deprecated and removed as now MaterialFX follows Material Design's text fields. The new MFXTextFields are the best thing you're gonna see
on JavaFX. They have all the features defined by Material Design principles and also more. They now offer a floating label that can have 4 states: disabled, above, border, inline.
Oh, they can also be set to behave like Labels, no need to have duplicate controls (Label and TextFields), since they offer the same functionalities duh.
- Many controls (such as combo boxes, date pickers) now extends MFXTextField, so they inherit all its features.
- Almost all controls have been reviewed/remade to make them fully functional (there were a lot of issues with CSS not working properly).
- The Filter API has been reviewed and now it's more powerful than ever with the new MFXFilterPane.
- The Validation API has been reviewed as well, it is as powerful as before thanks to JavaFX properties and observables, but it's much more flexible. It's up to the user now
to decide when and how to validate a control. Also an important design choice has been made here. Many validation frameworks for JavaFX also offer a way to decorate a control,
but I decided to not to that as it would violate the Single Responsibility Principle! Validation has nothing to do with UI, plus depending on the fanciness of your App it's up to
you to decide how the validation controls will look like!
- Dialogs and Notifications have been reviewed as well. The dialogs have been simplified, and for notifications there are now two separate systems.
- The date picker is now on a whole new level, it's been remade from scratch and it's simply beautiful, powerful and versatile.
- There are also new components! MFXPopup is a PopupControl that actually works. Ever tried to style a PopupControl but no matter what the CSS would not work?
Do not worry about that never again, just use MFXPopup it's super easy thanks to my custom MFXCSSBridge (check documentation would be too much to write here haha).
MFXPagination has been made for MFXPaginatedTableViews, remade from scratch (meaning that doesn't extend Pagination) with a stunning modern look.
MFXTooltip, an alternative to JavaFX's tooltip, much more versatile!
- MFXRippleGenerator has been deprecated. The ripple generation is organized to be a new API, meaning that there are now interfaces and a base abstract class from which
you can implement new ripple generators. The new default implementation is MFXCircleRippleGenerator. The new API also allows you to create new Ripples by implementing the IRipple interface.
It's a rather advanced API tbh, but hey, it's there, who knows maybe someday I'll need it to be like this.
- MFXHLoader and MFXVLoader are no more. The loading API has been "extracted" to be independent from UI. MFXLoader has the same capabilities as the aforementioned controls
but it's not a Node. It's up to the user to decide how to manage the loaded views, and how to translate the loaded beans to a Node. (see the documentation and the DemoController for an example
on how to easily create a nav-bar even with the new API)
- The Selection API has been reviewed as well. It also supports the "extend selection" behavior when "Shift" is pressed, like you would expect from a file manager.
- There is an insane amount of new utilities, for JavaFX as well as for Java
Again, let me **apologize** for this messy changelist, but I promise from next version changes will be tracked properly!

23
README.md
View File

@ -35,12 +35,14 @@
## Table of Contents
* [About the Project and History of JavaFX](#about-the-project-and-history-of-javafx)
* [About the Logo](#about-the-logo)
* [Some GIFs](#preview-gifs)
* [Getting Started](#getting-started)
* [Build](#build)
* [Usage](#usage)
* [Gradle](#gradle)
* [Maven](#maven)
* [Changelog](#changelog)
* [Roadmap](#roadmap)
* [Contributing](#contributing)
* [License](#license)
@ -79,6 +81,16 @@ To date MaterialFX offers not only restyled controls, but also: new and unique c
controls completely redone from scratch such as ComboBoxes or TableViews (and many others),
and many utilities for JavaFX and Java (NodeUtils, ColorUtils, StringUtils ...).
<!-- ABOUT THE PROJECT -->
## About The Logo
MaterialFX v11.13.0 brought a lot of fixes and new features, but it also brought a new logo, something that is more
meaningful for me and that somewhat represents the new version.
The new logo is a Phoenix, the immortal bird from Greek mythology, associated to regeneration/rebirth.
When a Phoenix dies it obtains new life by raising from its ashes.
MaterialFX v11.13.0 fixed many critical bugs and broken features, I like to think that it is reborn from
the previous version, so I thought a new logo would have been a good idea.
<!-- PREVIEW GIFS -->
## Preview GIFs
@ -226,6 +238,11 @@ implementation 'io.github.palexdev:materialfx:11.13.0'
<!-- ROADMAP -->
## Changelog
See the [CHANGELOG](https://github.com/palexdev/MaterialFX/blob/main/CHANGELOG.md) file for a list of changes per version.
<!-- ROADMAP -->
## Roadmap
See the [Open Issues](https://github.com/palexdev/MaterialFX/issues) for a list of proposed features (and known issues).
@ -269,7 +286,8 @@ especially considering that developing for JavaFX also means to deal with its cl
design decisions. Many times I've honestly been on the verge of giving up because sometimes it's really too much
stress to handle.
**But**, today MaterialFX is a great library, supported by many people and I'm proud of it.
If you are using MaterialFX in your projects and feel like it, you can make a small donation here: [![Donate](https://img.shields.io/badge/$-support-green.svg?style=flat-square)](https://bit.ly/31XB8zD)
If you are using MaterialFX in your projects and feel like it, I recently activated [GitHub Sponsors](https://github.com/sponsors/palexdev) so
you can easily donate/sponsor.
<!-- SUPPORTERS -->
@ -283,6 +301,7 @@ If you are using MaterialFX in your projects and feel like it, you can make a sm
- Sourabh Bhat
- Mohammad Chaudhry (thank you very much for the huge donation, YOU are the legend)
- Yahia Rehab
- *Your name can be here by supporting me at this link, [Support](https://bit.ly/31XB8zD)*
- Mauro de Wit
- *Your name can be here by supporting me at this link, [GitHub Sponsors](https://github.com/sponsors/palexdev)*
Thank you very very much to all supporters, to all people who contribute to the project, to all people that thanked me, you really made my day

2
materialfx/src/main/java/io/github/palexdev/materialfx/controls/MFXFilterPane.java
View File

@ -206,7 +206,7 @@ public class MFXFilterPane<T> extends Control {
/**
* @return the list of {@link AbstractFilter}s. Each of them
* represents an object's field o which the filter operates
* represents an object's field on which the filter operates
*/
public ObservableList<AbstractFilter<T, ?>> getFilters() {
return filters;

6
materialfx/src/main/java/io/github/palexdev/materialfx/controls/MFXProgressSpinner.java
View File

@ -250,6 +250,9 @@ public class MFXProgressSpinner extends ProgressIndicator {
return radius.get();
}
/**
* Specifies the radius of the progress spinner.
*/
public StyleableDoubleProperty radiusProperty() {
return radius;
}
@ -262,6 +265,9 @@ public class MFXProgressSpinner extends ProgressIndicator {
return startingAngle.get();
}
/**
* Specifies the angle at which the spinner will start.
*/
public StyleableDoubleProperty startingAngleProperty() {
return startingAngle;
}

2
materialfx/src/main/java/io/github/palexdev/materialfx/controls/MFXTableView.java
View File

@ -377,7 +377,7 @@ public class MFXTableView<T> extends Control {
}
/**
* Specifies if the whether the footer is visible.
* Specifies whether the table's footer is visible
*/
public BooleanProperty footerVisibleProperty() {
return footerVisible;

6
materialfx/src/main/java/io/github/palexdev/materialfx/controls/MFXTextField.java
View File

@ -761,6 +761,10 @@ public class MFXTextField extends TextField implements Validated, MFXMenuControl
return scaleOnAbove.get();
}
/**
* Specifies whether the floating text node should be scaled or not when
* the float mode is set to {@link FloatMode#ABOVE}.
*/
public StyleableBooleanProperty scaleOnAboveProperty() {
return scaleOnAbove;
}
@ -822,7 +826,7 @@ public class MFXTextField extends TextField implements Validated, MFXMenuControl
private static final CssMetaData<MFXTextField, Boolean> CARET_VISIBLE =
FACTORY.createBooleanCssMetaData(
"-mfx-caret-animated",
"-mfx-caret-visible",
MFXTextField::caretVisibleProperty,
true
);

2
materialfx/src/main/java/io/github/palexdev/materialfx/dialogs/MFXStageDialog.java
View File

@ -244,7 +244,7 @@ public class MFXStageDialog extends Stage {
double startX = screenBounds.getMinX();
double startY = screenBounds.getMinY();
SizeBean dialogSize = SizeBean.of(getWidth(), getHeight());
SizeBean nodeSize = SizeBean.of(ownerNode.prefWidth(-1), ownerNode.prefHeight(-1));
SizeBean nodeSize = SizeBean.of(ownerNode.getWidth(), ownerNode.getHeight());
double x = startX + (nodeSize.getWidth() / 2 - dialogSize.getWidth() / 2);
double y = startY + (nodeSize.getHeight() / 2 - dialogSize.getHeight() / 2);
setX(x);

16
materialfx/src/main/java/io/github/palexdev/materialfx/skins/MFXTableViewSkin.java
View File

@ -83,13 +83,6 @@ public class MFXTableViewSkin<T> extends SkinBase<MFXTableView<T>> {
filterPane = new MFXFilterPane<>();
Bindings.bindContent(filterPane.getFilters(), tableView.getFilters());
filterDialog = MFXDialogs.filter(filterPane)
.setShowMinimize(false)
.toStageDialogBuilder()
.initOwner(tableView.getScene().getWindow())
.initModality(Modality.APPLICATION_MODAL)
.get();
footer = buildFooter();
container = new VBox(columnsContainer, rowsFlow);
@ -97,6 +90,15 @@ public class MFXTableViewSkin<T> extends SkinBase<MFXTableView<T>> {
container.getChildren().add(footer);
}
filterDialog = MFXDialogs.filter(filterPane)
.setShowMinimize(false)
.toStageDialogBuilder()
.setOwnerNode(container)
.setCenterInOwnerNode(true)
.initOwner(tableView.getScene().getWindow())
.initModality(Modality.APPLICATION_MODAL)
.get();
getChildren().setAll(container);
addListeners();
}

4
materialfx/src/main/resources/io/github/palexdev/materialfx/css/MFXFilterComboBox.css
View File

@ -20,11 +20,11 @@
@import "MFXColors.css";
.mfx-filter-combo-box {
-mfx-caret-animated: true;
-mfx-caret-visible: true;
}
.mfx-filter-combo-box:popup {
-mfx-caret-animated: false;
-mfx-caret-visible: false;
-mfx-editable: false;
}

39
wiki/Buttons.md Normal file
View File

@ -0,0 +1,39 @@
# Buttons
## Preview
<img src="https://imgur.com/jATdGFL.gif" alt="Buttons">
## MFXButtons
- Style Class: mfx-button
- Default Stylesheet: MFXButton.css
- Default Skin: MFXButtonSkin.java
### Properties
| Property | Description | Type |
| ----------------------- | --------------------------------------------------------------------------------------------------------- | -------:|
| computeRadiusMultiplier | Specifies if the rippleRadiusMultiplier property should be computed automatically by the ripple generator | Boolean |
| rippleAnimateBackground | Specifies if the button's background should also be animated | Boolean |
| rippleAnimateShadow | Specifies if the button's shadow should also be animated | Boolean |
| rippleAnimationSpeed | Specifies the ripple generator's animations speed | Double |
| rippleBackgroundOpacity | Specifies the opacity for the background animation. (if rippleAnimateBackground is true). | Double |
| rippleColor | Specifies the ripples color | Color |
| rippleRadius | Specifies the radius of the ripples | Double |
| rippleRadiusMultiplier | Specifies the number by which the ripples' radius will be multiplied | Double |
### Styleable Properties
| Property | Description | CSS Property | Type | Default Value |
| ---------- | ------------------------------------------------------------------------------------------------------- | ---------------- | ----------------:| -----------------:|
| depthLevel | Specifies how intense is the DropShadow effect applied to the button to make it appear 3D | -mfx-depth-level | DepthLevel[Enum] | DepthLevel.LEVEL2 |
| buttonType | Specifies the appearance of the button. Either FLAT or RAISED. In the first mode, depthLevel is ignored | -mfx-button-type | ButtonType[Enum] | ButtonType.FLAT |
### CSS Selectors
- .mfx-button
- .mfx-button .mfx-ripple-generator

37
wiki/Check Boxes.md Normal file
View File

@ -0,0 +1,37 @@
# Check Boxes
## Preview
<img src="https://imgur.com/ArUhH58.gif" alt="Checkboxes" border="0">
## MFXCheckBoxes
- Style Class: mfx-checkbox
- Default Stylesheet: MFXCheckBox.css
- Default Skin: MFXCheckboxSkin.java
### Styleable Properties
| Property | Description | CSS Property | Type | Default Value |
| ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------ | --------------------:| -------------------:|
| contentDisposition | Specifies how the control is positioned relative to its text | -mfx-content-disposition | ContentDisplay[Enum] | ContentDisplay.LEFT |
| gap | Specifies the spacing between the control and its text | -mfx-gap | Double | 8.0 |
| textExpand | When setting a specific size for the control (by using setPrefSize for example, and this is true for SceneBuilder too), this flag will tell the control's label to take all the space available. This allows, in combination with the contentDisposition to layout the control's content in many interesting ways. When the text is expanded (this property is true), use the alignment property to position the text. | -mfx-text-expand | Boolean | false |
### CSS Selectors
- .mfx-checkbox
- .mfx-checkbox .label (not really needed as bound to the checkbox)
- .mfx-checkbox .ripple-container (contains the ripple generator and the box)
- .mfx-checkbox .ripple-container .mfx-ripple-generator
- .mfx-checkbox .ripple-container .box (mark container)
- .mfx-checkbox .ripple-container .box .mark (the check mark icon)
*Note that you should be able to reach the box and the mark without actually using the .ripple-container selector*

85
wiki/Combo Boxes.md Normal file
View File

@ -0,0 +1,85 @@
# Combo Boxes
## Preview
<img src="https://imgur.com/BO0twpA.gif" alt="Comboboxes" border="0">
## MFXComboBoxes
- Style Class: mfx-combo-box
- Default Stylesheet: MFXComboBox.css
- Default Skin: MFXComboBoxSkin.java
- Default Cell: MFXComboBoxCell.java
### Properties
| Property | Description | Type |
| ----------------- | --------------------------------------------------------------------------------------------------------------------------------------- | ---------------------:|
| showing | Specifies whether the popup is showing | Boolean |
| popupAlignment | Specifies the popup's position | Alignment |
| popupOffsetX | Specifies the popup's x offset, the amount of pixels to add to the computed x position (from popupAlignment) | Double |
| popupOffsetY | Specifies the popup's y offset, the amount of pixels to add to the computed y position (from popupAlignment) | Double |
| animationProvider | Specifies the animation of the trailing icon used to open the popup | BiFunction |
| value | Specifies the combo box's value, which does not necessarily coincides with the currently selected item | T[Generic] |
| converter | Specifies the StringConverter used to convert a generic item to a String. It is used to set the combo box text when an item is selected | StringConverter |
| items | Specifies the combo box's items list | ObservableList |
| selectionModel | The model holding the combo box's selection | ISingleSelectionModel |
| cellFactory | Specifies the function used to create the items cells in the popup | Function |
| onCommit | Specifies the action to perform when pressing the Enter button on the combo box | Consumer |
| onCancel | Specifies the action to perform when pressing the key combination Ctrl+Shift+Z on the combo box | Consumer |
### Styleable Properties
| Property | Description | CSS Property | Type | Default Value |
| ------------ | ---------------------------------------------------------------------------------------- | ------------------- | -------:| -------------:|
| scrollOnOpen | Specifies whether the combo box list should scroll to the current selected value on open | -mfx-scroll-on-open | Boolean | false |
### CSS Selectors
- .mfx-combo-box
- .mfx-combo-box .caret (the icon to open/close the popup)
- .mfx-combo-box .combo-popup (to access the combo box's popup)
- .mfx-combo-box .combo-popup .virtual-flow (the combo box's cells container)
- .mfx-combo-box .combo-popup .virtual-flow .scrollbar
- .mfx-combo-box .combo-popup .virtual-flow .mfx-combo-box-cell
- .mfx-combo-box .combo-popup .virtual-flow .data-label (the cell's text)
*There are other selectors, but they are the same as MFXTextField, refer to its wiki*
## MFXFilterComboBoxes
- Style Class: mfx-filter-combo-box
- Default Stylesheet: MFXFilterComboBox.css
- Default Skin: MFXFilterComboBoxSkin.java
- Default Cell: MFXFilterComboBoxCell.java (important for selection to work properly)
### Properties
*In addition to the properties inherited by MFXComboBox:*
| Property | Description | Type |
| ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------- | -----------------:|
| searchText | Specifies the text used to filter the items list.  By default this text is bound bidirectionally with the text-field's used in the popup | String |
| filterList | This is the list on which filtering and sorting are made. The original list remains untouched! | TransformableList |
| filterFunction | Specifies the function used to build a Predicate from the search text, the predicate is then used to filter the list | Function |
| resetOnPopupHidden | Specifies whether to reset the filter state, such as the searchText when the popup is closed | Boolean |
### Styleable Properties
*This combo box has the same styleable properties as MFXComboBox*
### CSS Selectors
*This combo box has the same CSS selectors as MFXComboBox, the only difference is that the base style class is .mfx-filter-combo-box*

49
wiki/Context Menus.md Normal file
View File

@ -0,0 +1,49 @@
# Context Menus
## MFXContextMenus
- Style Class: mfx-context-menu
- Default Stylesheet: MFXContextMenu.css
- Default Skin: MFXContextMenuSkin.java
### Properties
| Property | Description | Type |
| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------:|
| items | The list containing the context menu's items | ObservableList |
| owner | The context menu's owner node | Node |
| disabled | Enables/Disables the context menu | Boolean |
| showCondition | Specifies the function used to determine if a MouseEvent should trigger the showAction property.<br/>By default, checks if the SECONDARY mouse button was pressed | Function |
| showAction | Specifies the action to perform when a valid MouseEvent occurs.<br/> By default, calls shows the context menu at the MouseEvent' screen coordinates | Consumer |
### CSS Selectors
- .mfx-context-menu
- .mfx-context-menu .mfx-menu-item (to access the menu's items)
## MFXContextMenuItem
- Style Class: mfx-menu-item
- Default Stylesheet: MFXContextMenuItem.css
- Default Skin: MFXContextMenuItemSkin.java
### Properties
| Property | Description | Type |
| --------------- | ------------------------------------------------------------------------------------------------------------------- | ------------:|
| accelerator | Specifies the accelerator's text. Note that this is just the text, it's up to the user to setup the needed handlers | String |
| tooltipSupplier | Specifies the Supplier used to build the item's tooltip | Supplier |
| onAction | Specifies the action to perform when clicked | EventHandler |
### CSS Selectors
- .mfx-menu-item
- .mfx-menu-item .accelerator
- .mfx-menu-item .mfx-icon-wrapper (contains the icon)

71
wiki/Date Pickers.md Normal file
View File

@ -0,0 +1,71 @@
# Date Pickers
## Preview
<img src="https://imgur.com/J3v3i9w.gif" alt="Pickers" border="0">
## MFXDatePickers
- Style Class: mfx-date-picker
- Default Stylesheet: MFXDatePicker.css
- Default Skin: MFXDatePickerSkin.java
- Default Cell: MFXDateCell.java
### Properties
| Property | Description | Type |
| -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -----------:|
| showing | Specifies whether the popup is showing | Boolean |
| popupAlignment | Specifies the popup's position | Alignment |
| popupOffsetX | Specifies the popup's x offset, the amount of pixels to add to the computed x position (from popupAlignment) | Double |
| popupOffsetY | Specifies the popup's y offset, the amount of pixels to add to the computed y position (from popupAlignment) | Double |
| value | Specifies the current selected date | LocalDate |
| converterSupplier | Specifies the Supplier used to create a StringConverter capable of converting LocalDates to a String | Supplier |
| monthConverterSupplier | Specifies the Supplier used to create a  StringConverter capable of converting Months to a String | Supplier |
| dayOfWeekConverterSupplier | Specifies the Supplier used to create a  StringConverter capable of converting DayOfWeeks to a String | Supplier |
| cellFactory | Specifies the function used to create the day cells in the grid | Function |
| onCommit | Specifies the action to perform when pressing the Enter button on the combo box | Consumer |
| onCancel | Specifies the action to perform when pressing the key combination Ctrl+Shift+Z on the combo box | Consumer |
| locale | Specifies the Locale used by the date picker.<br/>The Locale is mainly responsible for changing the language and the grid disposition (different week start for example) | Locale |
| currentDate | Specifies the current date | LocalDate |
| yearsRange | Specifies the years range of the date picker | NumberRange |
| gridAlgorithm | Specifies the BiFunction used to generate the month grid which is a bi-dimensional array of integer values | BiFunction |
| startingYearMonth | The YearMonth at which the date picker will start.<br/> Note that this will be relevant only for the first initialization. Setting this afterwards won't take any effect | YearMonth |
| closePopupOnChange | Whether the popup should stay open on value change or close | Boolean |
### CSS Selectors
- .mfx-date-picker
- .mfx-date-picker .mfx-icon-wrapper (contains the icon)
- .mfx-date-picker .mfx-icon-wrapper .mfx-ripple-generator
- .mfx-date-picker .mfx-icon-wrapper .mfx-font-icon (the actual icon)
- .mfx-date-picker .date-picker-popup (to access the popup)
- .mfx-date-picker .date-picker-popup .content (top container, should not be necessary, will be omitted in the following)
- .mfx-date-picker .date-picker-popup .left-arrow (icon container)
- .mfx-date-picker .date-picker-popup .left-arrow .mfx-ripple-generator
- .mfx-date-picker .date-picker-popup .left-arrow .mfx-font-icon (the actual icon)
- .mfx-date-picker .date-picker-popup .right-arrow (icon container)
- .mfx-date-picker .date-picker-popup .right-arrow .mfx-ripple-generator
- .mfx-date-picker .date-picker-popup .right-arrow .mfx-font-icon (the actual icon)
- .mfx-date-picker .date-picker-popup .months-combo
- .mfx-date-picker .date-picker-popup .years-combo
- .mfx-date-picker .date-picker-popup .week-day
- .mfx-date-picker .date-picker-popup .mfx-date-cell

51
wiki/Filter Pane.md Normal file
View File

@ -0,0 +1,51 @@
# Filter Pane
## MFXFilterPanes
- Style Class: mfx-filter-pane
- Default Stylesheet: MFXFilterPane.css
- Default Skin: MFXFilterPaneSkin.java
### Properties
| Property | Description | Type |
| ------------- | -------------------------------------------------------------------------------------------------------- | --------------:|
| headerText | Specifies the text of the header | String |
| filters | The list of AbstractFilters.<br/>Each of them represents an object's field on  which the filter operates | ObservableList |
| activeFilters | The list of built filters | ObservableList |
| onFilter | The action to perform when the filter icon is clicked | EventHandler |
| onReset | The action to perform when the reset icon is clicked | EventHandler |
### CSS Selectors
- .mfx-filter-pane
- .mfx-filter-pane .header
- .mfx-filter-pane .header-label
- .mfx-filter-pane .header #filterIcon (includes ripple generator, actual icon is at .mfx-font-icon)
- .mfx-filter-pane .header #resetIcon (includes ripple generator, actual icon is at .mfx-font-icon)
- .mfx-filter-pane .filter-combo
- .mfx-filter-pane .predicates-combo
- .mfx-filter-pane .mfx-combo-box
- .mfx-filter-pane .mfx-text-field
- .mfx-filter-pane .mfx-button
- .mfx-filter-pane .mfx-scroll-pane
- .mfx-filter-pane .active-filter
- .mfx-filter-pane .active-filter .mfx-font-icon
- .mfx-filter-pane .active-filter .function-text
- .mfx-filter-pane .and-or-text

79
wiki/Lists.md Normal file
View File

@ -0,0 +1,79 @@
# Lists
## Preview
<img src="https://imgur.com/4Ckdn5z.gif" alt="Listviews" border="0">
## MFXListViews
- Style Class: mfx-list-view
- Default Stylesheet: MFXListView.css
- Default Skin: MFXListViewSkin.java
- Default Cell: MFXListCell.java
### Properties
| Property | Description | Type |
| --------------- | ------------------------------------------------------------------------------------------------ | -----------------------:|
| items | The items list property | ObservableList |
| converter | Specifies the StringConverter used to convert a generic item to a String, used by the list cells | StringConverter |
| selectionModel | The model holding the list's selection | IMultipleSelectionModel |
| cellFactory | Specifies the function used to build the list's cells | Function |
| trackColor | Specifies the color of the scrollbars' track | Paint |
| thumbColor | Specifies the color of the scrollbars' thumb | Paint |
| thumbHoverColor | Specifies the color of the scrollbars' thumb when mouse hover | Paint |
| hideAfter | Specifies the time after which the scrollbars are hidden | Duration |
### Styleable Properties
| Property | Description | CSS Property | Type | Default Value |
| -------------- | ------------------------------------------------------------------------------ | -------------------- | ----------------:| -----------------:|
| hideScrollBars | Specifies if the scrollbars should be hidden when the mouse is not on the list | -mfx-hide-scrollbars | Boolean | false |
| depthLevel | Specifies the shadow strength around the control | -mfx-depth-level | DepthLevel[Enum] | DepthLevel.LEVEL2 |
### CSS Selectors
- .mfx-list-view
- .mfx-list-view .virtual-flow
- .mfx-list-view .virtual-flow .scroll-bar
- .mfx-list-view .virtual-flow .mfx-list-cell
- .mfx-list-view .virtual-flow .mfx-list-cell .mfx-ripple-generator
- .mfx-list-view .virtual-flow .mfx-list-cell .data-label (cell's text)
## MFXCheckListViews
- Style Class: mfx-check-list-view
- Default Stylesheet: MFXCheckListView.css
- Default Skin: MFXListViewSkin.java
- Default Cell: MFXCheckListCell.java
### Properties and Styleable Properties
*This list view has the same exact properties and styleable properties as MFXListView.*
### CSS Selectors
- .mfx-check-list-view
- .mfx-check-list-view .virtual-flow
- .mfx-check-list-view .virtual-flow .scroll-bar
- .mfx-check-list-view .virtual-flow .mfx-check-list-cell
- .mfx-check-list-view .virtual-flow .mfx-check-list-cell .mfx-ripple-generator
- .mfx-check-list-view .virtual-flow .mfx-check-list-cell .data-label (cell's text)
- .mfx-check-list-view .virtual-flow .mfx-check-list-cell .mfx-checkbox

72
wiki/Pagination.md Normal file
View File

@ -0,0 +1,72 @@
# Pagination
## Preview
<img src="https://imgur.com/nj6xhUT.gif" alt="Tableviews" border="0">
## MFXPaginations
- Style Class: mfx-pagination
- Default Stylesheet: MFXPagination.css
- Default Skin: MFXPaginationSkin.java
- Default Cell: MFXPage.java
### Properties
| Property | Description | Type |
| -------------------------- | ----------------------------------------------------------------------------------------------- | -----------------:|
| currentPage | Specifies the current selected page | Integer |
| maxPage | Specifies the max number of pages | Integer |
| pagesToShow | Specifies the max number of pages to show at a time | Integer |
| indexesSupplier | This supplier specifies the algorithm used to build the pages | Supplier |
| pageCellFactory | This function specifies how to convert an index to a page | Function |
| ellipseString | Specifies the string to show for truncated pages | String |
| orientation | Specifies the control's orientation | Orientation[Enum] |
| showPopupForTruncatedPages | Specifies whether truncated pages should show a popup containing the pages in between, on click | Boolean |
### CSS Selectors
- .mfx-pagination
- .mfx-pagination .mfx-icon-wrapper (left/right arrows container)
- .mfx-pagination .mfx-icon-wrapper .mfx-ripple-generator
- .mfx-pagination .mfx-icon-wrapper .mfx-font-icon (the actual left/right icons)
- .mfx-pagination .pages-bar (the pages container)
- .mfx-pagination .pages-bar .mfx-page
<br/>
<br/>
## MFXPages
- Style Class: mfx-page
- Default Stylesheet: MFXPagination.css
### Properties
| Property | Description | Type |
| -------- | ------------------------------------------------------ | -----------:|
| index | Specifies the page's index | Integer |
| between | The range of hidden pages, if truncated otherwise null | NumberRange |
| selected | Specifies the selection state of the page | Boolean |
### CSS Selectors
- .mfx-page
- .mfx-page .pages-popup
- .mfx-page .pages-popup .virtual-flow
- .mfx-page .pages-popup .mfx-list-view
- .mfx-page .pages-popup .virtual-flow .mfx-list-cell

70
wiki/Progress.md Normal file
View File

@ -0,0 +1,70 @@
# Progress
## Preview
<img src="https://imgur.com/2E6X3uJ.gif" alt="Progress" border="0">
## MFXProgressBars
- Style Class: mfx-progress-bar
- Default Stylesheet: MFXProgressBar.css
- Default Skin: MFXProgressBarSkin.java
### Properties
| Property | Description | Type |
| -------- | ------------------------- | --------------:|
| ranges1 | The first list of ranges | ObservableList |
| ranges2 | The second list of ranges | ObservableList |
| ranges3 | The third list of ranges | ObservableList |
### Styleable Properties
| Property | Description | CSS Property | Type | Default Value |
| -------------- | ------------------------------------------- | -------------------- | ------:| -------------:|
| animationSpeed | Specifies the indeterminate animation speed | -mfx-animation-speed | Double | 1.0 |
### CSS Selectors
- .mfx-progress-bar
- .mfx-progress-bar .track
- .mfx-progress-bar .bar1
- .mfx-progress-bar .bar2
## MFXProgressSpinners
- Style Class: mfx-progress-spinner
- Default Stylesheet: MFXProgressSpinner.css
- Default Skin: MFXProgressSpinnerSkin.java
### Properties
*MFXProgressSpinner has the same properties of MFXProgressBar*
### Styleable Properties
| Property | Description | CSS Property | Type | Default Value |
| ------------- | --------------------------------------------------- | ------------------- | ------:| -------------------------------------------:|
| color1 | Specifies the first color of the spinner arc | -mfx-color1 | Color | Color.web("#4285f4") |
| color2 | Specifies the second color of the spinner arc | -mfx-color2 | Color | Color.web("#db4437") |
| color3 | Specifies the third color of the spinner arc | -mfx-color3 | Color | Color.web("#f4b400") |
| color4 | Specifies the fourth color of the spinner arc | -mfx-color4 | Color | Color.web("#0F9D58") |
| radius | Specifies the radius of the progress spinner | -mfx-radius | Double | -1(will use the value of prefHeight(width)) |
| startingAngle | Specifies the angle at which the spinner will start | -mfx-starting-angle | Double | 360 - Math.random() * 720 |
### CSS Selectors
- .mfx-progress-spinner
- .mfx-progress-spinner .track
- .mfx-progress-spinner .arc
- .mfx-progress-spinner .percentage

35
wiki/Radio Button.md Normal file
View File

@ -0,0 +1,35 @@
# Radio Button
## Preview
<img src="https://imgur.com/ArUhH58.gif" alt="Checkboxes" border="0">
## MFXRadioButtons
- Style Class: mfx-radio-button
- Default Stylesheet: MFXRadioButton.css
- Default Skin: MFXRadioButtonSkin.java
### Styleable Properties
| Property | Description | CSS Property | Type | Default Value |
| ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------ | --------------------:| -------------------:|
| contentDisposition | Specifies how the control is positioned relative to its text | -mfx-content-disposition | ContentDisplay[Enum] | ContentDisplay.LEFT |
| gap | Specifies the spacing between the control and its text | -mfx-gap | Double | 8.0 |
| radioGap | Specifies the gap between the outer and the inner circles of the radio button | -mfx-radio-gap | Double | 3.5 |
| radius | Specifies the radius of the radio button | -mfx-radius | Double | 8.0 |
| textExpand | When setting a specific size for the control (by using setPrefSize for example, and this is true for SceneBuilder too), this flag will tell the control's label to take all the space available. This allows, in combination with the contentDisposition to layout the control's content in many interesting ways. When the text is expanded (this property is true), use the alignment property to position the text. | -mfx-text-expand | Boolean | false |
### CSS Selectors
- .mfx-radio-button
- .mfx-radio-button .label (the radio's text, should not be necessary as bound to the radio button)
- .mfx-radio-button .mfx-ripple-generator
- .mfx-radio-button .radio
- .mfx-radio-button .dot

32
wiki/Ripple Generator.md Normal file
View File

@ -0,0 +1,32 @@
# Ripple Generator
## MFXCircleRippleGenerators
- Style Class: mfx-ripple-generator
### Properties
| Property | Description | Type |
| ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------:|
| region | The region on which the ripple will be generated | Region |
| clipSupplier | The current generator's clip Supplier.<br/>This is responsible for creating the clip node of the generator, which is built and set everytime the ripple is generated, before the animation is started, and defines the bounds beyond which the ripple must not go.<br/>Although the supplier accepts any Shape it is highly recommended to build clips using the RippleClipTypeFactory | Supplier |
| rippleSupplier | The generator's ripple supplier.<br/>This Supplier is responsible for creating the ripple shape before the animation is played | Supplier |
| positionFunction | The generator's ripple position function.<br/>This Function is responsible for computing the ripple's x and y coordinates before the animation is played. The function takes a MouseEvent as the input (since in most controls the coordinates are the x and y coordinates of the mouse event) and returns a PositionBean | Function |
| animateBackground | Specifies if the background of the region should be animated too.<br/>The animation generally consists in temporarily adding a shape to the generator, set its fill same as the ripple color, and manipulate its opacity with a timeline | Boolean |
| animateShadow | Specifies if the DropShadow effect of the region should be animates too.<br/>Mostly used for MFXButtons | Boolean |
| checkBounds | Specifies if the method isWithinBounds(MouseEvent) should be called before generating the ripple.<br/>The purpose of this property is to disable/bypass the bounds check, it may happen in some cases that the check must be disabled to make the generator work properly. An example is the MFXCheckboxSkin | Boolean |
| depthLevelOffset | Specifies by how many levels the shadow should be increased.<br/>For example if the DropShadow effect is of DepthLevel.LEVEL1 and the offset is set to 2 then the shadow will shift to DepthLevel.LEVEL3, (reverted at the end of the animation of course) | Integer |
### Styleable Properties
| Property | Description | CSS Property | Type | Default Value |
| ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- | -------:| ---------------:|
| animationSpeed | Specifies the speed on the ripples' animation.<br/>This is done by setting the animations rate property | -mfx-animation-speed | Double | 1.0 |
| autoClip | Specifies whether the generator should try to buildClip() automatically, this means also trying to fetch the background/border radius.<br/><b>EXPERIMENTAL, may not work in all situations</b> | -mfx-auto-clip | Boolean | false |
| backgroundOpacity | Specifies the strength of the background animation | -mfx-background-opacity | Double | 0.3 |
| rippleColor | Specifies the ripples' color | -mfx-ripple-color | Color | Color.LIGHTGRAY |
| rippleOpacity | Specifies the initial ripple's opacity | -mfx-ripple-opacity | Double | 1.0 |
| rippleRadius | Specifies the ripples' initial radius | -mfx-ripple-radius | Double | 10.0 |
| paused | Property to enable/disable the ripple generator | -mfx-paused | Boolean | false |

70
wiki/Slider.md Normal file
View File

@ -0,0 +1,70 @@
# Slider
## Preview
<img src="https://imgur.com/nOrsa1n.gif" alt="Sliders" border="0">
## MFXSliders
- Style Class: mfx-slider
- Default Stylesheet: MFXSlider.css
- Default Skin: MFXSliderSkin.java
### Properties
| Property | Description | Type |
| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | --------------:|
| min | Specifies the minimum value the slider can reach | Double |
| max | Specifies the maximum value the slider can reach | Double |
| value | Specifies the slider's actual value | Double |
| thumbSupplier | Specifies the Supplier used to build the slider's thumb.<br/>Attempting to set or return a null value will fallback to the default supplier | Supplier |
| popupSupplier | Specifies the Supplier used to build the slider's popup.<br/>You can also set or return null to remove the popup | Supplier |
| popupPadding | Specifies the extra gap between the thumb and the popup | Double |
| decimalPrecision | Specifies the number of decimal places for the slider's value | Integer |
| enableKeyboard | Specifies if the value can be adjusted with the keyboard or not | Boolean |
| ranges1 | Returns the first list of ranges | ObservableList |
| ranges2 | Returns the second list of ranges | ObservableList |
| ranges3 | Returns the third list of ranges | ObservableList |
### Styleable Properties
| Property | Description | CSS Property | Type | Default Value |
| ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------- | ---------------------:| ---------------------- |
| sliderMode | Specifies the slider mode. Can be DEFAULT (freely adjust the thumb) or SNAP_TO_TICKS (the thumb will always snap to ticks) | -mfx-slider-mode | SlideMode[Enum] | SliderMode.DEFAULT |
| unitIncrement | Specifies the value to add/subtract to the slider's value when an arrow key is pressed.<br/>The arrow keys depend on the slider orientation: HORIZONTAL: right, left; VERTICAL: up, down | -mfx-unit-increment | Double | 10.0 |
| alternativeUnitIncrement | Specifies the value to add/subtract to the slider's value when an arrow key and Shift or Ctrl are pressed | -mfx-alternative-unit-increment | Double | 5.0 |
| tickUnit | The value between each major tick mark in data units | -mfx-tick-count | Double | 25.0 |
| showMajorTicks | Specifies if the major ticks should be displayed or not | -mfx-show-major-ticks | Boolean | false |
| showMinorTicks | Specifies if the minor ticks should be displayed or not | -mfx-show-minor-ticks | Boolean | false |
| showTicksAtEdges | Specifies if the major ticks at the edge of the slider should be displayed or not.<br/>The ticks at the edge are those ticks which represent the min and max values | -mfx-show-ticks-at-edge | Boolean | true |
| minorTicksCount | Specifies how many minor ticks should be added between two major ticks | -mfx-minor-ticks-count | Integer | 5 |
| animateOnPress | When pressing on the slider's track the value is adjusted according to the mouse event coordinates.<br/>This property specifies if the progress bar adjustment should be animated or not | -mfx-animate-on-press | Boolean | true |
| bidirectional | If the slider is set to be bidirectional the progress bar will always start from 0.<br/>When the value is negative the progress bar grows in the opposite direction to 0.<br/>This works only if min is negative and max is positive, otherwise this option in ignored during layout. See the warning in the control documentation | -mfx-bidirectional | Boolean | true |
| orientation | Specifies the slider's orientation | -mfx-orientation | Orientation[Enum] | Orientation.HORIZONTAL |
| popupSide | Specifies the popup side.<br/>DEFAULT is above for horizontal orientation and left for vertical orientation.<br/>OTHER_SIDE is below for horizontal orientation and right for vertical orientation. | -mfx-popup-side | SliderPopupSide[Enum] | SlidePopupSide.DEFAULT |
### CSS Selectors
- .mfx-slider
- .mfx-slider .track
- .mfx-slider .axis (for the ticks)
- .mfx-slider .axis .axis-minor-tick-mark (for the minor ticks)
- .mfx-slider .tick-even (for even major ticks)
- .mfx-slider .tick-odd (for odd major ticks)
- .mfx-slider .bar
- .mfx-slider .thumb-container
- .mfx-slider .thumb-container .thumb (font icon)
- .mfx-slider .thumb-container .thumb-radius (font icon)
- .mfx-slider .thumb-container .mfx-ripple-generator

88
wiki/Stepper.md Normal file
View File

@ -0,0 +1,88 @@
# Stepper
## Preview
<img src="https://imgur.com/nEgV9F1.gif" alt="Stepper" border="0">
## MFXSteppers
- Style Class: mfx-stepper
- Default Stylesheet: MFXStepper.css
- Default Skin: MFXStepperSkin.java
### Properties
| Property | Description | Type |
| ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------:|
| stepperToggles | The stepper's toggles list, each toggle is a step | ObservableList |
| animationDuration | Specifies, in milliseconds, the duration of the progress bar animation | Duration |
| progress | Specifies the stepper's progress, the number of COMPLETED toggles divided by the total number of toggles. The values go from 0.0 to 1.0 | Double |
| currentIndex | Specifies the selected toggle position in the toggles list.<br/>The index is updated by the next() and previous() methods | Integer |
| currentContent | Convenience property that holds the selected toggle content node.<br/>In case one of the toggles has a  null content the content pane's children list is cleared | Node |
| lastToggle | Convenience property that specifies if the last toggle is selected | Boolean |
| enableContentValidationOnError | Specifies if all the controls that implement the Validated interface should be validated when the next button is pressed and the toggle state is ERROR | Boolean |
### Styleable Properties
| Property | Description | CSS Property | Type | Default Value |
| ----------------------- | -------------------------------------------------------------------------------- | ----------------------- | ---------:| --------------------:|
| spacing | Specifies the spacing between toggles | -mfx-spacing | Double | 128.0 |
| extraSpacing | Specifies the extra length (at the start and at the end) of the progress bar | -mfx-extra-spacing | Double | 64.0 |
| alignment | Specifies the alignment of the toggles.<br/>Steppers are usually centered though | -mfx-alignment | Pos[Enum] | Pos.CENTER |
| baseColor | Specifies the stepper's primary color | -mfx-base-color | Paint | Color.web("7F0FFF") |
| altColor | Specifies the stepper's secondary color | -mfx-alt-color | Paint | Color.web("BEBEBE") |
| progressBarBorderRadius | Specifies the borders radius of the progress bar | -mfx-bar-borders-radius | Double | 7.0 |
| progressBarBackground | Specifies the progress bar track color | -mfx-bar-background | Paint | Color.web("#F8F8FF") |
| progressColor | Specifies the progress color | -mfx-progress-color | Paint | Color.web("#7F0FFF") |
| animated | Specifies if the progress bar should be animated or not | -mfx-bar-animated | Boolean | true |
### CSS Selectors
- .mfx-stepper
- .mfx-stepper .track (progress bar's track)
- .mfx-stepper .bar (progress bar's progress)
- .mfx-stepper .mfx-stepper-toggle
- .mfx-stepper .content-pane (the pane containing the toggle's specified content)
- .mfx-stepper .buttons-box (the footer containing the previous and next buttons)
- .mfx-stepper .buttons-box .mfx-button
## MFXStepperToggles
- Style Class: mfx-stepper-toggle
- Default Stylesheet: MFXStepperToggle.css
- Default Skin: MFXStepperToggleSkin.java
### Properties
| Property | Description | Type |
| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------:|
| showErrorIcon | Specifies if a little error icon should be shown when the state is ERROR in the upper right corner of the toggle (default position defined in the skin) | Boolean |
| content | The content to be shown in the stepper when selected | Node |
| text | Specifies the text to be shown above or below the toggle | String |
| icon | Specifies the icon shown in the circle of the toggle | Node |
| state | Specifies the state of the toggle | StepperToggleState[Enum] |
### Styleable Properties
| Property | Description | CSS Property | Type | Default Value |
| ------------ | ----------------------------------------------------------- | ------------------- | ------------------:| -------------------:|
| labelTextGap | Specifies the gap between the toggle's circle and the label | -mfx-label-text-gap | Double | 10.0 |
| textPosition | Specifies the position of the label | -mfx-text-position | TextPosition[Enum] | TextPosition.BOTTOM |
| size | Specifies the radius of the toggle's circle | -mfx-size | Double | 22.0 |
| strokeWidth | Specifies the stroke width of the toggle's circle | -mfx-stroke-width | Double | 2.0 |
### CSS Selectors
- .mfx-stepper-toggle
- .mfx-stepper-toggle .mfx-text-field

161
wiki/Table Views.md Normal file
View File

@ -0,0 +1,161 @@
# Table Views
## Preview
<img src="https://imgur.com/nj6xhUT.gif" alt="Tableviews" border="0">
## MFXTableViews
- Style Class: mfx-table-view
- Default Stylesheet: MFXTableView.css
- Default Skin: MFXTableViewSkin.java
- Default Cell: MFXTableRow.java
- Default Columns: MFXTableColumn.java
### Properties
| Property | Description | Type |
| ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------:|
| virtualFlowInitialized | Useful property to inform that the table layout has been initialized/is ready.<br/>For example it is used by the autosizeColumnsOnInitialization() method to autosize the columns before the table is even laid out by using a listener.<br/>It is considered initialized as soon as the SimpleVirtualFlow retrieves the cells' height. | Boolean |
| items | Specifies the table's ObservableList containing the items. | ObservableList |
| selectionModel | The model holding the table's selection | IMultipleSelectionModel |
| tableColumns | The list containing the table's columns | ObservableList |
| tableRowFactory | Specifies the Function used to generate the table rows | Function |
| transformableList | This is the list on which filtering and sorting are made. The original list remains untouched! | TransformableListWrapper |
| filters | The list containing the filters' information used by the MFXFilterPane to filter the table | ObservableList |
| footerVisible | Specifies whether the table's footer is visible | Boolean |
### CSS Selectors
- .mfx-table-view
- .mfx-table-view .columns-container
- .mfx-table-view .columns-container .mfx-table-column
- .mfx-table-view .virtual-flow
- .mfx-table-view .virtual-flow .scrollbar
- .mfx-table-view .virtual-flow .mfx-table-row
- .mfx-table-view .default-footer
- .mfx-table-view .default-footer .mfx-icon-wrapper
- .mfx-table-view .default-footer .mfx-icon-wrapper .mfx-ripple-generator
- .mfx-table-view .default-footer .mfx-icon-wrapper .mfx-font-icon
## MFXPaginatedTableView
- Style Class: mfx-paginated-table-view
- Default Stylesheet: MFXTableView.css
- Default Skin: MFXPaginatedTableViewSkin.java
- Default Cell: MFXTableRow.java
- Default Columns: MFXTableColumn.java
### Properties
*In addition to the properties inherithed by MFXTableView:*
| Property | Description | Type |
| ----------- | ------------------------------------------------------------------------- | -------:|
| currentPage | Specifies the current shown page | Integer |
| maxPage | Specifies the last page index | Integer |
| pagesToShow | Specifies how many pages can be shown at a time by the pagination control | Integer |
| rowsPerPage | Specifies how many rows the table can show per page | Integer |
### CSS Selectors
*In addition to the CSS selectors of MFXTableView:*
- .mfx-paginated-table-view .default-footer .mfx-pagination (to reach the pagination control)
<br/><br/>
## Cells/Sub-Components used by MFXTableViews
## MFXTableRow
- Style Class: mfx-table-row
- Default Stylesheet: MFXTableView.css
### Properties
| Property | Description | Type |
| -------- | -------------------------------------------------- | --------------:|
| cells | The row's cells as an unmodifiable observable list | ObservableList |
| index | Specifies the row's index in the SimpleVirtualFlow | Integer |
| data | Specifies the item represented by the row | T[Generic] |
| selected | Specifies the selection state of the row | Boolean |
### CSS Selectors
- .mfx-table-row
- .mfx-table-row .mfx-ripple-generator
- .mfx-table-row .mfx-table-row-cell
## MFXTableRowCell
- Style Class: mfx-table-row-cell
- Default Stylesheet: MFXTableView.css
- Default Skin: MFXTableRowCellSkin.java
### Properties
| Property | Description | Type |
| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------:|
| extractor | The function used by the cell to extract from a generic table item T, the cell's data E.<br/>Example: the table contains a list of Cities, the second column represents the city's population, the function extracts from a City object the population field | Function |
| converter | The StringConverter used to convert the extracted E field to a String, which will then be the cell's text | StringConverter |
| leadingGraphic | Specifies the cell's leading node | Node |
| trailingGraphic | Specifies the cell's trailing node | Node |
### CSS Selectors
- .mfx-table-row-cell
- .mfx-table-row-cell .label (not really needed since it's bound to the row cell)
## MFXTableColumn
- Style Class: mfx-table-column
- Default Stylesheet: MFXTableView.css
- Default Skin: MFXTableColumnSkin.java
### Properties
| Property | Description | Type |
| --------------- | ------------------------------------------------------------------------------ | ---------------:|
| rowCellFactory | Specifies the Function used to build the row's cells | Function |
| sortState | Specifies the sort state of the column, can be UNSORTED, ASCENDING, DESCENDING | SortState[Enum] |
| comparator | Specifies the Comparator}used to sort the column | Comparator |
| dragged | Specifies whether the column is being dragged | Boolean |
| columnResozable | Specifies whether the column can be resized | Boolean |
### CSS Selectors
- .mfx-table-column
- .mfx-table-column .laber (not really needed since it's bound to the table column)
- .mfx-table-column .mfx-icon-wrapper (sort icon container)
- .mfx-table-column .mfx-icon-wrapper .mfx-ripple-generator
- .mfx-table-column .mfx-icon-wrapper .mfx-font-icon (the actual sort icon)

80
wiki/Text Fields.md Normal file
View File

@ -0,0 +1,80 @@
# Text Fields
## Preview
<img src="https://imgur.com/XT2iVU7.gif" alt="Fields" border="0">
## MFXTextFields
- Style Class: mfx-text-field
- Default Stylesheet: MFXTextField.css
- Default Skin: MFXTextFieldSkin.java
### Properties
| Property | Description | Type |
| ------------ | ---------------------------------------------------------------- | -------:|
| selectable | Specifies whether selection is allowed | Boolean |
| leadingIcon | Specifies the icon placed before the input field | Node |
| trailingIcon | Specifies the icon placed after the input field | Node |
| floatingText | Specifies the text of the floating text node | String |
| floating | Specifies if the floating text node is currently floating or not | Boolean |
### Styleable Properties
| Property | Description | CSS Property | Type | Default Value |
| --------------- | -------------------------------------------------------------------------------------------------------------------------- | -------------------- | ---------------:| ------------------------:|
| allowEdit | Specifies whether the field is editable | -mfx-editable | Boolean | true |
| animated | Specifies whether the floating text positioning is animated | -mfx-animated | Boolean | true |
| borderGap | For FloatMode.BORDER FloatMode.ABOVE modes, this specifies the distance from the control's x origin (padding not included) | -mfx-border-gap | Double | 10.0 |
| caretVisible | Specifies whether the caret should be visible | -mfx-caret-visible | Boolean | true |
| floatMode | Specifies how the floating text is positioned when floating.<br/>Can be: DISABLED, ABOVE, BORDER, INLINE | -mfx-float-mode | FloatMode[Enum] | INLINE |
| floatingTextGap | For FloatMode.INLINE mode, this specifies the gap between the floating text node and the input field node | -mfx-gap | Double | 5.0 |
| graphicTextGap | Specifies the gap between the input field and the icons | -fx-graphic-text-gap | Double | 10.0 |
| scaleOnAbove | Specifies whether the floating text node should be scaled or not when the float mode is set to FloatMode.ABOVE | -mfx-scale-on-above | Boolean | false |
| textFill | Specifies the text color | -fx-text-fill | Color | Color.rgb(0, 0, 0, 0.87) |
| textLimit | Specifies the maximum number of characters the field's text can have | -mfx-text-limit | Integer | -1(Unlimited) |
### CSS Selectors
- .mfx-text-field
- .mfx-text-field .floating-text
- .mfx-text-field .text-field (to access the actual field node, should not be necessary)
## MFXPasswordFields
- Style Class: mfx-password-field
- Default Stylesheet: MFXPasswordField.css
- Default Skin: MFXTextFieldSkin.java
### Properties
*The password field has the same exact properties of MFXTextField*
### Styleable Properties
*In addition to the styleable properties inherited by MFXTextField:*
| Property | Description | CSS Property | Type | Default Value |
| ------------- | ----------------------------------------------------------------------- | ------------------- | ----------------------------------------------------------------------------------:| -----------------------------------------------------:|
| allowCopy | Specifies if copying the password field text is allowed | -mfx-allow-copy | Boolean | false |
| allowCut | Specifies if it's allowed to cut text from the password field | -mfx-allow-cut | Boolean | false |
| allowPaste | Specifies if it's allowed to paste text from the clipboard to the field | -mfx-allow-paste | Boolean | false |
| showPassword | Specifies if the text should be un-masked to show the password | -mfx-show-password | Boolean | false |
| hideCharacter | Specifies the character used to mask the text | -mfx-hide-character | String (can be only one character, the String will always be cut to one character) | BULLET (unicode, public constant of MFXPasswordField) |
### CSS Selectors
*In addition to the CSS selectors inherited by MFXTextField:*
- .mfx-password-field .mfx-icon-wrapper (eye icon container)
- .mfx-password-field .mfx-icon-wrapper .mfx-ripple-generator
- .mfx-password-field .mfx-icon-wrapper .mfx-font-icon (the actual icon)

98
wiki/Toggles.md Normal file
View File

@ -0,0 +1,98 @@
# Toggles
## Preview
<img src="https://imgur.com/ArUhH58.gif" alt="Checkboxes" border="0">
## MFXToggleButtons
- Style Class: mfx-toggle-button
- Default Stylesheet: MFXToggleButton.css
- Default Skin: MFXToggleButtonSkin.java
### Properties
| Property | Description | Type |
| ----------- | ------------------------------------------------------------------------ | ------------:|
| toggleGroup | Specifies the ToggleGroup to which this Toggle belongs | ToggleGroup |
| selected | Specifies the selection state for the Toggle | Boolean |
| onAction | Specifies the action to perform when the toggle' selection state changes | EventHandler |
### Styleable Properties
| Property | Description | CSS Property | Type | Default Value |
| ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------ | --------------:| -------------------:|
| contentDisposition | Specifies how the control is positioned relative to its text | -mfx-content-disposition | ContentDisplay | ContentDisplay.LEFT |
| gap | Specifies the spacing between the control and its text | -mfx-gap | Double | 8.0 |
| length | Specifies the length of the toggle button's line | -mfx-length | Double | 36.0 |
| radius | Specifies the radius of the toggle button's circle | -mfx-radius | Double | 10.0 |
| textExpand | When setting a specific size for the control (by using setPrefSize for example, and this is true for SceneBuilder too), this flag will tell the control's label to take all the space available. This allows, in combination with the contentDisposition to layout the control's content in many interesting ways. When the text is expanded (this property is true), use the alignment property to position the text. | -mfx-text-expand | Boolean | false |
### CSS Selectors
- .mfx-toggle-button
- .mfx-toggle-button .label (not really needed as bound to the toggle)
- .mfx-toggle-button .mfx-ripple-generator
- .mfx-toggle-button .line (the toggle's line)
- .mfx-toggle-button .circle (the toggle's circle)
## MFXCircleToggleNodes
- Style Class: mfx-circle-toggle-node
- Default Stylesheet: MFXCircleToggleNode.css
- Default Skin: MFXCircleToggleNodeSkin.java
### Properties
| Property | Description | Type |
| ----------------- | ----------------------------------- | ----:|
| labelLeadingIcon | Specifies the label's leading icon | Node |
| labelTrailingIcon | Specifies the label's trailing icon | Node |
### Styleable Properties
| Property | Description | CSS Property | Type | Default Value |
| ------------ | ------------------------------------------------------------------- | ------------------ | ------------------:| -------------------:|
| gap | Specifies the gap between the toggle and its text | -mfx-gap | Double | 5.0 |
| size | Specifies the toggle's radius | -mfx-size | Double | 32.0 |
| textPosition | Specifies the position of the label, above or underneath the toggle | -mfx-text-position | TextPosition[Enum] | TextPosition.BOTTOM |
### CSS Selectors
- .mfx-circle-toggle-node
- .mfx-circle-toggle-node .mfx-ripple-generator
- .mfx-circle-toggle-node .circle
- .mfx-circle-toggle-node .mfx-text-field (toggle's text, acts as a Label)
## MFXRectangleToggleNodes
- Style Class: mfx-rectangle-toggle-node
- Default Stylesheet: MFXRectangleToggleNode.css
- Default Skin: MFXRectangleToggleNodeSkin.java
### Properties
*This toggle has the same properties as MFXCircleToggleNode andbut no styleable properties*
### CSS Selectors
- .mfx-rectangle-toggle-node
- .mfx-rectangle-toggle-node .mfx-ripple-generator
-
- .mfx-rectangle-toggle-node .mfx-text-field (toggle's text, acts as a Label)

29
wiki/Tooltip.md Normal file
View File

@ -0,0 +1,29 @@
# Tooltip
## MFXTooltips
- Style Class: mfx-tooltip
- Default Stylesheet: MFXTooltip.css
- Default Skin: MFXTooltipSkin.java
### Properties
| Property | Description | Type |
| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------:|
| icon | Specifies the tooltip's icon | Node |
| text | Specifies the tooltip's text | String |
| owner | The context menu's owner | Node |
| mousePosition | The context menu trakcs the mouse position on the owner node | PositionBean |
| showAction | This Consumer allows the user to decide how to show the tooltip.<br/>The Consumer carries the tracked mouse position, see (mousePosition).<br/>By default, calls show(Node, double, double) | Consumer |
| showDelay | The amount of time after which the tooltip is shown | Duration |
| hideAfter | The amount of time after which the tooltip is automatically hidden | Duration |
### CSS Selectors
- .mfx-tooltip
- .mfx-tooltip .container (the top container, should not be necessary)
- .mfx-tooltip .container .label