최근 다양한 디바이스에 대한 요구사항이 점점 더 많아지면서 해상도별 화면 사이징 처리 관련 이슈들이 종종 발생합니다. 이번 New&Tip에서는 이러한 이슈 해결을 돕고자 넥사크로플랫폼 17의 신규 기능인 ‘arrangement’를 소개합니다

1) 기능설명

- 넥사크로플랫폼은 폼이나 각 컴포넌트의 위치를 left, top, right, bottom width, height 속성으로 지정하여 사용합니다. 각 속성값은 px와 % 중 하나를 선택하여 사용하며, Position Base 속성을 추가 지원합니다.

- Position Base속성이란 부모 컴포넌트를 기준으로 해당 컴포넌트간의 간격 및 위치를 조정하여 실행 시에 자동으로 반응되는 기능입니다. 이러한 기능은 컴포넌트의 높이, 너비의 최대, 최소값을 지정할 수 있는 fittocontents 속성값을 함께 사용하여 더욱 효과적으로 화면을 개발 할 수 있습니다.

- 자세한 내용은 넥사크로플랫폼 17 개발도구 가이드를 참고하세요!

개발도구 가이드 바로가기
(http://docs.tobesoft.com/development_tools_guide_nexacro_17_ko#fa50c27d243a255b)

[arrangement 기능 예시]

2) 화면구성

- 화면은 목록 표시를 위한 Grid컴포넌트와 콘텐츠를 저장할 Dataset컴포넌트, 해당 이미지와 정보를 표시할 Image Viewer 와 Static 컴포넌트로 구성이 되며, Summary의 데이터가 변경될 경우 해당 크기에 따라 위치가 변경 될 수 있도록 Div영역으로 구성합니다.

- Summary의 콘텐츠가 들어가는 Static 컴포넌트의 minhieght와 fittocontents 속성을 지정하고, wordwrap속성을 변경합니다.

- 하단의 세부 정보 콘텐츠 영역에 해당되는 Div는 상단의 Summary Static의 사이즈에 따라 위치값이 변경 될 수 있도록 top위치의 Position Base값을 지정하고, 간격을 지정합니다.

*주의사항
Fittocontents 사용을 위하여 사이즈가 조절될 경우 form의 resetscroll이 필요합니다.
해당 예제 화면에서는 form의 onbindingvaluechanged 이벤트를 사용하였습니다.

this.CompBase_ArrangeFit_onbindingvaluechanged = 
function(obj:nexacro.Form,e:nexacro.BindingValueChangedEventInfo)
{
    this.resetScroll();
};

3) 응용방법

- 다음 화면은 넥사크로플랫폼17 그랜드 세미나에서 사용했던 데모화면으로 각 의료진의상세내용이 drop down하여 펼쳐질 경우 arrangement 기능을 이용하여 하단의 의료진 리스트가 순차적으로 이동되는 예시화면입니다.

- 화면의 3개의 Div를 생성하고, 각 Div form 안에 해당 상세 내역을 기록할 컴포넌트를 배치 합니다. Div form 안에 해당 컴포넌트 배치 후, 각 Div 크기는 접힌 상태로 지정합니다. (상세내역 숨겨진 상태)

this.classCode = "01";

this.arrangement_test_onload = function(obj:nexacro.Form,e:nexacro.LoadEventInfo)
{
    //form load시 fn_setPerson 함수 호출 및 Scroll 속성 변경
    
    this.fn_setPerson(this.classCode);
    
    //현재 화면에서는 Div의 scroll을 사용하지 않습니다.
    this.divPerson01.form.set_scrollbartype("none");
    this.divPerson02.form.set_scrollbartype("none");
    this.divPerson03.form.set_scrollbartype("none");
    
    this.divPerson01.form.set_scrolltype("none");
    this.divPerson02.form.set_scrolltype("none");
    this.divPerson03.form.set_scrolltype("none");
};

this.divPerson_btnDetail_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
    //각 Div의 약력상세 버튼이 클릭되었을 경우, 현재 Div Height 변경
    
    var objDiv = obj.parent.parent;
    
    var nHeight = objDiv.getOffsetHeight();
    
    if(nHeight==149)
    {
        nHeight = 461;
    }else
    {
        nHeight = 149;
    }
    
    objDiv.setOffsetHeight(nHeight);
    this.resetScroll();
};

/*****************************************************************************
* 함 수 명 칭 : fn_setPerson
* 함 수 설 명 : 화면 loading시 Dataset을 ClassCode 기준으로 필터링 후,
                 데이터를 매핑합니다.
* 파 라 미 터 : sCode - 진료과 ClassCode
* 리 턴 내 용 : 
*****************************************************************************/
this.fn_setPerson = function(sCode)
{
    var i;
    var objPerson;
    var sName;
    var sClassName;
    var sSubClass;
    var sSchool;
    var sCareer;
    var sImage;
    
    var objDs = this.dsPersonList;
    objDs.filter("ClassCode=='"+sCode+"'");
    
    //현재 Dataset에서 ClassCode기준으로 필터링 된 데이터를 각 컴포넌트에 매핑합니다.
    for(i=0; i<this.dsPersonList.rowcount; i++)
    {
        sName      = objDs.getColumn(i, "Name");
        sClassName = objDs.getColumn(i, "ClassName");
        sSubClass  = objDs.getColumn(i, "SubClass");
        sSchool    = objDs.getColumn(i, "School");
        sCareer    = objDs.getColumn(i, "Career");
        sImage     = objDs.getColumn(i, "Image");
        
        objPerson  = this.components["divPerson0"+(i+1)];
        
        objPerson.form.stPerson.set_cssclass(sImage);
        objPerson.form.stName.set_text(sName);
        objPerson.form.stClass.set_text("진료과     ["+sClassName+"]");
        objPerson.form.stSubClass.set_text("전문분야     "+sSubClass);
        objPerson.form.stSchoolDetail.set_text(sSchool);
        objPerson.form.stCareerDetail.set_text(sCareer);
    }
}

(주)투비소프트 프리세일즈팀 한나 책임hanna0331@tobesoft.com