Home | Experience | Guestbook | Admin | About
 
AshUIC 씨리즈는 게으름으로 작년 10월 이후 중단 되었다가 요며칠 겨우 완성시켰다.  계획은 AshComboBox까지는 완료한 후  AshUIC는 일단락 지을 생각이다. (구성요소 작업은 솔직히 너무 고되다...)

우선 AshScrollPane은 애플리케이션에서 대부분 사용되는 container, frame 등으로 생각할수 있다. 스크롤패널이 포함되는 최상위 코어임으로 List, Pane,Frame,ImageViewer 등 모든 시각적 스크롤을 가진 컨테이너에서는 대부분 사용할수 있는 유용한 구성요소이다.
본 클래스의 장점은 클래스편에도 소개했지만, 기존 ScrollPane들이다소 협소한 기능을 혹은 추가로 구현을 해야 하는 모든 기능들을 코어단계에서 함축시켰다는데 있다. 사용성을 극대화한 커스텀 스타일, 스크롤바변경, 모셔닝, scrollRectmask 의 두가지 형식을 모두 지원함으로써 원천적인 그래픽표현의 애러를 막고, 핸드드래깅 등도 추가됬다.


EDIT | DELETE
 F   ? 
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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
/**
 Class Name : 	AshScrollPane
 Author : 		An.sehan (www.happyfri.com / plandas@gmail.com)
 Creation Date : 	2009.10.20
 Last Modified : 	2001.03.09
 Version : 		1.4


@ description |
 	
	- 본 클래스는 ScrollPane(Scrollable Panel) 최상위 클래스로 스크롤바가 기본 내재되어 있어, 스크롤처리가 필요한 모든 확장 구성요소에서 이클래스를 확장하여
	  컨테이너(Frame, List, ImageViewer...) 로 사용될 수 있으며 본 클래스를 확장하여 직접 컨텐츠 패널로도 사용할 수 있다.
	
	- 컨텐츠 패널이 필요한 모든 하위클래스나 런타임에 저작툴에서 이에 대한 구성요소가 필요할 경우 본 클래스를 이용한다.
	
	- 본클래스는 기존 scrollPane들과는 다르게 다음과 같은 유용한 기능들이 기본적으로 내장되어 있다.
		
		1. 스크롤처리에 있어 scrollRect와 mask 두가지 방식을 선택적으로 사용할수 있다.물론 런타임상에서 바로 속성으로 교체가 가능하다. - 디폴트는 scrollRect
		(기존 다른 클래스들의 스크롤팬은 scrollRect로 대부분 구현되어 있는데 이경우 필터가 포함된 대상이 컨텐츠로 사용될경우 간혹 깨진 현상이 발생할수 있다.
		따라서 이런경우 mask 방식으로 그부분을 원천적으로 해결할수 있다.
		참고로 scrollRect는 픽셀단위로 떨어지기 때문에 모션처리를 함께 사용(useMotionToScroll)한다고 한다면 이때는 mask 방식이 더 부드럽게 모셔닝되는것을
		확인할 수 있다.
		
		2.스크롤바에 visible/overflow 대한 scrollPolicy에서  3가지 속성을 지원한다.(auto/on/off)
		
		3. autoUpdateToChangeContent 속성을 사용해서 content영역에 대한 오토 detecting 기능을 수행해서 변경된 스크롤영역에 대해 자동 갱신처리를 수행할수 있다.
		
		4. 스크롤처리에 있어 모션방식을 기본탑재하고 있다.(useMotionToScroll 속성이 true로 셋팅되면 모션처리가 자동수행되며 모션엔진은 AshTween임으로 
		 역시 런타임에 모션형태에 대한 변경도 가능하다.)
		 
		5. Content Area, 스크롤바의 위치, 사이즈 등에 대한 기본 스타일셋을 지원한다.
		
		6. 핸드드래그 속성을 지원함으로 런타임에 손모양으로 직접 컨텐츠 드래깅도 가능하여 관련 애플리케이션 구현을 할때 유용하게 사용할수 있다.


	 
 @Event |
 
 	[ash3.uic.core.AshUIC]
		addEventListener(AshUICEvent.PROPERTY_CHANGE, listener);
		addEventListener(AshUICEvent.MOVE, listener);
		addEventListener(AshUICEvent.RESIZE, listener);
		addEventListener(AshUICEvent.DRAW, listener);
		addEventListener(AshUICEvent.FIRST_DRAW, listener);
		addEventListener(AshUICEvent.SHOW, listener);
		addEventListener(AshUICEvent.HIDE, listener);
		addEventListener(AshUICEvent.PAINT, listener);
	
	[ this class]
	
		- diapatchEvent the (ash3.uic.AshScrollBar)
			addEventListener(AshEvent.SCROLLING, listener); 	// position(scroll)이 변경되었을때, 즉 스크롤되었을때 발생 / 파라미터값 { value:value, position:position }
			addEventListener(AshEvent.SCROLLED, listener); // value 값을 직접 변경했을때 발생 - 이 클래스에서는 scrollTo, scrollBy, scrollX, scrollY 같은 속성과 메소드를 
														 // 시행했을때 발생된다. /  파라미터값 { value:value, position:position }
													
		ddEventListener(AshEvent.AUTO_UPDATE, listener); // 자동업데이트 설정(autoUpdateToChangeContent = true)이 되어있을때 자동 업데이트가 시행될때 호출,
			
	
		
		
@Uage |

	import ash3.uic.AshScrollPane;

	var asp:AshScrollPane = new AshScrollPane;
	addChild(asp);

	// 사이즈를 150,150 영역으로 조정
	asp.resize(150,150);

	// content 영역에 테스트를 위해 기본 content1을 추가시킴
	asp.content.addChild(new Content1);


	// 랜덤 버튼을 클릭할때 스크롤팬 모셔닝으로 리사이징
	btn_ranSize.addEventListener('click', function(e) {
		 asp.motioner.width = Math.random()*300+150;
		 asp.motioner.height = Math.random()*300+150;
	});


	// 랜덤 컨텐츠 영역사이즈 버튼을 클릭할때 스크롤팬의 contentLayoutStyle을 변경해서 런타임에 스타일을 바로 적용
	btn_conSize.addEventListener('click', function(e) {
		asp.contentLayoutStyle = { top:Math.random()*10, right:Math.random()*10, bottom:Math.random()*10, left:Math.random()*10 };
	});


	// 랜덤 스크롤바 스타일변경 버튼을 클릭할때 스크롤바에 커스텀 스타일을 바로 적용 
	btn_ran_sb.addEventListener('click', function(e) {
		asp.hScrollBarLayoutStyle = {right:Math.random()*10, bottom:Math.random()*10, left:Math.random()*10, size:Math.random()*20+16 };
		asp.vScrollBarLayoutStyle = {top:Math.random()*10, right:Math.random()*10, bottom:Math.random()*10, size:Math.random()*20+16 };
		
		asp.hScrollBar.motioner.uicColor = uint(Math.random()*0xffffff);
		asp.vScrollBar.motioner.uicColor = uint(Math.random()*0xffffff);
	});


	// 컨텐츠 추가 버튼을 클릭할때마다  컨텐츠위치조정과 함께 추가(스크롤영역 변경확인을 위해)
	btn_addCon.addEventListener('click', function(e) {
		var lc = asp.content.getChildAt(asp.content.numChildren-1);
		var con = asp.content.addChild(new Content2);
		con.x = lc.x+50;
		con.y = lc.y+50;
	});


	// 마스크 사용버튼을 클릭할때 scrollRect/mask  를 토글 설정
	btn_use_mask.addEventListener('click', function(e) {
		asp.useMaskToScroll = e.currentTarget.selected;
	});

	// 모션 사용버튼을 클릭할때 스크롤처리를 할때 모션 처리를 할지를 토글 설정
	btn_use_motion.addEventListener('click', function(e) {
		asp.useMotionToScroll = e.currentTarget.selected;
	});


	// 핸드 드래그 버튼을 클릭할때 스크롤처리를 할때 handDrag 사용을 할지를 토글 설정
	btn_use_hd.addEventListener('click', function(e) {
		asp.handDrag = e.currentTarget.selected;
	});
	


*/
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////


package ash3.uic
{

public class AshScrollPane extends AshUIC
{

	
	/**@ The list of instance naming for user's custom skin.
	*/
	public var skin_hScrollBar:AshScrollBar, skin_vScrollBar:AshScrollBar;
	

	/**
	 * The container that contains the all contents to be used in the panel.
	 * @description |
		- 현재 패널에서 사용되고 있는 모든 content를 수용하는 frame엘리먼트이다.
	 */	
	public function get content():Sprite;
	
	/**@ The horizontal scrollbar of scrollpane.
	*/
	public function get hScrollBar():AshScrollBar;
	
	/**@ The vertical scrollbar of scrollpane.
	*/
	public function get vScrollBar():AshScrollBar;
	
	
	/**
	 * Gets or sets a value that indicates the state of the horizontal scroll
		 * bar. A value of <code>ScrollPolicy.ON</code> indicates that the horizontal 
		 * scroll bar is always on; a value of <code>ScrollPolicy.OFF</code> indicates
		 * that the horizontal scroll bar is always off; and a value of <code>ScrollPolicy.AUTO</code>
		 * indicates that its state automatically changes. This property is used with 
	 * other scrolling properties to set the <code>setScrollProperties()</code> method
		 * of the scroll bar.
		 *
		 * @default ScrollPolicy.AUTO
	 *
	 */
	public function get hScrollPolicy():String;
	public function set hScrollPolicy(value:String):void;
	public function get vScrollPolicy():String;
	public function set vScrollPolicy(value:String):void;
		
	
	/** If this value is true, when content is changed, automatically update method execute.
	 *@description |
		- 이 값은 true로 셋팅되면 content에 사용자가 addChild 메소드로 어떤 자식요소를 추가시키거나 content 영역의 변화로 스크롤 값에 변경될때
		자동으로 update 메소드가 실행되어 최신상태를 바로 반영시킨다. 즉, 1초간격으로 상태체킹후 영역 변화가 있을시 자동으로 update 처리를 수행한다.
		단, 묵시적으로 스크롤팬 영역변경에 대해 update메소드를 호출할필요는 없다.
		만약 이 값이 false라면 당연 content내용이나 위치가 변경되어 스크롤영역이 바뀐다고 판단될때 반드시 update메소드를 호출해야 한다.
		이를테면 addChild 메소드로 content 에 자식요소를 추가하거나등...
	*/
	public function get autoUpdateToChangeContent():Boolean;
	public function set autoUpdateToChangeContent(value:Boolean):void;

	
	/** Uses the mask for scrollling of the content.
	 * @description |
		- 스크롤링 처리를 위해 DisplayObject.scrollRect가 아닌 DisplayObject.mask를 사용한다. 
		 기본값은 본 content에서 구현된 scrollRect로 처리되지만 scrollRect로 가끔 렌더링처리가 원할하지 못하거나
		무조건적으로 mask 방식을 이용하여 처리하고자 할때 이 값을 런타임에 적용할 수 있다.
	*/
	public function get useMaskToScroll():Boolean;
	public function set useMaskToScroll(value:Boolean):void;
	
	

	/**Drags the content as hand cursor type of the mouse.
	 *@description |
		- content를 손모양의 커서로 드래그 가능하도록 설정한다.
	 */
	public function get handDrag():Boolean;
	public function set handDrag(value:Boolean):void;
	
	
	/**
	 * The layout style of the content to use in abounds in the AshScrollPane.
	 * @style parameters |
		- top: 	top margin
		- right: 	rigth margin
		- bottom: bottom margin
		- left: 	left margin
	 * @usage
		- contentLayoutStyle = { top:0, right:1, bottom:1, left:2 } // top 0px, right 1px, bottom 1px, left 2px

	 * @description |
		- content의 레이아웃 포지션에 대한 스타일로 각 구획별로 마진값이 적용된다.
	 */
	public function get contentLayoutStyle():Object;
	public function set contentLayoutStyle(value:Object):void;
	
	
	/** The scrollbar's style to be used in the style of the layoutManager.
	 * @style parameters |
	 * 
	  - hScrollBarLayoutStyle
		- right: 	right margin
		- bottom: bottom margin
		- left: 	left margin
		- size: 	scrollbar height
		
	  - vScrollBarLayoutStyle
		- top: 	top margin
		- right: 	rigtht margin
		- bottom: bottom margin
		- size: 	scrollbar width
		
	 * @usage
		hScrollBarLayoutStyle = {right:2, bottom:1, left:0, size:15 }; // right 2px, bottom 1px left 0px, size:15(height)
		vScrollBarLayoutStyle = {top:0, right:0, bottom:0, size:20 }; // top 0px, right 0px bottom 0px, size:20(width)
		※ if the property is null, the relative marign is not applyed.

	 * @see ash3.core.AshLayoutManager.addList
	*
	 *@description |
		- 스크롤바의 레이아웃 포지션 스타일을 정하는것으로 size는 각 포지션별로 스크롤바의 크기(width or height)가 되고
		나머지 요소들은 실제 전체 레이아웃에서 위치한 각 바운딩영역의 마진이이 된다.
		일예로 vertical scrollBar는 top, right, bottom의 마진과 size(width)를 정의할수 있고
		horizontal scrollBar는 right, bottom, left의 마진과 size(height) 를 정의할 수 있다.
		
		※ 만약 해당 포지션의 속성값이 null이라면 해당 포지션의 마진은 적용되지 않는다. 
		따라서 top-bottom 에서 둘 중 하나의 속성이 null이라면 vScrollBar 같은경우 높이조절이 적용되지 않고 left-right에서  둘 중 하나의 속성이 
		null이라면 역시 width폭 조절은 적용되지 않는다. (AshLayoutManager 의 특성을 그대로 답습하고 있다.)
	*/
	public function get hScrollBarLayoutStyle():Object;
	public function set hScrollBarLayoutStyle(value:Object):void;
	
	public function get vScrollBarLayoutStyle():Object;
	public function set vScrollBarLayoutStyle(value:Object):void;
	


	/**
	 * @ Scrolls the content to the specified value x and y.
	 * descrition |
		- 지정된 위치로 스크롤처리를 수행한다.
	 */	
	public function get scrollX():Number;
	public function set scrollX(value:Number):void;
	public function get scrollY():Number;
	public function set scrollY(value:Number):void;


	/**@ Constructor
	*/
	function AshScrollPane();
	
	
	/**
	 * @ Updates the system in a latest
	 * description |
		- 컨텐츠 영역에 어떤 변화가 있을때 이 메소드를 호출해야 한다. 기본적으로는 내부적으로 자동업데이트가 수행되지만 autoUpdateToChangeContent = false 로 셋팅되었을때, 
		혹은 컨텐츠의 최신업데이트 사항을 바로 즉각적으로 처리하고자 할때(auto update는 1초의 딜레이가 있음) 또는 묵시적으로 업데이트 시키고자할때  이메소드를 호출해서 컨텐츠의 
		상태에따른 스크롤영역을 최신상태로 반영시킨다.
	*
	 * usage|
		import ash3.uic.AshScrollPane;
		var asp:AshScrollPane = new AshScrollPane;
		asp.content.addChild(myImg);
		asp.update();
	 */
	public function update():void;
	
	
	/**
	 * @ Scrolls the content to the specified value x and y.
	 * @param	x : The hScroll position value to scroll.
	 * @param	y: The vScroll position value to scroll.
	 * descrition |
		- 지정된 위치로 스크롤처리를 수행한다.
	 */
	public function scrollTo(x:Number, y:Number):void;
	
	/**
	 * @ Scrolls the content to the specified value from the current value x and y.
	 * @param	x : The hScroll position value to scroll.
	 * @param	y: The vScroll position value to scroll.
	 * descrition |
		- 지정된 값만큼 현재의 값에서 상대적인 위치로 스크롤처리를 수행한다.
	 */	
	public function scrollBy(x:Number, y:Number):void;
	

}	
}

EDIT | DELETE
LINK • SUMMARY