SmartDoc is an outline based document creation and publishing tool.

It is designed to make structured, understandable documents easily and quickly. SmartDoc can be useful for :

story writing,
FAQ creation,
novel planning,
speech-writing,
manual writing,
software support,
biographies, and
lesson planning.

The basic idea in SmartDoc is that you can include many separate notes within a single file. This means that you do not need to create several files - for most purposes it is enough to create only one file and hold all your notes inside it. With the addition of the tree-type notes, you now have a three-dimensional notebook: many notes within one file and a multi-level, nested pages within a single note.

]]> Architecture

SmartDoc is simple to use JavaScript library. It can be easily embeded to any website. It is built using GWT and document format is simple XML.

More design info coming ...

]]> Future of SmartDoc

Here are few thing which I want to see in SmartDoc :

Load document using inline XML
Support for different type of content inside <data> tag. Like Google's Doc/Spreadsheet, SmartFlow (what is that???), event driven forms and so on.
More CSS styles / styles switcher.
Online storage solution for user generated documents.
Redesign of Menus.

]]> SmartDoc documents are stored as XML file. It is very easy to compose and publish SmartDoc file.

Following is an example of SmartDoc document:

<smartdoc name="Example 1" id="Example_1226280853468" title="Welcome to SmartDoc">
	<smarttab title="First Tab" icon="icons/docs/file/2.gif">

		<node title="Default Node">
			<data><![CDATA[<P>The formatted text in default node.</P>]]></data>
		</node>

		<node title="Second Node" icon="icons/docs/file/1.gif">
			<data><![CDATA[<P>Second node text.</P>]]></data>

			<node title="Child Node">
				<data><![CDATA[<P>Child node text.</P>]]></data>
			</node>

		</node>
	</smarttab>
	<smarttab title="Second Tab" icon="icons/docs/file/11.gif">

		<node title="Default Node" icon="icons/docs/multimedia/7.gif">
			<data><![CDATA[Add text here..]]></data>
		</node>

	</smarttab>
</smartdoc>

]]> <smartdoc>

It is root level xml element. It has attributes to define document title and name.

XML Attributes :

name - The name of document.
title - Title to be display on SmartDoc viewer.
id - Internal unique id for document.

]]> <smarttab>

Defines a Tab in SmartDoc document.

XML attributes :

title - Title to be display on Tab.
icon - The Tab icon. Can be relative or absolute path to any icon file.

]]> <node>

Node represents the hierarchical structre in a Tab.

XML attributes :

title - Title to be display on node.
icon - The node icon. Can be relative or absolute path to any icon file.

XML element :

data : <data> element defines the content of Node. The default content type of data is HTML.

]]> <data>

data element defines the content for a node.

Currently, it supports only HTML format. In future more format will be supported.

XML attributes :

Curently No attribute is supported.

]]> Embedding SmartDoc in HTML page :

<html>
<head>
  <title>SmartDoc</title>
  
  <meta name='gwt:module' content='com.sheelapps.smartdoc.SmartDoc'/>
  
  <link type="text/css" rel="stylesheet" href="http://sheelapps.com/smartdoc/default.css">
  
  <script language="javascript" src="http://sheelapps.com/smartdoc/smartdoc.nocache.js"></script>
  <script>
  /*
  Callback method will be called after SmartDoc library is loaded.
  use this method to call SmartDoc API methods.
  */

  function _onSmartDocLoad () {
    /*
     A) Create a new document inside a Div container.
    */

SmartDoc.newDocument("sd1");

    /*
           B) Load an existing document inside div container.
     The URL of XML should be relative to your site. Otherwise you will see Same Site Origin Policy exception.
     Other option is to host SmartDoc XML and SmartDoc's library on same site.
    */

SmartDoc.load("smartdoc.xml","sd2");

    /*
      C) Load an existing document inside container in edit mode.
    */

// SmartDoc.load("smartdoc.xml","sd3","edit");

     /*
     D) Load an existing document and attch to body.
          Use this option to load Document in full page size.
   */

// SmartDoc.load("smartdoc.xml");

}
</script>

</head>

<h2>A) New SmartDoc Document</h2>
   
  <div id="sd1" style="height:400px;width:95%"></div>

<h2>B) View SmartDoc Document [smartdoc.xml] (inside div container) </h2>
<div id="sd2" style="height:400px;width:95%"></div>

</body>
</html>

]]> Creating New Document

SmartDoc.newDocument([div-id])

The newDocument() function will create a default document with single tab and a node.

div-id - Optional. The div id where SmartDoc will be added in a page.

]]> Viewing a document

SmartDoc.load(<doc-url>,[div-id],[mode],[css-suffix])

where,

doc-url - Required. URL of SmartDoc document. It should be on same server as host page otherwise browser will throw Same Site Policy error.
div-id - Optional. The div id where SmartDoc will be added in a page.
mode : Optional. Mode ("view" or "edit") when document will be loaded. Default is "view".
css-suffix : Optional. Use SmartDoc's CSS with given suffix to decorate SmartDoc Tool. Useful in case if you want to include multiple doc in a page but with different look and feel.

]]> SmartDoc CSS

You can define look an feel of SmartDoc tool using CSS. Following is /smartdoc/default.css hosted at sheelapps.com. More styles will be available soon.

.smartdoc {
border-color: #95B9C7;
border-style: solid;
border-width: 1px 1px 1px 1px;
}

/* The header section which contains menu and title */
.smartdoc-header {
font: bold 14px Verdana;
text-align: center;
padding : 2px;
background: url("/smartdoc/images/shade.gif");
}

/* The split panel containing tree and node's content */
.smartdoc-HSPanel {

}

/* The split panel's splitter */
.smartdoc-HSPanel .hsplitter {
background: #95B9C7;
background-color: #95B9C7;
border-width : 1px;
/* Pretty much everything */
cursor : e-resize;

/* IE6, IE7, FF2, Safari Win */
cursor : col-resize;
}

/* A top level panel containing Tab and TabBottom */
.smartdoc-tabpanel {
}

.smartdoc-tab .gwt-TabBarFirst {
display : none;
}

.smartdoc-tab .gwt-TabBarRest {
background : #CFECEC;
background: url("/smartdoc/images/shade.gif");
border-top : 1px solid #95B9C7;
}

.smartdoc-tab .gwt-TabBarItem {
padding: 3px 6px 3px 6px;
border: 1px solid #95B9C7;
background: #CFECEC;
background-color: #CFECEC;
cursor: hand;
color : #000000;
font: bold 14px Verdana;
background: url("/smartdoc/images/shade.gif");

}
.smartdoc-tab .gwt-TabBarItem-selected {
padding: 3px 6px 3px 6px;
background: #FFFFFF;
color : #000000;
border-bottom : none;
font: bold 16px Verdana;
background: url("/smartdoc/images/shadeactive.gif");
}

.smartdoc-tab .gwt-TabPanelBottom {
height: 100%;
width: 100%;
}

/* The tree in a Tab */
.smartdoc-tree {

}
.smartdoc-tree .gwt-TreeItem {
cursor: hand;
cursor: pointer;
}
.smartdoc-tree .gwt-TreeItem-selected {
color : #000000;
background: #CFECEC;
background-color: #CFECEC;
font: bold ;
}
/* The node content */
.smartdoc-data {
padding : 1px;
}

.smartdoc-menu {
cursor: hand;
cursor: pointer;
background: #FFFFFF;
border : 1px solid #95B9C7;

}

.smartdoc-menu .gwt-MenuItem {
white-space: nowrap ;
font: menu ;
}

.smartdoc-menu .gwt-MenuItem-disabled {
white-space: nowrap ;
font: menu ;
cursor : default;
color : #C1C1C1;
}

.smartdoc-menu .gwt-MenuItem-selected {
background-color: #E1E1E1;
}

.smartdoc-menu .gwt-MenuItemSeparator .menuSeparatorInner {
height: 1px;
padding: 0px;
border: 0px;
border-top: 1px solid #777777;
background: #ddddee;
overflow: hidden;

}

.smartdoc-dialog , .smartdoc-input-dialog {
border : 1px solid #95B9C7;
background-color: #FFFFFF;
}

.smartdoc-dialog .dialogContent, .smartdoc-input-dialog .dialogContent {
padding: 0px;
height : 100%;
}

.smartdoc-dialog .Caption , .smartdoc-dialog .dialogTopCenter ,
.smartdoc-input-dialog .Caption , .smartdoc-input-dialog .dialogTopCenter
{
padding: 0px;
cursor: hand;
cursor: pointer;
height : 1%;
background-color: #CFECEC;
}
]]> SmartDoc By Sheel Khanna

Visit http:// sheelapps.com/ for more information.

]]> License

It is free so use it.

]]>