全新界面編輯器上線,JSBox 讓編程變得更容易

簡單說,JSBox 是一個為效率工具愛好者設計的 iOS 應用,你可以用它編寫、運行標準的 JavaScript 腳本。更酷的是你可以通過 JavaScript 來實現各種原生的 iOS 插件才能實現的功能,你甚至可以定製自己的 widget 和鍵盤。我們提供豐富的接口,讓你無需對 iOS 有所瞭解就能製作出自己的應用。

在過去的幾個月時間裡,我們不斷地完善 JSBox 的功能,在這次大版本里面我們為大家帶來了全新的界面編輯器(已經可以在 App Store 下載更新),所以是時候為大家做一個介紹了。

圖形用戶界面

人機交互必須要有接口,而用戶界面是最為直觀的接口。以捷徑為例,雖然不支持真正意義上的圖形界面,但也支持簡單的、以一問一答對話為基礎的交互方式。例如菜單選項:

全新界面編輯器上線,JSBox 讓編程變得更容易

捷徑 - 菜單

或是彈出的簡單是非題:

全新界面編輯器上線,JSBox 讓編程變得更容易

捷徑 - 選項

也支持簡單的文字輸入方式:

全新界面編輯器上線,JSBox 讓編程變得更容易

捷徑 - 文字輸入

這些都在一定程度上為捷徑提供了用戶的輸入與輸出,是人機交互的基礎之一,但這是不夠的。JSBox 從一開始就設計了完備的用戶圖形界面接口,可以通過簡單的腳本創建完善而美觀的界面,例如這樣:

全新界面編輯器上線,JSBox 讓編程變得更容易

你可以在 JSBox 裡面創建類似「小程序」的腳本,而不僅僅是純命令行的腳本或是隻支持簡單的輸入輸出,這一切在 JSBox 的第一個版本就已經支持,並在之後的一年時間裡面不斷地優化,支持越來越多的組件,比如對 Markdown 組件和 Lottie 動畫組件的支持。

界面編輯器

因為 JSBox 已經有了良好的骨架,提供一個所見即所得的界面編輯器就成了水到渠成的事情。實際上界面編輯器也不是一個新鮮玩意兒,早在遠古的 Visual Basic 時代,我們就在用拖拽的方式製作軟件的界面,iOS 和 Android 的開發者工具也都提供了可視化的界面設計工具。但是,在移動平臺上完備地實現這麼一套系統,仍然是一件極其複雜的的事情,工程量不可謂不大。

簡要來說,界面編輯器可以讓界面開發變得極為容易,只用拖拽對應的控件到畫布上,然後設置一些屬性就行了,你無須寫一行代碼就能製作出一個酷炫的界面。除了更快地製作腳本,也能讓新手也體驗編程的樂趣。

那麼我現在就展示一下在 JSBox 新版的界面編輯器如何工作。在畫布界面你可以選中控件,進行移動、調整大小、複製和刪除等操作:

全新界面編輯器上線,JSBox 讓編程變得更容易

畫布

編輯器支持所有通過代碼能夠實現的控件和效果,你需要的只是將他們添加到畫布或者控件上(支持控件的嵌套):

全新界面編輯器上線,JSBox 讓編程變得更容易

控件庫

即便是複雜如 列表、網格 等基於模板的視圖,也可以通過簡單的配置快速生成。

屬性設置

你可以可視化地調整視圖的全部屬性,例如這樣調整這個輸入框的樣式:

全新界面編輯器上線,JSBox 讓編程變得更容易

屬性設置

有些屬性比較複雜,比如 顏色 和 字體,也都支持非常直觀的選擇操作:

全新界面編輯器上線,JSBox 讓編程變得更容易

由於某些原因,例如控件太小或者是被隱藏,你可能無法在畫布裡面選中它,這種時候你可以通過 層級 這個頁面將視圖展開,方便進行操作:

全新界面編輯器上線,JSBox 讓編程變得更容易

視圖層級

頁面設置

你可以輕鬆地設置頁面的行為,比如配置導航欄的按鈕、打開調試模式等等:

全新界面編輯器上線,JSBox 讓編程變得更容易

頁面設置

打開調試模式後,你可以在運行時動態地查看視圖的結構和屬性:

全新界面編輯器上線,JSBox 讓編程變得更容易

界面調試

你甚至可以動態地移動控件和調整屬性,這將大大地方便界面開發過程中的調試過程。

自動佈局技術

JSBox 的界面編輯器支持 iOS 的 Auto Layout,這可以讓你輕鬆地設計出在不同尺寸屏幕下運行都能夠自適應的用戶界面。在這裡我並不會深入地去講自動佈局的原理,而僅僅是展示一下在界面編輯器裡面如何輕鬆地為控件設置佈局約束:

全新界面編輯器上線,JSBox 讓編程變得更容易

界面編輯器甚至能發現你的佈局問題,並提出建議的解決方案:

全新界面編輯器上線,JSBox 讓編程變得更容易

約束衝突

如果只是製作腳本在自己的設備上使用,你無須理解什麼是自動佈局,而如果需要運行在不同尺寸的設備上,界面編輯器也能很好地幫你完成自動佈局。

綁定事件

「用戶按下了一個按鈕」?這是一個事件,將事件綁定到代碼上就實現了用戶界面的邏輯。

界面上的控件總是和發生的事件息息相關,不同的控件支持的事件也不盡相同,你當然可以通過代碼的方式實現事件的綁定,但通過界面編輯器則會更容易。

事件編輯器上面會展示該控件支持的全部事件:

全新界面編輯器上線,JSBox 讓編程變得更容易

事件綁定

你只需點進去為它添加一個函數,JSBox 就會自動把控件和事件綁定起來,如果函數在代碼中不存在還會自動為你創建:

全新界面編輯器上線,JSBox 讓編程變得更容易

編寫代碼

在函數里面添加代碼,就完成了這個控件的邏輯。

運行起來

界面編輯器工作到任何時候,你都可以點擊下方的運行按鈕將腳本跑起來,這個例子運行起來長這樣:

全新界面編輯器上線,JSBox 讓編程變得更容易

運行效果

和在編輯器裡面看到的效果完全一致,這就是所見即所得追求的效果,做到這個效果,也就讓界面製作的成本大大地降低了。

對未來的思考

拖拽界面甚至可以讓小白製作出用戶界面,但他仍需編寫邏輯來實現程序的功能。我們希望在未來能夠儘可能的簡化「實現邏輯」這一步,例如將一些常見的功能模塊化:下載文件、保存圖片等等,讓小白用戶可以通過「拖拽模塊」的方式來實現邏輯,同時保留代碼的部分,方便習慣用代碼實現邏輯的用戶。

讓更多人參與到編程這件有趣的事,是我們始終在思考的。

我們很高興在過去的幾個月為 JSBox 實現了這個版本,這是對我們而言的一個里程碑版本,希望大家可以喜歡。同時我們也意識到 JSBox 目前仍然處於初級階段,我們仍然在為更多令人興奮的特性而努力。


分享到:


相關文章: