這一次制作的按鈕模板具有通過模板屬性動態配置圖形的功能。模板的屬性一共有6個：x、y、w、h、state、content，其中state有normal、hot和press三個取值。XML、代碼和截圖如下：
下面的模板文件有兩個模板，分別是background和button。background制作玻璃效果，button給background加上一個邊框，展示了property evaluation和template reference的功能：
1 <?xml version="1.0" encoding="utf-8" ?>
2 <irconfig xmlns="http://tempuri.org/irconfig.xsd">
3 <resources>
4 <brush name="outer_border_brush" kind="solid">
5 <main_color r="96" g="128" b="255" a="255"/>
6 </brush>
7
8 <brush name="up_content_brush_normal" kind="linear_gradient" gradient_angle="0">
9 <main_color r="224" g="224" b="224" a="255"/>
10 <gradient_color r="192" g="192" b="192" a="255"/>
11 </brush>
12 <brush name="down_content_brush_normal" kind="linear_gradient" gradient_angle="0">
13 <main_color r="128" g="128" b="128" a="255"/>
14 <gradient_color r="160" g="160" b="160" a="255"/>
15 </brush>
16
17 <brush name="up_content_brush_hot" kind="linear_gradient" gradient_angle="0">
18 <main_color r="224" g="224" b="255" a="255"/>
19 <gradient_color r="192" g="192" b="255" a="255"/>
20 </brush>
21 <brush name="down_content_brush_hot" kind="linear_gradient" gradient_angle="0">
22 <main_color r="128" g="128" b="255" a="255"/>
23 <gradient_color r="160" g="160" b="255" a="255"/>
24 </brush>
25
26 <brush name="up_content_brush_press" kind="linear_gradient" gradient_angle="0">
27 <main_color r="224" g="224" b="255" a="255"/>
28 <gradient_color r="160" g="160" b="255" a="255"/>
29 </brush>
30 <brush name="down_content_brush_press" kind="linear_gradient" gradient_angle="0">
31 <main_color r="32" g="32" b="255" a="255"/>
32 <gradient_color r="96" g="96" b="255" a="255"/>
33 </brush>
34
35 <brush name="background_brush" kind="solid">
36 <main_color r="255" g="255" b="255" a="255"/>
37 </brush>
38 <brush name="text_brush" kind="solid">
39 <main_color r="0" g="0" b="0" a="255"/>
40 </brush>
41 <pen name="outer_border_pen" brush="outer_border_brush" endcap="round" join="round" weight="1"/>
42 <font name="text_font" face="微軟雅黑" size="18"/>
43 </resources>
44 <templates>
45 <template name="background">
46 <properties>
47 <property name="x" type="int" default="0"/>
48 <property name="y" type="int" default="0"/>
49 <property name="w" type="int" default="100"/>
50 <property name="h" type="int" default="100"/>
51 <property name="state" type="str" default="normal"/>
52 <property name="content" type="str" default=""/>
53 </properties>
54 <content>
55 <rectangle name="client" x="$x" y="$y" width="$w" height="$h">
56 <text brush="text_brush" font="text_font" text="$content" x="(client.width-this.width)/2" y="(client.height-this.height)/2"/>
57
58 <rectangle brush="up_content_brush_normal" visible="$state=='normal'"
59 x="0" y="0" width="client.width" height="client.height/2" />
60 <rectangle brush="down_content_brush_normal" visible="$state=='normal'"
61 x="0" y="client.height/2" width="client.width" height="client.height/2+1" />
62
63 <rectangle brush="up_content_brush_hot" visible="$state=='hot'"
64 x="0" y="0" width="client.width" height="client.height*4/9" />
65 <rectangle brush="down_content_brush_hot" visible="$state=='hot'"
66 x="0" y="client.height*4/9" width="client.width" height="client.height*5/9+1" />
67
68 <rectangle brush="up_content_brush_press" visible="$state=='press'"
69 x="0" y="0" width="client.width" height="client.height*5/9" />
70 <rectangle brush="down_content_brush_press" visible="$state=='press'"
71 x="0" y="client.height*5/9" width="client.width" height="client.height*4/9+1" />
72 </rectangle>
73 </content>
74 </template>
75 <template name="button">
76 <properties>
77 <property name="x" type="int" default="0"/>
78 <property name="y" type="int" default="0"/>
79 <property name="w" type="int" default="100"/>
80 <property name="h" type="int" default="100"/>
81 <property name="state" type="str" default="normal"/>
82 <property name="content" type="str" default=""/>
83 </properties>
84 <content>
85 <rectangle name="border" brush="background_brush" pen="outer_border_pen" x="$x" y="$y" width="$w" height="$h">
86 <instance reference="background">
87 <setter name="x" value="1"/>
88 <setter name="y" value="1"/>
89 <setter name="w" value="border.client_width-2"/>
90 <setter name="h" value="border.client_height-2"/>
91 <setter name="state" value="$state"/>
92 <setter name="content" value="$content"/>
93 </instance>
94 </rectangle>
95 </content>
96 </template>
97 </templates>
98 </irconfig>
程序由4個按鈕組成，4個按鈕都是button的實例化，但是只處理了最后一個按鈕的消息。因為現在只有畫圖，所以消息處理部分是手動的。下面是截圖：
下面是代碼：
1 class ConfigForm : public VL_WinForm
2 {
3 protected:
4 IVL_IrFactory::Ptr FFactory;
5 IVL_IrCanvas::Ptr FCanvas;
6 VL_IrConfigLoader::Ptr FLoader;
7 VL_IrConfig::Ptr FConfig;
8 VL_IrTemplateInstance::Ptr FNormalButton;
9 VL_IrTemplateInstance::Ptr FHotButton;
10 VL_IrTemplateInstance::Ptr FPressButton;
11 VL_IrTemplateInstance::Ptr FButton;
12 VBool FClickedOnButton;
13
14 VL_IrTemplateInstance::Ptr CreateButton(VL_IrPoint Position , VUnicodeString State , VUnicodeString Text)
15 {
16 VL_IrTemplateInstance::Ptr Instance=FConfig->FindTemplate(L"button")->CreateInstance();
17 for(VInt i=0;i<Instance->GetRootElements().GetCount();i++)
18 {
19 FCanvas->GetRootElement()->Container()->AddChild(Instance->GetRootElements()[i]);
20 }
21
22 Instance->GetInts()[L"x"]=Position.X;
23 Instance->GetInts()[L"y"]=Position.Y;
24 Instance->GetInts()[L"w"]=100;
25 Instance->GetInts()[L"h"]=30;
26 Instance->GetStrs()[L"state"]=State;
27 Instance->GetStrs()[L"content"]=Text;
28 Instance->Update();
29
30 return Instance;
31 }
32
33 VBool IsOnButton(VLS_MouseStruct Struct)
34 {
35 return FButton->GetRootElements()[0]->Properties()->ContainedPoint(VL_IrPoint(Struct.X,Struct.Y))!=IVL_IrElement::htrNone;
36 }
37
38 void Form_MouseDown(VL_Base* Sender , VLS_MouseStruct Struct)
39 {
40 FClickedOnButton=IsOnButton(Struct);
41 FButton->GetStrs()[L"state"]=FClickedOnButton?L"press":L"normal";
42 FButton->Update();
43 FCanvas->Render();
44 }
45
46 void Form_MouseMove(VL_Base* Sender , VLS_MouseStruct Struct)
47 {
48 VUnicodeString PreviousState=FButton->GetStrs()[L"state"];
49 if(FClickedOnButton)
50 {
51 FButton->GetStrs()[L"state"]=IsOnButton(Struct)?L"press":L"hot";
52 }
53 else if(Struct.LeftButton)
54 {
55 FButton->GetStrs()[L"state"]=IsOnButton(Struct)?L"hot":L"normal";
56 }
57 else
58 {
59 FButton->GetStrs()[L"state"]=IsOnButton(Struct)?L"hot":L"normal";
60 }
61 if(FButton->GetStrs()[L"state"]!=PreviousState)
62 {
63 FButton->Update();
64 FCanvas->Render();
65 }
66 }
67
68 void Form_MouseUp(VL_Base* Sender , VLS_MouseStruct Struct)
69 {
70 FClickedOnButton=false;
71 FButton->GetStrs()[L"state"]=IsOnButton(Struct)?L"hot":L"normal";
72 FButton->Update();
73 FCanvas->Render();
74 }
75 public:
76 ConfigForm():VL_WinForm(true)
77 {
78 SetBorder(vwfbSingle);
79 SetMinimizeBox(false);
80 SetMaximizeBox(false);
81 SetClientWidth(800);
82 SetClientHeight(600);
83 SetText(L"Vczh Interaction Renderer Template Test");
84
85 OnLeftButtonDown.Bind(this,&ConfigForm::Form_MouseDown);
86 OnLeftButtonUp.Bind(this,&ConfigForm::Form_MouseUp);
87 OnMouseMove.Bind(this,&ConfigForm::Form_MouseMove);
88 FClickedOnButton=false;
89
90 FFactory=CreateInteractionFactory(L"GDI");
91 FCanvas=FFactory->CreateCanvas(this);
92 FLoader=new VL_IrConfigLoader(FFactory);
93 FConfig=FLoader->Load(VFileName(GetApplication()->GetAppName()).MakeAbsolute(L"..\\Renderer\\IrConfig_Test.xml").GetStrW());
94
95 VL_IrBrushRec WhiteBrushRec;
96 WhiteBrushRec.BrushKind=VL_IrBrushRec::bkSolid;
97 WhiteBrushRec.MainColor=VL_IrColor(255,255,255);
98 IVL_IrBrush::Ptr WhiteBrush=FFactory->CreateBrush(WhiteBrushRec);
99
100 IVL_IrRectangle::Ptr Root=FFactory->CreateRectangle();
101 Root->Properties()->SetBrush(WhiteBrush);
102 Root->Update(VL_IrPoint(0,0),VL_IrPoint(800,600));
103 FCanvas->SetRootElement(Root);
104
105 FNormalButton=CreateButton(VL_IrPoint(10,10),L"normal",L"Normal");
106 FHotButton=CreateButton(VL_IrPoint(10,50),L"hot",L"Hot");
107 FPressButton=CreateButton(VL_IrPoint(10,90),L"press",L"Press");
108 FButton=CreateButton(VL_IrPoint(10,130),L"normal",L"Click Me");
109
110 FCanvas->Render();
111 }
112 };
程序創建了一個白色的全屏的長方形當背景，然后把button的四個實例產生的圖形都加入長方形中。使用類似的方法就可以將不同的東西堆疊起來，最后組成一個完整的程序界面了。接下來開始設計界面庫的架構，做一系列可以自動排版、基于MVC和上面那個模板的組件。
posted on 2009-08-20 05:38
陳梓瀚(vczh) 閱讀(4278)
評論(7) 編輯 收藏 引用 所屬分類:
2D