<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>nariyu memo &#187; Panel</title>
	<atom:link href="http://nariyu.playwell.jp/tag/panel/feed/" rel="self" type="application/rss+xml" />
	<link>http://nariyu.playwell.jp</link>
	<description>メモ</description>
	<lastBuildDate>Wed, 18 Aug 2010 09:19:00 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<item>
		<title>Flex でドラッグでリサイズできる Panel を作る</title>
		<link>http://nariyu.playwell.jp/2009/08/flex-resizable-panel/</link>
		<comments>http://nariyu.playwell.jp/2009/08/flex-resizable-panel/#comments</comments>
		<pubDate>Thu, 13 Aug 2009 02:26:13 +0000</pubDate>
		<dc:creator>nariyu</dc:creator>
				<category><![CDATA[Flex 3]]></category>
		<category><![CDATA[ActionScript]]></category>
		<category><![CDATA[Flex]]></category>
		<category><![CDATA[Panel]]></category>

		<guid isPermaLink="false">http://www.playwell.jp/blog/nariyu/?p=259</guid>
		<description><![CDATA[Flex で mx.containers.Panel クラスを拡張してリサイズ可能なパネルを作ります。 Mac OS X のようにウィンドウの右下でのみリサイズできるように実装してみます。 完成形はこんな感じ。 ソースは以下。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 [...]]]></description>
			<content:encoded><![CDATA[<p>Flex で mx.containers.Panel クラスを拡張してリサイズ可能なパネルを作ります。<br />
Mac OS X のようにウィンドウの右下でのみリサイズできるように実装してみます。</p>
<p>完成形はこんな感じ。</p>
<p><a href="http://blog.playwell.jp/nariyu/wp-content/uploads/2009/08/ResizablePanelTest.swf?width=600&amp;height=400" rel="prettyPhoto[flash]"><img src="http://nariyu.playwell.jp/wp-content/uploads/2009/08/4e7182c03b439dc4a15b96efa5b777d9.png" alt="" title="ResizablePanel" width="600" height="400" class="alignnone size-full wp-image-507" /></a><br />
ソースは以下。</p>
<p><span id="more-259"></span></p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
</pre></td><td class="code"><pre class="actionscript3" style="font-family:monospace;"><span style="color: #9900cc; font-weight: bold;">package</span> jp.playwell.containers
<span style="color: #000000;">&#123;</span>
    <span style="color: #0033ff; font-weight: bold;">import</span> <span style="color: #004993;">flash.display</span>.<span style="color: #004993;">Graphics</span>;
    <span style="color: #0033ff; font-weight: bold;">import</span> <span style="color: #004993;">flash.display</span>.<span style="color: #004993;">Sprite</span>;
    <span style="color: #0033ff; font-weight: bold;">import</span> <span style="color: #004993;">flash.events</span>.<span style="color: #004993;">MouseEvent</span>;
    <span style="color: #0033ff; font-weight: bold;">import</span> <span style="color: #004993;">flash.geom</span>.<span style="color: #004993;">Rectangle</span>;
&nbsp;
    <span style="color: #0033ff; font-weight: bold;">import</span> mx.containers.Panel;
&nbsp;
    <span style="color: #0033ff; font-weight: bold;">public</span> <span style="color: #9900cc; font-weight: bold;">class</span> ResizablePanel extends Panel
    <span style="color: #000000;">&#123;</span>
        <span style="color: #0033ff; font-weight: bold;">protected</span> <span style="color: #6699cc; font-weight: bold;">var</span> resizeHandle<span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">Sprite</span>;
&nbsp;
        <span style="color: #0033ff; font-weight: bold;">public</span> <span style="color: #339966; font-weight: bold;">function</span> ResizablePanel<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span>
        <span style="color: #000000;">&#123;</span>
            <span style="color: #0033ff; font-weight: bold;">super</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span>;
        <span style="color: #000000;">&#125;</span>
&nbsp;
        <span style="color: #009900;">//--------------------------------------</span>
        <span style="color: #009900;">// resizable</span>
        <span style="color: #009900;">//--------------------------------------</span>
        <span style="color: #0033ff; font-weight: bold;">private</span> <span style="color: #6699cc; font-weight: bold;">var</span> _resizable<span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">Boolean</span> = <span style="color: #0033ff; font-weight: bold;">true</span>;
&nbsp;
        <span style="color: #000000;">&#91;</span>Bindable<span style="color: #000000;">&#93;</span>
        <span style="color: #000000;">&#91;</span>Inspectable<span style="color: #000000;">&#40;</span>category=<span style="color: #990000;">&quot;General&quot;</span>,
            enumeration=<span style="color: #990000;">&quot;true,false&quot;</span>, defaultValue=<span style="color: #990000;">&quot;true&quot;</span><span style="color: #000000;">&#41;</span><span style="color: #000000;">&#93;</span>
        <span style="color: #3f5fbf;">/**
         * resizable プロパティが true の場合、リサイズできます。
         * @default true
         */</span>
        <span style="color: #0033ff; font-weight: bold;">public</span> <span style="color: #339966; font-weight: bold;">function</span> <span style="color: #0033ff; font-weight: bold;">get</span> resizable<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">Boolean</span>
        <span style="color: #000000;">&#123;</span>
            <span style="color: #0033ff; font-weight: bold;">return</span> _resizable;
        <span style="color: #000000;">&#125;</span>
        <span style="color: #0033ff; font-weight: bold;">public</span> <span style="color: #339966; font-weight: bold;">function</span> <span style="color: #0033ff; font-weight: bold;">set</span> resizable<span style="color: #000000;">&#40;</span><span style="color: #004993;">value</span><span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">Boolean</span><span style="color: #000000;">&#41;</span><span style="color: #000000; font-weight: bold;">:</span><span style="color: #0033ff; font-weight: bold;">void</span>
        <span style="color: #000000;">&#123;</span>
            _resizable = <span style="color: #004993;">value</span>;
            invalidateDisplayList<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span>;
        <span style="color: #000000;">&#125;</span>
&nbsp;
        <span style="color: #009900;">//--------------------------------------</span>
        <span style="color: #009900;">// protected methods</span>
        <span style="color: #009900;">//--------------------------------------</span>
        override <span style="color: #0033ff; font-weight: bold;">protected</span> <span style="color: #339966; font-weight: bold;">function</span> createChildren<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000000; font-weight: bold;">:</span><span style="color: #0033ff; font-weight: bold;">void</span>
        <span style="color: #000000;">&#123;</span>
            <span style="color: #0033ff; font-weight: bold;">super</span>.createChildren<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span>;
&nbsp;
            <span style="color: #0033ff; font-weight: bold;">if</span> <span style="color: #000000;">&#40;</span><span style="color: #000000; font-weight: bold;">!</span>resizeHandle<span style="color: #000000;">&#41;</span>
            <span style="color: #000000;">&#123;</span>
                resizeHandle = <span style="color: #0033ff; font-weight: bold;">new</span> <span style="color: #004993;">Sprite</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span>;
                resizeHandle.<span style="color: #004993;">alpha</span> = <span style="color: #000000; font-weight:bold;">0.6</span>;
&nbsp;
                <span style="color: #009900;">// ドラッグハンドルを描画</span>
                <span style="color: #6699cc; font-weight: bold;">var</span> g<span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">Graphics</span> = resizeHandle.<span style="color: #004993;">graphics</span>;
                g.<span style="color: #004993;">beginFill</span><span style="color: #000000;">&#40;</span>0xFFFFFF, <span style="color: #000000; font-weight:bold;">0.0</span><span style="color: #000000;">&#41;</span>;
                g.<span style="color: #004993;">drawRect</span><span style="color: #000000;">&#40;</span><span style="color: #000000; font-weight:bold;">0</span>, <span style="color: #000000; font-weight:bold;">0</span>, <span style="color: #000000; font-weight:bold;">15</span>, <span style="color: #000000; font-weight:bold;">15</span><span style="color: #000000;">&#41;</span>;
                g.<span style="color: #004993;">endFill</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span>;
                g.<span style="color: #004993;">lineStyle</span><span style="color: #000000;">&#40;</span><span style="color: #000000; font-weight:bold;">0</span>, 0x111111<span style="color: #000000;">&#41;</span>;
                g.<span style="color: #004993;">moveTo</span><span style="color: #000000;">&#40;</span><span style="color: #000000; font-weight:bold;">3</span>, <span style="color: #000000; font-weight:bold;">14</span><span style="color: #000000;">&#41;</span>;
                g.<span style="color: #004993;">lineTo</span><span style="color: #000000;">&#40;</span><span style="color: #000000; font-weight:bold;">14</span>, <span style="color: #000000; font-weight:bold;">3</span><span style="color: #000000;">&#41;</span>;
                g.<span style="color: #004993;">moveTo</span><span style="color: #000000;">&#40;</span><span style="color: #000000; font-weight:bold;">7</span>, <span style="color: #000000; font-weight:bold;">14</span><span style="color: #000000;">&#41;</span>;
                g.<span style="color: #004993;">lineTo</span><span style="color: #000000;">&#40;</span><span style="color: #000000; font-weight:bold;">14</span>, <span style="color: #000000; font-weight:bold;">7</span><span style="color: #000000;">&#41;</span>;
                g.<span style="color: #004993;">moveTo</span><span style="color: #000000;">&#40;</span><span style="color: #000000; font-weight:bold;">11</span>, <span style="color: #000000; font-weight:bold;">14</span><span style="color: #000000;">&#41;</span>;
                g.<span style="color: #004993;">lineTo</span><span style="color: #000000;">&#40;</span><span style="color: #000000; font-weight:bold;">14</span>, <span style="color: #000000; font-weight:bold;">11</span><span style="color: #000000;">&#41;</span>;
                g.<span style="color: #004993;">lineStyle</span><span style="color: #000000;">&#40;</span><span style="color: #000000; font-weight:bold;">0</span>, 0xFFFFFF<span style="color: #000000;">&#41;</span>;
                g.<span style="color: #004993;">moveTo</span><span style="color: #000000;">&#40;</span><span style="color: #000000; font-weight:bold;">4</span>, <span style="color: #000000; font-weight:bold;">14</span><span style="color: #000000;">&#41;</span>;
                g.<span style="color: #004993;">lineTo</span><span style="color: #000000;">&#40;</span><span style="color: #000000; font-weight:bold;">14</span>, <span style="color: #000000; font-weight:bold;">4</span><span style="color: #000000;">&#41;</span>;
                g.<span style="color: #004993;">moveTo</span><span style="color: #000000;">&#40;</span><span style="color: #000000; font-weight:bold;">8</span>, <span style="color: #000000; font-weight:bold;">14</span><span style="color: #000000;">&#41;</span>;
                g.<span style="color: #004993;">lineTo</span><span style="color: #000000;">&#40;</span><span style="color: #000000; font-weight:bold;">14</span>, <span style="color: #000000; font-weight:bold;">8</span><span style="color: #000000;">&#41;</span>;
                g.<span style="color: #004993;">moveTo</span><span style="color: #000000;">&#40;</span><span style="color: #000000; font-weight:bold;">12</span>, <span style="color: #000000; font-weight:bold;">14</span><span style="color: #000000;">&#41;</span>;
                g.<span style="color: #004993;">lineTo</span><span style="color: #000000;">&#40;</span><span style="color: #000000; font-weight:bold;">14</span>, <span style="color: #000000; font-weight:bold;">12</span><span style="color: #000000;">&#41;</span>;
&nbsp;
                rawChildren.<span style="color: #004993;">addChild</span><span style="color: #000000;">&#40;</span>resizeHandle<span style="color: #000000;">&#41;</span>;
&nbsp;
                resizeHandle.<span style="color: #004993;">addEventListener</span><span style="color: #000000;">&#40;</span><span style="color: #004993;">MouseEvent</span>.<span style="color: #004993;">MOUSE_DOWN</span>,
                    resizeHandle_mouseDownHandler<span style="color: #000000;">&#41;</span>;
            <span style="color: #000000;">&#125;</span>
        <span style="color: #000000;">&#125;</span>
&nbsp;
        override <span style="color: #0033ff; font-weight: bold;">protected</span> <span style="color: #339966; font-weight: bold;">function</span> updateDisplayList<span style="color: #000000;">&#40;</span>unscaledWidth<span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">Number</span>,
            unscaledHeight<span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">Number</span><span style="color: #000000;">&#41;</span><span style="color: #000000; font-weight: bold;">:</span><span style="color: #0033ff; font-weight: bold;">void</span>
        <span style="color: #000000;">&#123;</span>
            <span style="color: #0033ff; font-weight: bold;">super</span>.updateDisplayList<span style="color: #000000;">&#40;</span>unscaledWidth, unscaledHeight<span style="color: #000000;">&#41;</span>;
&nbsp;
            resizeHandle.<span style="color: #004993;">visible</span> = resizable;
            resizeHandle.<span style="color: #004993;">x</span> = unscaledWidth <span style="color: #000000; font-weight: bold;">-</span> resizeHandle.<span style="color: #004993;">width</span>;
            resizeHandle.<span style="color: #004993;">y</span> = unscaledHeight <span style="color: #000000; font-weight: bold;">-</span> resizeHandle.<span style="color: #004993;">height</span>;
        <span style="color: #000000;">&#125;</span>
&nbsp;
        <span style="color: #009900;">//--------------------------------------</span>
        <span style="color: #009900;">// ドラッグ処理</span>
        <span style="color: #009900;">//--------------------------------------</span>
        <span style="color: #0033ff; font-weight: bold;">private</span> <span style="color: #6699cc; font-weight: bold;">var</span> dragData<span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">Rectangle</span>;
        <span style="color: #0033ff; font-weight: bold;">private</span> <span style="color: #339966; font-weight: bold;">function</span> resizeHandle_mouseDownHandler<span style="color: #000000;">&#40;</span>event<span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">MouseEvent</span><span style="color: #000000;">&#41;</span><span style="color: #000000; font-weight: bold;">:</span><span style="color: #0033ff; font-weight: bold;">void</span>
        <span style="color: #000000;">&#123;</span>
            dragData = <span style="color: #0033ff; font-weight: bold;">new</span> <span style="color: #004993;">Rectangle</span><span style="color: #000000;">&#40;</span><span style="color: #004993;">stage</span>.<span style="color: #004993;">mouseX</span>, <span style="color: #004993;">stage</span>.<span style="color: #004993;">mouseY</span>,
                unscaledWidth, unscaledHeight<span style="color: #000000;">&#41;</span>;
            <span style="color: #004993;">stage</span>.<span style="color: #004993;">addEventListener</span><span style="color: #000000;">&#40;</span><span style="color: #004993;">MouseEvent</span>.<span style="color: #004993;">MOUSE_UP</span>, stage_mouseUpHandler<span style="color: #000000;">&#41;</span>;
            <span style="color: #004993;">stage</span>.<span style="color: #004993;">addEventListener</span><span style="color: #000000;">&#40;</span><span style="color: #004993;">MouseEvent</span>.<span style="color: #004993;">MOUSE_MOVE</span>, stage_mouseMoveHandler<span style="color: #000000;">&#41;</span>;
        <span style="color: #000000;">&#125;</span>
        <span style="color: #0033ff; font-weight: bold;">private</span> <span style="color: #339966; font-weight: bold;">function</span> stage_mouseUpHandler<span style="color: #000000;">&#40;</span>event<span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">MouseEvent</span><span style="color: #000000;">&#41;</span><span style="color: #000000; font-weight: bold;">:</span><span style="color: #0033ff; font-weight: bold;">void</span>
        <span style="color: #000000;">&#123;</span>
            dragData = <span style="color: #0033ff; font-weight: bold;">null</span>;
            <span style="color: #004993;">stage</span>.<span style="color: #004993;">removeEventListener</span><span style="color: #000000;">&#40;</span><span style="color: #004993;">MouseEvent</span>.<span style="color: #004993;">MOUSE_UP</span>, stage_mouseUpHandler<span style="color: #000000;">&#41;</span>;
            <span style="color: #004993;">stage</span>.<span style="color: #004993;">removeEventListener</span><span style="color: #000000;">&#40;</span><span style="color: #004993;">MouseEvent</span>.<span style="color: #004993;">MOUSE_MOVE</span>, stage_mouseMoveHandler<span style="color: #000000;">&#41;</span>;
        <span style="color: #000000;">&#125;</span>
        <span style="color: #0033ff; font-weight: bold;">private</span> <span style="color: #339966; font-weight: bold;">function</span> stage_mouseMoveHandler<span style="color: #000000;">&#40;</span>event<span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">MouseEvent</span><span style="color: #000000;">&#41;</span><span style="color: #000000; font-weight: bold;">:</span><span style="color: #0033ff; font-weight: bold;">void</span>
        <span style="color: #000000;">&#123;</span>
            <span style="color: #0033ff; font-weight: bold;">if</span> <span style="color: #000000;">&#40;</span><span style="color: #000000; font-weight: bold;">!</span>resizable<span style="color: #000000;">&#41;</span> <span style="color: #0033ff; font-weight: bold;">return</span>;
            <span style="color: #6699cc; font-weight: bold;">var</span> w<span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">Number</span> = dragData.<span style="color: #004993;">width</span> <span style="color: #000000; font-weight: bold;">+</span> <span style="color: #004993;">stage</span>.<span style="color: #004993;">mouseX</span> <span style="color: #000000; font-weight: bold;">-</span> dragData.<span style="color: #004993;">x</span>;
            <span style="color: #6699cc; font-weight: bold;">var</span> h<span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">Number</span> = dragData.<span style="color: #004993;">height</span> <span style="color: #000000; font-weight: bold;">+</span> <span style="color: #004993;">stage</span>.<span style="color: #004993;">mouseY</span> <span style="color: #000000; font-weight: bold;">-</span> dragData.<span style="color: #004993;">y</span>;
&nbsp;
            <span style="color: #004993;">width</span> = <span style="color: #004993;">Math</span>.<span style="color: #004993;">min</span><span style="color: #000000;">&#40;</span>maxWidth, <span style="color: #004993;">Math</span>.<span style="color: #004993;">max</span><span style="color: #000000;">&#40;</span>minWidth, resizeHandle.<span style="color: #004993;">width</span>, w<span style="color: #000000;">&#41;</span><span style="color: #000000;">&#41;</span>;
            <span style="color: #004993;">height</span> = <span style="color: #004993;">Math</span>.<span style="color: #004993;">min</span><span style="color: #000000;">&#40;</span>maxHeight, <span style="color: #004993;">Math</span>.<span style="color: #004993;">max</span><span style="color: #000000;">&#40;</span>minHeight, resizeHandle.<span style="color: #004993;">height</span>, h<span style="color: #000000;">&#41;</span><span style="color: #000000;">&#41;</span>;
        <span style="color: #000000;">&#125;</span>
    <span style="color: #000000;">&#125;</span>
<span style="color: #000000;">&#125;</span></pre></td></tr></table></div>

<p>いろいろ実装のやり方はあると思うけどかなりシンプルな方法でやってみました。</p>
<p><code>resizable</code> プロパティでリサイズのオン／オフができます。</p>
<p>解説するところが特にないほど簡単！</p>
]]></content:encoded>
			<wfw:commentRss>http://nariyu.playwell.jp/2009/08/flex-resizable-panel/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
