플렉스 페이징 게시판
대략 위와 같은 모습으로...
티스토리 블로그 페이징 처럼 해보고 싶었습니다.
전체 페이지를 구해와서 이를 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;
}
}
}
}
}
삽질의 연속 =ㅁ=
플렉스 프로젝트 중에서 FDS 와 연동해서 프로그래밍을 할려면
당연한 이야기지만 프로젝트 생성시 FDS와 연동 한다를 선택해서 프로젝트를 만들어야한다..
처음에 기본 프로젝트로만 책 예제 하는 중이어서...
책에 있는 예제가 안되길래 완전 삽질중이었는데..
프로젝트를 새로 생성후 하면 되다니...oops...
또... 데이터베이스와 연동하는것도 삽질중 =_=
무슨 jrun4 설치할때 자동으로 설치되는 데이터베이스를 사용해서
메모리에 올려서 사용한다는데...
그놈의 경로 때문에 -_-;;; 틀림없이 경로가 틀린거 같은데 어찌 고쳐야 되는겨!! ;ㅅ;
