加载中…
个人资料
  • 博客等级:
  • 博客积分:
  • 博客访问:
  • 关注人气:
  • 获赠金笔:0支
  • 赠出金笔:0支
  • 荣誉徽章:
正文 字体大小:

JavaFX界面设计之修改界面皮肤

(2017-07-26 09:12:39)
标签:

javafx

java

界面设计

皮肤

分类: Java学习

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


  在JavaFX中,可以使用CSS样式表来进行皮肤的更换。不过JavaFX中的CSS是基于W3C CSS version 2.1,但又不完全相同。


  JavaFX中的换肤有几种方式。


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


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

  

[css] view plain copy
  1. .CustomButton{  
  2.     -fx-background-color#aaffff 
  3.     -fx-text-fill: #000000  
  4.  

  

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

 

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


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

  

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

  

[java] view plain copy
  1. public class Skintest extends Application  
[java] view plain copy
  1. public static void main(String[] args)  
  2.     launch(args);  
  3.  
  4.   
  5. @Override  
  6. public void start(Stage primaryStage)  
  7.     primaryStage.setTitle("Test Skin in  
  8.     final Button btn new Button("I am Button");  
[java] view plain copy
  1.     
  2.         StackPane root new StackPane();  
  3.         Scene scene new Scene(root, 800600);  
  4.         scene.getStylesheets().add("skin1.css");  
  5.         btn.getStyleClass().add("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应用这个样式。


  http://my.csdn.net/uploads/201207/15/1342281906_9595.jpg


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

  

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

   

[css] view plain copy
  1. .CustomButton2 
  2.     -fx-background-color#000000 
  3.     -fx-text-fill: #FFFFFF  
  4.  

 

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


[java] view plain copy
  1. btn.setOnAction(new EventHandler()  
  2.     @Override  
  3.     public void handle(ActionEvent event)  
  4.         btn.getStyleClass().add("CustomButton1");  
  5.      
  6. });     
  

 

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


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


  http://my.csdn.net/uploads/201207/15/1342282179_8884.jpg


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


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


  

  2.重写控件的样式


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

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


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


  http://my.csdn.net/uploads/201207/15/1342283027_3487.jpg


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


 3.更改整个程序的样式


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


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

  

[css] view plain copy
  1. .root{  
  2.     -fx-font-size16pt 
  3.     -fx-base: rgb(25514547);  
  4.     -fx-backgroundrgb(255255255);  
  5.  

 

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


  http://my.csdn.net/uploads/201207/15/1342283566_1758.jpg

  

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


  

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


0

阅读 收藏 喜欢 打印举报/Report
  

新浪BLOG意见反馈留言板 欢迎批评指正

新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 产品答疑

新浪公司 版权所有