HTML52012. 4. 4. 00:14

[Sencha Touch2] 이제 태블릿피씨로도 어느곳에서나 센차터치를 공부해보자.

웹에서 Sencha Touch를 개발해볼 수 있는 환경을 제공해주네요.

유용한 것 같습니다.

 

 

http://www.senchafiddle.com/

'HTML5' 카테고리의 다른 글

다양한 Javascript Lib 소개  (0) 2012.08.02
[Sencha Touch2] MitchellSimoens Touch Grid..  (2) 2012.04.04
[Sencha Touch2] Store 기반 개발 시 load할 때 param을 넘기는 방법  (0) 2012.03.27
Sencha Touch 2 RC 버젼에서 변경된 점  (0) 2012.03.02
HTML5 Canvas와 Javascript를 이용한 공사표시 아이콘 그리기  (0) 2012.02.24
Posted by 미랭군
HTML52012. 3. 27. 23:35

[Sencha Touch2] Store 기반 개발 시 load할 때 param을 넘기는 방법

 

var poohstore = Ext.getStore("PoohStore");
  
poohstore.getProxy().setExtraParams({
    POOH_PARAM1: value
});

 

//아래와 같은 방법으로도 가능은 하나 비추

//poohstore.getProxy().setUrl(http://~.action?param=xxx);

 

poohstore.load(...);


 

위와 같이 extraParams를 통해서 전달하면 된다.

 

하지만 이걸 쓸 땐 Tomcat Setting을 변경해줘야 한다.

 

테스트해본 결과 type을 json으로 줬는데도 불구하고 GET방식으로 요청을 넘기는 듯 하다.

 

GET은 URI기반으로 parameter를 넘기기 때문에 URI를 encoding해줘야한다.

 

sever.xml에서 connector 콘피그 내에 URIEncoding="UTF-8"로 변경해주면 한글이 깨지지 않는다.

 

받는 쪽에선 request.getParameter("POOH_PARAM1")으로 받아서 쓰면 된다.

 

이상 끗.

 

'HTML5' 카테고리의 다른 글

[Sencha Touch2] MitchellSimoens Touch Grid..  (2) 2012.04.04
[Sencha Touch2] 이제 태블릿피씨로도 어느곳에서나 센차터치를 공부해보자.  (0) 2012.04.04
Sencha Touch 2 RC 버젼에서 변경된 점  (0) 2012.03.02
HTML5 Canvas와 Javascript를 이용한 공사표시 아이콘 그리기  (0) 2012.02.24
HTML5 관련 사이트 정리  (0) 2012.02.22
Posted by 미랭군
HTML52012. 3. 2. 15:47

Sencha Touch 2 RC 버젼에서 변경된 점


1. 프레임워크 로딩 부분이 변경되었습니다.

2. views, models, stores 구성 옵션
이전 버전에서는 각 컨트롤러에서 views, models, stores 구성 옵션을 정의하였는데, RC 버전에서는 app.js에 모두 정의하도록 변경되었습니다. 물론 컨트롤러에서도 정의할 수 있는데, Sencha Touch 개발 팀에서 각 컨트롤러에 정의하면 컨트롤러가 뷰와 모델에 종속된다고 해서 될 수 있다면 app.js에서 정의하도록 권장하고 있습니다. 또한 getXXXView() 메소드와 getXXXModel() 메소드, getXXXStore() 메소드는 자동적으로 생성되지 않습니다. 컨트롤러의 refs 구성 옵션으로 별도로 정의하셔야 합니다.

3. Controller 참조 얻기
이전 버전에서는 this.getController() 메소드를 사용하였으나, RC 버전에서는 this.getApplication().getController() 메소드를 사용해야 합니다.

4. Controller 클래스 작성시 변경 사항
1) refs 구성 옵션은 더이상 배열([ ])이 아닙니다. 객체({})로 정의해야하며 refName: {...} 구성 옵션들을 가질 수 있습니다. getRefName() 메소드가 생성되는 것은 동일합니다.

5. View 클래스 작성시 변경 사항
1) requires 구성 옵션으로 로딩이 필요한 클래스를 지정합니다.
2) xtype을 반드시 명시하셔야 합니다.
3) 컨트롤러의 refs 속성을 위해 id 가 반드시 있어야 합니다.
4) navigationbar가 titlebar로 변경되었습니다.

'HTML5' 카테고리의 다른 글

[Sencha Touch2] MitchellSimoens Touch Grid..  (2) 2012.04.04
[Sencha Touch2] 이제 태블릿피씨로도 어느곳에서나 센차터치를 공부해보자.  (0) 2012.04.04
[Sencha Touch2] Store 기반 개발 시 load할 때 param을 넘기는 방법  (0) 2012.03.27
HTML5 Canvas와 Javascript를 이용한 공사표시 아이콘 그리기  (0) 2012.02.24
HTML5 관련 사이트 정리  (0) 2012.02.22
Posted by 미랭군
HTML52012. 2. 24. 13:22

HTML5 Canvas와 Javascript를 이용한 공사표시 아이콘 그리기

요 근래 들어 HTML5가 핫이슈인 것 같긴 하다.

FLEX를 주력으로 했으나..확실히 글로벌 트랜드라는 큰 흐름에는 어쩔 수 없는 듯하여..

요새 나도 조금씩 HTML5에 손대고 있는 중이다.

뭐 크게 달라진 것은 없는 듯 하다..

Flash에서 stage에 Sprite객체를 addchild해서 ActionScript3로 된  graphics객체로 그림을 그리는 거나..

HTML5에서 canvas 태그에 js에서 확장된 api로 그림을 그리는 거나..

허나 AS3를 접한 상태서 js를 다시 하려니 뭔가 기술적 퇴보가 느껴지는 건 어쩔 수 없는 부분이다..

 <!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title> HTML5 Document </title>
  <script type="text/javascript">
   window.addEventListener("load", eventWindowLoaded, false);

   var Debugger = function() {};

   Debugger.log = function(message) {
    try{
     console.log(message);
    }catch(exception){
     return;
    }
   }

   function eventWindowLoaded()
   {
    canvasApp();
   }
   
   var theCanvas;

   function canvasApp()
   {
    theCanvas = document.getElementById("canvasOne");

    if(!theCanvas || !theCanvas.getContext){
     return;
    }

    drawScreen();
   }

   var canvasWidth = 200;
   var canvasHeight = 267;
   var width = 125;
   var height = 105;
   var padding = 25;
   var lineWidth = 8;
   var innerBorder = 5;
   var primaryColor = "#ffc821";
   var secondaryColor = "#faf100";
   var tertiaryColor = "#dcaa09";

   function drawScreen()
   {
    var context = theCanvas.getContext("2d");

    var width = 125;
    var height = 100;
    var padding = 20;

    // Create a triangluar path
    context.beginPath();
    context.moveTo(padding + width/2, padding);
    context.lineTo(padding + width, height + padding);
    context.lineTo(padding, height + padding);
    context.closePath();

    // Create fill gradient
    var gradient = context.createLinearGradient(0,0,0,height);
    gradient.addColorStop(0, primaryColor);
    gradient.addColorStop(1, secondaryColor);
     
    // Add a shadow around the object
    context.shadowBlur = 10;
    context.shadowColor = "black";
     
    // Stroke the outer outline
    context.lineWidth = lineWidth * 2;
    context.lineJoin = "round"; 
    context.strokeStyle = gradient;
    context.stroke();
     
    // Turn off the shadow, or all future fills will have shadows
    context.shadowColor = "transparent";
     
    // Fill the path
    context.fillStyle = gradient;
    context.fill();
    
    // Add a horizon reflection with a gradient to transparent
    gradient=context.createLinearGradient(0,padding,0,padding+height);
    gradient.addColorStop(0, "transparent");
    gradient.addColorStop(0.5, "transparent");
    gradient.addColorStop(0.5, tertiaryColor);
    gradient.addColorStop(1, secondaryColor);
    
    context.fillStyle = gradient;
    context.fill();
     
    // Stroke the inner outline
    context.lineWidth = lineWidth;
    context.lineJoin = "round"; 
    context.strokeStyle = "#333";
    context.stroke();
    
    // Draw the text exclamation point
    context.textAlign = "center";
    context.textBaseline = "middle";
    context.font = "bold 60px 'Times New Roman', Times, serif";
    context.fillStyle = "#333";

    try{
     context.fillText("!", padding + width/2, padding + height/1.5);
    }catch(ex){}
   }
  </script>
 </head>
 <body>
  <canvas id="canvasOne" width="165" height="165">
   Your browser does not support HTML5 Canvas
  </canvas>
 </body>
</html>


'HTML5' 카테고리의 다른 글

[Sencha Touch2] MitchellSimoens Touch Grid..  (2) 2012.04.04
[Sencha Touch2] 이제 태블릿피씨로도 어느곳에서나 센차터치를 공부해보자.  (0) 2012.04.04
[Sencha Touch2] Store 기반 개발 시 load할 때 param을 넘기는 방법  (0) 2012.03.27
Sencha Touch 2 RC 버젼에서 변경된 점  (0) 2012.03.02
HTML5 관련 사이트 정리  (0) 2012.02.22
Posted by 미랭군
HTML52012. 2. 22. 13:17

HTML5 관련 사이트 정리


Server Side Javascript - node.js
  link1: http://kimddochi.tistory.com/entry/nodejs-nodeJs란-hello-world
  link2: http://blog.outsider.ne.kr/category/node.js

HTML5 IDE - Adobe Edge, Aptana studio 3 or Eclipse plug-in, Appspresso

M/M Grid - SlickGrid
  link1: http://jquerystyle.com/2010/09/02/slickgrid
  link2: http://nextgensim.info/grids

Default js lib - JQuery Mobile, Sencha Touch and JQTouch
 
  * SVG lib Sencha에 포함됨
  link1: http://raphaeljs.com/icons/#feed
  * 전자정부 모바일 프레임웍
  link2: http://www.egovframe.go.kr/html/egovframework/mbl/mguide/mguide.html
  * Flex개발자를 위한 Sencha Guide
  link3: http://pages.sencha.com/flex-to-sencha.html
  * JQuery - 심플하면서도 가벼움 plug-in 방식
  link4: http://jquery.com/
 * JQTouch는 위에 두 lib에 비해 뒤쳐짐
  link5: http://www.jqtouch.com/

Brower별 HTML5 호환성 정보
  link1: http://www.findmebyip.com/litmus

자체 결론

Native App 개발 시 Sencha Touch 유리
Mobile 개발 시 JQuery Mobile 유리

'HTML5' 카테고리의 다른 글

[Sencha Touch2] MitchellSimoens Touch Grid..  (2) 2012.04.04
[Sencha Touch2] 이제 태블릿피씨로도 어느곳에서나 센차터치를 공부해보자.  (0) 2012.04.04
[Sencha Touch2] Store 기반 개발 시 load할 때 param을 넘기는 방법  (0) 2012.03.27
Sencha Touch 2 RC 버젼에서 변경된 점  (0) 2012.03.02
HTML5 Canvas와 Javascript를 이용한 공사표시 아이콘 그리기  (0) 2012.02.24
Posted by 미랭군

티스토리툴바