高級控件 Advanced Widgets :Using GIndexGroup and GindexCombo

Advanced Widgets :Using GIndexGroup and GindexCombo

---

在這個教程中我們將會建立一個叫做GINDEXAPP的簡單工程來展示怎麼用GIndexGroup和GIndexCombo。我們假設你已經瞭解前文中APP開發的過程。
GindexGroup可以讓你給窗體部件歸類，GIndexCombo就像一個指針讓你可以在不同的GindexGroup中切換來減少窗體的佔用面積和在生成APP GUI時佔用更少的資源來使APP的運行效果更佳。
在下面的圖中你可以比較普通的佈置方案和用GindexGroup的不同。如果在這個例子裏你只有5個相似的部件，或許你想同時顯示它們，設想你如果有6個部件你就沒有其餘的空間來放置它，你只能把它們放在不同的Tab上，這不是一個好的解決方案。

---

儘管使用GIndexGroup和GIndexCombo 是進階的教程，但它們不難。本質上，GIndexCombo就是GIndexGroup的選擇器。
當你創建一個GIndexGroup，你需要拖一個GIndexCombo且只有一個在窗體裏，之後你可以拖任何你想要的窗體部件進去。然後你就能馬上得到GIndexCombo的最多能產生的數目。保存後，你將在manifest文件中看到一個.wg文件。

這個新的文件包含了你剛剛加入的窗體部件：

import ifx.davex.app.manifest.*;

class Gindexgroup_example {
  public GCombo gcombo_example;
  public GInteger ginteger_example;
  public GCheck gcheck_example;

  public Gindexgroup_example (DaveEnv daveEnv, String widgetName, int index){
    gcombo_example = new GCombo(widgetName:"gcombo_example", options:["Option 1","Option 2"], value:"Option 1", enabled:true, visible:true, isMandatoryValue:false , parentWidgetName:widgetName)
    ginteger_example = new GInteger(widgetName:"ginteger_example", value:1024, minValue:0, maxValue:4096, enabled:true, visible:true, isMandatoryValue:false , parentWidgetName:widgetName)
    gcheck_example = new GCheck(widgetName:"gcheck_example", value:false, enabled:true, visible:true, parentWidgetName:widgetName)
  }
}

在此同時，一些新的代碼在GINDEXAPP_GUI.manifest文件中生成：

abstract class GINDEXAPP_GUI extends AppManifest {
  // Begin : UI variable section
  public GInteger ginteger_number_of_items;
  public GIndexCombo gindexcombo_item;
  public GIndexGroup gindexgroup_example;
  public RArray<Gindexgroup_example> rArraygindexgroup_example = RArray(16);


  public GINDEXAPP_GUI(DaveEnv daveEnv){

    ginteger_number_of_items = GInteger(widgetName:"ginteger_number_of_items", value:5, minValue:1, maxValue:16, enabled:true, visible:true, isMandatoryValue:false)
    gindexcombo_item = GIndexCombo(widgetName:"gindexcombo_item", options:["ITEM_0","ITEM_1","ITEM_2","ITEM_3","ITEM_4","ITEM_5","ITEM_6","ITEM_7","ITEM_8","ITEM_9","ITEM_10","ITEM_11","ITEM_12","ITEM_13","ITEM_14","ITEM_15"], value:"ITEM_0")
    gindexgroup_example = GIndexGroup(widgetName:"gindexgroup_example", text:"GIndexGroup", enabled:true, visible:true, gIndexCombo:gindexcombo_item, rArray:rArraygindexgroup_example)
    for(int i=0; i<16; i++){
      rArraygindexgroup_example[i] = new Gindexgroup_example(daveEnv, "gindexgroup_example", i)
    }

  }
  // End : UI variable section
}

---

在這個例子中，我們最多允許了16個部件（組），但我們只顯示5組。這是因爲我們定義GIndexCombo.maxChoices = 16，然後一個新的RArry對象被定義爲16，定義了包含了所有可能的GIndexGroup窗體部件。最大可以選擇的數目必須和GInteger中定義的maxChoices數目一致：

在這裏，我們有一個RArry對象包含了每一個GIndexGroup，有了GIndexCombo我們可以通過GUI選擇顯示GIndexGroup。在下面的圖中你可以看到上面例子展示的原理圖：

你可以更改顯示數量的多少，但你不能更改選擇的數量，因爲它是固定的。爲了改變顯示的數量，你可以通過定義GIndexCombo.options來實現。需要注意List必須和RArray size擁有相當的長度，你可以在manifest中如下定義：

gindexcombo_item.options = MF(
  {
    List<String> l = new ArrayList(rArraygindexgroup_example.size())
    for (int i = 0; i < ginteger_number_of_items.value; i++)
    {
      l.add("ITEM_$i".toString())
    }
    l
  },
  List
)

在下面的程序中，我們建立了一列String 元素，我們把non-null放入相應的String元素，當用戶通過在APP GUI的GInteger 在ginteger_number_of_items放入數值。其餘的值爲null，它們將不會在GIndexCombo顯示。

就像你看到的，GindexGroup的元素也將會繼續在RArry中顯示，但它們不在窗體中可見，因爲它們在gindexcombo_item.options 列表中對應空值。

你可以用這部件去定義信號，佔用資源或生成代碼。在下面的代碼中你可以看到一些Templates的例子，它們使用了GIndexGroup窗體部件的返回值生成代碼：

gindexapp.h file:
#ifndef _GINDEXAPP_H_
#define _GINDEXAPP_H_

#ifdef __cplusplus
extern "C" {
#endif

/***********************************************************************************************************************
** System Header file inclusion **
***********************************************************************************************************************/
#include <DAVE.h>

/***********************************************************************************************************************
** Macros **
***********************************************************************************************************************/

/***********************************************************************************************************************
** Data types (typedefs and enumerations) **
***********************************************************************************************************************/
typedef enum GINDEXAPP_STATUS
{
  GINDEXAPP_STATUS_OK = 0U, // 0 = Status OK
  GINDEXAPP_STATUS_FAILURE = 1U // 1 = Status Failed
} GINDEXAPP_STATUS_t;

/***********************************************************************************************************************
** Data structures **
***********************************************************************************************************************/
typedef struct GINDEXAPP {
  char * gcombo;
  int ginteger;
  bool gcheck;
} GINDEXAPP_t;

/***********************************************************************************************************************
** API prototypes **
***********************************************************************************************************************/


#include "GINDEXAPP_extern.h" /* Included to access the APP Handles at Main.c */

#ifdef __cplusplus
}
#endif

#endif /* GINDEXAPP_H_ */


gindexapp_extern_h.tmpl file:

 out.print("""
#ifndef GINDEXAPP_EXTERN_H_
#define GINDEXAPP_EXTERN_H_

#ifdef __cplusplus
extern "C" {
#endif

/* Extern declaration of GINDEXAPP APP handlers */
""")
for(def app : appInstancesList){

  for (int i = 0; i < app.ginteger_number_of_items.value; i++)
  {
    out.print("""
    extern GINDEXAPP_t ${app.getInstanceLabel()}_ITEM_$i;""") 
  }
}

out.print("""

#ifdef __cplusplus
}
#endif

#endif /* GINDEXAPP_EXTERN_H_ */""")



gindexapp_conf_c.tmpl file:
out.println("#include \"gindexapp.h\"")
for (GINDEXAPP app : appInstancesList)
{
  for (int i = 0; i < app.ginteger_number_of_items.value; i++)
  {
out.print("""
GINDEXAPP_t ${app.getInstanceLabel()}_ITEM_$i =
{
  .gcombo = "${app.rArraygindexgroup_example[i].gcombo_example.value}",
  .ginteger = ${app.rArraygindexgroup_example[i].ginteger_example.value},
  .gcheck = ${app.rArraygindexgroup_example[i].gcheck_example.value ? "true" : "false"}
};
""")
  }
}

下圖你可以看到這個例子在運行在DAVE™ 4中的樣子:

它所生成的代碼：

gindexapp_extern.h file:

#ifndef GINDEXAPP_EXTERN_H_
#define GINDEXAPP_EXTERN_H_

#ifdef __cplusplus
extern "C" {
#endif

/* Extern declaration of GINDEXAPP APP handlers */

extern GINDEXAPP_t GINDEXAPP_0_ITEM_0;
extern GINDEXAPP_t GINDEXAPP_0_ITEM_1;
extern GINDEXAPP_t GINDEXAPP_1_ITEM_0;

#ifdef __cplusplus
}
#endif

#endif /* GINDEXAPP_EXTERN_H_ */


gindexapp_conf.c file:

#include "gindexapp.h"

GINDEXAPP_t GINDEXAPP_0_ITEM_0 =
{
  .gcombo = "Option 1",
  .ginteger = 3210,
  .gcheck = true
};

GINDEXAPP_t GINDEXAPP_0_ITEM_1 =
{
  .gcombo = "Option 1",
  .ginteger = 1024,
  .gcheck = false
};

GINDEXAPP_t GINDEXAPP_1_ITEM_0 =
{
  .gcombo = "Option 2",
  .ginteger = 83,
  .gcheck = false
};