0
我已经创建了一个基本的Sencha触摸应用程序。它在我的网络浏览器上正常运行。JavaScript - 移动应用程序
但我不知道如何让它在我的手机上运行？ 有谁知道该怎么做？
感谢
DragPanel.as
package myComponents
{
import mx.containers.Panel;
import mx.core.UIComponent;
import mx.core.SpriteAsset;
import mx.events.FlexEvent;
import flash.events.MouseEvent;
import flash.events.Event;
public class DragPanel extends Panel
{
// Add the creationCOmplete event handler.
public function DragPanel()
{
super();
addEventListener(FlexEvent.CREATION_COMPLETE, creationCompleteHandler);
}
// Expose the title bar property for draggin and dropping.
[Bindable]
public var myTitleBar:UIComponent;
private function creationCompleteHandler(event:Event):void
{
myTitleBar = titleBar;
// Add the resizing event handler.
addEventListener(MouseEvent.MOUSE_DOWN, resizeHandler);
}
protected var minShape:SpriteAsset;
protected var restoreShape:SpriteAsset;
override protected function createChildren():void
{
super.createChildren();
// Create the SpriteAsset's for the min/restore icons and
// add the event handlers for them.
minShape = new SpriteAsset();
minShape.addEventListener(MouseEvent.MOUSE_DOWN, minPanelSizeHandler);
titleBar.addChild(minShape);
restoreShape = new SpriteAsset();
restoreShape.addEventListener(MouseEvent.MOUSE_DOWN, restorePanelSizeHandler);
titleBar.addChild(restoreShape);
}
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);
// Create invisible rectangle to increase the hit area of the min icon.
minShape.graphics.clear();
minShape.graphics.lineStyle(0, 0, 0);
minShape.graphics.beginFill(0xFFFFFF, 0.0);
minShape.graphics.drawRect(unscaledWidth - 35, 12, 8, 8);
// Draw min icon.
minShape.graphics.lineStyle(2);
minShape.graphics.beginFill(0xFFFFFF, 0.0);
minShape.graphics.drawRect(unscaledWidth - 35, 18, 8, 2);
// Draw restore icon.
restoreShape.graphics.clear();
restoreShape.graphics.lineStyle(2);
restoreShape.graphics.beginFill(0xFFFFFF, 0.0);
restoreShape.graphics.drawRect(unscaledWidth - 20, 12, 8, 8);
restoreShape.graphics.moveTo(unscaledWidth - 20, 15);
restoreShape.graphics.lineTo(unscaledWidth - 12, 15);
// Draw resize graphics if not minimzed.
graphics.clear()
if (isMinimized == false)
{
graphics.lineStyle(2);
graphics.moveTo(unscaledWidth - 6, unscaledHeight - 1)
graphics.curveTo(unscaledWidth - 3, unscaledHeight - 3, unscaledWidth - 1, unscaledHeight - 6);
graphics.moveTo(unscaledWidth - 6, unscaledHeight - 4)
graphics.curveTo(unscaledWidth - 5, unscaledHeight - 5, unscaledWidth - 4, unscaledHeight - 6);
}
}
private var myRestoreHeight:int;
private var isMinimized:Boolean = false;
// Minimize panel event handler.
private function minPanelSizeHandler(event:Event):void
{
if (isMinimized != true)
{
myRestoreHeight = height;
height = titleBar.height;
isMinimized = true;
// Don't allow resizing when in the minimized state.
removeEventListener(MouseEvent.MOUSE_DOWN, resizeHandler);
}
}
// Restore panel event handler.
private function restorePanelSizeHandler(event:Event):void
{
if (isMinimized == true)
{
height = myRestoreHeight;
isMinimized = false;
// Allow resizing in restored state.
addEventListener(MouseEvent.MOUSE_DOWN, resizeHandler);
}
}
// Define static constant for event type.
public static const RESIZE_CLICK:String = "resizeClick";
// Resize panel event handler.
public function resizeHandler(event:MouseEvent):void
{
// Determine if the mouse pointer is in the lower right 7x7 pixel
// area of the panel. Initiate the resize if so.
// Lower left corner of panel
var lowerLeftX:Number = x + width;
var lowerLeftY:Number = y + height;
// Upper left corner of 7x7 hit area
var upperLeftX:Number = lowerLeftX-7;
var upperLeftY:Number = lowerLeftY-7;
// Mouse positionin Canvas
var panelRelX:Number = event.localX + x;
var panelRelY:Number = event.localY + y;
// See if the mousedown is in the lower right 7x7 pixel area
// of the panel.
if (upperLeftX <= panelRelX && panelRelX <= lowerLeftX)
{
if (upperLeftY <= panelRelY && panelRelY <= lowerLeftY)
{
event.stopPropagation();
var rbEvent:MouseEvent = new MouseEvent(RESIZE_CLICK, true);
// Pass stage coords to so all calculations using global coordinates.
rbEvent.localX = event.stageX;
rbEvent.localY = event.stageY;
dispatchEvent(rbEvent);
}
}
}
}
}
RubberBandComp.as
package myComponents
{
import mx.core.UIComponent;
public class RubberBandComp extends UIComponent
{
public function RubberBandComp()
{
super();
}
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);
// Draw rubber band with a 1 pixel border, and a grey fill.
graphics.clear();
graphics.lineStyle(1);
graphics.beginFill(0xCCCCCC, 0.5);
graphics.drawRect(0, 0, unscaledWidth, unscaledHeight);
}
}
}
CanvasDD.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:myComp="myComponents.*"
creationComplete="creationCompleteHandler();">
<mx:Script>
<![CDATA[
import mx.managers.DragManager;
import mx.core.DragSource;
import mx.events.DragEvent;
import flash.events.MouseEvent;
import mx.containers.Canvas;
import mx.containers.Panel;
import myComponents.DragPanel;
// Define static constant for event type.
public static const RESIZE_CLICK:String = "resizeClick";
// Creation complete event handler adds the resizing event.
// resizeButtonClicked is a custom event type for this application.
protected function creationCompleteHandler():void
{
addEventListener(RESIZE_CLICK, resizeHandler);
}
//
// D&D event handlers.
//
// Creation complete handler for each panel to add the
// mouseMove event handler to the title bar.
// Clicking the mouse button, then moving the mouse on the title bar
// initiates the d&d operation.
private function myPanelCCHandler(event:Event):void
{
event.currentTarget.myTitleBar.addEventListener(MouseEvent.MOUSE_DOWN, tbMouseMoveHandler);
}
// Variables used to hold the mouse pointer's location in the title bar.
// Since the mouse pointer can be anywhere in the title bar, you have to
// compensate for it when you drop the panel.
public var xOff:Number;
public var yOff:Number;
// Function called by the canvas dragEnter event; enables dropping
private function doDragEnter(event:DragEvent):void
{
DragManager.acceptDragDrop(Canvas(event.target));
}
// Drag initiator event handler for
// the title bar's mouseMove event.
private function tbMouseMoveHandler(event:MouseEvent):void
{
var dragInitiator:Panel=Panel(event.currentTarget.parent);
var ds:DragSource = new DragSource();
ds.addData(event.currentTarget.parent, 'panel');
// Update the xOff and yOff variables to show the
// current mouse location in the Panel.
xOff = event.currentTarget.mouseX;
yOff = event.currentTarget.mouseY;
// Initiate d&d.
DragManager.doDrag(dragInitiator, ds, event);
}
// Function called by the Canvas dragDrop event;
// Sets the panel's position,
// "dropping" it in its new location.
private function doDragDrop(event:DragEvent):void
{
// Compensate for the mouse pointer's location in the title bar.
var tempX:int = event.currentTarget.mouseX - xOff;
event.dragInitiator.x = tempX;
var tempY:int = event.currentTarget.mouseY - yOff;
event.dragInitiator.y = tempY;
// Put the dragged panel on top of all other components.
v1.setChildIndex(Panel(event.dragInitiator), v1.numChildren-1);
}
//
// Resizing event handlers.
//
// Save panel being resized.
protected var resizingPanel:Panel;
// Global coordinates of lower left corner of panel.
protected var initX:Number;
protected var initY:Number;
// Resize area of panel clicked.
protected function resizeHandler(event:MouseEvent):void
{
resizingPanel = Panel(event.target);
initX = event.localX;
initY = event.localY;
// Place the rubber band over the panel.
rbComp.x = event.target.x;
rbComp.y = event.target.y;
rbComp.height = event.target.height;
rbComp.width = event.target.width;
// Make sure rubber band is on top of all other components.
v1.setChildIndex(rbComp, v1.numChildren-1);
rbComp.visible=true;
// Add event handlers so that the SystemManager handles
// the mouseMove and mouseUp events.
// Set useCapure flag to true to handle these events
// during the capture phase so no other component tries to handle them.
systemManager.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler, true);
systemManager.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler, true);
}
// Resizes the rubber band as the user moves the cursor
// with the mouse key down.
protected function mouseMoveHandler(event:MouseEvent):void
{
event.stopImmediatePropagation();
rbComp.height = rbComp.height + event.stageY - initY;
rbComp.width = rbComp.width + event.stageX - initX;
initX = event.stageX;
initY = event.stageY;
}
// Sizes the panel to the size of the rubber band when the
// user releases the mouse key.
// Also removes the event handlers from the SystemManager.
protected function mouseUpHandler(event:MouseEvent):void
{
event.stopImmediatePropagation();
// Use a minimum panel size of 150 x 50.
if (rbComp.height <= 50)
{
resizingPanel.height = 50;
}
else
{
resizingPanel.height = rbComp.height;
}
if (rbComp.width <= 150)
{
resizingPanel.width = 150;
}
else
{
resizingPanel.width = rbComp.width;
}
// Put the resized panel on top of all other components.
v1.setChildIndex(resizingPanel, v1.numChildren-1);
// Hide the rubber band until next time.
rbComp.x = 0;
rbComp.y = 0;
rbComp.height = 0;
rbComp.width = 0;
rbComp.visible = false;
systemManager.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler, true);
systemManager.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler, true);
}
]]>
</mx:Script>
<!-- The Canvas is the drag target -->
<mx:Canvas id="v1"
width="500" height="500"
borderStyle="solid"
backgroundColor="#DDDDDD"
dragEnter="doDragEnter(event);"
dragDrop="doDragDrop(event);">
<myComp:DragPanel id="dp1" title="Drag Panel 1"
paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"
x="19" y="10"
creationComplete="myPanelCCHandler(event);">
<mx:TextArea text="Location in Canvas: x = {String(dp1.x)}, and y = {String(dp1.y)}" width="90%"/>
</myComp:DragPanel>
<myComp:DragPanel id="dp2" title="Drag Panel 2"
paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"
x="149" y="149"
creationComplete="myPanelCCHandler(event);">
<mx:TextArea text="Location in Canvas: x = {String(dp2.x)}, and y = {String(dp2.y)}" width="90%"/>
</myComp:DragPanel>
<myComp:DragPanel id="dp3" title="Drag Panel 3"
paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"
x="241" y="283"
creationComplete="myPanelCCHandler(event);">
<mx:TextArea text="Location in Canvas: x = {String(dp3.x)}, and y = {String(dp3.y)}" width="90%"/>
</myComp:DragPanel>
<!--<myComp:RubberBandComp id="rbComp" x="0" y="0" height="0" width="0" visible="true"/>-->
</mx:Canvas>
</mx:Application>
我们需要*更多的信息来提供有效的答案。 –
什么是你需要的信息？我只是问'如何在移动设备上部署sencha touch应用程序'？ – tomjerry