Successfully reported this slideshow.
Your SlideShare is downloading. ×

Cappuccino fundamental

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Loading in …3
×

Check these out next

1 of 22 Ad

More Related Content

Slideshows for you (20)

Similar to Cappuccino fundamental (20)

Advertisement

More from JeongHun Byeon (20)

Cappuccino fundamental

  1. 1. Cappuccino Fundamental 2010.12.07 Outsider
  2. 3. Objective-J <ul><ul><li>Objective-C 에 기반한 프로그래밍 언어 </li></ul></ul><ul><ul><li>Javascript 의 strict 한 슈퍼셋 </li></ul></ul><ul><ul><li>  필요하다면 javascript 도 사용가능하다 . </li></ul></ul>Objective-J Preprocessor <ul><ul><li>Preprocessor 는 Javascript 로 쓰여짐 </li></ul></ul><ul><ul><li>플러그인도 없고 컴파일도 없다 </li></ul></ul><ul><ul><ul><li>( 필요하다면 컴파일 가능 ) </li></ul></ul></ul><ul><ul><li>Obj-J 파일은 순수 JS 파일로 컴파일된다 . </li></ul></ul><ul><ul><li>개발단계에서는 모든 클래스가 런타임시에 로드되고 컴파일된다 . </li></ul></ul><ul><ul><li>Obj-J 파일들은 pre-compile 되고 한 파일로 번들될 수 있다 . </li></ul></ul>
  3. 5. Application Framework <ul><ul><li>문서 관리 </li></ul></ul><ul><ul><ul><li>열기 , 저장 , 취소 등 </li></ul></ul></ul><ul><ul><li>컨텐츠 수정 </li></ul></ul><ul><ul><ul><li>Undo / Redo </li></ul></ul></ul><ul><ul><ul><li>복사하기 / 붙혀넣기 </li></ul></ul></ul><ul><ul><li>그래픽 </li></ul></ul><ul><ul><li>뷰 </li></ul></ul>
  4. 6. Cappuccino <ul><ul><li>Application Framework </li></ul></ul><ul><ul><li>Cocoa 에 기반해서 설계됨 </li></ul></ul><ul><ul><li>애플리케이션의 기반을 제공한다 . </li></ul></ul><ul><ul><li>jQuery 같은 DOM 기반의 위젯 툴킷이 아니다 . </li></ul></ul><ul><ul><li>( 웹사이트가 아닌 ) 웹애플리케이션을 위한 프레임워크이다 </li></ul></ul><ul><ul><li>280North 가 만들었으면 LGPL 2 라이센스를 따른다 </li></ul></ul>
  5. 7. Atlas <ul><ul><li>IDE 와 Graphical interface builder </li></ul></ul><ul><ul><li>UI 를 만들고 데이터 바이딩을 한다 . </li></ul></ul><ul><ul><li>라이브 프리뷰모드에서 UI 가 테스트가능하다 </li></ul></ul><ul><ul><li>UI 엘리먼트들의 인스턴스들을 담고 있는 CIB 파일을 제공한다 </li></ul></ul>
  6. 8. Back-end 는 send/accept data(JSON) 로 통신한다 모든 로직은 Objective-J(JavaScript) 에 포함된다
  7. 9. Objective-J Syntax <ul><li>window.orderFront(); </li></ul><ul><li>icon.moveToXY(100, 200); </li></ul><ul><li>new JFrame(); </li></ul><ul><li>new JFrame(&quot;Toolbox&quot;); </li></ul><ul><li>this.setNeedsDisplay(true); </li></ul>[window orderFront]; [icon moveToX:100 Y:200]; [[CPWindow alloc] init]; [[CPWindow alloc] initWithTitle:&quot;Toolbox&quot;]; [self setNeedsDisplay:YES]; Java Objective-J this -> self true -> YES false -> NO null -> nil moveToX:Y:
  8. 10. 클래스 정의 <ul><li>@import <AppKit/CPView.j> </li></ul><ul><li>@implementation PageView : CPView </li></ul><ul><li>{ </li></ul><ul><li>CALayer _rootLayer; </li></ul><ul><li>} </li></ul><ul><li>// 메서드 정의 </li></ul><ul><li>@end </li></ul>Base Class Convention:  인스턴스 변수는 언더스코어로 시작
  9. 11. 메서드 정의 <ul><li>- (id)initWithFrame:(CGRect)aFrame </li></ul><ul><li>{ </li></ul><ul><li>     self = [super initWithFrame:aFrame]; </li></ul><ul><li>     if (self) </li></ul><ul><li>     { </li></ul><ul><li>         _rootLayer = [CALayer layer]; </li></ul><ul><li>[self setWantsLayer:YES]; </li></ul><ul><li>[self setLayer:_rootLayer]; </li></ul><ul><li>[_rootLayer setBackgroundColor:[CPColor whiteColor]]; </li></ul><ul><li>[_rootLayer setNeedsDisplay]; </li></ul><ul><li>     } </li></ul><ul><li>     return self; </li></ul><ul><li>} </li></ul>파라미터 타입 리턴타입 - 는 인스턴스 메서드  + 는 클래스 메서드
  10. 12. 공통 패턴 <ul><ul><li>target -> action </li></ul></ul><ul><ul><li>delegation (subclass 대신에 ) </li></ul></ul><ul><ul><li>Model - View - Controller </li></ul></ul>
  11. 13. Target : Action <ul><li>var searchButton = [CPButton buttonWithTitle:&quot;go&quot;]; </li></ul><ul><li>[searchButton setAction:@selector(performSearch:)]; </li></ul><ul><li>[searchButton setTarget:nil]; </li></ul>@selector() 는 메서드명을 변수처럼 encode 하는 방법 target = nil  responder 를 위한 chain 을 찾는다 . //   검색 메서드 - (void)performSearch:(id)sender { }
  12. 14. Delegation <ul><li>[_searchCollectionView setDelegate:self]; </li></ul>&quot;self&quot; 객체가 delegate 메세지에 응답하게 된다 . delegate 클래스에서 설계되어 있는 메서드를 정의한다 . // CPCollectionView 의 delegate 메서드 (void)collectionViewDidChangeSelection:(CPCollectionView)collectionView { }
  13. 15. MVC <ul><li>@implementation AppController : CPObject </li></ul><ul><li>{ </li></ul><ul><li>     PMSearch currenSearch; </li></ul><ul><li>     CPCollectionView _searchCollectionView; </li></ul><ul><li>} </li></ul>Controller Model View
  14. 16. Reference 문서 <ul><ul><li>CappKiDo </li></ul></ul><ul><ul><ul><li>http://www.cappkido.eliotis.com/ </li></ul></ul></ul><ul><ul><li>Web </li></ul></ul><ul><ul><ul><li>http://cappdocs.worldofkrauss.com/ </li></ul></ul></ul>
  15. 17. capp gen example
  16. 19. 파일 구조 <ul><ul><li>AppController.j - Application controller (builds initial UI) </li></ul></ul><ul><ul><li>Frameworks -  /usr/local/share/objj/lib/Frameworks 복사본 </li></ul></ul><ul><ul><li>index.html - 애플리게이션 시작 </li></ul></ul><ul><ul><li>index-debug.html - 디버그 모드의 애플리케이션 시작 </li></ul></ul><ul><ul><li>Info.plist -   애플리케이션 시동 정보 </li></ul></ul><ul><ul><li>main.j -   애플리케이션의 main() method </li></ul></ul><ul><ul><li>Rakefile - Rake 빌드파일 </li></ul></ul><ul><ul><li>Resources -   애플레케이션에서 이용할 리소스들 ( 이미지 등 ) </li></ul></ul>
  17. 20. 설정 capp config key value user.name user.email organization.name organization.email organization.url organization.identifier ~/.cappconfig 에 저장된다 참고 : https://github.com/280north/cappuccino/wiki/capp
  18. 21. 설정 https://github.com/hlship/nfjs-cappuccino 제가 만든 예제는 아닙니다 . ㅎ From http://blog.outsider.ne.kr/ myexample/2010/cappuccino/ex.zip
  19. 22. Resources <ul><ul><li>http://www.slideshare.net/hlship/brew-up-a-rich-web-application-with-cappuccino </li></ul></ul><ul><ul><li>http://www.slideshare.net/carsonified/building-desktop-caliber-web-applications-with-objectivej-and-cappuccino-francisco-tolmasky-presentation </li></ul></ul><ul><ul><li>http://www.slideshare.net/juni0r/cappuccino-a-javascript-application-framework </li></ul></ul><ul><ul><li>http://www.slideshare.net/chapados/cappuccino-sdruby-20090806 </li></ul></ul><ul><ul><li>http://www.slideshare.net/LukHurych/preparing-cappuccino-in-30-minutes </li></ul></ul><ul><ul><li>http://www.slideshare.net/jharwig/introduction-to-cappuccino-presentation </li></ul></ul>

×