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

최근에 올라온 글

최근에 달린 댓글

최근에 받은 트랙백

글 보관함

카테고리


반응형

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



반응형

Ajax 로 input fields 삽입하기

2012. 11. 7. 09:46 | Posted by 솔웅


반응형
Insert input fields by Ajax



이제 서버에서 HTML 을 받아와서 single line input field와 multiline input field 를 만드는 것을 해 보겠습니다.  그리고 result 도 해당 content에 넣어보겠습니다.


Insert input fields 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>

    <p> Window content </p>  

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

    $(":text").textinput ();

    $("textarea").textinput ();

    $("[type=search]").textinput ();

  }

});   


</script>



input field 와 관계 된 element 에 textinput () method가 있는 것을 잘 보세요. 이 메소드가 input field 모양으로 변환시켜주는데 필요한 메소드 있니다. 이 메소드가 없으면 jQuery Mobile 다운 input field 가 만들어지지 않습니다.


action.php file


<?
$html = "";
$html .= "Name : <input type=text value=Sarrion /> <br />";
$html .= "Description : <textarea>Nice studio for renovation </textarea> <br />";
$html .= "Search : <input type=search value=Name />";

echo utf8_encode ($html);
?>



action7.php


tistory453_01.html






반응형


반응형
Turning a HTML element into a jQuery Mobile input field


Input on one line


single line input field 를 생성할 때 jQuery Mobile 은 너비와 높이 그리고 shaded border 등을 정할 수 있는 CSS classes 들을 해당 <input> element 에 add 합니다.  이전 글에서 사용했던 소스를 가지고 한번 확인해 보죠. 이전 소스를 fireworks 로 열어서 firebug로 jQuery Mobile 에 의해 생성된 HTML code를 확인해 보세요.




<input> element에 ui-input-text CSS class 가  보이시죠? 다른 클래스들은 border 의 테두리 곡선을 관리하는 클래스들입니다.


Input on multiple lines


jQuery Mobile 에 의해 생성된 HTML 을 잘 보세요. 아래는 multiline input field 소스코드를 firebugs 에서 본 모습입니다.




여기서도 ui-input-text class 를 보실 수 있습니다. 다만 이번에는 <textarea> element에 적용됐을 뿐이죠.


Search field


같은 방법으로 search field 소스코드를 보겠습니다.




jQuery Mobile 에 의해서 바뀌어진 HTML 은 좀 더 복잡하게 변했죠? <div> element 에 ui-input-search class 가 있고 거기에 <input> element가 포함돼 있구요.  여기에 또 <a> link도 있습니다. field 의 오른쪽에 있는 erase icon 과 관계 있는 버튼을 만들기 위해서죠.

또한 <input> element 에 type="true" attribute (instead of type="search") 가 있는 점을 잘 봐두세요.  그리고 새 data-type attribute 가 "search"로 세팅돼 있습니다.




반응형


반응형

input fields는 single line 과 multiline 두가지 타입이 있습니다. 첫번째것은  <input> elements 에 type="text" attribute 가 들어가고 두번째 것은 <textarea> elements가 들어갑니다. jQuery Mobile 에는 이 외에 search field가 있습니다. 어떤 값을 입력하거나 어떤 문자를 찾을 때 사용하죠. 이 세가지의 input field 들은 jQuery 의 standard methods 에 의해 관리 됩니다. 그리고 jQuery Mobile에는 textinput () method가 추가로 있습니다. input field 는 textinput standard component 와 연관이 있습니다.


Dynamically create an input field


Input on one line


JavaScript 로 single line 의 input field를 다이나믹하게 생성하겠습니다. 간단하게 type="text" attribute를 가지고 있는 <input> element를 생성하면 됩니다.


Create an input field dynamically


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


</script>


tistory451_01.html




Input on multiple lines


multiline text field 를 표시할 수 있는 <textarea> element 를 생성해 보죠.


Create a multiline text field dynamically


<!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 += "Description : <textarea> Beautiful sunny studio. Reasonable price.</textarea>";

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


</script>


tistory451_02.html





Search field


search field 는 <input> element 안에 type="search" attribute를 넣으시면 됩니다.


Dynamic creation of 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 += "Name : <input type=search value='Sarrion' />";

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


</script>


tistory451_03.html





반응형


반응형

안녕하세요?



지난 주 월요일(10/29) 부터 11/06 (화) 까지 진행된 jQuery Conference Asia 2012 이벤트가 마무리 됐습니다.



참여해 주신분께 감사드립니다.


추첨은 제 직장 동료인 Akshay 가 해 주었습니다.


점심시간에 짬을 내서 추첨 해 준 Akshay 에게도 감사드립니다.






당첨되신 분은 조연성님입니다.


조연성님께는 이번 jQuery Conference Asia 2012 행사에 무료로 참가할 수 있는 기회를 드립니다.

제가 이번 행사를 주최하는 인크로스의 담당자 분께 조연성님의 이메일 주소를 알려드리면 담당자분이 Contact 을 할 겁니다.


아쉽게 추첨되지 못하신 분들께는 죄송합니다.

저도 행사에 참가하지 못해서 행사 후에 관련 자료를 받기로 했거든요.


이번에 참여하셨다가 추첨되지 못하신 분 들께도 이 자료 공유해 드릴께요.





이번 jQuery Conference Asia 2012 행사는 11월 12일 월요일에 서울 역삼동 르네상스 호텔에서 개최됩니다.


자세한 소식은 위 링크를 따라 가시거나 아래 파일을 다운 받아서 열어보시면 알 수 있습니다.


join_auth.html


관심있는 분들의 많은 참여 바랍니다.

감사합니다.



반응형


반응형

미국은 오늘 대통령선거 투표일입니다.

저 위쪽의 뉴햄프셔 어느 마을은 새벽 0시 땡 하자마자 투표를 시작해서 곧바로 끝냈다네요.


뉴햄프셔는 우리나라의 강원도 같이 산이 많은 지방이예요.

경치도 좋고 특히 가을 단풍이 멋진 곳이죠. 아마 산골 마을이 띄엄띄엄 있어서 주민이 많지 않나봐요. 10명이 투표했는데 5:5 로 나왔다죠? 오바마와 롬니가...


미국은 간접투표제라서 오바마와 롬니를 뽑는게 아니고 대통령선거에 참여할 사람들을 주민들이 뽑습니다. 그리고 그 사람들이 나중에 대통령선거를 하구요.

오늘이 그 대통령선거에 참여할 사람을 뽑는 날인데 대부분 정당소속이고 누구를 지지하는지 표방하고 있기때문에 오늘 선거로 누가 대통령이 될지 거의 정해 집니다.


한국은 12월 중순인가 그 때쯤 대통령선거를 하죠?


저는 12월 초순에 보스톤에서 국외 거주자 투표를 할 겁니다. 한 4~5일간 진행되는 것 같은데 토,일요일에도 하니까 근무 없는 휴일에 가서 투표 참여하고 오려구요.


============= o ============ o ============ o ============== o ============== o =============


지난번 박근혜가 정수장학회 관견 기자회견 했을 때 제가 최고의 악수를 뒀다라고 좋아했었는데요. (해당 글)


어제 문제인 안철수 가 단일화 합의를 할 때 그거 초칠려고 박근혜가 기자회견 했다면서요.

그래놓고 하겠다는게 대통령 중임제...


이번에도 대단한 악수를 뒀습니다. (아버지처럼 장기집권하려고 하나?)


본선에 접어 들 수록 박근혜가 감각도 없고 원칙도 없고 철학도 없고 그냥 단순히 대중성과 이미지 정치로만 정치생명을 유지해 온 티가 철철 흘러 넘치네요.



- 경향신문 만평-




뭐 굳이 제 입으로 비판하지 않아도 새누리당 내에서의 비판이 흘러 넘치네요.


 "분권 없는 4년 중임제는 임기 연장이며 장기집권에 불과하다"
"대통령에게 집중된 권력을 내려놓는 권력구조의 변화가 시대의 흐름","정당과 국회, 검찰 등의 개혁은 현행 헌법으로는 불가능하다", "현행헌법은 5년 단임제만 빼면 유신헌법의 아류", "지도자가 되려면 집중된 권력에 대한 향수를 버려야 한다"

- 새누리당 이재오 의원의 발언입니다. -

"내각제로 간다거나 하면 모를까 대통령제에서 단임제를 4년 중임제로 가는 그 자체는 큰 의미가 없다"

- 김종인 새누리당 국민행복추진 위원장의 발언입니다. - 


지금 시대에 독재자의 딸이 그것도 당시 독재시대를 옹호하는 그 딸이 대한민국 대통령으로 출마한다는 것만해도 주위 외국인 친구들에게 얘기하기 쪽팔립니다.


부디 안철수,문재인이 근본적인 쇄신과 개혁을 기대할 수 있도록 하는 감동적인 단일화로 새누리당이 다시 집권하는 악몽이 절대 오지 않았으면 합니다.



반응형

테이블 manipulation 예제

2012. 11. 6. 22:18 | Posted by 솔웅


반응형
Example of table manipulation


A main menu as images in a table


이제 테이블에 여러 이미지를 넣고 그 이미지를 클릭하면 Text 가 나오고 그 Text를 클릭하면 해당 홈페이지로 가게 할 겁니다.

(아래 첨부파일은 본문의 예제소스와 약간 다릅니다. 첨부파일도 꼭 확인해 주세요.)


Main menu as images


<!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-grid-b img {

      width : 80px;

      margin : 5px;

    }

  </style>

</head> 


<body> 


<div data-role=page id=home>

  <div data-role=header>

    <h1>Home</h1>

  </div>


  <div data-role=content>

    <h3> A main menu as images </h3>

    <div class=ui-grid-b>

      <div class=ui-block-a>

        <a href=#jquery><img src=images/jquery.jpg /></a>

      </div>

      <div class=ui-block-b>

        <a href=#html><img src=images/html.jpg /></a>

      </div>

      <div class=ui-block-c>

        <a href=#j2ee><img src=images/j2ee.jpg /></a>

      </div>

      <div class=ui-block-a>

        <a href=#rails><img src=images/rails.jpg /></a>

      </div>

      <div class=ui-block-b>

        <a href=#mobile_web><img src=images/mobile_web.jpg /></a>

      </div>

      <div class=ui-block-c>

        <a href=#phonegap><img src=images/phonegap.jpg /></a>

      </div>

    </div>

  </div>

</div>


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

  <div data-role=header>

    <h1>jQuery</h1>

  </div>


  <div data-role=content>

    <h3> jQuery content</h3>

  </div>

</div>


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

  <div data-role=header>

    <h1>HTML & CSS</h1>

  </div>


  <div data-role=content>

    <h3> HTML & CSS content</h3>

  </div>

</div>


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

  <div data-role=header>

    <h1>J2EE</h1>

  </div>


  <div data-role=content>

    <h3> J2EE content </h3>

  </div>

</div>


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

  <div data-role=header>

    <h1>Ruby on Rails</h1>

  </div>


  <div data-role=content>

    <h3> Ruby on Rails content </h3>

  </div>

</div>


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

  <div data-role=header>

    <h1>Mobile web</h1>

  </div>


  <div data-role=content>

    <h3> Mobile web content </h3>

  </div>

</div>


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

  <div data-role=header>

    <h1>PhoneGap</h1>

  </div>


  <div data-role=content>

    <h3> PhoneGap content </h3>

  </div>

</div>


</body>

</html>


tistory448_01.html



이미지는 수평으로 나란히 정렬 되도록 만들었습니다. 그리고 각각의 이미지에는 <a> link가 있어서 해당 이미지에 맞는 text를 다른 window 에서 display 되도록 만들었습니다. (그리고 저의 예제 파일을 열어보시면 그 텍스트에 링크를 걸어서 해당 홈페이지에 가도록 만들었습니다.)


아래는 위 예제소스의 실행화면입니다.
(제 첨부파일에는 구글, 야후, 다음, 한겨레, 경향신만, Ohmynews 등을 예제로 들었습니다. 일부러 네이버는 뺐는데요. 그건 순전히 저의 정치성향때문입니다. ^^; 네이버가 이명박과 박근혜 쪽에 기운것 같아서.... ;;)




J2EE를 클릭하면 아래 화면이 나옵니다.




반응형

테이블에서 이벤트 다루기

2012. 11. 6. 21:47 | Posted by 솔웅


반응형
Manage events on tables


테이블의 각 cell 에서 처리될 수 있는 주요 이벤트는 click event 입니다. jQuery Mobile에서는 vclick virtual event 로도 사용할 수 있죠. tapholdswipe events 들도 사용될 수 있습니다.


예를 들어 cell 테이블에 long click  (taphold) 이 일어났을 때 어떤 동작을 하도록 만들 수 있습니다. 아래 예제는 long click 이 일어났을 때 그 cell 의 content를 delete 하는 예제입니다.


Deleting array elements by clicking and holding


<!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 class=ui-grid-b>

      <div class=ui-block-a>Element 1.1</div>

      <div class=ui-block-b>Element 1.2</div>

      <div class=ui-block-c>Element 1.3</div>

      <div class=ui-block-a>Element 2.1</div>

      <div class=ui-block-b>Element 2.2</div>

      <div class=ui-block-c>Element 2.3</div>

      <div class=ui-block-a>Element 3.1</div>

      <div class=ui-block-b>Element 3.2</div>

      <div class=ui-block-c>Element 3.3</div>

    </div>

  </div>

</div>


</body>

</html>


<script>


$(".ui-block-a, .ui-block-b, .ui-block-c").bind ("taphold", function (event)

{

  $(this).html ("&nbsp;");

});


</script>


tistory446_01.html


테이블의 각 cell 에는 ui-block-a, ui-block-b, or ui-block-c CSS classes 들이 있습니다. 이 클래스들에 taphold event를 implement 했죠. 그러면 long click 이 감지되면 <div> 의 content 는 "&nbsp;"로 바뀝니다. 실제로 delete 되는건 아니죠 .하지만 사실상 delete 되는 것입니다. 해당 셀을 그냥 빈 공간으로 두는 것이 아니라 space 한칸을 두도록 만든 겁니다.





반응형