关于Tangram的可视化设计支持
Tangram开源版本是Tangram系列中"最小"的版本，在这个版本中包含了Tangram的最基本的功能点，即软件UI框架的可视化设计。通常，软件开发者都是通过Coding的方式进行软件的框架设计，给定一个如下的UI框架：
大多数开发者会如何处理？许多开发者会分析，这个框架窗体包含几个"分页窗体"、"Splitter窗体"，对应分页窗体如何实现，框架窗体对应的C++类如何设计，命名几个变量，等等，如上显示的框架，如果基于代码开发的角度考虑，通常的开发者很难独立胜任，如果我们看一个更加复杂的UI框架：
开发者会如何构思呢？如果完全依赖Coding技术，那么UI框架的"形态"就会形成一种"羁绊"，这种"羁绊"通常是对软件整体"无用"的，但却耗尽一个框架设计的相当一部分工作量，因此，一种灵活的"所见即所得"的设计方式就变得十分重要了。
我们看看Tangram如何解决这类问题，实现我们从一个空白的主框架开始。你要进行的第一步是，建立一个目录"testTangram"，将你的Tangram exe文件复制到这个目录，
然后启动这个exe文件，此时我们得到一个"空白"的框架：
在框架窗体的"客户区"中点击鼠标右键，会显示一个"设计"菜单：
/style< >/head< >body bgcolor="white"< >span<>div<>b<>font size="6"<鈥?鈥濆簲鐢ㄧ▼搴忎腑鐨勬湇鍔″櫒閿欒銆?hr width=100% size=1 color=silver<>/font<>/b<>/div< >div<>b<>font size="5"< >i<杩愯鏃堕敊璇?/i< >/font<>/b<>/div<>/span< >font face="Arial, Helvetica, Geneva, SunSans-Regular, sans-serif "< >b< 璇存槑: >/b<鏈嶅姟鍣ㄤ笂鍑虹幇搴旂敤绋嬪簭閿欒銆傛搴旂敤绋嬪簭鐨勫綋鍓嶈嚜瀹氫箟閿欒璁剧疆绂佹杩滅▼鏌ョ湅搴旂敤绋嬪簭閿欒鐨勮缁嗕俊鎭?鍑轰簬瀹夊叏鍘熷洜)銆備絾鍙互閫氳繃鍦ㄦ湰鍦版湇鍔″櫒璁＄畻鏈轰笂杩愯鐨勬祻瑙堝櫒鏌ョ湅銆? >br<>br< >b<璇︾粏淇℃伅:>/b< 鑻ヨ浣夸粬浜鸿兘澶熷湪杩滅▼璁＄畻鏈轰笂鏌ョ湅姝ょ壒瀹氶敊璇俊鎭殑璇︾粏淇℃伅锛岃鍦ㄤ綅浜庡綋鍓?Web 搴旂敤绋嬪簭鏍圭洰褰曚笅鐨勨€渨eb.config鈥濋厤缃枃浠朵腑鍒涘缓涓€涓?>customErrors< 鏍囪銆傜劧鍚庡簲灏嗘 >customErrors< 鏍囪鐨勨€渕ode鈥濆睘鎬ц缃负鈥淥ff鈥濄€?br<>br< >table width=100% bgcolor="#ffffcc"< >tr< >td< >code<>pre<>!-- Web.Config 閰嶇疆鏂囦欢 --<>configuration< >system.web< >customErrors mode="Off"/< >/system.web<>/configuration<>/pre<>/code< >/td< >/tr< >/table< >br< >b<娉ㄩ噴:>/b< 閫氳繃淇敼搴旂敤绋嬪簭鐨?>customErrors< 閰嶇疆鏍囪鐨勨€渄efaultRedirect鈥濆睘鎬э紝浣夸箣鎸囧悜鑷畾涔夐敊璇〉鐨?URL锛屽彲浠ョ敤鑷畾涔夐敊璇〉鏇挎崲鎵€鐪嬪埌鐨勫綋鍓嶉敊璇〉銆?br<>br< >table width=100% bgcolor="ffffcc"< >tr< >td< >code<>pre<>!-- Web.Config 閰嶇疆鏂囦欢 --<>configuration< >system.web< >customErrors mode="RemoteOnly" defaultRedirect="mycustompage.htm"/< >/system.web<>/configuration<>/pre<>/code< >/td< >/tr< >/table< >br< >/body<>/html<" />1
为了得到我们最初显示的框架窗体，选择"TabbedWnd."，得到一个对话框：
从中选择"tangramtabwnd"类型，有多种Tabbed风格可以选择，Tabbed风格窗体组件在Tangram中以"插件"的方式体现，可以提供任意多种类型，在Tangram商业版本中将提供一组高质量的"Tabbed"窗体插件，按"OK"后，会出现：
输入Page Title后我们得到：
在Page1的页面区按鼠标右键，得到如下对话框：
这样我们得到：
在Splitter右侧的区域内，按以上介绍的方式插入一个"Excel"风格的Tabbed窗体，得到：
选择"Excel MDI Page"，然后在这页内右击鼠标，在设计菜单中选择"MDI Client."
/style< >/head< >body bgcolor="white"< >span<>div<>b<>font size="6"<鈥?鈥濆簲鐢ㄧ▼搴忎腑鐨勬湇鍔″櫒閿欒銆?hr width=100% size=1 color=silver<>/font<>/b<>/div< >div<>b<>font size="5"< >i<杩愯鏃堕敊璇?/i< >/font<>/b<>/div<>/span< >font face="Arial, Helvetica, Geneva, SunSans-Regular, sans-serif "< >b< 璇存槑: >/b<鏈嶅姟鍣ㄤ笂鍑虹幇搴旂敤绋嬪簭閿欒銆傛搴旂敤绋嬪簭鐨勫綋鍓嶈嚜瀹氫箟閿欒璁剧疆绂佹杩滅▼鏌ョ湅搴旂敤绋嬪簭閿欒鐨勮缁嗕俊鎭?鍑轰簬瀹夊叏鍘熷洜)銆備絾鍙互閫氳繃鍦ㄦ湰鍦版湇鍔″櫒璁＄畻鏈轰笂杩愯鐨勬祻瑙堝櫒鏌ョ湅銆? >br<>br< >b<璇︾粏淇℃伅:>/b< 鑻ヨ浣夸粬浜鸿兘澶熷湪杩滅▼璁＄畻鏈轰笂鏌ョ湅姝ょ壒瀹氶敊璇俊鎭殑璇︾粏淇℃伅锛岃鍦ㄤ綅浜庡綋鍓?Web 搴旂敤绋嬪簭鏍圭洰褰曚笅鐨勨€渨eb.config鈥濋厤缃枃浠朵腑鍒涘缓涓€涓?>customErrors< 鏍囪銆傜劧鍚庡簲灏嗘 >customErrors< 鏍囪鐨勨€渕ode鈥濆睘鎬ц缃负鈥淥ff鈥濄€?br<>br< >table width=100% bgcolor="#ffffcc"< >tr< >td< >code<>pre<>!-- Web.Config 閰嶇疆鏂囦欢 --<>configuration< >system.web< >customErrors mode="Off"/< >/system.web<>/configuration<>/pre<>/code< >/td< >/tr< >/table< >br< >b<娉ㄩ噴:>/b< 閫氳繃淇敼搴旂敤绋嬪簭鐨?>customErrors< 閰嶇疆鏍囪鐨勨€渄efaultRedirect鈥濆睘鎬э紝浣夸箣鎸囧悜鑷畾涔夐敊璇〉鐨?URL锛屽彲浠ョ敤鑷畾涔夐敊璇〉鏇挎崲鎵€鐪嬪埌鐨勫綋鍓嶉敊璇〉銆?br<>br< >table width=100% bgcolor="ffffcc"< >tr< >td< >code<>pre<>!-- Web.Config 閰嶇疆鏂囦欢 --<>configuration< >system.web< >customErrors mode="RemoteOnly" defaultRedirect="mycustompage.htm"/< >/system.web<>/configuration<>/pre<>/code< >/td< >/tr< >/table< >br< >/body<>/html<" />1
这样，得到对话框：
如果你打算增加一个"控制条"，输入标题后按"Create CtrlBar"，如果要增加一个"MDI"客户区，按"Create MDI Client"，这样我们得到如下框架：
。
关闭这个窗体，再运行目录"testTangram"中的exe文件，我们得到：
。
我们看看得到什么了？！在文件菜单中选择"New"
/style< >/head< >body bgcolor="white"< >span<>div<>b<>font size="6"<鈥?鈥濆簲鐢ㄧ▼搴忎腑鐨勬湇鍔″櫒閿欒銆?hr width=100% size=1 color=silver<>/font<>/b<>/div< >div<>b<>font size="5"< >i<杩愯鏃堕敊璇?/i< >/font<>/b<>/div<>/span< >font face="Arial, Helvetica, Geneva, SunSans-Regular, sans-serif "< >b< 璇存槑: >/b<鏈嶅姟鍣ㄤ笂鍑虹幇搴旂敤绋嬪簭閿欒銆傛搴旂敤绋嬪簭鐨勫綋鍓嶈嚜瀹氫箟閿欒璁剧疆绂佹杩滅▼鏌ョ湅搴旂敤绋嬪簭閿欒鐨勮缁嗕俊鎭?鍑轰簬瀹夊叏鍘熷洜)銆備絾鍙互閫氳繃鍦ㄦ湰鍦版湇鍔″櫒璁＄畻鏈轰笂杩愯鐨勬祻瑙堝櫒鏌ョ湅銆? >br<>br< >b<璇︾粏淇℃伅:>/b< 鑻ヨ浣夸粬浜鸿兘澶熷湪杩滅▼璁＄畻鏈轰笂鏌ョ湅姝ょ壒瀹氶敊璇俊鎭殑璇︾粏淇℃伅锛岃鍦ㄤ綅浜庡綋鍓?Web 搴旂敤绋嬪簭鏍圭洰褰曚笅鐨勨€渨eb.config鈥濋厤缃枃浠朵腑鍒涘缓涓€涓?>customErrors< 鏍囪銆傜劧鍚庡簲灏嗘 >customErrors< 鏍囪鐨勨€渕ode鈥濆睘鎬ц缃负鈥淥ff鈥濄€?br<>br< >table width=100% bgcolor="#ffffcc"< >tr< >td< >code<>pre<>!-- Web.Config 閰嶇疆鏂囦欢 --<>configuration< >system.web< >customErrors mode="Off"/< >/system.web<>/configuration<>/pre<>/code< >/td< >/tr< >/table< >br< >b<娉ㄩ噴:>/b< 閫氳繃淇敼搴旂敤绋嬪簭鐨?>customErrors< 閰嶇疆鏍囪鐨勨€渄efaultRedirect鈥濆睘鎬э紝浣夸箣鎸囧悜鑷畾涔夐敊璇〉鐨?URL锛屽彲浠ョ敤鑷畾涔夐敊璇〉鏇挎崲鎵€鐪嬪埌鐨勫綋鍓嶉敊璇〉銆?br<>br< >table width=100% bgcolor="ffffcc"< >tr< >td< >code<>pre<>!-- Web.Config 閰嶇疆鏂囦欢 --<>configuration< >system.web< >customErrors mode="RemoteOnly" defaultRedirect="mycustompage.htm"/< >/system.web<>/configuration<>/pre<>/code< >/td< >/tr< >/table< >br< >/body<>/html<" />1
可以弹出对话框：
这里列举了Tangram默认提供的"Document"模板，你可以增加任意多自己的模板。选择其中的几个，即可得到：
我们从以上过程中可以看出Tangram"独特"的多文档结构，这种结构可以灵活的定位于一个框架中的特定位置，甚至可以定位在一个Tabbed分页之中。
Tangram子文档的设计，与主框架设计完全一致，如果你有预先设计好的UI框架，可以将其"灵活的""导入"另外一个UI框架的内部，如图：
/style< >/head< >body bgcolor="white"< >span<>div<>b<>font size="6"<鈥?鈥濆簲鐢ㄧ▼搴忎腑鐨勬湇鍔″櫒閿欒銆?hr width=100% size=1 color=silver<>/font<>/b<>/div< >div<>b<>font size="5"< >i<杩愯鏃堕敊璇?/i< >/font<>/b<>/div<>/span< >font face="Arial, Helvetica, Geneva, SunSans-Regular, sans-serif "< >b< 璇存槑: >/b<鏈嶅姟鍣ㄤ笂鍑虹幇搴旂敤绋嬪簭閿欒銆傛搴旂敤绋嬪簭鐨勫綋鍓嶈嚜瀹氫箟閿欒璁剧疆绂佹杩滅▼鏌ョ湅搴旂敤绋嬪簭閿欒鐨勮缁嗕俊鎭?鍑轰簬瀹夊叏鍘熷洜)銆備絾鍙互閫氳繃鍦ㄦ湰鍦版湇鍔″櫒璁＄畻鏈轰笂杩愯鐨勬祻瑙堝櫒鏌ョ湅銆? >br<>br< >b<璇︾粏淇℃伅:>/b< 鑻ヨ浣夸粬浜鸿兘澶熷湪杩滅▼璁＄畻鏈轰笂鏌ョ湅姝ょ壒瀹氶敊璇俊鎭殑璇︾粏淇℃伅锛岃鍦ㄤ綅浜庡綋鍓?Web 搴旂敤绋嬪簭鏍圭洰褰曚笅鐨勨€渨eb.config鈥濋厤缃枃浠朵腑鍒涘缓涓€涓?>customErrors< 鏍囪銆傜劧鍚庡簲灏嗘 >customErrors< 鏍囪鐨勨€渕ode鈥濆睘鎬ц缃负鈥淥ff鈥濄€?br<>br< >table width=100% bgcolor="#ffffcc"< >tr< >td< >code<>pre<>!-- Web.Config 閰嶇疆鏂囦欢 --<>configuration< >system.web< >customErrors mode="Off"/< >/system.web<>/configuration<>/pre<>/code< >/td< >/tr< >/table< >br< >b<娉ㄩ噴:>/b< 閫氳繃淇敼搴旂敤绋嬪簭鐨?>customErrors< 閰嶇疆鏍囪鐨勨€渄efaultRedirect鈥濆睘鎬э紝浣夸箣鎸囧悜鑷畾涔夐敊璇〉鐨?URL锛屽彲浠ョ敤鑷畾涔夐敊璇〉鏇挎崲鎵€鐪嬪埌鐨勫綋鍓嶉敊璇〉銆?br<>br< >table width=100% bgcolor="ffffcc"< >tr< >td< >code<>pre<>!-- Web.Config 閰嶇疆鏂囦欢 --<>configuration< >system.web< >customErrors mode="RemoteOnly" defaultRedirect="mycustompage.htm"/< >/system.web<>/configuration<>/pre<>/code< >/td< >/tr< >/table< >br< >/body<>/html<" />1
我们可以将一个"框架"插入到另外一个框架的"内部"，选择菜单"Insert From XTML File."，
这里，xtml文件是你保存的一个Tangram文档，这个功能将实现一个文档框架结构的"提取"，然后"插入"到你当前设计的"区域"：
选择文件"xxxx"，然后按"打开"，我们看到：
注意设计前、后的对比产生的变化，按这样的方式，你可以架构十分综合的UI框架，这种框架，将被保存为扩展名为"xtml"的XML文件，这种文件是Tangram系统的关键对象。建议大家用一个文本编辑器打开一个xtml文件，看看里面的描述，每个Tangram exe文件的形态，是由一个扩展名为".Config"的XML文件决定的，在Tangram中，如果设计的是主框架，将生产一个Config文件，这个文件的命名规则是："AppName.exe.config"，其中AppName是可执行文件名，你可以将你的Tangram Exe文件重新命名，然后按如上的方式设计其主框架UI，以及子文档UI。
MDI 客户区的定制 可以在Tangram exe所在的目录中创建一个子目录"Tangram/Background"，在"Background"中创html文件，然后打开应用程序的Config文件，我们会看到如下信息：
>Caption<Welcome To Tangram World!>/Caption<
>WorkSpaceRunModel=""<>/WorkSpace<
>BackgroundType="html"<background.htm>/Background<
>RegistryKey="TangramDesigner"StdProfileSettings="4"<>/Registry<
>Skin<Merlin ENI/Merlin ENI.uis>/Skin<
>VBAComponent<DocVbaServer.VbaServer.1>/VBAComponent<
>MDITabbedClientTag=""<TangramMDIEx.MDIClientImpl.1>/MDITabbedClient<
>TangramToolBarID<TangramBarManager.BarManager.1>/TangramToolBarID<
>TangramControlBarID<TangramLiteControlBarD.TangramLiteBar.1>/TangramControlBarID<
在这里你可以修改主框架的可见"信息"，指定MDI背景的方法是在节点>BackgroundType="html"<background.htm>/Background<中指定html文件，这个文件必须在"Tangram/Background"目录中。效果如下：
你可以制作自己的个性化背景区域以增加软件的感染力。Tangram的其他技术信息，例如，如何形成定制化的"文档模板"、VBA集成等等，我们会在以后的文章中陆续介绍，
Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=1525769
