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>JUI 프레임워크는 npm이나 bower와 같은 패키지 매니저를 통해서도 설치할 수 있습니다.
npm install jui
npm install jui-core
npm install jui-grid
npm install jui-chart
테스트를 수행하고 패키지에 포함된 .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