Click here to Skip to main content
15,885,278 members
Articles / Desktop Programming / MFC

Develop MFC Doc/View Application Which Supports Any Number Document Template

Rate me:
Please Sign up or sign in to vote.
1.57/5 (3 votes)
2 Jun 20052 min read 36.5K   1.7K   26  
This article provides an introduction to TangramLittle, a C++ Framework for MFC and the .NET Framework. Knowledge in MFC and the .NET Framework is assumed.
/******************************************************************************/
/*DEFAULT STYLES FOR ALL SECTIONS**********************************************/
/******************************************************************************/
body						  { font-family: ����, Tahoma, MS Sans Serif, Arial, Sans Serif;
							    font-weight: normal;
				 			    font-size: 9pt;
								color: buttontext;
								background-color: buttonface;
							    margin-top: 0px;
		  		 			    margin-left: 0px;
							    margin-right: 0px;
							    margin-bottom: 0px;
								overflow: auto; }

a:link						  { color: captiontext;
				  				text-decoration: none; }
								
a:visited					  { color: captiontext;
				  				text-decoration: none; }
								
a:active					  { color: captiontext;
				  				text-decoration: none; }
								
a:hover						  { color: captiontext;
				  				text-decoration: underline; }
								
table						  { font-family: ����, Tahoma, MS Sans Serif, Arial, Sans Serif;
							    font-weight: normal;
				 			    font-size: 9pt;
							    color: buttontext;
								width: 100%; }
								
table.one					  { table-layout: fixed;
								height: 100%;
								width: 100%; }


/*DEFAULT STYLES FOR THE 'INTRODUCTION' TABLE**********************************/
/******************************************************************************/
table.two					  { table-layout: fixed;
								height: 79px;
								width: 100%;
								background-color: window; }
								
td.image					  { text-align: right; }
						
td.rule						  { background-color: window; }

h4.head						  { font-weight: bold;
				 			    font-size: 10.5pt;
				 			    color: windowtext;
								position: relative;
							    top: -.25em; }

p.subhead					  { color: windowtext;
							    position: relative;
							    top: -1.5em;
								left: 1em; }

img.smallest			  	  { background-color: activecaption; }


/*DEFAULT STYLES FOR THE 'NAVIGATION' TABLE************************************/
/******************************************************************************/
table.three					  { table-layout: fixed;
								height: 100%;
								width: 178px; }

td.three					  { background-color: activecaption; }

td.threeCustom				  { background-attachment: fixed;
								background-repeat: no-repeat;
								background-position: bottom left;
								width: 100%;
								filter: Alpha( Opacity=40, 
								FinishOpacity=100,
								Style=1, 
								StartX=35,  
								FinishX=100, 
								StartY=35, 
								FinishY=100); }
								
								
td.dottedline				  { background: url(Images/DottedHori.gif) repeat; }

table.linkTextSelected		  { font-weight: bold;
								line-height: 95%;
						 	    width: 157px;
								height: 30px;
								position: relative;
							    left: 10px;
							    z-index: 2; }

table.linkTextSelectedIndent  { font-weight: bold;
								line-height: 95%;
						 	    width: 148px;
								height: 30px;
								position: relative;
							    left: 18px;
							    z-index: 2; }

table.linkText				  { line-height: 95%;
								width: 157px;
								height: 30px;
								position: relative;
							    left: 10px;
						 	    z-index: 2; }

table.linkTextIndent		  { line-height: 95%;
								width: 148px;
								height: 30px;
								position: relative;
							    left: 18px;
							    z-index: 2; }

div.linkSelected			  { background-color: buttonface;
						 	    height: 30px;
							    width: 166px;
								position: relative;
							    left: 0px;
							    right: 0px;
							    z-index: 1; }

div.link					  { height: 30px;
							    width: 166px;
							    position: relative;
							    left: 0px;
							    right: 0px;
							    z-index: 1; }

div.vertLine				  { background: url(Images/DottedVert.gif) repeat;
								height: 125%;
						 	    width: 1px;
								position: relative;
								top: -12px;
							    left: -1px; }
				  
span						  { position: relative;
							    z-index: 3; }
				  
span.vertLine1				  { background: url(Images/DottedVert.gif) repeat;
								height: 100%;
						 	    width: 1px;
								position: absolute;
							    top: 0px;
				 			    left: -1px;
							    bottom: 0px;
							    z-index: 2; }
				  
span.horiLine1				  { height: 30px;
							    width: 166px;
								position: absolute;
							    top: -1px;
							    left: -1px;
							    bottom: -1px;
							    z-index: 2; }
								
span.activeLink				  { color: captiontext;
							    text-decoration: none;
							    cursor: hand;
								width: 100%;
								padding-top: 1px;
								padding-bottom: 1px;
								word-wrap: break-word; }
								
span.activeLink2			  { color: captiontext;
							    text-decoration: underline;
							    cursor: hand;
								width: 100%;
								padding-top: 1px;
								padding-bottom: 1px;
								word-wrap: break-word; }
								
span.inactiveLink			  { color: captiontext;
							    text-decoration: none;
							    cursor: default;
								width: 100%;
								padding-top: 1px;
								padding-bottom: 1px;
								filter:alpha(opacity=60);
								word-wrap: break-word; }


/*DEFAULT STYLES FOR THE ALL BUTTONS AND THE 'BUTTONS' TABLE*******************/
/******************************************************************************/
button						  { font-family: ����, Tahoma, MS Sans Serif, Arial, Sans Serif;
							    font-weight: normal;
				 			    font-size: 9pt;
								height: 23px;
								cursor: hand; }

.buttons				  	  { width: 80px; }


/*DEFAULT STYLES FOR THE 'CONTENT' TABLE***************************************/
/******************************************************************************/
table.fixedSize			 	  { table-layout: fixed; }
								
table.content			 	  { table-layout: fixed;
								height: 100%;
								width: 422px; }
				  
ol							  { font-family: ����, Tahoma, MS Sans Serif, Arial, Sans Serif;
							    font-weight: normal;
				 			    font-size: 9pt;
							    color: buttontext;
								margin-top: -1px;
								margin-bottom: 16px; }
				  
ul							  { font-family: ����, Tahoma, MS Sans Serif, Arial, Sans Serif;
							    font-weight: normal;
				 			    font-size: 9pt;
							    color: buttontext;
								margin-top: 3px;
								margin-bottom: 16px; }

li							  { font-family: ����, Tahoma, MS Sans Serif, Arial, Sans Serif;
							    font-weight: normal;
				 			    font-size: 9pt;
							    color: buttontext;
								position: relative;
								left: -15px;
								margin-bottom: 1px; }
								
span.itemTextTop			  { position: relative; }
								
span.itemText				  { position: relative;
								top: -3px; }
								
span.itemTextIndent			  { position: relative;
								left: 17px;
								top: -3px; }
								
span.sideBtnHidden			  { width: 100%;
								margin-top: 3px;
								margin-bottom: 0px; }
								
div.itemTextRadioB			  { position: relative;
								width: 170px;
								top: -19px;
								left: 25px;
								margin-bottom: -25px; }
								
div.itemTextRadioIndentA	  { position: relative;
								width: 165px;
								top: -17px;
								left: 30px;
								margin-bottom: -25px; }
								
div.itemTextRadioIndentB	  { position: relative;
								width: 153px;
								top: -17px;
								left: 42px;
								margin-bottom: -25px; }
								
div.itemTextCheckboxA		  { position: relative;
								width: 176px;
								top: -17px;
								left: 17px;
								margin-bottom: -23px; }
								
div.itemTextCheckboxB		  { position: relative;
								width: 176px;
								top: -18px;
								left: 25px;
								margin-bottom: -25px; }
								
div.itemTextCheckboxIndentB	  { position: relative;
								width: 159px;
								top: -16px;
								left: 42px;
								margin-bottom: -25px; }
									
div.inlineA					  {	position: relative;
								top: 4px;
								width: 100%;
								height: 1px;
								border-top: solid buttonshadow 1px; }
									
div.inlineB					  {	position: relative;
								top: -9px;
								margin-bottom: -20px;
								width: 100%;
								height: 1px; 
								border-top: solid threedhighlight 1px; }
								
input						  { font-family: ����, Tahoma, MS Sans Serif, Arial, Sans Serif;
							    font-weight: normal;
				 			    font-size: 9pt;
							    color: buttontext; }
								
select						  { font-family: ����, Tahoma, MS Sans Serif, Arial, Sans Serif;
							    font-weight: normal;
				 			    font-size: 9pt;
							    color: buttontext; }

.radio						  { position: relative;
								top: -2px;
								left: 4px; }
							
.radioIndent				  { margin-top: -2px;
								margin-left: 17px; }
							
.radioIndentA				  { margin-top: -2px;
								margin-left: 9px; }

.checkbox					  { position: relative;
								top: -1px;
								margin-left: -4px;
								z-index: 2; }

.checkboxA					  { position: relative;
								top: -2px;
								left: 4px; }
							
.checkboxIndent				  { margin-top: -1px;
								margin-left: 21px; }
								
.comment					  { width: 578px;
								position: relative;
								top: 5px;
								bottom: 6px; }
								
.commentA					  { width: 398px;
								position: relative;
								top: 5px;
								bottom: 6px; }
								
.commentB					  { width: 578px;
								position: relative;
								top: 3px;
								bottom: -3px; }
								
/****THIS IS THE STANDARD TABBED WIZARD, TWO COLUMN INPUT BOX******************/
input.sideBtn				  { width: 193px;
								position: relative;
								top: 3px; }
								
/****THIS IS THE STANDARD THREE COLUMN WIZARD INPUT BOX************************/
input.sideBtnThreeColumn	  { width: 185px;
								position: relative;
								top: 3px; }

/****THIS IS THE DEFAULT INPUT BOX IN NON-TABBED AND 2 COLUMN WIZARD***********/
input.itemTextTwoColumnLong	  { width: 283px;
								position: relative;
								top: 3px; }
								
/****THIS IS AN INPUT BOX INDENTED UNDER A CHECKBOX SECTION********************/
input.sideBtnIndent			  { width: 175px;
								position: relative;
								top: 3px;
								left: 18px;
								bottom: 6px; }
								
/****THIS INPUT BOX HAS IS INDENTED UNDER A HEADING AND RULE SECTION***********/
input.sideBtnB				  { width: 185px;
								position: relative;
								top: 3px;
								bottom: 6px; }
								
input.sideBtnBA				  { width: 175px;
								position: relative;
								top: 3px;
								bottom: 6px; }
								
/****THIS INPUT BOX HAS A "..." BUTTON BESIDE IT AND IT'S A TABBED WIZARD******/
input.sideBtn2				  { width: 169px;
								position: relative;
								top: 3px;
								bottom: 6px; }
								
/****"..." BUTTON IN A NON-TABBED, 3 COLUMN WIZARD*****************************/
input.sideBtn2ThreeColumn	  { width: 161px;
								position: relative;
								top: 3px;
								bottom: 6px; }

/****THIS IS AN INPUT BOX IN NON-TABBED AND 2 COLUMN WIZARD WITH A BUTTON******/
input.TwoColumnLongButton	  { width: 259px;
								position: relative;
								top: 3px;
								bottom: 6px; }
								
/****THIS INPUT BOX HAS A "..." BUTTON BESIDE IT AND IT'S UNDER A CHECKBOX*****/
input.sidebtn2Indent		  { width: 151px;
								position: relative;
								top: 3px;
								left: 18px;
								bottom: 6px; }
								
/****"..." BUTTON IS UNDER A SECTION IN A TWO COLUMN AND TABBED WIZARD*********/
input.sidebtn21				  { width: 161px;
								position: relative;
								top: 3px;
								bottom: 6px; }
								
/****"..." BUTTON IS UNDER A SECTION IN A THREE COLUMN AND TABBED WIZARD*********/
input.sidebtn21A			  { width: 153px;
								position: relative;
								top: 3px;
								bottom: 6px; }

/****THIS IS THE STANDARD TABBED WIZARD, TWO COLUMN SELECTION BOX**************/
select.sidebtn				  { width: 193px;
								position: relative;
								top: 4px;
								bottom: -3px; }
								
select.sidebtnNoWidth		  { position: relative;
								top: 4px;
								bottom: -3px; }
								
/****THIS IS THE STANDARD TABBED WIZARD, ONE COLUMN SELECTION BOX**************/
select.sideBtnOneCLong		  { width: 398px;
								position: relative;
								top: 3px; }
								
/****THIS IS THE STANDARD THREE COLUMN WIZARD INPUT BOX************************/
select.sideBtnThreeColumn	  { width: 185px;
								position: relative;
								top: 4px;
								bottom: -3px; }
								
/****THIS SELECTION BOX IS INDENTED UNDER A HEADING AND RULE SECTION***********/
select.sidebtnB				  { width: 164px;
								position: relative;
								top: 4px;
								left: 8px;
								bottom: -3px; }
								
/****THIS SELECTION BOX IS BELOW AND ASSOCIATED WITH A CHECKBOX****************/
select.sidebtn2				  { width: 164px;
								position: relative;
								top: 11px;
								left: 17px;
								bottom: -3px; }
								
select.sidebtnIndent		  { width: 175px;
								position: relative;
								top: 4px;
								left: 18px;
								bottom: -3px; }
								
/****THIS SELECTION BOX IS BELOW AND ASSOCIATED WITH A CHECKBOX AND HEADING****/
select.sidebtn2AShort		  { width: 168px;
								position: relative;
								top: 4px;
								left: 25px;
								bottom: -3px; }
								
/****THIS SELECTION BOX IS IN A TABBED, TWO COLUM WIZARD AND FOR < << > >>*****/
select.sidebtn3				  { width: 177px;
								position: relative;
								top: 4px;
								bottom: -3px; }

/****THIS IS A SELECTION BOX IN NON-TABBED AND 2 COLUMN WIZARD WITH A BUTTON***/
select.TwoColumnLongButton	  { width: 259px;
								position: relative;
								top: 4px;
								bottom: -3px; }

/****THIS IS THE DEFAULT OBJECT DROP DOWN IN 2 COLUMN AND TABBED WIZARD********/
object.itemtext				  { font-family: ����, Tahoma, MS Sans Serif, Arial, Sans Serif;
							    font-weight: normal;
				 			    font-size: 9pt;
							    color: buttontext;
								width: 193px;
								height: 2em;
								position: relative;
								top: 4px;
								margin-bottom: 0px; }
								
/****THIS IS THE DEFAULT OBJECT DROP DOWN IN 3 COLUMN AND NON-TABBED WIZARD****/
object.itemtextThreeColumn	  { font-family: ����, Tahoma, MS Sans Serif, Arial, Sans Serif;
							    font-weight: normal;
				 			    font-size: 9pt;
							    color: buttontext;
								width: 185px;
								height: 2em;
								position: relative;
								top: 4px;
								margin-bottom: 0px; }

/****THIS IS THE DEFAULT OBJECT DROP DOWN IN NON-TABBED AND 2 COLUMN WIZARD****/
object.itemTextTwoColumnLong{ font-family: ����, Tahoma, MS Sans Serif, Arial, Sans Serif;
							    font-weight: normal;
				 			    font-size: 9pt;
							    color: buttontext;
								width: 283px;
								height: 2em;
								position: relative;
								top: 4px;
								margin-bottom: 0px; }

.dropdowncombo				  { font-family: ����, Tahoma, MS Sans Serif, Arial, Sans Serif;
							    font-weight: normal;
				 			    font-size: 9pt;
							    color: buttontext; }

/****MOVES RADIO TEXT UP A BIT WHEN INLINE*************************************/
span.upABit					  { position: relative;
								top: -2px; }
				  
/****THIS DEFINES A STANDARD BUTTON IN THE CONTENT SECTION*********************/
.buttonClass			 	  { margin-top: 0px;
								margin-bottom: -6px; }
				  
/****THIS DEFINES ADD/REMOVE BUTTONS IN THE CONTENT SECTION********************/
.buttonClass2			 	  { width: 80px;
								margin-top: 7px; }
				  
/****THIS DEFINES A "..." BUTTON IN THE CONTENT SECTION OUT OF THE SPAN TAG****/
.buttonClass3			 	  { height: 19px;
								width: 20px;
								position: relative;
								left: 1px;
								top: 0px; }
				  
/****THIS DEFINES A "..." BUTTON IN THE CONTENT SECTION WITHIN THE SPAN TAG***/
.buttonClass3Custom		 	  { height: 19px;
								width: 20px;
								position: relative;
								left: 4px;
								top: 3px; }
				  
/****THIS DEFINES A "..." BUTTON IN THE CONTENT SECTION AND UNDER A CHECKBOX***/
.buttonClass3Indent		 	  { height: 19px;
								width: 20px;
								position: relative;
								top: 0px;
								left: 10px; }
								
/****THIS DEFINES A ">>" BUTTON IN THE CONTENT SECTION************************/
.buttonClass4			 	  { margin-bottom: 4px;
								width: 25px; }
								
/****THIS DEFINES ADD/REMOVE BUTTONS HORIZONTALLY IN THE CONTENT SECTION******/
.buttonClass5			 	  { position: relative;
								top: 4px;
								width: 80px; }
								
/****THIS SETS THE LEFT MARGIN FOR THE REMOVE BUTTON***************************/
#removeBtn				 	  { margin-left: 4px; }

/****THIS SETS THE LEFT MARGIN FOR INDENTED SECTION UNDER CHECKBOXES***********/
label.indent				  { margin-left: 18px; }

/****THIS SETS THE LEFT MARGIN FOR INDENTED SECTION UNDER CHECKBOXES***********/
label.indent2				  { margin-left: 25px; }

/****THIS MOVES CHECK BOX AND RADIO TEXT UP A BIT******************************/
label.upABit				  { position: relative;
								top: -2px; }

/****THIS BOLDS < << > >> BUTTONS**********************************************/
b.bigFont					  { font-size: 135%; }
								
/****THESE ARE CUSTOM VERTICAL SPACING ELEMENTS********************************/
p.spacer					  { margin-bottom: -28px; }
								
p.elementSpacer				  { margin-bottom: -12px; }
								
p.elementSpacer2			  { margin-bottom: -19px; }
								
p.elementSpacer3			  { margin-bottom: -3px; }
								
p.elementSpacer4			  { margin-bottom: 7px; }
								
p.elementSpacer5			  { margin-bottom: 5px; }
								
p.elementSpacer6			  { margin-bottom: -24px; }
								
p.elementSpacer7			  { margin-bottom: -11px; }
								
p.elementSpacer8			  { margin-bottom: -15px; }
								
p.elementSpacer9			  { margin-bottom: -7px; }
								
p.elementSpacer10			  { margin-bottom: 6px; }
								
p.elementSpacer11			  { margin-bottom: -1px; }
								
p.elementSpacer12			  { margin-bottom: -17px; }
								
p.elementSpacer13			  { margin-bottom: -23px; }
								
p.elementSpacer14			  { margin-bottom: -25px; }
								
p.elementSpacer15			  { margin-bottom: -13px; }
								
p.elementSpacer16			  { margin-bottom: -22px; }
								
p.elementSpacer17			  { margin-bottom: -32px; }
								
p.elementSpacer18			  { margin-bottom: -14px; }
								
p.elementSpacer19			  { margin-bottom: -10px; }
								
p.elementSpacer21			  { margin-bottom: -16px; }
								
p.elementSpacer22			  { margin-bottom: 3px; }

/*CUSTOM STYLES FOR THE 'CONTENT' FRAME****************************************/
/******************************************************************************/

	/*CUSTOM SPACING FOR MFC UI PAGE - SET UP FOR LOC PURPOSES*******************/
	/**************************************************************************/							
	p.elementSpacer20		  { margin-bottom: -13px; }
	
	/*CUSTOM STYLE FOR MFC UI PAGE - SET UP FOR LOC PURPOSES*******************/
	/**************************************************************************/							
	input.sideBtnLoc		  { width: 193px;
								position: relative;
								top: 3px; }

	/*PLACES SPACE BETWEEN ADD/REMOVE BUTTONS**********************************/
	/**************************************************************************/
	span.spacer8			  { width: 1px; }

	/*SETS TEXT BOX TO APPROPRIATE WIDTH IN MFCAppWiz**************************/
	/**************************************************************************/
	#CLASS_NAMES			  { width: 399px; }
	
	/*MOVES SELECT BOX UP IN CSharpIndexerWiz, Interface, Method,**************/
	/*InterfaceMethod, AND MemFunctionWiz**************************************/
	#PARAMETER_LIST			  { margin-top: -1px; }
	
	/*MOVES SELECT BOX UP IN CSharpMethodWiz***********************************/
	/**************************************************************************/
	#PARAMETER_LIST1		  { margin-top: -1px; }
	
	/*SETS SELECTION BOX WIDTH IN CSharpInterfaceMethod AND CSharpMethodWiz****/
	/**************************************************************************/
	#PARAMETER_MODIFIER		  { width: 58px; }
	
	/*SETS INDENT FOR ATLCustom AND MFCCustom Wizards**************************/
	/**************************************************************************/
	span.itemTextIndent1	  { position: relative;
								left: 8px;
								top: -3px; }
								
	/*SETS INDENT ON OBJECT FOR CSharpMethodWiz********************************/
	/**************************************************************************/
	span.customObjectIndent	  { margin-left: 8px; }
								
	/*SETS CUSTOM INDENT FOR SECTION IN CSHARPMETHODWIZ************************/
	/**************************************************************************/
	span.sidebtn			  { position: relative;
								top: 4px;
								bottom: -3px; }

	/*SETS CUSTOM INDENT FOR SECTION IN CSHARPMETHODWIZ************************/
	/**************************************************************************/
	span.itemtextspecial	  { position: relative;
								top: -20px;
								left: 9px;
								bottom: -3px; }

	/*SETS CUSTOM INDENT FOR SECTION IN CSHARPMETHODWIZ************************/
	/**************************************************************************/
	span.sidebtnspecial		  { position: relative;
								top: -2px;
								left: 53px;
								bottom: -3px; }

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here



Comments and Discussions