[day27] [FGL] 开发一个类似MDI的操作接口-赫非域

文章来自：[FGL] 開發一個類似MDI的操作介面 – iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天 (ithome.com.tw)

[day27] [FGL] 开发一个类似MDI的操作接口

在网页上，在功能较多的网页，常可以看到下列两种接口
图表, 漏斗图描述已自动生成

样式A 功能选项在上方：可以利用 TOOLBAR 的方式来满足 (如果想做成下拉式选单，也可考虑TOPMENU)，可以回头参考 [FGL] 4GL程序的资源文件Resource file体系
样式B 功能选项在左侧：回归到 HTML的语法，应该是要切分 frame来做。但若『只用FGL』，就可以考虑使用 MDI 模式来进行仿真。

Genero套件基本是一个协助尽量用最少code满足最多功能的产品，若需要大量的美化工具协助妆点自然也是可并入使用，就是看关注的重点在哪边。本系列文主要在引导多使用 Genero功能来满足需求，故最大量运用套件所提供的功能，而减少使用注入式的插件进行外观的改动。(但不表示不可行哦)

MDI接口的仿真思路

MDI 是 Multi-Document Interface 的意思。FGL可以透过仿真外框+限定程序运行在内部的做法，满足MDI的需求，但此需求却达不到左侧有 MENU展在画面上的做法。

方法：

使用 TREE containar来做模拟
使用 GBC 的 popup-menu 在初始化时就展开所有程序
使用自动缩合的 start menu(4sm) 凑合凑合

经过实验，方法 1 在每次调整 MENU 时要伴随着大量的 coding，有违初心。方法 2 则是会耗用大量的主机内存，事先准备一堆不一定要开来用的程序，失败。

所以剩下的就是方法 3.

准备一个空框架程序

事先准备一个空框架程序，启动后可以读取 style(4st)，以及读取 start menu(4sm)的小型主程序。为了维系主程序的运行，布置一个 MENU。

MAIN
   CALL ui.Interface.setName("main")
   CALL ui.Interface.loadStyles("mdi.4st")
   #如果有额外要做的事情放在这里，做完了再去读取 MENU(4sm) 设定
   CALL ui.Interface.loadStartMenu("mdi.4sm")
      MENU "外框的MENU，布置注销功能"
       ON ACTION logout   #POPUP MENU的注销
          EXIT MENU
       ON ACTION close    #对应 WINDOWS 的关闭功能
          EXIT MENU
   END MENU
END MAIN

准备 style (mdi.4st)档案，设定起始画面

接下来对主要的 screen进行风格设定。如下方范例：

将 tabbedContainar 打开，这就是形成 MDI 的重要属性
设定 ringMenu 缩在右上(chrome模式)，作个别程序的小功能用 (LOGOUT也座落在此)
StartMenu 设定为 menu (可下拉下展模式)

<?xml version=”1.0″ encoding=”ANSI_X3.4-1968″?>

<!– StyleAttribute name=”browserMultiPage” value=”yes” / –>

</Style>

</StyleList>

此处选择不设定将作业开在新的浏览器页签 (browserMultiPage)，期望能更贴近实际的网页操作模式。

准备 start menu(mdi.4sm)档案，设定起始画面

最后则是准备要执行的作业列表。从此处应该可以明显发现，4sm是透过 MAIN作业调动，但其实并不需要绑入 main.4gl 的 MENU 选项。而是在 MENU 指令(或其他交谈指令生效的状况下) 作为配合的可选择项目。而对应的指令就直接列在 4sm 档案内。

此处最外阶层，建议应配置一个操作说明，以做出类似 **上方接口B ** 的样态。

<?xml version="1.0" encoding="UTF-8"?>
<StartMenu text="Template">
  <StartMenuGroup text="操作选项 (点此处,展开选项)">
    <StartMenuGroup text="大功能1">
       <StartMenuCommand text="子作业1-1" exec="fglrun svms1-1"/>
       <StartMenuCommand text="子作业1-2" exec="fglrun svms1-2"/>
       <StartMenuCommand text="子作业1-3" exec="fglrun svms1-3"/>
       <StartMenuCommand text="子作业1-4" exec="fglrun svms1-4"/>
    </StartMenuGroup>
    <StartMenuGroup text="大功能2">
       <StartMenuCommand text="子作业2-1" exec="fglrun svms2-1"/>
       <StartMenuCommand text="子作业2-2" exec="fglrun svms2-2"/>
    </StartMenuGroup>
  </StartMenuGroup>
</StartMenu>

实作的MDI样态

依据上列的范例实做出来的 GDC 样态是：
图形用户界面, 应用程序描述已自动生成

若可以套上 GBC 则操作上会更类似
图片包含图形用户界面描述已自动生成

大家手上都有许多程序，或许对于部分需要移动做事的人来说，能协助将程序移入 MDI 这样的网页操作接口，应该是对于这些移动工作者来说最方便的。

转载请注明：赫非域 » [day27] [FGL] 开发一个类似MDI的操作接口

文章来自：[FGL] 開發一個類似MDI的操作介面 – iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天 (ithome.com.tw)