sencha2 썸네일형 리스트형 11일차 : Sencha Touch 2 MVC 로 나누기 & Controller Intro 지금까지 우리는 Components 들에 의해 표현 되는 View 들과, app 에서 View 에 의해 표현될 모든 데이터들의 형식을 나타내는 Model 들 을 배웠다. 이제 하나가 남았는데, 바로 Controller 이다. 지금까지의 과제에서는 우리가 새로운 View 추가를 했지만, 실제로는 Model 과 Controller 를 View 에서 분리시킬 수 있다. HW7 의 해답을 보면서 어떻게 분리 될 수 있는지 확인해 보자. 먼저 HW7 의 실행화면은 아래와 같다. Ext.data.List 를 활용해서 서버로 부터 보내주는 데이터를 리스트 형태로 나타내고, 그 중에 아이템을 하나 선택하면 나이를 출력해 주는 프로그램이었다. 위의 app 에서 서버 역할을 하는 파일은 persons.jsp 이.. 더보기 7일차 : Sencha Touch 2 events! 센차 터치에서 제공하는 많은 components 들과 class 들은 다양한 events 들을 제공한다. events 들을 잘 활용하면 개발자가 원하는 순간에 유저를 통해, 혹은 instance 의 값에 변화가 일어남으로 인해 발생한 이벤트들을 효과적으로 핸들링 할 수 있다. 1. Events 란 무엇인가?Events 란 클래스를 통해 만들어진 instance 에서 뭔가 흥미로운(?) 일이 생겼을 때 발생(fired) 된다. Ext.create('Ext.Panel', { html: 'My Panel', fullscreen: true, listeners: { painted: function() { Ext.Msg.alert('I was painted to the screen'); } } }); 위의 코드를 .. 더보기 6일차 : Sencha Touch 2 class system! Sencha 에서는 class system 을 사용한다. JAVA 를 공부하신 분들은 이미 알겠지만, 센차에서 class 는 JAVA 에서의 그 것과 유사하다.그러므로 센차에서 class 역시 function 과 properties 를 가진다. 아래의 예를 보자. 1. 정의.Ext.define('Animal', { config: { name: null }, constructor: function(config) { this.initConfig(config); }, speak: function() { alert('grunt'); } }); 위의 예에서 config 내부에 name 이라는 properties 가 선언되 있으며, function 으로는 speak 이 있음을 알 수 있다. Animal 이라는 cl.. 더보기 HW4 : Sencha Touch 2 Grid 버튼을 가지는 custom Panel define 하기 지난 HW3 에서 우리는, define 을 사용하면 기존의 class 를 상속하여 우리만의 새로운 panel 을 만들 수 있다는 것을 배웠습니다. 지난 시간에 배운 Ext.define 을 사용하고, 오늘 배운 layout 을 사용하여, 격자 모양의 버튼을 배치하는 class 를 새로 만듭니다. 이 때 새로 추가 되는 config 속성은 row 와 col 입니다. 기본 row 와 col 값은 3 으로 줍니다. 해당 gridpanel 의 이름은 Sample.view.GridPanel 이라고 주고 xtype 은 'gridpanel' 라고 줍니다. 해당 panel 을 define 할 때 생성자(constructor) 에서 뭔가 작업을 해 줘야 합니다. 이번 과제는 이 부분에서 어떻게 코드를 넣는지가 핵심 입니다.. 더보기 4일차 : Sencha Touch 2 views 에 대한 이해! App 에서 View 를 사용해 보자!! 사용자가 실제로 보는 부분은 view 이다. 오늘은 app 에서 어떻게 view 를 만들고 그렇게 만들어진 View 를 통해 어떻게 application 을 build 하는 지를 설명하겠다. 지난 시간에 배웠듯이, component 를 만들 때, 센차에서 제공하는 Component class 를 이용하는데 이 때, Ext.create 를 사용한다. Ext.create('Ext.Panel', { html: 'Welcome to my app', fullscreen: true }); 그러나 이 것 보다 실제로 더 많이 쓰이는 방법은, Ext.define 을 사용하는 방법인데, 센차에서 기본적으로 제공하는 class 를 상속하여 프로그래머가 필요로 하는 class 를 만.. 더보기 3일차 : Sencha Touch 2 Components 에 대한 이해! 센차2 블로그는, 제가 속한 CRA 에서 방학동안 진행하는 센차2 스터디 및 프로젝트에 도움을 주기위해 작성하게 됐습니다.. 이 자리를 빌어, 방학 동안 프로젝트 하느라 수고할 임 모양, 이 모군, 정 모군, 이 모양, 남 모양, 양 모양, 최 모군, 모두 모두 화이팅 이다!! ㅎㅎㅎ (외부인들도 검색하면 보게 되는 블로그라서 full name 으로 쓰지는 않았업!ㅎ 원한다면 실명으로 수정해 주겠음 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ) 오늘 다룰 내용은 Components 에 대한 내용이다. (갑자기 반말로 가서 죄송.. 시간 관계상..ㅠㅠ) Components 란 무엇인가?센차 터치에서 사용자와 상호작용을 하는 눈에 보이는 클래스들을 components 라고 한다. 그래서 센차에서 모든 components 들은 Ext.. 더보기 HW1 : Sencha Touch 2 Home Panel 추가하고 자기 소개 하기. 첫 번째 과제 입니다. (현재 이 블로그를 쓸 때 제가 generate 한 저의 app 이름은 Sample 입니다. 처음부터 블로그를 따라 오신 분들은 app 이름이 ST2_test1 일 겁니다. 여러분들은, 제가 Sample 이라고 쓴 부분은, 여러분들이 generate 한 app 이름에 맞게 고치셔야 해요 ㅠㅠ) Home 이라는 새로운 Panel 을 만들고 자기 소개서를 쓴 뒤, Main tab panel 에 추가하는 과제 입니다. + app 전체에 고정된 title bar 를 만들어 보세요. 어떻게 새로운 Panel 을 추가해야 하는지가 막막하실 수 있는데 아래 링크를 따라가시면 영상이 나옵니다. http://docs.sencha.com/touch/2-0/#!/guide/getting_started.. 더보기 이전 1 다음
