誰でも簡単iPhone / Androidアプリ開発　: ActionScript 3

ラベル ActionScript 3 の投稿を表示しています。すべての投稿を表示

2013/10/30

Flex:: Spark ListコンポーネントのensureIndexIsVisbleを拡張して指定したアイテムを好きな位置（一番上）に表示

Flex 4.10:: Spark Listコンポーネントの「ensureIndexIsVisble」はとても便利なメソッドです。これは引数にIndexを指定して、そのIndexのアイテムを表示エリアにスクロールして表示させるという機能です。
下のサンプルの左側のリストコンポーネントです。スクロール位置がどこでも、ボタンをクリックして「ensureIndexIsVisble」を呼ぶとスクロールしてIndex番号20のアイテムを表示エリアに表示させます。

でも、この動作好きですか？？？　私は少し気に入りませんでした。なぜ、表示エリアの一番上にジャンプしてくれないんだろう？それに、指定したアイテムが既に表示されている時は、何も反応しない。。。

どうもこの動作が好きになれなかったので、自分で拡張してみました。
このサンプルでは指定したアイテムを表示エリアの一番上に表示させるようにしました。これが、iOSでもAndroidでも標準の動きなのでなんだか私はしっくりきます。
少し変えれば、常に一番下に表示もできますし、思いのままです。
サンプル右側のリストコンポーネントが拡張したものです。ボタンをクリックすると20番目のアイテムが常に表示エリアの一番上に来ます。

■結果（Flashコンテンツ）

A Flash Content

■ソースコード（メインMXML）

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
      xmlns:s="library://ns.adobe.com/flex/spark" 
      xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
      xmlns:myclasses="myclasses.*">
 
 <s:layout>
  <s:HorizontalLayout/>
 </s:layout>
 
 <!-- Regular VerticalLayout -->
 <s:VGroup>
  <s:Button label="Reqular" 
      click="listReqular.ensureIndexIsVisible(20);"/>
  <s:List id="listReqular"
    width="200" height="200">
   <s:layout>
    <s:VerticalLayout/>
   </s:layout>
   <s:dataProvider>
    <s:ArrayList>
     <fx:String>0</fx:String>
     <fx:String>1</fx:String>
     <fx:String>2</fx:String>
     <fx:String>3</fx:String>
     <fx:String>4</fx:String>
     <fx:String>5</fx:String>
     <fx:String>6</fx:String>
     <fx:String>7</fx:String>
     <fx:String>8</fx:String>
     <fx:String>9</fx:String>
     <fx:String>10</fx:String>
     <fx:String>11</fx:String>
     <fx:String>12</fx:String>
     <fx:String>13</fx:String>
     <fx:String>14</fx:String>
     <fx:String>15</fx:String>
     <fx:String>16</fx:String>
     <fx:String>17</fx:String>
     <fx:String>18</fx:String>
     <fx:String>19</fx:String>
     <fx:String>20 Hello</fx:String>
     <fx:String>21</fx:String>
     <fx:String>22</fx:String>
     <fx:String>23</fx:String>
     <fx:String>24</fx:String>
     <fx:String>25</fx:String>
     <fx:String>26</fx:String>
     <fx:String>27</fx:String>
     <fx:String>28</fx:String>
     <fx:String>29</fx:String>
     <fx:String>30</fx:String>
     <fx:String>31</fx:String>
     <fx:String>32</fx:String>
     <fx:String>33</fx:String>
     <fx:String>34</fx:String>
     <fx:String>35</fx:String>
     <fx:String>36</fx:String>
     <fx:String>37</fx:String>
     <fx:String>38</fx:String>
     <fx:String>39</fx:String>
     <fx:String>40</fx:String>
     <fx:String>41</fx:String>
     <fx:String>42</fx:String>
     <fx:String>43</fx:String>
     <fx:String>44</fx:String>
     <fx:String>45</fx:String>
    </s:ArrayList>
   </s:dataProvider>
  </s:List>
 </s:VGroup>  
 
 <!-- VerticalLayoutExtend -->
 <s:VGroup>
  <s:Button label="Extend"
      click="listExtend.ensureIndexIsVisible(20);"/>
  <s:List id="listExtend"
    width="200" height="200">
   <s:layout>
    <myclasses:VerticalLayoutExtend/>
   </s:layout>
   <s:dataProvider>
    <s:ArrayList>
     <fx:String>0</fx:String>
     <fx:String>1</fx:String>
     <fx:String>2</fx:String>
     <fx:String>3</fx:String>
     <fx:String>4</fx:String>
     <fx:String>5</fx:String>
     <fx:String>6</fx:String>
     <fx:String>7</fx:String>
     <fx:String>8</fx:String>
     <fx:String>9</fx:String>
     <fx:String>10</fx:String>
     <fx:String>11</fx:String>
     <fx:String>12</fx:String>
     <fx:String>13</fx:String>
     <fx:String>14</fx:String>
     <fx:String>15</fx:String>
     <fx:String>16</fx:String>
     <fx:String>17</fx:String>
     <fx:String>18</fx:String>
     <fx:String>19</fx:String>
     <fx:String>20 Hello</fx:String>
     <fx:String>21</fx:String>
     <fx:String>22</fx:String>
     <fx:String>23</fx:String>
     <fx:String>24</fx:String>
     <fx:String>25</fx:String>
     <fx:String>26</fx:String>
     <fx:String>27</fx:String>
     <fx:String>28</fx:String>
     <fx:String>29</fx:String>
     <fx:String>30</fx:String>
     <fx:String>31</fx:String>
     <fx:String>32</fx:String>
     <fx:String>33</fx:String>
     <fx:String>34</fx:String>
     <fx:String>35</fx:String>
     <fx:String>36</fx:String>
     <fx:String>37</fx:String>
     <fx:String>38</fx:String>
     <fx:String>39</fx:String>
     <fx:String>40</fx:String>
     <fx:String>41</fx:String>
     <fx:String>42</fx:String>
     <fx:String>43</fx:String>
     <fx:String>44</fx:String>
     <fx:String>45</fx:String>
    </s:ArrayList>
   </s:dataProvider>
  </s:List>
 </s:VGroup>  
 
</s:Application>

■ソースコード（VerticalLayoutExtend.as）

package myclasses
{
 import flash.geom.Point;
 import flash.geom.Rectangle;
 
 import spark.layouts.VerticalLayout;
 
 public class VerticalLayoutExtend extends VerticalLayout
 {
  public function VerticalLayoutExtend()
  {
   super();
  }
  
  public override function getScrollPositionDeltaToElement(index:int):Point
  {
   var elementR:Rectangle = getElementBounds(index);
   return getScrollPositionDeltaToElementHelperHelper(elementR, null, true, 0, NaN, NaN, NaN);
  }
 }
}

http://stackoverflow.com/questions/5136653/ensureindexisvisible-scroll-to-the-top-of-a-list-control

Flex:: モバイルアプリのパフォーマンスチェックリスト

Flex 4.6:: モバイルアプリはデスクトップアプリよりもどうしてもパフォーマンスが劣るので、色々気をつけないといけません。
そのことについてまとめたサイトがあったのでメモ。

Flex:: TabbedViewNavigationApplicationのタブとアクションバーのスタイルを変更

Flex 4.5:: FlexにはTabbedViewNavigationApplicationという便利なものがデフォルトで用意されています。これを使うと簡単にタブで切り替えるアプリケーションを作ることが出来ます。
それにそのタブやタイトルバー、アクションバーなどのスタイル（カラーなど）も変更するのは簡単です。

方法はこちらの記事参照

http://devgirl.org/2011/05/09/styling-the-flex-4-5-mobile-application-tabs-and-actionbar/

Flex:: Spark Listコンポーネントがスクロールしている際にその動作を止める方法

Flex 4.10:: Spark Listコンポーネントをスクロールさせていると、その間は「ensureIndexIsVisble」を呼んでも効きません。なので、スクロールを一旦止める処理を入れて「ensureIndexIsVisble」を呼んでやればいいと思い、スクロールを止める方法を調査しました。が、、、不明でしたorz

どうにか方法あると思うんですが。とりあえず、やり方わからないし、今のところ特に重要でもないので、未解決でメモ。

誰かわかる方いましたら、ご指導お願いします。

Flex:: ItemRendererのview statesについて

Flex:: かなり単純なことにハマってしまったので、同じようなことで悩んでいる人のためにと思いメモ。

モバイルアプリ用にSpark Listコンポーネントを使い、そのItemRendererをカスタムで作成していました。
モバイル用なので、ItemRendererといっても「hovered」や「dragging」などはなく、また、この場合「selected」も必要ありませんでした。
「states」は２つ設定しており、１つはデフォルトの状態で、もう１つは特別なItemのみ使用するものでした。

特に意味もなくデフォルトのview stateの名前に「normal」と設定していました。これが原因だったんですが。。。

今思えば単純ですが、この「normal」という名前のせいで、「selected」はview statesに宣言していないにもかかわらず、リストのItemをクリックした際に、view statesの状態が「selected」に替わってしまいました。selectedの処理を入れていなので、特に関係ないと思うかもしれませんが、もう１つのview statesに設定してあったItemも「selected」の状態になり、設定が変更されてしまいました。このItemの状態は勝手に変更されると困るんです。。。

「selected」は宣言していなかったので、なんでだろうとかなり悩んでいました。「normal」という名前を「default」に変更したところ、この現象は起きなくなりました。

ここから、「normal」という名前はプリセットされた名前なので、これを使用すると自動的に「slected」なども宣言していなくても、使用されるようです。。。

特に意味もないなら「normal」という名前は使わないようにしましょう。

ちなみに予約されている名前は以下のものです。

normal
hovered
selected
dragging
normalAndShowCaret
hoveredAndShowCaret
selectedAndShowCaret

http://help.adobe.com/en_US/Flex/4.0/UsingSDK/WS03d33b8076db57b9-23c04461124bbeca597-8000.html#WS3B0D227A-DBFE-424c-9076-E834C5833E30

Flex:: view statesについてまとめ

Flex 4.10:: view statesについて復習したのでメモ。view statesの動きはFlex独特なのでしっかり把握しておきたいところ。理解できればかなり使い勝手はよい。

View states定義はコンパイル時されるので、State.nameにデータバインディングは使えない。
Arrayの最初のview satesがデフォルトとして登録される。名前は「default」でなくてもよい。
setCurrentState()メソッドで２番めの引数にfalseを設定するとtransitionを行わずにview stateを変更できる。
propertyの値をクリアする方法「」
コンポーネントを表示・非表示させるにはincludeInとexcludeFromを使用。
ランタイムでview stateを含むグループコンテイナーに対してaddElement, removeElement, setElementIndexをしない。
「」でコンテイナーを超えてコンポーネントを移動させることができる。
最初のview stateで存在しないコンポーネントはview stateが変更されるまでアクセすることが出来ない。
最初のviewで存在しないコンポーネントにview stateが変更される前にアクセスしたい場合は「itemCreationPolicy」を「deferred（デフォルト）」から「immediate」に変更する。
「itemDestructionPolicy」を「auto」にするとview stateがそのコンポーネントが存在しないview stateに変更された際に、そのコンポーネントのcacheを破棄する。
複数のview stateに設定した場合は、「stateGroups」を設定し、その値をセットする。
「stateGroups」は複数指定できる。ex.)「stateGroups="oneGroup, twoGroup"」
view statenのイベントは「enterState」「exitState」「currentStateChanging」「currentStateChange」

http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf63611-7ffa.html#WS434685AA-B886-4f71-BF3F-F81884986F28

Flex 4.6:: コンテイナーの使い方をまとめたサイト

Flex 4.6:: コンテイナーの使い方をまとめたサイトがあったのでリンク。
後でチェックするためにメモ。

Using containers

Flex:: パフォーマンス改善のためのティップス

Flex:: パフォーマンス改善についてまとめた記事があったのでリンクを貼っておきます。
時間がないので、後で読むことにします。

Flex:: 便利なメソッドcallLater()

Flex 4.10:: 前回コンポーネントの作成順番について述べました。コンポーネントが作成される前にプロパティなどにアクセスすると、エラーになったり、思い通りに動作しなかったりします。
そんな時にcallLater()というメソッドを使うと簡単に問題が解決できることが多々あります。
このcallLater()はメソッドを呼んだその時点ではなく、スクリーンが次回更新された際にこの処理を実行してくれます。

「callLater(method:Function, args:Array):void」で宣言されているので、最初に引数に呼び出すFunction名、２番めの引数にその時に渡す引数をArrayにして渡します。

DataGridでaddItemなどをしてその新しいItemにFocusを持ってきたいときなど、このcallLaterでFocusを持ってくる処理を指定すれば思い通りに動作するはずです。

http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-7b06.html

Flex:: コンポーネントのスタートアップ順番について

Flex 4.10:: コンポーネントのスタートアップの順番について

コンポーネントが作成される際の順番は重要です。まだコンポーネントが作成される前に、プロパティなどにアクセスしようとしてエラーがでたり、思ったように動作しなかったりという事が起こるからです。

コンテイナー	コンポーネント
preinitialize
↓→	preinitialize
↓→	initialize
childAdd
initialize
↓→	creationComplete
↓→	updateComplete
creationComplete
↓
updateComplete
↓
applicationComplete

http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-7ee6.html

AS3:: Capabilities.versionでOSを特定する

ActionScript 3:: OSによって切り替えたい処理はたくさんある。iOSとAndroidで処理を分ける必要があることもある。そんな時に、Capabilitiesクラスのversionプロパティを使ってOSを特定する事ができます。

「Capabilities.version」はプラットフォームとFlash or Airのバージョン情報を返します。
プラットフォームの返り値は以下のような感じです。

iOS: IOS
Android: AND
Blackberry: QNX
Windows: WIN
Mac OS: MAC
Linux: LIN

OS毎に処理を替えたい場合は、この文字列を取得して、それぞれの処理をコーディングすることで実装できます。

http://help.adobe.com/en_US/FlashPlatform/beta/reference/actionscript/3/flash/system/Capabilities.html#version

http://stackoverflow.com/questions/8404071/how-to-determine-if-an-application-is-running-as-a-mobile-or-desktop-air-applica

2013/10/28

Flex:: ItemRenderer内でopaqueBackgroundを設定してincludeInでコンポーネントを表示させた際のバグ

Flex 4.10:: なぜかわからないけど、表示に不具合があるので、とりあえずメモ。時間ある時に調査もしくは、Adobeのサイトに書き込む。

カスタムItemRenderer内でopaqueBackgroundを設定している状態で、Labelコンポーネントを非表示の状態（view stateで指定）から表示状態（view stateを変更）にした際にLabelコンポーネントの上側にスペースができてしまう問題。

なぜだろう？opaqueBackgroundを設定しないと起こらない。。。なぞ。

Flex:: Spark Listコントロールにセクションヘッダーを付ける方法

Flex 4:10:: Spark Listコントロールにセクション（グループ）ヘッダーを付ける方法を紹介します。

色々とサンプルもありましたが、私が探せたサンプルは全て、データ自体に「A, B...」などのヘッダー情報が入っていました。サンプルの場合は、ヘッダー情報が入ったデータを作ればいいのですが、データベースからデータを取ってくることが多い実際の状況では、そのデータにヘッダー情報が入っているということはありません。

なので、データベースから取ってきたヘッダー情報のないデータに自分でこのヘッダー情報を付け足してやる処理を入れてやることでセクション（グループ）ヘッダーを実装します。（サンプルのデータはArrayCollectionで作っていますが、実際のデータと同じように、ヘッダー情報（A, B...）などは入れていません。なので、SQLiteを使用する場合はこのArrayCollectionにSQLiteから取ってきたデータをそのまま渡せば同じようにできます。）

■結果（画像）

■結果（Flashコンテンツ）

A Flash Content

■ソースコード（メインMXML）

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
      xmlns:s="library://ns.adobe.com/flex/spark" 
      xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
      initialize="initializeHandler(event)">
 <fx:Script>
  <![CDATA[
   import mx.collections.ArrayCollection;
   import mx.collections.ArrayList;
   import mx.collections.Sort;
   import mx.collections.SortField;
   import mx.events.FlexEvent;
   
   [Bindable]
   private var m_arrList:ArrayList;
   
   protected function initializeHandler(event:FlexEvent):void
   {
    var arrColl:ArrayCollection = new ArrayCollection;
    
    arrColl.addItem({strFirstName:"Ken",  strLastName:"Akai"});
    arrColl.addItem({strFirstName:"Yuki", strLastName:"Suzuki"});
    arrColl.addItem({strFirstName:"Keiko", strLastName:"Nagano"});
    arrColl.addItem({strFirstName:"Ryouta", strLastName:"Shindo"});
    arrColl.addItem({strFirstName:"Kazuki", strLastName:"Watanabe"});
    arrColl.addItem({strFirstName:"Yuki", strLastName:"Tanaka"});
    arrColl.addItem({strFirstName:"Megumi", strLastName:"Asai"});
    arrColl.addItem({strFirstName:"Syota", strLastName:"Saito"});
    arrColl.addItem({strFirstName:"Akito", strLastName:"Nagase"});
    arrColl.addItem({strFirstName:"Akira", strLastName:"Kinoshita"});
    arrColl.addItem({strFirstName:"Jun", strLastName:"Nitta"});
    arrColl.addItem({strFirstName:"Ippei", strLastName:"Kusunoki"});
    arrColl.addItem({strFirstName:"Ichiro", strLastName:"Ohta"});
    arrColl.addItem({strFirstName:"Aki", strLastName:"Takeda"});
    arrColl.addItem({strFirstName:"Yuriko", strLastName:"Kida"});
    arrColl.addItem({strFirstName:"Juri", strLastName:"Ohnishi"});
    arrColl.addItem({strFirstName:"Ann", strLastName:"Tendo"});
    
    
    sortArrayCollection(arrColl, "strLastName");
    addHeaderToArrayCollection(arrColl);
   }
   
   private function sortArrayCollection(a_arrColl:ArrayCollection, a_strSortField:String):void
   {
    var dataSortField:SortField = new SortField();
    dataSortField.name = a_strSortField;
    //dataSortField.numeric = true;
    
    var dataSort:Sort = new Sort();
    
    dataSort.fields = [dataSortField];
    
    a_arrColl.sort = dataSort;
    a_arrColl.refresh();
   }
   
   private function addHeaderToArrayCollection(a_arrColl:ArrayCollection):void
   {
    m_arrList = new ArrayList;
    var strLastChar:String = ""
    
    for (var index:Number = 0; index < a_arrColl.length; index++)
    {
     if (strLastChar === (a_arrColl[index]["strLastName"] as String).charAt(0))
     {
      m_arrList.addItem({strFirstName:a_arrColl[index]["strFirstName"],
       strLastName:a_arrColl[index]["strLastName"],
       HEADER:false});
     }
     else
     {
      strLastChar = (a_arrColl[index]["strLastName"] as String).charAt(0);
      
      m_arrList.addItem({strFirstName:a_arrColl[index]["strFirstName"],
       strLastName:a_arrColl[index]["strLastName"],
       HEADER:true});
     }
    }
   }
   
   
  ]]>
 </fx:Script>
 
 <s:List width="200" height="250"
   itemRenderer="CustomItemRenderer"
   dataProvider="{m_arrList}">
 </s:List>
 
</s:Application>

■ソースコード（カスタムItemRenderer）

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    autoDrawBackground="false">
 
 <fx:Script>
  <![CDATA[
   [Bindable]
   public var myBGColor:int = 0xFFFFFF;
   
   override public function set data(value:Object):void
   {
    super.data = value;
    if (value == null)
     return;
    
    setText(value);
    setBackgroundColor();
   }
   
   private function setText(a_objValue:Object):void
   {
    if ((a_objValue.HEADER as Boolean))
    {
     lblHeader.includeInLayout = lblHeader.visible  = true;
     lblHeader.text = (a_objValue.strLastName as String).charAt(0);
    }
    else
    {
     lblHeader.includeInLayout = lblHeader.visible = false;
     lblHeader.text = "";
    }
    
    lblName.text = a_objValue.strLastName + " " + a_objValue.strFirstName;
   }
   
   private function setBackgroundColor():void
   {
    myBGColor = ((itemIndex % 2) == 0) ? 0xFFFFFF : 0xFFF8E3; 
   }
  ]]>
 </fx:Script>
 
 <s:VGroup width="100%" gap="0">
  <s:Label id="lblHeader" 
     width="100%"
     includeInLayout="false"
     color="0xFFFFFF" backgroundColor="0x000000"
     paddingTop="1" paddingLeft="5"
     fontSize="12"/>
  <s:Label id="lblName"
     width="100%"
     backgroundColor="{myBGColor}"
     paddingTop="10" paddingBottom="10" paddingLeft="10"
     textAlign="left"
     fontSize="15"/>
 </s:VGroup>
</s:ItemRenderer>

http://flexponential.com/2009/12/20/disable-selection-on-some-items-in-a-spark-list/
http://flexponential.com/2010/11/30/grouping-items-in-a-flex-mobile-list/
http://www.tink.ws/blog/flex-4-excludeselectionlist/
http://blog.flexexamples.com/2007/08/05/sorting-an-arraycollection-using-the-sortfield-and-sort-classes/

2013/10/27

Flex:: GroupのtextAlignをActionScriptで設定したい場合

Flex 4.10:: Group (VGroup, HGroupも同じ)のtextAlignプロパティをActionScriptで設定する方法。

「setStyle」メソッドを使い実装します。

1	myGroup.setStyle("textAlign", "center");

http://www.fxug.net/modules/xhnewbb/viewtopic.php?viewmode=flat&order=ASC&topic_id=1072&forum=16&move=next&topic_time=1185346871

Flex:: ArrayListにアイテムを名前付きで追加する方法

Flex 4.10:: ArrayListにアイテムを名前付きで追加する方法です。

1
2
3

private var arrList:ArrayList = new ArrayList;

arrList.addItem({name1:"data1", name2:"data2",name3:"data3"});

http://www.java2s.com/Code/Flex/Data-Model/AdditemtoArrayCollection.htm

Flex:: Spark Listコントロール(ItemRenderer)の背景色をデータによって変更する方法

Flex 4.10:: Spark Listコントロール(ItemRenderer)のアイテム背景色をデータ内容によって変更する方法を紹介します。

実際にはListコントロール自体ではなく、ItemRendererの背景色を変更することで実装します。

カスタムItemRendererを作成します。（カスタムItemRenderの作成方法についてはこちらの記事を参照してください。）
カスタムItemRenderの「autoDrawBackground」を「false」にします。
カスタムItemRenderに「Rect」コンポーネントをセットします。（このコンポーネントにセットする色が背景色になります）
データを表示させるラベルなどのコンポーネントをセットします。
「set data」functionをoverrideして、背景色をデータの条件によって変更します。

※以前紹介した「Listコントロールのアイテムをクリックした時に追加情報がアニメーションしてその下に表示される」のソースコードに追加して実装してあります。

■結果（Flashコンテンツ）

A Flash Content

■ソースコード（メインMXML）

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
  xmlns:s="library://ns.adobe.com/flex/spark" title="HomeView">
 
 <fx:Script>
  <![CDATA[
   private var lastIndex:Number = -1;
   
   protected function list_clickHandler(event:MouseEvent):void
   {
    if(list.selectedIndex == lastIndex)
     list.selectedIndex = -1;
    
    lastIndex = list.selectedIndex;
   }
  ]]>
 </fx:Script>
 
 <s:List id="list" width="100%" height="100%"
   itemRenderer="CustomItemRenderer"
   click="list_clickHandler(event)">
  <s:dataProvider>
   <s:ArrayList>
    <fx:Object firstName="Ken" lastName="Takeda" companyID="00001" phone="111-222-3333"/>
    <fx:Object firstName="Takashi" lastName="Yamamoto" companyID="00002" phone="444-555-6666"/>
    <fx:Object firstName="Noriko" lastName="Ijima" companyID="00003" phone="777-888-9999"/>
    <fx:Object firstName="Yuka" lastName="Nagase" companyID="00004" phone="000-111-2222"/>
    
    <!-- 省略 -->
    
   </s:ArrayList>
  </s:dataProvider>
 </s:List>
 
</s:View>

■ソースコード（カスタムItemRenderer）

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"
    autoDrawBackground="false">
 <fx:Script>
  <![CDATA[
   
   [Bindable]
   public var myBGColor:int = 0xFFFFFF;
   
   override public function set data(value:Object):void
   { 
    super.data = value;
    
    if ((value.companyID) == "00001") 
    {
     myBGColor= 0xFFFFFF;
    }
    else if  ((value.companyID) == "00002")
    {
     myBGColor= 0x00FFFF;
    }
    else if ((value.companyID) == "00003")
    {
     myBGColor= 0xFFFF00;
    }
    else
    {
     myBGColor= 0xCCFF66;
    }
   }
  ]]>
 </fx:Script>
 
 <s:states>
  <s:State name="normal"/>
  <s:State name="selected"/>
 </s:states>
 
 <s:transitions>
  <s:Transition fromState="normal">
   <s:Parallel duration="300">
    <s:Resize target="{this}"/>
   </s:Parallel>
  </s:Transition>
  <s:Transition fromState="selected">
   <s:Sequence duration="300">
    <s:Resize target="{this}"/>
   </s:Sequence>
  </s:Transition>
 </s:transitions>
 
 <s:Rect id="myRect" 
   left="0" right="0" top="0" bottom="0"> 
  <s:fill> 
   <s:SolidColor color="{myBGColor}"/> 
  </s:fill> 
 </s:Rect>     
 
 <s:VGroup width="100%"
     paddingTop="10" paddingBottom="10" paddingLeft="5"
     gap="0"
     verticalAlign="middle">
  <s:Label width="100%"
     text="{data.lastName} {data.firstName}"/>
  <s:HGroup width="100%" paddingLeft="5">
   <s:Label id="lblCompanyID"
      text="Company: {data.companyID}"
      includeIn="selected"
      paddingTop="10"/>
   <s:Label id="lblPhone"
      text="Phone: {data.phone}"
      includeIn="selected"
      paddingTop="10"/>
  </s:HGroup>
 </s:VGroup>
 
</s:ItemRenderer>

http://help.adobe.com/en_US/flex/using/WS77c1dbb1bd80d38313b7ce1c129eb7d5e04-8000.html
http://flexponential.com/2010/02/08/displaying-the-row-number-or-index-in-a-spark-list/

2013/10/26

Flex:: Spark Listのアイテムをクリックして追加情報を表示させる方法

Flex 4.10:: Spark Listのアイテムをクリックした時に、その下に追加情報をアニメーションさせながら表示させる方法を紹介します。

ItemRendererをカスタムして、追加情報にしたいアイテムをstateが"normal"の時は非表示にして、stateが"selected"の時は表示にするプログラムを書きます。
さらに、アニメーションを追加してスライドしながら表示させるようにします。
選択したアイテムを再クリックするとスライドしながら閉じます。（この処理についてはこちらの記事参照）

■ソースコード（メインMXML）

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
  xmlns:s="library://ns.adobe.com/flex/spark" title="HomeView">
 
 <fx:Script>
  <![CDATA[
   private var lastIndex:Number = -1;
   
   protected function list_clickHandler(event:MouseEvent):void
   {
    if(list.selectedIndex == lastIndex)
     list.selectedIndex = -1;
    
    lastIndex = list.selectedIndex;
   }
  ]]>
 </fx:Script>
 
 
 <s:List id="list" width="100%" height="100%"
   itemRenderer="CustomItemRenderer"
   alternatingItemColors="[0xFFFFFF, 0xEFECCA]" 
   click="list_clickHandler(event)">
  <s:dataProvider>
   <s:ArrayList>
    <fx:Object firstName="Ken" lastName="Takeda" companyID="00001" phone="111-222-3333"/>
    <fx:Object firstName="Takashi" lastName="Yamamoto" companyID="00002" phone="444-555-6666"/>
    <fx:Object firstName="Noriko" lastName="Ijima" companyID="00003" phone="777-888-9999"/>
    <fx:Object firstName="Yuka" lastName="Nagase" companyID="00004" phone="000-111-2222"/>
    <!-- 省略 -->

   </s:ArrayList>
  </s:dataProvider>
 </s:List>
 
</s:View>

■ソースコード（カスタムItemRenderer）

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx">
 
 <s:states>
  <s:State name="normal"/>
  <s:State name="selected"/>
 </s:states>
 
 <s:transitions>
  <s:Transition fromState="normal">
   <s:Sequence duration="300">
    <s:Resize target="{this}"/>
   </s:Sequence>
  </s:Transition>

  <s:Transition fromState="selected">
   <s:Sequence duration="300">
    <s:Resize target="{this}"/>
   </s:Sequence>
  </s:Transition>
 </s:transitions>
 
 <s:VGroup width="100%"
     paddingTop="10" paddingBottom="10" paddingLeft="5"
     gap="0"
     verticalAlign="middle">
  <s:Label width="100%"
     text="{data.lastName} {data.firstName}"/>
  <s:HGroup width="100%" paddingLeft="5">
   <s:Label id="lblCompanyID"
      text="Company: {data.companyID}"
      includeIn="selected"
      paddingTop="10"/>
   <s:Label id="lblPhone"
      text="Phone: {data.phone}"
      includeIn="selected"
      paddingTop="10"/>
  </s:HGroup>
 </s:VGroup>
 
</s:ItemRenderer>

http://help.adobe.com/en_US/flex/using/WS77c1dbb1bd80d38313b7ce1c129eb7d5e04-8000.html

Flex:: Spark Listコントロールでアイテムをクリックするたびに選択・非選択のトグルにする方法

Flex 4.10:: Spark Listコントロールでアイテムをクリックする度に選択・非選択を切り替える方法を紹介します。（マルチ選択OFFの場合）

デフォルトでは、マルチ選択オフの場合アイテムを選択できますが、選択中のアイテムをキャンセル（非選択）することはできません。なので、クリックイベントを拾って、選択を解除するコードを書きます。

■ソースコード

<fx:Script>
 <![CDATA[
  private var lastIndex:Number = -1;
   
  protected function list_clickHandler(event:MouseEvent):void
  {
   if(list.selectedIndex == lastIndex)
   list.selectedIndex = -1;
    
   lastIndex = list.selectedIndex;
  }
 ]]>
</fx:Script>
 
 
<s:List id="list" width="100%" height="100%"
   itemRenderer="CustomItemRenderer"
   alternatingItemColors="[0xFFFFFF, 0xEFECCA]" 
   click="list_clickHandler(event)">
 <s:dataProvider>
  <s:ArrayList>
   <fx:Object firstName="Ken" lastName="Takeda" companyID="00001" phone="111-222-3333"/>
   <fx:Object firstName="Takashi" lastName="Yamamoto" companyID="00002" phone="444-555-6666"/>
   <fx:Object firstName="Noriko" lastName="Ijima" companyID="00003" phone="777-888-9999"/>
   <fx:Object firstName="Yuka" lastName="Nagase" companyID="00004" phone="000-111-2222"/>
  </s:ArrayList>
 </s:dataProvider>
</s:List>

http://stackoverflow.com/questions/586481/how-to-deselect-a-flex-datagrid-row-by-clicking-on-it

Flex:: MulitDPIBitmapSourceにセットしても反映されない対処

Flex 4.10:: カスタムのItemRendererでoverrideした「set data 」function内でMultiDPIBitmapSourceの値をセットしても結果が反映されません。
この記事の方も同じような問題でした。http://forums.adobe.com/thread/1070289

対処としては、MultiDPIBitmapSourceは使わずに、自前でデバイスのDPI判断をして対応するビットマップ画像をImageのsourceにセットします。

■ ソースコード

private function setDPIImage(a_strFileName:String):void
{
 var strImagePath:String;
    
 switch (FlexGlobals.topLevelApplication.runtimeDPI)
 {
  case DPIClassification.DPI_160:
   strImagePath = "assets/images/icon_" + a_strFileName + "_24.png";
   break;
  case DPIClassification.DPI_240:
   strImagePath = "assets/images/icon_" + a_strFileName + "_32.png";
   break;
  case DPIClassification.DPI_320:
   strImagePath = "assets/images/icon_" + a_strFileName + "_48.png";
   break;
  case DPIClassification.DPI_480:
   strImagePath = "assets/images/icon_" + a_strFileName + "_64.png";
   break;
 }
    
 //set the image source
 img.source = strImagePath;
}

http://forums.adobe.com/thread/1070289

登録: 投稿 (Atom)

誰でも簡単iPhone / Androidアプリ開発

2013/10/30

Flex:: Spark ListコンポーネントのensureIndexIsVisbleを拡張して指定したアイテムを好きな位置（一番上）に表示

Flex:: モバイルアプリのパフォーマンスチェックリスト

Flex:: TabbedViewNavigationApplicationのタブとアクションバーのスタイルを変更

Flex:: Spark Listコンポーネントがスクロールしている際にその動作を止める方法

Flex:: ItemRendererのview statesについて

Flex:: view statesについてまとめ

Flex 4.6:: コンテイナーの使い方をまとめたサイト

Flex:: パフォーマンス改善のためのティップス

Flex:: 便利なメソッドcallLater()

Flex:: コンポーネントのスタートアップ順番について

AS3:: Capabilities.versionでOSを特定する

2013/10/28

Flex:: ItemRenderer内でopaqueBackgroundを設定してincludeInでコンポーネントを表示させた際のバグ

Flex:: Spark Listコントロールにセクションヘッダーを付ける方法

2013/10/27

Flex:: GroupのtextAlignをActionScriptで設定したい場合

Flex:: ArrayListにアイテムを名前付きで追加する方法

Flex:: Spark Listコントロール(ItemRenderer)の背景色をデータによって変更する方法

2013/10/26

Flex:: Spark Listのアイテムをクリックして追加情報を表示させる方法

Flex:: Spark Listコントロールでアイテムをクリックするたびに選択・非選択のトグルにする方法

Flex:: MulitDPIBitmapSourceにセットしても反映されない対処

ラベル

ランキング

バージョン履歴

にほんブログ村ランキング