Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

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

Share my experience with Titanium Mobile.

  • Inicia sesión para ver los comentarios

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

  1. 1. 타이타늄 앱개발 경험 공유 동구밭에서 삽질한 이야기12년 11월 8일 목요일
  2. 2. motivation12년 11월 8일 목요일
  3. 3. 9 month ago12년 11월 8일 목요일
  4. 4. 동구밭 Dong9.org12년 11월 8일 목요일
  5. 5. 12년 11월 8일 목요일
  6. 6. 1. Modal Layer 배경이 투명인 레이어를 만들어보자!12년 11월 8일 목요일
  7. 7. 일반적으로 웹에서는... 레이어와 윈도우는 다른 개념이다.12년 11월 8일 목요일
  8. 8. 그래서 난,.... 뷰를 이용해 레이어를 만들어 보기로 했다.12년 11월 8일 목요일
  9. 9. 첫번재 시도, 투명한 뷰를 하나 만들고, 그 위에 레이어로 만들 뷰를 올린다. var view = Ti.UI.createView({ opacity: 0.5 }); var layerView = Ti.UI.createView(); view.add(layerView); view.show();12년 11월 8일 목요일
  10. 10. 첫번재 시도는 실패! 부모 뷰의 opacity가 자식 뷰에도 영향을 실패~~~ 받는다.12년 11월 8일 목요일
  11. 11. 두번째 시도, 투명한 뷰를 하나 만들고, 또 다른 뷰를 만들어 윈도우에 각각 넣는다. var view = Ti.UI.createView({ opacity: 0.5 }); win.add(view); var layerView = Ti.UI.createView(); win.add(layerView); view.show(); layerView.show();12년 11월 8일 목요일
  12. 12. 두번째 시도도 실패! 코드가 복잡해지고, 부모 윈도우에 먼저 붙어있는 UI가 영향을 받 실패~~~ 는다.12년 11월 8일 목요일
  13. 13. 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 = Layer12년 11월 8일 목요일
  14. 14. 2. Designed TabGroup 좀더 세련된 탭 그룹 만들기12년 11월 8일 목요일
  15. 15. 지켜주지 못해 미안한 기본 탭그룹 아이콘12년 11월 8일 목요일
  16. 16. memories of the layer 먼저, 기본 탭바를 숨긴다.12년 11월 8일 목요일
  17. 17. 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);12년 11월 8일 목요일
  18. 18. memories of the layer 그리고 레이어를 만든다. 64x48 크기의 버튼 5개와 투명한 배경을 가진 뷰를 이용해 탭을 디자인한다. 20 px 48 px 64 px12년 11월 8일 목요일
  19. 19. memories of the layer 버튼이 클릭되면, 탭그룹에 이벤트를 전달한다. button.addEventListener("click", function(e) { // 중간 코드 생략 oTabGroup.setActiveTab(e.source.index); }) 20 px 48 px 64 px12년 11월 8일 목요일
  20. 20. memories of the layer 탭그룹을 이용하면, currentT .open(); Ti.UI. ab 메소드 활용이 가능하다!12년 11월 8일 목요일
  21. 21. 3. Layout 복잡한 레이아웃 해결하기12년 11월 8일 목요일
  22. 22. Three layout properties composite (Default) vertical horizontal12년 11월 8일 목요일
  23. 23. Composite layout 모든 하위 요소들이 부모를 기준으로 위치값을 가진다. 단, 지정하지 않으면 중앙정렬12년 11월 8일 목요일
  24. 24. Vertical layout 1 첫번째 자식은 부모를 기준으로 위치값을 가지고, 나머지 자식들은 바로 앞에 있는 자식을 기준으로 2 위치값을 갖는다.12년 11월 8일 목요일
  25. 25. Horizontal layout 2 1 3 3 3 horizontalWrap 속성에 따라 다르다.12년 11월 8일 목요일
  26. 26. Horizontal layout 2 1 3 if horizontalWrap is false12년 11월 8일 목요일
  27. 27. 1. A row is horizontal 2. leftView is Vertical 텍스트 3. rightView is Vertical12년 11월 8일 목요일
  28. 28. Variable Size Content12년 11월 8일 목요일
  29. 29. Variable Size Content Ti.UI.FILL Ti.UI.SIZE Ti.UI.SIZE12년 11월 8일 목요일
  30. 30. Variable Size Content Ti.UI.SIZE Ti.UI.SIZE Ti.UI.SIZE로 크기를 지정하면 2 반드시 모든 상위 부모의 크기도 Width Ti.UI.SIZE Ti.UI.SIZE로 지정해야한다.12년 11월 8일 목요일
  31. 31. Variable Size Content Ti.UI.FILL로 지정하면, 부모의 크기 만큼 채운다. 2 Width Ti.UI.FILL12년 11월 8일 목요일
  32. 32. 4. Parallel Scrolling 배경 이미지 활용하기 참고 사이트 http://inze.it http://www.yebocreative.com12년 11월 8일 목요일
  33. 33. 4. Parallel Scrolling 배경 이미지 활용하기 참고 사이트 http://inze.it http://www.yebocreative.com12년 11월 8일 목요일
  34. 34. 어떻게 만들지.....? 320 x 320 일단 이미지 뷰를 하나 올려놓고 imageView 고민...12년 11월 8일 목요일
  35. 35. 어떻게 만들지.....? 320 x 320 다시 그 위에 테이블 뷰를 imageView 하나 올려놓고 고민... tableView12년 11월 8일 목요일
  36. 36. 80 px 320 x 320 160 px imageView 80 px tableView 이미지 뷰의 절반을 덮고, 나머지 절반은 올리고..12년 11월 8일 목요일
  37. 37. 80 px 320 x 320 clickableView 160 px imageView 80 px tableView 다시 그 위에 클릭 영역을 올리니까..... 복잡해 OTL12년 11월 8일 목요일
  38. 38. 뭔가 되긴하는데... 뭔가 어색해...12년 11월 8일 목요일
  39. 39. 테이블 뷰를 활용하자! 320 x 320 clickableView imageView first Row window tableView12년 11월 8일 목요일
  40. 40. 부드러운 움직임의 비밀은 애니메이션! tableView.addEventListener("scroll", function(e) { if (e.contentOffset.y <= 0) { // 스크롤을 아래로 내릴때 imageView. animate({ top : 80 + (e.contentOffset.y / 2), duration : 10 }); } });12년 11월 8일 목요일
  41. 41. 5. Image Caching 사용자가 올린 이미지를 저장하자!12년 11월 8일 목요일
  42. 42. 첫번째 시도,.. base64Encode SQLite base64decode12년 11월 8일 목요일
  43. 43. 첫번째 시도,.. 느려도
  44. 44.  너~~~~무
  45. 45.  느려서 실패~~ SQLite base64decode base64Encode12년 11월 8일 목요일
  46. 46. Solution!! FileSystem.File.write(image) Store File Path SQLite12년 11월 8일 목요일
  47. 47. 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); 12년 11월 8일 목요일
  48. 48. Tips) Share Documents with iTunes info.plist 파일에 키값을 추가한다. UIFileSharingEnabled12년 11월 8일 목요일
  49. 49. 6. DB backup update 빌드 배포 없이 데이터베이스 자동 업데이트 하기12년 11월 8일 목요일
  50. 50. Synopsis 1. 개발중에 데이터 스키마가 너무 자주 변한다. 2. 변할때마다 빌드하기도 귀찮다. 3. 개발 후에 데이터가 변한다. 4. 그럼 대시 배포해야 되나? 결론) DB 자동 업데이트를 만들자!12년 11월 8일 목요일
  51. 51. 웹에서 DB를 수정 Ti.Network.createHTTPClient() File Download Replace SQL Query Execute? NO. it is slow! Just Replace DB file? YES12년 11월 8일 목요일
  52. 52. T obstacles wo 1. DB 파일이 저장되는 위치 2. Ti.Database.install() 메소드의 특징12년 11월 8일 목요일
  53. 53. DB File이 저장되는 위치 Ti.Database.install( ) /Library/Private Documents/ 하지만, Private Documents 에 접근할수있는 메소드가 없다!!12년 11월 8일 목요일
  54. 54. 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/ );12년 11월 8일 목요일
  55. 55. 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);12년 11월 8일 목요일
  56. 56. Tips) phpLiteAdmin http://code.google.com/p/phpliteadmin DB가 생성되지 않거나, SQL문이 실행되지 않으면 접근 권한을 확인한다! $) chmod 777 ./sqlite12년 11월 8일 목요일
  57. 57. 7. Drawing Chart 복잡한 데이터는 차트로 그리기12년 11월 8일 목요일
  58. 58. 데이터에 따라 그래프가 달라진다.12년 11월 8일 목요일
  59. 59. 그런데 작물 하나당 그래프가 하나밖에 없네? ^0^ 그냥 이미지로 떠버리자..!12년 11월 8일 목요일
  60. 60. 엇! 그런데,.. 앞으로 작물이 추가되면 어쩌지?12년 11월 8일 목요일
  61. 61. 그럼,.. 귀찮치만.. 그래프로 그려야겠네...12년 11월 8일 목요일
  62. 62. 음.. 그런데,.. Ti SDK는 그래프를 그리는 API가 없네? 오똑하지???12년 11월 8일 목요일
  63. 63. 젠장.. 일단 보류!12년 11월 8일 목요일
  64. 64. WebView Trick imageView webView window 같은 크기의 masking image로 웹뷰를 덮는다.12년 11월 8일 목요일
  65. 65. WebView Trick webView masking image12년 11월 8일 목요일
  66. 66. WebView Trick webView masking image12년 11월 8일 목요일
  67. 67. 동구밭에서 삽질한 이야기 끝 miconblog@gmail.com dong9.org12년 11월 8일 목요일

×