엑시스제이 #
Find similar titles

Structured data

Category: Programming

자바스크립트 기반 UI 스크립트 - 엑시스제이 (axisj)

자바스크립트 기반 UI 스크립트 - 엑시스제이 (axisj) #

엑시스제이(axisj)란? #

자바스크립트 UI 프레임웍으로 강력한 UI 기능 제공
행정안전부 진행 슈퍼개발자 K 시즌3 우승
오픈소스 기반으로 지속적인 개발 진행

axisj 그리드 예시 (출처)

엑시스제이(axisj)의 목적 #

우리는 대한민국에 불모지나 다름없는 오픈소스 문화를 정착시킨다.
소프트웨어 개발에 필수 요소인 자바스크립트 UI의 해외 의존을 벗어나 대한민국의 소프트웨어 개발 주권을 바로 세우고 더 나아가 발전된 대안을 해외에 제시한다.
다양한 스타일의 사용자 인터페이스 (UI) 템플릿 제공 뿐 아니라, 사용자 경험 (UX) 을 고려한 정보 설계 (IA) 를 통해 UI를 제작하고 개발자를 위해 이에 대한 가이드라인을 제시함으로써 보다 궁극적인 사용자의 경험을 증진시킨다.

엑시스제이(axisj)의 비전 #

세계유일의 대중적인 오픈소스 자바스크립트 UI 프레임워크를 구축
실력있는 오픈소스 컨트리뷰터를 육성 (UI개발교육 등 다양한 교육진행)
AXU, UI빌더등의 사업을 기반으로 안정적인 오픈소스 개발 환경 마련

사용법 #

셋팅 #

액시스제이를 사용하시려는 페이지의 HTML 코드 안에 아래의 CSS와 JS파일을 로드하는 코드를 작성

다음 필요한 경우 원하는 UI용 CSS와 JS파일을 추가

<!DOCTYPE html>
<html lang="ko">
<head>
    <!-- 공통요소 -->
    <link rel="stylesheet" type="text/css" href="/axisj/ui/arongi/AXJ.css" />
    <script type="text/javascript" src="/axisj/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="/axisj/lib/AXJ.js"></script>

    <!-- 추가하는 UI 요소 -->
    <link rel="stylesheet" type="text/css" href="/axisj/ui/arongi/AXInput.css" />
    <link rel="stylesheet" type="text/css" href="/axisj/ui/arongi/AXSelect.css" />
    <link rel="stylesheet" type="text/css" href="/axisj/ui/arongi/AXGrid.css" />
    <script type="text/javascript" src="/axisj/lib/AXInput.js"></script>
    <script type="text/javascript" src="/axisj/lib/AXSelect.js"></script>
    <script type="text/javascript" src="/axisj/lib/AXGrid.js"></script>
</head>

타켓 지정 #

해당 UI가 위치할 HTML 엘리먼트에 id를 지정한다. 이는 나중에 UI 환경 설정 항목에서 해당 ID를 사용
id는 유일한 요소이므로 하나의 HTML 문서 안에는 오직 한 개만 존재 요망
```
</head>
<body>
    <h1>AXGrid RWD</h1>
    <div id="AXGridTarget"></div>
</body>
</html>
```

스크립트 사용 예 ( 그리드 ) #

</body>
</html>
<script type="text/javascript">
var myGrid = new AXGrid(); // instance
var fnObj = {
    pageStart: function(){

        myGrid.setConfig({
            targetID : "AXGridTarget",
            theme : "AXGrid",
            autoChangeGridView: { // autoChangeGridView by browser width
                mobile:[0,600], grid:[600]
            },
            colGroup : [
                {key:"no", label:"No.", width:"40", align:"center", formatter:"money"},
                {key:"title", label:"Title", width:"200"},
                {key:"writer", label:"Writer", width:"100", align:"center"},
                {key:"date", label:"Date.", width:"100", align:"center"},
                {key:"desc", label:"Etc.", width:"*"}
            ],
            body : {
                onclick: function(){
                    toast.push(Object.toJSON({index:this.index, item:this.item}));
                }
            },
            page:{
                paging:false
            }
        });

        var list = [
            {
                no:1, title:"AXGrid 첫번째 줄 입니다.AXGrid 첫번째 줄 입니다.", writer:"장기영", img:"img/1.jpg", desc:"많은 글을 담고 있는 내용 입니다. 자연스럽게 줄이 넘어가고 표현되는 것이 관건 입니다.", category:"액시스제이", date:"2014-04-05"
            },
            {
                no:2, title:"AXGrid 두번째 줄 입니다.AXGrid 첫번째 줄 입니다.", writer:"장기영", img:"img/2.jpg", desc:"많은 글을 담고 있는 내용 입니다.", category:"액시스제이", date:"2014-04-07"
            },
            {
                no:3, title:"AXGrid 세번째 줄 입니다.AXGrid 첫번째 줄 입니다.", writer:"장기영", img:"img/3.jpg", desc:"많은 글을 담고 있는 내용 입니다. 자연스럽게...", category:"액시스제이", date:"2014-04-09"
            }
        ];

        //setList
        myGrid.setList(list);
        /* ajax way
        myGrid.setList({
            ajaxUrl:"...",
            ajaxPars:"",
            onLoad:function(){},
            onError:function(){}
        });
        */
    }
};
jQuery(document).ready(fnObj.pageStart.delay(0.1));
</script>

AXCore #

AXJ - UI 클래스 원형
AXReq - AJAX 통신처리 클래스
AXMask - 애플케이션 사용자 화면 입력금지 / 통신중 상태표시
AXNotification - 애플리케이션 상태 변경 알림처리
AXScroll - 레이어안에 레이어 스크롤
AXCalendar - 달력 테이블 생성
AXMultiSelect - 레이어 안에 아이템 다중선택 지원
AXResizable - 레이어 리사이즈 지원
AXContentMenuClass - 컨텍스트메뉴 타입 UI
AXPopOverClass - 팝오버 타입 UI
AXMobileModal - 모바일 페이지용 모달
jQuery extends - 제이쿼리 확장 함수

AXISJ 다른 오픈 소스 #

AXICON #

AXISJ만의 벡터 아이콘으로 900개가 넘는 다양한 아이콘을 제공한다.
Import CSS : html 태그 안에 추가
아래와 같이 벡터 아이콘에 맞는 class 추가 ()

AX5 #

jQuery/Bootstrap과 함께 사용할 수 있는 UI 컴포넌트

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/AX5/ax5core/master/dist/ax5core.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/AX5/AX5-dialog/master/dist/ax5dialog.css" />
<script type="text/javascript" src="https://cdn.rawgit.com/AX5/AX5-dialog/master/dist/ax5dialog.min.js"></script>

AXBoot #

풀스택 웹 애플리케이션 개발 프레임워크
주요 레이아웃, 컴포넌트, 서버사이드 API를 제공하여 쉽고 간편하게 개발이 가능하다.

참고 #

https://ko.wikipedia.org/wiki/소프트웨어_테스트

Structured data

Table of Contents

자바스크립트 기반 UI 스크립트 - 엑시스제이 (axisj) #

엑시스제이(axisj)란? #

엑시스제이(axisj)의 목적 #

엑시스제이(axisj)의 비전 #

사용법 #

셋팅 #

타켓 지정 #

스크립트 사용 예 ( 그리드 ) #

AXCore #

AXISJ 다른 오픈 소스 #

AXICON #

AX5 #

AXBoot #

참고 #