3. Sencha Touch – 데이터 뷰 처리 (1) Ext.data.Store – ajax Store 객체가 데이터를 관리하기 위해서는 model 과 proxy 를 정의해야만 한다. Data 가 추가되거나 삭제되면 Store 객체에 반영이 된다. [예제] ajax 타입 Proxy 와 Myapp.Phone 이라는 모델을 갖는 Store 정의 var phoneStore = Ext.create(“Ext.data.Store”, { model: “MyApp.Phone”, proxy: { type: “ajax”, url: “05_xml_data.jsp”, […]
3. Sencha Touch – 데이터 처리 (1) Ext.data.Model ext.data.model 클래스를 상속받아 클래스를 만들고 fields 값을 지정하여 데이터 구조 형태로 사용할 수 있다 Ext.define(“MyApp.User”, { extend: “Ext.data.Model”, config: { fields: [ “name”, “age”, “phone” ] } }); (2) Panel 에서 Ext.XTemplate Ext.data.model 에 정의된 데이터를 미리 정의된 탬플릿을 활용하여 데이터를 출력할 수 있다. [예제] […]
3. Sencha Touch – MVC (1) xType Ext.Create 가 즉시 객체가 생성되는 것과 달리 xtype 은 Root Container 에 추가되는 시점에서 객체가 생성이 된다. 이는 메모리의 관리라는 측면에서 이점이 될수 있다. 또 당연하게도 xtype 객체는 정의된 하나의 객체로 복수의 객체를 생성할수 있다. [예제] X-Type 객체의 생성과 Ext.Create 와의 차이 비교 var panel1 = Ext.create(“Ext.Panel”,{ […]
4. Sencha Touch – MVC (1) sencha MVC ? MVC 구조로 개발할수 있는 아키택쳐를 제공한다. HTML은 하나 모델과 컨트롤은 JS 파일로 이루어 진다. (2) 준비하기 가) Senchaa cmd 설치 – 설치부분 내용 참조 나) Sencha Cmd 사용하기 – CMD 도스 창으로 이동하기 – sencha 명령어가 정상적으로 실행되는지 확인 – Sencha FrameWork 을 설치한 […]
2. Sencha Touch – Layout (1) Layout layout 은 각각의 Container 객체에 layout 항목에 정의할 수 있다. 참조 : http://docs.sencha.com/touch/2.3.1/#!/api/Ext.layout.VBox 문서 경로 : layout > VBox(각각포맷) > configs – type ->vbox : vertical 정렬 ->hbox: horizental 정렬 ->fit : 꽉 채우기 ->card : 교체? – align : 수펴 start : child items are packed […]
1. Sencha Touch – UI 구성 기초 (1) Applicaion 구조 UI 구성은 Ext.appliction 에서 정의되어진다. 아래는 기본적인 application 의 구조이다. – name : Class 명 – requires : 사용하고자 하는 class 를 import 한다. – lauch : 실질적으로 수행하고자 하는 내용을 넣으면 됨 <script type=”text/javascript”> Ext.application({ name: “Myapp”, requires:[], launch: function() { var panel […]
1. Sencha Touch – 시작하기 (1) Sencha Touch? – EXT JS : PC 용 버전으로 Sencha Touch 의 시작이라고 볼수 있다. -> 링크 : http://www.sencha.com/products/extjs/ – Sencha Touch : Javascript 기반으로 HTML5, CSS3 등을 활용하여 MVC 기반으로 개발할수 있도록 지원함 -> 링크 : http://www.sencha.com/products/touch/ (2) Sencha Touch 설치 – Sencha Touch , Sencha Cms, JDK1.7, […]
6. Jquery Mobile 기초 – 테마 (1) 테마의 확장 가) CSS 구조 테마의 확장을 위해서는 기본적으로 css 를 수정하여야 하는데 그전에 jquery-mobile 에서 제공하는 css 파일의 구조를 먼저 알아보자. Jquery-Mobile CSS 는 Swatches와 Structure 로 구성되어 있다. Jquery-Mobile 에서는 아래와 같이 Structure CSS 와 Swatches CSS 를 따로 제공하고 있다. 확장을 위해서 가장 추천하는 방법은 […]
5. Jquery Mobile 기초 – 터치/방향변경 이벤트처리 (1) tab 화면을 터치하는 것을 tab 이벤트로 인식한다. $(“#test_div”).bind(“tap”, function() { alert(“tab action”); }); (2) tab hold 화면을 길게 터치하는 것을 tab 이벤트로 인식한다. $(“#test_div”).bind(“taphold”, function() { alert(“taphold action”); }); (3) swipe 화면을 touch move 하는 이벤트를 말한다. $(“#test_div”).bind(“swipe”, function() { alert(“swipe action”); }); (4) swipe left/right 화면을 […]
5. Jquery Mobile 기초 – 로딩 관련 이벤트처리 (1) mobileinit JqueryMobile JS 가 로딩될때 로딩되는 이벤트로 보통 화면 전환 방식, 로딩 방식 등 기본 세팅과 관련된 이벤트를 처리한다. 자세한 이벤트는 아래의 사이트를 참조한다. – 참조 : http://jquerymobile.com/demos/1.2.0/#/demos/1.2.0/docs/api/globalconfig.html [예제] 아래는 Mobileitit 이벤트에서 로딩Bar 를 Visible 처리 하고, 로딩 메세지를 정의, 화면 전환 방식을 정의하는 코드이다. $(document).bind(“mobileinit”,function(){ […]