Code Monkey home page Code Monkey logo

bootstrapfx's Introduction

BootstrapFX

Build Status bootstrapfx core


BootstrapFX is a partial port of Twitter Bootstrap for JavaFX. It mainly provides a CSS stylesheet that closely resembles the original while being custom tailored for JavaFX’s unique CSS flavor.

It’s worth mentioning that Twitter Bootstrap delivers more than just a standardized look for common widgets. It also provides new widgets, behavior and a grid system. Some of these features may be ported at a later stage to BootstrapFX.

Installing

You can get the latest version of BootstrapFX from Maven Central.

gradle
repositories {
    mavenCentral()
}

dependencies {
    implementation 'org.kordamp.bootstrapfx:bootstrapfx-core:0.4.0'
}
maven
<dependencies>
    <dependency>
        <groupId>org.kordamp.bootstrapfx</groupId>
        <artifactId>bootstrapfx-core</artifactId>
        <version>0.4.0</version>
    </dependency>
</dependencies>

Once the bootstrapfx-core dependency is in your classpath you just need to apply the boostrapfx.css stylesheet to a scene, for example

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;
import org.kordamp.bootstrapfx.BootstrapFX;
import org.kordamp.bootstrapfx.scene.layout.Panel;

public class Sampler extends Application {
    @Override
    public void start(Stage primaryStage) throws Exception {                   //(1)
        Panel panel = new Panel("This is the title");
        panel.getStyleClass().add("panel-primary");                            //(2)
        BorderPane content = new BorderPane();
        content.setPadding(new Insets(20));
        Button button = new Button("Hello BootstrapFX");
        button.getStyleClass().setAll("btn","btn-danger");                     //(2)
        content.setCenter(button);
        panel.setBody(content);

        Scene scene = new Scene(panel);
        scene.getStylesheets().add(BootstrapFX.bootstrapFXStylesheet());       //(3)

        primaryStage.setTitle("BootstrapFX");
        primaryStage.setScene(scene);
        primaryStage.sizeToScene();
        primaryStage.show();
    }
}
  1. Custom widget from BootstrapFX

  2. Apply CSS class to widgets

  3. Apply BootstrapFX stylesheet to scene

Building

You must meet the following requirements:

  • JDK11 as a minimum

  • Gradle 6.8.3

You may used the included gradle wrapper script if you don’t have gradle installed.

Installing Gradle

Manual
  1. Download Gradle from http://gradle.org/downloads

  2. Unzip the file into a directory without spaces (recommended).

  3. Create a GRADLE_HOME environment variable that points to this directory.

  4. Adjust your PATH environment variable to include $GRADLE_HOME/bin (%GRADLE_HOME%\bin on Windows).

  5. Test your setup by invoking gradle --version.

SDKMAN
  1. Follow the instructions found at http://sdkman.io/ to install SDKMAN.

  2. You need a POSIX environment if running Windows. We recommend using Babun Shell (http://babun.github.io/)

  3. Once SDKMAN is installed invoke sdk install gradle 6.8.3.

  4. Test your setup by invoking gradle --version.

Gum

Gum is a wrapper script that facilitates invoking gradle tasks anywhere within a Gradle project. It’s smart enough to use the gradle wrapper if available or your global gradle command. This is an optional download.

  1. Follow the instructions found at https://github.com/kordamp/gm to install gum

Next Steps

Make a full build by invoking the following command

$ gm build

Run the sampler application by invoking the following command

$ gm :sampler:run

Supported CSS Classes

Text

  • b, strong

  • i, em, italic, dfn

  • small

  • code, kbd, pre, samp

  • h1, h2, h3, h4, h5, h6

  • lead

  • p

  • text-mute

  • text-primary, text-success, text-info, text-warning, text-danger

  • bg-primary, bg-success, bg-info, bg-warning, bg-danger

Buttons

  • btn

  • btn-default, btn-primary, btn-success, btn-info, btn-warning, btn-danger

  • btn-lg, btn-sm, btn-xs

SplitMenu Buttons

  • split-menu-btn

  • split-menu-btn-default, split-menu-btn-primary, split-menu-btn-success, split-menu-btn-info, split-menu-btn-warning, split-menu-btn-danger

  • split-menu-btn-lg, split-menu-btn-sm, split-menu-btn-xs

Labels

  • lbl

  • lbl-default, lbl-primary, lbl-success, lbl-info, lbl-warning, lbl-danger

Panels

  • panel

  • panel-default, panel-primary, panel-success, panel-info, panel-warning, panel-danger

  • panel-heading

  • panel-title

  • panel-body

  • panel-footer

Alerts

  • alert

  • alert-success, alert-info, alert-warning, alert-danger

Groups

  • btn-group-horizontal

  • btn-group-vertical

NOTE: all elements inside the vertical button group must have the same width.

Progress Bars

  • progress-bar-primary

  • progress-bar-success

  • progress-bar-info

  • progress-bar-warning

  • progress-bar-danger

Tooltips

  • tooltip-primary

  • tooltip-success

  • tooltip-info

  • tooltip-warning

  • tooltip-danger

Miscellaneous

  • badge

Screenshots

buttons
labels
alerts
panels
splitmenu buttons

Changelog

0.4.0
  • Full modular build.

  • JDK 11 is now the minimum requirement.

0.3.0
  • The build was updated to use a different SASS plugin.

0.2.4
  • The bootstrapfx.css file has been moved to org/kordamp/bootstrapfx/bootstrapfx.css.

0.2.3
  • Added progress-bar variants

  • Added tooltip variants

  • Tweaked menu items and menus

0.2.2
  • Add Automatic-Module-Name to JAR manifest

0.2.1
  • POM updates

0.2.0
  • SplitMenu Button support

  • Button group support

  • lead on Text

0.1.0
  • First release

bootstrapfx's People

Contributors

aalmiray avatar floriankirmaier avatar jreznot avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

bootstrapfx's Issues

Checkbox does not render correctly

CheckBoxSkin uses css selectors "box" and "mark"

public CheckBoxSkin(CheckBox checkbox) {
    super(checkbox, new ButtonBehavior<CheckBox>(checkbox));

    box.getStyleClass().setAll("box");
    innerbox = new StackPane();
    innerbox.getStyleClass().setAll("mark");
    ...
}

however mark is being redefined in bootstrap.css as:

mark,
.mark {
  -fx-background-color: #fcf8e3;
  -fx-padding: .2em;
}

this causes the checkbox to be small and the mark is not visible - a workaround is to redefine affected check-box style e.g. from modena in your css file (loaded after bootstrapfx.css)

.check-box:selected > .box > .mark,
.check-box:indeterminate  > .box > .mark {
    -fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
}
.check-box > .box > .mark {
    -fx-background-color: null;
    -fx-padding: 0.416667em 0.416667em 0.5em 0.5em; /* 5 5 6 6 */
}
.check-box:indeterminate  > .box > .mark {
    -fx-padding: 0.666667em; /* 16x16 = 8+8 */
}

How to rotate panel

I was wondering how to rotate a panel 90 degrees with showing the CSS as well

unrecognized character

Hello. I added bootstrapfx libraray to my program. Everything is ok but when I apply this styles my code does not render '\u20bc' symbol on the table column. How can I fix this problem? At now it shows little square

Incompatibility Issue with ControlsFX Glyphs When Using BootstrapFX

Hello BootstrapFX Team,

I've encountered an issue that seems to stem from a compatibility problem between BootstrapFX and ControlsFX, specifically regarding the use of glyphs.

Environment:
BootstrapFX Version: 0.4.0
ControlsFX Version: 11.1.2
Java Version: 17
Operating System: OSX silicon chip

Issue Description:
When using BootstrapFX alongside ControlsFX, the glyphs from ControlsFX are not displayed correctly. Instead of the expected glyph icon, a square is shown. This issue only occurs when BootstrapFX is included in the project. If I remove BootstrapFX, the glyphs display correctly without any problems.

Styling ComboBox?

Hi,
Thanks for this library! Would it be possible to add the styling for CombBox? It looks like this by default:

image

Panel heading text missing panel-title style

Using Panel constructor with title produces label with "panel-title" style, however calling setText() the style is not applied.
A workaround is to call setHeading() passing a Label with "panel-title" added manually so I was wondering if this was intentional?

public Panel(String title) {
    this();
    Label label = new Label(title);
    label.getStyleClass().add("panel-title");
    setHeading(label);
}
public final void setHeading(Node content) {
    this.headingProperty().set(content);
}

/* Label missing style */
public void setText(String text) {
    headingProperty().set(new Label(text));
}

Build failed, any idea on how to fix?

$ gradle build
:assemble UP-TO-DATE
:check UP-TO-DATE
:build UP-TO-DATE
:bootstrapfx-core:compassCompileuri:classloader:/META-INF/jruby.home/lib/ruby/stdlib/rubygems/core_ext/kernel_require.rb:1:in `require':
It seems your ruby installation is missing psych (for YAML output).
To eliminate this warning, please install libyaml and reinstall your ruby.
LoadError: load error: psych -- java.lang.RuntimeException: BUG: we can not copy embedded jar to temp directory
require at org/jruby/RubyKernel.java:937
require at uri:classloader:/META-INF/jruby.home/lib/ruby/stdlib/rubygems/core_ext/kernel_require.rb:54
at uri:classloader:/META-INF/jruby.home/lib/ruby/stdlib/psych_jars.rb:2
require at org/jruby/RubyKernel.java:937
(root) at uri:classloader:/META-INF/jruby.home/lib/ruby/stdlib/rubygems/core_ext/kernel_require.rb:1
at uri:classloader:/META-INF/jruby.home/lib/ruby/stdlib/rubygems/core_ext/kernel_require.rb:54
require at org/jruby/RubyKernel.java:937
(root) at uri:classloader:/META-INF/jruby.home/lib/ruby/stdlib/psych.rb:3
at uri:classloader:/META-INF/jruby.home/lib/ruby/stdlib/rubygems/core_ext/kernel_require.rb:1
require at org/jruby/RubyKernel.java:937
require at uri:classloader:/META-INF/jruby.home/lib/ruby/stdlib/rubygems/core_ext/kernel_require.rb:54
(root) at uri:classloader:/META-INF/jruby.home/lib/ruby/stdlib/yaml.rb:5
(root) at uri:classloader:/META-INF/jruby.home/lib/ruby/stdlib/rubygems/core_ext/kernel_require.rb:1
require at uri:classloader:/META-INF/jruby.home/lib/ruby/stdlib/rubygems/core_ext/kernel_require.rb:54
load_yaml at uri:classloader:/META-INF/jruby.home/lib/ruby/stdlib/rubygems.rb:624
load_file at uri:classloader:/META-INF/jruby.home/lib/ruby/stdlib/rubygems/config_file.rb:328
at uri:classloader:/META-INF/jruby.home/lib/ruby/stdlib/rubygems/config_file.rb:197
load at org/jruby/RubyKernel.java:955
at uri:classloader:/META-INF/jruby.home/bin/gem:4
FAILED

FAILURE: Build failed with an exception.

Also if possible can you release the compiled css file?

There is an official documentation?

Although I know the basics of bootstrap for web development, is hard to know how to properly add classes to a jfx element. It would be a lot easier if there was a documentation page.

The font display in the button is incorrect

I created a button and set the style, but the font not in the center

btn.getStyleClass().setAll("btn", "btn-sx", "btn-primary");

图片

jdk version 11
implementation('org.kordamp.bootstrapfx:bootstrapfx-core:0.4.0')

size classes don't work on Label

First, Thank you for the fantastic implementation!
I just started using it and I saw the label's supported classes don't work. Here's the code:

Label lbl = new Label("some text");
lbl.getStyleClass().setAll("lbl", "h1", "lbl-primary");

but works on the Text class.
Thanks again

Incorrect CSS syntax/values in bootstrapfx.css?

Trying to solve this problem (#14 (comment)) I resorted to plan B: extract the bootstrapfx.css from BootstrapFX's JAR file, copy it in the resources/ folder and use it. This plan B (though is not the correct way) worked as a charm... anyway, in the process I spent some time analyzing the CSS file and I think that I found some strange errors: (I'm not a CSS expert, so I'm not sure if those are really errors, could you please double check my asssumptions?):

image

For example, in line 168 there is a call to the darken() function:

a.bg-warning:focused {
    --fxbackground-color: darken($color, 10%); }

but reading the JavaFX CSS specification:
https://docs.oracle.com/javafx/2/api/javafx/scene/doc-files/cssref.html
I can't find any darken function (the only reference to darken is as a possible value of -fx-blend-mode)

In line 214 we have this:

.btn:pressed, .btn.pressed {
    -fx-effect: innershadow(gaussian, rgba(0, 0, 0, 0.125), 5px, 0, 0, 3px); }

image

But according to the specification:
https://docs.oracle.com/javafx/2/api/javafx/scene/doc-files/cssref.html#:~:text=The%20shadow%20Color.-,%3Cnumber%3E%20the%20radius%20of%20the%20shadow%20blur%20kernel.%20in%20the%20range%20%5B0.0%20...%20127.0%5D%2C%20typical%20value%2010.,-%3Cnumber%3E%0A%20%20%20%20%20%20The%20choke
the radius should be a number in the range [0.0 ... 127.0] (without the px unit name)

Finally IntelliJ's editor is also barking at this:
image

Again, according to the specification, could it be because the selector name should be selected insted of checked?
https://docs.oracle.com/javafx/2/api/javafx/scene/doc-files/cssref.html#checkmenuitem

Thank you for reading till the end! :)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.