모바일에서 Flex TextArea 및 TextInput이 올바르게 배치되지 않았습니다.

Question

모바일 구성 요소에서 TextArea 및 TextInput을 사용할 때 두 가지 문제가 있습니다. 해결 방법을 모릅니다. 첫 번째는 TextArea 텍스트가 올바르게 배치되지 않고 두 번째는 다른 구성 요소와 겹치는 것입니다.

TextArea가 Scroller에 있거나 (또는 ​​소프트 키보드가 TextArea 위치를 활성화하고 이동하는 경우) 문제가 발생합니다.

<s:Scroller width="100%" height="100%" top="100" bottom="100"> 
    <s:VGroup width="50%"> 
     <s:Button label="" height="600" width="440"/> 
     <s:TextArea id="testing" /> 
     <s:TextArea id="testing2" /> 
     <s:Button label="" height="800" width="440"/> 
    </s:VGroup> 
</s:Scroller> 

첫 번째 이미지는 텍스트와 응용 프로그램입니다 : 모바일 응용 프로그램에 아래의 코드를 추가하는 경우

이를 볼 수 있습니다.

는 두 번째 이미지에서 나는 몇 가지를 아래로 스크롤했습니다. 텍스트가 같은 위치에 남아 있다는 것을주의 깊게 살펴 보았습니다 (위에있는 버튼 위에 있습니다)!

주의 :
내용은 (는 최종 위치의에 정착 할 때 나는 다음 텍스트가 즉시합니다 (AIR 시뮬레이터에) 올바른 위치에 위치보기를 던져 제대로 다시 배치하는 경우 휴대 기기에서는 텍스트가 마지막 휴식 장소가 될 때까지 텍스트가 사라지는 것처럼 보입니다. 수동으로 누르거나 끌거나 놓을 때 (던지지 않음) 또는 소프트 키보드를 활성화 할 때 일어나지 않는 일이 발생했기 때문에 이것은 좋은 소식입니다.

불행히도 스크롤러 마스크를 무시하고 다른 모든 콘텐츠 위에 텍스트가 나타날 수 있지만 다른 첫 번째 문제가 해결되면 함께 살 수 있습니다.

나는이 내가 분명히 크기를 조정하지 않기 때문에 작동하지 않을 폭 + 1. 폭을 설정하면 텍스트가 올바른 위치에 위치를 얻을 수
UPDATE. 내가 무효화 시도하고 아무것도 작동하지 않습니다. 다음은 softKeyboardActivating 이벤트에서 시도한 코드입니다.

<s:TextArea id="testing" softKeyboardActivate="testing_softKeyboardActivateHandler(event)"/> 

<fx:Script> 
    <![CDATA[ 
     import mx.core.IInvalidating; 
     protected function testing_softKeyboardActivateHandler(event:SoftKeyboardEvent):void { 
      trace("Activating"); 
      /*testing.invalidateProperties(); 
      testing.invalidateDisplayList(); 
      testing.invalidateSize(); 
      testing.validateNow(); 
      parentGroup.validateNow(); 
      scroller.validateNow();*/ 
      // testing.invalidateParentSizeAndDisplayList(); 
      //IInvalidating(testing.parent).invalidateSize(); 
      //IInvalidating(testing.parent).invalidateDisplayList(); 
      //testing.width = NaN; 
      //testing.width = testing.width+1; 
     } 
    ]]> 
</fx:Script> 

업데이트 2 : 폭 밖으로의 주석 = 폭 + 1 "작업"을 볼 수
이 코드는 작동하지만 해킹과는 스크롤러가 때를 사용하고있는 코드보다 훨씬 느리다 보기가 발생합니다 :

protected function testing_softKeyboardActivateHandler(event:SoftKeyboardEvent):void { 
    StageTextAreaSkin2(testing.skin).styleChanged("styleName"); 
} 

UPDATE 3
나는 아래의 답변 섹션에서 해결 방법을 추가했지만이 해킹이다. 또한 올바른 위치에있을 때 올바르게 마스킹됩니다. 그렇게 좋은 것입니다. 그러나, 나는 아직도 이것을 할 올바른 방법을 찾고있다.

이 플렉스 4.6의 AIR 시뮬레이터, 아이폰 5와 안드로이드 넥서스 7

Answer 1

에 Mac에서 AIR 3.5에서 테스트되었습니다 여기에 해결 방법이 있습니다. MXML 파일을 생성하고 (일반적으로 StageTextArea.mxml이 수행합니다)이 코드를 배치합니다.

<?xml version="1.0" encoding="utf-8"?> 
<s:TextArea xmlns:fx="http://ns.adobe.com/mxml/2009" 
      xmlns:s="library://ns.adobe.com/flex/spark" 
      softKeyboardActivate="softKeyboardActivateHandler(event)" 
      softKeyboardDeactivate="softKeyboardDeactivateHandler(event)" 
      added="addedHandler(event)" 
      removed="removedHandler(event)"> 

    <!-- USAGE 
     <controls:StageTextArea id="myTextArea" parentScroller="{myScroller}"/> 
    --> 

    <fx:Script> 
     <![CDATA[ 
      import mx.events.PropertyChangeEvent; 

      import spark.components.Scroller; 

      private var _parentScroller:Scroller; 

      public function get parentScroller():Scroller { 
       return _parentScroller; 
      } 

      /** 
      * Adds a listener to an ancestor scroller. 
      * */ 
      [Bindable] 
      public function set parentScroller(value:Scroller):void { 

       if (value && value.viewport) { 
        value.viewport.addEventListener(PropertyChangeEvent.PROPERTY_CHANGE, handle, false, 0, true); 
       } 
       if (value==null && _parentScroller) { 
        value.viewport.removeEventListener(PropertyChangeEvent.PROPERTY_CHANGE, handle); 
       } 
       _parentScroller = value; 
      } 


      /** 
      * Add listener to parent component when added to the display list 
      * */ 
      protected function addedHandler(event:Event):void { 
       if (event.target==event.currentTarget) { 
        // we could "discover" the scroller here if we wanted 
        // or we could just use parentScroller property 
        owner.addEventListener(PropertyChangeEvent.PROPERTY_CHANGE, handle, false, 0, true); 
       } 
      } 

      /** 
      * Remove listener to parent component when removed to the display list 
      * */ 
      protected function removedHandler(event:Event):void { 
       if (event.target==event.currentTarget) { 
        owner.removeEventListener(PropertyChangeEvent.PROPERTY_CHANGE, handle); 
       } 
      } 

      /** 
      * Handle parent or ancestor scroll position changes 
      */ 
      private function handle(e:PropertyChangeEvent):void { 
       if (e.source == e.target && e.property == "verticalScrollPosition") { 
        //trace(e.property, "changed to", e.newValue); 
        updateTextFieldPosition(); 
       } 
       if (e.source == e.target && e.property == "horizontalScrollPosition") { 
        //trace(e.property, "changed to", e.newValue); 
        updateTextFieldPosition(); 
       } 
      } 

      /** 
      * Handles when keyboard activates 
      * */ 
      protected function softKeyboardActivateHandler(event:SoftKeyboardEvent):void { 
       updateTextFieldPosition(); 
      } 

      /** 
      * Handles when keyboard deactivates 
      * */ 
      protected function softKeyboardDeactivateHandler(event:SoftKeyboardEvent):void { 
       updateTextFieldPosition(); 
      } 

      /** 
      * Updates the native text fields position 
      * */ 
      public function updateTextFieldPosition():void { 
       skin.styleChanged("anything"); // force skin class to revalidate 
      } 

     ]]> 
    </fx:Script> 

</s:TextArea> 

Answer 2

이것은 기본 텍스트 컨트롤과 관련된 Flex의 버그입니다. 최상위 애플리케이션에 다음을 포함하면 문제가 해결됩니다.

<fx:Style> 
     @namespace s "library://ns.adobe.com/flex/spark"; 
     @namespace mx "library://ns.adobe.com/flex/mx"; 
     @namespace local "*"; 
     s|TextInput { 
      skinClass: ClassReference("spark.skins.mobile.TextInputSkin"); 
      showPromptWhenFocused:false; 
     } 
     s|TextArea { 
      skinClass: ClassReference("spark.skins.mobile.TextAreaSkin"); 
     } 
</fx:Style>