Вынести часть приложения в компонент

[lighto]

Вот код файла

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
	xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="absolute" 
    width="100%" height="100%" 
    viewSourceURL="srcview/index.html"
    backgroundColor="#FFFFFF" 
    xmlns:myComp="myComponents.*"
 
    >
	<mx:Canvas id="w1" 
        width="100%" height="100%"  
        borderStyle="solid" 
        backgroundColor="#DDDDDD"
        dragEnter="doDragEnter(event);" 
        dragDrop="doDragDrop(event);">
 
 
<myComp:RubberBandComp id="rbComp" x="0" y="0" height="0" width="0" visible="false"/>
 
	<mx:Panel id="v1"
	  	title="Карта" 
	  	top="10" bottom="0" left="10" width="100%">
 
	    <mx:UIComponent id="mapContainer" 
	        initialize="onContinerInitialize(event);" 
	        resize="onContainerResize(event)" 
	        width="100%" height="100%"/>
 
 
	  	<mx:ControlBar>
 
	  		<mx:Label text="Тип карты" />
	  		<mx:ComboBox id="mapType" 
	  			labelField="label" 
	  			change="onChangeMapType()" 
	  			labelFunction="labelFunction" />
	  		<mx:Button label="Измерить" id="but" click=" edit.selected=true; pane.visible=true; but.visible=false; but1.visible=true;"/>
 
	  	</mx:ControlBar>
 
	</mx:Panel>
 
 
 
	<myComp:DragPanel  title="Измерение" id="pane" x="935" y="10" width="25%"
		creationComplete="myPanelCCHandler(event);" visible="false"
		  >	
	<mx:Label id="labelgrid" text="123"/>
			<mx:RadioButtonGroup id="rbg"/>
	<mx:RadioButtonGroup id="radiogroup1"/>
	<mx:VBox>
		<mx:RadioButton id="edit" label="Добавление маркеров" group="{rbg}"/>
		<mx:RadioButton visible="false" id="view" selected="true" label="Просмотр" group="{rbg}"/>
	</mx:VBox>
	<mx:HBox>
		<mx:Button label="Приблизить" click="zoomInEvent(event)" />
		<mx:Button label="Отдалить" click="zoomOutEvent(event)" />
	</mx:HBox>
	<mx:HBox>
	<mx:Button label="Очистить" click="clear(event)" />
	<mx:Button label="Отменить" click="undo(event)" />
	</mx:HBox>
	<mx:DataGrid id="grid1" dataProvider="{dataProvider1}" itemClick="showPolyLine(event);" width="307" height="374">
		<mx:columns>
 
		<mx:DataGridColumn dataField="2точки" width="50">
				<mx:itemRenderer>
				                 <mx:Component>
				                     <mx:Label text="{data.name+1}-{data.name+2}"/>
				                 </mx:Component>
				             	</mx:itemRenderer>
		             </mx:DataGridColumn>
		           <mx:DataGridColumn id="s" dataField="Начало">
		           <mx:itemRenderer>
		                <mx:Component>
		                    <mx:Label text='{data.start}'/>
		                </mx:Component>
		            	</mx:itemRenderer>
		           </mx:DataGridColumn>
		   <mx:DataGridColumn id="e" dataField="Конец">
		   <mx:itemRenderer>
		        <mx:Component>
		            <mx:Label text='{data.end}'/>
		        </mx:Component>
		    	</mx:itemRenderer>
		   </mx:DataGridColumn>
 
		   <mx:DataGridColumn dataField="М">
		   <mx:itemRenderer>
		        <mx:Component>
		            <mx:Label text='{data.distance*1000}'/>
		        </mx:Component>
		    	</mx:itemRenderer>
		   </mx:DataGridColumn>
 
			<mx:DataGridColumn id="ne" dataField="КМ">
				<mx:itemRenderer>
				     <mx:Component>
				         <mx:Label text='{data.distance}'/>
				     </mx:Component>
				 	</mx:itemRenderer>
			  </mx:DataGridColumn>
		   </mx:columns>
	</mx:DataGrid>
	<mx:Label id="total"/>
	<mx:Label id="total1"/>
	<mx:Button label="Закрыть" id="but1" click=" clear(event); cleramap(); view.selected=true; pane.visible=false; but1.visible=false; but.visible=true;"/>
	<mx:RadioButton visible="false" selected="true" id="mr" x="29" y="327" label="Маркеры" groupName="radiogroup1"/>
	<mx:RadioButton visible="false" id="rs" x="29" y="353" label="Растояние" groupName="radiogroup1"/>
 
		<mx:RadioButtonGroup change="setUnits(event)" id="unit"/>
 
	</myComp:DragPanel>
 
</mx:Canvas>
</mx:Application>

Как мне вынести вот эту часть в отдельный файлик и подцеплять в нужном месте?

<myComp:DragPanel  title="Измерение" id="pane" x="935" y="10" width="25%"
		creationComplete="myPanelCCHandler(event);" visible="false"
		  >	
	<mx:Label id="labelgrid" text="123"/>
			<mx:RadioButtonGroup id="rbg"/>
	<mx:RadioButtonGroup id="radiogroup1"/>
	<mx:VBox>
		<mx:RadioButton id="edit" label="Добавление маркеров" group="{rbg}"/>
		<mx:RadioButton visible="false" id="view" selected="true" label="Просмотр" group="{rbg}"/>
	</mx:VBox>
	<mx:HBox>
		<mx:Button label="Приблизить" click="zoomInEvent(event)" />
		<mx:Button label="Отдалить" click="zoomOutEvent(event)" />
	</mx:HBox>
	<mx:HBox>
	<mx:Button label="Очистить" click="clear(event)" />
	<mx:Button label="Отменить" click="undo(event)" />
	</mx:HBox>
	<mx:DataGrid id="grid1" dataProvider="{dataProvider1}" itemClick="showPolyLine(event);" width="307" height="374">
		<mx:columns>
 
		<mx:DataGridColumn dataField="2точки" width="50">
				<mx:itemRenderer>
				                 <mx:Component>
				                     <mx:Label text="{data.name+1}-{data.name+2}"/>
				                 </mx:Component>
				             	</mx:itemRenderer>
		             </mx:DataGridColumn>
		           <mx:DataGridColumn id="s" dataField="Начало">
		           <mx:itemRenderer>
		                <mx:Component>
		                    <mx:Label text='{data.start}'/>
		                </mx:Component>
		            	</mx:itemRenderer>
		           </mx:DataGridColumn>
		   <mx:DataGridColumn id="e" dataField="Конец">
		   <mx:itemRenderer>
		        <mx:Component>
		            <mx:Label text='{data.end}'/>
		        </mx:Component>
		    	</mx:itemRenderer>
		   </mx:DataGridColumn>
 
		   <mx:DataGridColumn dataField="М">
		   <mx:itemRenderer>
		        <mx:Component>
		            <mx:Label text='{data.distance*1000}'/>
		        </mx:Component>
		    	</mx:itemRenderer>
		   </mx:DataGridColumn>
 
			<mx:DataGridColumn id="ne" dataField="КМ">
				<mx:itemRenderer>
				     <mx:Component>
				         <mx:Label text='{data.distance}'/>
				     </mx:Component>
				 	</mx:itemRenderer>
			  </mx:DataGridColumn>
		   </mx:columns>
	</mx:DataGrid>
	<mx:Label id="total"/>
	<mx:Label id="total1"/>
	<mx:Button label="Закрыть" id="but1" click=" clear(event); cleramap(); view.selected=true; pane.visible=false; but1.visible=false; but.visible=true;"/>
	<mx:RadioButton visible="false" selected="true" id="mr" x="29" y="327" label="Маркеры" groupName="radiogroup1"/>
	<mx:RadioButton visible="false" id="rs" x="29" y="353" label="Растояние" groupName="radiogroup1"/>
 
		<mx:RadioButtonGroup change="setUnits(event)" id="unit"/>
 
	</myComp:DragPanel>

Добавлено через 17 часов 54 минуты
Пожалуйста-пожалуйста помогите

Добавлено через 18 часов 22 минуты
Ну подскажите