Download TangramLite(5M)

What are DeskBands?

There are 4 types of DeskBands. A Communications Band which sits at the bottom of an instance of IE. An Information Band sits on the left hand side of an instance of IE, like the search bar that allows you to search for files or folders on a hard drive. The other types we don’t discuss here and you can find resource in msdn if you like.

What is TangramLite?

TangramLite is an open source software developing framework based on MFC/ATL. It divides software system into three tiers—application, mainframe, doc/View. Each tier is self-existent so as to gain maximal reuse of code. The mainframe and doc/View can be used in languages running on Windows OS like VC VB and so on. By using COM, we organize three tiers into a system. TangramLite pays attention to document, because document carries data of business and stores data to determine UI behavior. The executive file of an application is just an entry of system and it select a mainframe by configure file. Mainframe add document template by reading xml files in special directory.

Installation

You should download the setup file first: http://sourceforge.net/projects/tangramlite

Steps

1. Run setup and install tangramlite on you disk
2. Config VS2005 Environment(C++): (X is OS disk)

        Include: X:\Program Files\TangramLite\TangramLiteLib\include

        Lib: X:\Program Files\TangramLite\TangramLiteLib\lib

       Src: X:\Program Files\TangramLite\TangramLiteLib\src

Run Examples

Start IE, Click the “View” menu item, go down to the “Explorer Bar” menu item. You can see menu items with “tangramlite” prefix.

Agenda

How to implement your DeskBand？

Using wizard create a DeskBand project

MyIEBand Is Not Listed In The Menu Items

Config the DeskBand using exist document

Change document behavior using tangramlite application

How to implement your document？

Using wizard create a document project

Config the document type

Create a document for DeskBand

Config the DeskBand

How to implement your mainframe？

Using wizard create a mainframe project

Config the application to load mainframe

How to implement you application？

Using wizard create a application project

Using wizard create a DeskBand project

Start VS2005, using TangramLiteIEExtension creates a project:

Build the solution, Start an IE instance. You can see two new menu items (“MyIEBand TangramLiteVBar Class” and “MyIEBand TangramLiteHBar Class”) added at “View->Explorer Bar”. Select the “MyIEBand TangramLiteVBar Class” to see new created DeskBand:

MyIEBand Is Not Listed In The Menu Items

1. Make sure that you are looking at the correct list of menu items for the type of band you created.
2. Also remember that the explorer.exe process caches the list of Explorer Bars and Toolbars on first access of the menu for the life of your Windows session, not IE session. So if you have accessed the menu during this session you will either need to log off and log back on or kill the explorer.exe process.

Config the DeskBand using exist document

We have prepared some documents created by tangramlite application. They are copied to you disk when you install tangramlite. We can use this document to config the new DeskBar.

There is a directory named “MyIEBand” at “OS:\Program Files\TangramUniverseDocument”. Copy “OS:\Program Files\TangramUniverseDocument\TangramLiteExplorerBarD\VBand” to “OS:\Program Files\TangramUniverseDocument\MyIEBand”. So “MyIEBand VBand” will load the document when you start the IE next time:

Change document behavior using tangramlite application

If you store data in document, you can change data using application. Here we didn’t store data in example but we stored the layout. So we change the layout using a tangramlite application installed. Run “start menu->tangramlite->tangramlite1(debug)” which is a application created using tangramlite application wizard. Open “TangramLiteVFormD1.Tangram”, change the splitter and store the document. Restart an IE instance, you can see the change:

Using wizard create a document project

Now you have your own DeskBand, but use prepared document. You may need you own document to do your business. Let me tell you how.

Start VS2005, using TangramLite ComDocument creates a project:

Edit “MyDocumentDoc.h” add a CString type member:

CString m_strHello;

Initialize strHello in construction:

m_strHello = _T("Hello, This is My Document!");

Show the CString in View:

void CMyDocumentView::OnDraw(CDC* pDC)

{

CMyDocumentDoc* pDoc = GetDocument();

ASSERT_VALID(pDoc);

if (!pDoc)

return;

// TODO: add draw code for native data here

pDC->TextOut(0, 0, pDoc->m_strHello);

}

Build the solution and you create your document type component.

Config the document type

Now we have a new document type, we should create a document with this document type. We have installed tangramlite applications, we can using these applications do this stuff. We create a xml file named “MyDocument.xml” at “OS:\Program Files\TangramUniverseDocument\Tangram Team\TangramLiteD\TangramLiteMainFrameD\Document Template” so that tangramlite application can load the document template component. Edit the file:

<?xml version="1.0" encoding="utf-8" ?>

<Tangram

DocViewID="MyDocument.DocTemplate.1"

DocObjID = ""

ExtDocObjID = "">

</Tangram>

Create a document for DeskBand

Run “start menu->tangramlite->tangramlite1(debug)” to create a document for DeskBand. Create a file based MyDocument template:

Save the document to “OS:\Program Files\TangramUniverseDocument\MyIEBand\Hband” as “MyDocument1.Tangram”.

Config the DeskBand

Create a xml file at “OS:\Program Files\TangramUniverseDocument\MyIEBand\Hband” named “TangramHBar”. When Hbar loading, it will iterate xml files in the special directory. Edit the xml file to specify the document template for DeskBand:

<?xml version="1.0" encoding="utf-8" ?>

<Tangram

BandFile="MyDocument1.Tangram"

TabCaption = "MyDocument1"

IconFile = "vbasdk.ico">

</Tangram>

Then we restart an IE instance, you can see the change:

Using wizard create a mainframe project

OK, now you have had the ability to extend IE. You may find when you create a document, it depends on exist mainframe to load the template. I’ll tell you how to create you own mainframe.

Start VS2005, using TangramLite ComMainFrame creates a project:

Build the solution and you create your mainframe component.

Config the application to load mainframe

We should modify the application configure to specify mainframe to be loaded. Edit the file ” OS:\Program Files\TangramLite\debug\ TangramLiteD.exe.config”, modify:

<Tangram

MainAppType = "com"

MainAssemblyLib = "TangramLiteMainFrameD"

MainAssemblyCategory= "TangramLiteMainFrameD"

MainFrameAssembly = "TangramLiteMainFrameD.Application.1"

ExternalAppAssembly = ""

VBAComponent= ""

DotNetComponent = ""

WorkSpaceGUID = "{<st1:chmetcnv tcsc="0" numbertype="1" negative="False" hasspace="False" sourcevalue="9905" unitname="F" w:st="on">9905F281<st1:chmetcnv tcsc="0" numbertype="1" negative="True" hasspace="False" sourcevalue="9" unitname="C" w:st="on">-9C5D-440b-89AF-EE61D3FA<st1:chmetcnv tcsc="0" numbertype="1" negative="False" hasspace="False" sourcevalue="548" unitname="a" w:st="on">548A}"

>

to

<Tangram

MainAppType = "com"

MainAssemblyLib = "MyMainFrame"

MainAssemblyCategory= "MyMainFrame"

MainFrameAssembly = "MyMainFrame.Application.1"

ExternalAppAssembly = ""

VBAComponent= ""

DotNetComponent = ""

WorkSpaceGUID = "{<st1:chmetcnv tcsc="0" numbertype="1" negative="False" hasspace="False" sourcevalue="9905" unitname="F" w:st="on">9905F281<st1:chmetcnv tcsc="0" numbertype="1" negative="True" hasspace="False" sourcevalue="9" unitname="C" w:st="on">-9C5D-440b-89AF-EE61D3FA<st1:chmetcnv tcsc="0" numbertype="1" negative="False" hasspace="False" sourcevalue="548" unitname="a" w:st="on">548A}"

>

Run “start menu->tangramlite->tangramlite1(debug)”, you can see the application load mainframe you created:

Using wizard create a application project

Let’s go to the final step to finish tangramlite tutorial--Create you tangramlite application.

Start VS2005, using TangramLite ComMainFrame creates a project:

Build the solution and you create your application. Then you can config “MyApp.exe.config” to specify mainframe. Next you can add document template for mainframe by xml file. The application produces documents which can be loaded by IE through xml file. Actually, the document can be used in other languages which support COM such as VB Delphi PowerBuilder and so on.

Summary

We create a general DeskBand as a container of document or mainframe, and load documents by xml file in special directory. Each document can get IWebBrowser2 interface of the web browser, so it can drive web browser and detect web browser events. In fact, the DeskBand is bridge between document and IE.