form 만들기
+를 누르고 form를 선택하고 Hello 입력한 뒤 true 선택한다
Hello에 마우스 우클릭을 한 후 New Folder에 Hello000을 해준다
-
Hello 또는 Work를 선택하고 상단에 New 아이콘을 클릭하여 Form 메뉴를 선택하면 Form Wizard로 접근이 가능하다
-
단축기 Ctil + N 또는 상단메뉴 File > New > Form 메뉴를 통해서도 Form Wizard로 접근이 가능하다
-> 둘 중에 아무거나 해도 상관없다
해당화면은 개발자가 화면을 만들게 되면 실제 사용자분들이 해당 화면을 보기 위해서는 웹브라우저를 통해서 접근하게 된다
그런데 사용자 브라우저 PC 환경이 실행하는 환경에 따라 달라질 수 있는데 이때 해당화면에서 개발자가 만든 화면을 사용자가 실행한 화면 크기에 따라서 다양하게 리사이즈 되도록 기능을 제공한다
즉, 반응형 웹 또는 리사이즈를 구현할 때 사용하는 옵션이다
옅은 회색 -> Form(전체 Form 영역)
가운데 들어가는 검은색 부분이 컴포넌트(Edit, Button, Grid 등 각각의 컴포넌트)
-> 컴포넌트는 Form을 기준으로 left, top, right, bottom을 PX(픽셀) 고정할 것인지, %(퍼센트)로 고정할 것인지를 정의하는 옵션
PX(픽셀) -> 화면에 크기가 변경하더라도 left는 무조건 고정한다
%(퍼센트) -> 화면 크기가 바뀌면 바뀐 크기만큼 자동으로 엔진에서 사이즈를 계산하여 %(퍼센트)만큼 띄어주는 것을 의미
특정한 컴포넌트를 대상으로 리사이즈를 구현하기 때문에 Form을 만드는 단계에서 PX(픽셀)로 설정하고 Finish 버튼을 선택하는 것을 권장한다!
Button 만들기
-
상단의 Button를 선택하고 마우스로 화면 원하는 위치에 그냥 클릭하면 된다(Default 사이즈로 생성)
-
상단의 Button를 선택하고 화면에서 내가 원하는 사이즈로 드래그한다(내가 원하는 크기대로 컴포넌트를 생성)
텍스트 편집하는 방법
- 클릭 두번을 한 뒤 내가 원하는 텍스트를 입력하면 됨(줄바꿈은 Ctrl + Enter)
- 컴포넌트 Button을 선택하면 오른쪽 Property가 활성화가 되고 세 번째 아이콘을 선택 한 후 Categorized를 선택한다 -> 하단의 text 부분에서 내가 원하는 텍스트를 입력하면 된다(줄바꿈은 옆에 화살표를 누른뒤 Ctrl + Enter)
- Button을 선택한 상태에서 단축기 F2를 누르면 된다(많은 개발자들이 선호할 것 같음)
Event 연결하는 방법
- 빠르게 더블 클릭을 하면 된다(텍스트는 천천히, 이벤트는 빠르게)
- 오른쪽 Property 창 네 번째 아이콘을 클릭하면 onclick이벤트에 Button_00_onclick이 되어 있는데 이 부분을 fn_Hello를 입력하면 입력한 Event명을 가지고 자동으로 Event를 만들어 준다
메시지 보여주는 방법
넥사크로플랫폼은 모든 Method, Properties, Event 사용 시에는 Scope를 반드시 기술해 주어야 한다
즉 this.alert에서 this는 Form을 의미(Form의 Method alert를 사용하겠다는 의미)
alert를 그냥 쓰지 않고 this.alert으로 작성해야 한다
-> 넥사크로플랫폼에서 반드시 알아야 하는 것 중에 하나
실행하는 법
Nexacro Runtime Environment
QuickView 아이콘을 클릭하면 RunConfiguration이 나오고 이 상태에서 Browser에 Nexacro Runtime Environment 선택 후 Run 버튼을 클릭한다
Button01를 누르게 되면 Hello라는 메시지가 나오게 된다
Nexacro Emulator
QuickView 아이콘을 클릭하면 이 상태에서 Browser에 Nexacro Emulator 선택 후 Run 버튼을 클릭한다
Screen 정보와 가로, 세로를 입력할 수 있는 숫자 정보가 보인다
-> 즉, 넥사크로플랫폼은 하나의 개발툴로 모바일도 개발할 수 있다
Internet Explorer
QuickView 아이콘을 클릭하면 이 상태에서 Browser에 Internet Explorer 선택 후 Run 버튼을 클릭한다
웹 브라우저가 실행되고 내가 만들었던 화면이 웹브라우저에서 보인다
Chrome
QuickView 아이콘을 클릭하면 이 상태에서 Browser에 Chrome 선택 후 Run 버튼을 클릭한다
Chrome이 실행되고 내가 만들었던 화면이 Chrome에서 보인다
넥사크로플랫폼 디자인 결과물에는 confirm과 alert 화면도 디자인을 진행해야 한다
Log 남기는 방법
Log는 Application 영역이다(Form 영역이 X)
Application에 접근하는 방법은 nexacro.getApplication()이다
-
로그를 남길 때는 .trace()라는 메서드를 사용한다 -> DEbug하기 위해 기본적으로 알아야 할 내용이다
-
nexacro.getApplication()까지를 var objApp로 받을 수 있다 -> 해당 경로를 objApp를 변수로 설정하고 objApp.trace();
둘 중에 아무거나 해도 무방하다
Nexacro Runtime Environment
QuickView 아이콘을 클릭하면 RunConfiguration이 나오고 이 상태에서 Browser에 Nexacro Runtime Environment 선택 후 Run 버튼을 클릭한다
일반 사용자는 Log(trace)를 볼 필요가 없고 개발자들만 보면 된다
nexacro studio 하단의 output 창이 있다 -> 이곳에서 Log(trace)를 확인할 수 있다
Internet Explorer
버튼을 눌렀지만 메시지만 출력되고 output 창을 보면 Log가 기록되지 않았다
웹 브라우저 실행하게 되면 디버깅은 웹브라우저에서 확인해야 한다(각 웹브라우저에서 제공하는 하는 것이 다르지만 대표적으로 F12키를 누르면 된다)
Script를 이용해서 Button의 text 속성을 바꾸는 방법
Button의 속성을 바꿀 때는 Button이 Form에 있기 때문에 this.을 반드시 기술해줘야 한다
넥사크로플랫폼에서 속성에 값을 세팅할 때는 반드시 set_속성명을 넣어줘야 한다
this.alert 입력한 다음 this.alert(this.Button00.text)를 입력한다
-> 값을 확인할 때에는 get_가 붙지 않고 바로 속성명을 기술해주면 된다
id를 btnHello로 바꾸어주고 실행을 하면 안되고 output창에 아래와 같은 오류메시지가 뜨게 된다
-> 왜? -> id값이 변경됐기 때문이다
즉, 위에 보이는 this.Button00이 btnHello로 변경이 되어 해당 Object를 찾을 수 없어 오류가 나는 것이다
-> 해결하기 위해서는 위의 사진처럼 기존에 있던 Button00을 btnHello로 바꾸어 주면 된다
Tip
function에 파라미터 2개(모든 Event에는 obj(object), e(Event)가 있다)가 항상 값을 전달되고 있다
-> Script 작성할 때 this.btnHello를 기술하는 것이 아니라 obj를 그냥 쓰게 되면 id값이 변경이 되더라도 별도의 Script 수정 없이 바로 사용할 수 있다
즉, 다시 말해 반드시 Event에서 Script를 작성할 땐 최대한 파라미터 값을 이용해서 Script를 작성해 주어야 한다
변수 선언 방법
- var str1 = "abc";
특징
-
var로 선언된 변수는 Script 안에서만 사용이 가능한 전역변수
-
Design의 각 컴포넌트에서 값을 참조도 할 수 있지만 var로 선언된 변수는 사용X
-
실행된 화면에서 Form과 Form 간의 변수값 참조 불가능
-> 즉, var로 선언된 변수는 오직 Script에서만 사용
- this.str2 = "123";
특징
-
Script, 컴포넌트 및 Form과 Form 간의 값을 참조할 수 있음
-
즉, this.변수가 Form의 Member 변수로 사용할 수 있음
-> 이 방법을 사용해야 한다
- str3 = "abc";
특징
- Application의 Global 영역으로 선언
-> Global로 선언이 된다는 건 해당 Form을 열었다가 닫아도 해당 변수는 메모리 남아 있게 된다(Application를 종료해야 메모리에 안 남음)
-> 그래서 이 방법은 쓰면 안 됨
우와