동구밭에서 삽질한 이야기(타이타늄 경험공유)

타이타늄 앱개발 경험 공유동구밭에서 삽질한 이야기

12년 11월 8일 목요일

motivation


9 month ago


동구밭Dong9.org


1. Modal Layer

배경이 투명인 레이어를 만들어보자!


일반적으로 웹에서는...

레이어와 윈도우는 다른 개념이다.


그래서 난,....

뷰를 이용해 레이어를 만들어 보기로 했다.


첫번재 시도,

투명한 뷰를 하나 만들고,

그 위에 레이어로 만들 뷰를 올린다.

var view = Ti.UI.createView({ opacity: 0.5});

var layerView = Ti.UI.createView();view.add(layerView);view.show();


첫번재 시도는 실패!

부모 뷰의 opacity가 자식 뷰에도 영향을 받는다.실패~~~


두번째 시도,투명한 뷰를 하나 만들고,

또 다른 뷰를 만들어 윈도우에 각각 넣는다.

var view = Ti.UI.createView({ opacity: 0.5});win.add(view);

var layerView = Ti.UI.createView();win.add(layerView);view.show();layerView.show();


두번째 시도도 실패!

코드가 복잡해지고,

부모 윈도우에 먼저 붙어있는 UI가 영향을 받는다. 실패~~~


Solution!

윈도우를 겹쳐서 뛰우고,

별도의 모듈로 만든다!

function Layer() { var dimmed = Ti.UI.createWindow({opacity:0.5, zIndex:1}); var content = Ti.UI.createWindow({zIndex:2});

this.open = function(){ dimmed.open(); content.open(); }; ... 이하 생략 ... return this;};

module.exports = Layer


2. Designed TabGroup

좀더 세련된 탭 그룹 만들기


지켜주지 못해 미안한 기본 탭그룹 아이콘


memories of the layer

먼저, 기본 탭바를 숨긴다.



var tabGroup = Ti.UI.createTabGroup();var win1 = Ti.UI.createWindow({ tabBarHidden : true});var tab = Ti.UI.createTab({window: win1});tabGroup.addTab(tab);

먼저, 기본 탭바를 숨긴다.



그리고 레이어를 만든다.

48 px

20 px

64 px

64x48 크기의 버튼 5개와

투명한 배경을 가진 뷰를 이용해 탭을 디자인한다.



버튼이 클릭되면, 탭그룹에 이벤트를 전달한다.

48 px

20 px

64 px

button.addEventListener("click", function(e) { // 중간 코드 생략 oTabGroup.setActiveTab(e.source.index);

})



탭그룹을 이용하면,

Ti.UI.currentTab.open();

메소드 활용이 가능하다!


3. Layout

복잡한 레이아웃해결하기


Three layout properties

composite (Default)vertical

horizontal


Composite layout

모든 하위 요소들이 부모를 기준으로 위치값을 가진다.

단, 지정하지 않으면 중앙정렬


Vertical layout

1

2

첫번째 자식은 부모를 기준으로 위치값을 가지고,

나머지 자식들은바로 앞에 있는 자식을 기준으로

위치값을 갖는다.


Horizontal layout

1

3

horizontalWrap 속성에 따라 다르다.

2

3

3


Horizontal layout

1

3

2

if horizontalWrap is false


텍스트

1. A row is horizontal2. leftView is Vertical

3. rightView is Vertical


Variable Size Content



Ti.UI.FILLTi.UI.SIZE Ti.UI.SIZE



2Width

Ti.UI.SIZE

Ti.UI.SIZE로 크기를 지정하면 반드시 모든 상위 부모의 크기도 Ti.UI.SIZE로 지정해야한다.

Ti.UI.SIZE

Ti.UI.SIZE



2Width

Ti.UI.FILL

Ti.UI.FILL로 지정하면, 부모의 크기 만큼 채운다.


4. Parallel Scrolling

배경 이미지 활용하기

참고 사이트http://inze.ithttp://www.yebocreative.com


http://inze.it

http://inze.it

http://www.yebocreative.com

http://www.yebocreative.com

어떻게 만들지.....?

320 x 320imageView

일단 이미지 뷰를 하나 올려놓고 고민...


어떻게 만들지.....?

320 x 320imageView

다시 그 위에 테이블 뷰를 하나 올려놓고 고민...

tableView


320 x 320imageView

이미지 뷰의 절반을 덮고,나머지 절반은 올리고..

tableView80 px

160 px

80 px


320 x 320imageView

다시 그 위에 클릭 영역을 올리니까..... 복잡해 OTL

tableView80 px

160 px

80 px

clickableView


뭔가 되긴하는데...뭔가 어색해...


테이블 뷰를 활용하자!

window tableView

320 x 320imageView first RowclickableView


부드러운 움직임의 비밀은 애니메이션!

tableView.addEventListener("scroll", function(e) {

if (e.contentOffset.y <= 0) { // 스크롤을 아래로 내릴때

imageView.animate({ top : 80 + (e.contentOffset.y / 2), duration : 10 }); }});


5. Image Caching

사용자가 올린 이미지를 저장하자!


첫번째 시도,..

SQLitebase64Encode

base64decode


첫번째 시도,..

SQLitebase64Encode

base64decode

느려도�� 너~~~~무�� 느려서

실패~~12년 11월 8일 목요일

Solution!!

SQLite

FileSystem.File.write(image)

StoreFile Path


iPhone Special Directories/Documents/ - iTunes와 공유되는 폴더Titanium.Filesystem.applicationDataDirectory

/Applications/ - 애플리케이션 폴더Titanium.Filesystem.applicationDirectory

/Library/Caches/ - 설정이나 캐시등을 저장하는 폴더Titanium.Filesystem.applicationCacheDirectory

/Library/Application Support/ - iCloud에 자동 백업되는 폴더 & 다른 앱과 연동될때 필요한 데이터를 저장하는 폴더Titanium.Filesystem.applicationSupportDirectory);

/[AppName.app]/ - 앱 리소스 폴더Titanium.Filesystem.resourcesDirectory);/tmp/ - 임시파일, 앱이 죽거나 재시작하면 없어진다. <-- 정말?? 나도 모르겠음!Titanium.Filesystem.tempDirectory);


Tips) Share Documents with iTunes

UIFileSharingEnabledinfo.plist 파일에 키값을 추가한다.


6. DB backup & update

빌드 배포 없이 데이터베이스 자동 업데이트 하기


Synopsis

1. 개발중에 데이터 스키마가 너무 자주 변한다.2. 변할때마다 빌드하기도 귀찮다. 3. 개발 후에 데이터가 변한다. 4. 그럼 대시 배포해야 되나?

결론) DB 자동 업데이트를 만들자!


웹에서 DB를 수정

Ti.Network.createHTTPClient()

File Download & Replace

SQL Query Execute? NO. it is slow!

Just Replace DB file? YES


Two obstacles

1. DB 파일이 저장되는 위치

2. Ti.Database.install() 메소드의 특징


DB File이 저장되는 위치

Ti.Database.install( )

/Library/Private Documents/

하지만, Private Documents 에 접근할수있는 메소드가 없다!!


DB File이 저장되는 위치

Ti.Database.install( )

/Library/Private Documents/

var file = Ti.Filesystem.getFile(Ti.Filesystem.applicationDataDirectory);var dbPath = file.nativePath.replace(

"Documents/", "Library/Private%20Documents/");


Ti.Database.install() 메소드의 특징

1. 인스톨하면 /Library/Private Documents/ 위치에 .sql 확장자로 DB 복사된다. 2. 같은 이름의 DB가 있으면 중복 설치되지 않는다.

따라서 DB를 업데이트 하려면, 기존 DB를 지워야한다!

var dbfile = Ti.Filesystem.getFile(dbPath, DATABASE_NAME + ".sql");

if (dbfile.exists()) { dbfile.deleteFile();}Ti.Database.install(newDBFile, DATABASE_NAME);


Tips) phpLiteAdmin

http://code.google.com/p/phpliteadmin

DB가 생성되지 않거나, SQL문이 실행되지 않으면 접근 권한을 확인한다!$) chmod 777 ./sqlite




7. Drawing Chart

복잡한 데이터는차트로 그리기


데이터에 따라 그래프가 달라진다.


그런데 작물 하나당 그래프가 하나밖에 없네? ^0^

그냥 이미지로 떠버리자..!


엇! 그런데,.. 앞으로 작물이 추가되면 어쩌지?


그럼,.. 귀찮치만..그래프로 그려야겠네...


음.. 그런데,.. Ti SDK는 그래프를 그리는 API가 없네?

오똑하지???


젠장.. 일단 보류!


WebView Trick

window webView

imageView

같은 크기의 masking image로 웹뷰를 덮는다.


WebView Trick

webView masking image


동구밭에서 삽질한 이야기끝

[email protected]


mailto:[email protected]

mailto:[email protected]

동구밭에서 삽질한 이야기(타이타늄 경험공유)

Technology