Loading resources
JUI 프레임워크는 스타일만 별도로 사용할 수 있으며, 이번에 프로젝트가 분리되어 기존의 UI와 그리드를 따로 로드해야 합니다.
그리고 테마 파일은 다르게 사용할 수 있으며, 테마를 쉽게 만들 수 있는 JUI 스토어 서비스를 제공합니다. (Link)
<!-- Basic style components -->
<link rel="stylesheet" href="/jui/dist/ui.min.css" />
<link rel="stylesheet" href="/jui/dist/ui-jennifer.min.css" />
<!-- Grid style components -->
<link rel="stylesheet" href="/jui-grid/dist/grid.min.css" />
<link rel="stylesheet" href="/jui-grid/dist/grid-jennifer.min.css" />jui 클래스가 설정되어 있는 마크업의 하위에서만 사용할 수 있습니다.
<body class="jui">
...
</body>
차트를 제외한 모든 컴포넌트들은 jQuery 1.8 이상에서만 동작하므로 해당 라이브러리를 먼저 로드해야 합니다.
그리고 이번 JUI 코어와 유틸리티가 별도의 프로젝트로 분리되었기 때문에 별도로 로드해야 합니다.
<!-- Required script files -->
<script src="jquery.min.js"></script>
<script src="/jui-core/dist/core.min.js"></script>
<!-- Basic script components -->
<script src="/jui/dist/ui.min.js"></script>
<!-- Grid script components -->
<script src="/jui-grid/dist/grid.min.js"></script>아래는 차트를 사용하기 위해 로드해야할 스크립트 파일입니다.
<script src="/jui-core/dist/core.min.js"></script>
<script src="/jui-chart/dist/chart.min.js"></script>Installing in command
JUI 프레임워크는 npm이나 bower와 같은 패키지 매니저를 통해서도 설치할 수 있습니다.
npm install jui
npm install jui-core
npm install jui-grid
npm install jui-chartTo build the project
테스트를 수행하고 패키지에 포함된 .less와 .js 파일을 하나의 파일로 합치기 위해서는 아래와 같은 명령어를 실행하면 됩니다.
참고로 빌드 도구인 Grunt 모듈은 NodeJS가 설치되어 있어야 합니다.
npm install grunt-cli -g
cd jui
npm install
grunt
빌드 및 테스트 명령어는 아래와 같이 기능 별로 따로 수행할 수 있습니다.
grunt js 명령어는 js 파일의 merge와 minify를 수행하고, grunt test는 컴포넌트의 테스트를 수행합니다.
또한 grunt css 명령어는 less 파일을 css로 변환하고, merge와 minify를 수행합니다.
grunt js
grunt css
grunt test