8.콘텐츠 에디터

Edit

넥사크로 모듈 디벨로퍼는 "베타" 버전입니다.

- "베타" 기간 동안 일부 제품 기능은 변경될 수 있습니다.

- 온라인 매뉴얼 URL은 변경될 수 있습니다.

- 가이드에서 사용한 샘플 코드는 아래 링크에서 내려받을 수 있습니다.

https://github.com/TOBESOFT-DOCS/SIMPLE_MODULE_PROJECT/archive/master.zip

https://github.com/TOBESOFT-DOCS/SIMPLE_MODULE_PROJECT

Grid, ListView 컴포넌트 같은 경우에는 콘텐츠가 보이는 형태를 콘텐츠 에디터 형태를 사용해 설정할 수 있도록 지원합니다. 이를 통해 컴포넌트나 데이터를 여러 형태로 보여줄 수 있습니다. 넥사크로 모듈 디벨로퍼에서는 모듈 개발 시 콘텐츠 에디터를 설정하는 기능을 제공하고 있습니다.

메타인포 contents 속성으로 설정하는 방법은 기본 제공되는 3가지 형태의 콘텐츠 에디터를 사용합니다. 콘텐츠 에디터 프로젝트를 만들고 이를 설정하려면 오브젝트 contenteditor 속성으로 설정할 수 있습니다.

8.1메타인포 contents 속성으로 설정하기

contents 속성을 설정하면 기본 제공되는 3가지 형태의 Content Editor를 오브젝트 속성 설정 시 사용할 수 있습니다.

8.1.1contents 속성 설정하기

Component Wizard에서 설정하기

1

오브젝트 생성 시 Contents 항목 설정값을 true로 변경합니다.

2

[Next] 버튼을 클릭하고 Contents Format, Contents Type을 설정합니다.

설정된 속성값은 메타인포에서 다시 확인할 수 있습니다.

3

생성된 오브젝트의 Class Definition을 확인합니다.

아래와 같이 Contents Type에 따라 관련 함수가 자동 생성됩니다.

메타인포에서 설정하기

1

Project Explorer에서 MetaInfo 항목 아래에 오브젝트를 선택합니다.

2

속성창에서 contents 속성값을 true로 설정합니다.

3

contents 속성 항목의 버튼을 클릭해 ContentsInfo Editor를 실행합니다.

4

Contents Format, Contents Type을 설정합니다.

5

생성된 오브젝트의 Class Definition에 필요한 코드를 추가합니다.

메타인포에서 contents 속성을 변경한 경우에는 자동으로 코드를 추가해주지 않습니다. 필요한 코드를 직접 추가해주어야 합니다.

8.1.2Contents Format, Contents Type 속성 설정하기

contents 속성값을 true로 설정하면 Contents Format, Contents Type 속성을 설정할 수 있습니다. Contents Format 속성에 따라 선택할 수 있는 Contents Type 속성 설정이 달라집니다.

Contents Format

Contents Type

xml

contents, formats

json

contents

objectitem

contents, formats

Contents Format

처리할 속성값의 형식을 설정합니다. 선택한 속성값에 따라 모듈 설치 후 사용할 수 있는 에디터가 달라집니다.

Contents Type

속성값을 "formats"로 설정하는 경우에는 formatid를 사용해 1개 이상의 데이터를 설정할 수 있습니다. Component Wizard로 설정한 경우에는 아래와 같이 formats, formatid 속성과 관련 함수가 설정됩니다.

모듈 설치 후 사용할 수 있는 에디터 상단에 Format을 추가할 수 있는 버튼이 추가됩니다. 추가한 Format을 삭제하거나 이름을 변경할 수 있습니다.

8.1.3Contents Item 속성 설정하기

Contents Format 속성값을 "objectitem"으로 설정한 경우에는 Contents Item 속성을 설정해주어야 합니다.

속성명

설명

TagName

Design Source 생성 시 사용하는 TAG 이름을 설정합니다.

TypeName

Basic Contents Editor에서 선택한 항목의 속성을 보여주기 위한 클래스를 설정합니다.

최상위 아이템은 현재 오브젝트 클래스를 선택하고 하위 아이템은 적절한 클래스를 선택합니다.

Minimum Occurs

1 이상의 값을 지정하면 해당 개수 이상의 항목을 설정해야 합니다.

값을 설정하지 않으면 0으로 처리되며 최소 개수 제한은 없습니다.

Maximum Occurs

1 이상의 값을 지정하면 해당 개수 이하의 항목을 설정해야 합니다.

값을 설정하지 않으면 0으로 처리되며 최대 개수 제한은 없습니다.

Minimum Occurs 또는 Maximum Occurs 설정 시 id 속성값을 지정해서 설정할 수 있습니다.

속성값

설명

id 속성값

설정한 id 속성값 1개 항목만 설정할 수 있습니다.

예) btnContent

id 속성값 | id 속성값

"|" 구분자를 사용해 속성값을 설정합니다.

2개 이상의 id 속성값 중 1개 항목만 설정할 수 있습니다.

예) btnContent|btnFotmat

id 속성값, id 속성값

"," 구분자를 사용해 속성값을 설정합니다.

2개 이상의 id 속성값 중 설정한 개수만큼 항목만 추가할 수 있습니다.

Minimum Occurs 속성은 해당 id 속성값으로 설정한 개수는 필수로 추가해야 합니다.

Maximum Occurs 속성은 해당 id 속성값으로 설정한 개수만큼만 추가할 수 있습니다.

예) btnContent,btnFotmat

"|" 또는 "," 구분자를 사용할 때는 공백을 포함하지 않아야 합니다.

공백문자가 있는 경우에는 해당 문자를 허용하지 않는다는 메시지가 출력되고 저장이 되지 않습니다.

8.1.4간단한 샘플 만들어보기

오브젝트의 contents 속성을 true로 설정하고 모듈을 만들고 넥사크로 스튜디오에서 해당 오브젝트의 contents 속성값을 변경하는 방법을 살펴봅니다.

모듈 프로젝트 만들기

1

메뉴 [File > New > Project]를 선택하고 Project Wizard를 실행합니다.

2

Project Name을 입력하고 [Next] 버튼을 클릭합니다.

3

Object ID를 입력하고 Contents 항목 값을 true로 변경합니다.

4

[Next] 버튼을 클릭하고 Contents Information을 아래와 같이 변경합니다.

5

[Finish] 버튼을 클릭하고 프로젝트를 생성합니다.

화면 구성하기

1

디자인 영역에 Static 컴포넌트와 Button 컴포넌트를 배치하고 Form 크기를 적절하게 변경합니다.

2

컴포넌트 id를 아래와 같이 설정합니다.

Static: staComp
Button: btnComp

Contents Item 항목 설정하기

1

Project Explorer에서 MetaInfo 항목 아래 오브젝트명을 선택합니다.

2

속성창에서 contents 속성을 확인하고 버튼을 클릭합니다.

ContentsInfo Editor가 실행되면 하단 Contents Item 항목을 추가합니다.

3

[+] 버튼을 클릭해 아이템을 추가합니다.

4

추가한 아이템 행에 있는 [+] 버튼을 클릭해 하위 아이템을 2개 추가합니다.

5

TagName, TypeName 등 항목을 아래와 같이 변경합니다.

최상위 아이템 TypeName은 현재 작업하고 있는 오브젝트 클래스를 선택합니다. 예제에서는 "nexacro.CompContentsSample"입니다.

넥사크로 스튜디오에서 contents 속성 설정 시 각 하위 아이템은 하나씩 추가할 수 있으며 id 값은 "staComp", "btnComp"로 설정됩니다.

스크립트 작성하기

1

Project Explorer에서 오브젝트명 아래에 있는 xcdl 파일을 선택합니다.

2

Class Definition 탭을 선택합니다.

contents 속성값 설정 시 설정된 값을 처리하는 방식은 직접 스크립트에서 구현해주어야 합니다. Component Wizard에서 contents 속성을 설정했다면 스크립트 코드는 아래와 같이 생성됩니다.

_pCompContentsSample.contents = "";
_pCompContentsSample.set_contents = function (v)
{
    this.contents = v;
    this._setContents(this.contents);
};
    
_pCompContentsSample._setContents = function (v)
{
};

3

속성창에서 on_attach_contents_handle, on_created_contents 항목을 더블 클릭해서 해당 함수를 생성합니다.

앱 실행 시 NRE, WRE에서 발생하는 오브젝트 인터페이스가 달라 아래와 같이 2개를 모두 등록했습니다. 서비스 대상이 WRE만이라면 on_attach_contents_handle 함수만 등록합니다.

4

on_attach_contents_handle, on_created_contents 함수를 아래와 같이 수정합니다.

on_created_contents는 NRE에서 동작하는 함수인데 넥사크로 스튜디오에서 해당 컴포넌트 로딩 시에 동작하면서 중복된 함수가 실행되어 system.navigatorname을 체크해서 넥사크로 스튜디오에서는 실행되지 않도록 설정합니다.

_pCompContentsSample.on_attach_contents_handle = function (win)
{
    nexacro._CompositeComponent.prototype.on_attach_contents_handle.call(this, win);
    this._setContents(this.contents);
};    
    
_pCompContentsSample.on_created_contents = function (win)
{
    nexacro._CompositeComponent.prototype.on_created_contents.call(this, win);
    if(system.navigatorname != "nexacro DesignMode")
    {
        this._setContents(this.contents);
    }
};

5

_setContents 함수를 아래와 같이 수정합니다.

_setContents 함수는 아래와 같은 상황에서 호출됩니다.

  • 넥사크로 스튜디오에서 오브젝트를 추가한 Form 로딩

  • 넥사크로 스튜디오에서 오브젝트 contents 속성값 변경

  • 앱 로딩 시 on_attach_contents_handle, on_created_contents 함수 호출

contents 속성으로 설정한 값은 XML 문자열로 전달되며 함수 내에서 DomParser를 사용해 DOMDocument 오브젝트를 생성하고 각 항목에 설정된 값을 확인하고 설정한 값을 반영합니다.

_pCompContentsSample._setContents = function (v)
{
    this.contents = v;
    var objDoc = new nexacro.DomParser();
    var xmlDoc = objDoc.parseFromString(this.contents);
    var obj = null;
    var n, children = null;
        
    var contentsNode = xmlDoc.firstChild;
    if(!contentsNode)
        return;
    
    var objectNode = contentsNode.firstChild;
    if(!objectNode || objectNode.tagName != "MyComp")
        return;
            
    var childNode = objectNode.firstChild;
    while(childNode)
    {
        var id = childNode.getAttribute("id");
        var obj = this.form[id];
        if(obj == undefined)
            break;
            
        var attributes = childNode.attributes;
        var nCount = attributes.length;
            
        for(var i=0; i<nCount; i++)
        {
            var attr = attributes[i];
            var attr_name = attr.name;
            var attr_value = attr.value;
                
            if(attr_name == "id")
                continue;
                
            var setter = obj["set_"+attr_name];
            if(setter)
                setter.call(obj, attr_value);
        }
        childNode = childNode.nextSibling;
    }
};

애뮬레이터에서 동작 확인하기

1

메뉴 [Generate > Emulate]를 선택하고 애뮬레이터를 실행합니다.

2

속성창이 보이지 않는다면 상단 아이콘 중에서 [Show Object MetaInfo] 항목을 클릭합니다.

3

속성창에서 contents 속성을 확인하고 버튼을 클릭합니다.

4

Basic Contents Editor가 실행되면 [+] 버튼을 클릭하고 아이템을 추가합니다.

5

추가한 최상위 아이템을 선택하고 [+] 버튼을 클릭하고 2개의 아이템을 추가합니다.

이전 단계에서 Contents Item 속성 설정 시 지정된 id로 2개의 아이템만 추가할 수 있도록 설정했기 때문에 2개의 아이템만 추가할 수 있습니다.

6

추가한 하위 아이템을 선택하고 속성창에서 컴포넌트의 속성값을 적절하게 수정합니다.

7

[OK] 버튼을 클릭하고 설정한 속성값이 애뮬레이터에 표시되는지 확인합니다.

모듈 설치하고 동작 확인하기

이제 모듈을 배포하고 배포한 모듈을 넥사크로 스튜디오에서 확인해봅니다.

1

메뉴 [Deploy > Module Package]를 선택하고 모듈 설치 파일을 생성합니다.

배포한 모듈 설치 파일을 넥사크로 스튜디오에서 가져옵니다.

2

넥사크로 스튜디오에서 프로젝트를 생성하거나 기존 프로젝트를 실행합니다.

3

메뉴 [File > Install Module Wizard]를 선택하고 모듈 파일을 설치합니다.

4

Form에 CompContentsSample 컴포넌트를 배치합니다.

5

속성창에서 contents 속성을 확인하고 버튼을 클릭합니다.

[Contents] 탭에서 아이템을 추가하고 설정하는 방식은 애뮬레이터와 같습니다. 이번 단계에서는 [Design Source] 탭에서 설정하는 방법을 살펴봅니다.

6

[Design Source] 탭에서 아래 코드를 복사해 붙여넣어 속성값을 설정합니다.

<Contents>
  <MyComp id="MyComp00">
    <Static id="staComp" text="TEST" color="red" font="36px/normal &quot;Arial&quot;" textAlign="center"/>
    <Button id="btnComp" text="TEST BUTTON" background="cornflowerblue"/>
  </MyComp>
</Contents>

7

[OK] 버튼을 클릭하고 설정한 속성값이 디자인 창에 표시되는지 확인합니다.

8

Quick View를 실행해 NRE 또는 웹브라우저에서 컴포넌트가 설정한 속성으로 표시되는지 확인합니다.

9

Form에 Button 컴포넌트를 추가하고 onclick 이벤트 함수를 아래와 같이 작성합니다.

버튼 클릭 시 오브젝트의 contents 속성값을 설정하고 오브젝트 내 컴포넌트의 text 속성값을 변경합니다.

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
    this.CompContentsSample00.set_contents("<Contents><MyComp id='MyComp00'><Static id='staComp' text='SAMPLE'/><Button id='btnComp' text='SAMPLE BUTTON'/></MyComp></Contents>");
};

10

Quick View를 실행하고 버튼 클릭 시 텍스트가 변경되는지 확인합니다.

8.2오브젝트 contentseditor 속성으로 설정하기

넥사크로 스튜디오에서 별도 개발한 콘텐츠 에디터 프로젝트를 연결해 사용하는 기능을 지원합니다.

넥사크로 모듈 디벨로퍼에서 콘텐츠 에디터를 개별적으로 생성하는 기능은 아직 지원하지 않습니다.

넥사크로 스튜디오에서 콘텐츠 에디터 프로젝트를 생성하고 작성하는 방식은 공식적으로 지원하지 않는 기능입니다. 모듈 컴포넌트를 시험 제작하는 일부 협력 업체에서 사용하는 기능입니다.

Project Explorer에서 오브젝트 선택 시 속성창에서 Contents Editor 관련 속성을 지정할 수 있습니다.

항목

설명

contentseditorformurl

콘텐츠 에디터 화면을 디자인한 XFDL 파일을 지정합니다.

contentseditorproject 항목값을 먼저 지정하고 해당 프로젝트 내 Form 목록 중에서 선택합니다.

contentseditorproject

콘텐츠 에디터 프로젝트 경로를 지정합니다.

contentseditorproject 항목에 지정하는 콘텐츠 에디터 프로젝트는 모듈 프로젝트 하위 경로에 위치해야 합니다.

ContentsInfo 메타인포 편집 시 contentseditor 항목을 "external"로 설정해주어야 합니다.

등록한 콘텐츠 에디터 프로젝트는 Project Explorer에 노출되며 항목 선택 시 넥사크로 스튜디오에서 실행할 지 여부를 확인합니다.