Updated css + added layout: main.submenu, main.container

This commit is contained in:
xdrm-brackets 2017-11-15 18:12:46 +01:00
parent 223553e93b
commit 63ccd44664
14 changed files with 151 additions and 22 deletions

View File

@ -25,6 +25,11 @@ public class Context{
Context.type.put(index, Context.TYPE_STR);
}
public static void bind(String index, Color data){ /* Color */
Context.attr.put(index, data);
Context.type.put(index, Context.TYPE_COL);
}
public static void bind(String index, int r, int g, int b){ /* Color */
Context.attr.put(index, Color.rgb(r, g, b));
Context.type.put(index, Context.TYPE_COL);

View File

@ -1,9 +1,13 @@
package Classes.css.core;
import java.io.Serializable;
import javafx.scene.Node;
public interface Rule{
public abstract class Rule implements Serializable{
public void apply(Node target) throws Exception;
public abstract void apply(Node target) throws Exception;
public abstract String toString();
}

View File

@ -6,9 +6,12 @@ import Classes.css.core.rule.JavaFX;
import Classes.css.core.rule.Padding;
import Classes.css.core.rule.Position;
import javafx.scene.Node;
import javafx.scene.layout.AnchorPane;
public class Ruleset {
private final static boolean DEBUG = false;
/* Attributes */
private Node target;
private ArrayList<Rule> rule;
@ -89,9 +92,24 @@ public class Ruleset {
int il = this.rule.size();
/* (2) Apply each rule */
for( ; i < il ; i++ )
for( ; i < il ; i++ ){
if( Ruleset.DEBUG )
System.out.println("[SET] "+this.target.getId()+"."+this.rule.get(i));
this.rule.get(i).apply(this.target);
if( Ruleset.DEBUG ){
// if position
if( this.rule.get(i) instanceof Position )
System.out.println("[CHK] "+this.target.getId()+".position: "+AnchorPane.getTopAnchor(this.target)+" "+AnchorPane.getRightAnchor(this.target)+" "+AnchorPane.getBottomAnchor(this.target)+" "+AnchorPane.getLeftAnchor(this.target));
System.out.println("[CHK] "+this.target.getId()+"."+this.target.getStyle());
System.out.println();
}
}
/* (3) Stop the Chain design pattern */
return;

View File

@ -3,7 +3,7 @@ package Classes.css.core.rule;
import Classes.css.core.Rule;
import javafx.scene.Node;
public class JavaFX implements Rule{
public class JavaFX extends Rule{
/* Attributes */
private String l_side;
@ -23,7 +23,7 @@ public class JavaFX implements Rule{
public void apply(Node target){
/* (1) Prefix with '-fx-' */
String css_prop = "-fx-"+this.l_side+": "+this.r_side+";"; // "name: val;"
String css_prop = this.toString(); // "name: val;"
/* (2) Apply to target */
target.setStyle(css_prop);
@ -32,4 +32,10 @@ public class JavaFX implements Rule{
}
@Override
public String toString() {
return "-fx-"+this.l_side+": "+this.r_side+";";
}
}

View File

@ -7,7 +7,7 @@ import javafx.geometry.Insets;
import javafx.scene.Node;
import javafx.scene.layout.Region;
public class Padding implements Rule{
public class Padding extends Rule{
/* Attributes */
private Integer top;
@ -105,4 +105,11 @@ public class Padding implements Rule{
}
@Override
public String toString() {
return "padding: "+this.top+" "+this.right+" "+this.bottom+" "+this.left+";";
}
}

View File

@ -4,7 +4,7 @@ import Classes.css.core.Rule;
import javafx.scene.Node;
import javafx.scene.layout.AnchorPane;
public class Position implements Rule{
public class Position extends Rule{
/* Attributes */
private String direction;
@ -53,4 +53,10 @@ public class Position implements Rule{
}
@Override
public String toString() {
return this.direction+": "+this.offset+";";
}
}

View File

@ -13,10 +13,12 @@ public class ContextBuilder{
/* (2) Base layout dimension */
Context.bind("header-height", 50);
Context.bind("menu-width", 237);
Context.bind("submenu-width", 200);
/* (3) Colors */
Context.bind("main-color", 63, 81, 181);
Context.bind("menu-bg", 255, 255, 253);
Context.bind("submenu-bg", 255, 0, 0);
}

View File

@ -0,0 +1,34 @@
package Classes.css.user;
import Classes.css.core.Context;
import Classes.css.core.Ruleset;
import javafx.scene.Node;
public class HeaderIconStyleSheet{
/* Builds all necessary CSS/layout rules */
public HeaderIconStyleSheet(Node target) throws Exception{
/* (1) Darken main-color */
Context.bind("tmp", Context.getColor("main-color").darker() );
/* (2) Set rules */
Ruleset.load(target)
.add("top", 0)
.add("left", 0)
.add("min-width", Context.getInt("menu-width"))
.add("max-width", Context.getInt("menu-width"))
.add("min-height", Context.getInt("header-height"))
.add("max-height", Context.getInt("header-height"))
.add("pref-height", Context.getInt("header-height"))
.add("pref-width", Context.getInt("menu-width"))
.add("background-color", Context.getString("tmp"))
.apply();
}
}

View File

@ -4,10 +4,10 @@ import Classes.css.core.Context;
import Classes.css.core.Ruleset;
import javafx.scene.Node;
public class Header{
public class HeaderStyleSheet{
/* Builds all necessary CSS/layout rules */
public Header(Node target) throws Exception{
public HeaderStyleSheet(Node target) throws Exception{
/* (1) Set rules */
Ruleset.load(target)
@ -16,13 +16,14 @@ public class Header{
// .add("right", 0)
.add("min-height", Context.getInt("header-height"))
.add("pref-height", Context.getInt("header-height"))
.add("max-height", Context.getInt("header-height"))
.add("min-width", Context.getInt("screen-width"))
.add("pref-width", Context.getInt("screen-width"))
.add("max-width", Context.getInt("screen-width"))
.add("pref-height", Context.getInt("header-height"))
.add("pref-width", Context.getInt("screen-width"))
.add("background-color", Context.getString("main-color"))
.apply();

View File

@ -4,10 +4,10 @@ import Classes.css.core.Context;
import Classes.css.core.Ruleset;
import javafx.scene.Node;
public class MenuContainer{
public class MenuStyleSheet{
/* Builds all necessary CSS/layout rules */
public MenuContainer(Node target) throws Exception{
public MenuStyleSheet(Node target) throws Exception{
/* (1) Set rules */
Ruleset.load(target)
@ -20,8 +20,12 @@ public class MenuContainer{
.add("min-height", Context.getInt("screen-height") - Context.getInt("header-height"))
.add("max-height", Context.getInt("screen-height") - Context.getInt("header-height"))
.add("pref-width", Context.getInt("menu-width"))
.add("pref-height", Context.getInt("screen-height") - Context.getInt("header-height"))
.add("background-color", Context.getString("menu-bg"))
.apply();
}
}

View File

@ -0,0 +1,31 @@
package Classes.css.user;
import Classes.css.core.Context;
import Classes.css.core.Ruleset;
import javafx.scene.Node;
public class SubMenuStyleSheet{
/* Builds all necessary CSS/layout rules */
public SubMenuStyleSheet(Node target) throws Exception{
/* (1) Set rules */
Ruleset.load(target)
.add("top", Context.getInt("header-height"))
.add("left", Context.getInt("menu-width"))
.add("bottom", 0)
.add("min-width", Context.getInt("submenu-width"))
.add("max-width", Context.getInt("submenu-width"))
.add("min-height", Context.getInt("screen-height") - Context.getInt("header-height"))
.add("max-height", Context.getInt("screen-height") - Context.getInt("header-height"))
.add("pref-width", Context.getInt("submenu-width"))
.add("pref-height", Context.getInt("screen-height") - Context.getInt("header-height"))
.add("background-color", Context.getString("submenu-bg"))
.apply();
}
}

View File

@ -7,8 +7,10 @@ import org.json.JSONObject;
import Classes.ApiCall;
import Classes.css.user.ContextBuilder;
import Classes.css.user.Header;
import Classes.css.user.MenuContainer;
import Classes.css.user.HeaderStyleSheet;
import Classes.css.user.HeaderIconStyleSheet;
import Classes.css.user.MenuStyleSheet;
import Classes.css.user.SubMenuStyleSheet;
import Interfaces.Callback;
import Interfaces.Event;
import Interfaces.EventObserver;
@ -57,10 +59,16 @@ public class RootLayout extends Application implements EventObserver {
-------------------------------------*/
/* (1) #header */
new Header( this.root_scene.lookup("#header") );
new HeaderStyleSheet( this.root_scene.lookup("#header") );
/* (2) #menu_container */
new MenuContainer( this.root_scene.lookup("#menu_container") );
new MenuStyleSheet( this.root_scene.lookup("#menu") );
/* (3) #submenu */
new SubMenuStyleSheet( this.root_scene.lookup("#submenu") );
/* (4) #header_icon*/
new HeaderIconStyleSheet( this.root_scene.lookup("#header_icon") );
}

View File

@ -3,7 +3,8 @@
#header_icon{
-fx-min-width: -v-header-height;
-fx-min-width: 660;
-fx-pref-width: 660;
-fx-max-width: 660;
-fx-min-height: -v-header-height;

View File

@ -17,10 +17,10 @@
<FlowPane id="header_menu" fx:id="header_menu" alignment="CENTER_RIGHT" layoutX="791.0" layoutY="-80.0" maxHeight="40.0" maxWidth="1240.0" minHeight="40.0" minWidth="40.0" prefHeight="40.0" AnchorPane.bottomAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" />
</children>
</AnchorPane>
<AnchorPane id="menu" fx:id="menu" maxHeight="700.0" maxWidth="251.0" minHeight="680.0" minWidth="40.0" prefHeight="700.0" prefWidth="234.0" stylesheets="@../css/menu.css" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.topAnchor="0.0">
<AnchorPane id="menu_wrapper" fx:id="menu_wrapper" maxHeight="700.0" maxWidth="251.0" minHeight="680.0" minWidth="40.0" prefHeight="700.0" prefWidth="234.0" stylesheets="@../css/menu.css" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.topAnchor="0.0">
<children>
<Pane id="header_icon" fx:id="header_icon" maxHeight="40.0" minHeight="40.0" minWidth="40.0" prefHeight="40.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" />
<VBox id="menu_container" fx:id="menu_container" layoutX="50.0" layoutY="40.0" prefHeight="600.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="50.0">
<VBox id="menu" fx:id="menu" layoutX="50.0" layoutY="40.0" prefHeight="600.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="50.0">
<children>
<FlowPane alignment="CENTER_LEFT" prefHeight="114.0" prefWidth="234.0" style="-fx-border-width: 0 0 1 0; -fx-border-color: #fafafa;">
<children>
@ -51,5 +51,7 @@
</VBox>
</children>
</AnchorPane>
<VBox id="submenu" fx:id="submenu" layoutX="234.0" layoutY="50.0" prefHeight="650.0" prefWidth="194.0" style="-fx-background-color: white;" AnchorPane.bottomAnchor="0.0" AnchorPane.topAnchor="50.0" />
<FlowPane id="container" fx:id="container" layoutX="421.0" layoutY="50.0" prefHeight="650.0" prefWidth="851.0" AnchorPane.bottomAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="50.0" />
</children>
</AnchorPane>