본문바로가기

Document

사용 가이드

설정

AlopexUI 을 사용하기 위한 기본 설정입니다. 세부 경로는 프로젝트 구조에 따라 바꿀 수 있습니다.

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

<script type="text/javascript" src="../script/lib/jquery/jquery.js"></script>
<script type="text/javascript" src="../script/lib/alopex/alopex-ui.min.js"></script>

<!-- FileUpload, MultiSelect, Splitter 컴포넌트 사용 시 -->
<link rel="stylesheet" type="text/css" href="../css/lib/alopex/src/alopex-ext.css" />

<script type="text/javascript" src="../script/lib/alopex/src/alopex-ext.min.js"></script>
<script type="text/javascript" src="../script/lib/alopex/src/alopex-ext-setup.js"></script>

<!-- WebEditor 컴포넌트 사용 시-->
<link rel="stylesheet" type="text/css" href="../script/lib/alopex/src/webedtior/alopex-webeditor.css" />

<script type="text/javascript" src="../script/lib/alopex/src/webedtior/alopex-webeditor.min.js"></script>
<script type="text/javascript" src="../script/lib/alopex/src/webedtior/alopex-webeditor-setup.js"></script>
개발 환경

Alopex UI로 어플리케이션을 개발하기 위한 기본 구성은 html, script, css 폴더로 구성되며 상세한 설명은 다음과 같습니다.

디렉터리구조

구성은 아래와 같습니다.

AlopexUI_package
	┣━ css
	┣━ html
	┗━ script
	┗━ eclipse-code-template

상세파일구성

Alopex UI 구조는 아래와 같이 구성되어 사용합니다.

AlopexUI_package
	┣━css━━ app
	┃   ┗━━ lib
	┃        ┗━ alopex
	┃              ┗━ alopex-ui-xxx.css (alopex-ui-default.css가 기본 디자인)
	┃              ┗━ images
	┃              ┃     ┗━ *.jpg, *.png, ...
	┃              ┗━ src
	┃                  ┗━ alopex-ext.css
	┃
	┣━ html
	┗━ script━━ app
	┃       ┗━━ lib
	┃            ┗━ alopex
	┃            ┃     ┗━ alopex-ui.min.js
	┃            ┃     ┗━ src
	┃            ┃          ┗━ alopex-ext.min.js, alopex-ext-setup.js
	┃            ┃
	┃            ┗━ jquery
	┃                 ┗━jquery.js
	┗━ eclipse-code-template
				┗━ alopex-ui-component-templates-vx.x.x.xml (이클립스용 AlopexUI html code template)
				┗━ alopex-ui-js-templates-vx.x.x.xml (이클립스용 AlopexUI javascript code template)

역할

디렉터리별 역할입니다.

html

html 파일 디렉터리 입니다.

script

자바스크립트 파일 디렉터리입니다.

  • app

자바스크립트 중 애플리케이션 자바스크립트 영역입니다.

  • lib

    • alopex

      • alopex-ui.min.js

        Alopex UI 라이브러리 파일입니다.

      • src 폴더

        오픈 소스를 wrapping 한 확장 컴포넌트 라이브러리 파일이 있는 폴더입니다. 필요시에만 사용합니다.

        • alopex-ext.min.js
        • alopex-ext.setup.js

자바스크립트 중 라이브러리 영역으로 벤더 별로 그룹화합니다. 예) lib/jquery/jquery.js

css

스타일시트 파일 디렉터리입니다.

  • app

    스타일시트 중 애플리케이션 영역입니다.

  • lib

    • alopex

      • alopex-ui-default.css

        Alopex UI 기본 테마 스타일시트 파일입니다. 이 외 6종의 테마파일이 더 있습니다.

      • src 폴더

        오픈 소스를 wrapping 한 확장 컴포넌트 스타일시트 파일이 있는 폴더입니다. 필요시에만 사용합니다.

        • alopex-ext.css

스타일시트 중 라이브러리 영역으로 벤더별로 그룹화합니다. 예) reset/reset.css

eclipse-code-template

이클립스용 코드 자동 완성 기능을 위한 적용 버젼별 템플릿 파일이 들어있습니다.

  • HTML

    • Eclipse > Window > Preferences > Web > HTML Files > Editor > Templates > Import
  • JavaScript

    • Eclipse > Window > Preferences > JavaScript > Editor > Templates > Import

3rd party 라이브러리

jQuery

Alopex UI 는 jQuery 플러그인 기반의 프레임워크로 jQuery 라이브러리가 필요합니다. jQuery 홈페이지에서 직접 다운로드 해주세요.

셋업

셋업이란 Alopex UI에서 사용하는 옵션 중에 공통으로 사용할 옵션들을 미리 설정하여 사용할 수 있도록 하는 것입니다. 사용자는 셋업을 통해서 글로벌 옵션 설정을 보다 쉽게 할 수 있습니다.

모듈별 셋업

페이지 셋업

Alopex UI에서 제공하는 $a.page는 페이지에 혼재해 있던 페이지 초기화 함수를 통일하고 Alopex UI 컴포넌트 및 모바일 API 사용 준비 상태를 보장해 주는 역할을 합니다.

$a.page 함수는 페이지 로드가 완료된 이후 호출될 초기화 함수를 설정할 수 있으며, 사용자 함수를 $a.page 아래에 저장할 수 있습니다.

$a.page 함수의 자세한 사항은 Page API를 참고해주십시오.

개별 화면 컨트롤러에서 페이지 셋업 함수를 사용하는 예제입니다.

$a.page(function() {
	// 초기화 함수
	this.init = function(id, param) {
		...
	}
});

통신 셋업

Alopex UI는 서버와 통신하기 위한 $a.request 글로벌 함수를 제공합니다. $a.request 함수는 다양한 백엔드와의 통신을 지원하고, 글로벌 옵션 설정을 지원합니다. 자세한 사항은 Request API를 참고하세요.

컴포넌트 셋업

Alopex UI는 컴포넌트의 글로벌 옵션을 설정할 수 있도록 $a.setup 함수를 제공합니다. 이 함수는 Alopex UI에서 사용하는 모든 컴포넌트의 글로벌 옵션을 셋업 할 수 있도록 도와줍니다. 자세한 사항은 Setup API를 참고하세요.

  • 컴포넌트 셋업 예제
// datepicker 컴포넌트 셋업
$a.setup('datepicker', {
	selectyear: true,
	selecmonth: true,
	showothermonth: true,
	showbottom: true
});

// dialog 컴포넌트 셋업
$a.setup('dialog', {
	modal: true,
	movable: true
});

화면이동 셋업

화면이동에 사용되는 $a.navigate 함수 URL 파라미터의 처리를 글로벌하게 셋업하여 개별 페이지에서 화면이동 API 사용시, URL을 아이디 형태로 전달 가능합니다.

  • 화면이동 셋업 예제

관련 API는 Navigate API를 참고하세요.

$a.navigate.setup({
	url: function(url, param) {
		reutrn '/html/' + url + '.html';
	}
});

// 개별 페이지에서 API 호출
$a.navigate('customer/list');
컴포넌트 사용

컴포넌트 생성

Alopex UI 의 컴포넌트는 HTML 태그에 class 속성으로 컴포넌트 이름을 명시하여, 자바스크립트 코드 없이 바로 컴포넌트를 생성/사용할 수 있습니다. 아래의 예시는 DateInput 컴포넌트의 생성입니다. class 속성에 Dateinput 값을 넣고 마크업을 작성한 것 만으로도 날짜를 입력할 수 있는 DateInput 컴포넌트가 작동합니다. class속성에 사용되는 컴포넌트명은 대분자로 시작합니다.

<div class="Dateinput" id="date1">
	<input>
</div>

컴포넌트 옵션

컴포넌트는 각기 사용 가능한 옵션과 API가 존재합니다. 컴포넌트별 옵션은 data- 로 시작하는 속성을 태그에 입력하여 적용할 수 있습니다. 위에서 생성한 dateinput 컴포넌트의 입력 형식을 바꾸고자 한다면 dateinput 컴포넌트의 data-format 옵션을 사용합니다.

<div class="Dateinput" data-format="MM/dd/yyyy" id="date0">
	<input>
</div>

컴포넌트 API 호출

Javascript 코드를 이용하여 컴포넌트의 API를 호출할 수 있습니다. 위의 DateInput 컴포넌트의 clear API를 호출하고자 하면 jQuery를 이용하여 DateInput 컴포넌트가 생성된 태그를 선택하고 .clear() 를 호출합니다.

<div class="Dateinput" data-format="MM/dd/yyyy" id="date2">
	<input>
</div>
<button class="Button" onclick="$('#date2').clear();">clear API 호출</button>

컴포넌트 확장

Alopex UI는 기본으로 제공하는 컴포넌트를 확장해서 원하는 기능이 구현된 새로운 Alopex UI 컴포넌트를 만들 수 있습니다.

컴포넌트 확장을 할 때 기존에 Alopex UI에 있는 컴포넌트를 상속받아서 확장하는 코드를 작성합니다. 예를 들어 Alopex UI textinput을 확장하여 연도를 입력하는 텍스트 element를 만들 때 아래와 같이 확장하여 사용합니다.

$a.widget.year = $a.inherit($a.widget.textinput, {
	widgetName: 'year',
	setters: ['year'],
	init : function(el, options) {
		var $el = $(el);
		$el.attr('type', 'text').attr('class', 'yearInput')
			.attr('maxlength', '4')
			.attr('data-validate-rule', '{year:true}')
			.attr('data-keyfilter-rule', 'digits')
			.attr('placeholder', 'yyyy');
	}
});

컴포넌트 상속

$a.inherit(parent, child) 함수는 Alopex UI에서 사용되는 내부 함수로 상속 관계를 정의할 때 사용합니다. 컴포넌트를 확장할 경우 Alopex UI 내부 함수를 사용해야 하므로 이 함수를 사용합니다. 필요한 파라미터와 리턴값은 아래와 같습니다.

  • parameter
    • parent
      • 상속 받을 부모 객체 혹은 함수를 선언합니다.
    • child
      • 상속 대상
  • return
    • 상속 받은 자바스크립트 object.

초기화 시 제약사항

컴포넌트 구현 시 확장에 사용된 스크립트는 반드시 Alopex UI 스크립트가 먼저 실행된 뒤에 실행되어야 합니다. 이는 컴포넌트가 $a.widget.object를 상속받아서 만들어지기 때문에 제약사항을 반드시 지켜주어야 합니다.

스크립트 실행 순서

Alopex UI > Alopex UI extension > custom javascript

사용자 정의 컴포넌트

Alopex UI 설계 그대로 사용자 정의 컴포넌트를 만들어 사용할 때는 아래와 같이 컴포넌트를 상속한 후 셋업에서 Alopex컴포넌트에 등록을 합니다.

$a.widget.newcomponent = $a.inherit($a.widget.object, {
	widgetName: 'newcomponent', // HTML 마크업의 class 속성에 들어갈 컴포넌트 명을 입력합니다.
	setters: ['newcomponent', ...], // 컴포넌트의 setter 함수를 설정하는 곳입니다. 단, 맨 처음에는 새롭게 추가된 widgetName을 꼭 써주셔야합니다.
	getters: ['getStyle'...], // 컴포넌트의 getter 함수를 설정하는 곳입니다.
	init: function(el, options) { // 새로운 컴포넌트의 동작이나 마크업등을 설정하는 부분입니다. 사용자는 $el을 이용하여 커스텀하게 마크업, 스타일등을 만들어낼 수 있습니다.
		var $el = $(el);
		...
	}
	... // 기타 settter/getter 함수를 작성 합니다.
});

새로운 컴포넌트를 선언하기 위해 사용한 오브젝트는 다음의 속성을 가집니다.

  • widgetName
    • 새로 정의할 컴포넌트 이름
  • setters
    • 새로 정의한 컴포넌트의 setter 함수.

      단, setters의 맨첫번째에는 컴포넌트 이름을 입력해야합니다.

  • getters
    • 새로 정의한 컴포넌트의 getter 함수.
  • init
    • 컴포넌트가 화면에 렌더링될때 컴포넌트를 초기화하는 함수
      • parameter
        • el: HTML element
        • options: 자바스크립트 호출시 적용된 옵션 값들
  • 위이 속성 외에 setters/getters에 선언한 컴포넌트의 API를 함수 형태로 정의합니다.

정의한 컴포넌트를 아래와 같이 Alopex 컴포넌트로 등록합니다.

$a.setup({
	defaultComponentClass: {
		newcomponent: 'newcomponent'
	}
});