作为RIA技术之一,为了让应用程序的界面看起来更加的漂亮或者更有个性,皮肤功能自然是必不可少的。


W3C CSS version 2.1,但又不完全相同。


  JavaFX中的换肤有几种方式。


 1.完全重新定义的控件样式


 我们首先创建一个CSS文件,命名为skin1.css,在里面定义一个Button的样式。

  

1. .CustomButton{  
2. background-color: #aaffff;  
3. #000000
4. }

  

   如上所示,只是简单的改变背景色和文本颜色。

  当然大家很容易看出来,与标准的CSS相差不大。


  那么,我们就在程序中使用一下看看效果。

  

  新建一个JavaFX Project,写下如下代码。

  

1. public class Skintest extends

1. public static void
2.     launch(args);  
3. }  
4.   
5. @Override
6. public void
7. "Test Skin in JavaFX");  
8. final Button btn = new Button("I am a Button");

1.     
2. new
3. new Scene(root, 800, 600);  
4. "skin1.css");  
5. "CustomButton");  
6.         root.getChildren().add(btn);  
7.         primaryStage.setScene(scene);  
8.         primaryStage.show();  
9.     }  
10. }


   在程序只创建了一个Button。


  首先通过Scene.getStylesheets().add(String str)方法进行添加样式。


  然后使用button.getStyleClass().add(String str)方法让Button应用这个样式。


  

javafx pane 颜色 javafx设置背景颜色_javafx pane 颜色


  右上图可以看到,这个Button已经与默认的按钮完全不一样了。

  

  下面我们在skin1.css中,新添加一个Button的样式,暂命名为CustomButton2。

   

1. .CustomButton2{  
2. background-color: #000000;  
3. #FFFFFF
4. }



  然后添加Button的事件,让Button在点击后,应用这个样式。


1. btn.setOnAction(new
2. @Override
3. public void
4. "CustomButton1");  
5.     }  
6. });

  

  记住如果在事件中使用控件,定义的时候必须定义为final类型。


  那么,我们运行之后,点击Button看看。


  

javafx pane 颜色 javafx设置背景颜色_控件_02


  如图所示,点击之后,Button应用了新的样式,变成了黑底白字了。


  怎么样?虽然只是简单的改变了背景色和文字色,但其实看起来效果还是不错的。


  

2.重写控件的样式


 有的人会觉得,每个控件都设置一次样式很麻烦,为何不能直接设置所有Button的样式呢?当然,JavaFX也提供这

个功能,我们只需要把上面的skin1.css中的.CustomButton改为.button,就会覆盖Button控件的样式。


  那么我们更改为.button后,再添加一个Button看看运行的效果。


  

javafx pane 颜色 javafx设置背景颜色_javafx pane 颜色_03


  你会发现,没有单独设置Button的样式,但是将skin1.css添加进Scene的StyleSheets中后,所有的Button样式都改变了。


3.更改整个程序的样式


  同样的,既然可以更改所有button的样式,我们也可以进行少许修改,就能更改整个应用软件的风格了。


  我们只需要添加.root的样式即可。

  


1. .root{  
2. font-size: 16pt;  
3. rgb(255, 145, 47);  
4. background: rgb(255, 255, 255);  
5. }




  然后往代码中添加几个其他的控件,运行看看。


  

javafx pane 颜色 javafx设置背景颜色_javafx pane 颜色_04

  

  大家可以看到,整体的风格都改变了。这也是更换主题的很方便的方法。


  

  另外, CSS中有class styles 和id styles,同样的JavaFX中也有。对于控件而言只需要setId()即可应用id styles。


  OK,时间已经很晚了,JavaFX的换肤功能就讲到这里了。该睡觉去了。