Persimmon UI作業(yè)（一）——范進(jìn)中舉（1）

概述

介紹：

Persimmon 是一套運(yùn)行在RT-Thread嵌入式實(shí)時(shí)操作系統(tǒng)上的圖形用戶組件界面，用于提供圖形界面的用戶交互。
它采用C++語(yǔ)言編寫(xiě)，基于C語(yǔ)言實(shí)現(xiàn)的底層圖形像素引擎，為上層應(yīng)用提供了控件、窗口、signal/slot，手勢(shì)動(dòng)畫(huà)等機(jī)制。 為了提高UI的開(kāi)發(fā)靈活性、降低用戶開(kāi)發(fā)時(shí)間和成本，Persimmon 提供了所見(jiàn)即所得的UI設(shè)計(jì)器。用戶可通過(guò)設(shè)計(jì)器輕松實(shí)現(xiàn)UI界面設(shè)計(jì)，并利用JavaScript腳本實(shí)現(xiàn)對(duì)界面邏輯的控制。

柿餅UI為我們提供了豐富的UI控件，例如Button,label,ProgressBar…等等，拖拽式設(shè)計(jì)UI布局可以讓開(kāi)發(fā)者更加快速的投入到設(shè)計(jì)中。它很類似Android的UI可以通過(guò)拖拽式進(jìn)行布局，但又不同于Android，因?yàn)槭溜濽I使用JS腳本語(yǔ)言進(jìn)行編程，這對(duì)于有微信小程序，web前端經(jīng)驗(yàn)的開(kāi)發(fā)者而言，可以更加快速的上手柿餅UI。

---

代碼已經(jīng)放到了我的 Gitee上面了，需要的小伙伴可以自己去下載，歡迎交流。

---

作業(yè)題目

直接上圖：

---

作業(yè)要求：作業(yè)可以在設(shè)計(jì)器模擬器內(nèi)完成，也可以在柿餅派內(nèi)完成。最終提交的作業(yè)是功能完成的設(shè)計(jì)器工程文件。

作業(yè)思路

說(shuō)一下大體的思路吧：

• 1.范進(jìn)中舉：通過(guò)MultiTextBox控件，該控件可以顯示多行文本，所以最簡(jiǎn)單的方式當(dāng)然就是直接將文本copy到控件文本中了。
• 2.電子相冊(cè)：將整個(gè)page中設(shè)置一個(gè)card卡片控件，通過(guò)在card中設(shè)置imagebox，從而達(dá)到輪播圖效果。
• 3.電子計(jì)時(shí)器：通過(guò)clock，button，progressbar控件實(shí)現(xiàn)。

頁(yè)面切換時(shí)card變化顯示的JS代碼：

card_change: function (event) {console.dir(event)if ("change" == event.type) {switch (event.detail.value) {case 0:this.setData({ btn_title: { norImg: 'book_of.png' } });this.setData({ btn_photo: { norImg: 'photo_on.png' } });this.setData({ btn_my: { norImg: 'alarm_on.png' } });break;case 1:this.setData({ btn_title: { norImg: 'book_on.png' } });this.setData({ btn_photo: { norImg: 'photo_of.png' } });this.setData({ btn_my: { norImg: 'alarm_on.png' } });break;case 2:this.setData({ btn_title: { norImg: 'book_on.png' } });this.setData({ btn_photo: { norImg: 'photo_on.png' } });this.setData({ btn_my: { norImg: 'alarm_off.png' } });break;}}},

頁(yè)面切換時(shí)，button圖片切換JS代碼：

onclick: function (event) {var that = this;switch (event.target.id) {case "btn_title":console.log('btn_1')this.setData({ main_card: 0 });this.setData({ btn_title: { norImg: 'book_of.png' } });this.setData({ btn_photo: { norImg: 'photo_on.png' } });this.setData({ btn_my: { norImg: 'alarm_on.png' } });break;case "btn_photo":console.log('btn_2')this.setData({ main_card: 1 });this.setData({ btn_title: { norImg: 'book_on.png' } });this.setData({ btn_photo: { norImg: 'photo_of.png' } });this.setData({ btn_my: { norImg: 'alarm_on.png' } });break;case "btn_my":console.log('btn_3')this.setData({ main_card: 2 });this.setData({ btn_title: { norImg: 'book_on.png' } });this.setData({ btn_photo: { norImg: 'photo_on.png' } });this.setData({ btn_my: { norImg: 'alarm_off.png' } });break;case "btn_stime":console.log('btn_stime')that.timer = setInterval(function () {that.setData({ Clock1: { value: that.time } });that.time++;if (that.time > 60) {/*更新完成的文本提示，清除定時(shí)器*/that.setData({ label1: { value: "Time's up !!!" } });} else {/*更新progressbar的進(jìn)度和label的顯示文本*/that.setData({ label1: { value: "Time: " + that.time + "%" } });that.setData({ progressbar1: { value: that.time } });that.progress++;}}, 1000)break;case "btn_sptime":console.log('btn_sptime')clearInterval(that.timer);break;case "btn_retime":console.log('btn_retime')that.time = 0that.setData({ Clock1: { value: that.time } });that.setData({ label1: { value: "Time: " + that.time + "%" } });that.setData({ progressbar1: { value: that.time } });break;}},

clock控件樣式設(shè)置JS代碼：

this.setData({Clock1: {hour: { x: 7, y: 53 },minute: { x: 5, y: 64 },second: { x: 3, y: 77 },}})

---

????大體上的需求就是這么些，這次作業(yè)讓我對(duì)更多的控件使用有了深刻的認(rèn)識(shí)，尤其clock控件，未來(lái)再制作電子手表是不是可以使用上了呢？

總結(jié)

以上是生活随笔為你收集整理的【12月原创】RT-thread - 柿饼UI ——范进中举的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。