◆  화면소스 작성

   1. 기존에 만들어져있는 화면들을 보고 구성하고자 하는 형태를 미리 본다.

       - 왼쪽의 메뉴를 눌러 화면형태를 보니 공통코드관리화면이 제품코드관리하는데 적합한 화면일 것 같다.

    


   2. 기본적으로 axboot 화면의 jsp 위치는 webapp > jsp 하위에 있고, js 는 webapp > assets > js 하위에 있다.

       시스템공통관련 소스는 그 하위의 system이라는 폴더에 따로 모여있다.

   3. 일단 우리가 만드는 화면소스들은 한폴더에서 관리하기 위해 아래와 같이 shopnmg 라는 폴더를 생성한다. 

      (본인이 원하는 위치로 해도 됨)

       - js 용 폴더 생성 : webapp > assets > js > view > shopmng

 - jsp용 폴더 생성 : webapp > jsp > shopmng 

   4. 그런다음 공통코드관리의 화면소스를 복사하여 이름을 바꾸자.

   이름은 product.js, product.jsp 로 만들도록 하겠다.

     

   5. 소스수정

       1) webapp하위의 axboot.config.js 에 js의 호출할 약식이름과 full명의 mapping설정

    js에서 product로 호출하면 controller에 "/api/v1/product" 로 호출할 수 있도록 내용을 추가한다.


   6. product.js 파일 수정 : url 경로와 gridView를 제품테이블 기준으로 변경한다.

       : 화면속성은  http://localhost:8080/modelExtractor/db 로 접속시 나오는 필드명을 사용하면 된다.

var fnObj = {};

var ACTIONS = axboot.actionExtend(fnObj, {

    PAGE_SEARCH: function (caller, act, data) {

        axboot.ajax({

            type: "GET",

            url: ["product"], 

            data: caller.searchView.getData(),

            callback: function (res) {

                caller.gridView01.setData(res);

            }

        });

        return false;

    },

    PAGE_SAVE: function (caller, act, data) {

        var saveList = [].concat(caller.gridView01.getData("modified"));

        saveList = saveList.concat(caller.gridView01.getData("deleted"));


        axboot.ajax({

            type: "PUT",

            url: ["product"],

            data: JSON.stringify(saveList),

            callback: function (res) {

                ACTIONS.dispatch(ACTIONS.PAGE_SEARCH);

                axToast.push(LANG("onsave"));

            }

        });

    },

    ITEM_ADD: function (caller, act, data) {

        caller.gridView01.addRow();

    },

    ITEM_DEL: function (caller, act, data) {

        caller.gridView01.delRow("selected");

    }

});


// fnObj 기본 함수 스타트와 리사이즈

fnObj.pageStart = function () {

    this.pageButtonView.initView();

    this.searchView.initView();

    this.gridView01.initView();


    ACTIONS.dispatch(ACTIONS.PAGE_SEARCH);

};


fnObj.pageResize = function () {


};


fnObj.pageButtonView = axboot.viewExtend({

    initView: function () {

        axboot.buttonClick(this, "data-page-btn", {

            "search": function () {

                ACTIONS.dispatch(ACTIONS.PAGE_SEARCH);

            },

            "save": function () {

                ACTIONS.dispatch(ACTIONS.PAGE_SAVE);

            }

        });

    }

});


//== view 시작

/**

 * searchView

 */

fnObj.searchView = axboot.viewExtend(axboot.searchView, {

    initView: function () {

        this.target = $(document["searchView0"]);

        this.target.attr("onsubmit", "return ACTIONS.dispatch(ACTIONS.PAGE_SEARCH);");

        this.filter = $("#filter");

    },

    getData: function () {

        return {

            pageNumber: this.pageNumber,

            pageSize: this.pageSize,

            filter: this.filter.val()

        }

    }

});



/**

 * gridView

 */

fnObj.gridView01 = axboot.viewExtend(axboot.gridView, {

    initView: function () {

        var _this = this;

        this.target = axboot.gridBuilder({

            showRowSelector: true,

            frozenColumnIndex: 0,

            sortable: true,

            multipleSelect: true,

            target: $('[data-ax5grid="grid-view-01"]'),

            columns: [

                {key: "prdtCd", label: "제품코드", width: 100, align: "center", editor: "text"},

                {key: "prdtNm", label: "제품명", width: 200, align: "center", editor: "text"},

                {key: "origin", label: "원산지", width: 100, align: "center", editor: "text"},

                {key: "purchasePrice", label: "매입가격", width: 150, align: "right", editor: "number"},

                {key: "salesPrice", label: "판매가격", width: 150, align: "right", editor: "number"}                

            ],

            body: {

                onClick: function () {

                    this.self.select(this.dindex, {selectedClear: true});

                }

            }

        });


        axboot.buttonClick(this, "data-grid-view-01-btn", {

            "add": function () {

                ACTIONS.dispatch(ACTIONS.ITEM_ADD);

            },

            "delete": function () {

                ACTIONS.dispatch(ACTIONS.ITEM_DEL);

            }

        });

    },

    getData: function (_type) {

        var list = [];

        var _list = this.target.getList(_type);


        if (_type == "modified" || _type == "deleted") {

            list = ax5.util.filter(_list, function () {

                return this.prdtCd;  //이부분을 키값으로 수정해줘야 변경된 값을 인식해서 서버로 날려줄 수 있다.

            });

        } else {

            list = _list;

        }

        return list;

    },

    addRow: function () {

        this.target.addRow({__created__: true, posUseYn: "N", useYn: "Y"}, "last");

    }

});


7. product.jsp 수정 : js 가 있는 위치를 변경해준다.

<%@ page contentType="text/html; charset=UTF-8" %>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%@ taglib prefix="ax" tagdir="/WEB-INF/tags" %>


<ax:set key="system-common-code-version" value="1.0.0"/>

<ax:set key="title" value="${pageName}"/>

<ax:set key="page_desc" value="${pageRemark}"/>

<ax:set key="page_auto_height" value="true"/>


<ax:layout name="base">

    <jsp:attribute name="script">

        <ax:script-lang key="ax.script" var="LANG" />

        <ax:script-lang key="ax.admin" var="COL" />

        <script type="text/javascript" src="<c:url value='/assets/js/view/shopmng/product.js' />"></script>

    </jsp:attribute>

    <jsp:body>


        <ax:page-buttons></ax:page-buttons>


        <div role="page-header">

            <ax:form name="searchView0">

                <ax:tbl clazz="ax-search-tbl" minWidth="500px">

                    <ax:tr>

                        <ax:td label='ax.admin.search' width="300px">

                            <ax:input type="text" name="filter" id="filter" clazz="form-control" placeholder="ax.admin.input.search"/>

                        </ax:td>

                    </ax:tr>

                </ax:tbl>

            </ax:form>

            <div class="H10"></div>

        </div>


        <ax:split-layout name="ax1" orientation="horizontal">

            <ax:split-panel width="*" style="">


                <!-- 목록 -->

                <div class="ax-button-group" data-fit-height-aside="grid-view-01">

                    <div class="left">

                        <h2>

                            <i class="cqc-list"></i>

                            <!--<ax:lang id="ax.admin.commoncode.title"/>-->

                            제품코드 관리

                        </h2>

                    </div>

                    <div class="right">

                        <button type="button" class="btn btn-default" data-grid-view-01-btn="add"><i class="cqc-circle-with-plus"></i> <ax:lang id="ax.admin.add"/></button>

                        <button type="button" class="btn btn-default" data-grid-view-01-btn="delete"><i class="cqc-circle-with-minus"></i> <ax:lang id="ax.admin.delete"/></button>

                    </div>

                </div>

                <div data-ax5grid="grid-view-01" data-fit-height-content="grid-view-01" style="height: 300px;"></div>


            </ax:split-panel>

        </ax:split-layout>



    </jsp:body>

</ax:layout> 

8. JAVA 소스 수정

 - com/dasdes/shopmng/contrillers/ProductController.java : 조회조건 받을수 있도록 수정 

 - com/dasdes/shopmng/domain/prdt/Product.java           : 필수값체크

 - com/dasdes/shopmng/domain/prdt/ProductService.java  : 조회조건 filter추가 및 list 리턴객체 교체


ProductController.java

package com.dasdes.shopmng.controllers;


import com.chequer.axboot.core.api.response.Responses;

import com.chequer.axboot.core.controllers.BaseController;

import com.chequer.axboot.core.parameter.RequestParams;

import org.springframework.stereotype.Controller;

import com.chequer.axboot.core.api.response.ApiResponse;

import org.springframework.web.bind.annotation.RequestMethod;

import org.springframework.web.bind.annotation.RequestBody;

import org.springframework.web.bind.annotation.RequestMapping;

import com.dasdes.shopmng.domain.prdt.Product;

import com.dasdes.shopmng.domain.prdt.ProductService;


import javax.inject.Inject;

import java.util.List;


@Controller

@RequestMapping(value = "/api/v1/product")

public class ProductController extends BaseController {


    @Inject

    private ProductService productService;


    @RequestMapping(method = RequestMethod.GET, produces = APPLICATION_JSON)

    public Responses.ListResponse list(RequestParams<Product> requestParams) {

        List<Product> list = productService.gets(requestParams);

        return Responses.ListResponse.of(list);

    }


    @RequestMapping(method = {RequestMethod.PUT}, produces = APPLICATION_JSON)

    public ApiResponse save(@RequestBody List<Product> request) {

        productService.save(request);

        return ok();

    }

}


4. 화면소스 작성

   1) 기존에 만들어져있는 화면들을 보고 구성하고자 하는 형태를 미리 본다.

       - 왼쪽의 메뉴를 눌러 화면형태를 보니 공통코드관리화면이 제품코드관리하는데 적합한 화면일 것 같다.

    


   2) 기본적으로 axboot 화면의 jsp 위치는 webapp > jsp 하위에 있고, js 는 webapp > assets > js 하위에 있다.

       시스템공통관련 소스는 그 하위의 system이라는 폴더에 따로 모여있다.

   3) 일단 우리가 만드는 화면소스들은 한폴더에서 관리하기 위해 아래와 같이 shopnmg 라는 폴더를 생성한다. 

      (본인이 원하는 위치로 해도 됨)

       - js 용 폴더 생성 : webapp > assets > js > view > shopmng

 - jsp용 폴더 생성 : webapp > jsp > shopmng 

   4) 그런다음 공통코드관리의 화면소스를 복사하여 이름을 바꾸자.

   이름은 product.js, product.jsp 로 만들도록 하겠다.

     

   5) 소스수정

       a) axboot.config.js 에 js의 호출할 약식이름과 full명의 mapping설정

    js에서 product로 호출하면 controller에 "/api/v1/product" 로 호출할 수 있도록 내용을 추가한다.


     6) product.js 파일 수정 : url 경로와 gridView를 제품테이블 기준으로 변경한다.

       : 화면속성은  http://localhost:8080/modelExtractor/db 로 접속시 나오는 필드명을 사용하면 된다.

var fnObj = {};

var ACTIONS = axboot.actionExtend(fnObj, {

    PAGE_SEARCH: function (caller, act, data) {

        axboot.ajax({

            type: "GET",

            url: ["product"], 

            data: caller.searchView.getData(),

            callback: function (res) {

                caller.gridView01.setData(res);

            }

        });

        return false;

    },

    PAGE_SAVE: function (caller, act, data) {

        var saveList = [].concat(caller.gridView01.getData("modified"));

        saveList = saveList.concat(caller.gridView01.getData("deleted"));


        axboot.ajax({

            type: "PUT",

            url: ["product"],

            data: JSON.stringify(saveList),

            callback: function (res) {

                ACTIONS.dispatch(ACTIONS.PAGE_SEARCH);

                axToast.push(LANG("onsave"));

            }

        });

    },

    ITEM_ADD: function (caller, act, data) {

        caller.gridView01.addRow();

    },

    ITEM_DEL: function (caller, act, data) {

        caller.gridView01.delRow("selected");

    }

});


// fnObj 기본 함수 스타트와 리사이즈

fnObj.pageStart = function () {

    this.pageButtonView.initView();

    this.searchView.initView();

    this.gridView01.initView();


    ACTIONS.dispatch(ACTIONS.PAGE_SEARCH);

};


fnObj.pageResize = function () {


};


fnObj.pageButtonView = axboot.viewExtend({

    initView: function () {

        axboot.buttonClick(this, "data-page-btn", {

            "search": function () {

                ACTIONS.dispatch(ACTIONS.PAGE_SEARCH);

            },

            "save": function () {

                ACTIONS.dispatch(ACTIONS.PAGE_SAVE);

            }

        });

    }

});


//== view 시작

/**

 * searchView

 */

fnObj.searchView = axboot.viewExtend(axboot.searchView, {

    initView: function () {

        this.target = $(document["searchView0"]);

        this.target.attr("onsubmit", "return ACTIONS.dispatch(ACTIONS.PAGE_SEARCH);");

        this.filter = $("#filter");

    },

    getData: function () {

        return {

            pageNumber: this.pageNumber,

            pageSize: this.pageSize,

            filter: this.filter.val()

        }

    }

});



/**

 * gridView

 */

fnObj.gridView01 = axboot.viewExtend(axboot.gridView, {

    initView: function () {

        var _this = this;

        this.target = axboot.gridBuilder({

            showRowSelector: true,

            frozenColumnIndex: 0,

            sortable: true,

            multipleSelect: true,

            target: $('[data-ax5grid="grid-view-01"]'),

            columns: [

                {key: "prdtCd", label: "제품코드", width: 100, align: "center", editor: {type: "text", disabled: "notCreated"}},

                {key: "prdtNm", label: "제품명", width: 200, align: "center", editor: "text"},

                {key: "origin", label: "원산지", width: 100, align: "center", editor: "text"},

                {key: "purchasePrice", label: "매입가격", width: 150, align: "right", editor: "number"},

                {key: "salesPrice", label: "판매가격", width: 150, align: "right", editor: "number"}                

            ],

            body: {

                onClick: function () {

                    this.self.select(this.dindex, {selectedClear: true});

                }

            }

        });


        axboot.buttonClick(this, "data-grid-view-01-btn", {

            "add": function () {

                ACTIONS.dispatch(ACTIONS.ITEM_ADD);

            },

            "delete": function () {

                ACTIONS.dispatch(ACTIONS.ITEM_DEL);

            }

        });

    },

    getData: function (_type) {

        var list = [];

        var _list = this.target.getList(_type);


        if (_type == "modified" || _type == "deleted") {

            list = ax5.util.filter(_list, function () {

                return this.groupCd && this.code;

            });

        } else {

            list = _list;

        }

        return list;

    },

    addRow: function () {

        this.target.addRow({__created__: true, posUseYn: "N", useYn: "Y"}, "last");

    }

});


7) product.jsp 수정 : js 가 있는 위치를 변경해준다.

<%@ page contentType="text/html; charset=UTF-8" %>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%@ taglib prefix="ax" tagdir="/WEB-INF/tags" %>


<ax:set key="system-common-code-version" value="1.0.0"/>

<ax:set key="title" value="${pageName}"/>

<ax:set key="page_desc" value="${pageRemark}"/>

<ax:set key="page_auto_height" value="true"/>


<ax:layout name="base">

    <jsp:attribute name="script">

        <ax:script-lang key="ax.script" var="LANG" />

        <ax:script-lang key="ax.admin" var="COL" />

        <script type="text/javascript" src="<c:url value='/assets/js/view/shopmng/product.js' />"></script>

    </jsp:attribute>

    <jsp:body>


        <ax:page-buttons></ax:page-buttons>


        <div role="page-header">

            <ax:form name="searchView0">

                <ax:tbl clazz="ax-search-tbl" minWidth="500px">

                    <ax:tr>

                        <ax:td label='ax.admin.search' width="300px">

                            <ax:input type="text" name="filter" id="filter" clazz="form-control" placeholder="ax.admin.input.search"/>

                        </ax:td>

                    </ax:tr>

                </ax:tbl>

            </ax:form>

            <div class="H10"></div>

        </div>


        <ax:split-layout name="ax1" orientation="horizontal">

            <ax:split-panel width="*" style="">


                <!-- 목록 -->

                <div class="ax-button-group" data-fit-height-aside="grid-view-01">

                    <div class="left">

                        <h2>

                            <i class="cqc-list"></i>

                            <!--<ax:lang id="ax.admin.commoncode.title"/>-->

                            제품코드 관리

                        </h2>

                    </div>

                    <div class="right">

                        <button type="button" class="btn btn-default" data-grid-view-01-btn="add"><i class="cqc-circle-with-plus"></i> <ax:lang id="ax.admin.add"/></button>

                        <button type="button" class="btn btn-default" data-grid-view-01-btn="delete"><i class="cqc-circle-with-minus"></i> <ax:lang id="ax.admin.delete"/></button>

                    </div>

                </div>

                <div data-ax5grid="grid-view-01" data-fit-height-content="grid-view-01" style="height: 300px;"></div>


            </ax:split-panel>

        </ax:split-layout>



    </jsp:body>

</ax:layout> 

8) 화면에서 확인하기( 프로그램 추가 및 메뉴생성 )

   a) 먼저 서버를 구동하여 초기 셋팅되어있는 system 계정으로 접속한다.

   


    b) 프로그램추가 : 시스템관리 > 프로그램 관리 메뉴로 들어가서 아래와 같이 프로그램을 추가한다. 

        - 경로는 앞부분에 만들었던 product.jsp의 경로를 입력해주면 되며, 권한체크/조회/저장을 체크해준다.


   c) 메뉴추가 : 시스템관리 > 메뉴관리 메뉴에서 아래와 같이 처리한다.

 


    d) 메뉴와 프로그램 연결 및 기타설정

       : 아래와 같이 생성된 "제품정보"를 클릭하여 프로그램 연결 수 다국어명칭 및 권한을 설정한다.

   


  e) 새로고침(F5)을 눌러 생성된 메뉴와 화면이 잘 연결된 것을 확인할 수 있다.



*"Axboot 신규화면 만들기 3 - 정상적인 CRUD를 위한 JAVA소스 수정" 에서 계속..............

  (JAVA소스에 약간의 양념을 넣어줘야 제대로 작동한다.)



만족하셨나요? ~~~~~~~맘에 드셨다면 아래 꾹~~~




  1. jack 2019.11.22 17:36

    안녕하세요..아직 공부중인 신입사원입니다..
    이렇게 만들었는데 에러가 나면서 QProduct 클래스를 찾을수 없다고 클래스낫파운드 익셉션이 발생합니다..
    Generate로 생성되는 패키지 prdt안에 Controller, Service, Repository, 그리고 Entity로 보이는 Product클래스까지만 생성되는데
    Mybatis 인터페이스와 xml은 따로 생성해줘야 하는건가요? 그리고 VO클래스도 안만들어져서 오류가 나는것 같은데 어떻게 하셨는지 궁금합니다..

    • dasdes 2019.11.22 18:00 신고

      아직 끝난게 아닙니다. 다음강좌도 연속해서 해보시길 바랍니다.
      Axboot 신규화면 만들기 3 - 정상적인 CRUD를 위한 JAVA소스 수정
      https://dodo-it.tistory.com/40?category=753919


  2. jack 2019.11.25 08:41

    답변 감사합니다! 말씀하신대로 다음 강좌로 넘어가서 진행 해보도록 하겠습니다^^ 날씨 추운데 감기 조심하세요

+ Recent posts