Visual Design Support for Tangram

About Tangram Visual Design SupportThe open-source Tangram version is the "minimal" version in the Tangram series. It contains the most basic features of TANGRAM, namely the visual design of the software UI framework. Generally, software developers use coding to design the software framework. The following UI framework is given: What do most developers do? Many developers will analyze how the frame form contains several "pagination forms" and "splitter forms", how to implement the corresponding pagination forms, and how to design the C ++ class corresponding to the framework form, name several variables, and so on. For the framework shown above, it is usually difficult for developers to be competent independently from the perspective of code development. If we look at a more complex UI framework: what do developers think? If you fully rely on the coding technology, the "form" of the UI framework will form a "Embarrassment", which is usually "useless" for the entire software, however, it consumes a considerable amount of effort for a Framework Design. Therefore, a flexible "What you see is what you get" design method becomes very important. Let's take a look at how Tangram solves this kind of problem and start with a blank main framework. The first step is to create a directory named "testtangram", copy your Tangram EXE file to this directory, and then start the EXE file, now we get a blank frame: Right-click the "customer area" in the frame form, and a "design" menu is displayed:

1

Select "tabbedwnd…" to get the frame form we initially showed ...", A dialog box is displayed. Select the "tangramtabwnd" type. You can select multiple tabbed styles. The tabbed style form component is displayed in TANGRAM as a "plug-in" and can provide any types, in the commercial version of TANGRAM, a set of high-quality "tabbed" form plug-ins will be provided. After you press "OK", a set of high-quality "tabbed" form plug-ins will be displayed: Enter the page title and we will get: right-click the page1 page and choose the following dialog box: in this case, insert an "Excel" tabbed form in the area on the right of the splitter, expected result: Select "Excel MDI page", right-click the page, and select "MDI client…" from the design menu ..."

1

In the displayed dialog box, if you want to add a control bar, enter the title and press "create ctrlbar". If you want to add an "MDI" customer area, press "create MDI client ", in this way, we get the following framework :. Close this form, and then run the EXE file in the directory "testtangram". We get :. Let's see what we got ?! Select "new" from the File menu"

1

In the displayed dialog box, the default "document" template provided by Tangram is listed. You can add any templates of your own. Select a few of them to get the results: we can see from the above process that Tangram's "unique" Multi-document structure can be flexibly positioned in a specific position in a framework, it can even be located in a tabbed page. The design of the Tangram sub-document is exactly the same as that of the main framework. If you have a pre-designed UI framework, you can "flexibly" and "import" the interior of another UI framework,

1

We can insert a "framework" into the "internal" of another framework, and select the menu "Insert from XTML file ...", Here, the XTML file is a Tangram document you saved. This function will implement "extraction" of a document Framework Structure and then "insert" to the "region" you are currently designing ": select the file "XXXX" and press "open". We can see that, pay attention to the changes produced by the comparison before and after the design. In this way, you can build a comprehensive UI framework, this framework will be saved as an XML file with the extension "XTML", which is a key object of the Tangram system. We recommend that you use a text editor to open an XTML file and check the description in it. The form of each Tangram EXE file consists of a file extension named ". config "depends on the XML file. in TANGRAM, if the main framework is designed, a config file will be generated. The naming rule for this file is “appname.exe. config ", where appname is the executable file name, you can rename your Tangram EXE file, and then design its main framework UI and sub-document UI in the above way. MDI Customer zone CustomizationYou can create a subdirectory "Tangram/background" in the directory where Tangram EXE is located, create an HTML file in "background", and then open the config file of the application. The following information is displayed: <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> <Tangram Controlbarid> tangramlitecontrolbard. tangramlitebar.1 </tangramcontrolbarid> here you can modify the visible "information" of the main framework ", you can specify an MDI background by specifying an HTML file in the <backgroundtype = "html"> background.htm </background> node. This file must be in the "Tangram/background" directory. The effect is as follows: you can create your own personalized background area to increase the appeal of the software. Other technical information of TANGRAM, such as how to form customized "document templates" and VBA integration, will be introduced in future articles,