0%

第一个桌面应用程序

Application

Application是一个程序的入口,基本等价于Android的Application:

1
2
3
4
5
6
7
import javafx.application.Application

class MyApplication : Application() {
override fun start(primaryStage: Stage) {
//舞台的交互代码
}
}

Application的启动必须在Java类的main方法中调用:(在Kotlin的main方法中无法识别)

1
2
3
4
5
public class AppEntrance {
public static void main(String[] args) {
Application.launch(MyApplication.class, args);
}
}

Stage

Stage就等于是一个窗口,它有一切窗口的要素:标题栏、内容等。

1
2
3
4
5
6
7
8
9
10
11
12
13
primaryStage.apply {
title = "My Window Title"
//场景大小
scene = Scene(root, 300.0, 300.0)
//是否最大化,是否占满屏幕
isMaximized = true
//是否可由用户控制窗口缩放
isResizable = true
//是否全屏(如果是,会挡住windows的任务栏)
isFullScreen = false
//点击窗口关闭按钮的回调方法
onCloseRequest = EventHandler<WindowEvent> { onApplicationExit() }
}.show()

Layout和FXMLLoader

布局文件的格式为.fxml,类似于Android中的xml,fxml也是一种xml。同时,Android有LayoutInflater,JavaFx有FXMLLoader。

1
2
3
val loader = FXMLLoader(javaClass.getResource("ui/layout_main.fxml"))
//读取layout的根ViewGroup
val root = loader.load<Parent>()

Controller

控制器类,顾名思义,布局文件的控制代码就放在里边,JavaFx使用的是MVC模式。

Controller与Layout绑定

控制器类与布局文件的绑定方式如下:

1
2
3
4
5
<?xml version="1.0" encoding="UTF-8"?>
<BorderPane xmlns="http://javafx.com/javafx/8.0.121" xmlns:fx="http://javafx.com/fxml/1"
fx:controller="com.peceoqicka.ui.MainController">
<!-- 布局代码 -->
</BorderPane>

绑定之后可通过FXMLLoader得到:

1
val controller = loader.getController<MainController>()

获取View

在Controller中获取布局中的View的方式是,给相应的View绑定一个id:

1
<WebView fx:id="wvContent"/>

然后在Controller中使用与id相同的变量名定义一个public的变量即可:

1
2
3
4
5
import javafx.scene.web.WebView

class MainController {
lateinit var wvContent: WebView
}

事件绑定

在布局文件中相应控件上添加onAction字段,填写**#方法名**即可。

然后在Controller中定义一个public的方法:

1
2
3
fun onActionTips(actionEvent: ActionEvent) {
//actionEvent为有且仅有一个的参数
}

问题1:DataBinding在Kotlin中使用时编译无法通过

要在Kotlin中使用DataBinding需要在app/build.gradle中添加如下代码:

  • Kapt插件:

    1
    apply plugin: 'kotlin-kapt'
  • 打开databinding开关:

    1
    2
    3
    databinding {
    enabled = true
    }
  • kapt databinding compiler:

    1
    kapt 'com.android.databinding:compiler:3.0.0'

最终build.gradle的内容应该与下面相似:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
apply plugin: 'com.android.application'
apply plugin: 'kotlin-android'
...//省略其他插件
apply plugin: 'kotlin-kapt'

android {
...//省略其他配置信息
dataBinding {
enabled = true
}
}

dependencies {
//这里的版本号等同于项目的build.gradle文件中的android编译器的版本
//classpath 'com.android.tools.build:gradle:3.0.0'
kapt 'com.android.databinding:compiler:3.0.0'
...
}

问题2:没有生成XML文件对应的Binding类?

生成Binding类的名称默认为XML文件的名称去掉下划线并以驼峰命名法顺序排出所有单词。

例如:activity_main.xml生成的类名叫ActivityMainBinding

问题3:我需要一个变量在代码中产生了值的变化,同步变化到绑定的View上怎么做?

1
2
3
4
5
6
7
8
9
10
class PwdData : BaseObservable() {
...
var minPwdLengthError: String = ""
set(value) {
field = value;notifyPropertyChanged(BR.minPwdLengthError)
}
@Bindable
get
...
}

首先Data class需要继承BaseObservable;其次@Bindable注解需要且仅需要打在get方法上;然后关注变化的语句是notifyPropertyChanged,BR.minPwdLengthError是编译器生成的唯一ID,在给get方法打上注解之后,重新build之后自动生成。

问题4:我要自定义属性绑定怎么办?

AppBinding.kt(Kotlin文件,不是Kotlin类):

1
2
3
4
5
@BindingAdapter("bind:spinnerAdapter")
//android自带属性(如ImageView的src)的绑定请将上方的bind改为android即可
fun setSpinnerAdapter(spinner: Spinner, adapter: BaseAdapter) {
spinner.adapter = adapter
}

其中spinnerAdapter是一个自定义属性(res/values/attrs.xml):

1
2
3
4
5
6
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!--这里的自定义属性的格式任意皆可,我统一使用reference-->
<attr name="spinnerAdapter" format="reference" />
...
</resources>

在xml布局文件中调用如下:

1
2
3
4
5
<Spinner
android:id="@+id/spi_fra_pwd_generation_count"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:spinnerAdapter="@{pwdData.gcSpinnerAdapter}" />

问题5:我该把@BindingAdapter的自定义方法放在哪

很简单,新建一个Kotlin文件即可(不要类),直接在文件里边写“包级”方法。

问题6:自定义绑定方法要多个参数该怎么办?

So Easy!有多少写多少

1
2
3
4
5
6
7
@BindingAdapter("bind:imageUrl", "bind:placeholder")
fun loadImageUrl(imageView: ImageView, url: String, placeholder: Drawable) {
Glide.with(imageView.context).load(url)
.apply(RequestOptions().centerCrop().placeholder(placeholder))
.into(imageView)
println(placeholder)
}

注意,这里是将两个自定义属性绑到同一个方法上,第一个参数必须是写了这几个属性的View。后续几个自定义的参数类型必须一一对应,比如placeholder参数传入的是”@{@drawable/ic_xxx}”,那么方法这里的类型必须是Drawable。

另外,为了应对参数变化情况,你可以同时写好几种情况的方法:

1
2
3
4
5
6
7
8
//三个参数的方法
@BindingAdapter("bind:urlDomain", "bind:imageUrl", "bind:placeholder")
fun loadImageUrl(imageView: ImageView, urlDomain: String, url: String, placeholder: Drawable) {
Glide.with(imageView.context).load(urlDomain + url)
.apply(RequestOptions().centerCrop().placeholder(placeholder))
.into(imageView)
println(placeholder)
}

问题7:我要双向绑定怎么办?

何为双向绑定?

简而言之就是,我在View中修改了值的状态,希望同步变化到绑定的变量上

android自带的属性都几乎已经为你准备好了相应的双向绑定适配器,而一些其他属性或者你自己定义的属性,需要自己写适配器。

日志

  • 更换主题为Next(由于Melody主题未知BUG无法正确生成一些页面而不得不替换)
    并升级hexo5.x版本
    2021年9月27日17:03:21
  • 初次搭建完成时间
    2018年1月24日15:40:16
  • 更换主题为Melody
    2018年7月5日15:03:55

基本步骤记录

这是一篇笔记,记录如何通过Github PagesHexo搭建个人博客的过程。包含完整的配置记录。

参考教程:《2018,你该搭建自己的博客了!》

Hexo是什么

Hexo是一个快速, 简洁且高效的博客框架. 让上百个页面在几秒内瞬间完成渲染. Hexo支持Github Flavored Markdown的所有功能, 甚至可以整合Octopress的大多数插件. 并自己也拥有强大的插件系统.

之所以使用github和hexo来搭建,是因为这种方式几乎是最快捷以及适合新手搭建个人博客的方式。Github Pages省去了自己搭建服务器的烦恼;Hexo帮你完成你的博客的外观(有许多漂亮的主题可以选择)。你只需要简单的配置即可轻松搭建一个漂亮的个人博客。

基本准备

  • Github账号
  • Node.js
  • Git客户端
  • Github SSH密钥和本地仓库
  • Hexo

前4项不再过多赘述,参考搜索到的教程即可。

安装和使用Hexo

安装Hexo

  • 在本地磁盘任意地点新建文件夹(用于存储站点源文件,如D:/Work/Blog/Hexo)
  • 进入文件夹,右键点击空白处选择Git Bash Here
  • 在弹出的git bash窗口中输入以下命令安装Hexo:
    1
    2
    3
    4
    5
    6
    # 安装Hexo
    npm install hexo-cli -g
    # 初始化Hexo目录
    hexo init
    # 安装Git部署器
    npm install hexo-deployer-git --save
    安装完成后可以看到目录结构如下:

建立Github Pages项目

  • 打开自己的Github新建项目:
    (项目名称要求格式:xxxxx(github用户名).github.io)
  • 打开刚才建立的项目,点Clone or download,点击Use SSH,然后复制链接

将Hexo站点源码提交到Github Pages项目

  • 用文本编辑器打开hexo根目录下的配置文件_config.yml(yml是yaml格式的文件后缀)
  • 找到deploy:修改为如下内容并保存:
    1
    2
    3
    4
    5
    deploy:
    type: git
    repo: xxx #刚才复制的SSH链接
    branch: master
    #注意每个字段的冒号后边必须有一个空格,且缩进靠空格不靠tab
  • 在Git Bash窗口中(定位为博客源码根目录,如D:/Work/Blog/Hexo)输入命令:
    1
    2
    3
    4
    #生成静态文件
    hexo g
    #部署(提交)站点源码,可能会要求输入github账号密码
    hexo d
  • 在github查看项目源代码,如果部署成功,即可在浏览器地址栏输入链接http://[你的github用户名].github.io/访问你的博客了

本地编辑和预览博客

  • 写文章的方式是在博客根目录打开bash输入以下命令:(建议使用此方式)

    1
    hexo new "这里填写文章标题"

    生成的文章文件名为标题.md,文章使用markdown编写。建议这里输入的文章标题只有英文字符或数字,博客页面显示的文章标题在文件内通过标题字段单独设置
    生成的文件位置在博客根目录可以看到的source/_posts/目录下,用任意文本编辑器打开即可编辑。

  • 修改文章内容或者修改hexo配置之后,输入以下命令进行本地预览:

    1
    2
    3
    4
    5
    6
    #清除缓存和生成的静态文件(可选,如果遇到只读取缓存没有更新的情况可以使用)
    hexo clean
    #重新生成静态文件
    hexo g
    #启动本地服务器
    hexo s

    启动本地服务器后,在浏览器输入http://localhost:4000/访问本地博客预览效果

安装主题

  • 在Hexo官方网站的主题页面可以选择喜欢的主题进行安装,如图:
  • 点击图片可以打开预览页面,点击标题进入相应的Github项目页面。
  • 这里我选择了Material,在博客的themes目录下打开git bash,输入命令:
    1
    git clone xxx #(主题的github项目地址)
  • 克隆完成后可以将主题的文件夹名称改短,这里改为material,起一个简短的名称即可(这个名称用于在站点配置文件中切换主题)
  • 打开站点配置文件_config.yml,找到theme字段,修改它的value为上一步的主题文件夹名称,这里为material。
  • 按照之前所说的命令预览效果:

站点配置

  • 站点的基本配置参考Hexo配置,有些设置会以主题的配置为准(视具体的主题而定,一般第三方主题都有参考手册)

基本操作

粗体斜体删除线

列表

无序列表

  • C++
  • Java
  • Kotlin

有序列表

  1. Android
  2. IOS
  3. HTML5

代办列表

  • 签到
  • 打卡

数学公式

$$f(x)=\int_a^b{5x^6dx}$$

代码

1
2
3
4
5
package com.em.test;

public static void main(String[] args){
System.out.println("Sorry, I'm the spy send by Kotlin");
}

流程图*(不支持)*

1
2
3
4
5
6
7
st=>start: 开始
op=>operation: 某种操作
cond=>condition: 没有了吗?
e=>end: 结束
st->op->cond
cond(yes)->e
cond(no)->op

序列图*(不支持)*

1
2
3
Alice->Bob: Hello Bob, how are you?
Note right of Bob: Bob thinks
Bob-->Alice: I am fine,thank u and you?

表格

名称 单价 数量
索泰(ZOTAC) GTX1080-8GD5X ¥5099 1
海盗船(USCorsair)额定750W RM750x 电源 ¥999 1
金士顿(Kingston)骇客神条 Fury系列 DDR4 2400 8G ¥729 2
三星(SAMSUNG) 960 EVO 250G M.2 NVMe ¥819 1
西部数据(WD) 蓝盘 1TB 64MB7200转1T ¥299 1

图片链接

网络图片

图片地址

HTML标签

使用html标签和css实现下划线和颜色变化

脚注*(不支持)*

为文章添加一些脚注,例如:掘金[^Juejin]

[^Juejin]: 掘金是一个帮助开发者成长的社区,是给开发者用的 Hacker News,给设计师用的 Designer News,和给产品经理用的 Medium。