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

최근에 올라온 글

최근에 달린 댓글

최근에 받은 트랙백

글 보관함

카테고리

Ajax 로 selection list 삽입하기

2012. 11. 12. 22:30 | Posted by 솔웅


반응형
Insert a selection list by Ajax



selection list를 Ajax 를 통해 받아서 이것을 window에 insert 하겠습니다.


Retrieve a selection list by Ajax


<!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>

</head> 


<body> 


<div data-role=page id=home>

  <div data-role=header>

    <h1>Home</h1>

  </div>


  <div data-role=content>

    <span> Choose an apartment type: </span>

  </div>

</div>


</body>

</html>


<script>


$.ajax (

  url : "action.php", 

  complete : function (xhr, result)

  {

    if (result != "success") return;

    var response = xhr.responseText;

    $("#home div:jqmData(role=content)").append (response);

    $("select").selectmenu ();

  }

});   


</script>



<select> element. 에 있는 selectmenu () method의 사용법을 잘 보세요. 이 메소드가 오리지널 HTML code를 jQuery Mobile 스럽게 display 하는 HTML 로 변환시키는 일을 합니다. 그리고 버튼을 클릭하면 selection list 가 열릴 겁니다.


action.php file


<?
$html = "";
$html .= "<select data-native-menu=false data-icon=plus data-iconpos=left>";
$html .=   "<option value=1> 1 bedroom </option>";
$html .=   "<option value=2> 2 bedrooms </option>";
$html .=   "<option value=3> 3 bedrooms </option>";
$html .=   "<option value=4> 4 bedrooms </option>";
$html .=   "<option value=5> 5 bedrooms </option>";
$html .= "</select>";
echo utf8_encode ($html);
?>





selectmenu () method를 call 하는 것을 빼면 jQuery Mobile 에 의한 변환은 일어나지 않을 겁니다. 그러면 classic style의 selection list 가 나타나겠죠.




action10.php


tistory463_01.html



반응형


반응형
Turning an HTML element into a jQuery Mobile selection list

다음의 두가지 경우를 생각해 봅시다.

  •  먼저 native display 의 selection list 를 사용하는 경우. 이 경우는 <select> element에 있는 data-native-menu attribute 가 "false" 가 아닙니다.

  •   그 다음 경우는 display 가 non-native를 사용하는 경우. 예를 들어 jQuery Mobile에 의해 좀 더 improve 된 selection list를 display 하는 경우. 이 경우는 data-native-menu attribute 를 "false"로 세팅합니다.


Using the native display selection lists


이전의 예제를 사용하겠습니다.  <select> element description 안에 data-native-menu="false" attribute를 넣습니다.


<select> element without the data attribute-native-menu="false"


<script>

var html = "";

html += "<select>";

html +=   "<option value=1> 1 bedroom </option>";

html +=   "<option value=2> 2 bedrooms </option>";

html +=   "<option value=3> 3 bedrooms </option>";

html +=   "<option value=4> 4 bedrooms </option>";

html +=   "<option value=5> 5 bedrooms </option>";

html += "</select>";


$("#home div:jqmData(role=content)").append (html);


</script>




Firebug로 jQuery Mobile에 의해 만들어진 HTML 은 아래와 같습니다.




original <select> element가 두개의 <div> elements 안에 둘러 쌓여져 있습니다. 하나는 ui-select CSS class 이고 다른 하나는 ui-btn class 입니다. 그것들은 selection list를 open 할 수 있는 window의 버튼으로 표시됩니다. 위의 ui-btn-inner CSS class 가 있는 <span> element는 버튼에 display 된 list안에 선택된 아이템과 연관돼 있습니다.


Using the improved display selection lists


이제 <select> element description에 data-native-menu="false" attribute를 넣어 보겠습니다.


<select> element with the data-native-menu="false" attribute


<script>

var html = "";

html += "<select data-native-menu=false>";

html +=   "<option value=1> 1 bedroom </option>";

html +=   "<option value=2> 2 bedrooms </option>";

html +=   "<option value=3> 3 bedrooms </option>";

html +=   "<option value=4> 4 bedrooms </option>";

html +=   "<option value=5> 5 bedrooms </option>";

html += "</select>";


$("#home div:jqmData(role=content)").append (html);


</script>


tistory462_01.html




 

다음을 제외하고는 위의 예제와 같습니다.


  • ui-btn class 가 있는 <div>는 이제 <a> element 입니다. 그리고 ui-btn class를 가지고 있습니다. 이것은 selection list 를 open 하기 위한 버튼이 됩니다.
  •  ui-selectmenuui-selectmenu-hidden CSS classes 가 있는 <div> element가 다른 element들 다음에 insert 됐습니다. 여기에는 여러 <li> elements를 가지고 있는 <ul> element가 포함돼 있습니다. 이 <div> element는 버튼을 누르면 나올 리스트입니다. 이제 native display 보다 더 style 된 나아진 display 를 보시게 될 겁니다.


ui-selectmenu-hidden class는 리스트가 현재 display 되지 않는 것을 가리킵니다. (이 리스트는 버튼이 클릭 됐을 때 보여질 겁니다.) 이것을 하기 위해 이 클래스는 element 의 topleft CSS properties 를 -9999px로 정의했습니다. 이것은 화면 밖 어딘가에 있을 겁니다. 버튼을 클릭하면 jQuery Mobile 은 이 CSS class를 없앱니다. 그리고 element 이 topleft를 window안에 그 list를 display 합니다.

반응형


반응형

selection list 들은 jQuery Mobile 에 의해서 처리됩니다. jQuery Mobile 은 <select> element 를 사용하고 한개 이상의 <option> elements 를 포함합니다. jQuery 의 standard method들도 jQuery Mobile 에 의해 추가된 selectmenu () method 처럼 유용합니다. selection list들은 standard selectmenu component 와 관계되어 있습니다.




Dynamically create a selection list


selection list를 생성하려면 한개 이상의 <option> elements 를 포함한 <select> element 를 넣으면 됩니다.

value attribute는 <option> elements 의 필수 요소입니다. 이것은 jQuery Mobile 에 의해 리스트의 일 부분으로 간주 됩니다. jQuery Mobile convention 처럼 리스트를 display 한다면 true 입니다. 하지만 그 리스트가 브라우저의 native aspect 로 display 되면 true 가 아닙니다. 이 후의 예제들은 jQuery Mobile에 의해 improve된 non-native로 display 할 겁니다.


Dynamically creating a selection list


<!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>

</head> 


<body> 


<div data-role=page id=home>

  <div data-role=header>

    <h1>Home</h1>

  </div>


  <div data-role=content>

    <span> Choose an apartment type: </span>

  </div>

</div>


</body>

</html>


<script>


var html = "";

html += "<select data-native-menu=false>";

html +=   "<option value=1> 1 bedroom </option>";

html +=   "<option value=2> 2 bedrooms </option>";

html +=   "<option value=3> 3 bedrooms </option>";

html +=   "<option value=4> 4 bedrooms </option>";

html +=   "<option value=5> 5 bedrooms </option>";

html += "</select>";


$("#home div:jqmData(role=content)").append (html);


</script>

tistory461_01.html



이 예제를 실행하면 아래와 같이 보일 겁니다. 버튼을 누르면 리스트가 열릴 겁니다.





반응형

input field 관련 예제들

2012. 11. 10. 06:29 | Posted by 솔웅


반응형
Examples of manipulation of input fields


Communicate the value of an input field on the server by Ajax


이번에 만들 프로그램은 이름을 입력하고 엔터키를 치면 이것이 서버로 전달되고 그 이름이 response 되는 겁니다. 우리는 그 response를 화면에 뿌려 줄 겁니다. 서버와의 커뮤니케이션이 양방향으로 원활히 이루어 지는 것을 보실 수 있을 겁니다.


Transmit by Ajax the name entered


<!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>

</head> 


<body> 


<div data-role=page id=home>

  <div data-role=header>

    <h1>Home</h1>

  </div>


  <div data-role=content>

    <p> Window content </p>

    Name : <input type=text /> <br />

  </div>

</div>


</body>

</html>


<script>


$("input").bind ("change", function (event)

{

  var name = $(this).val ();

  

  $.ajax (

  

    url : "action.php", 

    data : { name : name },

    complete : function (xhr, result)

    {

      if (result != "success") return;

      var response = xhr.responseText;

      $("#home div:jqmData(role=content)").append (response);

    }

  });   

});


</script>



예제를 보시면 change event를 사용해서 서버로 name 을 전달한 것을 보실 수 있습니다. 이 name 이 변경됐을 경우만 server 는 response 할 겁니다. server 는 window에 append (response)를 사용해서 insert 된 것만 response 할 것이기 때문입니다.


action.php file


<?
$name = $_REQUEST["name"];
echo utf8_encode ("<p> The name entered is $name </p>");
?>


이름을 몇개 입력하면 아래와 같은 화면을 보실 수 있을 겁니다.




action8.php

tistory460_01.html


Display the server's response in a new window


response를 받아서 같은 window에 insert 하는 것 보다 새로운 윈도우에 한번 display 해 볼까요.


Display a new window containing the server response


<!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>

</head> 


<body> 


<div data-role=page id=home>

  <div data-role=header>

    <h1>Home</h1>

  </div>


  <div data-role=content>

    <p> Window content 1 </p>

    Name : <input type=text /> <br />

  </div>

</div>


<div data-role=page id=win2 data-add-back-btn=true>

  <div data-role=header>

    <h1>Home</h1>

  </div>


  <div data-role=content>

    <p> Window content 2 </p>

  </div>

</div>


</body>

</html>


<script>


$("input").bind ("change", function (event)

{

  var name = $(this).val ();

  

  $.ajax (

  

    url : "action.php", 

    data : { name : name },

    complete : function (xhr, result)

    {

      if (result != "success") return;

      var response = xhr.responseText;

      $("#win2 div:jqmData(role=content)").append (response);

      $.mobile.changePage ($("#win2"));

    }

  });   

});


</script>



action.php file


<?
$name = $_REQUEST["name"];
echo utf8_encode ("<p> The name entered is $name </p>");
?>


field에 값을 넣고 change event가 나오면 Ajax call 이 만들어지고 두번째 window 가 나타납니다.




action9.php

tistory460_02.html




반응형

Input field 를 customize 하기

2012. 11. 10. 06:12 | Posted by 솔웅


반응형
Customize input fields



Change the appearance of an input field that does not have focus


Firebug 를 이용하면 input fields 가 ui-input-text CSS class를 가지고 있는 것을 확인 할 수 있습니다. 이 클래스는 <input><textarea> elements에 할당 돼 있습니다.  만약 <input> element가 search field 이면 그것을 둘러싼 <div>가 jQuery Mobile에 의해서 생성됩니다.  그리고 ui-input-search CSS class 가 그곳에 할당됩니다.


input fields를 바꾸기 위해 이 CSS classes들을 사용하겠습니다.


Styling input fields


<!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>

  

  <style type=text/css>

    .ui-input-text, .ui-input-search {

      color : white; 

      background-color : black;

    }

  </style>

</head> 


<body> 


<div data-role=page id=home>

  <div data-role=header>

    <h1>Home</h1>

  </div>


  <div data-role=content>

    <p> Window content </p>

    Name : <input type=text value=Sarrion /> <br />

    Description : <textarea> Nice studio for renovation </textarea> <br />

    Search : <input type=search value="Your name" />

  </div>

</div>


</body>

</html>


<script>


</script>

tistory459_01.html






Change the appearance of an input field that has focus


만약 input field에 focus 가 가면 jQuery Mobile은 ui-focus CSS class를 할당합니다.

이 클래스는 다음 element 들에 영향을 미칩니다.

  • on <input> element for a single line input field,

  • on <textarea> element for a multiline input field,

  • on the <div> element surrounding the <input> element for a search field. This <div> element is automatically created by jQuery Mobile.


이전 처럼 이 클래스를 이용해서 focus가 됐을 때 일어날 스타일링을 하실 수 있습니다.


Styling fields that have focus


<!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>

  

  <style type=text/css>

    .ui-focus {

      color : white; 

      background-color : black;

    }

    .ui-input-search.ui-focus > .ui-input-text {

      color : white; 

    }

  </style>

</head> 


<body> 


<div data-role=page id=home>

  <div data-role=header>

    <h1>Home</h1>

  </div>


  <div data-role=content>

    <p> Window content </p>

    Name : <input type=text value=Sarrion /> <br />

    Description : <textarea> Nice studio for renovation </textarea> <br />

    Search : <input type=search value="Your name" />

  </div>

</div>


</body>

</html>


<script>


</script>

tistory459_02.html





반응형


반응형
Manage events on input fields


input field는 standard event들을 receive 합니다. 그리고 jQuery 의 bind () method에 의해서 observe 될 수 있습니다. jQuery Mobile 터치 스크린이든 기존 컴퓨터이든 같은 이벤트 이름을 사용한다는 걸 기억해 두세요.


Events on the input fields


Name

Signification

click

vclick

A click was made in the field.

focus

The field has just won the focus.

blur

The field has lost focus.

change

The field content has changed (detected when the field loses focus).

keyup

A keyboard key was pressed.

keydown

A keyboard key was released.

mousedown

vmousedown

The left mouse button was pressed (or the finger touched the field).

mouseup

vmouseup

The left mouse button was released (or the finger was removed from the screen).



Taking into account of a click in an input field


<!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>

</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>

</div>


</body>

</html>


<script>


var html = "";

html += "Name : <input type=text value='Sarrion' />";

$("#home div:jqmData(role=content)").append (html);


$("input").bind ("vclick", function (event)

{

  alert ("click");

});


</script>


tistory458_01.html




Taking into account of a click in a search field


<!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>

</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>

</div>


</body>

</html>


<script>


var html = "";

html += "Search : <input type=search value='Your name' id=search />";

$("#home div:jqmData(role=content)").append (html);


$("#search").live ("textinputcreate", function (event)

{

  $("#search").bind ("vclick", function (event)

  {

    alert ("click");

  });

});


</script>

tistory458_02.html



이 예제에서는 search field 가 생성될 때 까지 기다려야 합니다. 안 그러면
<input> element 가 사용하는 bind ("vclick" ...)이 실제 bind ()가 실행 될 때 존재하지 않은 상태가 됩니다. search field 의 HTML 이 자바스크립트에 의해서가 아니라  HTML 로 곧바로 insert 될 때도 같은 문제점이 발생합니다. 아래 예제를 보겠습니다.


Search field inserted directly into the HTML


<!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>

</head> 


<body> 


<div data-role=page id=home>

  <div data-role=header>

    <h1>Home</h1>

  </div>


  <div data-role=content>

    <p> Window content </p>  

    Search : <input type=search value="Your name" id=search />

  </div>

</div>


</body>

</html>


<script>


$("#search").live ("textinputcreate", function (event)

{

  $("#search").bind ("vclick", function (event)

  {

    alert ("click");

  });

});


</script>



tistory458_03.html


위에서 설명드렸듯이 textinputcreate event를 다루면서 click event (or vclick)를 연결시키는 것이 핵심입니다. 안 그러면 click 은 연결되지 않을 겁니다.



반응형

input field 에 값 할당하기

2012. 11. 9. 21:40 | Posted by 솔웅


반응형
Assign and retrieve the value in an input field


single line 이나 multiline의 input field 값은 val (value) method에 의해 지정될 수가 있습니다. 그리고 val () method에 의해 recover 될 수 있구요. 이 두 메소드 모두 jQuery methods 입니다.


사람 이름을 넣는 text input field 를 가진 HTML 코드가 있다고 가정합니다. 그리고 description 을 넣기 위해 <textarea> element 가 있고 그리고 search field 가 있습니다.  이 세가지 field들은 default 값으로 초기화 돼 있습니다. 이 값을 JavaScript 로 programmatically 바꾸고자 합니다.


아래 HTML 코드가 있습니다. 그런데 몇몇부분은 제대로 작동하지 않을 겁니다. 그 이유를 살펴 보도록 하죠.


Initialize input fields by JavaScript


<!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>

</head> 


<body> 


<div data-role=page id=home>

  <div data-role=header>

    <h1>Home</h1>

  </div>


  <div data-role=content>

    <p> Window content </p>  

    Name : <input type=text value="Your name" id=text /> <br />

    Description : <textarea> Description </textarea> <br />

    Search : <input type=search value="Your name" id=search />

  </div>

</div>


</body>

</html>


<script>


alert ($("#text").val ("Eric").val ());

alert ($("textarea").val ("Nice studio for renovation").val ());

alert ($("#search").val ("Sarrion").val ());

  

</script>


tistory457_01.html


이 프로그램을 돌리면 3개의 alert 화면을 볼 겁니다.
Eric, Nice studio for renovation, Sarrion라는 글자들을 보실 겁니다. 이 값들은 이 윈도우의 input field 들의 값들입니다. 그런데 search field 만 값이 안 바뀌어 있을 겁니다.




search field 에 Your name 이라는 디폴트값이 있고 Sarrion 이라는 값이 할당되지 않았죠? 여기에서 우리가 알 수 있는 것은 dearch field에 대한 접근법은 다른 input field들과는 좀 다르다는 점 입니다.


One line and multiple lines inputs


val ()val (value) 메소드가 잘 작동하는 것을 위 예제 코드에서 보셨죠?


Assign and then read the value of a <input> element with type="text" attribute


alert ($(":text").val ("Eric").val ());

// Displays: Eric

                          

Selector ":text" is the selector "type = text".


Assign and then read the value of a <textarea> element


alert ($("textarea").val ("Nice studio for renovation").val ());

                           // Displays: Nice studio for renovation


Search field


search field는 좀 복잡합니다. 그리고 search field 에 대해서는 원래의 HTML code 가 jQuery Mobile 에 의해서 수정되게 됩니다.


Assign and then read the value of an <input> element with type="search" attribute (as it does not work!)


alert ($("#search").val ("Sarrion").val ());

                           // Displays: Sarrion


alert 화면에서는 Sarrion 이 표시되는데 실제 화면상에는 디폴트값이 표시됩니다. 그 이유는 간단합니다. val ("Sarrion") instruction이 search field 가 완전히 생성되기 이전에 실행되기 때문입니다. 그러니까 우리가 원하는 대로 하려면 search field 가 생성될 때까지 기다린 후에 그 값을 바꿔줘야 하는겁니다.


이 과정을 이해하는 가장 빠르고 쉬운 방법은 jQuery Mobile 에 의해 바뀌어진 HTML code를 살펴보는 겁니다. (Firefox의 firebug 로 본 화면입니다.)




보시면 single line 과 multiline input field는 CSS class 들이 추가되면서 살짝 바뀌었습니다. 반면에 search field 는 아주 많이 바뀌었죠. <div> element 가 생겼고 거기에 ui-input-search CSS class 가 생겼습니다. 사실 초기의 <input> element 는 새로운 <div> element가 삽입되면서 완전히 새로 생성된 겁니다.



Modify the contents of the search field after its creation


<!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>

</head> 


<body> 


<div data-role=page id=home>

  <div data-role=header>

    <h1>Home</h1>

  </div>


  <div data-role=content>

    <p> Window content </p>  

    Name : <input type=text value="Your name" id=text /> <br />

    Description : <textarea> Description </textarea> <br />

    Search : <input type=search value="Your name" id=search />

  </div>

</div>


</body>

</html>


<script>


alert ($("#text").val ("Eric").val ());

alert ($("textarea").val ("Nice studio for renovation").val ());


$("#search").live ("textinputcreate", function (event)

{

  alert ($("#search").val ("Sarrion").val ());

});


</script>


tistory457_02.html


search field와 연계된
<input> element는 bind ()가 아니라 live () method에 의해 observe 되어야 합니다.  <input> element는 textinputcreate event가 완전히 set 된 후에 그 이벤트를 receive 할 수 있습니다. 이 element은 jQuery Mobile 에 의해 생성 될 거구요.

live () jQuery method는 DOM tree 안에 있는 미래의 element에 대한 이벤트를 가리키는데 주로 사용됩니다. bind () method는 현재 존재하는 아이템들에 대해서 사용되구요.


이제 search field 도 할당된 값으로 화면에 표시될 겁니다.






반응형


반응형

Posted on

. Written by



오늘 Electronic Arts (EA)사가 Word Smack game을 새로 개발해서 출시했다는 소식을 기쁘게 알려드립니다. 바로 모두가 좋아하는 cross-platform development platform으로 개발을 한 게임입니다. 예 맞습니다. 세계에서 가장 큰 게임 개발사 중의 하나인 EA 사가 코로나로 게임을 개발해서 출시했습니다.




Corona team 은 good guessing game 을 사랑합니다. EA의 Word Smack 는 정말 짱이구요. 두개의 유명한 보드 게임을 합쳐놓은 것 같아요. Mastermind 하고 Scrabble 요. Word Smack 는 2인용 게임이구요. 3라운드에 5 글자의 단어를 맞추는 거예요. 처음 게임을 시작하면 보드에 글자가 보일 겁니다. 그러면 나머지 칸을 여러분이 다른 글자로 채워 넣는 거예요.



너무 쉽게 생각하지 마세요. 만만치 않아요. 고맙게도 Word Smack 은 오른쪽에 살짝 힌트를 제공해 줘요. 만약에 맞는 글자(알파벳)인데 칸을 다른 곳에 넣었다면 이것을 알 수 있게 해주죠. Facebook integration은 친구들끼리 시합을 할 수도 있게 해 줍니다. 그리고 random 하게 상대방을 골라서 게임을 할 수도 있구요. 상대편 보다 단어를 더 빨리 맞추면 되는 겁니다.





word game 을 좋아하는 분들을 위해 power up 기능을 구입할 수도 있습니다. power up 은 word synonym들을 제공합니다. Word Smack 은 바로 오늘 출시 됐습니다. 

App Store에서 지금 당장 free 버전을 다운 받아 보세요.



반응형

새 위젯 사용하기 Part 1

2012. 11. 8. 21:44 | Posted by 솔웅


반응형

Posted on . Written by


만약 여러분이 Corona Indie 나 Pro 의 등록자라면 daily builds 를 다운 받아서 사용하실 수 있으실 겁니다. 그리고 Build 947 에 new widgets 들이 포함된 내용도 전달 받으셨을 겁니다. 이 포함된 widget들은 아래 사항들을 포함하고 있습니다.


  • switch — in the form of a radio button, checkbox, or “on/off” slider.
  • segmented control — a “segmented button” in which each segment responds individually.


이 새 위젯들은 일반적인 특성을 따르고 있습니다. 각 위젯들은 새로운 widget library foundation 을 바탕으로 추가 돼 좀 더 flexible 하고 essentially 합니다.


Patience Please!



이 새 위젯들은 widget library 의 개선해 나가는 것들 중의 일부입니다. 더 많은 widget들이 다음주에 더 새로운 모습으로 소개 될 겁니다. 그 각각에 대해 cover 할 수 있도록 tutorial 을 작성해 드릴겁니다. 지난 widget들과 비교하면 거의 새로운 기반하에서 새롭게 작성되어야 할 정도로 많은 변화가 있었습니다. 여러분들은 아직까지 이전 위젯들을 사용하고 계실 건데요. 이전 위젯들에 대해서는 중요한 버그들에 대한 수정만 해 나갈 것이고 그 기능에 대한 개선이나 변경은 없을 겁니다. 이번주 다음주에 발표할 새로운 위젯들이 기존의 위젯들을 대신해 나가도록 진행할 계획입니다.


이 글은 native iOS visual theme 에 대해 설명드립니다. Android theme 은 다음번 daily build 에서 추가될 겁니다. 물론 굳이 이 주어진 visual theme만 사용할 수 있는 건 아닙니다. 여러분들 나람대로 스타일링해서 위젯들을 customizing 해서 사용하실 수 있습니다.



Getting Started…


새 위젯들을 경험하기 위해 우선 새로운 project 부터 만듭니다.



1. “require” the widget library


Just like with many Corona libraries, you’ll need to “require” the widget library to use widgets:

다른 많은 Corona library들과 같이 widget을 사용하기 위해서는 widget library 를 require 합니다.


local widget = require( "widget" )

2. Copy theme file and assets



모든 widget들은 디폴트로 Lua file 이름에서 theme 정보를 가져옵니다. theme_ios.lua or (coming soon) theme_android.lua 가 그 파일 이름입니다. 이미지 파일들은 이 파일에서 정한 폴더에서 가져오게 됩니다. 위젯들은 custom theme file 을 세팅함으로서 스타일링할 수 있고 이미지 세트들도 생성할 수 있습니다. 이런 부분들은 약간 고급 기술 부분인데요. 나중에 이런 고급 기술 부분에 대해서 따로 다루도록 하겠습니다.


일단 default theme file과 asset folder를 여러분의 main project 디렉토리에 카피해 넣으세요. 이름은 theme_ios.lua and widget_ios가 될 겁니다.  이 파일들은 아래 경로로 가면 찾을 수 있습니다. 또는 이곳에서 다운로드 받으실 수도 있습니다.



CoronaSDK > SampleCode > Interface > WidgetDemo




3. Declare the theme using “setTheme()”


widget library 를 require 한 후 그 다음줄에 theme 을 정의해야 합니다.

아래 예제를 참조하세요. 처음부터 새로 만드실 필요는 없고 샘플로 드린 파일을

수정하셔서 사용하시면 편리하실 겁니다.


widget.setTheme( "theme_ios" )

NOTE:  Do not  append .lua to the reference passed to widget.setTheme().



Widget #1: Switch


첫번쨰로 선보일 새로운 widget 은 switch widget 입니다. 이 위젯은 세가지 종류가 있습니다.
checkbox, radio button, or on/off slider




Event Listener



이 위젯에 유저가 어떤 행위를 했을 때 이를 감지할 basic listener function를 생성하셔야 합니다. 이 섹션에서 사용할 샘플 리스너를 한들어 보죠.

아래 예제를 여러분 파일에 복사해 넣으세요.


local function onSwitchPress( event )
   local switch = event.target --event.target references the switch object
   local response = switch.id.." is on: "..tostring( switch.isOn )
   print( response )
   switch.text:setText( tostring( switch.isOn ) )
end


switch의 현 상태는 .isOn parameter에 의해 참조됩니다. 여러분은 이 프로퍼티를 사용해서 현재의 switch 상태를 파악할 수 있습니다. true 이면 selected 나 on 인 상태이구요. false 이면 off 나 deselected 상태입니다.



Checkbox



checkbox switch widget을 생성하려면 아래와 같이 하세요.


local checkbox = widget.newSwitch
{
   left = 60,
   top = 230,
   style = "checkbox",
   id = "My checkbox widget",
   initialSwitchState = false,
   onPress = onSwitchPress
}

-- Text to show the on/off switch state
checkbox.text = display.newEmbossedText( tostring( checkbox.isOn ), 0, 0, native.systemFontBold, 18 )
checkbox.text.x = checkbox.x
checkbox.text.y = checkbox.y - checkbox.text.contentHeight



보시다시피 실제 widget은 widget.newSwitch command를 사용해서 생성합니다. 그리고 디테일한 내용은 “options” table에 있습니다. 이 예제에서는 아래 프로퍼티들이 콤마로 구분돼 있습니다.


  • left and top (optional) — the left and top position of the switch. You can also position the switch normally by setting its x and y position afterward.
  • style — for this example, set it to checkbox.
  • id (optional) — this property allows you to set a named reference for the widget. This is useful if you want to use the same event listener function for several switches and identify a specific one by its .id property within the listener function.
  • initialSwitchState (optional) — true = on/selected; false = off/deselected.  Default is false.
  • onPress (optional) — listener function called when the switch is touched.



Radio Button


radio button
switch는 checkbox widget 이랑 거의 같은 방식으로 생성합니다. 다른 부분은 style parameter를 radio로 세팅하는 부분입니다. 위에 on-off 를 테스트하기 위해 만들었던 리스너 함수를 복사해서 여기서 사용하시면 됩니다.


local radioButton = widget.newSwitch
{
   left = 150,
   top = 230,
   style = "radio",
   id = "My radio button widget",
   initialSwitchState = false,
   onPress = onSwitchPress
}

-- Text to show the on/off switch state
radioButton.text = display.newEmbossedText( tostring( radioButton.isOn ), 0, 0, native.systemFontBold, 18 )
radioButton.text.x = radioButton.x
radioButton.text.y = radioButton.y - radioButton.text.contentHeight


 


On/Off Switch


on/off switch는 작은 “flick” switch 입니다. 일반 전등 스위치같은 역할을 하죠. 디폴트 switch widget 입니다. 셋업하는 부분은 switch widget 과 비슷한데요. 몇가지 key 가 다르죠. 기본 구조는 아래와 같습니다.


local onOffSwitch = widget.newSwitch
{
   left = 250,
   top = 230,
   id = "My on/off switch widget",
   initialSwitchState = true,
   onRelease = onSwitchPress
}


가장 많이 다른 부분은 event listener function 인데요. onPress parameter가 아닌 onRelease parameter 로 분류 됩니다.  이 경우 touch 가 released 되면 “release” event가 발생합니다.


Widget #2: Segmented Control


segmented control 은  multi-segment 버튼을 쉽게 만들 수 있도록 도와줍니다. 각 segment 별로 on/off 상태가 될 수 있고 그에 따라 관련된 값이 return 됩니다.



Event Listener


switch widget 처럼 segment control 에 대ㅐ 유저의 action 을 report 하기 위해 basic listener function을 생성해야 됩니다.


local function onControlPress( event )
   local target = event.target
   print( "Segment Label is:", target.segmentLabel )
   print( "Segment Number is:", target.segmentNumber )
end

 

이 segmented control 은 리스너에게 두가지 essential 값을 전달합니다. 유저가 touch 한 segment 의  segment labelsegment number 가 그 값들입니다.


Basic Segmented Control


segmented control 은 아주 간단합니다. 아래 예제를 보세요


local segmentedControl = widget.newSegmentedControl
{
   left = 65,
   top = 110,
   segments = { "s1", "s2", "s3", "s4" },
   segmentWidth = 50,
   defaultSegment = 4,
   onPress = onControlPress
}

  
  • left and top (optional) — the left and top position of the control. You can also position the control normally by setting its x and y position afterward.
  • segments — sub-table in which you define the segments; it determines the total count and the label that appears on each. Simply define them as comma-separated strings.
  • segmentWidth (optional) — the pixel width of each segment. Default is 50 pixels.
  • defaultSegment (optional) — this property allows you to set the segment that is “on” when the control is rendered. Specify a number between 1 and the total number of segments. If you don’t specify this property, it defaults to the first segment.
  • onPress (optional) — listener function called when the control is touched.


More to Come!


다른 훌륭한 widgets들이 이어서 선보입니다. 다음주 daily builds 가 릴리즈 될 때 선보일 예정인데요. 다음주 화요일의 Tutorial 을 통해서 그 위젯들에 대한 설명을 드리겠습니다. 그 동안 최신 daily build를 다운 받으시고 위 3개 widget들에 대해 익혀 두세요. daily builds 는 유료 등록하신 분들만 다운받으실 수 있습니다. 코로나의 최신 기술을 그 때 그 때 사용하고 싶으신 분은 지금 유료등록을 해 주세요.










반응형


반응형

오늘은 CoronaLabs 에서 facebook을 통해 알려준 Lua Performance 관련 한 정보를 정리하겠습니다.


있는 곳은 http://trac.caspring.org/wiki/LuaPerformance 입니다.


여기에 정리해 두고 나중에 Corona SDK project 진행할 때 미리 한번 훑어 보고 해야겠네요.



Things you should know about Lua's performance


This wiki is a result of some lua performance tests (the widget is included with ca sandbox).


TEST 1: localize

Code:

local min = math.min

Results:

normal way: 0.719 (158%)
localized: 0.453 (100%)

Conclusion:

  -> Yeah, we should localize all used funtions.


TEST 2: localized class-methods (with only 3 accesses!)

Code1:

  for i=1,1000000 do
    local x = class.test()
    local y = class.test()
    local z = class.test()
  end

Code2:

  for i=1,1000000 do
    local test = class.test
    local x = test()
    local y = test()
    local z = test()
  end

Results:

normal way: 1.203 (102%)
localized: 1.172 (100%)

Conclusion:

  -> No, it isn't faster to localize a class method IN the function call.


TEST 3: unpack a table

Code1:

  for i=1,1000000 do
    local x = min( a[1],a[2],a[3],a[4] )
  end

Code2:

  local unpack = unpack
  for i=1,1000000 do
    local x = min( unpack(a) )
  end

Code3:

  local function unpack4(a)
    return a[1],a[2],a[3],a[4]
  end
  for i=1,1000000 do
    local x = min( unpack4(a) )
  end

Results:

with [ ]: 0.485 (100%)
unpack(): 1.093 (225%)
custom unpack4: 0.641 (131%)

Conclusion:

  -> Don't use unpack() in time critical code!


TEST 4: determine maximum and set it ('>' vs. max)

Code1:

  local max = math.max
  for i=1,1000000 do
     x = max(random(cnt),x)
  end

Code2:

  for i=1,1000000 do
    local r = random(cnt)
    if (r>x) then x = r end
  end

Results:

math.max: 0.437 (156%)
'if > then': 0.282 (100%)

Conclusion:

  -> Don't use math.[max|min]() in time critical code!


TEST 5: nil checks ('if' vs. 'or')

Code1:

  for i=1,1000000 do
    local y,x
    if (random()>0.5) then y=1 end 
    if (y==nil) then x=1 else x=y end
  end

Code2:

  for i=1,1000000 do
    local y
    if (random()>0.5) then y=1 end 
    local x=y or 1
  end

Results:

nil-check: 0.297 (106%)
a=x or y: 0.281 (100%)

Conclusion:

  -> WOW! the or-operator is faster than a nil-check. Use it! :D


TEST 6: 'x2' vs. 'x*x'

Code1:

  for i=1,1000000 do
     local y = x^2
  end

Code2:

  for i=1,1000000 do
     local y = x*x
  end

Results:

x^2: 1.422 (110%)
x*x: 1.297 (100%)


TEST 7: modulus operators (math.mod vs. %)

Code1:

  local fmod = math.fmod
  for i=1,1000000 do
    if (fmod(i,30)<1) then
      local x = 1
    end
  end

Code2:

  for i=1,1000000 do
    if ((i%30)<1) then
      local x = 1
    end
  end

Results:

math.mod: 0.281 (355%)
%: 0.079 (100%)

Conclusion:

  -> Don't use math.fmod() for positive numbers (for negative ones % and fmod() have different results!)!


TEST 8: functions as param for other functions

Code1:

  local func1 = function(a,b,func) 
    return func(a+b) 
  end

  for i=1,1000000 do
    local x = func1(1,2,function(a) return a*2 end)
  end

Code2:

  local func1 = function(a,b,func) 
    return func(a+b) 
  end
  local func2 = function(a) 
    return a*2 
  end

  for i=1,1000000 do
    local x = func1(1,2,func2)
  end

Results:

defined in function param: 3.890 (1144%)
defined as local: 0.344 (100%)

Conclusion:

  -> REALLY, LOCALIZE YOUR FUNCTIONS ALWAYS BEFORE SENDING THEM INTO ANOTHER FUNCTION!!!
     i.e if you use gl.BeginEnd(), gl.CreateList(), ...!!!


TEST 9: for-loops

Code1:

  for i=1,1000000 do
    for j,v in pairs(a) do
      x=v
    end
  end

Code2:

  for i=1,1000000 do
    for j,v in ipairs(a) do
      x=v
    end
  end

Code3:

  for i=1,1000000 do
    for i=1,100 do
      x=a[i]
    end
  end

Code4:

  for i=1,1000000 do
    for i=1,#a do
      x=a[i]
    end
  end

Code5:

  for i=1,1000000 do
    local length = #a
    for i=1,length do
      x=a[i]
    end
  end

Results:

pairs: 3.078 (217%)
ipairs: 3.344 (236%)
for i=1,x do: 1.422 (100%)
for i=1,#atable do 1.422 (100%)
for i=1,atable_length do: 1.562 (110%)

Conclusion:

  -> Don't use pairs() or ipairs()!
     Try to save the table-size somewhere and use "for i=1,x do"!


TEST 10: array access (with [ ]) vs. object access (with .method)

Code1:

  for i=1,1000000 do
    x = a["foo"]
  end

Code2:

  for i=1,1000000 do
    x = a.foo
  end

Results:

atable["foo"]: 1.125 (100%)
atable.foo: 1.141 (101%)


TEST 11: buffered table item access

Code1:

  for i=1,1000000 do
    for n=1,100 do
      a[n].x=a[n].x+1
    end
  end

Code2:

  for i=1,1000000 do
    for n=1,100 do
      local y = a[n]
      y.x=y.x+1
    end
  end

Results:

'a[n].x=a[n].x+1': 1.453 (127%)
'local y=a[n]; y.x=y.x+1': 1.140 (100%)


TEST 12: adding table items (table.insert vs. [ ])

Code1:

  local tinsert = table.insert
  for i=1,1000000 do
    tinsert(a,i)
  end

Code2:

  for i=1,1000000 do
    a[i]=i
  end

Code3:

  for i=1,1000000 do
    a[#a+1]=i
  end

Code4:

  local count = 1
  for i=1,1000000 do
    d[count]=i
    count=count+1
  end

Results:

table.insert: 1.250 (727%)
a[i]: 0.172 (100%)
a[#a+1]=x: 0.453 (263%)
a[count++]=x: 0.203 (118%)

Conclusion:

  -> Don't use table.insert!!!
     Try to save the table-size somewhere and use "a[count+1]=x"!



반응형