12.컴포넌트

XPLATFORM 컴폰너트를 사용시 개발자 분들이 자주묻는 유형별로 해결방법을 가이드 합니다.

12.1Application

12.1.1애플리케이션의 mainframe, trays, widgets, global variables, global objects 로의 접근을 위해 사용되는 속성입니다.

function application_onload(obj:Object, e:LoadEventInfo)
{
 for(var i = 0; i < application.all.length; i++)
 {
  trace("Object ==> "+application.all[i]+ "Object Name ==> "+ 
         application.all[i].name);  
 }
}
Application에 포함된 Global변수의 값을 모두 trace를 통해 확인해 볼 수 있나요?

12.1.2Application의 onduplicateexcution 이벤트에 들어온 값을 확인하는 방법

function application_onduplicateexcution(obj:Object, e:DuplicateExcutionEventInfo)
{
  var temp =e.arguments; // GlobalValue의 Collection Property 입니다.
  trace("onduplicateexcution Event");
  for (var i=0; i <temp.length;i++){
      trace("::::::::::id:"+temp[i].name+"::::::::::value:"+temp[i].value);
  }
}

12.1.3Application의 실행경로 확인방법

Application의 실행경로 즉 ADL경로를 얻는 방법

애플리케이션에서 사용하는 ADL 경로를 갖는 속성입니다.

trace(application.xadl)
프로그램 실행경로를 알 수 있나요?

TypeDefinition의 Services에 등록된 Group별 경로를 얻는 방법

아래와 같이 services객체에 접근하여 해당 url을 얻어 오실 수 있습니다.
for(var i=0; i<application.services.length; i++)
 {
      trace(application.services[i] + " : " + application.services[i].url);
 }

스크립트를 이용한 폼경로 및 ROOT경로 얻는 방법

아래 코드함수를 이용하여 얻을 수 있습니다. 
예)
  Edit00.value = GetThisUrl();
  Edit01.value = GetProjectPath();
/*******************************************************************************
 ★ 설명
    화면내에서 자기 자신화면의 Url을 얻어온다.
 ★ Parameter 
    없음
 ★ return 
    - 성공 = 자기 자신화면의 Url ( 절대경로 또는 Service::a.xfdl 형태로 return됨 )
    - 실패 = ""
 ******************************************************************************/
function GetThisUrl()
{
 var this_url, parent_type;
 
 // Division, Tab, PopupDiv인 경우에는 따로 처리해야 함
 parent_type = GetObjType(parent);
 if( parent_type == "Div" || parent_type == "PopupDiv" || parent_type == "TabPage" )
  this_url = parent.url;
 else
  this_url = this.getOwnerFrame().formurl;
  
 return this_url;
}
/*******************************************************************************
 ★ 설명
    현재 실행되고 있는 Project의 Root Full Path를 얻어온다.
 ★ Parameter 
    없음
 ★ return 
    - 성공 = 현재 실행되고 있는 Project의 Root Full Path
    - 실패 = ""
 ★ 참고사항
    현재 실행되고 있는 ADL Path는 application.xadl을 통해 얻을 수 있다.
 ★ 목적
    Tool에서 system.execXPlatform을 하면 Project경로를 알수 없어 실행이 힘들기
    때문에 만들었다. (???(BUG))
 ★ BUG
    모든 화면 Service는 Project내의 바로 한단계 아래의 Sub Directory이고
    ADL은 Project Directory에 있다는 전제하에 만들어 졌다.
    즉, Project=C:\A\, ADL=C:\A\ADL.xadl, Service=C:\A\Service\라는 가정하에
    만들어졌다.
 ******************************************************************************/
function GetProjectPath()
{
 var cur_xadl, filename, project_path;
 
 cur_xadl = application.xadl;
 if( IsNull(cur_xadl) ) return "";
 filename = GetFileName(cur_xadl, true);
 if( IsNull(filename) ) return "";
 // QuickView로 돌린 경우
 if( filename == "empty_adl.xadl" )
 {
  var this_url, pos;
  
  this_url = Replace( childframe.formurl, "\\", "/" );
  pos = PosReverse( this_url, "/");
  if( pos < 0 )
   return "";
  pos = PosReverse( this_url, "/", pos-1);
  if( pos < 0 )
   return "";
  project_path = childframe.formurl.substr(0, pos+1);
 }
 // Launch Project로 돌린 경우
 else
 {
  var trim_path;
  project_path = GetFilePath(application.xadl);
  trim_path = LTrim(project_path, "file://");
  if( trim_path != project_path )
   project_path = Replace( trim_path, "/", "\\" );
 }
 return project_path;
}
/*******************************************************************************
 ★ 설명
     Object의 type을 문자열로 얻어온다.
 ★ parameter 
    1. oObj : type을 얻어올 Object
     (예 : mainframe, this.getOwnerFrame(), this, button,...)
 ★ return 
    - 성공 = Object의 type문자열(예 : "MainFrame", "ChildFrame", "Form", "Button",...) 
    - 실패 = ""
 ******************************************************************************/
function GetObjType(oObj)
{
 var sType;
 
 if( IsNull(oObj) )  return "";
 
 sType = oObj.toString().valueOf().substr(1,6);
 if( sType.toLowerCase() == "object" )
  return Mid(oObj.toString().valueOf(), " ", "]");
 return "";
}
/*******************************************************************************
 ★ 설명
    입력값이 null에 해당하는 경우 모두를 한번에 체크한다.
 ★ Parameter 
    1. sValue : 체크할 문자열( 예 : null 또는 undefined 또는 "" 또는 "abc" )
 ★ return 
    - sValue가 undefined, null, NaN, "", Array.length = 0인 경우 = true
    - 이외의 경우 = false
******************************************************************************/
function IsNull(sValue)
{
 if( new String(sValue).valueOf() == "undefined") 
  return true;
 if( sValue == null )
  return true;
 if( ("x"+sValue == "xNaN") && ( new String(sValue.length).valueOf() == "undefined" ) )
  return true;
 if( sValue.length == 0 )
  return true;
 return false;
}

/*******************************************************************************
 ★ 설명
    시작글자와 끝글자에 해당하는 글자의 사이에 있는 가운데 글자를 
    대소문자를 구별하여 찾는다.
    ( 예 : aaBBbbccdd에서 bb, dd사이의 글자 cc를 찾는다 )
 ★ Parameter 
    1. sOrg   : 원래 문자열( 예 : "aaBBbbccdd" )
    2. sStart : 찾고자 하는 시작 문자열(옵션 : Default = "")(예 : "bb" )
                (만일, sStart=""이면 nStart부터 sEnd까지의 모든 문자열이 return된다.)
    3. sEnd   : 찾고자 하는 끝 문자열 (옵션 : Default = "")( 예 : "dd" ) 
    (만일, sEnd=""이면 sStart부터 문자열의 끝까지의 모든 문자열이 return된다.)
 4. nStart : 검색 시작위치 (옵션 : Default=0) ( 예 : 1 )
 ★ return 
    - 성공 = 가운데 글자 ( 예 : "cc" )
    - 실패 = ""
 ******************************************************************************/
function Mid(sOrg, sStart, sEnd, nStart)
{
 var pos_start, pos_end, ret_str;
 
 if( IsNull(sOrg) )  return ""; 
 if( IsNull(sStart) ) sStart = "";
 if( IsNull(sEnd) )  sEnd = "";
 if( IsNull(nStart) ) nStart = 0;
  
 if( sStart == "" )
  pos_start = nStart;
 else
 {
  pos_start = Pos(sOrg, sStart, nStart);
  if( pos_start < 0 ) return "";
 }
 if( sEnd == "" )
  pos_end = sOrg.length;
 else
 {
  pos_end = Pos(sOrg, sEnd, pos_start+sStart.length, nStart);
  if( pos_end < 0 ) return "";
 }
 return sOrg.substring(pos_start+sStart.length, pos_end);
}
/*******************************************************************************
 ★ 설명
    문자열의 위치를 대소문자 구별하여 찾는다
 ★ Parameter 
    1. sOrg   : 원래 문자열( 예 : "aaBBbbcc" )
    2. sFind  : 찾고자 하는 문자열( 예 : "bb" )
    3. nStart : 검색 시작위치 (옵션 : Default=0) ( 예 : 1 )
 ★ return 
    - 성공 = 찾고자 하는 문자열의 시작위치 ( 예 : 4 )
    - 실패 = -1
 ******************************************************************************/
function Pos(sOrg, sFind, nStart)
{
 if( IsNull(sOrg) || IsNull(sFind) )  return -1;
 if( IsNull(nStart) )  nStart = 0;
  
 return sOrg.indexOf(sFind, nStart);
}
/*******************************************************************************
 ★ 설명
    File Path 문자열(예 : C:\a\b\filename.ext)에서 File명(예 : filename)을 추출
 ★ Parameter 
    1. sPath   : File Path 문자열 (예 : "C:\a\b\filename.ext")
    2. bExt    : extend를 return되는 File명에 포함시킬지 여부 ( 옵션 : Default=false )
                 - true : extend를 File명에 포함시킴
                 - false : extend를 File명에 포함시키지 않음
 ★ return 
    - 성공 =
  - bExt = true인 경우 ==> sPath에서 File명(예 : "filename.ext")
  - bExt = false인 경우 ==> sPath에서 File명(예 : "filename")
 - 실패 = ""
 ******************************************************************************/
function GetFileName( sPath, bExt )
{
 var start_pos, end_pos, tmp_pos, filename;
 if( IsNull(sPath) )  return "";
 if( IsNull(bExt) )
  bExt = false;
 
 start_pos = Math.max(PosReverse( sPath, "\\" ), 
      PosReverse( sPath, "/" ));
    tmp_pos = PosReverse( sPath, "::");
 if( tmp_pos > 0 ) tmp_pos++;
 start_pos = Math.max( start_pos, tmp_pos );
 if( bExt == false )
 {
  end_pos = PosReverse( sPath, "." );
  if( end_pos < 0 )
   end_pos = sPath.length;
  filename = sPath.substr( start_pos+1, end_pos-start_pos-1 );
 }
 else
 {
  filename = sPath.substr( start_pos+1 );
 }
  
 return filename;
}
/*******************************************************************************
 ★ 설명
    문자열의 위치를 대소문자 구별하여 거꾸로 찾는다
 ★ Parameter 
    1. sOrg   : 원래 문자열( 예 : "aaBBbbcc" )
    2. sFind  : 찾고자 하는 문자열( 예 : "BB" )
    3. nStart : 검색 시작위치 (옵션 : Default=문자열의 끝 ) ( 예 : 6 )
 ★ return 
    - 성공 = 찾고자 하는 문자열의 시작위치 ( 예 : 2 )
    - 실패 = -1
 ******************************************************************************/
function PosReverse(sOrg, sFind, nStart)
{
 var pos;
 
 if( IsNull(sOrg) || IsNull(sFind) )  return -1; 
 if( IsNull(nStart) )  nStart = sOrg.length-1;
 for( pos = nStart ; pos >= 0 ; pos-- )
 {
  if( sOrg.substr( pos, sFind.length ) == sFind )
   break;
 }
 
 return pos;
}

/*******************************************************************************
 ★ 설명
    문자열을 대소문자 구별하여 치환한다
 ★ Parameter 
    1. sOrg   : 원래문자열 (예 : "aaBBbbccBB" )
    2. sRepFrom : 치환할 문자열 ( 예 : "BB" )
    3. sRepTo : 치환될 문자열 ( 예 : "xx" )
 ★ return 
    - 성공 = 치환된 문자열 ( 예 : "aaxxbbccxx" )
    - 실패 = sOrg
 ******************************************************************************/
function Replace( sOrg, sRepFrom, sRepTo )
{
 var pos, nStart=0, sRet="";
 
 if( IsNull(sOrg) )   return "";
 if( IsNull(sRepFrom) )  return sOrg;
 if( IsNull(sRepTo) )  return sOrg;
  
 while(1)
 {
  pos = Pos( sOrg, sRepFrom, nStart );
  if( pos < 0 )
  {
   sRet += sOrg.substr( nStart );
   break;
  }
  else
  {
   sRet += sOrg.substr( nStart, pos - nStart);
   sRet += sRepTo;
   nStart = pos+sRepFrom.length;
  }
 }
 return sRet;
}

12.1.4Application안에서 사용하는 컴포넌트의 ScrollBar의 사이즈를 조정하는 방법

그리드의 데이타가 많은 경우 가로/세로 스크롤이 발생하게 됩니다. 
또한 마우스를 이용하의 움직일 수 있는 bar가 나타나게 되는데 이때 bar의 최소 사이즈를
지정하고 싶은경우가 있습니다.  
이 경우에는 CSS를 이용하여 세팅을 할 수 있습니다.
ex) 
*>#vscrollbar
{
    background : #929292b3;
    barminsize : 50; <---- 적당한 사이즈를 지정해 주시면 됩니다. 

}
해당 내용은 그리드 뿐 아니라, 폼, Div, TabPage 등 모든 스크롤에 대해 적용이 됩니다.

12.2Form

12.2.1frame 동기화 처리 방법

Frame의 로딩 순서가 랜덤하게 결정되어 sync 문제가 생길 경우 동기화시킬 수 있는 방안에 대해 기술합니다.
사용 예)
1) Global변수에 Count변수를 선언합니다. 
    예: gFCnt=0; 
2) 프레임 정의 상단 프레임이 A라 가정하고 실제 함수가 포함되어 있다 가정 B프레임 실해 함수를 호출하는 프레임이라 가정 
    A의 프레임의 onLoad이벤트에서 다음과 같이 체크 
    if(gFCnt==1) {
        //B프레임이에서 이미 호출을 한번 했었다는 의미 그럼 자기자신의 함수를 호출 해줌 
    } else { 
        gFCnt=1; //아직 B에서 호출하기 전 
    }
    B의 프레임의 onLoad이벤트에서 다음과 같이 체크 
    if(gFCnt==1) {
        //A가 정상적으로 먼저 Load가 된 경우 
        그럼 자기자신의 함수를 호출 해줌 
    } else { 
        gFCnt=1; //아직 A가 호출하기 전
    }
Frame 동기화 방법

12.2.2XPLATFORM [ChildFrame Close 시 Dataset 전달]

현상

해결방법

사용 예)
방법1) removeChild 후 사용 
var ds = this.removeChild("Dataset00"); 
close(ds);
 
방법2) 새로운 Dataset을 생성하여 Data를 복사한 후 사용 
var ds = new Dataset; 
ds.assign(Dataset00); // 또는 ds.copyData(Dataset00); 
close(ds);

12.2.3isValidObject 사용 방법

입력된 Object 또는 Name이 Form내에 존재하는 Object인지 여부를 확인하는 메소드 입니다.

기본 사용방법

사용 예)
var bRet;
bRet = isValidObject(Button00);
bRet = isValidObject("Button00");

주의사항

TabPage, Div안에 포함된 Object를 체크하고자 한다면 아래와 같이 사용해야 합니다.
var bRet;
bRet = Tab0.tabpage1.isValidObject(Button00);
bRet = div00.isValidObject("Button00");
isValidObject가 정상적으로 체크되지 않습니다.

12.2.4폼에 존재하는 컴포넌트의 경로를 얻는방법

XPLATFORM 폼에서 사용한 컴포넌트의 Full경로를 얻는방법에 대해 기술합니다.

화면유형

그림 12-120130116_130425741_form_fullpath

작업소스

function Button00_onclick(obj:Button,  e:ClickEventInfo)
{
        var arrRetComp = gf_GetCompFullName(this);
        for (var i=0; i<arrRetComp.length; i++) {
               trace(arrRetComp[i]);
        }
}
/*********************************************************************************************
** function name        : gf_GetCompFullName()
** function description : Form에 존재하는 Component Full Name 조회 (Recusive 함수임)
** argument             : obj                찾을 대상 obj
**                        strUpperComp       상위 Component 
** return Type          : 
** ex                   : gf_GetCompFullName(this, "")
*********************************************************************************************/
function gf_GetCompFullName(obj, strUpperComp)
{
        if (strUpperComp == null || strUpperComp == undefined) strUpperComp = "";
        var arrRet = new Array();
        for (var i=0; i<obj.components.length; i++) {
               if (obj.components[i] instanceof Div || obj.components[i] instanceof PopupDiv || obj.components[i] instanceof Tabpage) {           
                       var compName = obj.components[i].name;
                       if (strUpperComp.length > 0) compName = strUpperComp + "." + compName;
                       var tmpArrRet = gf_GetCompFullName(obj.components[i], compName);
                       if (tmpArrRet.length > 0) {
                              arrRet = arrRet.concat(tmpArrRet);
                       }
                       //Composite Component 자체도 목록으로 볼 경우
                       arrRet.push(compName);
               } else if (obj.components[i] instanceof Tab) {                      
                       var tabObj = obj.components[i];
                       var tabCompName = tabObj.name;               
                       if (strUpperComp.length > 0) tabCompName = strUpperComp + "." + tabCompName;
                       for (var t=0; t<tabObj.components.length; t++) {
                              var compName = tabCompName + "." + tabObj.components[t].name;                              
                              var tmpArrRet = gf_GetCompFullName(tabObj.components[t], compName);
                              
                              if (tmpArrRet.length > 0) {
                                      arrRet = arrRet.concat(tmpArrRet);
                              }
                              //Composite Component 자체도 목록으로 볼 경우
                              arrRet.push(compName);
                       }
                       //Composite Component 자체도 목록으로 볼 경우 
                       arrRet.push(tabCompName);
               } else {
                       var compName = obj.components[i].name;
                       if (strUpperComp.length > 0) compName = strUpperComp + "." + compName;
                       arrRet.push(compName);
               }
        }
        return arrRet;
}
[ 결과 ]
uxs (5328): Div01.div_Child.Button00
uxs (5328): Div01.div_Child
uxs (5328): Div01
uxs (5328): Div00.Grid00
uxs (5328): Div00
폼에서 사용한 컴포넌트들의 경로를 알수 있나요 Div, Tagpage경우 상위정보를 포함한 경로를 얻고자 합니다.

12.2.5폼에 함수의 존재유무를 체크하는 방법

마이플랫폼에서 제공하는 IsExistFunc함수를 엑스플랫폼 스크립트로 구현하였습니다.
소스 예)
function Button00_onclick(obj:Button, e:ClickEventInfo)
{     
    check_function("exist_func");
}
function check_function(str_func)
{
     // 존재하지 않는 함수 체크
     if(this[str_func] == undefined) {
          alert("존재안함");
     } else {
          // "exist_func"이 함수 타입인지 체크
          if (typeof exist_func == "function");
          alert("존재함");
          exist_func();
     }
} 
function exist_func()
{ 
}
XPLATFORM에서 함수유무를 체크할 수 있나요?

12.2.6팝업 창 사이즈 변경 방법

부모 창에서 팝업창의 사이즈를 변경할 때 ChildFrame 생성 시 ID로 접근하여 사이즈를 변경해야 합니다.
폼의 사이즈를 변경하는 경우 childframe의 내부 폼 사이즈만 변경됩니다.
사용 예)
var cfObj = new ChildFrame("cf",0,0,0,0,"Base::smChild.xfdl");
cfObj.showModal(this.getOwnerFrame(),"");  
cf.position.width=100;
cf.position.height=100;
모달로 띄운 팝업 창을 동적으로 리사이징 처리방법을 알고 싶습니다.
팝업창의 사이즈를 변경하면 내부 폼의 사이즈만 변경됩니다.

12.2.7팝업창으로 오픈된 화면의 사이즈를 변경하는 방법

XPLATFORM을 사용시 팝업창을 띄우고 동적으로 컴포넌트를 생성 후 폼의 사이즈를 조절하고 싶은 경우 자주 묻는 내용에 대해 알아봅니다.
사용 예)
// 폼의 onload 에서 사이즈 변경 
 
this.position.height = 100; //this(폼)의 크기를 설정 
this.getOwnerFrame().position.height = 100; 
// this를 감싸고 있는 OwnerFrame(ChildFrame) 의 사이즈도 변경
팝업화면 크기가 변경되지 않습니다. (실제 폼영역은 변경이 되는데 오픈된 폼 사이즈가 변경이 되지 않습니다.)

12.2.8Composit Component 데이터셋 바인딩 하는 방법

Composit component에 데이터셋을 바인딩하는 방법입니다.

Composit component 연결

그림 12-220120625_132250455_comp1

그림 12-320120625_132306340_comp2

composit 컴퍼넌트 바인딩

12.2.9userForm상속 override

userForm상속받아 override하는 방법입니다.

상속 override

그림 12-420120625_140806166_user1

그림 12-520120625_140820532_user_2

* ChildForm.xfdl
 
<?xml version="1.0" encoding="utf-8"?>
<FDL version="1.4">
  <TypeDefinition url="..\default_typedef.xml"/>
  <Form id="ChildForm" classname="ChildForm" inheritanceid="parentForm" position="absolute 0 0 471 396" titletext="New Form" onload="ChildForm_onload">
    <Layouts>
      <Layout>
        <Button id="Button01" taborder="0" position="absolute 37 192 152 235" onclick="Button01_onclick" text="부모창변경이벤트"/>
        <Button id="Button02" taborder="1" text="부모창기본이벤트" position="absolute 38 249 158 299" onclick="Button02_onclick"/>
      </Layout>
    </Layouts>
    <Script type="xscript4.0"><![CDATA[
function Button01_onclick(obj:Button,  e:ClickEventInfo)
{
             super.Button00.userdata = "child";
             trace(super.Button00.userdata);
}
 
function ChildForm_onload(obj:Form, e:LoadEventInfo)
{
             var rtn = super.Button00.onclick.setHandler(1, child_onClick);
             trace(rtn);
}
 
function child_onClick(obj:Button,  e:ClickEventInfo){
             trace("test / "+super.Button00.userdata);
             if(super.Button00.userdata == "parent") return;
             alert("child");
}
 
function Button02_onclick(obj:Button,  e:ClickEventInfo)
{
             super.Button00.userdata = "parent";
             trace(super.Button00.userdata);
}
]]></Script>
  </Form>
</FDL>
* parentForm.xfdl
 
<?xml version="1.0" encoding="utf-8"?>
<FDL version="1.4">
  <TypeDefinition url="..\default_typedef.xml"/>
  <Form id="parentForm" classname="parentForm" inheritanceid="" position="absolute 0 0 394 221" titletext="New Form" onload="parentForm_onload">
    <Layouts>
      <Layout>
        <Button id="Button00" taborder="0" text="부모창버튼" position="absolute 24 30 250 144" onclick="Button00_onclick" userdata="parent"/>
      </Layout>
    </Layouts>
    <Script type="xscript4.0"><![CDATA[function Button00_onclick(obj:Button,  e:ClickEventInfo)
{
             if(Button00.userdata == "child") return;
             trace(Button00.userdata);
             alert("parent");
}
]]></Script>
  </Form>
</FDL>
Component Method에 대한 Override 기능문의
상속시 override 가능한지

12.3Script

12.3.1개행문자

스크립트를 이용한 개행문자 처리방법입니다.
Button04.text = 'ABC' +  String.fromCharCode(13) + String.fromCharCode(10) + 'DEF';
마이플랫폼에서 개행문자 처리시 chr(13)+chr(10)를 통해 스크립트 변환이 가능했는데요
XPLATFORM에서는 어떻게 사용하나요?

12.4Grid

12.4.1XPLATFORM 그리드(Grid)에서 Row Index정보와 컬럼 Index정보 확인방법

사용 예)
                    expr:fnExprType(currow)  
                    expr:fnExprCol(self.col)

12.4.2Grid의 autosizingtype=row일 때 한 줄짜리 row의 디자인 시 높이 유지하는 방법

row가 autosizing이 될 때 특정 row에 줄 바꿈 한 데이터가 있는 경우 자동으로 늘어나면 한 줄짜리row는  높이가 줄어드는데 디자인 한 높이를 유지하는 방법.

원인

아래 설정으로 한 row가 줄 바꿈 된 여러 줄일 경우 자동으로 늘어나면서 한 줄짜리 Row인 경우 디자인한 높이를 유지하지 않고 줄어드는 현상이 있음.
autosizingtype=row
cellsizingtype=row
extendsizingtype=row

해결방법

grid 내부셀의 autosizerow="limitmin"로 설정하면 해당 Cell의 내용의 크기가 최초 디자인된 Cell의 크기보다 작을 때에는 최초 크기를 유지합니다
Grid의 autosizingtype=row일 때 한 줄짜리 row의 디자인 시 높이 유지하는 방법

12.4.3treegrid에서 레벨1과 레벨2 사이 가로 간격 조정

TreeGrid의 레벨1과 레벨2 사이의 자간과 같이 가로 간격을 띄우는 방법에 대해 알아봅니다.

사용 예)

padding속성에 expr을 걸어서 처리할 수 있습니다.
fn_getlvl(lvl) 에서 level 컬럼의 level 정보를 넘겨서 스크립트에서 처리할 수 있습니다.
//스크립트
function fn_getlvl(lvl)
{
    if(lvl==3 || lvl==4) return '0 0 0 100';     
} 
//Style padding 속성
fn_getlvl(lvl)

그림 12-620120618_101216767_grid_tree

treegrid에서 레벨1과 레벨2 사이 가로 간격을 띄울 수 있나요?

12.4.4그리드 ToolTipText표현

그림 12-7grid_tooltiptext

주의사항

그리드 속성 중 tooltiptype의 hover를 선택해 주어야 각 Cell이동시 tooltiptext가 변경이 됩니다.
그리드 tooltiptext가 한번은 보여지는데 각 cell 이동시에는 값이 변경되지 않습니다.

12.4.5그리드의 셀에 class 지정방법 입니다.

그리드의 셀에도 class를 별도로 지정을 할 수가 있습니다.

Css에 셀에 적용되도록 추가합니다.

Grid>#body>Cell.aaa
{
    background : yellow;
    background2 : pink; 
}

그림 12-820120618_112947890_grid_1

그림 12-920120618_113055290_grid_2

그리드 컬럼에만 style을 지정할 수 있나여?

12.4.6TreeGrid 사용 시 text 색상 개별 적용방법

사용 예)

그림 12-1020120618_102701036_grid_color

<?xml version="1.0" encoding="utf-8"?>
<FDL version="1.2">
  <TypeDefinition url="..\..\default_typedef.xml"/>
  <Form id="comp_treeview1" classname="comp_treeview1" inheritanceid="" position="absolute 0 0 560 343" titletext="New Form">
    <Script type="xscript4.0"><![CDATA[]]></Script>
    <Layout>
      <Grid id="Grid05" taborder="0" position="absolute 16 15 168 193" binddataset="ds_bind" autofittype="col" treeusebutton="use" treeuseline="true" treeusecheckbox="false" treeinitstatus="expand,all" dropformat="TEXT,CSV" ondrag="Grid05_ondrag" oncellclick="Grid05_oncellclick" style="linetype:onlyvert;">
        <Formats>
          <Format id="default">
            <Columns>
              <Column size="40"/>
            </Columns>
            <Rows>
              <Row size="24"/>
            </Rows>
            <Band id="body">
              <Cell displaytype="tree" edittype="tree" style="background:white;background2:white;color:BIND(color);" text="bind:text" treelevel="bind:level"/>
            </Band>
          </Format>
        </Formats>
      </Grid>
      <Grid id="Grid00" taborder="1" position="absolute 203 16 546 194" binddataset="ds_bind">
        <Formats>
          <Format id="default">
            <Columns>
              <Col size="80"/>
              <Col size="80"/>
              <Col size="80"/>
            </Columns>
            <Rows>
              <Row band="head" size="24"/>
              <Row band="body" size="24"/>
            </Rows>
            <Band id="head">
              <Cell col="0" disptype="normal" text="level"/>
              <Cell col="1" disptype="normal" text="text"/>
              <Cell col="2" disptype="normal" text="color"/>
            </Band>
            <Band id="body">
              <Cell col="0" disptype="normal" text="bind:level"/>
              <Cell col="1" disptype="normal" text="bind:text"/>
              <Cell col="2" disptype="normal" text="bind:color"/>
            </Band>
          </Format>
        </Formats>
      </Grid>
    </Layout>
    <Objects>
      <Dataset preload="true" firefirstcount="0" firenextcount="0" useclientlayout="false" updatecontrol="true" enableevent="true" id="ds_bind">
        <ColumnInfo>
          <Column type="STRING" size="255" id="level"/>
          <Column type="STRING" size="255" id="text"/>
          <Column type="STRING" size="256" id="color"/>
        </ColumnInfo>
        <Rows>
          <Row>
            <Col id="level">0</Col>
            <Col id="text">a</Col>
            <Col id="color">#0000ff</Col>
          </Row>
          <Row>
            <Col id="level">1</Col>
            <Col id="text">b</Col>
            <Col id="color">#00ff00</Col>
          </Row>
          <Row>
            <Col id="level">2</Col>
            <Col id="text">c</Col>
            <Col id="color">#ff0000</Col>
          </Row>
          <Row>
            <Col id="level">0</Col>
            <Col id="text">d</Col>
            <Col id="color">#0000ff</Col>
          </Row>
          <Row>
            <Col id="level">0</Col>
            <Col id="text">e</Col>
            <Col id="color">#00ff00</Col>
          </Row>
          <Row>
            <Col id="level">1</Col>
            <Col id="text">f</Col>
            <Col id="color">#ff0000</Col>
          </Row>
        </Rows>
      </Dataset>
    </Objects>
  </Form>
</FDL>
treeGrid에서 text의 색상을 개별로 설정하고 싶습니다.

12.4.7Grid ComboFilter 사용방법

Grid에서 선택combo 값에 따라 다음 콤보 값 및 다른 row의 콤보 값 변경 방법.

첫 번째 콤보 선택 값에 따라 두 번째 콤보의 리스트 값이 변경되어 보여줘야 할 경우 처리하는 방법.
Grid의 ondropdown 이벤트에서 데이터셋의 filter로 콤보 값을 보여주고 oncloseup 이벤트에서 콤보 리스트가 닫히는 경우 filter를 풀어줘서 처리합니다.
사용 예)
function grd_main_ondropdown(obj:Grid, e:GridEditEventInfo)
{ 
   ds_dtl.filter( "grp_cd == '" + ds_main.getColumn(e.row,"grp_cd") + "'" );
} 
function grd_main_oncloseup(obj:Grid, e:GridEditEventInfo)
{
   ds_dtl.filter("");
}
소스 )
<?xml version="1.0" encoding="utf-8"?>
<FDL version="1.2">
  <TypeDefinition url="..\..\default_TypeDef.xml"/>
  <Form id="Grid" inheritanceid="" cachelevel="" position="absolute 0 0 800 619" version="" titletext="그리드 콤보필터">
    <Layout>
      <Grid id="grd_main0" taborder="0" binddataset="ds_main0" scrollbars="alwaysvert" cellsizingtype="col" tooltiptype="hover" position="absolute 27 24 758 170">
        <Formats>
          <Format id="default">
            <Columns>
              <Column size="150"/>
              <Column size="200"/>
            </Columns>
            <Rows>
              <Row size="20" band="head"/>
              <Row size="20"/>
            </Rows>
            <Band id="head">
              <Cell displaytype="normal" style="align:center;font:HDCardBold,8,antialias;" text="그룹"/>
              <Cell col="1" displaytype="normal" style="font:HDCardBold,8,antialias;" text="코드명"/>
            </Band>
            <Band id="body">
              <Cell displaytype="text" edittype="text" style="align:center;" text="bind:grp_cd" combodisplay="edit"/>
              <Cell col="1" displaytype="combo" edittype="combo" style="align:center;" text="bind:dtl_cd" combodataset="expr:grp_cd==1?'ds_dtl0':grp_cd==2?'ds_dtl1':'ds_dtl2'" combocodecol="cd" combodatacol="nm"/>
            </Band>
          </Format>
        </Formats>
      </Grid>
      <Grid id="grd_main" taborder="1" binddataset="ds_main" scrollbars="alwaysvert" autoenter="select" useinputpanel="false" selecttype="cell" cellsizingtype="col" ondropdown="grd_main_ondropdown" oncloseup="grd_main_oncloseup" position="absolute 27 264 758 380" tooltiptype="hover">
        <Formats>
          <Format id="default">
            <Columns>
              <Column size="150"/>
              <Column size="200"/>
              <Column size="200"/>
            </Columns>
            <Rows>
              <Row size="20" band="head" fix="fixed"/>
              <Row size="20"/>
            </Rows>
            <Band id="head">
              <Cell displaytype="normal" style="align:center;font:HDCardBold,8,antialias;" text="그룹"/>
              <Cell col="1" displaytype="normal" style="font:HDCardBold,8,antialias;" text="코드"/>
              <Cell col="2" displaytype="normal" style="font:HDCardBold,8,antialias;" text="코드명"/>
            </Band>
            <Band id="body">
              <Cell displaytype="combo" edittype="combo" style="align:center;" text="bind:grp_cd" combodataset="ds_grp" combocodecol="grp_cd" combodatacol="grp_nm" combodisplay="edit"/>
              <Cell col="1" displaytype="combo" edittype="combo" style="align:center;" text="bind:dtl_cd" combodataset="ds_dtl" combocodecol="cd" combodatacol="cd"/>
              <Cell col="2" displaytype="combo" edittype="combo" style="align:center;" text="bind:dtl_nm" combodataset="ds_dtl" combocodecol="nm" combodatacol="nm"/>
            </Band>
          </Format>
        </Formats>
      </Grid>
      <Grid id="Grid00" taborder="2" binddataset="ds_dtl" useinputpanel="false" selecttype="cell" useselcolor="false" oncelldblclick="Grid00_oncelldblclick" position="absolute 353 392 760 572">
        <Formats>
          <Format id="default">
            <Columns>
              <Column size="80"/>
              <Column size="80"/>
              <Column size="80"/>
            </Columns>
            <Rows>
              <Row size="24" band="head"/>
              <Row size="24"/>
            </Rows>
            <Band id="head">
              <Cell text="grp_cd"/>
              <Cell col="1" text="cd"/>
              <Cell col="2" text="nm"/>
            </Band>
            <Band id="body">
              <Cell style="background:EXPR(getRowType(currow)==16?&quot;yellow&quot;:&quot;&quot;);" text="bind:grp_cd"/>
              <Cell col="1" text="bind:cd"/>
              <Cell col="2" text="bind:nm"/>
            </Band>
          </Format>
        </Formats>
      </Grid>
    </Layout>
    <Objects>
      <Dataset id="ds_main0" preload="true" firefirstcount="0" firenextcount="0" useclientlayout="false" updatecontrol="true" enableevent="true">
        <ColumnInfo>
          <Column id="grp_cd" type="STRING" size="256"/>
          <Column id="dtl_cd" type="STRING" size="256"/>
        </ColumnInfo>
        <Rows>
          <Row>
            <Col id="grp_cd">1</Col>
          </Row>
          <Row>
            <Col id="grp_cd">2</Col>
          </Row>
          <Row>
            <Col id="grp_cd">3</Col>
          </Row>
        </Rows>
      </Dataset>
      <Dataset id="ds_dtl0" preload="true" firefirstcount="0" firenextcount="0" useclientlayout="false" updatecontrol="true" enableevent="true">
        <ColumnInfo>
          <Column id="cd" type="STRING" size="256"/>
          <Column id="nm" type="STRING" size="256"/>
        </ColumnInfo>
        <Rows>
          <Row>
            <Col id="cd">1</Col>
            <Col id="nm">코드1</Col>
          </Row>
          <Row>
            <Col id="cd">2</Col>
            <Col id="nm">코드2</Col>
          </Row>
        </Rows>
      </Dataset>
      <Dataset id="ds_dtl1" preload="true" firefirstcount="0" firenextcount="0" useclientlayout="false" updatecontrol="true" enableevent="true">
        <ColumnInfo>
          <Column id="cd" type="STRING" size="256"/>
          <Column id="nm" type="STRING" size="256"/>
        </ColumnInfo>
        <Rows>
          <Row>
            <Col id="cd">3</Col>
            <Col id="nm">코드3</Col>
          </Row>
          <Row>
            <Col id="cd">4</Col>
            <Col id="nm">코드4</Col>
          </Row>
        </Rows>
      </Dataset>
      <Dataset id="ds_dtl2" preload="true" firefirstcount="0" firenextcount="0" useclientlayout="false" updatecontrol="true" enableevent="true">
        <ColumnInfo>
          <Column id="cd" type="STRING" size="256"/>
          <Column id="nm" type="STRING" size="256"/>
        </ColumnInfo>
        <Rows>
          <Row>
            <Col id="cd">5</Col>
            <Col id="nm">코드5</Col>
          </Row>
          <Row>
            <Col id="cd">6</Col>
            <Col id="nm">코드6</Col>
          </Row>
        </Rows>
      </Dataset>
      <Dataset id="ds_dtl" preload="true" firefirstcount="0" firenextcount="0" useclientlayout="false" updatecontrol="true" enableevent="true">
        <ColumnInfo>
          <Column id="grp_cd" type="STRING" size="256"/>
          <Column id="cd" type="STRING" size="256"/>
          <Column id="nm" type="STRING" size="256"/>
        </ColumnInfo>
        <Rows>
          <Row>
            <Col id="grp_cd">1</Col>
            <Col id="cd">1</Col>
            <Col id="nm">코드1</Col>
          </Row>
          <Row>
            <Col id="grp_cd">1</Col>
            <Col id="cd">2</Col>
            <Col id="nm">코드2</Col>
          </Row>
          <Row>
            <Col id="grp_cd">2</Col>
            <Col id="cd">3</Col>
            <Col id="nm">코드3</Col>
          </Row>
          <Row>
            <Col id="grp_cd">2</Col>
            <Col id="cd">4</Col>
            <Col id="nm">코드4</Col>
          </Row>
          <Row>
            <Col id="grp_cd">3</Col>
            <Col id="cd">5</Col>
            <Col id="nm">코드5</Col>
          </Row>
          <Row>
            <Col id="grp_cd">3</Col>
            <Col id="cd">6</Col>
            <Col id="nm">코드6</Col>
          </Row>
        </Rows>
      </Dataset>
      <Dataset id="ds_main" preload="true" firefirstcount="0" firenextcount="0" useclientlayout="false" updatecontrol="true" enableevent="true">
        <ColumnInfo>
          <Column id="grp_cd" type="STRING" size="256"/>
          <Column id="dtl_cd" type="STRING" size="256"/>
          <Column id="dtl_nm" type="STRING" size="256"/>
        </ColumnInfo>
        <Rows>
          <Row>
            <Col id="grp_cd">1</Col>
            <Col id="dtl_nm">코드1</Col>
          </Row>
          <Row>
            <Col id="grp_cd">2</Col>
            <Col id="dtl_nm">코드3</Col>
          </Row>
          <Row>
            <Col id="grp_cd">3</Col>
            <Col id="dtl_nm">코드5</Col>
          </Row>
        </Rows>
      </Dataset>
      <Dataset id="ds_grp" preload="true" firefirstcount="0" firenextcount="0" useclientlayout="false" updatecontrol="true" enableevent="true">
        <ColumnInfo>
          <Column id="grp_cd" type="STRING" size="256"/>
          <Column id="grp_nm" type="STRING" size="256"/>
        </ColumnInfo>
        <Rows>
          <Row>
            <Col id="grp_cd">1</Col>
            <Col id="grp_nm">1그룹</Col>
          </Row>
          <Row>
            <Col id="grp_cd">2</Col>
            <Col id="grp_nm">2그룹</Col>
          </Row>
          <Row>
            <Col id="grp_cd">3</Col>
            <Col id="grp_nm">3그룹</Col>
          </Row>
        </Rows>
      </Dataset>
    </Objects>
    <Script type="xscript4.0"><![CDATA[
function grd_main_ondropdown(obj:Grid, e:GridEditEventInfo)
{ 
    ds_dtl.filter( "grp_cd == '" + ds_main.getColumn(e.row,"grp_cd") + "'" );
}
 
function grd_main_oncloseup(obj:Grid, e:GridEditEventInfo)
{
    ds_dtl.filter("");
}
]]></Script>
</Form>
</FDL>
그리드 콤보에서 필터하는 방법
Grid combofilter처리 문의

12.4.8윈도우 탐색기에서 Drop 활용 방법

XPLATFORM  폼 또는 컴포넌트에 윈도우파일탐색기로 파일을 선택하여서 떨어트려서 해당 경로를 이용하는 방법을 설명합니다.

그리드에 해당 경로 파일 가져오는 방법

그림 12-1120120618_111813850_file_1

그림 12-1220120618_111834586_file_2

소스 예)
function Grid00_ondrop(obj:Grid, e:GridDragEventInfo)
{
     var objDataObj = new DragDataObject(); 
     gfn_uploadfile_ondrop(e.dragdata,ds_MFileup);
}
function gfn_uploadfile_ondrop(objDataObj, objDS)
{
     var arrbuff = objDataObj.getData(DragDataFormats.FILEDROP);
     var nFileCnt = 1;
     var strValue= "";
     var nRow;
     var filefath;
     var nFileCnt = arrbuff.length;
     for(var i=0; i<nFileCnt; i++)
     {
        if(!gfnIsEmpty(arrbuff[i])){
             strValue = fnc_getFileName(arrbuff[i]);
             nRow = objDS.addRow();
             objDS.setColumn(nRow, "fullname", arrbuff[i]);
             objDS.setColumn(nRow, "filename", strValue);
        }
     }
}
function gfnIsEmpty(val) {
     var sVal = new String(val);
     val = new String(val);
     if (val == null || val == "null" || sVal.trim().length <= 0 || escape(val) == "undefined") {
         return true;
     } else {
         return false;
     }
}
function fnc_getFileName(strPath){
    var i_idx = strPath.lastIndexOf('\\') + 1;
    var strFileName = "";
    if (i_idx > 0) strFileName = strPath.substr(i_idx);
    trace(strFileName);
    return strFileName;
}

그림 12-1320120618_112116083_file_3

이미지 뷰어 활용

그림 12-1420120618_112049986_file_4

function ImageViewer00_ondrop(obj:ImageViewer, e:DragEventInfo)
{
    var objDataObj = new DragDataObject(); 
    var arrbuff = e.dragdata.getData(DragDataFormats.FILEDROP);
    trace(arrbuff);
    ImageViewer00.image =arrbuff ;
}

그림 12-1520120618_112024642_file_5

해당 경로의 파일 경로를 가져오는 것입니다.
VirtualFile로 해당 파일 접근시 send box가 나오게 됩니다.
연속으로 파일을 가져올 경우 누적 되는 현상이 나오면 스크립트 끝에 return true;로 처리합니다.
윈도우 탐색기와 연동 방법 문의
drop사용 방법 문의

12.4.9그리드에 Password(보안) 처리방법

XPLATFORM 그리드에서 주민번호 입력 및 출력시 뒷자리 등을 보호하고 싶을데 처리방법에 대해 알아봅니다.

Mask " {####} "

그리드 Mask에서 {###} 형태로 지정하는 경우 실제 데이타는 정상적으로 들어나, 입력 및 표현시 ***로 변경되어 출력이 됩니다.
소스 예)
<?xml version="1.0" encoding="utf-8"?>
<FDL version="1.4">
  <TypeDefinition url="..\default_typedef.xml"/>
  <Form id="gridMask" classname="gridMask" inheritanceid="" position="absolute 0 0 1024 768" titletext="New Form">
    <Layouts>
      <Layout>
        <Grid id="Grid00" taborder="0" useinputpanel="false" position2="absolute l:35 w:502 t:34 h:174" positiontype="position2" binddataset="Dataset00" formats="&lt;Formats&gt;&#10;  &lt;Format id=&quot;default&quot;&gt;&#10;    &lt;Columns&gt;&#10;      &lt;Col size=&quot;80&quot;/&gt;&#10;    &lt;/Columns&gt;&#10;    &lt;Rows&gt;&#10;      &lt;Row band=&quot;head&quot; size=&quot;24&quot;/&gt;&#10;      &lt;Row band=&quot;body&quot; size=&quot;24&quot;/&gt;&#10;    &lt;/Rows&gt;&#10;    &lt;Band id=&quot;head&quot;&gt;&#10;      &lt;Cell col=&quot;0&quot; disptype=&quot;normal&quot; text=&quot;Column0&quot;/&gt;&#10;    &lt;/Band&gt;&#10;    &lt;Band id=&quot;body&quot;&gt;&#10;      &lt;Cell col=&quot;0&quot; disptype=&quot;normal&quot; text=&quot;bind:Column0&quot;/&gt;&#10;    &lt;/Band&gt;&#10;  &lt;/Format&gt;&#10;&lt;/Formats&gt;&#10;">
          <Formats>
            <Format id="default">
              <Columns>
                <Column size="80"/>
              </Columns>
              <Rows>
                <Row size="24" band="head"/>
                <Row size="24"/>
              </Rows>
              <Band id="head">
                <Cell text="Column0"/>
              </Band>
              <Band id="body">
                <Cell edittype="normal" text="bind:Column0" mask="###{###}"/>
              </Band>
            </Format>
          </Formats>
        </Grid>
        <Grid id="Grid01" taborder="1" useinputpanel="false" position2="absolute l:36 w:508 t:228 h:235" positiontype="position2" binddataset="Dataset00" formats="&lt;Formats&gt;&#10;  &lt;Format id=&quot;default&quot;&gt;&#10;    &lt;Columns&gt;&#10;      &lt;Col size=&quot;80&quot;/&gt;&#10;    &lt;/Columns&gt;&#10;    &lt;Rows&gt;&#10;      &lt;Row band=&quot;head&quot; size=&quot;24&quot;/&gt;&#10;      &lt;Row band=&quot;body&quot; size=&quot;24&quot;/&gt;&#10;    &lt;/Rows&gt;&#10;    &lt;Band id=&quot;head&quot;&gt;&#10;      &lt;Cell col=&quot;0&quot; disptype=&quot;normal&quot; text=&quot;Column0&quot;/&gt;&#10;    &lt;/Band&gt;&#10;    &lt;Band id=&quot;body&quot;&gt;&#10;      &lt;Cell col=&quot;0&quot; disptype=&quot;normal&quot; text=&quot;bind:Column0&quot;/&gt;&#10;    &lt;/Band&gt;&#10;  &lt;/Format&gt;&#10;&lt;/Formats&gt;&#10;">
          <Formats>
            <Format id="default">
              <Columns>
                <Col size="80"/>
              </Columns>
              <Rows>
                <Row band="head" size="24"/>
                <Row band="body" size="24"/>
              </Rows>
              <Band id="head">
                <Cell col="0" disptype="normal" text="Column0"/>
              </Band>
              <Band id="body">
                <Cell col="0" disptype="normal" text="bind:Column0"/>
              </Band>
            </Format>
          </Formats>
        </Grid>
      </Layout>
    </Layouts>
    <Objects>
      <Dataset id="Dataset00" firefirstcount="0" firenextcount="0" useclientlayout="false" updatecontrol="true" enableevent="true" loadkeymode="keep" loadfiltermode="keep" reversesubsum="false">
        <ColumnInfo>
          <Column id="Column0" type="STRING" size="256"/>
        </ColumnInfo>
        <Rows>
          <Row>
            <Col id="Column0">123456789</Col>
          </Row>
        </Rows>
      </Dataset>
    </Objects>
  </Form>
</FDL>
그리드에 주민번호 표현시 *표현 가능한가?

12.4.10그리드에 drag이벤트시에 스크롤움직일때 drag이벤트 발생 방지

그리드 Drag이벤트 지정시에 그리드위에서 발생하는 모든 drag는 이벤트를 발생시킵니다. 
즉, 스크롤을 움직여도 발생하게됩니다. 
스크롤시에 drag이벤트 발생방지 하는 방법입니다.

그리드 스크롤시 Drag 이벤트 방지 처리

OnDrag이벤트는 그리드 위에서 스크롤을 잡아 움직여도 발생을 하게 됩니다. 해당 영역은 그리드의 ondrag이벤트에서 GridDragEventInfo의 정보중 col부분을 활용하여 처리하면 됩니다. trace(e.col)로 확인해보면 스크롤 영역은 -1을 리턴하게 되어있습니다. 조건문으로 -1일 경우 return false를 하게되면 이벤트 발생을 하지 않습니다..

그림 12-1620120625_135005001_grid_drag

그리드 스크롤시 Drag이벤트

12.4.11Grid 여러줄 표시하기

데이터가 그리드 셀의 길이보다 많이 나올 경우 처리하는 방법입니다

Wordwrap 속성

그림 12-1720120625_143528705_grid_sample1

그림 12-1820120625_143543162_grid_sample2

그림 12-1920120625_143557115_grid_sample3

참고사항

Row를 데이터 길이 만큼만 자동으로 늘어 나게 처리하려면 그리드의 속성을 아래와 같이 지정하세요
autosizingtype=row
Extendsizetype =row
위와 같이 지정하면 데이터 row가 데이터만큼 높이들이 지정됩니다.
그리드 컬럼 줄바꾸기

12.4.12그리드 셀에 blinkCell 메소드 적용방법

그리드 셀에 blinkCell 메소드 적용시 css에도 해당 스타일이 추가가 되어야 합니다.

사용방법

Css에 아래와 같이 추가 합니다.
Grid>#body>Cell:blinked
{
        background     : blue;
        background2    : blue;
        color   : red;
        color2  : red;
        selectbackground       : blue; 
        selectcolor    : red;
}
blinkCell 메소드 적용시 반응이 없습니다.

12.4.13Grid에서 vsscroll을 하단으로 이동시 다음 데이타를 전송하는 방법

XPLATFORM의 그리드의 스크롤을 맨 하단으로 내렸을때 데이타를 조회하고자 하는 경우 해당 이벤트를 얻는방법에 대해 기술힙니다.

Grid onvscroll

사용 예)
function Grid00_onvscroll(obj:Grid, e:ScrollEventInfo)
{
    if (e.type == "last" || e.type == "trackend") 
    //실제 transaction호출하심 됩니다. 
}
그리드 vscroll의 맨 마지막을 구별하는 방법

12.4.14Grid summary를 상단에 표현하는 방법

XPLATFORM의 Grid에 포현되는 summary를 상단에 표현하는 방법에 대히 개술합니다.

그리드 속성

Default : default
'default' SummaryBand는 하단에, RightBand는 우측에 표시됩니다.
'top' SummaryBand는 상단에, RightBand는 우측에 표시됩니다.
'left' SummaryBand는 하단에, RightBand는 좌측에 표시됩니다.
'lefttop' SummaryBand는 상단에, RightBand는 좌측에 표시됩니다.
그리드 합계를 상단에 표현하는 방법

12.4.15그리드의 Cell Position이 변경될때 발생하는 이벤트

XPLATFORM의 그리드에서 Cell이 이동하거나 마우스로 선택되었을때 발생하는 이벤트에 대해 알아봅니다.

onselectchanged 이벤트 사용

사용 예)
function Grid00_onselectchanged(obj:Grid, e:GridSelectEventInfo)
{
     trace("Grid00_onselectchanged" + "=>" + e.cell);
}
마이플랫폼에서 제공되던 그리드 이벤트 OnCellPosChanged와 같은 이벤트는 무엇인가요?
그리드의 Cell이 변경되었을때 발생하는 이벤트는 무엇인가요?

12.4.16그리드에 스크롤이 있는 경우 PageUp/PageDown의 이동 갯수를 설정하는 방법

XPLATFORM의 그리드를 사용시 데이타 건수가 많은 경우 스크롤이 발생합니다. 
이때 키보드 PageUp/PageDown을 이용하여 페이지 단위로 이동이 가능하게 됩니다. 
이 경우 이동하는 갯수를 페이지 단위가 특정 Row건수별로 이동하는 방법에 대해 알아봅니다.

Grid의 onvscroll이벤트 사용 (3 Row씩 이동하는 방법)

소스 예)
var nPrePos = -1;
function Grid00_onvscroll(obj:Grid, e:ScrollEventInfo)
{
    if(e.type == "pageup") {
        if(nPrePos == -1) {
            Grid00.vscrollbar.pos = e.pos + Grid00.pagerowcount - 3;
       } else {
            Grid00.vscrollbar.pos = nPrePos - 3;
       }
    } else if(e.type == "pagedown") {
           if(nPrePos == -1) {
              Grid00.vscrollbar.pos = e.pos + Grid00.pagerowcount - 3;
           } else {
              Grid00.vscrollbar.pos = nPrePos + 3;
           }
    } else if(e.type == 'none')
    {
        if(nPrePos == -1)
        {
              Grid00.vscrollbar.pos = 3;
        } 
    }
 
    nPrePos = Grid00.vscrollbar.pos;
}
그리드의 PageUp/PageDown 스크롤 이동 갯수를 제어하는 방법

12.4.17그리드 속성 중 autofittype사용시 주의사항

autofittype 속성을 "col/both/col,allrow"로 지정한 경우 format column size를 기준으로 그리드 넓이에 맞게 열의 크기가 조정되므로 resize나 setRealColSize 메소드 호출을 통한 실제 행의 크기 변경은 
불가능합니다. 즉 resize시 비정상동작할 수 있습니다.

해결방안

그리드의 이벤트 oncolresized 이벤트와 onlbuttonup 이벤트를 이용하여 
스크립트를 통해 그리드 col 사이즈를 변경할 수 있도록 로직구현을 하셔야 합니다.
var arrNewSize = new Array();
function Grid00_oncolresized(obj:Grid, e:GridSizeChangedEventInfo)
{
    arrNewSize[e.formatindex] = e.newvalue;
    if(e.formatindex < Grid00.getFormatColCount() - 1) {                
        arrNewSize[e.formatindex + 1] += e.oldvalue - e.newvalue;
    }


    Grid00.visible = false;
    Grid00.autofittype = "";

    for(var i = 0; i < Grid00.getFormatColCount(); i++) 
    {
        Grid00.setFormatColProperty(i, "size", arrNewSize[i]);
    }

    Grid00.formats = "<formats>" + Grid00.getCurFormatString() + "</formats>";
    Grid00.autofittype = "col";
    
    Grid00.visible = true;
}

function Grid00_onlbuttonup(obj:Grid, e:GridMouseEventInfo)
{
    for(var i = 0; i < Grid00.getFormatColCount(); i++) 
    {
        arrNewSize[i] = Grid00.getRealColSize(i);
    }    
}

소스

<?xml version="1.0" encoding="utf-8"?>
<FDL version="1.4">
  <TypeDefinition url="..\default_typedef.xml"/>
  <Form id="test" classname="test" inheritanceid="" position="absolute 0 0 506 300" titletext="New Form">
    <Layouts>
      <Layout>
        <Grid id="Grid00" taborder="0" useinputpanel="false" anchor="all" position="absolute 14 56 422 265" positiontype="position" binddataset="Dataset00" autofittype="col" cellsizingtype="col" autofitminwidth="500" oncolresized="Grid00_oncolresized" onlbuttonup="Grid00_onlbuttonup">
          <Formats>
            <Format id="default">
              <Columns>
                <Col size="80"/>
                <Col size="80"/>
                <Col size="80"/>
                <Col size="80"/>
                <Col size="80"/>
                <Col size="80"/>
              </Columns>
              <Rows>
                <Row band="head" size="24"/>
                <Row band="body" size="24"/>
              </Rows>
              <Band id="head">
                <Cell col="0" disptype="normal" text="Column0"/>
                <Cell col="1" disptype="normal" text="Column1"/>
                <Cell col="2" disptype="normal" text="Column2"/>
                <Cell col="3" disptype="normal" text="Column3"/>
                <Cell col="4" disptype="normal" text="Column4"/>
                <Cell col="5" disptype="normal" text="Column5"/>
              </Band>
              <Band id="body">
                <Cell col="0" disptype="normal" text="bind:Column0"/>
                <Cell col="1" disptype="normal" text="bind:Column1"/>
                <Cell col="2" disptype="normal" text="bind:Column2"/>
                <Cell col="3" disptype="normal" text="bind:Column3"/>
                <Cell col="4" disptype="normal" text="bind:Column4"/>
                <Cell col="5" disptype="normal" text="bind:Column5"/>
              </Band>
            </Format>
          </Formats>
        </Grid>
      </Layout>
    </Layouts>
    <Objects>
      <Dataset id="Dataset00" firefirstcount="0" firenextcount="0" useclientlayout="false" updatecontrol="true" enableevent="true" loadkeymode="keep" loadfiltermode="keep" reversesubsum="false">
        <ColumnInfo>
          <Column id="Column0" type="STRING" size="256"/>
          <Column id="Column1" type="STRING" size="256"/>
          <Column id="Column2" type="STRING" size="256"/>
          <Column id="Column3" type="STRING" size="256"/>
          <Column id="Column4" type="STRING" size="256"/>
          <Column id="Column5" type="STRING" size="256"/>
        </ColumnInfo>
        <Rows>
          <Row/>
          <Row/>
          <Row>
            <Col id="Column1">1</Col>
          </Row>
          <Row>
            <Col id="Column1">1</Col>
          </Row>
        </Rows>
      </Dataset>
      <Dataset id="Dataset01" firefirstcount="0" firenextcount="0" useclientlayout="false" updatecontrol="true" enableevent="true" loadkeymode="keep" loadfiltermode="keep" reversesubsum="false"/>
    </Objects>
    <Script type="xscript4.0"><![CDATA[var arrNewSize = new Array();
function Grid00_oncolresized(obj:Grid, e:GridSizeChangedEventInfo)
{
    arrNewSize[e.formatindex] = e.newvalue;
    if(e.formatindex < Grid00.getFormatColCount() - 1) {                
        arrNewSize[e.formatindex + 1] += e.oldvalue - e.newvalue;
    }


    Grid00.visible = false;
    Grid00.autofittype = "";

    for(var i = 0; i < Grid00.getFormatColCount(); i++) 
    {
        Grid00.setFormatColProperty(i, "size", arrNewSize[i]);
    }

    Grid00.formats = "<formats>" + Grid00.getCurFormatString() + "</formats>";
    Grid00.autofittype = "col";
    
    Grid00.visible = true;
}

function Grid00_onlbuttonup(obj:Grid, e:GridMouseEventInfo)
{
    for(var i = 0; i < Grid00.getFormatColCount(); i++) 
    {
        arrNewSize[i] = Grid00.getRealColSize(i);
    }    
}
]]></Script>
  </Form>
</FDL>

12.5Excel(엑셀)

12.5.1엑셀 sheet의 자리수 제한으로 export 시 주의점

엑셀 sheet의 자릿 수 제한으로 export 시 마이플랫폼에서 sheet의 자리 수를 고려하지 않으면 정상 출력되지 않고  프로세스에 excel 프로세스가 남아있는 경우가 있습니다.
이러한 경우 개발 시 엑셀사양에 대한 확인이 필요하겠습니다.

참고로 excel 2007인 경우 sheet의 최대자리수가 31자입니다.
32자를 스크립트에서 넣어 처리할 경우 위와 같은 문제가 발생하게 됩니다.
엑셀 출력 시 프로세스가 남아있습니다.

12.5.2엑스플랫폼에서 이미지를 엑셀로 출력하는 방법

엑스플랫폼에서 이미지를 엑셀로 출력하는 방법을 기술합니다.

ExportObject 객체를 이용하여 출력합니다

사용 예)
var rtn = ImageViewer00.saveToImage("temp.jpg","JPG",100); //이미지 임시파일로 저장
Grid01.setCellProperty( "Body", 0, "text", "file://"+system.convertRealPath("%DOCUMENT%")+"temp.jpg");
var objExport = new ExportObject();
objExport.exporttype = ExportTypes.EXCEL;
objExport.activepagename = 'abc';
objExport.addExportItem(ExportItemTypes.GRID, Grid00, "abc!A1");
objExport.addExportItem(ExportItemTypes.GRID,     Grid01,"abc!A6","","","","selectstyle","image","background");
//이미지 출력 
objExport.export();
Grid 내용을 엑셀 Export시 image?
엑셀출력 - image

12.5.3사용자 계정 컨트롤을 가장 높음으로 설정 시 엑셀이 C드라이브에 생성 안됨

현상

사용자 계정 컨트롤을 가장 높음으로 설정 시 엑셀이 C드라이브에 생성 안됨

확인방법

그림 12-2020120628_142354804_pc_control

Win7에서 엑셀 출력이 안됩니다.

12.5.4그리드를 export시 엑셀이 실행 되지 않는 경우

MiPlatform에서 그리드를 엑셀로 출력시 엑셀이 실행되지 않는 경우 참고사항입니다.

원인

그림 12-2120081218152125_excel_sheet

해당 내용은 MiPlatform/XPLATFORM 모두 해당이 됩니다.
특정 화면에서 엑셀출력이 안됩니다.

12.6Div

12.6.1Div에서 마우스 상하스크롤 범위지정 방법

function Grid_Property_treeitemimage_onmousewheel(obj:Form, e:MouseWheelEventInfo)
{
    this.vscrollbar.pos -= e.amount / 3; // <= 조절 범위 임의 지정
    return true;
}
웹 브라우저 띄울 때 주소 창 생략하는 방법
XPlatform에서 주소 창 없이 웹 페이지의 팝업 띄우는 방법

12.7DataSet

12.7.1DataSet의 Event사용시 주의사항

DataSet의 이벤트 사용시 event객체에 reason이 있는 경우가 있습니다. 
reason있는 경우에는 해당 이벤트가 여러번 일어날 수 있으므로 
반드시 case에 따른 reason 처리를 해주어야 합니다.
예) 이벤트 onrowsetchanged의 경우 
function Dataset00_onrowsetchanged(obj:Dataset, e:DSRowsetChangeEventInfo)
{
   if(e.reason == 40)

      trace("40==" + e.row);
   } else if(e.reason == 12)

      trace("12==" + e.row);
   }
}
function Dataset00_onload(obj:Dataset, e:DSLoadEventInfo)
{
    if(e.reason == 0)  //데이타가 다 조회된 경우 이벤트 처리 
        trace(obj.getRowCount());
    }
}
DataSet의 이벤트가 여러 번 실행됩니다.

12.7.2자식창의 Dataset 을 부모창에서 사용하는 방법

this.getOwnerFrame() 이용하여 자식창의 데이터셋에 접근

getOwnerFrame 사용

사용 예)
function Button03_onclick(obj:Button,  e:ClickEventInfo)
{
      var arrFramelist = this.getOwnerFrame().all;         
      trace(arrFramelist);
      trace(arrFramelist.length);
      trace(arrFramelist["modaless"].form.ds_sub.saveXML()); 
       //modaless 는 오픈시의 id 값 //ds_sub 데이터셋 이름
}

12.7.3BigDecimal과 Float 컬럼 타입의 범위

BigDecimal

저장하는 방식의 차이인데 decimal 이 유효숫자 자릿수가 더 큽니다.
(- ±1.0 × 10E-28 ~ ±7.9 × 10E28 범위와 28-29개의 유효 자릿수를 가져야 한다.)
현재 XP9 에서는 BigDecimal 자료형의 Precision 은 정수부 소수부 합쳐서 32자리 입니다.
자바의 BigDecimal 은 임이의 Precision 을 가질수 있으나 XP는 제품의 사용특성상 성능을
위해서 내부적으로 정해진 Buffer 범위가 존재합니다.
최대숫자는 금융권에서 취급가능한 범위를 고려하였습니다.

예)
BigDecimal amount = new BigDecimal("0.00000009969066466412");
amount = amount.setScale(32, RoundingMode.HALF_UP);

Float

float 는 유효자릿수 17자리입니다. 
(±4.94065645841246544E-324 ~ ±1.79769313486231570E+308 정도 됩니다.
BigDecimal과 Float 컬럼타입의 범위?

12.7.4DataSet의 getCaseCount

XPLATFORM의 DataSet의 Row Type별 건수를 확인하는 방법에 대해 기술합니다.

12.7.5DataSet Sort Method 설명

표 12-1관련 API

Method

간략설명

Syntax

getCaseCount

Dataset에서 지정된 범위안에서 조건식을 만족하는 Row 수를 구하는 Method 입니다.

Dataset.getCaseCount(strCmpExpr[,nStart[,nEnd]])

사용 예)
trace(Dataset00.getCaseCount('getRowType(rowidx)==1'));
trace(Dataset00.getCaseCount('getRowType(rowidx)==4'));
 //Dataset.ROWTYPE_EMPTY 0 존재하지 않는 Row 상태 
 //Dataset.ROWTYPE_NORMAL 1 초기 Row 상태 
 //Dataset.ROWTYPE_INSERT 2 추가된 Row 상태 
 //Dataset.ROWTYPE_UPDATE 4 수정된 Row 상태 
 //Dataset.ROWTYPE_DELETE 8 삭제된 Row 상태 
 //Dataset.ROWTYPE_GROUP 16 Group 정보 Row 상태 
* rowidx 에 대한 설명은 XPLATFORM Help(Reference Guide) Appendix->Dataset Expression을 참고하세요
DataSet의 getCaseCount를 이용한 Row Type별 건수 구하기

12.7.6DataSet의 Filter(like) 사용방법

XPLATFORM의 DataSet 정보를 이용하여 Filter를 통해 원하는 값 정보를 추출할 수 있습니다. 
이때 SQL문의 Like기능을 구현하는 방법에 대해 기술합니다.
function btn_execute0_onclick(obj:Button,  e:ClickEventInfo)
{
    ds_data.filter("String(COL0).indexOf('" +
                    (edt_input.value).replace("'","\\'")     + "') >= 0");
}
<?xml version="1.0" encoding="utf-8"?>
<FDL version="1.4">
  <TypeDefinition url="..\default_typedef.xml"/>
  <Form id="Comp_Dataset_SearchFilter" classname="Script_String_HalfToFull" inheritanceid="" position="absolute 0 0 800 600" titletext="Comp_Dataset_SearchFilter">
    <Layouts>
      <Layout>
        <Grid id="grd_output" taborder="1" binddataset="ds_data" position="absolute 94 90 426 310" formats="&lt;Formats&gt;&#10;  &lt;Format id=&quot;default&quot;&gt;&#10;    &lt;Columns&gt;&#10;      &lt;Col size=&quot;80&quot;/&gt;&#10;      &lt;Col size=&quot;80&quot;/&gt;&#10;      &lt;Col size=&quot;80&quot;/&gt;&#10;      &lt;Col size=&quot;80&quot;/&gt;&#10;      &lt;Col size=&quot;80&quot;/&gt;&#10;    &lt;/Columns&gt;&#10;    &lt;Rows&gt;&#10;      &lt;Row band=&quot;head&quot; size=&quot;24&quot;/&gt;&#10;      &lt;Row band=&quot;body&quot; size=&quot;24&quot;/&gt;&#10;    &lt;/Rows&gt;&#10;    &lt;Band id=&quot;head&quot;&gt;&#10;      &lt;Cell col=&quot;0&quot; disptype=&quot;normal&quot; text=&quot;COL1&quot;/&gt;&#10;      &lt;Cell col=&quot;1&quot; disptype=&quot;normal&quot; text=&quot;COL2&quot;/&gt;&#10;      &lt;Cell col=&quot;2&quot; disptype=&quot;normal&quot; text=&quot;COL3&quot;/&gt;&#10;      &lt;Cell col=&quot;3&quot; disptype=&quot;normal&quot; text=&quot;COL4&quot;/&gt;&#10;      &lt;Cell col=&quot;4&quot; disptype=&quot;normal&quot; text=&quot;COL5&quot;/&gt;&#10;    &lt;/Band&gt;&#10;    &lt;Band id=&quot;body&quot;&gt;&#10;      &lt;Cell col=&quot;0&quot; disptype=&quot;normal&quot; text=&quot;bind:COL1&quot;/&gt;&#10;      &lt;Cell col=&quot;1&quot; disptype=&quot;normal&quot; text=&quot;bind:COL2&quot;/&gt;&#10;      &lt;Cell col=&quot;2&quot; disptype=&quot;normal&quot; text=&quot;bind:COL3&quot;/&gt;&#10;      &lt;Cell col=&quot;3&quot; disptype=&quot;normal&quot; text=&quot;bind:COL4&quot;/&gt;&#10;      &lt;Cell col=&quot;4&quot; disptype=&quot;normal&quot; text=&quot;bind:COL5&quot;/&gt;&#10;    &lt;/Band&gt;&#10;  &lt;/Format&gt;&#10;&lt;/Formats&gt;&#10;" autofittype="col">
          <Formats>
            <Format id="default">
              <Columns>
                <Column size="150"/>
              </Columns>
              <Rows>
                <Row size="24" band="head"/>
                <Row size="24"/>
              </Rows>
              <Band id="head">
                <Cell text="COL0"/>
              </Band>
              <Band id="body">
                <Cell text="bind:COL0"/>
              </Band>
            </Format>
          </Formats>
        </Grid>
        <Static id="Static00" text="input" position2="absolute l:50 w:37 t:50 h:30" positiontype="position2"/>
        <Edit id="edt_input" taborder="1" autoselect="true" autoskip="true" position2="absolute l:94 w:140 t:50 h:30" positiontype="position2" value="Look"/>
        <Button id="btn_execute0" taborder="1" text="like filter" onclick="btn_execute0_onclick" position2="absolute l:242 w:90 t:50 h:30" positiontype="position2"/>
        <Static id="Static01" text="output" position2="absolute l:50 w:37 t:88 h:30" positiontype="position2"/>
        <Button id="btn_execute1" taborder="1" text="unfilter" onclick="btn_execute1_onclick" position2="absolute l:339 w:90 t:50 h:30" positiontype="position2"/>
      </Layout>
    </Layouts>
    <Objects>
      <Dataset id="ds_data" firefirstcount="0" firenextcount="0" useclientlayout="false" updatecontrol="true" enableevent="true" loadkeymode="keep" loadfiltermode="keep" reversesubsum="false">
        <ColumnInfo>
          <Column id="COL0" type="STRING" size="256"/>
        </ColumnInfo>
        <Rows>
          <Row>
            <Col id="COL0">Please Look After Mon</Col>
          </Row>
          <Row>
            <Col id="COL0">Steve Jobs hardback</Col>
          </Row>
          <Row>
            <Col id="COL0">The "Help</Col>
          </Row>
          <Row>
            <Col id="COL0">Game of Thrones Boxed Set</Col>
          </Row>
          <Row>
            <Col id="COL0">THE GIVER</Col>
          </Row>
          <Row>
            <Col id="COL0">The Hunger Games</Col>
          </Row>
          <Row>
            <Col id="COL0">TALES OF A FOURTH GRADE NOTHING</Col>
          </Row>
          <Row>
            <Col id="COL0">The Twilight Saga</Col>
          </Row>
          <Row>
            <Col id="COL0">Eat, Pray, Love</Col>
          </Row>
          <Row>
            <Col id="COL0">Harry Potter and the Deathly Hallows</Col>
          </Row>
          <Row>
            <Col id="COL0">No Talking</Col>
          </Row>
          <Row>
            <Col id="COL0">The Wednesday Wars</Col>
          </Row>
          <Row>
            <Col id="COL0">The Kite Runner</Col>
          </Row>
          <Row>
            <Col id="COL0">Charlie and the Chocolate Factory</Col>
          </Row>
          <Row>
            <Col id="COL0">Dead Poet's Society</Col>
          </Row>
          <Row>
            <Col id="COL0">High School Musical</Col>
          </Row>
          <Row>
            <Col id="COL0">PRIDE AND PRE JUDICE</Col>
          </Row>
          <Row>
            <Col id="COL0">WHEN MY NAME WAS KEOKO</Col>
          </Row>
          <Row>
            <Col id="COL0">The Notebook</Col>
          </Row>
          <Row>
            <Col id="COL0">Old Man and the Sea</Col>
          </Row>
        </Rows>
      </Dataset>
    </Objects>
    <Script type="xscript4.0"><![CDATA[/*
 * File Name   : Comp_Dataset_SearchFilter
 * Discription : Dataset Filter사용시 like%기능 처리하기
 */

function btn_execute0_onclick(obj:Button,  e:ClickEventInfo)
{
    ds_data.filter("String(COL0).indexOf('" + (edt_input.value).replace("'","\\'")     + "') >= 0");
}

function btn_execute1_onclick(obj:Button,  e:ClickEventInfo)
{
    ds_data.filter("");
}
]]></Script>
  </Form>
</FDL>
검색시 '처리를 위해 \\'값을 변환하는 과정을 처리하였습니다.

12.8Button

12.8.1버튼에 이미지 적용시 이미지 좌우간격 지정

버튼의 좌측에 이미지 적용시 좌우 4픽셀씩 고정여백을 지정하는 방법입니다.

사용 예)
Css에 아래와 같이 추가 합니다. 
 
Button.test
{
        background     : yellow;
        border         : 0 none transparent;
        bordertype     : normal 0 0;
        color          : red;
        image          : URL('IMG::btn_NextO.png');
        imagealign      : left middle;
        imagepadding : 0 0 0 -8;
       padding : 0 0 0 12;
}
버튼에 이미지 적용시 고정여백을 지정하고 싶습니다.

12.9Radio

12.9.1Radio Contents

Radio 컴퍼넌트 데이터셋 없이 사용하는 방법입니다.

Radio contents 사용방법

그림 12-2220120625_142142922_radio1

그림 12-2320120625_142212867_radio2

그림 12-2420120625_142232667_radio3

<?xml version="1.0" encoding="utf-8"?>
<FDL version="1.4">
  <TypeDefinition url="..\default_typedef.xml"/>
  <Form id="tip_combo" classname="tip_combo" inheritanceid="" position="absolute 0 0 442 182" titletext="New Form">
    <Layouts>
      <Layout>
        <Radio id="Radio00" taborder="0" position="absolute 24 30 304 80" codecolumn="codecolumn" datacolumn="datacolumn">
          <Dataset id="innerdataset">
            <ColumnInfo>
              <Column id="codecolumn" size="256"/>
              <Column id="datacolumn" size="256"/>
            </ColumnInfo>
            <Rows>
              <Row>
                <Col id="codecolumn">0</Col>
                <Col id="datacolumn">테스트1</Col>
              </Row>
              <Row>
                <Col id="codecolumn">1</Col>
                <Col id="datacolumn">테스트2</Col>
              </Row>
            </Rows>
          </Dataset>
        </Radio>
      </Layout>
    </Layouts>
  </Form>
</FDL>
Radio만드는 법

12.9.2Radio 글자 색상

Radio 컴퍼넌트의 item별 색상 지정 하는 방법입니다

Radio 컴퍼넌트의 item별 색상 지정

그림 12-2520120625_142643252_radio

그림 12-2620120625_142700100_radio2

그림 12-2720120625_142718562_radio3

소스 예)
<?xml version="1.0" encoding="utf-8"?>
<FDL version="1.2">
  <TypeDefinition url="..\default_typedef.xml"/>
  <Form id="radio" classname="radio" inheritanceid="" position="absolute 0 0 1024 768" titletext="New Form">
    <Layout>
      <Radio id="Radio01" taborder="1" innerdataset="@Dataset00" codecolumn="Column0" datacolumn="Column1" direction="vertical" onitemclick="Radio00_onitemclick" position="absolute 53 75 635 165" rowcount="2" style="color:BIND(color);"/>
    </Layout>
    <Objects>
      <Dataset id="Dataset00" firefirstcount="0" firenextcount="0" useclientlayout="false" updatecontrol="true" enableevent="true" loadkeymode="keep" loadfiltermode="keep" reversesubsum="false">
        <ColumnInfo>
          <Column id="Column0" type="STRING" size="256"/>
          <Column id="Column1" type="STRING" size="256"/>
          <Column id="color" type="STRING" size="256"/>
        </ColumnInfo>
        <Rows>
          <Row>
            <Col id="Column0">전체</Col>
            <Col id="Column1">전체</Col>
            <Col id="color">red</Col>
          </Row>
          <Row>
            <Col id="Column0">가나다라</Col>
            <Col id="Column1">가나다라</Col>
            <Col id="color">yellow</Col>
          </Row>
          <Row>
            <Col id="Column0">가나다라</Col>
            <Col id="Column1">가나다라</Col>
            <Col id="color">blue</Col>
          </Row>
          <Row>
            <Col id="Column1">2</Col>
            <Col id="Column0">2</Col>
            <Col id="color">black</Col>
          </Row>
          <Row>
            <Col id="Column0">3</Col>
            <Col id="Column1">3</Col>
            <Col id="color">white</Col>
          </Row>
          <Row>
            <Col id="Column1">4</Col>
            <Col id="Column0">4</Col>
            <Col id="color">green</Col>
          </Row>
        </Rows>
      </Dataset>
    </Objects>
    <Script type="xscript4.0"><![CDATA[
function Radio00_onitemclick(obj:Radio, e:RadioMouseEventInfo)
{
             
}
]]></Script>
  </Form>
</FDL>
라디오 컴포넌트에 데이터셋의 데이터별로 색을 지정할 수 있나요?

12.9.3Radio InnerDataSet 접근방법

Radio컴포넌트의 경우 InnerDataSet 속성을 통해 codecolumn, datacolumn을 개발시 세팅이 
가능합니다. 
 
이후 조건에 따라 개발시 세팅된 정보에 대해 수정 또는 추가를 하고자 하는 경우 접근방법입니다.

스크립트를 이용한 접근방법

접슨방법 Radio.innerdataset.insertRow() 처럼 dataset접근을 할 수 있습니다.
Radio00.innerdataset.insertRow(0);
Radio00.innerdataset.setColumn(0,"codecolumn",'code값');
Radio00.innerdataset.setColumn(0,"datacolumn","data값");
      
trace(Radio00.innerdataset.saveXML());
Radio의 innerdataset을 스크립트로 제어(변경)할 수 있나요?

12.9.4Radio의 Item의 길이에 따라 size변경 방법

Radio item의 text 길이에 따라 가변 size를 설정하는 기능이 없었습니다.
따라서 item의 최대 길이에 따라 영역이 설정되었는데 이에 대한 해결방법이 추가되었습니다.

처리방법

1. columncount와 rowcount의 값이 모두 -1로 설정 한 경우, Radio의 사이즈에 따라 text의 길이에 맞게 자동정렬하는 기능이 추가되었습니다.
2. columncount의 Default값이 -1에서 0으로 변경되었습니다.
3. rowcount의 Default값이 -1에서 0으로 변경되었습니다.

그림 12-28radio_itemsize

적용버전

20121127(9.2.0.130)

12.10ImageViewer

12.10.1ImageViewer를 이용하여 이미지 표현시 URL로 링크된 파일이 실제 서버에 존재하는지 체크할 수 있는 방법

ImageViewer에 연결된 URL경로에 대한 파일존재 여부는 체크할 수 없습니다. 
만약 파일이 없는 경우 디폴트 이미지로 표현을 하고자 한다면 서비스(jsp,java,asp)등을 만들어 
파일을 체크할 수 있는 로직을 구현해야 합니다.

Jsp 소스 예)

<%@ page contentType="application; charset=MS949"%>
<%@ page language="java" import="java.util.*,java.io.*" %><%
String filename     = "";
String filepath     = "C:\\TEMP\\";
String filegubun    = "";
int intTemp = 0;
try{
    filename    = request.getParameter("filename");
    //filegubun   = request.getParameter("filepath");
    filepath = filepath + filename;
    File   file = new File(filepath);
 byte b[] = new byte[4096];
 response.setHeader("Content-Disposition", "attachment;filename=" + filename + ";");
 
  
    if (file.isFile())
    { 
     BufferedInputStream fin = new BufferedInputStream(new FileInputStream(file));
        BufferedOutputStream outs = new BufferedOutputStream(response.getOutputStream());
        int read = 0;
        try {
         while ((read = fin.read(b)) != -1){
             outs.write(b,0,read);
         }
         outs.close();
         fin.close();
        } catch (Exception e) {
        } finally {
         if(outs!=null) outs.close();
         if(fin!=null) fin.close();
        }      
    } else {
     filepath = "C:\\TEMP\\" + "default.jpg";   //디폴트 이미지를 표현 
        File   file2 = new File(filepath);
     BufferedInputStream fin = new BufferedInputStream(new FileInputStream(file2));
        BufferedOutputStream outs = new BufferedOutputStream(response.getOutputStream());
        int read = 0;
        try {
         while ((read = fin.read(b)) != -1){
             outs.write(b,0,read);
         }
         outs.close();
         fin.close();
        } catch (Exception e) {
        } finally {
         if(outs!=null) outs.close();
         if(fin!=null) fin.close();
        }      
    }    
    
}catch (Exception e){
}finally{
}
%>

화면 스크립트 코딩 예)

ImageViewer00.image = "URL('http://localhost:8080/MiAPI/ImageCheck.jsp?filename=aa.jgp')";
ImageViewer에 연결된 이미지경로에 파일이 존재하는지 체크할 수 있나요?

12.11Tab

12.11.1우측 마우스로 선택된 탭 버튼 삭제

Tab 컴퍼넌트에서 우측 마우스로 선택된 탭 버튼 삭제하는 방법입니다

Tab에서 우측마우스로 좌표 받아 삭제 할 수 있습니다.

사용 예)

그림 12-2920120625_131517033_tab_rbutton

소스 예)
<?xml version="1.0" encoding="utf-8"?>
<FDL version="1.4">
  <TypeDefinition url="..\default_typedef.xml"/>
  <Form id="N124381" classname="N124381" inheritanceid="" position="absolute 0 0 634 332" titletext="New Form">
    <Layouts>
      <Layout>
        <Tab id="Tab00" taborder="0" tabindex="0" scrollbars="autoboth" position="absolute 24 16 597 304" onrbuttondown="Tab00_onrbuttondown">
          <Tabpages>
            <Tabpage id="tabpage1" text="tabpage1"/>
            <Tabpage id="tabpage2" text="tabpage2"/>
            <Tabpage id="tabpage3" text="tabpage3"/>
            <Tabpage id="tabpage4" text="tabpage4"/>
          </Tabpages>
        </Tab>
        <PopupMenu id="PopupMenu00" position="absolute 168 46 356 230" innerdataset="@Dataset00" captioncolumn="Column1" levelcolumn="Column0" idcolumn="Column2" onmenuclick="PopupMenu00_onmenuclick"/>
      </Layout>
    </Layouts>
    <Objects>
      <Dataset id="Dataset00" firefirstcount="0" firenextcount="0" useclientlayout="false" updatecontrol="true" enableevent="true" loadkeymode="keep" loadfiltermode="keep" reversesubsum="false">
        <ColumnInfo>
          <Column id="Column0" type="STRING" size="256"/>
          <Column id="Column1" type="STRING" size="256"/>
          <Column id="Column2" type="STRING" size="256"/>
        </ColumnInfo>
        <Rows>
          <Row>
            <Col id="Column0">0</Col>
            <Col id="Column1">삭제</Col>
            <Col id="Column2">0</Col>
          </Row>
        </Rows>
      </Dataset>
    </Objects>
    <Script type="xscript4.0"><![CDATA[
function Tab00_onrbuttondown(obj:Tab, e:TabMouseEventInfo)
{
             var nX = system.clientToScreenX(obj, e.clientX);
             var nY = system.clientToScreenY(obj, e.clientY);
             trace(nX + " / "+ nY);
             PopupMenu00.trackPopup(nX, nY);
             
}
 
 
function PopupMenu00_onmenuclick(obj:PopupMenu, e:MenuClickEventInfo)
{
             if(e.id == 0){
                           Tab00.removeTabpage(Tab00.getIndex(e.clientX, e.clientY));
             }
}
]]></Script>
  </Form>
</FDL>
onRbutton 이벤트에서 현재 눌린 버튼의 인덱스 가져오는 방법

12.11.2TabPage를 마우스로 선택하여 이동하는 방법

Tab의 ondrag이벤트를 이용하여 TabPage를 이동하는 샘플입니다.

그림 12-30tagTitleDrag

소스

<?xml version="1.0" encoding="utf-8"?>
<FDL version="1.4">
  <TypeDefinition url="..\..\default_typedef.xml"/>
  <Form id="TabTilteDragChange" classname="TabTilteDragChange" inheritanceid="" position="absolute 0 0 1024 768" titletext="New Form" ondrop="TabTilteDragChange_ondrop">
    <Layouts>
      <Layout>
        <Tab id="Tab00" taborder="3" tabindex="0" scrollbars="autoboth" position="absolute 16 37 589 263" dropformat="UNICODETEXT,TEXT,CSV,FILEDROP" dragscrolltype="none" ondrag="Tab00_ondrag">
          <Tabpages>
            <Tabpage id="tabpage1" text="tabpage1"/>
            <Tabpage id="tabpage2" text="tabpage2"/>
            <Tabpage id="tabpage3" text="tabpage3"/>
            <Tabpage id="tabpage4" text="tabpage4"/>
            <Tabpage id="tabpage5" text="tabpage5"/>
          </Tabpages>
        </Tab>
        <ImageViewer id="imgDrag" taborder="4" visible="false" position="absolute 663 54 816 80" style="background:@gradation;border:1px solid #697070ff ;color:#f24a00ff;bordertype:round 5 5  lefttop righttop;font:Viner Hand ITC,16,antialias;gradation:linear 0,0 #ffffffb3 0,100 #ffffff00;"/>
      </Layout>
    </Layouts>
    <Script type="xscript4.0"><![CDATA[function Tab00_ondrag(obj:Tab,  e:DragEventInfo)
{
 var nDragIdx = Tab00.getIndex(e.canvasX, e.canvasY);
 var strTitle = Tab00.tabpages[nDragIdx].text
 e.dragdata = new DragDataObject() ;
 e.dragdata.setData(DragDataFormats.TEXT, nDragIdx);
 imgDrag.text = strTitle;
 
 
 var objFont = new Font(); 
 var objFontOrg = Tab00.currentstyle.font;
 var strFontType  = new String(objFontOrg.type + "");
 objFont.size  = objFontOrg.size;
 objFont.name  = objFontOrg.face;
 objFont.antialias = strFontType.indexOf("antialias") >= 0 ? true : false;
 objFont.bold  = strFontType.indexOf("bold") >= 0 ? true : false;
 objFont.italic  = strFontType.indexOf("italic") >= 0 ? true : false;
 objFont.strike  = strFontType.indexOf("strike") >= 0 ? true : false;
 objFont.underline = strFontType.indexOf("underline") >= 0 ? true : false;
 
 imgDrag.font = Tab00.currentstyle.font;
 var objPainter = imgDrag.canvas.getPainter();
 var objSize = objPainter.getTextSize(strTitle, objFont);
 imgDrag.position.width = objSize.cx + Tab00.currentstyle.buttonpadding.left + Tab00.currentstyle.buttonpadding.right;
 imgDrag.position.height = objSize.cy + Tab00.currentstyle.buttonpadding.top + Tab00.currentstyle.buttonpadding.bottom;
 
 e.dragimage = imgDrag.saveToImageObject();
 
 return true;
}
function TabTilteDragChange_ondrop(obj:Form, e:DragEventInfo)
{
 if(e.fromobject == Tab00) {
  var nDragIdx = e.dragdata.getData(DragDataFormats.TEXT);
  var nDropIdx = Tab00.getIndex(e.canvasX - Tab00.position.x, e.canvasY - Tab00.position.y);
  
  Tab00.moveTabpage(nDragIdx, nDropIdx);
 }
}
]]></Script>
  </Form>
</FDL>

12.12File/Down,Up

파일업로드/다운로드 기능 구현시 발생될 수 있는 문제점들에 관한 처리 방법과 사용방법을 정리한 문서입니다.
아래 링크파일을 클릭하여 관련문서를 다운로드 할 수 있습니다.
http://www.miplatform.co.kr/faq/data/docs/[XP]파일업로드.docx

12.12.1FileDownload 객체 동적 사용방법

사용 예)

var FileDownload00 = new FileDownload();
 
FileDownload00.init("FileDownload00", 100, 100, 400 ,500); 
var strFileName = ds_uploadresult.getColumn(0,"fileName");
FileDownload00.downloadfilename = strFileName;
FileDownload00.downloadurl=http://xxx.xxx.xxx.xxx/cs/fileDownload.jsp?file="+strFileName;
 
this.addChild("FileDownload00", FileDownload00);
FileDownload00.show();
var bSucc = FileDownload00.download();
FileDownload 객체 동성 생성 사용방법을 알고 싶습니다.
FileDownload 객체 동성 생성 시 화면이 꺼져버립니다.

12.13ActiveX

12.13.1OCX 등록 및 사용 방법 및 주의 할점

엑스플랫폼에서 외부 OCX(ActiveX)를 사용하는 방법 및 주의사항을 기술합니다.

UxSutio에서 OCX컴포넌트 생성 후 CLSID아이디 지정

그림 12-3120120615_133432540_pid_class

동적생성방법

var objActiveX = new ActiveX로 생성하여서 사용합니다.
소스 예)
 
var objActiveX = new ActiveX("SActiveX1", 10, 10, 800, 800);
this.addChild("SActiveX1", objActiveX); 
objActiveX.progid="shell.explorer.2";
objActiveX.show();
objActiveX.Navigate2(http://www.tobesoft.com);

주의사항

OCX등록방법
퀵뷰로는 나오는데 화면에 나오지 않습니다.
화면에 나온뒤에 사라지지 않습니다.
OCX등록화면을 열면 비정상 종료가 발생합니다.
팝업에서는 나오지 않습니다.

12.13.2MSIE(웹브라우저)

MSIE에 페이지 호출시 스크롤 제어방법입니다.

사용 예)
function ActiveX00_DocumentComplete(obj:ActiveX, e)
{
    var objDom = obj.Document.body;
    objDom.scroll = 'no'; //msie의 속성을 지정하는 scrollbar 
}
MSIE의 스크롤을 없앨 수 있나요?

MSIE에 값 셋팅 방법

스크립트에서 HTML 내용을 만들어 웹페이지로 MSIE에 보여주는 방법 입니다.
사용 예)
function Form_onload(obj:Form, e:LoadEventInfo)
{
    ActiveX00.Navigate2("about:blank");
}
function ActiveX00_DocumentComplete(obj:ActiveX, e)
{
    ActiveX00.Document.body.innerHTML=  "<html><body>출력하고자 하는 내용 기술</body></html>";
}
MSIE에 HTML문자열을 적용할 수 있나요?

internet Explorer 폼 밖으로 띄울 때 주소 창 없이 띄우는 방법

ie창을 띄우는 경우 주소 창 및 메뉴 등을 없애고 띄우는 방법입니다.

설정방법

그림 12-3220120615_185055507_activex

아래 소스와 같이 옵션에 0을 설정하면 ie창에서 보이지 않습니다.

MSIE0.Navigate("about:blank"); 
MSIE0.Navigate("javascript:window.open('http://daum.net','popup','width=1024px,height=768px,top=0,left=0,menubar=0,toolbar=0,location=0,directories=0,status=01,status=no,scrollbars=no')");
웹 브라우저 띄울 때 주소 창 생략하는 방법
XPlatform에서 주소 창 없이 웹 페이지의 팝업 띄우는 방법

MSIE에 호출된 화면의 항목 제어방법

MSIE(shell.explorer)에 웹페이지를 호출 하였을 경우 웹페이지의 항목을 제어하고자 하는 경우 제어 방법입니다.

사용방법

MiPlatform
var objDocument = AxMSIE.Document;
var objHtmlElementCollection = objDocument.All();
var Item0;
Item0 = objHtmlElementCollection.item("pasteBtn");
Item0.value = ds_CONT.GetColumn(0,"CONT");
Item0.Click();
XPLATFORM
var objDocument = msIE.Document;  
var objHtmlElementCollection = objDocument.getElementById("pasteBtn");  
objHtmlElementCollection.value = ds_CONT.GetColumn(0,"CONT"); 
objHtmlElementCollection.Click();

MSIE을 이용한 POST 전송 방법

MSIE에서 데이터 전송시 get방식이 아닌 post 전송 방법입니다.
소스 예)
 
var JSESSIONID = "123456789";
var Headers = "Content-Type: application/x-www-form-urlencoded\r\n";
var objBuffer = new Buffer("JSESSIONID=" + JSESSIONID+"&arg1=tobesoft");
//"_new" 등으로 IE 브라우져로 띄우면 유지안됨
ActiveX00.Navigate2("http://localhost:8078/keris/JTest.jsp", "", "_self", objBuffer.data, Headers);

주의사항

"_new" 등으로 IE 브라우져로 띄우면 유지안됨
Msie post로 데이터값 넘기는 방법

MSIE 스크립트 실행방법

MS InternetExplorer 11버전 이상에서 함수 호출방법이 변경에 따른 실행방법입니다.
ExtCommonApi를 이용하여 InternetExplorer 버전체크 및 실행방법은 아래 소스를 참고하세요.
var objExt = new ExtCommon();
IE_Gbn = objExt.regGetValue("HKEY_LOCAL_MACHINE", "SOFTWARE\\Microsoft\\Internet Explorer\\", "Version", "S");
IE_Gbn = IE_Gbn.substr(0,1); 

//설치된 IE 버전별로 분기처리 함. IE버전이 9보다 작을 경우
//IE버전이 9 이상일 경우 
if( IE_Gbn < 9 ) 
    objDoc.parentWindow.execScript("callXp('" + encodeURI( v_inVal ) + "')", "JavaScript");
else
    objDoc.parentWindow.callXp(encodeURI( v_inVal ));
execScript가 IE11이상에서 적용안됨
직접 함수호출을 할 수 있으나 IE9이전 버전에서는 execScript만 사용이 가능하여
버전별 체크를 통해 소스구현

12.13.3ActiveX에 포함되어 있는 Obj정보와 Event값을 확인하는 방법

ActiveX를 사용하는 경우 Object에 포함된 속성 및 Event(이벤트에) 속성을 확인해야 하는 경우 있습니다.
XPLATFORM에서는 기본적으로 ActiveX에 대한 값을 표현해 주지 않기 때문에 
해당 ActiveX의 메뉴얼을 참조해서 사용해야 하는데 이 불편함을 아래와 같이 확인이 가능합니다.
function ActiveX00_BeforeNavigate2(obj:ActiveX, e)
{
 var x, y;
  for (x in obj)
  {
   trace(x + " : " + obj[x]);
  }
 for (y in e)
 {
  trace(y + " : " + e[y]);
 }
}
ActiveX를 사용하려고 하는데 이벤트 사용시 obj, e에 포함된 값을 확인할 수 있나요?

12.14ExtCommon

12.14.1Xplatform Extcomon API 사용방법

UXSTUDIO에서 기본 제공되는 API외에 추가 확장 컴포넌트를 등록하는 방법 입니다.
본 내용은 ExtCommon API DLL파일을 추가하는 방법 입니다.

UXSTUDIO 추가 방법

그림 12-3320120626_110148463_xplatform_ext1

그림 12-3420120626_110212475_xplatform_ext2

사용방법

사용 예)
//ExtCommon 선언 후 호출하여서 사용합니다. 
var objExtCommon = new ExtCommon();
var sUserIP = objExtCommon.getIPAddress();
alert(objExtCommon.getIPAddress

최신 Extcomon 다운로드 방법

고객지원센터 홈페이지 에서 다운로드 가능합니다.
www.miplatform.co.kr -> support -> Xplatform -> tip

그림 12-3520120626_110246411_xplatform_ext3

Extcomon이 로딩이 안될경우 해당 경로에 파일 있는지 확인합니다.
2012년 Xplatform의 경우 Extcomon 버전도 2012년으로 사용 해야합니다.
Extcomon 매뉴얼의 경우 다운 받으시는 zip속에 있습니다.
ExtCommon파일은 투비소프트 기술지원 홈페이지(XPLATFORM-TIP게시판)을 통해
다운로드 및 최신파일을 받으실 수 있습니다.

해당 파일은 개발시 XPLATFORM 엔진폴더에 복사해 주어야 하며,
배포(운영)시에는 컴포넌트 폴더에 파일이 존재해야 합니다.
ExtCommon을 어떻게 추가하나요?
Extcomon 사용방법 문의

Extcommon API중 자주묻는 질문

ext_OleServerBusyTimeout :사용하는 이유

사용하고자 하는 ActiveX 컨트롤또는 DCOM 클라이언트가 어떤 이유로 인해 
응답하지 못하고 있는 상태일 때 사용.(다음과 같은 이유에서 발생할 수 있습니다.)

1. ActiveX 컨트롤이 초기화되기 전에 클라이언트 애플리케이션이 이를 사용하려고 시도할 때  
2. 시스템이 느리거나 동시에 많은 애플리케이션이 동작 중이어서 ActiveX 컨트롤이 응답하지 
   못하는 경우  
3. ActiveX 컨트롤의 설계에 문제가 있어서 응답이 늦도록 제작되어 있을 때