본문 바로가기

센차터치2.0

하이브리드 앱 센차터치2.0 - XTemplate 화면구성 1. 개요 XTemplate는 복잡하고 반복적인 데이터 구조를 이용해서 화면 UI를 구성할 때 주로 많이 사용된다. XTemplate의 특징은 자체 연사작와 조건 처리 기능을 가지고 있다는 것이다. 템플릿에 반복문을 처리하기 위한 데이터를 지정하기 위해서는 JSON배열에게 key값을 부여해 주어야 한다. 2. 구성 - JSON 데이터 var someData = { array_key: [ {sub_key1: "value1", sub_key2: "value2"}, {sub_key1: "value1", sub_key2: "value2"} ] }; - 사용 예제 var stpl = new Ext.XTemplate( "", // root 노드 부터 접근 // for문 시작 "", "{sub_key1} - {sub.. 더보기
하이브리드 앱 센차터치 2.0 - 데이터 관리 : JsonP 객체 1. 개요 웹 어플리케이션에서 데이터를 요청할 때 주로 같은 도메인에 있는 파일을 호출한다. 그런데 상황에 따라서 도메인이 다르거나 서버가 다른 곳에 데이터를 요청해야 할 때가 있다. 이 때 주로 발생하는 문제가 바로 크로스 도메인 보안 문제이다. 센차터치에서는 이러한 보안 문제를 해결하기 위해 JsonP 객체를 지원한다. 특히 네이티브앱(하이브리드앱)에서 외부 데이터를 Json으로 받기 위해서 지원되는객체이다. 2. 구현 Ext.Loader.setConfig({enabled:true}); Ext.require("Ext.data.JsonP"); Ext.application({ name:"JsonP", launch:function(){ var eventHandler = function(btn,event){.. 더보기
하이브리드 앱 센차터치 2.0 - 데이터 관리 : Store 객체 1. 개요 웹앱은 네트워크의 영향을 많이 받기 때문에 속도에 민감할 수 밖에 없다. 그래서 서버에서 받은 데이터를 클라이언트 측에서 저장하고 관리해야 한다. 또한 웹앱에서 동일한 데이터를 서버에서 재요청하게 되면, 불필요한 트래픽이 발생하기 때문에 캐쉬에 저장되어 있는 데이터를 활용해야 하는데 'Ext.data.Store' 에서 그러한 메커니즘을 제공해 준다. 2. 구현 Ext.require("Ext.data.Store"); Ext.require("Ext.List"); Ext.application({ name:"MyStore", launch: function(){ // 모델에서 관리할 필드정의 Ext.define("User",{ extend: "Ext.data.Model" , config:{ fields.. 더보기
하이브리드 앱 센차터치 2.0 - Object의 xtype 속성 1. 개요 객체를 생성할 때 이미 정의된 객체타입을 "Ext.create()" 메서드를 이용하거나, new 연산자를 이용해서 만드는 방법을 제공하고 있는데, 센차터치에서는 {} 리터럴표기법에 xtype 속성을 이용해서 객체를 생성하는 방법도 제공하고 있다. 2. 구현 Ext.Loader.setConfig({ enabled:true }); Ext.application({ name: "MyXtype", launch: functoin() { var toolBar = { xtype: "toolbar", docked: "top", items:[ { xtype: "button", text: "버튼 1" }, { xtype: "button", text: "버튼 2" }, { xtype: "button", text: .. 더보기
하이브리드 앱 센차터치 2.0 - 슬라이드 애니메이션 1. 개요 이미지 레이아웃을 카드형태 처럼 겹쳐보이게 구성하고, 각 패널과 연관된 버튼을 클릭해서 슬라이드 형태의 애니메이션을 구현 할 수 있다. 2. 구현 Ext.Loader.setConfig({ enabled: true }); Ext.require("Ext.Panel"); Ext..application({ name:"MyAnimation", launch: function(){ var pContainer = Ext.create("Ext.Panel",{ fullScreen: true, layout: { type: "card" }, items: [ // 툴바 버튼 { xtype: "toolbar", docked: "top", defaults: { handler : functoin(){ var num = p.. 더보기
하이브리드 앱 센차터치 2.0 - 탭 패널의 이해 1. 개요 이미지를 배치할 때 각 이미지를 제어할 수 있는 탭을 구성해주는 기능을 제공해준다. 2. 구현 Ext.Loader.setConfig({enabled:true}); Ext.require("Ext.Panel"); Ext.require("Ext.tab.Panel"); Ext.application({ name:"MyApp_tapPanel", launch:function(){ // HomeView 페이지 정의 Ext.define("HomeView",{ extend:"Ext.panel, config:{ title:"HomeView", style:"background-image:url( 'bgimg/bg1.jpg' );", html:"홈 뷰 영역" } }); // LoginView 페이지 정의 Ext.de.. 더보기
하이브리드 앱 센차터치 2.0 - 상속하기 개요 이미 정의되어 있는 부모 클래스의 기능을 그대로 물려받아 기능을 확장하므로써 작업 시간을 단축할 수 있다는 이점이 있다. 센차터치에서도 상속구현이 가능하다. 구현 // 첫번째 방법 Ext.define("MyObject", { //부모클래스 정의 name: null, age: null, loc: null, setName: function( name ) { this.name = name; }, getName: function() { return this.name; }, setAge: function( age ) { this.age = age; }, getAge: function() { return this.age; }, setLoc: function( loc ) { this.loc = loc; }, g.. 더보기
하이브리드 앱 센차터치 2.0 - getter / setter 정의하기 개요 멤버변수를 멤버 함수로 캡슐화 할 때 getter / setter 메서드를 사용한다. 캡슐화는 객체의 자료나 행위 즉 속성이나 로직을 하나로 묶어 데이터를 외부로부터 은익하는데 그 목적이 있다. 실제로 외부에서 접근하기 위해서는 허용된 메서드로만 접근이 가능하다. 이 때 보통 getter / setter 메서드를 이용해서 정보를 사용할 수 있도록 허용한다. 센차터치 그러한 getter / setter 개념을 사용할 수 있는데 두가지 방법을 지원한다. 구현 //첫번째 방법 Ext.define("MyObject", { name: null, age: null, loc:null, setName: function( name ) { this.name = name; }, getName: function() { .. 더보기
하이브리드 앱 센차터치 2.0 - 객체정의 방법 개요 컨텐츠를 제작할 때 객체를 정의해서 생성하는 방법은 아주 중요하다. 특히 객체 지향 방식의 프로그래밍을 해야하는 경우는 필수이기 때문이다. 자바스크립트 프레임워크를 사용하고 있는 센차 터치에서도 객체를 정의하고 생성하는 방법을 제공하고 있다. 어떻게 객체를 정의하는지에 대해서 알아보자. 구현 //객체 정의법 Ext.define("MyObject", { name:null, age:null, //생성자를 통해서 외부에서 현재 객체로 값을 넣어줌. constructor: function( name, age){ this.name = name; this.age = age; }, getName: function(){ return this.name; }. getAge: function(){ return this.. 더보기
하이브리드 앱 센차터치 2.0 - 시작하기 센차터치란? html 기반의 모바일 앱을 쉽게 빠르게 만들 수 있게 해주는 자바스크립트 프레임웍이다. 센차터치로 만든 모바일 앱은 Android, iOS 그리고 블랙베리에서 작동하며 네이티브 앱과 같은 경험을 제공한다. 웹페이지를 이용해서 결제 앱을 만들려면 여러 페이지가 필요로 하는데 센차터치나, 제이쿼리 모바일은 이걸 한 페이지에서 구현가능하게 만들수 있게 해준다. 에이작스를 이용하는 비동기식 작동방식이다. 설치하기 1. 통합개발환경( IDE ) 및 사용툴 - 넷빈 www.netbeans.org - 이클립스 www.eclipse.org/downloads - 센차터치 http://www.sencha.com/ - 앱스프레소 http://appspresso.com 2. 자바 및 넷빈 설치방법 - jdk-7.. 더보기

티스토리툴바