How to Download and Add JFoenix Library in a Project.

In this tutorial I will show you on how to download and add JFoenix in NetBeans IDE. Using JFoenix we can design desktop software more easily and look pretty good. Follow the following steps;

To get started, set up your workspace as follows:

  1. Open the browser
  2. Click this link https://github.com/jfoenixadmin/JFoenix
  3. Go to the right hand side on top, click Clone or download
  4. Click save file
  5. Go to the downloads folder, you will find jfoenix.jar file
  6. In the project folder, open libraries > Right click > Select Add JAR / Folder.
  7. Select jfoenix.jar file and click open.

Now, you can use JFoenix Library in your project.

Also to add CSS of JFoenix in your project, create CascadeStyleSheet.css and paste the following code;

.root{-fx-font-family:Roboto;src:"/resources/roboto/Roboto-Regular.ttf"}.jfx-hamburger{-fx-spacing:5;-fx-cursor:hand}.jfx-hamburger StackPane{-fx-pref-width:40px;-fx-pref-height:7px;-fx-background-color:#3CC;-fx-background-radius:5px}.text-field{-fx-max-width:800}.jfx-text-field,.jfx-password-field{-fx-background-color:#fff;-fx-font-weight:BOLD;-fx-prompt-text-fill:gray;-fx-alignment:top-left;-fx-focus-color:#3CC;-fx-unfocus-color:#4d4d4d}.jfx-decorator{-fx-decorator-color:RED}.jfx-decorator .jfx-decorator-buttons-container{-fx-background-color:-fx-decorator-color}.jfx-decorator .resize-border{-fx-border-color:-fx-decorator-color;-fx-border-width:0 4 4 4}.jfx-text-area,.text-area{-fx-font-weight:BOLD}.jfx-text-field:error,.jfx-password-field:error,.jfx-text-area:error{-fx-focus-color:#D34336;-fx-unfocus-color:#D34336}.jfx-text-field .errorLabel,.jfx-password-field .errorLabel,.jfx-text-area .errorLabel{-fx-text-fill:#C0F;-fx-font-size:.75em}.jfx-text-field .errorIcon,.jfx-password-field .errorIcon,.jfx-text-area .errorIcon{-fx-text-fill:#C0F;-fx-font-size:1em}.progress-bar > .bar{-fx-min-width:500}.jfx-progress-bar > .bar{-fx-min-width:500}.jfx-progress-bar{-fx-track-color:#C8C8C8;-fx-progress-color:#0F9D58;-fx-stroke-width:3}.icon{-fx-text-fill:#FE774D;-fx-padding:10;-fx-cursor:hand}.icons-rippler{-fx-rippler-fill:BLUE;-fx-mask-type:CIRCLE}.icons-rippler:hover{-fx-cursor:hand}.icons-badge{-fx-badge-fill:BLUE;-fx-badge-scale:3;-fx-mask-type:CIRCLE}.jfx-check-box{-fx-font-weight:BOLD}.custom-jfx-check-box{-fx-checked-color:RED;-fx-unchecked-color:#3CC}.button{-fx-padding:.7em .57em;-fx-font-size:14px}.button-raised{-fx-padding:.7em .57em;-fx-font-size:14px;-fx-button-type:RAISED;-fx-background-color:#C0F;-fx-pref-width:200;-fx-text-fill:#fff}.mylistview .scroll-bar:horizontal .track,.mylistview .scroll-bar:vertical .track{-fx-background-color:transparent;-fx-border-color:transparent;-fx-background-radius:0;-fx-border-radius:2em}.mylistview .scroll-bar:horizontal .increment-button,.mylistview .scroll-bar:horizontal .decrement-button{-fx-background-color:transparent;-fx-background-radius:0;-fx-padding:0 0 10 0}.mylistview .scroll-bar:vertical .increment-button,.mylistview .scroll-bar:vertical .decrement-button{-fx-background-color:transparent;-fx-background-radius:0;-fx-padding:0 10 0 0}.mylistview .scroll-bar .increment-arrow,.mylistview .scroll-bar .decrement-arrow{-fx-shape:" ";-fx-padding:0}.mylistview .scroll-bar:horizontal .thumb,.mylistview .scroll-bar:vertical .thumb{-fx-background-color:derive(black,90%);-fx-background-insets:2,0,0;-fx-background-radius:2em}.jfx-list-cell-container{-fx-alignment:center-left}.jfx-list-cell-container > .label{-fx-text-fill:#000}.jfx-list-cell:odd:selected .jfx-list-cell-container,.jfx-list-cell:even:selected .jfx-list-cell-container{-fx-background-color:#3CC}.jfx-list-cell{-fx-background-insets:0;-fx-text-fill:#000}.jfx-list-cell:odd,.jfx-list-cell:even{-fx-background-color:#fff}.jfx-list-cell:filled:hover{-fx-text-fill:#000}.jfx-list-cell .jfx-rippler{-fx-rippler-fill:BLUE}.jfx-list-view{-fx-background-insets:0;-fx-cell-horizontal-margin:0;-fx-cell-vertical-margin:5;-fx-vertical-gap:10;-fx-expanded:false;-fx-pref-width:200}.jfx-toggle-button{-fx-toggle-color:RED}.jfx-tool-bar{-fx-font-size:20;-fx-font-weight:BOLD;-fx-background-color:#5264AE;-fx-pref-width:100%;-fx-pref-height:64px}.jfx-tool-bar HBox{-fx-alignment:center;-fx-spacing:25;-fx-padding:0 10}.jfx-tool-bar Label{-fx-text-fill:#fff}.jfx-popup-container{-fx-background-color:#fff}.jfx-snackbar-content{-fx-background-color:#323232;-fx-padding:5;-fx-spacing:5}.jfx-snackbar-toast{-fx-text-fill:#fff}.jfx-snackbar-action{-fx-text-fill:#ff4081}.jfx-list-cell-content-container{-fx-alignment:center-left}.jfx-list-cell-container .label{-fx-text-fill:#000}.combo-box-popup .list-view .jfx-list-cell:odd:selected .jfx-list-cell-container,.combo-box-popup .list-view .jfx-list-cell:even:selected .jfx-list-cell-container{-fx-background-color:rgba(0.0,0.0,255.0,0.2)}.combo-box-popup .list-view .jfx-list-cell{-fx-background-insets:0;-fx-text-fill:#000}.combo-box-popup .list-view .jfx-list-cell:odd,.combo-box-popup .list-view .jfx-list-cell:even{-fx-background-color:#fff}.combo-box-popup .list-view .jfx-list-cell:filled:hover{-fx-text-fill:#000}.combo-box-popup .list-view .jfx-list-cell .jfx-rippler{-fx-rippler-fill:#5264AE}.tree-table-view{-fx-tree-table-color:rgba(255,0,0,0.2);-fx-tree-table-rippler-color:#3CC}.tree-table-view:focused .tree-table-row-cell:selected{-fx-background-color:-fx-tree-table-color;-fx-table-cell-border-color:-fx-tree-table-color;-fx-text-fill:#000}.tree-table-view:focused .tree-table-row-cell:selected .tree-table-cell{-fx-text-fill:#000}.tree-table-view .jfx-rippler{-fx-rippler-fill:-fx-tree-table-rippler-color}.tree-table-view .column-header,.tree-table-view .column-header-background,.tree-table-view .column-header-background .filler{-fx-background-color:TRANSPARENT}.tree-table-view .column-header{-fx-border-width:0 1 0 1;-fx-border-color:#F3F3F3}.tree-table-view .column-header .label{-fx-text-fill:#3CC;-fx-padding:16 0 16 0}.tree-table-view .column-header .arrow,.tree-table-view .column-header .sort-order-dot{-fx-background-color:#3CC}.tree-table-view .column-header:last-visible{-fx-border-width:0 2 0 1}.tree-table-view .column-header-background{-fx-border-width:0 0 1 0;-fx-border-color:#F3F3F3}.tree-table-view .tree-table-cell{-fx-border-width:0 0 0 0;-fx-padding:16 0 16 0}.tree-table-view .column-overlay{-fx-background-color:-fx-tree-table-color}.tree-table-view .column-resize-line,.tree-table-view .column-drag-header{-fx-background-color:-fx-tree-table-rippler-color}.tree-table-view:focused{-fx-background-color:-fx-tree-table-color,-fx-box-border,-fx-control-inner-background;-fx-background-insets:-1.4,0,1;-fx-background-radius:1.4,0,0;-fx-padding:1}.tree-table-row-cell > .tree-disclosure-node > .arrow{-fx-background-color:-fx-text-fill;-fx-padding:.333333em .229em .333333em .229em;-fx-shape:"M 0 -3.5 L 4 0 L 0 3.5 z"}.tree-table-row-cell .jfx-text-field{-fx-focus-color:rgba(240,40,40)}.tree-table-row-group{-fx-background-color:rgba(230,230,230)}.animated-option-button{-fx-pref-width:40px;-fx-background-color:#44B449;-fx-background-radius:30px;-fx-pref-height:30px;-fx-text-fill:#fff;-fx-border-radius:30px}.animated-option-sub-button{-fx-background-color:#43609C}.animated-option-sub-button2{-fx-background-color:#cb6860}.tree-table-view .menu-item:focused{-fx-background-color:-fx-tree-table-color}.tree-table-view .menu-item .label{-fx-padding:5 0 5 0}.jfx-combo-box .combo-box-button-container{-fx-border-color:#b4b4b4;-fx-border-width:0 0 2 0}

Now, you can use JFoenix CSS in your project.


Login to comment


Comments