devnauts

1. 전역 함수 정의하기

-> app.js 파일 안에서 정의한다.

2. 로딩 완료시에 함수 호출하기

-> app.js 파일 안에서 정의한다.

3. 스플래시 화면 변경하기

-> index.html 파일안에 css로 되어있는 부분을 수정한다.

4. 로그 출력하기

5. 팝업 메세지 출력하기

6. 한글 출력 문제 해결

-> 한글이 제대로 출력되지 않을 경우, UTF-8(BOM 없음)으로 저장하여야 한다 (Notepad++ 등 사용)

7. View 배경 색상 변경하기

-> View 정의 시에 style로 지정한다.

혹은 css로 지정

테스트한 버전 : 2.3.1

Textfield가 아래와 같이 정의되어있을 경우,

입력값 읽기:

입력값 쓰기:

테스트한 버전 : 2.3.1

버튼에 적용하기 :

my-transparent-button-pressed는 버튼이 눌렸을 때 적용되며 color 속성값을 다르게 해서 만들어준다.

* 테스트한 버전 : Sencha Touch 2.3.1

1. 개인 css 파일을 다음 경로에 생성한다.

resources/css/my_css.css

2. app.json 파일에 개인 css 파일을 등록한다.

* 적용 버전 : Sencha Touch 2.3.1

안드로이드용으로 작업한 내용으로 IOS용 빌드를 하는 방법에 대해서 간단히 알아보겠습니다.

1. <PhoneGap 설치 폴더>/lib/ios/bin 밑에서 다음의 내용을 실행하면 마찬가지로 Xcode 프로젝트가 생성되어 Xcode에서 불러들일 수 있습니다. (MacOS에서 실행)

./create <프로젝트가 생성될 폴더> <패키지명> <프로젝트명>

2. 생성된 프로젝트 폴더 밑에 보면 www 폴더가 있는데, 이 안에 있는 cordova.js 파일을 임의의 위치에 복사한 후, www 폴더를 삭제합니다.

3. 안드로이드용으로 작업했었던, senchapj\build\package 혹은 senchapj\build\testing 밑에 있는 폴더를, 마찬가지로 위 2번의 www 위치에 복사한 후 폴더명을 www로 바꾸면 되는데, 주의할 점은 cordova.js 파일이 안드로이드용과 IOS용이 따로 있기 때문에 각각 적합한 것을 넣어줘야 한다는 점입니다. 따라서 2번에서 복사해두었던 cordova.js 파일을 www 안에 덮어써주어야 합니다.

4. Xcode 상에서 빌드 및 실행을 하여 하이브리드 앱의 작동을 확인합니다.

Sencha Touch 프레임웍을 사용한 화면이 나타나는 것은 확인했으니, 다음은 Phone Gap의 native API도 정상 동작하는지 확인해보겠습니다.

1. senchapj/app/view 밑에 있는 Main.js 파일을 열고, html: [ ... ] 블럭의 맨 앞에 다음과 같이 추가해줍니다.

2. 빌드 후, Click 텍스트를 누를 때, 팝업이 나타나는 것을 확인합니다.

Sencha generate app 명령을 사용하여 Sencha Touch 프로젝트를 생성하면, 그 소스 구조는 기본적으로 MVC구조(model, view, controller) 형태로 되어있습니다. 하지만 이런 구조는 개발 작업에 있어서는 편의를 주지만 실제 실행시에 최적화된 형태는 아닙니다.

따라서 실제 하이드리드 앱의 배포, 테스팅을 위해서는 실행에 최적화되도록 별도의 패키징 작업을 거치게 됩니다. 이 작업에는 여러 개로 나뉘어진 .js .css 파일을 하나의 파일로 합치거나 코드 최소화(minified) 등의 과정이 포함됩니다. 이러한 작업이 바로 sencha app build 명령을 통해 이루어집니다.

Sencha app build 명령에는 세가지의 옵션이 있는데, 하이브리드 앱 개발시에는 testing과 package 중에 하나를 선택합니다.

• testing - 제품 릴리즈보다는 검수 단계의 빌드 생성을 위한 옵션입니다. 모든 .js, .css 파일이 합쳐지나, 디버깅의 용이를 위해 코드 최소화는 하지 않습니다.
• package - 웹 서버 없이 로컬 파일 시스템에서 실행가능한 제품 릴리즈용 빌드를 생성합니다.
  
• production - 제품 릴리즈용 빌드를 생성하나 웹서버에서 호스팅되기 위한 용도입니다.
  
• native - package 빌드를 생성한 후에, native 바이너리 실행 파일까지 생성합니다. 본 블로그의 내용에서는 Phone Gap에서 생성한 프로젝트를 사용하므로 고려되지 않았습니다.
  

본 내용은 아래 버전을 기준으로 작성되었습니다.

- Sencha Touch : 2.3.1
- Sencha CMD : 4.0.1.45

시스템 환경변수에 _JAVA_OPTIONS라는 변수를 추가하고, 그 값으로 -Xmx256M 나 -Xmx512M를 입력합니다.

추가 후 커맨드 프롬프트를 다시 실행해주어야 합니다.

커맨드 프롬프트 상에서 SET문을 사용하여 즉석에서 효과를 적용되게 할 수도 있습니다. (그러나 매번 해줘야하는 단점이..)