PureMVC를 이용한 로그인 구현.
뭐 영문 사이트 찾아 보면 많이 있고 pureMVC 사이트 가면 있으면서도..
영어로 되서 어려우니 겸사겸사 공부할겸 .. =ㅁ=..
천천히 조금씩 작성해 봐야지. 으케케케
플렉스 페이징 게시판
대략 위와 같은 모습으로...
티스토리 블로그 페이징 처럼 해보고 싶었습니다.
전체 페이지를 구해와서 이를 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;
}
}
}
}
}
FLEX 회원 가입 만들기.
설계도 완벽하지 않고
그냥 공부하면서 기능 하나씩 첨부해서 진행 할 생각이다.
이클립스 3.4 가니메데 에다가 플렉스 빌더 플러그인 설치하고.
라이프사이클 설치, 톰캣 6.0, mysql 로 작업을 진행하는 중이다.
메인 화면에서 회원 가입을 눌르면 새 창이 팝업 되면서 회원 가입창을 보여주는 형식이다.
메인 화면
저기 로그인 옆에 regist member를 누르게 되면 아래와 같은 팝업창이 생성된다.
PopUpManager.centerPopUp(_register);
회원 가입 팝업창 Register
데이터 베이스와 연결하는게 좀 시간이 걸렸다.
services-config.xml 파일을 변경 했는데 변경 사항이 적용되지 않아서 -_-;;
services-config.xml 파일에 추가하여야 할 코드.
my-amf의 url 끝(/amf 를 /amf2로 바꾸는 것을 잊지 말아야 한다.)
<channel-definition id="dblab-amf-channel" class="mx.messaging.channels.AMFChannel">
<endpoint url="http://{server.name}:{server.port}/DBLab.net/messagebroker/amf" class="flex.messaging.endpoints.AMFEndpoint"/>
<properties>
<polling-enabled>false</polling-enabled>
</properties>
</channel-definition>
remoting-config.xml에 추가하여야 할 코드
<channel ref="dblab-amf-channel"/>
<channel ref="my-amf"/>
</default-channels>
<destination id="register">
<properties>
<source>register.RegisterImpl</source>
</properties>
</destination>
일단 이렇게 하면 플렉스에서의 설정은 끝난다.
그다음에 해야할 것이 데이터베이스와 연결하는 자바 코드를 작성해야 한다.
RegisterImpl의 회원 가입 코드
try {
Class.forName("com.mysql.jdbc.Driver");
String url = "jdbc:mysql://localhost:3306/DBLab?characterEncoding=UTF-8";
String id = "root";
String password = "root";
Connection conn = DriverManager.getConnection(url, id, password);
Statement stmt = conn.createStatement();
String sql = "insert into member(MEMBER_email, MEMBER_password, MEMBER_name)" +
" values('" + member.get(0).get("email") + "', '" + member.get(0).get("password") + "', '" +
member.get(0).get("name") + "')";
stmt.close();
conn.close();
} catch (Exception e) {
System.out.println(e);
} finally {
}
}
아 심플해~
나중에 좀 더 이해도가 올라가면 ibatis나 hibernate를 적용해 봐야겠다.
잘 모르는건 댓글달아 주셔요.
