Flex Mobile: Как просматривать на экране?

Question

Я хотел бы знать, если это возможно ввиду кожи для моего Flex мобильных применение:

Моего ActivityView.as

public class ActivityView extends View 

Моего ActivityViewSkin.mxml (Это кожа ассоциируется)

<?xml version="1.0" encoding="utf-8"?> 
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark"> 

<fx:Metadata> 
    [HostComponent("com.corp.views.activity.ActivityView")] 
    ... 

Это хороший способ для мобильной разработки?

И как я могу использовать это в эту кожу:

<s:navigationContent> 

Спасибо вам большое!

Anthony

Answer 1

no. Spark skin не оптимизирован для мобильных устройств. вы должны использовать MobileSkin. (Только сценарий действий).

Answer 2

Я искал аналогичную информацию, однако все, что я могу сделать из документации и блогов, подразумевает, что MobileSkin - это то, что вы делаете для скинов на уровне компонентов (например, кнопки, списки, itemRenderers и т. Д.), Вещи, которые будут использоваться много раз в приложении.

Другая причина, по которой вам кажется, что вы можете уйти от скиннинга вашего представления через MXML, заключается в том, что все просмотры, которые я видел, выполняются так декларативно (MXML) и путем скинирования подкласса View, используя только класс Skin , вы добавляете еще один слой иерархии через contentGroup в большинстве скинов skinnableContainer.

Если вы используете spark.components.View, тогда вы используете кожу, связанную с ней, так как это SkinnableContainer. Это не простая группа, как вы думаете.

Я не знаю, я не понимаю, куда сосредоточить свои усилия. Я уверен, что последствия для работы (если они есть) будут продвигаться вперед на стадии разработки.

Answer 3

Из опыта, накопленного до настоящего времени, вы не обходите взгляд на Вид. Вы обмениваете ViewNavigatorApplication. Во-первых, создать скин:

public class DViewNavigatorApplicationSkin extends ViewNavigatorApplicationSkin 
{ 
    [Embed(source="assets/wine_240.jpg")] 
    protected var cornerImage:Class; 

    public function DViewNavigatorApplicationSkin() 
    { 
     super();    
    } 


    override protected function drawBackground(unscaledWidth:Number, unscaledHeight:Number):void 
    { 
     graphics.beginFill(0x000000); 
     graphics.drawRect(0,0, unscaledWidth, unscaledHeight); 
     graphics.endFill(); 
     var ba:BitmapAsset = new cornerImage() as BitmapAsset; 
     var translateMatrix:Matrix = new Matrix(); 
     translateMatrix.tx = unscaledWidth - ba.width; 
     translateMatrix.ty = unscaledHeight - ba.height; 
     graphics.beginBitmapFill(ba.bitmapData, translateMatrix); 
     graphics.drawRect(unscaledWidth - ba.width + 1, unscaledHeight - ba.height + 1, ba.width, ba.height); 
     graphics.endFill(); 

    } 

Содержимое drawBackground доков изображение в правом нижнем углу экрана. Вы можете нарисовать что-нибудь в этой функции.

Тогда в theme.css:

s|ViewNavigatorApplication 
{ 
    color: #ffffff; 
    focusColor: #ff9999; 
    skinClass: ClassReference("com.domain.skins.mobile.ThemeName.DViewNavigatorApplicationSkin"); 
} 

s|View 
{ 
    backgroundAlpha: 0; 
} 

Вы рисуете фоновое изображение на самом приложении. Затем вы сделаете представление полностью прозрачным, чтобы вы могли видеть фоновое изображение.

Возможно индивидуальное отображение каждого индивидуального вида, но до сих пор кажется более практичным, чтобы нанести на кожу приложение.

Answer 4

Поздно, чтобы ответить на этот вопрос. Фактически, мы можем использовать Spark Skin для скина View компонента без каких-либо проблем.View - это просто подкласс SkinnableContainer (который является подклассом SkinnableComponent), поэтому по умолчанию любое содержимое, добавляемое непосредственно в компонент MXML View, будет добавлено в contenGroup of SkinnableContainer.

я добавил пример кожу View с помощью искровой кожи:

Главная Применение:

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
      xmlns:s="library://ns.adobe.com/flex/spark" applicationDPI="160"> 
<fx:Script> 
    <![CDATA[ 
     import com.accessdigital.core.SimpleView; 
    ]]> 
</fx:Script> 
<fx:Style> 
    @namespace s "library://ns.adobe.com/flex/spark"; 
    @namespace core "com.accessdigital.core.*"; 
    core|SimpleView{ 
     skinClass : ClassReference("skin.view.Skin_SimpleView"); 
    } 
</fx:Style> 
<s:ViewNavigator width="100%" height="100%" 
       firstView="{SimpleView}"> 

</s:ViewNavigator> 
</s:Application> 

Просмотр класса

public class SimpleView extends View 
{ 
    public function SimpleView() 
    { 
     super(); 
    } 

    [SkinPart(required="true")] 
    public var myButton:Button; 

    override protected function createChildren():void{ 
     super.createChildren(); 
     var anotherButton:Button = new Button(); 
     anotherButton.label = "Another button"; 
     anotherButton.addEventListener(MouseEvent.CLICK, onAnotherButtonClick); 
     if(!actionContent){ 
      actionContent = []; 
     } 
     actionContent.push(anotherButton); 
    } 

    protected function onAnotherButtonClick(event:MouseEvent):void 
    { 
     trace("This is another button");    
    } 

    override protected function partAdded(partName:String, instance:Object):void{ 
     super.partAdded(partName, instance); 
     if(instance == myButton){ 
      myButton.addEventListener(MouseEvent.CLICK, onButtonClick); 
     } 
    } 

    protected function onButtonClick(event:MouseEvent):void 
    { 
     trace("This is a simple button");   
    } 
} 

Файл кожи:

<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark"> 
<!-- host component --> 
<fx:Metadata> 
    [HostComponent("com.accessdigital.core.SimpleView")] 
</fx:Metadata> 

<!-- states --> 
<s:states> 
    <s:State name="disabled" /> 
    <s:State name="normal" /> 
</s:states> 

<!-- SkinParts 
name=myButton, type=spark.components.Button, required=true 
name=contentGroup, type=spark.components.Group, required=false 
--> 
<s:Rect width="100%" height="100%"> 
    <s:fill> 
     <s:LinearGradient rotation="90"> 
      <s:GradientEntry color="#666666"/> 
      <s:GradientEntry color="#222222"/> 
     </s:LinearGradient> 
    </s:fill> 
</s:Rect> 
<s:Group id="contentGroup" width="100%" height="100%"> 
    <s:Button id="myButton" label="My Button" horizontalCenter="0" verticalCenter="0"/> 
</s:Group> 
</s:Skin> 

Надеюсь, это помогает