Persimmon UI作业（一）——范进中举（1）

概述

介绍：

Persimmon 是一套运行在RT-Thread嵌入式实时操作系统上的图形用户组件界面，用于提供图形界面的用户交互。
它采用C++语言编写，基于C语言实现的底层图形像素引擎，为上层应用提供了控件、窗口、signal/slot，手势动画等机制。为了提高UI的开发灵活性、降低用户开发时间和成本，Persimmon 提供了所见即所得的UI设计器。用户可通过设计器轻松实现UI界面设计，并利用JavaScript脚本实现对界面逻辑的控制。

柿饼派

柿饼UI为我们提供了丰富的UI控件，例如Button,label,ProgressBar…等等，拖拽式设计UI布局可以让开发者更加快速的投入到设计中。它很类似Android的UI可以通过拖拽式进行布局，但又不同于Android，因为柿饼UI使用JS脚本语言进行编程，这对于有微信小程序，web前端经验的开发者而言，可以更加快速的上手柿饼UI。

代码已经放到了我的 Gitee上面了，需要的小伙伴可以自己去下载，欢迎交流。

作业题目

直接上图：

范进中举

作业要求：作业可以在设计器模拟器内完成，也可以在柿饼派内完成。最终提交的作业是功能完成的设计器工程文件。

作业思路

说一下大体的思路吧：

1.范进中举：通过MultiTextBox控件，该控件可以显示多行文本，所以最简单的方式当然就是直接将文本copy到控件文本中了。
2.电子相册：将整个page中设置一个card卡片控件，通过在card中设置imagebox，从而达到轮播图效果。
3.电子计时器：通过clock，button，progressbar控件实现。

页面切换时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;
            }
        }
    },

页面切换时，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) {
                        /*更新完成的文本提示，清除定时器*/
                        that.setData({ label1: { value: "Time's up !!!" } });
                    } else {
                        /*更新progressbar的进度和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 = 0
                that.setData({ Clock1: { value: that.time } });
                that.setData({ label1: { value: "Time: " + that.time + "%" } });
                that.setData({ progressbar1: { value: that.time } });
                break;
        }
    },

clock控件样式设置JS代码：

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