'웹개발강좌' 카테고리의 글 목록 (9 Page) IT Code Storage

/71

2014. 11. 4. 12:30

jQueryUI 2장 - 다양한 입력태그에 달력,스피너,슬라이더 등 각종 UI 적용해보기

이번 포스팅은 각종 입력태그에 jQueryUI를 적용하여 UI를 적용해보도록 해보도록 하겠습니다.

다루어볼 UI종류 : 버튼/그룹버튼/콤보박스/스피너/슬라이더/달력(datepicker)

각종 상세 옵션에 대해서는 이후에 차근차근 다루어 보도록 하겠습니다.

버튼UI 적용

A태그,BUTTON태그, INPUT TYPE="BUTTON"태그 모두 버튼UI 적용이 가능합니다.

한번 각 HTML태그를 작성한 후 버튼UI를 적용해보도록 하겠습니다.

<h3>버튼UI</h3>
<button id="button_sample1">button버튼</button>
<br/><br/>
<input type="button" id="button_sample2" value="input버튼" />
<br/><br/>
<a href="#" id="button_sample3">a태그버튼</a>

위와같이 html 코드만 적용 한 후 실행결과를 보도록 하겠습니다.

정말 볼품없는 기본버튼이군요...

그럼 button() 함수를 적용하여 마법을 부려보도록 하겠습니다.

$(function(){
    $("#button_sample1").button();  
    $("#button_sample2").button();
    $("#button_sample3").button();
})

위 코드를 적용을 한 다음 실행을 하게 된다면?

부족했던 버튼들이 UI가 적용되어 큼지막하면서도 깔끔한 버튼으로 출력이 되었습니다.

그룹버튼UI 적용

이번에는 radio 태그에 그룹버튼 UI를 적용해보도록 하겠습니다.

버튼UI 적용때와 동일하게 HTML태그먼저 작성해보겠습니다.

<h3>라디오그룹버튼UI</h3>
<div id="groupbutton">
    <input type="radio" id="radio1" name="group" checked="checked" ><label for="radio1">그룹1</label>
    <input type="radio" id="radio2" name="group" ><label for="radio2">그룹2</label>
    <input type="radio" id="radio3" name="group" ><label for="radio3">그룹3</label>
</div>

라디오 버튼을 3개 작성 한다음 부모 DIV 태그로 감싸주었습니다.

이때 RADIO태그옆에 작성된 LABEL 태그에 내용작성과

RADIO태그의 ID와 LABEL의 FOR 속성값이 일치해야 합니다.

역시 UI 적용전 실행 결과를 보겠습니다.

역시나 기본 라디오 화면이군요..

도와줘

그럼 buttonset() 함수호출하고 적용을 해준다면?

$(function(){
    $("#groupbutton").buttonset();
})

위와같이 그룹버튼 형식으로 화면이 적용된 것을 확인 할수 있겠습니다.

SELECTBOX 일명 : 콤보박스 UI 적용

기본 selectbox 샘플 코드입니다.

<h3>셀렉트박스</h3>
<select id="selectmenu">
    <option value="0" selected="selected">첫번째옵션</option>
    <option value="1">두번째옵션</option>
    <option value="2">세번째옵션</option>
</select>

위의 기본 코드 결과를 확인해보시면

위와같이 나오는데 여기에 selectmenu() 함수를 적용해줍니다.

$(function(){
    $("#selectmenu").selectmenu();
})

실행을 해보게되면 selectbox에 UI가 적용이 되겠죠?

엥? 그러나 간격이 너무 좁은거 같아서 width 속성을 적용하여 넓이를 확장하도록 하겠습니다.

1	`$("#selectmenu").selectmenu({width : 200});`

기존코드에서 {width : 200} 에 대한 속성을 함수내에 정의를 해준것 뿐입니다.

원하는 넓이에 화면이 정상적으로 출력이 되었습니다 ^^

스피너/슬라이더 UI적용하기

스피너의 경우는 증가/감소에 대한 UI가 필요할때 적용하기 좋습니다.

그리고 슬라이더의 경우는 최소값/최대값 사이의 데이터를 구하고자(?) 할때 좋은 UI 인거 같습니다.

예를 들자면 원하는 물품의 가격대를 선택하고자 할때??에 대한 화면을 구성할때 좋은UI 같습니다.

스피너는 input 태그에 적용이 가능하며 슬라이더는 레이어 영역에 지정이 가능합니다.

다음코드르 보시겠습니다.

<h3>스피너UI</h3>
<input id="spinner" type="text" />
<h3>슬라이더UI</h3>
<div id="slider"></div>

스크립트 코드 부분은 다음과같습니다.

$(function(){
    //스피너 함수
    $("#spinner").spinner();
    //슬라이더 함수
    $("#slider").slider({
        range: true,
        //0 ~ 100 사이 option
        values: [ 0, 50 ]
    });
})

스피너 및 슬라이더함수를 적용한 실행결과입니다.

마지막으로 입력태그 클릭하였을경우 달력화면이 출력되어

원하는 날짜 선택시 입력태그에 연월일이 자동입력되게하는

datepicker UI를 적용해보도록 하겠습니다.

기본 HTML태그 및 호출 함수는 다음과 같습니다.

DATEPICKER HTML샘플코드

1 2	`<h3>달력UI</h3>` `<input` `type="text"` `id="picker"` `/>`

DATEPICKER JAVASCRIPT 샘플코드

1	`$("#picker").datepicker();`

실행을 해보도록 하겠습니다.

위와같이 정상적으로 datepicker 기능이 적용이 되었습니다.

이외에도 레이어구조를 잡아주는 UI와 자동완성기능 등 다양한 예제를 알아보도록 하겠습니다.

※ 오늘 포스팅한 UI들에 상세 옵션에 대한 부분도 이후에 포스팅하도록 하겠습니다.

by 개발로짜

저작자표시 비영리 변경금지

'웹개발강좌 > jQueryUI' 카테고리의 다른 글

jQueryUI 5장 - sortable을 이용하여 목록순서 변경하기 (0)	2014.11.07
jQueryUI 4장 - autocomplete 함수를이용하여 Ajax 비동기 자동완성 구현해보기 (9)	2014.11.06
jQueryUI 3장 - 다양한 레이아웃을 만들어보자(어코디언,탭,레이어팝업) (0)	2014.11.05
jQueryUI 1장 - 테마선택하여 다운로드 후 간단하게 버튼태그에 UI 적용하기 (0)	2014.11.04

/70

2014. 11. 4. 07:00

jQueryUI 1장 - 테마선택하여 다운로드 후 간단하게 버튼태그에 UI 적용하기

jQueryUI는 jQuery를 이용하여 UI 컴포넌트를 함수호출만으로 제작을 해주는 UI 프레임워크입니다.

무료이면서 쉽게 적용할 수 있다는 장점이 있습니다.

그럼 우선 연동 전 jQueryUI 파일을 다운로드 받도록 하겠습니다.

http://jqueryui.com/themeroller/

위 페이지 접속을 하셨다면 "Gallery" 탭 선택 후 원하시는 테마를 클릭하시면

우측 컴포넌트들이 선택하신 테마로 적용이 됩니다.

테마를 확인 하신 다음 마음에 드시는 테마가 있으시다면

클릭하신 테마하단에 "Download" 버튼이 있는데 클릭을 해줍니다.

확인해보니 총 24종류의 테마를 제공해주고 있네요.

그럼 페이지 이동이 될텐데 스크롤을 끝까지 내려줍니다.

그럼 위 처럼 Download버튼이 존재하는데

클릭을 해주시면 최종파일이 다운로드 됩니다.

다운로드 후 압축파일을 해제하신 다음

아래 파일들을 자신의프로젝트 경로에 맞춰서 INCLUDE 해주도록 합니다.

저의경우 jqueryui 디렉토리 생성하여 해당폴더내에 include 해주었습니다.

그럼 이제 html 페이지를 하나 만들어서 연동코드를 작성해보도록 하겠습니다.

제일먼저, 필요파일을 INCLUDE 해보도록 하겠습니다.

※ external 디렉토리내에 존재하는 jquery파일을 include 해주는것이 깔끔하지만

저는 jquery cdn을 include 하였습니다.

jQueryUI 연동에 필요한 include 코드

.
<link href="/jqeryui/jquery-ui.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="/jqeryui/jquery-ui.js"></script>

버튼컴포넌트 적용테스트를 위한 HTML 버튼태그

1	`<button` `id="button_sample">버튼샘플</button>`

버튼 태그에 대한 코드를 작성하셨다면

이제 jquery로 button() 함수를 아래와 같이 호출하면

버튼 UI가 적용이 될것입니다.

onload 후 button() 함수 호출

$(function(){
    $("#button_sample").button();   
})

실행을 해보도록 하겠습니다.

jQueryUI 연동테스트 실행결과

버튼ui가 다운로드받은 테마형태로 출력이 되었다면

연동이 정상적으로 이루어 진 것입니다.

다음 포스팅에는 jQueryUI에서 제공하는 폼UI를 시작으로

레이어 및 기능구현에 대해서 내용을 다루도록 하겠습니다.

by 개발로짜

저작자표시 비영리 변경금지

'웹개발강좌 > jQueryUI' 카테고리의 다른 글

jQueryUI 5장 - sortable을 이용하여 목록순서 변경하기 (0)	2014.11.07
jQueryUI 4장 - autocomplete 함수를이용하여 Ajax 비동기 자동완성 구현해보기 (9)	2014.11.06
jQueryUI 3장 - 다양한 레이아웃을 만들어보자(어코디언,탭,레이어팝업) (0)	2014.11.05
jQueryUI 2장 - 다양한 입력태그에 달력,스피너,슬라이더 등 각종 UI 적용해보기 (0)	2014.11.04

/69

2014. 11. 3. 16:00

ExtJS 강좌 - 그리드패널에 페이징툴바를 적용하여 페이징 목록 출력하기

이전 포스팅에 그리드 리스트 출력에 관하여 알아보았습니다.

간단하게 2~3개정도의 데이터만을 가지고 예를들어 별도의 페이징 처리를 하지 않았습니다.

만약 데이터가 100개,1000개,3000개등.. 데이터갯수가 많을 경우에는??? 페이징처리를 해야겠죠?

그래서 이번 포스팅은 그리드패널에 페이징툴바를 적용하여

페이징기능을 구현해보도록 하겠습니다.

DB연동은 하지않고 진행하겠습니다.

※ 실질적으로 DB연동해서 페이징 처리 및 CRUD 기능들에 대해서는 MVC 포스팅시간에 다루도록 하겠습니다!!

졸려4

임의로 DB(?)데이터가 10개가 등록되어있다고 가정을 하겠습니다.

이전 포스팅에서 ajax콜을하여 작성한 샘플코드를 변경해보도록 하겠습니다.

2014/11/03 - [웹개발강좌/ExtJS] - ExtJS 강좌 - 그리드패널을 출력시키기 위하여 이해를 한 후 출력시켜보자

그리드 페이징툴바 샘플 스크립트 코드

Ext.onReady(function(){
    var store = Ext.create("Ext.data.Store",{
                        autoLoad : true,
                        //기존코드에 추가된 부분
                        pageSize: 2,
                        fields : ['blogger_id','blogger_name','blogger_url'],
                        proxy : {
                            type : 'ajax',
                            api : {
                                read : '/grid_res_paging.jsp'
                            },
                            reader : {
                                type : 'json',
                                //정의하지 않을경우 default 'success'라는 값 set
                                successProperty : "success_flag",
                                rootProperty : 'grid_item',
                                //정의하지 않으면 default로 'total'이라는 값 set
                                totalProperty : 'total_count'
                            }
                        }
                });
     
    Ext.create("Ext.grid.Panel",{
        renderTo : Ext.getBody(),
        title : '그리드 ajax페이징 설명',
        width : 600,
        height : 300,
        columns : [{
            text : '블로거아이디',
            flex : 1,
            dataIndex : 'blogger_id'
        },{
            text : '블로거닉네임',
            flex : 1,
            dataIndex : 'blogger_name'
        },{
            text : '블로그주소',
            flex : 1,
            dataIndex : 'blogger_url'
        }],
        store : store,
        //페이징툴바추가
        dockedItems : [
                       {
                           xtype : 'pagingtoolbar',
                           //dock은 위치지정이 가능
                           dock : 'bottom',
                           //gridpanel의 스토어와 동일한 데이터스토어 set
                           store : store,
                           displayInfo : true,
                           displayMsg: '{0} - {1} / 총 게시물 : {2}',
                           emptyMsg: "데이터가 없습니다"
                       }
        ]
    })
})

위 코드를 보시면 크게 3가지의 코드가 적용되었습니다.

1. 데이터 스토어를 변수에 담다

별도로 그리드패널과 페이징툴바영역내에 store를 각각 적용해도 무관하지만

하나의 데이터 스토어를 이용하기 위하여 변수에 담아서 같은 저장공간을 사용하기위하여 정의

2. 스토어에 추가된 totalProperty 속성 및 pageSize속성

페이징 처리를 위해서 꼭 필요한 속성은 아닙니다. default로 이미 정의되어있긴 합니다.

만약 위 속성들을 정의하지않는다면 default 값들은

totalProperty : 'total'

pageSize : 25

이 되겠습니다.

둘다 정의하지 않아도 되겠지만 임의로 10개의 데이터로 페이징처리를 하는것을 보여주기위하여 pageSize속성을 2개로 잡아보았습니다.

3. dockeditems 속성을 정의

페이징툴바 컴포넌트를 적용하기 위한 속성값입니다.

displayMsg에 정의한 0/1/2에 대한 치환자의 해석은

{0} - 현재 출력된 데이터의 시작값

{1} - 현재 출력된 데이터의 마지막값

{2} - 데이터의 총 갯수

그리고 emptyMsg 속성은 데이터의 총갯수가 0일경우 나타내기 위한 메시지속성입니다.

이제 그리드컴포넌트의 목록출력을 위하여 코드에서 정의한

서버페이지(grid_res_paging.jsp)에 다음과 같은 코드를 작성해보겠습니다.

그리드 페이징 처리를 위한 서버페이지 grid_res_paging.jsp 샘플코드

JSONArray jsonArray = new JSONArray();
    JSONObject jsonGridRootObject = new JSONObject();
    JSONObject jsonGridObject = null;
     
    //데이터스토어의 pageSize 속성에 정의된 숫자값(한페이지에 몇개의 데이터를 출력할것인지)
    String limit = request.getParameter("limit");
    // start에 들어가는 값은
    // 1page : 0 * limit
    // 2page : 1 * limit
    // 3page : 2 * limit
    // 위처럼 1,2,3 증가하는 숫자값이 아니고 0,1,2로 증가되는 인덱스값의 계산을 합니다.
    String start = request.getParameter("start");
     
    int pageNum = (Integer.parseInt(start) / Integer.parseInt(limit));
     
    //1페이지일경우
    if(pageNum == 0) {
        jsonGridObject = new JSONObject();
        jsonGridObject.put("blogger_id", "1page-guklife");
        jsonGridObject.put("blogger_name", "1page-국이");
        jsonGridObject.put("blogger_url", "1page-guklife.tistory.com");
        jsonArray.add(jsonGridObject);
         
        jsonGridObject = new JSONObject();
        jsonGridObject.put("blogger_id", "1page-hellogk");
        jsonGridObject.put("blogger_name", "1page-개발로짜");
        jsonGridObject.put("blogger_url", "1page-hellogk.tistory.com");
        jsonArray.add(jsonGridObject);
    //2페이지일 경우
    } else if(pageNum == 1) {
        jsonGridObject = new JSONObject();
        jsonGridObject.put("blogger_id", "2page-guklife");
        jsonGridObject.put("blogger_name", "2page-국이");
        jsonGridObject.put("blogger_url", "2page-guklife.tistory.com");
        jsonArray.add(jsonGridObject);
         
        jsonGridObject = new JSONObject();
        jsonGridObject.put("blogger_id", "2page-hellogk");
        jsonGridObject.put("blogger_name", "2page-개발로짜");
        jsonGridObject.put("blogger_url", "2page-hellogk.tistory.com");
        jsonArray.add(jsonGridObject);
    //3페이지일경우
    } else if(pageNum == 2) {
        jsonGridObject = new JSONObject();
        jsonGridObject.put("blogger_id", "3page-guklife");
        jsonGridObject.put("blogger_name", "3page-국이");
        jsonGridObject.put("blogger_url", "3page-guklife.tistory.com");
        jsonArray.add(jsonGridObject);
         
        jsonGridObject = new JSONObject();
        jsonGridObject.put("blogger_id", "3page-hellogk");
        jsonGridObject.put("blogger_name", "3page-개발로짜");
        jsonGridObject.put("blogger_url", "3page-hellogk.tistory.com");
        jsonArray.add(jsonGridObject);
    //4페이지일경우
    } else if(pageNum == 3) {
        jsonGridObject = new JSONObject();
        jsonGridObject.put("blogger_id", "4page-guklife");
        jsonGridObject.put("blogger_name", "4page-국이");
        jsonGridObject.put("blogger_url", "4page-guklife.tistory.com");
        jsonArray.add(jsonGridObject);
         
        jsonGridObject = new JSONObject();
        jsonGridObject.put("blogger_id", "4page-hellogk");
        jsonGridObject.put("blogger_name", "4page-개발로짜");
        jsonGridObject.put("blogger_url", "4page-hellogk.tistory.com");
        jsonArray.add(jsonGridObject);
    //5페이지일 경우
    } else if(pageNum == 4) {
        jsonGridObject = new JSONObject();
        jsonGridObject.put("blogger_id", "5page-guklife");
        jsonGridObject.put("blogger_name", "5page-국이");
        jsonGridObject.put("blogger_url", "5page-guklife.tistory.com");
        jsonArray.add(jsonGridObject);
         
        jsonGridObject = new JSONObject();
        jsonGridObject.put("blogger_id", "5page-hellogk");
        jsonGridObject.put("blogger_name", "5page-개발로짜");
        jsonGridObject.put("blogger_url", "5page-hellogk.tistory.com");
        jsonArray.add(jsonGridObject);
    }
     
    jsonGridRootObject.put("success_flag", true);
    jsonGridRootObject.put("grid_item", jsonArray);
    //데이터 목록의 총 데이터수를 넘겨주어야 한다
    jsonGridRootObject.put("total_count", 10);
    response.setContentType("text/plain; charset=UTF-8");
    PrintWriter pw = response.getWriter();
    pw.print(jsonGridRootObject);
    pw.flush();
    pw.close();

위 코드를 보시면 이전 ajax 샘플코드에 추가로

분기로 임의의 데이터를 json object를 만들어서 response해주게끔 변경을 하였습니다.

한번 실행을 해보겠습니다.

그리드패널 + 페이징툴바 실행결과

1페이지

2페이지

3페이지

4페이지

5페이지

실행결과 페이징기능이 정상적으로 구현된 것을 확인 할수 있었습니다.

등록/수정/삭제 및 DB를 이용한 조회 기능은 초반에 말씀드렸다시피

MVC구조에 대한 개념을 익힌 후에

웹어플리케이션 샘플예제를 진행할때 다루도록 하겠습니다.

by 개발로짜

저작자표시 비영리 변경금지

'웹개발강좌 > ExtJS' 카테고리의 다른 글

ExtJS 트리패널을 사용하여 컴포넌트 출력해보기 (memory/ajax 방식 포함) (0)	2014.11.07
ExtJS의 그리드패널 reconfigure함수를 적용하여 컬럼 및 데이터 재설정하기 (0)	2014.11.05
ExtJS 강좌 - 그리드패널을 출력시키기 위하여 이해를 한 후 출력시켜보자 (0)	2014.11.03
ExtJS 강좌 - 데이터스토어(store)의 proxy ajax를 통하여 콤보박스 목록 출력시켜보기 (0)	2014.10.30
ExtJS 강좌 - 콤보박스를 예를들어 스토어(STORE) 개념잡아보기 (0)	2014.10.30

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

jQueryUI 2장 - 다양한 입력태그에 달력,스피너,슬라이더 등 각종 UI 적용해보기

jQueryUI 1장 - 테마선택하여 다운로드 후 간단하게 버튼태그에 UI 적용하기

ExtJS 강좌 - 그리드패널에 페이징툴바를 적용하여 페이징 목록 출력하기

버튼UI 적용

그룹버튼UI 적용

SELECTBOX 일명 : 콤보박스 UI 적용

스피너/슬라이더 UI적용하기

DATEPICKER HTML샘플코드

DATEPICKER JAVASCRIPT 샘플코드

'웹개발강좌 > jQueryUI' 카테고리의 다른 글

jQueryUI 연동에 필요한 include 코드

버튼컴포넌트 적용테스트를 위한 HTML 버튼태그

onload 후 button() 함수 호출

jQueryUI 연동테스트 실행결과

'웹개발강좌 > jQueryUI' 카테고리의 다른 글

그리드 페이징툴바 샘플 스크립트 코드

그리드 페이징 처리를 위한 서버페이지 grid_res_paging.jsp 샘플코드

그리드패널 + 페이징툴바 실행결과

'웹개발강좌 > ExtJS' 카테고리의 다른 글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역