Page 1 of 1

Sample Tarazedi UI in Java

Posted: 2017.10.05 13:39:20 EDT
by Victor
CSS File:

Code: Select all

@font-face {
    font-family: 'Tarazedi';
    src: url('https://www.tarazedi.com/victorsheckels/Tarazedi.woff');
}

@font-face {
    font-family: 'Teko';
    src: url('https://fonts.gstatic.com/s/teko/v6/ROKgN8nYdPV9gtIro5zTug.ttf');
}

.root{
    -fx-background-color: #000000;
    -fx-font-size: 16px;
    -fx-font-family: Tarazedi;
    -fx-font-weight: bold;
    -fx-effect: dropshadow( gaussian, #000000, 0,0,0,1 );  
}

.label{
    -fx-font-size: 16px;
    -fx-font-weight: bold;
    -fx-font-family: Tarazedi;
    -fx-text-fill: #FF9900;
}

#h1bar {
    -fx-text-fill: #000000;
    -fx-background-color: linear-gradient(to right,
        rgba(255, 153, 0, 1) 0%,
        rgba(255, 153, 0, 1) 8%,
        rgba(255, 153, 0, 0.67) 16%,
        rgba(255, 153, 0, 0.67) 32%,
        rgba(255, 153, 0, 0.33) 64%,
        rgba(255, 153, 0, 0.33) 100% );
    -fx-padding: 4px;
    -fx-background-radius: 16px;
    -fx-border-radius: 16px;
    -fx-min-width: 390px;
    -fx-border-color: #000000;
    -fx-border-style: solid;
    -fx-border-width: 1px;
}

#h1bar:hover{
  -fx-text-fill: #FFFFFF;
  -fx-border-color: #FF9900;
  -fx-border-style: solid;
  -fx-border-width: 1px;
}

#userlabel, #pwlabel {
    -fx-text-fill: #00FF00;
    -fx-effect: dropshadow( gaussian, #000000, 1, 0, 1, 1 );
    -fx-background-color: linear-gradient(to right,
        rgba(0, 153, 0, 1) 0%,
        rgba(0, 153, 0, 0.33) 100% );
    -fx-padding: 4px;
    -fx-background-radius: 16px;
    -fx-min-width: 180px;
}


#userbox, #pwbox {
    -fx-text-fill: #FFFFFF;
    -fx-effect: dropshadow( gaussian, #000000, 1, 0, 1, 1 );
    -fx-background-color: rgba( 0, 153, 0, 0.3);
    -fx-padding: 4px;
    -fx-border-radius: 16px;
    -fx-background-radius: 16px;
    -fx-min-width: 180px;
    -fx-font-family: Teko;
    -fx-font-size: 16px;
    -fx-border-color: #009900;
    -fx-border-style: solid;
    -fx-border-width: 1px;
}

#userbox:hover,
#pwbox:hover,
#loginbutton:hover {
  -fx-text-fill: #FFFFFF;
  -fx-border-color: #FFFFFF;
  -fx-border-style: solid;
  -fx-border-width: 1px;
  -fx-background-color : rgba( 0, 100, 0, 0.3);
}

#userbox:focus,
#pwbox:focus,
#loginbutton:focus {
  -fx-text-fill: #FFFFFF;
  -fx-border-color: #FF9900;
  -fx-border-style: solid;
  -fx-border-width: 1px;
  -fx-background-color : rgba( 0, 100, 0, 0.5);
}

#loginbutton {
    -fx-text-fill: #009900;
    -fx-effect: dropshadow( gaussian, #000000, 1, 0, 1, 1 );
    -fx-background-color: rgba( 0, 153, 0, 0.3);
    -fx-padding: 0px;
    -fx-border-radius: 16px;
    -fx-background-radius: 16px;
    -fx-min-width: 390px;
    -fx-font-family: Teko;
    -fx-font-size: 16px;
    -fx-border-color: #009900;
    -fx-border-style: solid;
    -fx-border-width: 1px;
}
Java:

Code: Select all

/** Developer: Victor Sheckels
  * Date:      2017.10.04
  * Program Description:
  *   This program is to explore JavaFX functions.
  */

package victorsheckelsfx;

import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.PasswordField;
import javafx.scene.control.TextField;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.HBox;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;
import javafx.scene.text.Font;
import javafx.scene.text.FontWeight;
import javafx.scene.shape.*;
import javafx.scene.text.Text;
import javafx.stage.Stage;

public class VictorSheckelsFX extends Application {
    
    @Override
    public void start(Stage primaryStage) {
        primaryStage.setTitle("Welcome to tarazedi.com!");                      // Define window and title bar.
        GridPane grid = new GridPane();                                         // Create a GridPane
        
        grid.setHgap(16);                                                       // Set 16px gridlines.
        grid.setVgap(16);
        grid.setPadding(new Insets(4, 4, 4, 4));                            // TRBL padding.
        
        Label scenetitle = new Label("\uf0a3     ");
        scenetitle.setId("h1bar");
        grid.add(scenetitle, 0, 0, 2, 1);

        Label userName = new Label("\uf007  User Name:");
        userName.setId("userlabel");
        grid.add(userName, 0, 1);

        TextField userTextField = new TextField();
        userTextField.setId("userbox");
        grid.add(userTextField, 1, 1);

        Label pw = new Label("\uf023  Password:");
        pw.setId("pwlabel");
        grid.add(pw, 0, 2);

        PasswordField pwBox = new PasswordField();
        pwBox.setId("pwbox");
        grid.add(pwBox, 1, 2);
        
        Button btn = new Button("Sign in");
        HBox hbBtn = new HBox(20);
        hbBtn.getChildren().add(btn);
        btn.setId("loginbutton");
        grid.add(hbBtn, 0, 3, 2, 1);

        final Text actiontarget = new Text();
        grid.add(actiontarget, 0, 4, 2, 1);
        
        btn.setOnAction((ActionEvent e) -> {
            actiontarget.setFill(Color.RED);
            actiontarget.setText("     \uf205  Sign in button pressed");
        });
        
        Scene scene = new Scene(grid, 400, 400);                                // Grid is the root node.
        primaryStage.setScene(scene);                                           // Display it.
        scene.getStylesheets().add
 (VictorSheckelsFX.class.getResource("VictorStyle.css").toExternalForm());
        primaryStage.show();
    }        

    public static void main(String[] args) {
        launch(args);
    }
    
}