请输入
菜单

示例1:Hello World

目标

通过第一个示例,了解UIOTOS中连线的基本用途。示例中,按钮文字通过连线操作,输出给文本框,如下所示:

步骤

新建

从登录开始,在用户目录新建当前示例的页面,参见新建页面

拖放组件

示例涉及到按钮文本框两个组件,依次从组件面板中拖入并配置。步骤如下:

  • 步骤1:打开组件面板。
  • 步骤2:选择表单-普通按钮组件,拖放到页面。
  • 步骤3:设置按钮显示文字。
  • 方式一:直接双击,弹窗中输入并确定。
  • 方式二:属性面板中外观-文字,进行设置。
  • 步骤4:选中表单-文本框组件,拖放到页面
  • 步骤5:设置文本框属性。
  • 在属性外观-占位提示符中设置:等待显示
  • 在属性外观-标签文本中设置:打印输出(或ctrl + shift + 双击设置,参见快捷键)。

连线操作

拖放好两个组件后,要实现交互、传递属性值,需要用连线将两者关联起来,步骤如下:

  • 步骤1:选中按钮,单击右键,选择连线-交互连线(或快捷键ctrl+shift+空格)。
  • 步骤2:由按钮按下,指向文本框,鼠标松开时,在弹窗列表中,选择值内容,然后在再点击后面的选择,选中文字属性(如果没有该属性,参见连线弹窗面板中属性不存在?)。
  • 步骤3:最后依次点击确定。

预览

连线配置完毕后,点击保存,运行预览交互效果。如下所示:

预览操作:点击顶部工具栏预览(或快捷键ctrl + p

注意,直接预览时,如果窗口尺寸变化,会发现界面位置固定,通常需要自适应,涉及到布局,具体操作如下

示例附加布局设置
  • 步骤1:同时选中按钮文本框右键选择自动布局(或按快捷键shift+回车),此时组件会根据位置自动布局。
  • 步骤2:分别在两个组件属性面板的布局中(也可以保持同时选中,一并设置),设置横纵向都选择中心(参见布局参数设置)。
  • 步骤3: 保存,预览。

小结

这是第一个小的完整示例。介绍了目标效果和搭建的完整过程,以及相关知识点。后续的示例234..中,都将分不同的示例主题,介绍过程和实现细节。

此外:在当前示例节点下,也提供了一些列极简的例子:

这部分例子简单、功能单一,文档也仅介绍步骤,不详解,供初学者傻瓜式参考。有了直观操作感受后,可再进一步结合其他示例正式学习,从知其然知所以然

上一个
实践
下一个
初体验:随机颜色显示
最近修改: 2024-08-19Powered by