반응형
블로그 이미지
개발자로서 현장에서 일하면서 새로 접하는 기술들이나 알게된 정보 등을 정리하기 위한 블로그입니다. 운 좋게 미국에서 큰 회사들의 프로젝트에서 컬설턴트로 일하고 있어서 새로운 기술들을 접할 기회가 많이 있습니다. 미국의 IT 프로젝트에서 사용되는 툴들에 대해 많은 분들과 정보를 공유하고 싶습니다.
솔웅

최근에 올라온 글

최근에 달린 댓글

최근에 받은 트랙백

글 보관함

카테고리


반응형
Posted on . Written by


새로나온 NOOK HD 와 NOOK HD+ 와 관련한 업데이트 내용을 알려드립니다. 이 두개의 더 높아진 해상도에 맞게 여러분의 Corona apps를 개발하려면 무엇을 해야 하는지도 알려드릴거구요. 


우선 여러분의 앱을 resubmit 하셔야 합니다. deadline은 10월 15일 까지 입니다. 여러분이 여러분의 앱을 새로운 11월달에 나올 새로운  NOOK HD에서  Storefront에 올려지기를 희망한다면 말이죠. NOOK 개발자가 저희들에게 말하기를 모든 NOOK 개발자들이 새로운 디바이스에 올려질 수 있게 모든 앱을 resubmit 해 주기를 바란다고 하더군요. 그리고 이전의 NOOK device 보다 새로운 device 의 인터페이스가 훨씬 더 좋아졌다고 얘기 했습니다.


두번째로는 여러분이 content scaling을 사용했을 경우는 이미 새로운 NOOK에서도 자동으로 맞춰져서 앱이 가동될 거라는 겁니다. 사실은 NOOK team 이 저희들에게 다른 앱들보다도 코로나 앱에 대해 거의 추가 작업을 하지 않을 수 있도록 작업을 했다고 얘기 했었습니다. 왜냐하면 코로나 앱은 이미 여러 스크린 사이즈나 여러 해상도에서 작동할 수 있도록 하는 로직이 이미 잘 되 있기 때문이죠.

 

여러분이 resubmit 할 때는 daily build 925 이후의 버전을 사용해 주세요.




그 이전 버전에서 빌드하게 되면 새로운 NOOK 에서는 작동을 하지 않는 이슈가 있습니다. 이전에는 이슈되는 사안이 아니었었는데 NOOK 측에서 일부 key API에 변화를 주었거든요. 이러한 이슈가 다시 발생하지 않도록 저희들은 같이 작업을 하고 있습니다.


보다 중요한 것은 저희들이 NOOK HD 의 Prototype을 받았고 daily build 에서 quick test를 이미 완료 했습니다.


지금까지 찾은 것은 작은 이슈 한가지 뿐입니다. 이 이슈는 OpenGL-based apps 에 영향을 미치는데요. (그냥 Corona로만 돼 있는 앱은 지장이 없습니다.) 이 이슈와 관련해서 이미 NOOK team 에게 알려줬습니다. 이 이슈는 아주 간헐적으로 나타나는데요 static content가 display 될 때만 일어납니다. 때때로 앱이 suspended 상태에서 resume 상태로 바뀔 때 blank 화면을 볼 때가 있습니다. 


현재 NOOK Developer team 으로부터 그에 대한 feedback을 기다리고 있는 상황입니다. 그 동안 여러분의 앱이 resume 할 때 static 이라면 지금 새로 빌드해서 submit 하시기를 바랍니다. 약간의 트릭인데요 resume 한 이후에 한번 더 display 해 주는 방법으로 해결할 수 있습니다.


-- Workaround for Nook HD bug
local listener = function( event )
if "applicationResume" == event.type then
display.currentStage.alpha = 0.9

-- Force invalidate 1 second after resume
timer.performWithDelay( 1000, function()
display.currentStage.alpha = 1.0
end)
end
end
Runtime:addEventListener( "system", listener )



반응형


반응형
Replace two events by a single


요 전 글에서 두개의 이벤트를 생성했죠? 글자 색(changecolor) 바꾸는 거랑 배경색(changebackgroundcolor) 바꾸는 거요.

이 두개의 이벤트를 changecolors event라는 하나의 이벤트를 call 해서 사용하도록 할 수 있습니다. 각 이벤트 마다 하나씩의 색을 전달하는 대신 두개의 파라미터에 두개의 색이 한번에 전달 되야겠죠.



New setColor () method managing changecolors event


setColors : function (color, backgroundcolor)

{

  var $elem = this.element;

      

  if (color != this.options.color || 

      backgroundcolor != this.options.backgroundColor) 

    $elem.trigger ("changecolors", [color, backgroundcolor]);

      

  this.options.color = color;

  this.options.backgroundColor = backgroundcolor;

  $elem.css ( { "background-color" : this.options.backgroundColor, 

                color : this.options.color } );

},



Taking account of the changecolors event


$("#plug1").bind ("changecolors", function (event, color, backgroundcolor)

{

  alert ("changecolors : \n" + "color = " + color + 

         "\n backgroundcolor = " + backgroundcolor);

});



이것을 처리하는 메소드는 이벤트 파라미터로부터  colorbackgroundcolor 이렇게 두개의 파라미터를 받습니다.

다른식으로 작성할 수도 있습니다. color and backgroundcolor properties 들을 포함한 객체를 만들어서 single parameter로 전달할 수도 있죠.



color and backgroundcolor transmitted in an object


setColors : function (color, backgroundcolor)

{

  var $elem = this.element;

      

  if (color != this.options.color || 

      backgroundcolor != this.options.backgroundColor) 

    $elem.trigger ("changecolors", 

         [ { color : color, backgroundcolor : backgroundcolor } ]);

      

  this.options.color = color;

  this.options.backgroundColor = backgroundcolor;

  $elem.css ( { "background-color" : this.options.backgroundColor, 

                color : this.options.color } );

},



여기서 전달된 객체에는 color and backgroundcolor properties 두 개가 있습니다.



Taking account of the event changecolors


$("#plug1").bind ("changecolors", function (event, colors)

{

  alert ("changecolors : \n" + "color = " + colors.color + 

         "\n backgroundcolor = " + colors.backgroundcolor);

});






Components already defined in jQuery Mobile


지금까지 여러분의 컴포넌트를 생성하는 방법을 보았습니다. jQuery Mobile에서도 이런 식으로 이미 만들어져 있는 컴포넌트들이 있는데요. 이 컴포넌트들은 여러분들이 쉽게 사용하실 수 있습니다.


아래 몇개의 샘플이 있는데 이 외에도 많이 있습니다.


Standard components of jQuery Mobile


Name

Signification

page

Windows management in the page

checkboxradio

Checkboxes and radio buttons management

textinput

Input texts management

selectmenu

Select menus management

button

Buttons management

slider

Sliders management

collapsible

Accordion menus management

listview

Listviews management

dialog

Overlapped windows management

navbar

Navigation bars management



나중에 다룰 컴퍼넌트들이 있는데요. 이러한 컴퍼넌트들은 각각 생성할 때 create event가 만들어 집니다. : pagecreate, checkboxradiocreate, etc..


이 각각의 컴포넌트들은 자신의 _create () method를 정의합니다. 이것들은 DOM tree  안에 새로운 HTML element들을 만들게 되죠. 일반적으로 _create () method 정의 바로 전에 요 전에 우리가 만든 attributes 들 처럼 options object가 정의 됩니다.


selectmenu component 를 만들기 위해 정의 된 options object를 보세요.



Definition of options in selectmenu component of jQuery Mobile


$.widget( "mobile.selectmenu", $.mobile.widget, {
    options: {
        theme: null,
        disabled: false,
        icon: 'arrow-d',
        iconpos: 'right',
        inline: null,
        corners: true,
        shadow: true,
        iconshadow: true,
        menuPageTheme: 'b',
        overlayTheme: 'a',
        hidePlaceholderMenuItems: true,
        closeText: 'Close',
        nativeMenu: true,
        initSelector: "select:not(:jqmData(role='slider'))"
    },



HTML 안에 컴포넌트와 연결된 element 의 attribute 들과 이 option들이 연결돼 있다는 걸 보셨었죠? 그 의미는 뭐냐 하면 HTML 의 <select> element와 관련해서 data-theme, data-disabled, data-icon, 등을 사용할 수 있다는 걸 말합니다. 디폴트 값들은 jQuery Mobile 코드 안에 object 정의 부분에 정해져 있습니다.



반응형


반응형
Create and manage events on the component



컴포넌트 안에 새로운 이벤트를 생성할 수 있습니다.  컴포넌트와 연관된 엘리먼트에서 간단하게 trigger (eventName) method 만 call 해 주면 됩니다. 이 메소드는 jQuery 의 standard 메소드 입니다. 그 이벤트는 jQuery 에서 bind () method를 사용해서 manage 될 겁니다.


예를 들어 글자색이 바뀌고 배경색이 바뀌는 두개의 이벤트를 생성할 수 있습니다. (changecolor event, changebackgroundcolor event)


이 이벤트가 발생해서 글자색과 배경색이 바뀌면 setColor () method 부분을 alter 해야 합니다.

우선 컴퍼넌트 부분을 볼까요.



Trigger an event when the color changes


(function ($, undefined )

{

  // component definition

  $.widget ("mobile.myplugin", $.mobile.widget, 

  {

    options : {

      backgroundColor : "grey",

      color : "blue"

    },

    _create: function () 

    {

      var $elem = this.element;

      $elem.css ( { "background-color" : this.options.backgroundColor, 

                    color : this.options.color } );

    },

    show : function ()

    {

      var $elem = this.element;

      $elem.show ();

    },

    hide : function ()

    {

      var $elem = this.element;

      $elem.hide ();

    },

    setColors : function (color, backgroundcolor)

    {

      var $elem = this.element;

    

      if (color != this.options.color) 

        $elem.trigger ("changecolor", [color]);

      if (backgroundcolor != this.options.backgroundColor) 

        $elem.trigger ("changebackgroundcolor", [backgroundcolor]);

  

      this.options.color = color;

      this.options.backgroundColor = backgroundcolor;

      $elem.css ( { "background-color" : this.options.backgroundColor,

                    color : this.options.color } );

    },

    getColors : function ()

    {

      return { color : this.options.color, 

               backgroundColor : this.options.backgroundColor };

    }

  });

  // taking into account of the component when creating the window

  // or at the create event

  $(document).bind ("pagecreate create", function (e) 

  

    $(":jqmData(role=myplugin)", e.target).myplugin ();

  });

}) (jQuery);



trigger () method 는 첫번째 파라미터로 생성된 이벤트의 이름을 갖습니다. 그리고 두번째 파라미터로는 이벤트에 전달 될 내용을 배열로 갖습니다. (여기서는 [color] 와  [backgroundcolor]입니다.)


이 이벤트는 아래와 같이 자바스크립트에서 handle 될 수 있습니다.



Taking account of the event


<!DOCTYPE html>

<html> 

<head> 

  <meta name=viewport content="user-scalable=no,width=device-width" />

  <link rel=stylesheet href=jquery.mobile/jquery.mobile.css />

  <script src=jquery.js></script>

  <script src=jquery.mobile/jquery.mobile.js></script>

  <script src=jquery.mobile/myplugin.js></script>

</head> 

<body> 

<div data-role=page id=home>

  <div data-role=header>

    <h1>Home</h1>

  </div>

  <div data-role=content>

    <p> Window content </p>  

    <div id=plug1 data-role=myplugin> 

      <p>This is my component</p>

    </div>

  </div>

</div>

</body>

</html>

<script>

$("#plug1").bind ("myplugincreate", function ()

{

  $(this).myplugin ("setColors", "white", "gainsboro");

  var colors = $(this).myplugin ("getColors");

  alert ("color = " + colors.color + 

         "\n backgroundColor = " + colors.backgroundColor);

});

$("#plug1").bind ("changecolor", function (event, color)

{

  alert ("changecolor : " + color);

});

$("#plug1").bind ("changebackgroundcolor", function (event, backgroundcolor)

{

  alert ("changebackgroundcolor : " + backgroundcolor);

});

</script>







convention10.html


myplugin3.js


반응형