본문바로가기

Getting Started

초보자 가이드

Alopex UI를 처음 사용하는 사용자를 위한 가이드입니다.

함께 따라 하면서 Alopex UI를 경험해 보세요.

학습 목표

To Do 조회 화면 개발

이름을 입력하면 To Do 리스트를 보여주는 페이지를 개발합니다. 학습할 수 있는 내용은 아래와 같습니다.

시나리오

  • 화면 두 개 생성 (index.html, todolist.html)
  • 첫 번째 페이지에서 이름을 입력받음
  • 조회 버튼을 누르면 다음 페이지로 이동(이때 입력받은 이름 정보를 다음 페이지에 전달), 페이지 이동 전에 이름이 정상적으로 입력되었는지 확인하고, 입력되지 않았다면 이름을 입력해주세요. 메시지 출력
  • 이동한 todolist.html 페이지 로딩 시 index.html 페이지에서 전달받은 이름 정보를 이용해서 To Do List 조회
  • 조회한 To Do list 화면(Grid)에 보여주기

화면 구성

todo app 스크린샷 todo app 스크린샷 todo app 스크린샷 todo app 스크린샷 todo app 스크린샷

실행해 보기

To Do List 조회

학습 내용

To Do 조회 페이지 개발로 학습 할 수 있는 Alopex UI 기능은 아래와 같습니다.

이 외 Alopex Grid가 활용 되었습니다.

따라하기

웹 콘텐츠 생성

Alopex UI 라이브러리를 다운로드한 후, 개발환경 가이드 를 참고하여 웹 콘텐츠를 생성합니다.

Index 화면 구성

index.html 생성

  • html폴더 하위에 index.html 페이지 생성합니다.
  • Alopex UI를 사용하기 위해서 index.html 페이지에 Alopex UI 관련 파일을 head 영역에 추가합니다.
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

	<link rel="stylesheet" type="text/css" href="../css/lib/alopex/alopex-ui-default.css" />

	<script type="text/javascript" src="../script/lib/jquery/jquery-1.12.4.min.js"></script>
	<script type="text/javascript" src="../script/lib/alopex/alopex-ui.min.js"></script>
	<title>AlopexUI_Beginner</title>
</head>
<body>
</body>
</html>

TextInput 생성

index.html 페이지에 이름을 입력받을 TextInput을 생성합니다.

<form>
	<label>이름 :
	<input id="name" class="Textinput"></label>
</form>

index.html 소스코드를 참고하세요.

Button 생성

index.html 페이지에 todolist.html 페이지로 이동하기 위한 Button을 생성합니다.

<form>
	<label>이름 :
	<input id="name" class="Textinput">
	<input id="next" class="Button" value="조회"></label>
</form>

index.html 소스코드를 참고하세요.

index.js 생성

Text Input에 입력된 값의 validation 체크와 todolist.html로 화면 이동 기능을 추가하기 위해 스크립트 파일을 생성합니다.

  • 프로젝트의 js>app폴더 하위에 index.js 파일을 생성합니다.
  • 생성한 index.js 파일을 index.html 파일의 <head>에 추가합니다.
<script type="text/javascript" src="../script/app/index.js">
</script>

입력 데이터 유효성 검증

조회 버튼을 클릭했을 때, TextInput에 입력된 데이터가 있는지 확인하는 기능입니다.

  • index.js 파일에 Button 핸들러를 추가합니다.
    • Alopex UI의 page 함수 내에서 Button 핸들러를 추가합니다. Page의 자세한 내용은 Page를 참고하세요.
$.alopex.page(function() {
	this.init = function(id, param) { 
		setEventListener();
	};
	function setEventListener() {
		//next 버튼 클릭 이벤트 핸들러  
		$('#next').on('click', function() {
			//TextInput validate 체크 
			if(!$('#name').validate()){
				alert($('#name').getErrorMessage());
			} else {
				// 입력받은 이름을 다음페이지에 전달하면서 화면이동 
				$a.navigate('todoList.html', {
					'name':$('#name').val()
				});
			}
		});
	};
});
  • index.html에 생성한 TextInput 태그에 validation rule을 추가합니다.
<input id="name" class="Textinput" data-validation-rule="{required : true}" 
			data-validation-message="{required:'이름을 입력해주세요.'}"/>

index.html 소스코드를 참고하세요.

  • index.js next 버튼 핸들러에 validate 기능을 추가합니다. validator의 자세한 사용법은 validator API를 참고하세요.
if(!$('#name').validate()){
	alert($('#name').getErrorMessage());
}

index.js 소스코드를 참고하세요.

화면 이동

이름이 정상적으로 입력되었을 때, todolist.html 페이지로 화면 이동하는 기능입니다. 페이지 이동 시 입력받은 이름을 함께 전달합니다.

  • index.js 파일의 next 버튼 핸들러에 $a.navigate API를 이용해서 화면 이동 기능을 추가합니다. $a.navigate함수의 파라미터로 입력받은 이름을 함께 전달합니다. $a.navigate 의 자세한 사용법은 화면이동 API을 참고하세요.
$a.navigate('todoList.html', {
	'name':$('#name').val()
});

index.js 소스코드를 참고하세요.

Todo List 화면구성

todolist.html 생성

  • 프로젝트의 html폴더 하위에 todolist.html 페이지 생성합니다.
  • Alopex UI를 사용하기 위해서 todolist.html 페이지에 Alopex UI관련 파일을 <head> 영역에 추가합니다.
  • Alopex Grid를 사용하기 위해 Grid 라이브러리 참조 주소도 <head> 영역에 추가합니다.
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

	<link rel="stylesheet" type="text/css" href="../css/lib/alopex/alopex-ui-default.css" />
	<link rel="stylesheet" href="../css/lib/alopex/alopex-grid.css" />

	<script type="text/javascript" src="../script/lib/jquery/jquery-1.12.4.min.js"></script>
	<script type="text/javascript" src="../script/lib/alopex/alopex-ui.min.js"></script>
	<script type="text/javascript" src="../script/lib/alopex/alopex-grid-trial.min.js"></script>
	<title>AlopexUI_Beginner</title>
</head>
<body>
</body>
</html>

그리드 생성

To Do 항목을 출력할 그리드를 생성하고 초기화합니다.
그리드의 자세한 사용법은 Alopex Grid를 참고하세요.

  • todolist.html 페이지에 To Do 항목을 출력할 그리드를 생성합니다.
<body>
	<div id="grid_todolist"></div>
</body>
  • 그리드를 초기화하기 위하여 index.js 생성과 같은 방법으로 todolist.js 파일을 생성합니다.
  • todolist.js 파일을 todolist.html 페이지에 추가합니다.
<script type="text/javascript" src="../script/app/todoList.js">
</script>

todolist.html 소스코드를 참고하세요.

  • todolist.js 파일에 Alopex UI의 page 함수 내에서 그리드를 초기화합니다. Page의 자세한 내용은 Page API를 참고하세요.
$a.page(function() {
	this.init = function(id, param) {
	//그리드 초기화
		initGrid();
	};
	//그리드 초기화
	function initGrid() {
		$('#grid_todolist').alopexGrid({
			autoColumnIndex: true,
			columnMapping : [{
				align : 'center',
				title: 'Number',
				width : '100px',
			}, {
				align : 'center',
				title : 'To Do 항목',
				width : '300px'
			}]
		});
	}
});

Todolist 조회(통신)

ToDo list를 Alopex UI의 Request를 이용해서 조회합니다. Request의 자세한 내용은 Request API를 참고하세요.

  • Request Setup

$a.request.setup 함수를 이용해서 서버 정보 및 통신의 전처리 후처리 기능을 설정합니다. API 의 자세한 사용법은 Request API를 참고하세요.

$a.request.setup은 모든 reqeust에 공통으로 사용되므로 통신을 여러 번 사용하는 프로젝트에서는 각 페이지에서 정의하지 않고 common.js 같은 파일에 따로 작성하여 사용하시면 됩니다.

본 예제에서는 NEXCORE J2EE 와의 통신 인터페이스를 사용한다는 전제로 진행합니다.

$a.request.setup({
	platform : 'NEXCORE.J2EE',
	url : function(id, param) {
		return 'http://ui.alopex.io/started/education/'+id+'.json';
	}, //서버 URL
	method : 'GET',
	before : function(id, option) {
		$('body').progress(); //progress bar 시작
	},
	after : function(res) {
		$('body').progress().remove();  //progress 종료
	},
	fail : function(res) {
		alert('서버오류');
		$('body').progress().remove();  //progress 종료
	},
	error : function(err) {
		alert('현재 네트상태를 확인하십시요.');
		$('body').progress().remove();  //progress 종료
	}
});

todolist.js 소스코드를 참고하세요.

  • Request $a.request 함수를 이용해서 To Do List를 요청합니다. 이때 index.html 에서 전달받은 이름을 파라미터로 전달합니다. API 의 자세한 사용법은 Request API를 참고하세요.
$a.request('response', {
	data :{
		"id": param['name']
	}
});

todolist.js 소스코드를 참고하세요.

조회 데이터 바인딩

통신을 통해 조회한 To Do 항목을 통신이 완료되는 시점에 그리드에 바인딩 합니다. 데이터 바인딩의 자세한 내용은 데이터바인드 API 를 참고하세요.

  • reqeust 성공 시 데이터 바인딩 할 대상 설정 $a.request 함수로 To Do 항목 조회 성공 시에 response 데이터를 바인딩할 그리드를 success에 지정합니다.
$a.request('search', {
	data :{
		"id": param['name']
	},
	success: '#grid_todolist'
});

todolist.js 소스코드를 참고하세요.

  • 그리드 칼럼의 key를 응답 데이터의 key로 설정합니다.

response 데이터가 아래와 같을 때,

{
	"dataSet": {
		"message": {
			"result": "OK",
			"messageId": "M3000000",
			"messageName": "정상처리입니다."
		},
		"recordSets": {
			"grid_todolist": {
				"nc_list": [
					{"number":"1","todo":"Check Email"},
					{"number":"2","todo":"Dentist's appoinment"},
					{"number":"3","todo":"Wash car"},
					{"number":"4","todo":"Pick up kids"},
					{"number":"5","todo":"pay bills"}
				]
			}
		}
	}
}

그리드의 컬럼에 response 데이터의 recordSets > grid_todolist > nc_list 하위의 keynumbertodo로 설정합니다.

autoColumnIndex: true,
columnMapping : [
	{
		align : 'center',
		title: 'Number',
		key:'number',
		width : 100,
	}, {
		align : 'center',
		title : 'To Do 항목',
		key:'todo',
		width : 300
	}
]

todolist.js 소스코드를 참고하세요.

응용하기

지금까지 Todo List 조회 화면을 개발해 보았습니다. 직접 사용하지 않은 다른 API 및 컴포넌트를 이용해서 기능을 추가해 보세요.

소스 코드

index.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

<link rel="stylesheet" type="text/css" href="../css/lib/alopex/alopex-ui-default.css" />

<script type="text/javascript" src="../script/lib/jquery/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="../script/lib/alopex/alopex-ui.min.js"></script>
<script type="text/javascript" src="../script/app/index.js"></script>
<title>AlopexUI_Beginner</title>
</head>
<body>
	<form>
		<label>이름 :
		<input id="name" class="Textinput" data-validation-rule="{required : true}" data-validation-message="{required:'이름을 입력해주세요.'}">
		<input id="next" class="Button" value="조회"></label>
	</form>
</body>
</html>

index.js

$a.page(function() {
	this.init = function(id, param) {
		setEventListener();
	};
	function setEventListener() {
		//next 버튼 클릭 이벤트 핸들러  
		$('#next').on('click', function() {
			//TextInput validate 체크
			if(!$('#name').validate()){
				alert($('#name').getErrorMessage());
			} else {
				// 입력받은 이름을 다음페이지에 전달하면서 화면이동
				$a.navigate('todoList.html', {
					'name':$('#name').val()
				});
			}
		});
	};
});

todolist.html

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

	<link rel="stylesheet" type="text/css" href="../css/lib/alopex/alopex-ui-default.css" />
	<link rel="stylesheet" href="../css/lib/alopex/alopex-grid.css" />

	<script type="text/javascript" src="../script/lib/jquery/jquery-1.12.4.min.js"></script>
	<script type="text/javascript" src="../script/lib/alopex/alopex-ui.min.js"></script>
	<script type="text/javascript" src="../script/lib/alopex/alopex-grid-trial.min.js"></script>
	<script type="text/javascript" src="../script/app/todoList.js"></script>

	<title>AlopexUI_Beginner</title>
</head>
<body>
	<div>
		<div id="grid_todolist"></div>
	</div>
</body>
</html>

todolist.js

$a.page(function() {
	this.init = function(id, param) {
		//ToDo List 조회를 위해서 서버 정보 세팅
		//a.request.setup은 모든 reqeust에 공통으로 사용되므로 통신을 여러 번 사용하는 프로젝트에서는 각 페이지에서 정의하지 않고 common.js 같은 파일에 따로 작성하여 사용하시면 됩니다.
		$a.request.setup({
			platform : 'NEXCORE.J2EE',
			url : function(id, param) {
				return 'http://ui.alopex.io/started/education/'+id+'.json';
			}, //서버 URL
			method : 'GET',
			before : function(id, option) {
				$('body').progress(); //progress bar 시작
			},
			after : function(res) {
				$('body').progress().remove();  //progress 종료
			},
			fail : function(res) {
				alert('서버오류 입니다.');
				$('body').progress().remove();  //progress 종료
			},
			error : function(err) {
				alert('현재 네트상태를 확인하십시요.');
				$('body').progress().remove();  //progress 종료
			}
		});

		//그리드 초기화
		initGrid();

		// TodoList 조회 request
		$a.request('response', {
			data :{
				"id": param['name']
			},
			success: '#grid_todolist'
		});
	};

	//그리드 초기화
	function initGrid() {
		$('#grid_todolist').alopexGrid({
			autoColumnIndex: true,
			columnMapping : [
				{
					align : 'center',
					key : 'number',
					title: 'Number',
					width : 100,
				}, {
					align : 'center',
					key : 'todo',
					title : 'To Do 항목',
					width : 300
				}
			]
		});
	}
});
전체 소스 코드 다운로드

전체 소스 코드 다운받기