CookBook

IM-BloomMaker中生成的画面中,根据在输入项目的值切换元件的显示/隐藏方法

发表日:

此CookBook中,介绍了在IM-BloomMaker切换输入系列元素的输入值根据显示/隐藏元素的方法。
实际中创建示例页面一边进行说明。

完成图片

是在此CookBook生成的示例页面。

动作内容如下所示。

  1. 和复选框打开显示文本框复选框的下面。
  2. 和复选框关闭复选框下的文本框会隐藏起来。
  3. 按下「Yes」的单选按钮后,显示文本区域单选按钮的下面。
  4. 按下「No」的单选按钮与单选按钮下方的文本区域会隐藏起来。

完成示例

请使用下述链接下载完成示例。

画面示例导入文件: cookbook_163621.zip
请导入IM-BloomMaker的导入画面。

请访问以下URL在本地环境中显示时,。
http://localhost:8080/imart/bloommaker/designer/im_cookbook_163621?css-framework=imui
此外Base URL为以下的部分,请适当变更了与环境相符。
http://localhost:8080/imart

食谱

示例页面的创建过程如下所示。

  1. 处理的声明必要的变量
  2. 元件配置在页面,变量相关联
  3. 创建Action

1. 处理的声明必要的变量

  • 确认变量选项卡下拉列表中选择了「变量」,请JSON编辑器中粘贴以下JSON创建变量。

2. 元件配置在页面,变量相关联

  • 请从元件托盘的「布局」「框」配置在页面。
    今后此元素被称为「框1」。

  • 请从元件托盘的「表单部件」配置在「复选框」先前配置了「框1」中。

  • 选择配置了「复选框」,请在属性选项卡,如下所示输入。

类别 属性名 单选按钮 设定值
元件固有 textContent 变量值 $variable.message.textBoxDisplay
元件固有 value(※1) 固定值 0
元件固有 checked 变量值 $variable.dispEnterTextFlg

※ 1设定值是可选的。不设定不会出现问题。

  • 请从元件托盘的「布局」「框」配置在页面。
    今后此元素被称为「框2」。

  • 选择配置了「框2」,请在属性选项卡,如下所示输入。

类别 属性名 单选按钮 设定值
共通 显示/隐藏 变量值 $variable.dispEnterTextFlg

  • 请从元件托盘的「通用」配置在「标签」先前配置了「框2」中。
    配置后,请在属性选项卡的「textContent」属性中输入「name」。

  • 请从元件托盘的「表单部件」配置在「文本输入」先前配置了「框2」中。

在此为止的步骤,进行简单的元素显示/隐藏的设定完成。

可通过属性选项卡的「共同」→「显示/隐藏」属性切换元件的显示/非显示。
例如,复选框的状态下切换想显示/隐藏时,复选框的「checked」属性后,在想要切换显示/隐藏元素的「显示/隐藏」属性设置相同变量而实现。

复选框


想切换显示/隐藏元件

  • 请从元件托盘的「布局」「框」配置在页面。
    今后此元素被称为「框3」。

  • 请从元件托盘的「通用」配置在「标签」先前配置了「框3」中。

  • 选择配置了「标签」,请在属性选项卡,如下所示输入。

类别 属性名 单选按钮 设定值
元件固有 textContent 变量值 $variable.message.textAreaDisplay

  • 请从元件托盘的「布局」「框」配置在页面。
    今后此元素被称为「框4」。

  • 请从元件托盘的「表单部件」配置在「单选按钮」先前配置了「框4」中。

  • 选择配置了「单选按钮」,请在属性选项卡,如下所示输入。

类别 属性名 单选按钮 设定值
元件固有 textContent 固定值 Yes
元件固有 value 固定值 0
元件固有 selected 变量值 $variable.radioBtnStatus

  • 请从元件托盘的「表单部件」配置在「单选按钮」先前配置了「框4」中。

  • 选择配置了「单选按钮」,请在属性选项卡,如下所示输入。

类别 属性名 单选按钮 设定值
元件固有 textContent 固定值 No
元件固有 value 固定值 1
元件固有 selected 变量值 $variable.radioBtnStatus

  • 请从元件托盘的「布局」「框」配置在页面。
    今后此元素被称为「框5」。

  • 选择配置了「框5」,请在属性选项卡,如下所示输入。

类别 属性名 单选按钮 设定值
共通 显示/隐藏 变量值 $variable.dispTextAreaFlg

  • 请从元件托盘的「布局」配置在「框」先前配置了「框5」中。
    今后此元素被称为「框6」。

  • 请从元件托盘的「通用」配置在「标签」先前配置了「框6」中。

  • 选择配置了「标签」,请在属性选项卡,如下所示输入。

类别 属性名 单选按钮 设定值
元件固有 textContent 变量值 $variable.message.textAreaCaption

  • 请从元件托盘的「布局」配置在「框」先前配置了「框5」中。
    今后此元素被称为「框7」。

  • 请从元件托盘的「表单部件」配置在「文本区域」先前配置了「框7」中。

3. 创建Action

  • 按下Action选项卡的「新建」按钮打开Action编辑器,请在Action名输入「textAreaShowHide」。

  • 左侧窗格的「Action」→「标准」从执行「定制脚本」拖放右窗格中,请输入以下代码。

单选按钮和文本输入等输入元件的输入值根据显示/隐藏切换时请使用定制脚本。

进行下述处理步骤。
1.进行输入类元件相关联的变量的值的判定
2.想切换显示/隐藏元素的「显示/隐藏」属性相关联的变量代入true(显示)或false(隐藏)

  • OK,按下关闭Action编辑器。

  • 最后,按下页面中配置了「单选按钮(Yes)」,请在属性选项卡的「事件」→「输入值变更时」设置为「textAreaShowHide」Action。
    请「单选按钮(No)」中也进行同样的操作。

在以上切换输入系列元素的输入值根据显示/隐藏元素的示例页面的创建完成。

动作确认

确认生成的示例页面正确动作?
按下工具栏的「预览」图标来可动作确认。

如下运行,则不会出现问题。

  1. 确认框中输入确认后,复选框的下方显示的文本框来
  2. 去除复选框的选中后,复选框的下方的文本框中不显示成为
  3. 选择「Yes」的单选按钮后,在单选按钮下方显示的文本区域
  4. 选择「No」的单选按钮后,单选按钮下方的文本区域不显示成为

-CookBook
-

执笔者:


comment

没有邮件地址被公开。 * 附栏必须项目

相关报道

no image

在Docker Compose构筑Accel Platform环境。

此CookBook中,介绍了使用Docker Compose构筑Accel Platform环境步骤。这种CookBook是通过下述的文章中生成的D:就

no image

通过画面操作方法切换画面项目的输入检查方法

此CookBook中,在IM-FormaDesigner的输入检查程序,介绍要设定画面的操作方法相对应的输入检查方法。这种方法,以下的产品中生成的应用程序和…

no image

创建Cassandra的Docker。

此CookBook中,介绍了Cassandra的Docker的生成步骤。食谱基础图片的创建生成Cassandra的Docker图片执行…

no image

在IMBox添加提交种别方法(textile)

此CookBook中,介绍了在IMBox添加提交种别方法。中参照以下文档,可在IMBox添加提交种别。IMBox编程小…

no image

【ViewCreator】取得搜索到的相符件数函数的创建方法。

此CookBook中,介绍了在ViewCreator取得搜索到的相符件数函数的创建方法。用户定义函数的详细信息请参照下述内容的文档。ViewCre…

还没有数据。

RSSRSSRSSRSS