编写脚本举例
---------------------------------

`点击下载此页演示工程[project(start_demo2).zip] <http://www.openedv.com/ATK-Prod/ATK-HMI/file_download/base/project(start_demo2).zip>`_

控件由属性和事件组成，当一个控件按下、弹起、滑动都会触发相应事件。
我们在事件中编辑脚本就可以实现各种功能，如：更换页面背景图、切换页面等。

更换页面背景图
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

第一步：增加全屏的图片，图片资源如下：

.. image:: image/更换页面背景的图片.png 
    :align: center
    :alt: 更换页面背景的图片

|    

第二步：将上一个演示工程的按钮背景类型改为切图，默认、按下图片分别为0和1，删掉显示的文本，属性配置如下图：

.. image:: image/修改按钮属性.png 
    :align: center
    :alt: 修改按钮属性

|

.. image:: image/修改按钮效果图.png 
    :align: center
    :alt: 修改按钮效果图

|

    **提示：** 一个页面多个按钮时（如主页面）为了方便图片管理，我们通常将按钮的背景设为切图，
    这样仅需两张图（默认和按下状态的全屏图）就可以实现多个按钮的背景效果。

第三步：在弹起事件编写脚本，如下图：

.. image:: image/更换页面背景脚本.png 
    :align: center
    :alt: 更换页面背景脚本

|

    代码:

    .. code-block:: c
        :linenos:

        page0.bg.pic++;
        if(page0.bg.pic > 4)
        {
            page0.bg.pic=2;
        }

第四步：点击调试运行模拟器，点击按钮即可看到效果，如下图：

.. image:: image/更换页面背景运行模拟器.png 
    :align: center
    :alt: 更换页面背景运行模拟器

|
|

页面切换
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

第一步：page0页面，选中b0，按键盘Ctrl + C(复制)，然后Ctrl + V(粘贴)，这样就新增了b1，拖动b1及改变大小，如下：

.. image:: image/page0新增b1.png 
    :align: center
    :alt: page0新增b1

|   

    提示：复制粘贴的方式添加控件更高效（控件属性、事件脚本都会复制）。

第二步：新增一个页面，增加一个简单按钮，如下：

.. image:: image/新增一个页面.png 
    :align: center
    :alt: 新增一个页面

|   

第三步：page0页面，按钮b1的弹起事件，删除复制的脚本，写如下脚本：

.. image:: image/page0按钮弹起事件.png 
    :align: center
    :alt: page0按钮弹起事件

|   

    代码:

    .. code-block:: c
        :linenos:

        page(page1);


第四步：在page1页面，在按钮b0弹起事件，写如下脚本：

.. image:: image/新按钮弹起事件.png 
    :align: center
    :alt: 新按钮弹起事件

|   

    代码:

    .. code-block:: c
        :linenos:

        page(page0);


第五步：点击调试运行模拟器，点击按钮就可以实现页面来回切换了。

|
|
|
|
|
|