어제 Martin Luther King jr 목사를 기념하는 날이었습니다.
공휴일이죠.

1963년도 워싱턴 D.C. 링컨기념관 앞에서 한 그 유명한 연설도 사실은 Rosa Parks 라고 하는 한 여인의 작은 저항에서부터 시작 됐습니다.
버스에 백인석 흑인석 따로 있었고 백인이 서있자 흑인석 앞자리에 앉아있던 Parks 에게 버스 운전수가 흑인석 뒷자리로 가라고 했습니다.
1955년 알라마바주의 몽고메리라는 도시에서 있었던 이야기입니다.
Parks는 운전수의 지시를 거부했고 이 운전수는 Parks를 체포해서 경찰에 넘겼습니다.
(당시에는 운전수에게도 흑인 체포권이 있었나 봅니다.)
이 Parks의 멘토였던 Nixon(시민운동가)은 이것을 이슈화해서 부정의를 몰아 내기로 결심했고 당시 26세였던 젊은 Martin Luther King jr 목사에게 도움을 요청했습니다.
킹목사는 이후 계속 흑인 인권운동을 위해서 싸웠고 63년 미국의 수도 워싱턴D.C 링컨기념관 앞에서 역사적으로 가장 많은 인원인 25만명이 모인 가운데 그 유명한 'I have a dream' 연설을 했습니다.
같은해 킹목사가 연설한 곳에서 얼마 안 떨어진 미국 국회의사당에서 segregation (분리) 정책을 폐기했고 이듬히 킹 목사는 노벨 평화상을 받았습니다.

그리고 50여년 후 미국에서는 흑인 대통령이 탄생했습니다. 킹목사가 연설한 링컨기념관에서 걸어서 5분 거리밖에 안되는 백악관에서 미국을 운영하고 있습니다.

Rosa Parks 라고 하는 한 여인이 부당한 대우를 거부하고 체포당한 것으로 시작했습니다.
미국의 흑인차별정책이 폐기되고 한 목사에게 노벨 평화상이 주어지고 그리고 당시에는 도저히 상상도 할 수 없었던 미국 흑인 대통령이 탄생 된 것이요.

한국 사회에도 이런 부조리와 부정의가 많습니다.
그리고 Rosa Parks 같은 작은 저항들이 많이 일어나고 있습니다.

그리고 우리사회는 조만간 훌륭한 사회가 될 겁니다.

아래 우리사회의 부조리와 부정의 중 한가지가 신문에 실렸길래 같이 공유합니다.

그리고 아래 코드를 복사해서 넣으시면(HTML 안에) 여러분의 블로그에도 이 인포그래픽을 넣을 수 있습니다. (출처는 한겨례신문입니다.)

아래 코드를 복사하면 여러분 블로그에도 이 인포그래픽을 넣으실 수 있습니다.

Google provide excellent stuffs for HTML5 developer and one of the thing is that Speech Input API.
Just Click the microphone image and speak out any word then Google get and display the word in the text field.
One and big limitation is that it is working only on Google Chrome browser.

iPhone 의 Siri 가 나오는 바람에 그 신선함이 팍 꺾였지만 처음 이 기능을 보고 전 아주 신선한 충격을 받았어요.
이제 조만간 터치가 아니라 음성으로 기기를 제어할 수 있는 프로그램을 나도 만들 수가 있겠구나......
아래 텍스트 필드 옆에 있는 마이크 이미지를 클릭하고 말을 하면(아직 영어만 지원) 구글에서 그 말을 알아듣고 텍스트 필드에 추가 합니다.
지금은 오직 구글 크롬 브라우저에서만 작동합니다.

Google Chrome 16.0.912.75 m  - Working well (O)
Internet Explorer 9.0.8.112        - Not Working (X)
Opera 11.60                            -  Not Working (X) 
Safari 5.1.2                             -  Not Working (X) 
FireFox 9.0.1                          - Not Working (X)

Fore more Details Click it. 
좀더 자세한 사항은 여기를 클릭 하세요. 

You can get sample source code here.
샘플 코드 입니다. 다운 받아서 사용하시면 됩니다.

 

오늘은 2012.721 버전 이후부터 적용된 ScrollView Widget 에 대해 알아 보겠습니다.

그러니 이 기능을 직접 테스트 해 보시려면 2012.721 버전 이상되는 Corona SDK를 설치 하셔야 합니다.

확인해 보니까 지금 일반에 공개된 버전은 2011.704 버전이네요.
유료 사용자가 아닌 경우는 일반에 공개된 이후에 사용하실 수 있을 겁니다.

아래 내용의 원본은 여기 입니다.
그리고 자세한 API를 보시려면 여기를 클릭하시면 됩니다.

그럼 이번에 새로 추가된 기능에 대해 알아보겠습니다.

About Widgets

코로나의 위젯 API는 간단히 여러 플랫폼에 적용되는 코딩을 위해 만들어 졌습니다. 간단한 몇줄의 코드로 버튼, 탭 바, 슬라이더, Picker Wheel, Lists, 스크롤 되는 콘텐트 등을 스크롤 뷰 위젯에 덧 붙일 수 있는 기능을 제공합니다.
모바일 기기는 그 크기가 제한되어 있기 때문에 어느 기종이나 앱에 스크롤 되는 기능이 많이 필요합니다. 코로나에서는 이러한 기능을  scrollView Widget 에서 제공 합니다.

Basic Usage

스크롤 뷰 위젯의 가장 기본적인 이용법은 단지 몇개의 파라미터들을 정하고 디스플레이할 객체를 만들고 그 객체를 스크롤 뷰에 넣으면 됩니다.
아래에 그 예제가 있습니다.

local widget = require "widget"
local scroller = widget.newScrollView{
    width = 320,
    height = 480,
    scrollWidth = 700,
    scrollHeight = 1000
}

local obj = display.newImage( "myobject.png" )
obj.x = 400
obj.y = 500

scroller:insert( obj )

코드를 한번 보겠습니다.
- 첫번째로 widget을 require 합니다.
- 파라미터를 정합니다. 320,480은 아이폰의 해상도 입니다.
- scrollWidth,scrollHeight 파라미터는 스크롤뷰가 어디까지 스크롤 되는지를 정해 줍니다. 이 값은 어떤 객체가 주어지느냐에 따라 자

동적으로 늘어날 겁니다.
- 객체를 생성하고 위치를 설정합니다.
- 이 객체를 스크롤 뷰에 넣습니다.
이것이 스크롤 뷰를 사용하는 가장 기본적인 방법입니다.

위 코드만 가지고도 (이미지 파일만 있다면) 기본적인 스크롤 기능을 구현할 수 있습니다.

위 아래로 움직이지 않고 옆으로 움직이도록 하려면 아래 코드를 덧붙이기만 하면 됩니다.
scroller.content.verticalScrollDisabled = true
디폴트는 아래 코드 입니다.
scroller.content.horizontalScrollDisabled = true

Clipping the Width and Height

스크롤 뷰가 화면 전체를 차지하지 않고 일부분만 차지하도록 하려면 어떻게 할까요?
현재로서는 bitmap mask를 사용하는 방법 밖에는 없습니다.
이 방법도 코로나 개발팀에서 아주 간단히 코딩할 수 있도록 신경을 썼다고 합니다.
특정 크기로 스크롤 뷰를 만들기 위해 비트맵 마스크를 사용하려면 간단히 그 크기(width,height)를 정하는 파라미터를 세팅하고  해당하는 비트맵 마스크를 만듭니다. 그리고 그 비트맵 마스크의 파일 이름으로 maskFile 파라미터를 사용합니다.

    local widget = require "widget"
 
    local list = widget.newTableView{
        width = 320,
        height = 410,
        maskFile = "mask320x410.png"
    }
위 예제는 테이블 뷰에 사용했구요, 스크롤 뷰에서도 똑같이 사용하시면 됩니다.

Buttons and Touchable Objects

주로 ScrollView 에 버튼 같이 터치 리스너를 받아 들이는 object(객체)들을 넣는 방법을 알아볼 겁니다.
스크롤 하기 위해 터치할 때하고 버튼을 누를 때 터치하고 구별해야 쓸모있는 스크롤뷰가 될 수 있겠죠?

이 기능을 사용하려면 takeFocus()를 사용하시면 됩니다.

local widget = require "widget"
local scroller = widget.newScrollView{
    width = 320,
    height = 480,
    scrollWidth = 700,
    scrollHeight = 1000
}

-- event listener for button widget
local function onButtonEvent( event )
    if event.phase == "moved" then
        local dx = math.abs( event.x - event.xStart )
        local dy = math.abs( event.y - event.yStart )
       
        -- if finger drags button more than 5 pixels, pass focus to scrollView
        if dx > 5 or dy > 5 then
            scroller:takeFocus( event )
        end
   
    elseif event.phase == "release" then

        print( "Button pushed." )
    end

    return true
end

local button = widget.newButton{
    label = "My Button"
    top = 300,
    left = 300,
    onEvent = onButtonEvent
}

scroller:insert( button )

위와 같이 버튼을 만들고 이 버튼을 scroller 에 insert를 합니다.

그리고 리스너 이벤트 함수인 onButtonEvent 에서 takeFocus를 구현해 주면 됩니다.
이벤트가 moved 일 때 5픽셀 이상 움직이면 scroller 에 포커스를 맞추고 그렇지 않고 손가락을 떼면 버튼에 포커스를 맞추게 됩니다.

Scroll Events
스크롤 뷰 이벤트의 기본 파라미터에는 아래와 같은 것들이 있습니다.
event.name - 항상 scrollEvent 입니다.
event.target - 실제 이벤트가 할당된 스크롤뷰 위젯에 대한 레퍼런스 입니다.
event.type - beganScroll, endedScroll,movingToTopLimit,movingToBottomLimit,movingToLeftLimit, movingToRightLimit 가 있습니다.
Limit 를 설정하게 되면 그 숫자에 따라 스크롤 뷰가 끝에 다다랐을 때 탄력있게 움직이게 됩니다.

Further Reading and Resources

이 기능들을 자세히 보려면 CoronaSDK의 샘플 코드 중 Interface 폴더에 ㅇㅆ는 WedgetDemo를 보시면 됩니다.
이 기능들은 최근에 발표된 화면(Scene) 전환 API인 Storyboard API와 어울려서 사용할 수도 있습니다.

그럼 샘플코드인 WidgetDemo 앱을 살펴 보겠습니다.

첫번째는 테이블 뷰입니다. (안드로이드에서는 리스트 뷰라고 합니다.)
손가락으로 터치후 움직이면 아래위로 리스트들이 보입니다.
그리고 특정 Row를 터치하면 그 로우에 해당하는 화면으로 넘어갑니다.

여기서 back 버튼을 누르면 이전 테이블 뷰(리스트 뷰) 화면으로 넘어갑니다.
이 소스를 보면 최근에 발표된 storyboard 기능을 사용해서 화면을 넘기고 있습니다.

나중에 이 소스를 분석하면 아주 좋은 공부가 되겠네요.

아래 탭을 보시면 테이블 뷰 이외에 scrollView 와 Other 가 있습니다.

스크롤 뷰를 누르면 이 화면이 나옵니다.
상하 좌우로 움직이면 이미지가 스크롤 됩니다.

그리고 others를 누르면 위 화면과 같이 Slide Bar 와 Date Picker 가 나옵니다.
아주 좋은 샘플이네요.

오늘은 최근에 새로 발표된 Corona SDK 의 Scroll View Widget 에 대해 알아봤습니다.