概述

所谓线框UI，就是利用基础的点、线来构建界面，主要的特点就是极其省内存，结合过渡色背景，整个界面无需使用任何图片；而为了使界面更加灵动，我们使用了定时器来增加动态效果，这是线框UI的主要特点；

典型控件讲解

在线框UI中，按钮是一个比较典型的控件，我们按照控件开发步骤来讲解：

1、分析需求，构建属性，要求控件的所有状态都可以用属性来描述，包括动态控件的动态过程状态；
/-------声明控件的基础属性，基础属性不可以修改，也不可以调整顺序
int x1=10;#defattr(x1,int,"左上角X1坐标");
int y1 = 10;#defattr(y1,int,"左上角y1坐标");
int x2 = 110;#defattr(x2,int,"右下角X2坐标");
int y2 = 50;#defattr(y2,int,"右下角y2坐标");
int status=360448;#defattr(status,status,"状态寄存器");
int status2=0x00;#defattr(status2,status2,"状态寄存器");
//--------开始在此定义控件的用户属性,比如以下常用属性：----------
str text="按钮";#defattr(text,str,"输入的字符串");
int color=2047;#defattr(color,rgbval,"控件的颜色基色");
int bmode=0;#defattr(bmode,select,"背景色调","0:深色背景;1:浅色背景");
int dotm = 16;#defattr(dotm,select,"显示汉字的点阵大小","16:16点阵;24:24点阵;32:32点阵;48:48点阵;64:64点阵");
int cc = 15;#defattr(cc,color,"显示汉字的颜色");
int bc = 63;#defattr(bc,color,"背景颜色");
//--------开始定义内部属性,不加#defattr,即控件内部变量，在上位机属性列表中不出现
//比如： 
int ts=0; //状态计数

可以看到整体可触摸，并且有50ms定时器。 - text、dotm、cc、bc可以确定按钮基础界面绘制信息 - color、bmode将16~23号颜色设置成8级过渡色，用于动态效果 - ts 动态效果的计数

2、写控件的create()事件，包括对尺寸控制、需求字符串等初始化、触摸热区的初始化等
3、写控件的界面绘制，即show()、draw()事件；
//---draw():绘制背景，所有不变的东西，不随数据变化的东西都称之为背景界面
void draw()
{    //在此书写绘制背景的语句
}

//---show():刷新前景数据，也就是自定义属性发生变化时，界面跟着变得部分
void show()
{    //在此书写刷新前景的语句
    automode(bc);
    gradbasecolor(color,bmode);
    if (ts==0){
        box(x1,y1,x2,y2,19);
        box(x1+1,y1+1,x2-1,y2-1,bc);
    }
    else{    //按下的动态效果
        box(x1,y1,x2,y2,20-ts);
        box(x1+1,y1+1,x2-1,y2-1,20-ts);
    }
    label(dotm,x1+2,y1+2,x2-2,y2-2,text,cc,bc,1);

}
4、书写对应事件、包括热区点击事件、定时器事件等各种处理事件；
void onclick(){
  #defattr(onclick,function,"在此书写按钮按下后的代码");
}
//----onmouse方法，用户点击触摸屏上的热区，会调用此方法，其中：
//t:触摸模式： t=0 按下鼠标按钮，相当于触摸屏点击 ;t=1 鼠标移动 ；t=2鼠标抬起
//rn:热区编号，允许一个控件对应多个热区，多个热区靠rn变量识别，对于按钮等整个控件一个热区，可以忽视rn
void onmouse(int t,int rn)
{   //在此书写有关热区处理方法的代码
    automode(bc);
    gradbasecolor(color,bmode);
    if (t==0){
        label(dotm,x1+2,y1+2,x2-2,y2-2,text,bc,18,1);
    }
    if (t==2){
        ts=4;
        onclick();
    }
}

//----ontimer方法：status中设置的定时器会调用此方法
//当本控件有属性数值发生变化后，系统会自动调用show方法显示，定时器代码中无需操作界面
void ontimer()
{   //在此书写有关定期器对数据的修改代码
    if (ts>0) ts--;
}
5、编写测试程序，测试控件的各种功能；