Location: PHPKode > scripts > Sigma visual ajax UI builder > sigma-visual-ajax-ui-builder/manual/design-tool-bar.html
<html><head>

   <title>Sigma Visual Builder Manual</title>
	<meta content="Sigmasoft" name="AUTHOR"/>
	
	<link rel="stylesheet" type="text/css" href="css/doc.css" media="screen"/>
    <meta content="text/html; charset=ISO-8859-1" http-equiv="Content-Type"/>
</head>
    <body style="padding: 20px 30px 20px 30px; background-color: rgb(204, 204, 153);">
	<table cellspacing="10" border="0" width="100%">
    
        <tbody>
            <tr>
                                <td align="left" class="highlight">Sigma Visual Manual </td>
                                
                                <td align="right"><img src="img/logo.gif" alt="sigmasoft logo" width="116" height="44"/></td>
            </tr>
        </tbody>
</table>
	
	
	<table cellspacing="10" cellpadding="20" border="0" width="100%">
      <tbody>
        <tr style="background-color: rgb(255, 255, 255);">
          <td valign="top" style="width: 30%; height: 768px;"><h2>
  Contents
</h2>
           
            <UL class="index">
<LI><A HREF="index.html">Welcome to SigmaVisual</A>
	<LI>How to
	<UL>
		<LI><A HREF="how-to-install.html">How to install</A>
		<LI><A HREF="how-to-add-component-to-my-web-page.html">How to add component to my web page</A>
		<LI><A HREF="how-to-set-component-properties.html">How to set component properties</A>
		<LI><A HREF="how-to-add-new-items-to-a-menu-tab-stack.html">How to add new items to a menu/tab/stack</A>
		<LI><A HREF="how-to-copy-components.html">How copy components</A>
		<LI><A HREF="how-to-remove-components.html">How to remove components</A>
		<LI><A HREF="how-to-move-components.html">How to move components</A>
		<LI><A HREF="how-to-resize-components.html">How to resize components</A>
		<LI><A HREF="how-to-change-component-parent-container.html">How to change components'
            parent container</A>
		<LI><A HREF="how-to-customize-appearance.html">How to customize appearance</A>
		<LI><A HREF="how-to-add-a-event-handler.html">How to add an event handler</A>
		<LI><A HREF="how-to-know-property-event-meaning.html">How to know property/event meaning</A>
		<LI><A HREF="how-to-preview-execute-a-web-page.html">How to preview/execute a web page</A>
		<LI><A HREF="how-to-make-web-application-standalone.html">How to make web application standalone</A>
		<LI><A HREF="how-to-change-theme-of-my-application.html">How to change theme of my application</A>
		<LI><A HREF="how-to-make-app-fit-different-resolutions.html">How to make app fit different resolutions </A>
	</UL>
	<LI>Reference
	<UL>
		<LI><A HREF="sigma-visual-overview.html">SigmaVisual Overview</A>
		<LI><A HREF="main-buttons.html">Main Buttons</A>
		<LI>Design View
		<UL>
			<LI><A HREF="design-tool-bar.html">Design Tool Bar</A>
			<LI><A HREF="structure-dropdown-tree.html">Structure Dropdown Tree</A>
			<LI><A HREF="tool-box.html">Component Gallery</A>
			<LI><A HREF="component-config-window.html">Object Inspector</A>
		</UL>
		<LI><A HREF="normal-view.html">Normal View</A>
		<LI><A HREF="structure-view.html">Structure View</A>
	</UL></UL>
	</td>
		  <td valign="top"><h1><B>Design Tool Bar</B></h1>
		    
		    <P>Design tool bar looks like following figure.</P>
		    <P align="center"><img src="img/toolbar-all.png" alt="design tool bar" width="601" height="26"> </P>
		    <h2>Select and move component(s)</h2>
		    <P>Before you use design view tool buttons, you need to learn more about how to select one or more components on your page.</P>
		    <h3 >Select one component</h3>
		    <P>Click on the component to select it. If you click another component, this component will be un-selected.</P>
		    <h3 >Select more than one component</h3>
		    <P>Click on the components with [shift] key pressed. If you want select all the components within a rectangle area, just drag your mouse to draw a rectangle.</P>
		    <h3 >Move component(s)</h3>
		    <P>You can drag selected component(s) to anywhere. You can move selected component(s) a little by pressing [up key], [down key], [left key] and [right key].&nbsp;</P>
		   
		    <h2>Part One </h2>
		    <P align="center"><img src="img/toolbar1.png" alt="tool bar part one" width="134" height="26"></P>
		    <h3>Serialize to JS code</h3>
		    <P>This command enables you to serialize all selected component(s) to JavaScript source code.</P>
		    <h3>Serialize to JSON code</h3>
		    <P>This command enables you to serialize all selected component(s) to JSON code.</P>
		    
		    <h2>Part Two </h2>
		    <P align="center"><img src="img/toolbar2.png" alt="tool bar part two" width="238" height="26"></P>
		    <h3 >Align to left</h3>
		    <P>This command enables you to align the left of all selected components(s).</P>
		    <h3 >Align to center</h3>
		    <P>This command enables you to align the center of all selected components(s).</P>
		    <h3 >Align to right</h3>
		    <P>This command enables you to align the right of all selected components(s).</P>
		    
		    <h3 >Align to top&nbsp;</h3>
		    <P>This command enables you to align the top of all selected components(s).</P>
		    <h3 >Align to middle</h3>
		    <P>This command enables you to align the middle of all selected components(s).</P>
		    <h3 >Align to bottom</h3>
		    <P>This command enables you to align the bottom of all selected components(s).</P>
		   
		    <h3 >Same width</h3>
		    <P>This command enables you to make all selected components(s) in same width.</P>
		    <h3 >Same width and height</h3>
		    <P>This command enables you to make all selected components(s) in same size.</P>
		    <h3 >Same height</h3>
		    <P>This command enables you to make all selected components(s) in same height.</P>
		    <h2>&nbsp;</h2>
		    <h2>Part Three </h2>
		    <P align="center" ><img src="img/toolbar3.png" alt="tool bar part three" width="181" height="26"></P>
		    <h3 >To top layer&nbsp;</h3>
		    <P>This command enable you to let all selected components(s) go up and no components overlay them.</P>
		    <h3 >To bottom layer</h3>
		    <P>This command enable you to let all selected components(s) go down and every components else overlay them.</P>
		    <h3 >Set position to grid</h3>
		    <P>If you click this button, all the selected component(s) will be moved a little and snapped at by background grid dots.</P>
		    <h3 >Set size to grid</h3>
		    <P>Click this button to enlarge or reduce all the selected component(s) to make components the same size as rectangles of backgroud grid. </P>
		    
		    <h3 >Clone selected component(s) </h3>
		    <P>Click this button to copy selected component(s). Note that those copies overlay old ones.</P>
		    <h3 >Delete</h3>
		    <P>Click this button to remove selected component(s). </P>		    <h1>&nbsp;</h1>
	      </td>
        </tr>
      </tbody>
    </table>
   <table style="margin:10px 0px 0px 0px;" border="0" cellpadding="0" cellspacing="0" width="100%">
        <tbody>
            <tr>
                                
                                <td valign="top">
                                    <div align="center" class="copyright" >All contents are (c) Copyright 2005 - 2008, Sigma Software
                                        Inc. All rights Reserved</div></td>
            </tr>
        </tbody>
</table>
</body></html>
Return current item: Sigma visual ajax UI builder