'Flex' 태그의 글 목록

2008. 8. 11. 23:45

[ Flex ] 플렉스 게시판 만들기 프로젝트 - [ php 연동 제1편 ]

2008. 8. 11. 23:45 in 실무 프로젝트

오늘은 예정에 없었지만 꼭 필요할것 같아 보너스타임을 가져볼까 합니다..^^

현재 진행중인 플렉스게시판은 서버사이드 스크립트로 php 를 사용합니다.

오늘은 설정부분입니다.

php 를 통해 디비접근과 결과리턴의 방법에는 여러가지가 있겠습니다만 개발의 편리성을 최대한 고려하여
개발을 하도록 하겠습니다.

몇가지 중요한 사항은

1. 경로 - 땡땡슬래시 땡땡슬래시(../../) 이런방식의 경로지정은 하지 않습니다.
_PHP/ , _FLEX/ 와같이 한눈에 봐도 어떤 경로를 참조하는지 알도록 합니다.

2. 클래스 - php5 에서 지원하는 __autoload() 함수를 이용하여 include 없이 클래스를 사용하도록 합니다.

httpd.conf 의 VirTualHost 내에 아래 내용을 넣으면
사이트 로딩과 동시에 AutoLoad.php 를 읽습니다.

php_value auto_prepend_file "/home/Test/public_html/Site/_Config/AutoLoad.php"

그렇게 되면 클래스가 정의된 파일을 include 하지 않아도 정해진 디렉토리에서 해당클래스를 알아서
찾아서줍니다. 그냥

$DB = new DB();
$DB->Select();

뭐 이런식으로 바로 사용하면 되는겁니다.

AutoLoad.php

<?php

/*
*******************************************************************************
*
* 단어치환 및 __autoload() 를 통한 클래스자동로드 설정
*
********************************************************************************
*/

define ( '_SN', $_SERVER['SERVER_NAME'] ); // 서버명
define ( '_CLANG', $_SERVER['HTTP_ACCEPT_LANGUAGE'] ); // 사용언어(ko:한글, en:영어)
define ( '_PORT', $_SERVER['SERVER_PORT'] ); // 사용포트

define ( '_WS', (eregi('^windows',php_uname())) ? true : false ); // 윈도우 or 리눅스
define ( '_RE' , _WS ? "\r\n" : "\n" ); // 개행처리
define ( '_SEP' , _WS ? '\\' : '/' ); // 디렉토리 구분자
define ( '_DR', str_replace(_SEP, '/', $_SERVER['DOCUMENT_ROOT']) ); // Document Root

// define ('_ROOT', str_replace(_SEP, '/', dirname(__FILE__))); // Root of Framework
define ('_ROOT', "../"); // Root of Framework

define ( '_PHP', _ROOT.'/_PHP' ); // PHP Class
define ( '_JS', _ROOT.'/_JS' ); // JS Class
define ( '_CSS', _ROOT.'/_CSS' ); // CSS Class

define ('_HDIR', str_replace(_SEP, '/', realpath(getcwd())) ); // 현재 디렉토리의 절대경로
define ( '_CONFIG', _ROOT.'/_Config' ); // Config 파일의 경로

// Include Path 를 구한다.

function getIncludePath( $fileName, $Path='' )
{
if ( is_file(_PHP.'/'.$fileName.'.php') ) { return _PHP; }

$opath = @opendir( _PHP."/".$Path );

while( $dirName=readdir($opath) )
{
if ( ereg("^(\.|\.\.)$", $dirName) ) { continue; }

if ( is_dir(_PHP."/".$Path."/".$dirName) )

if ( $IPath = getIncludePath($fileName, $Path.'/'.$dirName) )
{
closedir( $opath );

return $IPath;
}
}

closedir( $opath );

return false;

}

// 클래스를 자동으로 읽어들임

function __autoload( $className )
{

if( !$Path = getIncludePath($className) )
{
echo $className.'.php File Not Found';
exit;
}
else { include_once $Path.'/'.$className.'.php'; }

}

?>

이렇게 하고 php 클래스를 _PHP 에다 만들어 놓으면 자동으로 찾아줍니다.

좀 어려운가요?? 자세한 적용사례는 제2탄에서.....

커밍쑤~~~~~ㄴ

Posted by 알 수 없는 사용자

2008. 8. 9. 12:56

[ Flex ] 플렉스 갤러리 슬라이더~~ gallery

2008. 8. 9. 12:56 in Flex Room/소스 자료실

오늘은 이미지갤러리를 하나 올립니다.
XML 파일을 읽어서 슬라이드 형식으로 뿌려주는 갤러리 하나 만들었습니다.

invalid-file

Posted by 알 수 없는 사용자

2008. 8. 7. 17:51

[ Flex ] 플렉스 게시판 만들기 프로젝트 - [ 기획 설계편 ]

2008. 8. 7. 17:51 in 실무 프로젝트

오늘은 플렉스게시판을 만들기 위해 필요한 관리자모드를 만들어 보겠습니다.

[ 포인트 ]

1. 플렉스에서 XML 을 다루는 방법 - 파일생성, 로드, 수정, 바인드

[ 기획 ]

1. 카테고리 생성은 XML 파일로 처리한다.
2. 디비로 처리하지 않는 이유는 게시판 카테고리가 통상 50개 미만이라고 봤을때 궂이
디비로 처리할 필요가 없고, 파일로 생성하고 읽는게 빠르다.
3. 만약 디비로 할 경우에는 XML 내용을 필드하나에 넣으면 됨.
4. A 카테고리를 생성하고 하위에 다시 A 카테고리에 B 카테고리를 생성할 경우 A 카테고리는 폴더가 되어야함.
따라서 XML 에서 idx="folder" 라면 해당노드는 하위노드를 가진다는 의미.
5. 폴더는 보드아이디, 보드이름 등등의 기본정보 이외에 태그허용과 같은 옵션처리는 불가능하게 처리함.
6. 폴더가 아닐 경우 게시판미리보기 버튼을 활성화 시키고 폴더일 경우 비활성화 시킴.
7. 보드생성일은 현재 시스템날짜를 받음.
8. 보드아이디와 생성일은 수정불가.
9. 카테고리는 드래그앤드롭을 이용하여 이동가능해야함.
10. 메뉴 선택시 - 수정, 신규생성시 - 저장 으로 버튼을 토글처리함
11. 기본정보 미입력등의 이유로 메세지를 출력하면 해당 필드로 포커스를 이동시킴
13. 게시판 아이디는 중복되면 곤란함.

[ 설계 ]

1. XML 을 읽고 쓰는데는 액션스크립트를 이용함.
2. 서버단의 처리는 php 로 처리함.
3. 디비를 이용하지 않으므로 XML 노드에 모든 정보를 담아야함.
4. 게시판 아이디의 중복을 피하기 위해 BoardID 로 검색하여 처리함.

[ 규칙 ]

1. 카테고리를 입력하여 추가버튼을 클릭시 및 수정, 삭제시 카테고리 하위의 전체저장 버튼을 반드시
클릭하여야 함 - php 단에서 파일을 생성시킴
2. 현재 관리자모드이므로 게시판미리보기 버튼은 안됨(?)..ㅋㅋ
3. 기술적인 부분은 소스를 참고하면 될듯 싶음..ㅎㅎ

소스 다운받기

invalid-file

Posted by 알 수 없는 사용자

2008. 8. 1. 10:56

[ Flex ] 플렉스 게시판 만들기 프로젝트 - [ 스토리보드편 ]

2008. 8. 1. 10:56 in 실무 프로젝트

플렉스를 이용하여 게시판을 만드는 과정을 시작부터 끝까지 단계별로 진행을 할까합니다.

순서는

1. 스토리보드편 - 전체적인 구상
2. 기획 설계편 - UI 형태와 디비구성에 대한 간단한 기획안작성
3. 데이타베이스 설계편 - DBDesiner 를 이용한 ERD 작성
4. UI 구성편 - 모든 UI 작성
5. 프로그래밍편 - 관리자모드 작성, 파일 업/다운로드, 갤러리, UCC, php 를 이용한 서버사이드 프로그램 작성

이렇게 구성하여 약 1개월정도 프로젝트로 하여 진행을 할까합니다.

mpg, avi, asf, wmv 등등의 동영상파일을 첨부하면 서버단에서 flv 파일로 자동으로 변환하여 재생시키는 부분,
서버와의 통신,
JS 와의 통신,
Ajax 활용,
동영상재생,
MP3 재생등등 ..

게시판이긴 하나 여러가지 간단하면서도 꼭 필요한 기능들을 삽입할 예정입니다...

단, 언제 제가 글을 올릴지는 저도 잘 모르겠네요...흐흐흐흐~~

Posted by 알 수 없는 사용자

2008. 8. 1. 10:24

[ Flex ] 꼭 필요한 Effect 활용 소스

2008. 8. 1. 10:24 in Flex Room/소스 자료실

이미지 혹은 Panel 등등을 회전시키거나 책넘기기등등.. 여러가지 Effect 를 사용할 수 있습니다.

invalid-file

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:distortion="view.distortion.*"
xmlns:sides="view.sides.*"
creationComplete="init();">

<mx:Script>
<![CDATA[

import com.adobe.ac.mxeffects.*;
import com.adobe.ac.util.*;
import com.adobe.ac.controls.*;

/*

몇가지 종류가 있으니 골라잡아서 이름만 샥샥 바꾸면 됩니다..

Flip, CubeRotate, Push, Pop, Door, Gate

*/

private function EffectTest( Cnt:int ) : void
{
var i:int;

var e:CubeRotate = new CubeRotate( img );
e.siblings= [ img ];
e.direction= DistortionConstants.TOP;
e.smooth= false;
e.duration = 500;
e.distortion= 25;

// 몇번 돌릴거지?
if ( Cnt > 1 )
{
for ( i=1; i<=Cnt; i++ )
{
e.play();
}

LoginResize2.play();
LoginResize2.stop();
LoginResize.play();
}
else { e.play(); }
}

// Effect 처리 두번째부분(e:이펙트명)
private function EffectTest2() : void
{
var i:int;

var e:Pop = new Pop( img ); // 이부분만 바꾸면 바로 적용됨
e.siblings= [ img ];
e.direction= DistortionConstants.TOP;
e.smooth= false;
e.duration = 500; // 시간조절
e.distortion= 25;

e.play(); // 실행(밑에 정의했음)
}

private var s:uint = 2;

// 시작시 발생하는 이벤트
private function init():void
{
img.addEventListener(Event.ENTER_FRAME, enterFrameHandler);
}

private function enterFrameHandler(e:Event):void
{
   if(img.x < 0) img.x += (0-img.x)/s;
   if(img.y < 0) img.y += (0-img.y)/s;
   if(img.x+img.width > pn.width) img.x += (pn.width-img.width-img.x)/s;
   if(img.y+img.height > pn.height) img.y += (pn.height-img.height-img.y)/s;
}

// 마우스 클릭시 드래그 시작
private function mouseDownHandler(e:MouseEvent):void
{
img.startDrag();
}

// 드래그 종료
private function mouseUpHandler(e:MouseEvent):void
{
img.stopDrag();
}

]]>
</mx:Script>

<mx:Resize id="LoginResize" target="{img}" widthTo="400" heightTo="400"/>
<mx:Resize id="LoginResize2" target="{img}" widthTo="200" heightTo="200"/>

<mx:Panel id="pn" title="꿈꾸던 그것-이미지 드래그 가능" width="500" height="500"
paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10" fontFamily="맑은고딕" fontSize="12" fontWeight="normal">
<mx:HBox width="100%" height="100%" horizontalAlign="center" verticalAlign="middle">
<mx:Image id="img" width="200" height="200" source="1.jpg"
mouseDown="mouseDownHandler(event)"
mouseUp="mouseUpHandler(event)" />
</mx:HBox>

<mx:ControlBar>
<mx:Button label="땡겨" click="LoginResize.end(); LoginResize.play();"/>
<mx:Button label="놔" click="LoginResize2.end(); LoginResize2.play();"/>
<mx:Button label="돌리" click="EffectTest(0);"/>
<mx:Button label="돌리면서 땡겨" click="EffectTest(3);"/>
<mx:Button label="버려" click="EffectTest2();"/>
</mx:ControlBar>

</mx:Panel>

</mx:Application>

Posted by 알 수 없는 사용자

2008. 8. 1. 10:01

[ Flex ] MP3 음악사이트를 빙자한 State 와 Effect 활용 소스

2008. 8. 1. 10:01 in Flex Room/소스 자료실

플렉스의 장점인 State 를 활용하여 화면전환하는 부분과

보통 쇼핑몰에서 많이 사용하는 하단에서 펼쳐지는 장바구니 기능을 State 를 이용해서 한번 만들어 봤습니다.

사실 다 마무리해서 올릴려고 했는데 만들다 말았지만 참고하시라고 올립니다...

뭐 딱히 설명할건 없는데 궂이 기능이라고 할거는

State Effect Test 부분에서 메뉴1 클릭시 화면전환되고 메뉴2 클릭시 다시 복귀합니다.

왼쪽 Tree 에 하위노드수출력되면서 mx.effects.easing 을 이용해서 펼쳐지면서 다소 설례바리 칩니다..ㅋㅋ

그리고 Tree 에서 기본적으로는 맨앞의 아이콘을 클릭해야 펼쳐지고 닫히는데 그냥 메뉴항목 클릭시 되도록 했습니다.

그리고 DataGrid 클릭시 해당 데이타를 상단에 뿌려주는 정도~~~

* 추가예정부분

1. mp3 재생
2. 동영상 재생
3. 디비와 연동

곧 올리겠습니다...^^;;

invalid-file

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
verticalAlign="middle"
horizontalAlign="center"
horizontalScrollPolicy="off"
verticalScrollPolicy="off">

<mx:Script>
<![CDATA[

import mx.events.MenuEvent;
import mx.controls.Alert;
import mx.events.ListEvent;
import mx.collections.ICollectionView;
import mx.effects.easing.*;

// 클릭시 해당 노드 오픈
private function itemClick( evt:ListEvent ):void
{
var item:Object = Tree( evt.currentTarget ).selectedItem;

if ( MenuList.dataDescriptor.isBranch(item) )
{
MenuList.expandItem( item, !MenuList.isItemOpen(item), true );
}
}

// 노드의 하위노드 갯수출력
private function labelFunction(item:XML):String
{
var children:ICollectionView;
var suffix:String = "";

if ( MenuList.dataDescriptor.isBranch(item) )
{
children = MenuList.dataDescriptor.getChildren( item );
suffix = " (" + children.length + ")";
}

return item[MenuList.labelField] + suffix;
}

]]>
</mx:Script>

<mx:states>
<mx:State name="Menu2">
<mx:SetProperty target="{RightMenu}" name="height" value="542"/>
<mx:SetProperty target="{RightMenu}" name="y" value="247"/>

<mx:SetProperty target="{TopMenu}" name="x" value="936"/>
<mx:SetProperty target="{TopMenu}" name="width" value="155"/>

<mx:RemoveChild target="{BottomMenu}"/>

<mx:SetProperty target="{LeftMenu}" name="width" value="798"/>
<mx:RemoveChild target="{StatusBar}"/>
</mx:State>

<mx:State name="PanelUp">
<mx:SetProperty target="{StatusBar}" name="y" value="600"/>
<mx:RemoveChild target="{form1}"/>

<mx:AddChild relativeTo="{canvas1}" position="lastChild">
<mx:Form width="288" height="112" x="224" y="10"
horizontalScrollPolicy="off" verticalScrollPolicy="off"
backgroundColor="#F2EDA2">
<mx:FormItem label="이름" backgroundColor="#9EF551" id="formitem0" fontFamily="Monaco" fontSize="12">
<mx:Label text="{dg.selectedItem.name}" color="#094BA5" width="198" id="label0"/>
</mx:FormItem>
<mx:FormItem label="연락처" backgroundColor="#9EF551" id="formitem4" fontFamily="Monaco" fontSize="12">
<mx:Label text="{dg.selectedItem.phone}" color="#094BA5" width="198" id="label4"/>
</mx:FormItem>
<mx:FormItem label="이메일" backgroundColor="#9EF551" id="formitem5" fontFamily="Monaco" fontSize="12">
<mx:Label text="{dg.selectedItem.email}" color="#094BA5" width="198" id="label5"/>
</mx:FormItem>
</mx:Form>
</mx:AddChild>
</mx:State>

</mx:states>

<mx:transitions>

<mx:Transition id="myTransition" fromState="*" toState="*">
<mx:Parallel id="t1" targets="{[LeftMenu, TopMenu, RightMenu]}">
<mx:Move duration="450"/>
<mx:Resize duration="450"/>
<mx:Iris targets="{[BottomMenu]}" duration="450"/>
</mx:Parallel>
</mx:Transition>

<mx:Transition id="myTransition2" fromState="*" toState="PanelUp">
<mx:Parallel id="t2" targets="{[StatusBar]}">
<mx:Move duration="350"/>
</mx:Parallel>
</mx:Transition>

<mx:Transition id="myTransition3" fromState="PanelUp" toState="*">
<mx:Parallel id="t4" targets="{[StatusBar]}">
<mx:Move duration="350"/>
</mx:Parallel>
</mx:Transition>

</mx:transitions>

<mx:XMLList id="treeData">
   <node label="장르목록">
   <node label="락발라드">
   <node label="Marketing"/>
   <node label="Product Management"/>
   <node label="Personal"/>
   </node>
   <node label="하드락">
   <node label="Professional"/>
   <node label="Personal"/>
   </node>
</node>
</mx:XMLList>

<mx:XMLList id="treeData2">
   <node label="가수목록">
   <node label="이승철">
   <node label="1집"/>
   <node label="2집"/>
   </node>
</node>
</mx:XMLList>

<mx:XMLList id="employees">
<employee>
<name>서현주</name>
<phone>010-111-2222</phone>
<email>Jooooo@teamflex.co.kr</email>
<active>true</active>
</employee>
<employee>
<name>박은미</name>
<phone>010-222-3333</phone>
<email>Meeeee@teamflex.co.k</email>
<active>true</active>
</employee>
<employee>
<name>김해년</name>
<phone>010-333-4444</phone>
<email>Nyunnnnn@teamflex.co.k</email>
<active>false</active>
</employee>
</mx:XMLList>

<mx:XMLList id="employees2">
<employee>
<subject>깊은밤의 서정곡</subject>
<singer>블랙홀</singer>
<album>블랙홀 1집</album>
</employee>
<employee>
<subject>깊은밤의 장송곡</subject>
<singer>블랙헐</singer>
<album>블랙헐 100집</album>
</employee>
<employee>
<subject>짜린밤의 서정곡</subject>
<singer>쩔은헐</singer>
<album>쩔은 39집</album>
</employee>
</mx:XMLList>

<mx:Canvas x="0" y="0" width="100%" height="100%">
<mx:Panel x="130" y="39" width="155" height="750" layout="absolute" id="LeftMenu" title="Tab Part">
<mx:TabNavigator x="5" y="10" width="90%" height="90%" fontFamily="Monaco" fontSize="12">
<mx:Canvas label="장르" width="100%" height="100%" fontFamily="Monaco" fontSize="9">
<mx:Tree x="5" y="5" width="90%" height="90%"
fontFamily="Monaco" fontSize="12"
dataProvider="{treeData}"
labelField="@label"
   showRoot="false"
   openEasingFunction="Bounce.easeOut"
labelFunction="labelFunction"
itemClick="itemClick(event);"
   id="MenuList"></mx:Tree>
</mx:Canvas>
</mx:TabNavigator>
</mx:Panel>
<mx:Panel x="293" y="39" width="635" height="200" layout="absolute" id="TopMenu" title="Stete Effect 테스트">
<mx:HBox x="0" y="0" width="100%" height="100%" horizontalAlign="center" verticalAlign="middle">
<mx:HBox width="100%" height="100%" horizontalAlign="center" verticalAlign="middle">
<mx:Canvas width="100%" height="100%" horizontalScrollPolicy="off" verticalScrollPolicy="off" id="canvas1">
<mx:Form width="288" height="112" x="224" y="10"
horizontalScrollPolicy="off" verticalScrollPolicy="off"
backgroundColor="#F2EDA2" id="form1">
<mx:FormItem label="앨범" backgroundColor="#9EF551" id="formitem3" fontFamily="Monaco" fontSize="12">
<mx:Label text="{dg2.selectedItem.album}" color="#050595" width="198" id="label3" fontWeight="normal" fontFamily="Monaco" fontSize="12"/>
</mx:FormItem>
<mx:FormItem label="제목" backgroundColor="#9EF551" id="formitem1" fontFamily="Monaco" fontSize="12">
<mx:Label text="{dg2.selectedItem.subject}" color="#050595" width="198" id="label1" fontWeight="normal" fontFamily="Monaco" fontSize="12"/>
</mx:FormItem>
<mx:FormItem label="가수" backgroundColor="#9EF551" id="formitem2" fontFamily="Monaco" fontSize="12">
<mx:Label text="{dg2.selectedItem.singer}" color="#050595" width="198" id="label2" fontWeight="normal" fontFamily="Monaco" fontSize="12"/>
</mx:FormItem>
</mx:Form>
<mx:Tile x="10" y="35" width="69" height="57">
<mx:LinkButton label="1" themeColor="#F08484" click="currentState='Menu2'" color="#DD1738"/>
<mx:LinkButton label="2" themeColor="#F08484" click="currentState=''" color="#0DBD15"/>
<mx:LinkButton label="3" themeColor="#F08484" click="currentState=''" color="#B52BCE"/>
<mx:LinkButton label="4" themeColor="#F08484" click="currentState=''" color="#7A1930"/>
</mx:Tile>
<mx:Label x="10" y="10" text="메뉴" fontFamily="Monaco" fontSize="12" width="69" textAlign="center" fontWeight="bold" color="#3459E4"/>
</mx:Canvas>
</mx:HBox>
</mx:HBox>
</mx:Panel>
<mx:Panel x="293" y="247" width="635" height="542" layout="absolute" id="BottomMenu" title="DataGrid Part">
<mx:DataGrid id="dg2" x="0" y="0" width="100%" height="100%"
fontFamily="Monaco" fontSize="12" textAlign="center"
dataProvider="{employees2}">
<mx:columns>
<mx:DataGridColumn headerText="제목" dataField="subject" width="50" textAlign="left"/>
<mx:DataGridColumn headerText="가수" dataField="singer" width="15" textAlign="left"/>
<mx:DataGridColumn headerText="앨범" dataField="album" width="15" textAlign="left"/>
</mx:columns>
</mx:DataGrid>
</mx:Panel>
<mx:Panel x="936" y="39" width="155" height="750" layout="absolute" id="RightMenu" title="Tab Part2">
<mx:TabNavigator x="5" y="10" width="90%" height="90%" fontFamily="Monaco" fontSize="12">
<mx:Canvas label="가수" width="100%" height="100%" fontFamily="Monaco" fontSize="9">
<mx:Tree x="5" y="5" width="90%" height="90%"
fontFamily="Monaco" fontSize="12"
dataProvider="{treeData2}"
labelField="@label"
   showRoot="false"
   id="MenuList2"></mx:Tree>
</mx:Canvas>
</mx:TabNavigator>
</mx:Panel>
</mx:Canvas>

<mx:HBox x="130" y="795" width="961" height="500"
horizontalScrollPolicy="off" verticalScrollPolicy="off"
id="StatusBar">

<mx:Canvas width="100%" height="500">
<mx:HBox x="0" y="0" width="100%" height="40" verticalAlign="middle">
<mx:Button label="위로" fontFamily="Monaco" fontSize="12" click="currentState='PanelUp'" id="button4"/>
<mx:Button label="아래로" fontFamily="Monaco" fontSize="12" click="currentState=''" id="button5"/>
</mx:HBox>

<mx:Canvas x="0" y="0" width="100%" height="460" verticalScrollPolicy="off" backgroundAlpha="0.5">
<mx:DataGrid id="dg" x="0" y="40" width="100%" height="100%"
textAlign="center" fontFamily="Monaco" fontSize="12"
rowCount="5" dataProvider="{employees}">
<mx:columns>
<mx:DataGridColumn dataField="name" headerText="이름"/>
<mx:DataGridColumn dataField="phone" headerText="연락처"/>
<mx:DataGridColumn dataField="email" headerText="이메일"/>
</mx:columns>
</mx:DataGrid>
</mx:Canvas>
</mx:Canvas>
</mx:HBox>

</mx:Application>

[ 작성 : TeamFlex 개발팀 ] ( teamflex.tistory.com )