1. 程式人生 > 實用技巧 >封裝TornadoFx常用控制元件庫

封裝TornadoFx常用控制元件庫

github:https://github.com/Stars-One/common-controls

為TornadoFx的封裝的常用控制元件與工具,基於Jfoenix,借鑑Kfoenix

前言

這個開源庫原本我也不想開源出來的,畢竟花費了自己很久的時間,但是想到TornadoFx國內實在沒有多少人用,便是想開源出來了,國內TornadoFx資料較少,有些元件並沒有,只能靠自己來造。

在這個前端為主的時代,可能只有我這種人還在獨自堅持研究這種小眾的技術吧(至少國內是這樣的情況)

希望你在使用之前可以根據自己的實際情況給予打賞,算是對我的鼓勵,你的打賞是我後期維護並積極更新的動力!謝謝

TornadoFX交流群:1071184701

TornadoFx中文文件 目前還在翻譯中

本庫包含了之前的IconTextDialogBuilder

  • IconText: 5000+個Material Design字型圖示庫

  • DialogBuilder 基於Jfoenix的對話方塊生成器

引入依賴

Maven引入

1. 新增倉庫

由於jar包是上傳在jitpack倉庫中,所以得在專案的pom.xml新增倉庫

<repositories>
	<repository>
		<id>jitpack.io</id>
		<url>https://jitpack.io</url>
	</repository>
</repositories>

2.新增依賴

<dependency>
	<groupId>com.github.Stars-One</groupId>
	<artifactId>common-controls</artifactId>
	<version>1.3</version>
</dependency>

Gradle引入

allprojects {
	repositories {
		...
		maven { url 'https://jitpack.io' }
	}
}
dependencies {
	implementation 'com.github.Stars-One:common-controls:1.3'
}

介紹

控制元件主要分為以下幾個大類:

  • 對話方塊
  • 檢測更新
  • 常用方法
  • 常用控制元件
  • 下載框架(可能考慮獨立出來?)

1.常用對話方塊

對話方塊提供了整合了之前的DiglogBuilder,並新增加了載入對話方塊和自定義對話方塊內容,參考了Kf專案,我把有些對話方塊整合成了Kotlin中的DSL方式呼叫,有些對話方塊就沒有

普通對話方塊

jfxbutton("測試訊息") {
	action {
		jfxdialog(currentStage, "標題", "內容")
	}
}

確認對話方塊

jfxbutton("測試確認對話方塊") {
	action {
		DialogBuilder(currentStage)
				.setTitle(title)
				.setMessage("hello")
				.setNegativeBtn("取消"){ println("點選了取消按鈕")}
				.setPositiveBtn("確定") { println("點選了確定按鈕")}
				.create()
	}
}

PS:提供了改變顏色,在對應的setBtn方法新增顏色即可,顏色支援十六進位制和文字,如

jfxbutton("測試確認對話方塊") {
	action {
		DialogBuilder(currentStage)
				.setTitle(title)
				.setMessage("hello")
				.setNegativeBtn("取消","red"){ println("點選了取消按鈕")}
				.setPositiveBtn("確定","#fafafa") { println("點選了確定按鈕")}
				.create()
	}
}

輸入對話方塊

彈出對話方塊,讓使用者輸入內容

jfxbutton("測試輸入對話方塊") {
	action {
		//text即為使用者輸入的內容
		jfxdialog(currentStage, "帶輸入框的對話方塊", "輸入整數內容", { text -> println(text) })
	}
}

輸出對話方塊

此對話方塊用來提示對應的網址或者是檔案的位置,使用者點選之後可以跳轉瀏覽器或者是開啟資源管理器並定位到檔案

jfxbutton("測試輸出對話方塊") {
	action {
		//檔案
		jfxdialog(currentStage, "帶連結的輸入框", "輸出目錄為","D:\\text.txt"
				,false)
		//網址
		jfxdialog(currentStage, "帶連結的輸入框", "輸出目錄為","stars-one.site"
				,true)
	}
}

下載對話方塊

jfxbutton("下載"){
	action{
		DownloadDialogView(currentStage,"下載地址","D:\\test.txt")
			.show()
	}
}

PS:第三個引數路徑可不填,則自動擷取下載地址的末尾的作為檔名,並下載到與jar的同目錄檔案中

載入對話方塊

jfxbutton("測試載入對話方塊") {
	action {
		loadingDialog(currentStage,"標題","內容"){alert ->
			runAsync {
				//這裡做網路請求或者其他耗時的操作
				for (i in 0..3) {
					Thread.sleep(200)
					println(i)
				}
			} ui{
				//呼叫close或者hideWithAnimation關閉對話方塊
				alert.hideWithAnimation()
			}

		}

	}
}

關閉程式對話方塊

jfxbutton("關閉程式對話方塊") {
	action {
		stopDialog(currentStage,"標題","點選確定結束當前程式")
	}
}

檢測更新對話方塊

這裡單獨抽出來講解使用,詳見第2部分

自定義對話方塊

若是你不滿足已有的對話方塊,你可以按照你的喜歡,自定義對話方塊的內容

//這裡你可以自定義佈局
val content = HBox(Text("自定義內容"))
val alert = DialogBuilder(currentStage)
                .setCustomContext(content)
                .setNegativeBtn("確定")
                .create()

2.檢測更新功能

基於上面的對話方塊,實現了自動檢測更新的框架

我這裡是使用了部落格園和藍奏雲作為更新的平臺,部落格園用來發布新版本的資訊,藍奏雲則用來上傳更新檔案

使用之前,你需要在部落格園釋出一篇隨筆,並以下面的表格形式,這裡給出對應的md格式

|版本名|版本號	|更新時間	|更新內容	|更新地址|
|--	|--	|--	|--	|--	|
|v1.1	|2	|2020-7-10	|1.更新xx\n2.更新xx	|	|
|v1.0	|1	|2020-7-10	|1.更新xx\n2.更新xx	|	|

更新內容一欄中,通過\n來實現換行

更新地址,你可以使用藍奏雲的地址或者是其他的地址,如果使用藍奏雲的話,一定要是整個資料夾的地址

更新版本時,你需要將部落格園上隨筆的內容進行更新,並在新版本的資訊放在表格第一行,並保證版本號比之前的要高,否則框架無法檢測到新版本的升級(使用藍奏雲的話,則在之前的資料夾上傳檔案即可,框架會自動下載第一個的檔案,即為最新版本的檔案)

jfxbutton("檢測更新") {
	action {
		//最重要的是版本號,記得是int型別的,版本名無關緊要,只是讓之後的升級提示對話方塊顯示可以好看點
		TornadoFxUtil.checkVersion(currentStage, "https://www.cnblogs.com/stars-one/p/13284015.html", "當前版本號", "當前版本名")
	}
}

3.常用方法

位於TornadoFxUtils.kt檔案中

  • 下載檔案downloadFile
  • 下載圖片downloadImage
  • 複製文字到貼上板copyTextToClipboard
  • 自動補全網址completeUrl
  • 檢測版本更新checkVersion

4.常用控制元件

以下的控制元件其實本質上都是一個方法,使用了TornadoFx內建的DSL語法進行書寫,使用的時候和TornadoFx編寫佈局的程式碼是一樣的

控制元件 控制元件名稱 例子
urlLink 可選擇的超連結文字 urlLink("部落格地址","stars-one.site")
imageview 生成指定寬高的圖片,正方形的圖片可省略高度引數 imageview("xx.jpg",50,50)
iconItem 生成帶圖示的右鍵選單(ContextMenu),每個控制元件都有setContextMenu方法
selectText 可選擇的文字框 selectText("內容")
jfxbutton 指定寬高的扁平按鈕,正方形可省略高度引數 jfxbutton("xx.jpg",50,50)
circlejfxbutton 圓形圖示扁平按鈕(滑鼠滑過會有陰影),傳遞一個node引數 circlejfxbutton(imageview("xx.jpg",50))
filetextfield 檔案輸入+選擇 selectText("內容")
showToast 顯示Toast

5.下載框架

對應的HttpDownloader類

構造方法需要傳入一個下載地址和儲存檔案路徑,之後呼叫startDownload方法即可下載

HttpDownloader(downloadUrl, file).startDownload(object : HttpDownloader.OnDownloading {
	override fun onProgress(progress: Double, percent: Int, speed: String) {
		//回撥的幾個引數,progress是進度,percent是百分比,speed是下載速度
		//你可以使用在下載之前將相關得到控制元件繫結一個觀察者,之後將這裡的相關引數設定即可
		
	}

	override fun onFinish() {
		
	}

	override fun onError(e: IOException) {
		
	}
})