JavaFX学习笔记(五)

技术帖,Java FX 2016-09-26

本教程描述如何使用层叠样式表(CSS)来使JavaFX应用程序看起来更具魅力。你将会开发一个界面,创建一个.css文件,然后应用样式。

在本教程中,你将会对一个Login表单进行操作,它使用默认样式的标签、按钮和背景色,然后通过一些简单的CSS修改将其变成一个样式化的应用程序,如图5-1所示。

图5-1 带有CSS和不带CSS的Login表单

屏幕快照 2016-09-26 13.24.42.png

创建工程

如果你是跟随《JavaFX学习笔记》教程从头开始学习的,那么现在你应该已经创建了本教程所需的Login工程。

创建CSS文件

你的第一个任务是创建一个新的CSS文件,并且将其保存到你的主类所在的文件夹中。然后你需要让JavaFX应用程序感知到新加入的这个CSS。

  1. 在IDE的Projects窗体中,展开Login工程节点下的Source Packages文件夹节点。

  2. 右键单击Source Packages文件夹下的login文件夹然后选择”New”菜单,然后选择”Other”菜单。

  3. 在New File对话框中,选择”Other”,然后选择”Cascading Style Sheet”,然后点击”Next”。

  4. 在File Name文本框中输入Login,并且确保Folder文本框中的值为src\login。

  5. 点击”Finish”。

  6. 在java文件中,初始化Scene类的style sheets变量来指向CSS,使用例5-1中所示的加粗代码行。

例5-1 初始化stylesheets变量

    Scene scene = new Scene(grid, 300, 275);
    primaryStage.setScene(scene);
    scene.getStylesheets().add(Login.class.getResource(“Login.css”).toExternalForm());
    primaryStage.show();

这行代码将会在NetBeans的工程中的src\login文件夹下查找样式表。

增加背景图

背景图使得你的表单变得更有吸引力。在本教程中,你会添加一个带有仿亚麻质地的灰色背景。

首先下载背景图(background.jpg),并且将其保存到Login工程的src\login文件夹下。

然后将background-image属性相关的代码添加到CSS文件中。记住对应的路径是与样式表的相对路径。因此,在例5-2所示的代码中,background.jpg放在与Login.css相同的文件夹下。

例5-2 背景图片

    .root {
    -fx-background-image: url(“background.jpg”);
    }

背景图被应用到了.root样式上,它表示会将样式应用到Scene实例的root节点上。该样式定义由属性名(-fx-background-image)和属性值(url(“background.jpg”))组成。

图5-2展示了带有新的灰色背景的登录表单。

屏幕快照 2016-09-26 13.28.06.png

为LABEL添加样式

下面演示如何改进标签控件的外观。你可以使用.label样式类,它表示对应的样式会影响表单中所有的label控件。对应的代码如例5-3所示。

例5-3 Label的字体大小、填充、字重和视觉效果

    .label {
   -fx-font-size: 12px;
   -fx-font-weight: bold;
   -fx-text-fill: #333333;
   -fx-effect: dropshadow( gaussian , rgba(255,255,255,0.5) , 0,0,0,1 );
    }

本例中增加了字体的大小和字重,并且应用了一个灰色(#333333)的阴影。阴影的目的是增加深灰色字体与浅灰色背景之间的对比度。参考《JavaFX CSS参考指南(JavaFX CSS Reference Guid)》(http://docs.oracle.com/javase/8/javafx/api/javafx/scene/doc-files/cssref.html#typeeffect)中的章节来了解关于dropshadow属性的细节。

改进后的User Name和Password标签如图5-3所示。

图5-3 更大更粗且带有阴影的Label

屏幕快照 2016-09-26 13.30.41.png

为TEXT增加样式
下面为表单中的两个Text对象创建一些特别的视觉效果:scenetitle中包括文本”Welcome”,actiontarget表示当用户按下”Sign in”按钮时返回的文本内容。你可以通过不同的方式来为Text对象应用不同的样式。

  1. 将java文件中这两句代码删除,去除文本对象当前设置的内联样式:
      scenetitle.setFont(Font.font(“Tahoma”, FontWeight.NORMAL, 20));
      actiontarget.setFill(Color.FIREBRICK);

通过使用CSS来替代内联样式,你可以将外观设计与内容分离开来。这种方式使得设计师更容易地控制样式,同时却无需修改内容。

  1. 使用setID()方法为每个文本节点创建一个ID,增加下面的加粗代码,如例5-4所示:
    例5-4 为Text节点创建ID
    ...

Text scenetitle = new Text(“Welcome”);
scenetitle.setId(“welcome-text”);

    ...

grid.add(actiontarget, 1, 6);
actiontarget.setId(“actiontarget”);

    ..

在css文件中,为welcome-text和actiontarget ID增加样式属性。样式名的格式为在ID之前增加#前缀,如例5-5所示。
例5-5 文本效果

    #welcome-text {
   -fx-font-size: 32px;
   -fx-font-family: “Arial Black”;
   -fx-fill: #818181;
   -fx-effect: innershadow( three-pass-box , rgba(0,0,0,0.7) , 6, 0.0 , 0 , 2 );
}

#actiontarget {
   -fx-fill: FIREBRICK;
   -fx-font-weight: bold;
   -fx-effect: dropshadow( gaussian , rgba(255,255,255,0.5) , 0,0,0,1 );
}

文本”Welcome” 的字体大小增加到32点,并且字体变成了Arial Black。文本的填充颜色被设置为深灰色(#818181)并且应用了一个内阴影效果,创建了一个浮雕效果。你可以通过将文本的填充颜色设置为比背景色深一些的颜色来产生内阴影效果。参考《JavaFX CSS参考指南(JavaFX CSS Reference Guide)》中的章节来了解内阴影(Inner Shadow)属性的细节。

为actiontarget所设置的样式定义与前面所述的内容很相似。

图5-4展示了两个Text对象上的字体改变和阴影效果。

图5-4 带有阴影视觉效果的Text

屏幕快照 2016-09-26 13.33.54.png

    .button {
   -fx-text-fill: white;
   -fx-font-family: “Arial Narrow”;
   -fx-font-weight: bold;
   -fx-background-color: linear-gradient(#61a2b1, #2A5058);
   -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 5, 0.0 , 0 , 1 );
}

现在,创建一个稍有不同的外观,它用在当用户将鼠标悬停在按钮上时。你可以使用hover伪类(pseudo-class)来实现。一个伪类由类选择器、冒号以及伪类名称构成,如例5-7所示。

例5-7 按钮的悬停样式

    .button:hover {
   -fx-background-color: linear-gradient(#2A5058, #61a2b1);
}

图5-5展示了按钮的初始和悬停状态,他们使用了新的蓝灰色背景和白色粗体文本。
图5-5 按钮的初始和悬停状态

屏幕快照 2016-09-26 13.35.26.png


本文由 BF 创作,采用 知识共享署名 3.0,可自由转载、引用,但需署名作者且注明文章出处。

还不快抢沙发

添加新评论

bst g22 jinniu lilai opebet orange88 vinbet xbet yuebo zunlong shijiebei bet007 hg0088 ju111 letiantang m88 mayaba qg777 qianyiguoji sbf777 tengbohui tlc ule weilianxier waiweitouzhu xingfayule xinhaotiandi yinheyule youfayule zhongying 2018shijiebei w88 18luck 188bet beplay manbet 12bet 95zz shenbo weide1946 ca88 88bifa aomenxinpujing betway bodog bt365 bwin tongbao vwin weinisiren 88jt fenghuangyule hongyunguoji 918botiantang huanyayule jianada28 jixiangfang libo long8 hongzuyishi zuqiutouzhu