블로그 이미지
윤영식
Full Stacker, Application Architecter, KnowHow Dispenser and Bike Rider

Publication

Category

Recent Post

'jquery-ui'에 해당되는 글 2

  1. 2013.11.12 [jQueryUI] jqGrid 사용하기 - 2
  2. 2013.11.12 [jQueryUI] 기본 개념 및 사용하기 - 1
2013. 11. 12. 07:01 HTML5, CSS3/jQuery

jquery grid 플러그인 jqGrid를 사용하는 방법과 jquery-ui의 custom theme을 입히는 방법을 알아보자 



1. jqGrid 이해

  - jQuery Grid Plugin 이다 

  - Open Source, MIT License 이다. 즉, 상업적인 용도로 사용해도 된다 

  - jqGrid 설명을 보자



2. 테스트 환경 만들기 

  - Angular + Express 프레임워크를 Node.js 기반으로 테스트 할 것이다 (방법-3 Yeoman Generator FullStack 사용 통합)

// angular + express 프레임워크 기반의 코드를 만든다 

$ mkdir jqgrid && cd jqgrid

$ sudo npm install -g generator-angular-fullstack

$ yo angular-fullstack jqGridApp


// localhost:9000 포트의 크롬 브라우져가 자동으로 수행된다 

$ grunt server 


// 디렉토리 구조 

  - app : Angular.js SPA 폴더 

  - lib : Express.js 서버 폴더

  - public : app의 minification 배포 폴더 (grunt build시 자동 생성됨)

  - 기타 : grunt, bower, yo, karma 설정 파일들 



3. jqGrid 설정하기 

  - 먼저 jqGrid 를 다운로드 한다 (bower install jqgrid 로 설치할 수 있으나 이상하게 에러 발생하여 직접 다운로드 설치 사용함)

  - 다운로드한 파일은 app/bower_components/jqgrid 폴더로 풀어 놓는다 

    + css 는 jquery-ui의 ThemeRoller에서 선택한 css를 적용하면 jqGrid의 theme 이 변경된다 

    + jquery-migrate를 반드시 설정한다 $.browser.msie 체크 기능은 jquery 1.4*버전에만 존재하여 최신버전에 없어졌다

    + jquery-ui.js 를 설정하고 언어패키지와 jqGrid.js를 최종 설정하게 된다 

// app/index.html 내역 추가

// css 영역 파란색 추가  

        <!-- build:css(.tmp) styles/main.css -->

        <link rel="stylesheet" href="styles/bootstrap.css">

        <link rel="stylesheet" href="styles/main.css">

        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">

        <link rel="stylesheet" href="bower_components/jqgrid/css/ui.jqgrid.css">

        <!-- endbuild -->


// js 영역 파란색 추가 

        <script src="bower_components/jquery/jquery.js"></script>

        <script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>


        <!-- The JQuery UI code -->

        <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>

        <script src="bower_components/jqgrid/js/i18n/grid.locale-en.js"></script>

        <script src="bower_components/jqgrid/js/jquery.jqGrid.min.js"></script>


  - app/view/main.html 수정

// 기존코드 주석처리 

<!--div class="hero-unit">

  <h1>'Allo, 'Allo!</h1>

  <p>You now have</p>

  <ul>

      <li ng-repeat="thing in awesomeThings">{{thing}}</li>

  </ul>

  <p>installed.</p>

  <h3>Enjoy coding! - Yeoman</h3>

</div-->


// jqGrid 표현 태그 추가 

<table id="Grid"></table>

<div id="GridPager"></div>

    

// jqGrid 자바스크립트 코드 추가 

<script>

  ... 중략 ...

</script>

  - jqGrid 자바스크립트 코드 내역 

// 데이터와 변수 설정 

var gidData = [

        { id: "1", orderdate: "2013-10-01", customer: "customer",  price: "200.00", vat: "10.00", completed: true, shipment: "TN", total: "210.00"},

        { id: "2", orderdate: "2013-10-01", customer: "customer2",  price: "300.00", vat: "20.00", completed: false, shipment: "FE", total: "320.00"},

        { id: "3", orderdate: "2011-07-30", customer: "customer3",  price: "400.00", vat: "30.00", completed: false, shipment: "FE", total: "430.00"},

        { id: "4", orderdate: "2013-10-04", customer: "customer4",  price: "200.00", vat: "10.00", completed: true, shipment: "TN", total: "210.00"},

        { id: "5", orderdate: "2013-11-31", customer: "customer5",  price: "300.00", vat: "20.00", completed: false, shipment: "FE", total: "320.00"},

        { id: "6", orderdate: "2013-09-06", customer: "customer6",  price: "400.00", vat: "30.00", completed: false, shipment: "FE", total: "430.00"},

        { id: "7", orderdate: "2011-08-30", customer: "customer7",  price: "200.00", vat: "10.00", completed: true, shipment: "TN", total: "210.00"},

        { id: "8", orderdate: "2013-10-03", customer: "customer8",  price: "300.00", vat: "20.00", completed: false, shipment: "FE", total: "320.00"},

        { id: "9", orderdate: "2013-09-01", customer: "customer9",  price: "400.00", vat: "30.00", completed: false, shipment: "TN", total: "430.00"},

        { id: "10", orderdate: "2013-09-08", customer: "customer10", price: "702.00", vat: "30.00", completed: true, shipment: "IN", total: "530.00"},

        { id: "11", orderdate: "2013-09-08", customer: "customer11",  price: "500.00", vat: "30.00", completed: false, shipment: "FE", total: "530.00"},

        { id: "12", orderdate: "2013-09-10", customer: "customer12",  price: "500.00", vat: "30.00", completed: false, shipment: "FE", total: "530.00"}

    ],

    theGrid = $("#Grid"),

    numberTemplate = {formatter: 'number', align: 'right', sorttype: 'number'};

 

// jqGrid 옵션 설정 

    theGrid.jqGrid({

        datatype: 'local',

        data: gidData,

        colNames: ['Customer', 'Date',  'Price', 'VAT', 'Total', 'Completed', 'Shipment'],

        colModel: [                  

            {name: 'customer', index: 'customer', width: 90, editable:true},

       {name: 'orderdate', index: 'orderdate', width: 100, align: 'center', sorttype: 'date',

           formatter: 'date', datefmt: 'd-M-Y'},

       {name: 'price', index: 'price', width: 55, template: numberTemplate},

       {name: 'vat', index: 'vat', width: 42, template: numberTemplate},

       {name: 'total', index: 'total', width: 50, template: numberTemplate},

       {name: 'completed', index: 'completed', width: 30, align: 'center', formatter: 'checkbox',

           edittype: 'checkbox', editoptions: {value: 'Yes:No', defaultValue: 'Yes'}},

       {name: 'shipment', index: 'shipment', width: 80, align: 'center', formatter: 'select',

          edittype: 'select', editoptions: {value: 'FE:FedEx;TN:TNT;IN:Intime;us:USPS', defaultValue: 'Intime'}}                  

        ],

        autowidth: true,

        gridview: true,             

        rownumbers: false,

        rowNum: 10,

        rowList: [5, 10, 15],

        pager: '#GridPager',

        sortname: 'Date',

        sortorder: 'asc',

        viewrecords: true,  

        caption: 'LG Solar Dashboard',

        height: '100%',

        width: 'auto',

        gridComplete :  function () {

                       var maxDate; 

                       var rowIDs = jQuery("#Grid").jqGrid('getDataIDs');

                       for (var i = 0; i < rowIDs.length ; i++) 

                       {

                           var rowID = rowIDs[i];

                           var row = jQuery('#Grid').jqGrid ('getRowData', rowID);


                           if(i==0)

                           {

                               maxDate = new Date(row.orderdate);

                           }

                           else

                           {

                               if(maxDate < new Date(row.orderdate))

                               {   

                                maxDate = new Date(row.orderdate);

                               }                                       

                           }       

                       }

                       $("#maxDateField").val(maxDate);

                        }

    });


// 수행

$ grunt server



<참조>

  - jqGrid Homepage

  - jquery-migrate 하기

posted by 윤영식
2013. 11. 12. 01:45 HTML5, CSS3/jQuery

jQueryUI는 jQuery를 기본으로 하면서 뷰를 표현하는 다양한 컴포넌트, 위젯을 모아놓은 User Interface를 모아 놓은 것이다. 어떻게 시작할 수 있는지 알아보자 




1. 사전 지식

  - 먼저 데모페이지에서 어떤 종류의 컴포넌트가 있는지 보자 

  - 여러 종류의 컴포넌트중 사용하길 원하는 부분만 Download Builder 를 통하여 다운로드한다



2. 파일 다운로드하기 

  - Download Builder에서 필요한 컴포넌트 -Core, Interactions, Widgets, Effects - 를 선택한다. 

  - 사용할 테마(Theme)를 선택한다. ThemeRoller 에서 사용자 정의도 가능하고 이미 만들어진 것을 선택할 수 있다

  - jQuery UI 버전 - 1.10.3/1.9.2 - 을 선택한다. jQuery 버전은 1.6 이상을 요구한다

  - 마지막으로 download 버튼을 클릭한다. 다운로드 파일 예) jquery-ui-1.10.3.custom.zip

// 압추을 풀면 폴더와 파일 존재한다. index.html 를 브라우져에서 확인해 볼 수 있다

/css

/development-bundle

/ js

index.html 

  - index.html 의 내용

// css를 추가

<link rel="stylesheet" href="css/themename/jquery-ui.custom.css" />

// jquery를 먼저 위치시킴

<script src="js/jquery.min.js"></script>

// jquery-ui를 위치시킴

<script src="js/jquery-ui.custom.min.js"></script>

  - smoothness theme을 선택했을 경우




3. 사용자 정의하기

  - JSON 형태로 옵션 객체를 전달한다. API를 확인하고 설정한다

$( "#mySliderDiv" ).slider({

    orientation: "vertical",

    min: 0,

    max: 150,

    value: 50

});

  - jQuery UI 개발에 참여하고 싶다면 Development Center로...



4. 동작방식 이해하기 

  - jQuery UI widgets은 공통 API를 제공하는 Widget Factory 기반으로 생성된다

  - Widget Life Cycle

    + Initialization : 플로그인을 펑션을 호출한다. 옵션이 없으면 default 옵션이 적용된다 

$( "#elem" ).progressbar();

또는

$( "#elem" ).progressbar({ value: 20 });

    + Methods : 최기화 된 후 상태를 조회하거나 액션을 수행할 수 있다. 메소드 이름 "value" 호출하여 40을 설정. 체이닝 호출 가능함.

$( "#elem" )

    .progressbar( "value", 90 )

    .addClass( "almost-done" );

    + Command Methods : option, disable, enable, destroy, widget 

$( "#elem" ).progressbar( "disable" );

$( "#elem" ).progressbar( "enable" );

$( "#elem" ).progressbar( "distroy" );

    + Events : 모든 동작에 대한 위젯별 이벤트 콜백 펑션을 설정한다. 공통 이벤트는 위젯 생성후 호출되는 create 이 존재함

// bind 호출 후 위젯명+이벤트명 연결하여 호출 

$( "#elem" ).bind( "progressbarchange", function() {

    alert( "The value has changed!" );

});


// 위젯 호출 후 change에 콜백 펑션 정의

$( "#elem" ).progressbar({

    change: function() {

        alert( "The value has changed!" );

    }

});

 


5. 테마 설정하기 

  - 기본적으로 jQuery UI CSS Framework - ui.theme.css - 와 plugin 별 CSS가 조합되어 만들어진다

    + ui.theme.css는 ThemeRoller 를 통하여 변경하는 경우

    + ui.theme.css 또는 widget plugin css를 직접 CSS를 변경하는 경우

    + 완전히 새로운 CSS를 만드는 경우 예) Twitter Bootstrap CSS를 jQuery UI에 적용 

    



6. CSS Framework API 이해 

  - ui.core.css 와 ui.theme.css 두개로 분리된다  

  - Layout Helpers : .ui-helper-*

  - Widget Containers : .ui-widget-*

  - Interaction States/Cues : .ui-state-*

  - Icon : .ui-icon 형식) .ui-icon-{icon type}-{icon sub description}-{direction}

  - Corner Radius : .ui-corner-*

  * jQuery UI Theme Base 깃헙 소스



7. 직접 Theme 만들기 

  - 디렉토리 구조 만들기 

// 1. themename 폴더 만들기 

/themename


// 2. 기본 css 파일 만들기

/themename/themename.css


// 3. 플러그인 css 파일 만들기 

/themename/themename.pluginname.css


// 4. 이미지 포함하기 

/themename/img.png

  - 스타일링 : .ui-themename 으로 한다면 하기와 같이 사용한다 

<html>

<head>

    <title>My Site</title>

    <link rel="stylesheet" href="themename/themename.css" />

    <link rel="stylesheet" href="othertheme/othertheme.css" />

    <link rel="stylesheet" href="othertheme/othertheme.dialog.css" />

</head>

<body class="ui-themename">

    <div class="ui-othertheme">

        <div class="ui-dialog">This is a modal dialog.</div>

    </div>

</body>

</html>



8. Widget Factory 사용하기 

  - 위젯 만드는 일관성을 보장하기 위함 

  - jQuery.widget 또는 $.widget 호출을 통하여 만든다

    + Context Object 이다. DOM은 아니다

    + Single Object로 생성된다 

// 1) namespace 는 한개의 depth만 허용하여 만들 수 있다. 여기서는 custom 이 namespace 이다 

$.widget( "custom.progressbar", {

 

   // 2) instance의 option내역 및 default 값 정의 

    options: {

        value: 0

    },

 

   // 3) 위젯 생성

    _create: function() {

        var progress = this.options.value + "%";

        // jQuery Object 

        this.element

            .addClass( "progressbar" )

            .text( progress );

    },

 

    // 4) 사용할 메소드 생성

    // Create a public method.

    value: function( value ) {

 

        // No value passed, act as a getter.

        if ( value === undefined ) {

            return this.options.value;

        }

 

        // Value passed, act as a setter.

        this.options.value = this._constrain( value );

        var progress = this.options.value + "%";

        this.element.text( progress );

    },

 

    // Create a private method. _ 즉 underscore를 하면 private 메소드가 된다 

    _constrain: function( value ) {

        if ( value > 100 ) {

            value = 100;

        }

        if ( value < 0 ) {

            value = 0;

        }

        return value;

    }

});

  - 사용하기 

var bar = $( "<div></div>" )

    .appendTo( "body" )

    .progressbar({ value: 20 });

 

// Get the current value.

alert( bar.progressbar( "value" ) );

 

// Update the value.

bar.progressbar( "value", 50 );

 

// Get the current value again.

alert( bar.progressbar( "value" ) );

  - 그외 Option 동작, Triggering CallBack Function, CleanUp with Destroy방법은 링크 참조한다



<참조>

  - jQuery UI Getting Start 

  - jQuery UI How to Work 

  - Theming jQuery UI

  - jQuery UI CSS Framework API

  - jQuery UI Theme Base 깃헙 소스

  - Twitter Bootstrap CSS를 jQuery UI에 적용

  - How to Use Widget Factory

posted by 윤영식
prev 1 next