加入星计划,您可以享受以下权益:

  • 创作内容快速变现
  • 行业影响力扩散
  • 作品版权保护
  • 300W+ 专业用户
  • 1.5W+ 优质创作者
  • 5000+ 长期合作伙伴
立即加入
  • 正文
  • 推荐器件
  • 相关推荐
  • 电子产业图谱
申请入驻 产业图谱

【从0开始创建AWTK应用程序】创建应用程序并在模拟器运行

2023/12/01
1370
阅读需 8 分钟
加入交流群
扫码加入
获取工程师必备礼包
参与热点资讯讨论

AWTK是基于C语言开发的跨平台GUI框架。本系列文章介绍如何从0开始创建AWTK应用程序,包括搭建开发调试环境、使用AWTK创建Hello工程并在模拟器上运行、将AWTK应用程序移植到其它平台。

创建工程

本篇文章我们来创建第一个AWTK程序,也就是HelloWorld程序,它总共包含两个页面,先来看下最终效果图:

图1 Hello工程两个页面的效果预览首页包含两个控件,一个是显示“Hello World”的label控件,另一个是显示“跳转页面”文本的button控件,点击按钮时会跳转到第二个页面。第二个页面包含显示图片的image控件、edit控件、进度条progress_bar控件、label控件以及按钮button控件。其中image控件具有位移动画,会循环地左右移动。edit控件在修改值时会同步地改变进度条的值和label控件的值。

1. 使用AWStudio创建项目

在开始设计UI前,我们在之前安装好的AWStudio中新建一个项目,注意新建项目时类型要选择“AWTK Application”。

图2 使用AWStudio创建项目

AWTK Designer 是 AWStudio 中内置的工具,专门用来制作 AWTK 应用程序 UI 界面的实用工具,下图是创建好项目后的界面:

图3 创建项目后进入AWTK Designer的UI设计界面

使用AWTK Designer设计UI界面

首先参照预览图,我们需要一个label(静态文本)控件和button(按钮)控件,我们在左侧的控件列表中找到这两个控件并拖到中间的控件编辑栏中:

图4 放置首页的label控件与button控件

1. 设置首页label控件与button控件文本及样式

首先我们修改控件的文本以及字体样式,修改控件文本有两种方式,一种是双击控件直接修改,另一种是修改控件的text属性。除了text属性之外,还可以通过设置font_size属性修改字体的字号,修改完毕后效果图如下:

图5 首页label控件和button控件的字号设计与显示效果

2. 新建第二个页面并进行布局

接下来我们设计第二个页面,我们通过AWTK Designer上方的编辑-新建窗体选项新建一个窗口(Window),设置好窗体设置栏中的名称,操作如下图:

图6 使用AWTK Designer新建窗口

按照图1的效果图将第二个页面所需控件拖拽出来,并进行属性调整。

另外,由于我们的edit只用来改变进度条的值,这个值是非负整数,所以将edit的input_type属性修改成“uint”。image控件显示图片前需要将图片添加到资源浏览器,再到控件中设置image属性为该图片,如下图:

图7 添加图片资源并应用到image控件中

3. 设置控件的位移动画

接下来给图片添加位移动画,我们选中image控件,在右侧“控件编辑器”-“动画”选项中添加一个动画,动画类型选择“位移”,然后对照下图设置动画参数即可。

图8 使用AWTK Designer设置控件动画在完成界面设计之后,我们点击AWTK Designer上方的“打包”按钮即可将页面布局文件、资源文件进行打包。

添加控件事件并编写事件处理代码

项目中我们需要用到按钮的跳转以及修改edit控件值同步改变进度条值和label控件显示文本的效果,我们可以用事件的方式来实现它们。

1. 使用AWTK Designer为控件添加事件

首先选择主页中的button控件,并在右侧的“控件编辑器”中选择“事件”选项,接着点击选项卡右上角的加号并选择“click”事件,添加后效果如图所示。

图9 添加控件click事件第二个界面中的button控件也是像上面一样添加click事件、edit控件添加value_changed(值改变)事件,最后不要忘了保存与打包操作。

2. 在VSCode编写控件事件处理代码

我们在VSCode打开Hello工程的目录,然后找到首页“home_page.c”代码文件,打开之后我们只需在AWTK Designer自动生成的事件代码中写处理逻辑即可。因为点击按钮要跳转界面,所以on_button_click要用到navigator_to接口,参数填的是要打开窗口的name属性值。

图10 事件处理函数和注册事件代码

在新窗口的按钮也是类似,要用到navigator_back_to_home接口,代表回到主页。

接下来编写edit控件的value_changed值改变事件处理函数代码,本质是获取用户输入的值,并将这个值设置到进度条和label控件中,代码如下:

图11 edit控件value_changed事件处理代码

运行与调试

1. 运行AWTK程序

在完成项目的界面布局设计以及业务逻辑代码编写之后,我们依次点击AWTK Designer上方的“打包”、“编译”和“模拟运行”按钮即可运行程序。

图12 打包、编译以及模拟运行项目

2. 调试AWTK程序

可以使用Visual Studio Code调试应用程序,具体操作步骤可以浏览官方开发实践文档的《2.7 应用调试》。

需要注意在launch.json配置demo程序的启动路径,如下图:

图13 配置VSCode的调试程序路径

到这里,我们就完成了Hello工程界面设计、业务逻辑代码编写以及调试运行,如果你在开发过程中遇到了问题,欢迎在评论区进行讨论。

推荐器件

更多器件
器件型号 数量 器件厂商 器件描述 数据手册 ECAD模型 风险等级 参考价格 更多信息
TJA1051T/E/1J 1 NXP Semiconductors TJA1051 - High-speed CAN transceiver SOIC 8-Pin

ECAD模型

下载ECAD模型
$0.39 查看
KSZ8895MQI 1 Micrel Inc Ethernet Transceiver, CMOS, PQFP128, LEAD FREE, PLASTIC, QFP-128
$8.91 查看
SN65HVD233DR 1 Texas Instruments 3.3 V CAN Transceiver with Standby Mode, Loopback 8-SOIC -40 to 125

ECAD模型

下载ECAD模型
$2.73 查看
致远电子

致远电子

广州致远电子股份有限公司成立于2001年,注册资金5000万元,国家级高新技术认证企业,广州市高端工控测量仪器工程技术研究开发中心,Intel ECA全球合作伙伴和微软嵌入式系统金牌合作伙伴。

广州致远电子股份有限公司成立于2001年,注册资金5000万元,国家级高新技术认证企业,广州市高端工控测量仪器工程技术研究开发中心,Intel ECA全球合作伙伴和微软嵌入式系统金牌合作伙伴。收起

查看更多

相关推荐

电子产业图谱

{ "timestamp": "2024-02-21T06:42:19+08:00", "remote_addr": "172.16.88.60","server_name": "www.eefocus.com [snapshot-00]", "server_port": 80, "body_bytes_sent": 136823, "request_time": 0.174, "status": 200, "request": "GET /article/1645315.html HTTP/1.0MISS", "http_referrer": "-", "host": "www.eefocus.com", "http_x_forwarded_for": "44.220.62.183", "continent_code": "NA", "country_name": "USA", "city_name": "San Diego", "region_name": "California", "cookie_eefid": "-", "request_id": "b213ba3916a5eaa6c8f606209758929f", "http_user_agent": "CCBot/2.0 (https://commoncrawl.org/faq/)" }