플렉스 페이징 게시판
대략 위와 같은 모습으로...
티스토리 블로그 페이징 처럼 해보고 싶었습니다.
전체 페이지를 구해와서 이를 10개씩 보여주고
나누어서 페이징을 구분 하였습니다.
이전, 이후 버튼을 추가 하여 이동 가능 하고
직접 페이지를 선택해서 이동 가능 합니다.
페이지는
5페이지가 넘을 경우
1 | ... 페이지 |...| 마지막 페이지
이런 형식으로 보여주게 되잇고 5페이지씩 보여지게 되어 있습니다.
현제 페이지는 위 스크린 샷 처럼 빨간 색으로 나타 나게 되어있습니다.
자 이제 소스를 보면...
디비 부분은 생략 하였습니다.
으하 복잡 합니다 ;ㅁ;
페이징은 어플리케이션 컨트롤 바에 만들었습니다.
이전, 이후 버튼은 기본 컨트롤 바(navBar)에 있고
내부에 어플리케이션 컨트롤 바(pageBar)를 한개 더 추가해서
거기다가 숫자 페이징을 적용 했습니다.
페이지를 이동 할 때마다 setPageBar()를 호출해서 pageBar를 다시 그리는게 핵심포인트!!!
소스 설명은.. 쉬어서 하지 않겠습니다 ;ㅁ;
리팩토링 안했습니다. ;ㅁ;
보여줄 페이지를 수정 하기 위해서는 수작업을 해야 합니다. (심볼릭 정수로 치환하세요 ;ㅁ;)
나중에 컴포넌트로 배포 가능 해지면 올려보겠습니다. ㅜ_ㅠ
==================================================
간단한 리팩토링을 했습니다.
보여줄 페이지를 심볼릭 정수로 -ㅁ-..viewPage
그리고 페이지 만드는 과정에서 중복이 있길래 이를
makePage()라는 함수로 뽑아서 만들었습니다.
덕분에 소스가 줄어들고 약간 읽기 쉽게 되었습니다.
5페이지 이상일때만
1 | 페이지 | ... 마지막 페이지
이렇게 보이도록 수정했습니다.
스샷 보면 5페이지 이하 인데도
.... | 5 이렇게 되어있었습니다.
private var currentPage:int;
private var _label:Label;
private var _vRule:VRule;
private function setPageBar():void {
var viewPage:int = 5;
var i:int;
var dotLabel:Label = new Label();
dotLabel.text = "...";
var vRule:VRule = new VRule();
vRule.height = 10;
var firstLabel:Label = new Label();
firstLabel.text = "1";
firstLabel.addEventListener(MouseEvent.CLICK, labelClickEvent);
var lastLabel:Label = new Label();
lastLabel.text = totalPage.toString();
lastLabel.addEventListener(MouseEvent.CLICK, labelClickEvent);
if (totalPage > viewPage) {
if (currentPage < viewPage) {
for (i = 1; i < viewPage + 1; i++) {
makePage(i);
}
} else if (currentPage >= viewPage) {
pageBar.addChild(firstLabel);
pageBar.addChild(vRule);
pageBar.addChild(dotLabel);
vRule = new VRule();
vRule.height = 10;
pageBar.addChild(vRule);
for (i = (currentPage - 1); i < (currentPage + 4); i++) {
makePage(i);
}
}
} else {
for (i = 1; i < totalPage; i++) {
makePage(i);
}
}
if (totalPage == currentPage + 1) {
lastLabel.setStyle("color", "Red");
pageBar.addChild(lastLabel);
} else if (totalPage < viewPage + 1){
pageBar.addChild(lastLabel);
} else {
dotLabel = new Label();
dotLabel.text = "...";
pageBar.addChild(dotLabel);
vRule = new VRule();
vRule.height = 10;
pageBar.addChild(vRule);
pageBar.addChild(lastLabel);
}
}
private function labelClickEvent(event:MouseEvent):void {
var page:int = parseInt(event.target.text, 0);
noticeList.movePage(page);
pageBar.removeAllChildren();
setPageBar();
}
// 페이지 만드는 함수
private function makePage(i:int):void {
_label = new Label();
_label.text =
i.toString();
if (i - 1 == currentPage)
{
_label.setStyle("color", "Red");
}
if (i > totalPage - 1) return;
_label.addEventListener(MouseEvent.CLICK,
labelClickEvent);
_vRule = new VRule();
_vRule.height = 10;
pageBar.addChild(_label);
pageBar.addChild(_vRule);
}
//
이전, 이후 버튼 클릭시 사용 하기 위해서 만들었습니다.
private function
buttonDownHandler(event:FlexEvent):void {
var type:String =
event.target.label;
if (type == "Previous")
{
noticeList.previousPage();
pageBar.removeAllChildren();
setPageBar();
nextBtn.enabled
= true;
if (noticeList.getCurrentPage() == 0)
{
previousBtn.enabled = false;
}
} else if (type
== "Next")
{
noticeList.nextPage();
pageBar.removeAllChildren();
setPageBar();
previousBtn.enabled
= true;
if (noticeList.getCurrentPage() == noticeList.getTotalPage())
{
nextBtn.enabled = false;
}
}
}
}
}
