Sencha Touch 2 썸네일형 리스트형 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 이.. 더보기 HW8 : Sencha Touch 2 Model, Store, Proxy, 이용해서 데이터 받아서 List 에 뿌리기 2 이번 과제는 지난 과제에 이어서 두 번째 시간 입니다. 이번엔 중첩된 정보들을 리스트로 표현해야 하는데, 아... 지금 다른게 할 게 많아서..... 자세한 설명은 직접 물어보시구용. ㅠㅠ 결과 화면 올립니다. Part 1 Part 2 완전 대박 중요한 부분!!아래는 json 형태로 데이터가 어떻게 오는지를 보여주는 화면입니다. (books.jsp 파일의 일부를 캡쳐했죠.) 여기서 빨간 박스 쳐 있는 부분을 유심히 봐주십시오. 위의 빨간 박스 친 부분을 바탕으로 아래에서 Model 을 선언했습니다. 여기서.. 이름이 같아야 한다는 것을 알 수 있습니다!!! 이름이 같아야 합니다1! 대/소문자는 상관 없는 거 같습니다. 특히 hasMany 에 쓰여지는 모델(여기선 Books)은 반드시 위의 JSON 데이터.. 더보기 10일차 : Sencha Touch 2 Model Store Proxy (cont..) 오늘 공부할 블로그는 없습니다.!코드 보고 직접 설명합니다!ㅎ오늘 설명하는 내용은 내일 업로드 하겠습니다! 더보기 HW7 : Sencha Touch 2 Model, Store, Proxy, 이용해서 데이터 받아서 List 에 뿌리기 HW7 은, 이전에 배운 것을 바탕으로 List 를 만들어 보는 것입니다. 등록된 jsp 파일을 아래와 같은 위치에 둡니다. 그리고 해당 데이터를 활용해서 아래와 같이 결과 화면이 나와야 합니다. (이전 과제를 쭈욱 이어서 하는 것이기 때문에 탭바와 툴바에 버튼들이 있는 것입니다.) 안내! Sample.view.ModelPanel 이름으로 Panel 을 만듭니다. xtype 은 modelpanel 로 줍니다. 해당 Panel 의 item 은 Ext.List 를 사용합니다. 정식 명칭은 Ext.dataview.List 입니다. xtype 은 list 입니다. JSP 에서 보내주는 파일에 맡게 Model 을 정의 합니다. List 에서 JSP 파일에서 주는 값을 읽어오기 위해 store 속성을 사용합니다. .. 더보기 9일차 : Sencha Touch 2 Model Store Proxy Intro 본격적으로, 서버와의 통신을 위한 지식들을 블로깅 하도록 하겠다. 9일차와 10일차는 model, proxy, store 을 활용해서 어떻게 화면에 보이게 되는지에 대해서 공부를 하게 될 것이다. 먼저 model, proxy, store 이 뭔지 부터 알아보자! 1. Definition Model : model 은 센차를 이용해서 만들어진 app 이 다루게 될, 혹은 나타내게 될 모든 entity 를 이른다. 가령 우리가 옷을 파는 쇼핑몰 app 을 만들 경우에 옷에 대한 정보를 Product 라고 한다면 이 안에는 size, price, count, color 등등의 다양한 정보들을 가지고 있을 것이다. 이런 하나 하나 들이 모두 model 로 표현이 된다. Store : model 들의 실.. 더보기 HW5 : Sencha Touch 2 이벤트를 활용해서 버튼이 사라졌다가 버튼이 나오게 하기 (지난 시간 블로깅 못한거ㅠㅠ)지난 시간 과제에 이어 이번 시간은! 지난번 과제에서 만든 버튼들이 격자 무늬로 있는 Panel 을 활용하는 과제 입니다. part 1 버튼 사라지기버튼들 중 아무거나 하나 선택하면 1번 버튼 부터 끝번 버튼까지 차례로 사라집니다. 이 때 사라지는 간격은 등 간격(저는 0,4 초) 이어야 합니다.아래 사진은 사라지는 중일 때 모습을 캡쳐한 것입니다. part 2 버튼 나타나기마지막 버튼이 사라지고 나서 다시 같은시간(0.4초) 이 흐른 뒤 다시 사라진 버튼들이 나타나기 시작해야 합니다.그래서 다시 1번 버튼 까지 다 나타나고 나면 1번 button 의 id 혹은 text 를 출력해야 합니다. show(), hide() 메소드를 활용해야 합니다.show, hide 이벤트도 활.. 더보기 8일차 : Sencha Touch 2 Floating Components Intro 가령 화면에 꽉 차지 않고, 화면의 일부를 차지하는 형태로 components 들을 보여주고 싶을 때가 있다. 즉, 배경 백그라운드가 있고 그 위에 components 가 떠 있는 효과를 내고 싶을 때 쓴다. 이는 세 가지 형태로 나타나는데 아래와 같다.- center any component on the screen : 화면의 정 가운데 나타내기- absolutely position it on the screen (just like CSS) : 절대 위치를 잡아줘서 화면에 표현하기- or show it by another component : 다른 컴포넌트에 의해 보이기??!! (showBy) 1. Centering a Component : 컴포넌트를 가운데 두기 Select CodeExt... 더보기 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) 에서 뭔가 작업을 해 줘야 합니다. 이번 과제는 이 부분에서 어떻게 코드를 넣는지가 핵심 입니다.. 더보기 이전 1 2 다음
