IT 기술 따라잡기

아래 내용은 Corona SDK Web site 에 원본이 있습니다.
아래 내용은 이 원본을 번역한 내용입니다.

=========== =========== =========== =========== =========== ===========

WebView, Video and Network Updates


이번에 native Web/Video objects 가 릴리즈 되면서 API에 몇가지 중요한 기능이 추가 됐습니다. 또한 Network library에 몇가지 아주 유용한 기능이 추가 됐구요.

***** Web View Updates

아래와 같이 native web view object 들의 상태를 back이나 forward로 control 할 수 있습니다. back()/forward() 메

소드를 써서 간단하게 조정 가능합니다.

local webview = native.newWebView( 0, 0, 320, 240 )
webview:request( "http://www.anscamobile.com" )
webview:request( "http://www.google.com" )
webview:back()   -- goes back to www.anscamobile.com
webview:forward() -- goes forward to www.google.com

canGoBack/canGoForward

위 두 메소드와 관련해서 당신의 web view object가 back이나 forward가 가능한지에 대해 체크할 수 있습니다.
예를 들어 web view object를 처음 만들었다면 이 web view object는 단지 하나만 있기 때문에 back()을 할 수도 없고

forward()를 할 수도 없습니다. 이럴 경우 canGoBack/canGoForward 모두 false 가 됩니다.

print( webview.canGoBack )  -- false

좀 더 자세한 내용은 native.newWebView() documentation을 참조하세요.

*****Video Properties and Phases


새로운 video objects와 관련해서 isMuted 프로퍼티가 새로 선 보였습니다. 이것은 get/set 프로퍼티 입니다. 여러분의 앱에 video

를 임베딩 하는데 있어 좀 더 유연하게 콘트롤 할 수 있도록 도와 줄 겁니다. 또한 새 phase 프로퍼티도 생겼는데요 video 리스너가 그것입니

다. 이 리스너에는 ready와 ended phases 가 있습니다.

아래 예제를 참고하세요.

local function videoListener( event )
    if event.phase == "ready" then
        print( "Video is ready." )

    elseif event.phase == "ended" then
        print( "Video playback has ended." )
    end
end

local videoObj = native.newVideo( 0, 0, 320, 480 )
videoObj:addEventListener( "video", videoListener )

-- load a video and jump to 0:30
videoObj:load( "myvideo.m4v", system.DocumentsDirectory )
videoObj:play()

좀 더 자세한 내용은 native.newVideo() documentation을 참조하세요.


***** Network Library

이 native object 관련 내용을 추가하면서 networkRequest 가 한가지 status와 url 프로퍼티를 갖게 됐습니다.
이것은 network request들을 콘트롤 하는데 유용하게 이용될 수 있습니다.
현재까지는 Mac/iOS/Android 에만 지원 됩니다. (Windows 에서는 조만간 지원될 예정입니다.). 이 두 새로운 프로퍼티를 사용하는 방법

에 대한 예제가 아래 있습니다.


local function networkListener( event )
    local status = event.status
    local url = event.url

    print( "The url " .. url .. " returned a status code of: " .. status
end

network.request( "http://www.google.com", "GET", networkListener )

좀 더 자세한 사항은 Network API documentation 을 참조하세요.

이 기능들을 이용하시려면 코로나 최신 버전을 사용하셔야 합니다.
최신버전은 subscriber들에게만 오픈 돼 있습니다.

추천 버튼 꾹꾹 눌러 주세요. ~~~~~~~~~~~~~~

아래 내용은 아래 블로그에서 그 원본을 보실 수 있습니다.
http://blog.anscamobile.com/2012/02/tutorial-text-input-with-native-ui/

Text Input with Native UI

아래 내용은 코로나 SDK로 Text Field와 Text Box를 사용할 때 유용한 방법에 대해 설명한 내용입니다.

***** Text Fields vs. Text Boxes

텍스트 필드와 텍스트 박스는 아래와 같은 각각의 특징이 있습니다.

Text Fields
- 1줄 입력 기능을 제공한다. (스크롤 기능이 없다.)
- password fields로 이용할 수 있다.
- 오직 숫자만 입력하도록 설정할 수 있다. (전화기의 숫자 키보드가 나옴.)

Text Boxes
- 여러 줄 입력 기능을 제공한다. (스크롤 기능이 있다.)
- text만 보이도록 하기 위해 background를 숨길 수 있다.
- read only로 세팅할 수 있다.

아래는 두 가지 모두에 있는 기능들입니다.
- 폰트, 글자 사이즈, 글자 색을 바꿀 수 있다.
- 배경색을 바꿀 수 있다.
- userInput listening 기능이 있다.

더 자세한 신택스를 보려면 아래를 참조하세요.

Native Text Fields Documentation
Native Text Boxes Documentation 
   

***** Events and Listeners   

userInput 이벤트를 어떻게 감지하는지에 대해 알아보겠습니다.
텍스트 필드나 텍스트 박스를 생성할 때 이 userInput 이벤트 리스너를 달 수가 있습니다.
그러면 그 이벤트가 일어나는 것을 감지해서 어떤 특정한 기능을 넣을 수가 있습니다.

이 userInput 이벤트에는 몇가지의 phases가 있습니다.

began: 이 단계는 유저가 스크린에 키보드를 나오게 하는 순간입니다. 이 경우 키보드가 중요한 객체를 가리지 않게 하기 위해 위치를 변경하는 등의 기능을 넣을 수 있습니다.
edited: 이 단계는 유저가 텍스트 필드나 텍스트 박스에 타이핑을 하는 동안 일어납니다.
ended: 텍스트 필드나 텍스트 박스가 focus를 잃는 단계입니다. 예를 들어 다른 텍스트 필드/박스 를 tap할 때 등입니다.
submitted: 유저가 return/enter 키를 눌렀을 때 입니다. 즉 텍스트 필드/박스 의 내용을 submit 할때라고 얘기할 수 있습니다.

아래 userInput 리스너 를 이용하는 예제 코드가 있습니다.

local function onUserInput( event )
    if event.phase == "began" then
        print( "Keyboard has now shown up." )

    elseif event.phase == "edited" then
        print( "User has entered text." )

    elseif event.phase == "ended" then
        print( "We have lost focus." )

    elseif event.phase == "submitted" then
        print( "User is done editing, let's do something with text." )
    end
end

***** Not Normal Display Objects!
확실히 알아둬야 할 것은 native text field나 native text box는 Corona display 객체가 아닙니다.
말 그대로 native입니다. Corona SDK의 object들이 아니라 그 핸드폰의 객체들인거죠. 정확히는 그 핸드폰의 OS의 객체라고 하면 더 정확할 겁니다.
이 native객체들은 다른 Corona SDK의 객체들 처럼 위치나 투명도 같은것을 바꿀수는 있어도 Corona SDK내에서 다른 객체들과 함께 Group화 할 수는 없습니다.
그러면 화면전환등을 할 때 다른 객체들과 같이 움직이지 않을 겁니다. 보기가 조금 어글리 할 겁니다.
이러한 것을 보기 좋게 하는 방법이 있습니다. 다른 객체들처럼 움직이는 것 같이 보이도록 하는 거죠.

아래 몇가지 팁이 있습니다.
- native 객체들을 표현할 때 placeholders처럼 보이도록 text object를 만듭니다. 그리고 그 바탕에 사각형이나 rounded 사각형을 놓구요.
  여기서 text object나 사각형들은 모두 Corona SDK의 객체들입니다.
  사용자가 placeholder를 터치하면 그때 native 객체가 나오도록 합니다. 즉 유저가 editing할 때는 이 native 객체가 나와 있도록 하는 것이죠.
  유저가 입력을 끝내면 다시 native 객체를 없애고 다시 placeholder를 표시합니다. 이 때 물론 유저가 입력한 값이 해당 placeholder에 보이겠죠.
- placeholder objects들에 대해 transitions 효과를 줍니다.
- hasBackground 프로퍼티를 이용해서 텍스트 박스의 백그라운드를 안보이도록 합니다. 그리고 여러분의 백그라운드를 넣습니다.
  이 백그라운드는 일반적인 Corona SDK 객체를 이용합니다. 그래서 그 텍스트 박스를 코로나 내부 객체와 섞이도록 합니다.
 
이러한 방법들은 여러분들이 할 수 있는 여러 방법중에 극히 일부분입니다.
이러한 방법을 기초로 여러분들 나름대로 여러 효과들을 내실 수 있을 겁니다.

마지막으로 한가지 중요한 점은 이 native objects들은 object:removeSelf() 와 nil값을 대입하는 과정을 거치면서 분명히 메모리 관리를 해 주셔야 한다는 점 입니다.

***** Simulator Notes
현재 native text box와  native text field는 Mac Simulator, Xcode Simulator 그리고 디바이스에서 작동을 합니다.
맥 시뮬레이터로 테스트를 할 경우 Xcode 시뮬레이터나 디바이스에서 반드시 테스트를 해 보셔야 합니다.
왜냐하면 맥 시뮬레이터(Mac)에서 보이는 것과 실제 기계(iOS)에서 보이는 것이 다를 수가 있습니다.

맥 시뮬레이터에서는 리스너나 이벤트 처리 같은 것을 테스트 할 수 있어 개발 시간을 save해 주는 잇점이 있지면 실제 display는 다르게 작동되므로 반드시 기계에서 테스트해 보셔야 합니다.
가장 좋은 테스트 도구는 실제 device에 빌드해서 하는 것 입니다.

***** Basic Note App
아래 간단하게 Note를 할 수 있는 Note App을 한번 만들어 보겠습니다.
텍스트 필드나 텍스트 박스를 생성하는 예제 이구요 외부 소스로부터 가져와서 다이나믹하게 내용을 뿌려주는 효과도 보실 수 있을겁니다.
(여기서 외부 소스로는 text 파일이 사용됩니다.)

모든 코드는 하나의 코드파일에  들어갈 겁니다. 즉 main.lua한 파일에 다 들어갈 겁니다.

1. Creating the Interface
첫번째 단계는 아주 단순합니다. 앱의 배경을 만들고 위에 타이틀 바를 만들고 두개의 버튼 위젯을 만듭니다.

display.setStatusBar( display.DefaultStatusBar )

local widget = require "widget"
local sbHeight = display.statusBarHeight
local tbHeight = 44
local top = sbHeight + tbHeight

-- forward declarations
local titleField, noteText, loadSavedNote, saveNote

-- create background for the app
local bg = display.newImageRect( "stripes.jpg", display.contentWidth, display.contentHeight )
bg:setReferencePoint( display.TopLeftReferencePoint )
bg.x, bg.y = 0, 0

-- create a gradient for the top-half of the toolbar
local toolbarGradient = graphics.newGradient( {168, 181, 198, 255 }, {139, 157, 180, 255}, "down" )

-- create toolbar to go at the top of the screen
local titleBar = widget.newTabBar{
top = sbHeight,
gradient = toolbarGradient,
bottomFill = { 117, 139, 168, 255 },
height = 44
}

-- create embossed text to go on toolbar
local titleText = display.newEmbossedText( "NOTE", 0, 0, native.systemFontBold, 20 )
titleText:setReferencePoint( display.CenterReferencePoint )
titleText:setTextColor( 255 )
titleText.x = 160
titleText.y = titleBar.y

-- create a shadow underneath the titlebar (for a nice touch)
local shadow = display.newImage( "shadow.png" )
shadow:setReferencePoint( display.TopLeftReferencePoint )
shadow.x, shadow.y = 0, top
shadow.xScale = 320 / shadow.contentWidth
shadow.yScale = 0.25

-- create load button (top left)
local loadBtn = widget.newButton{
label = "Load",
labelColor = { default={255}, over={255} },
font = native.systemFontBold,
xOffset=2, yOffset=-1,
default = "load-default.png",
over = "load-over.png",
width=60, height=30,
left=10, top=28
}

-- onRelease listener callback for loadBtn
local function onLoadRelease( event )
loadSavedNote()
end
loadBtn.onRelease = onLoadRelease -- set as loadBtn's onRelease listener

-- create save button (top right)
local saveBtn = widget.newButton{
label = "Save",
labelColor = { default={255}, over={255} },
font = native.systemFontBold,
xOffset=2, yOffset=-1,
default = "save-default.png",
over = "save-over.png",
width=60, height=30,
left=display.contentWidth-70, top=28
}

-- onRelease listener callback for saveBtn
local function onSaveRelease( event )
saveNote()
end
saveBtn.onRelease = onSaveRelease -- set as saveBtn's onRelease listener

-- display warning that will show at the bottom of screen
local warning = display.newImageRect( "warning.png", 300, 180 )
warning:setReferencePoint( display.BottomCenterReferencePoint )
warning.x = display.contentWidth * 0.5
warning.y = display.contentHeight - 28

2. Text Box and Text Field
두번째 단계는 텍스트 필드와 텍스트 박스 객체를 생성할 겁니다.
이 두 native text 위젯을 사용할 때 폰트를 지정해주기 위해서 native.newFont()를 어떻게 사용하는지 잘 봐 두세요.
그리고 텍스트 박스는 디폴트가 read only라는 것을 명심해 두시구요.
그래서 텍스트 박스에 유저가 문자를 입력할 수 있도록 하려면 isEditable 프로퍼티를 사용하셔야 합니다.

-------------------------------------------------------------------------------------
-- Create textFields

local textFont = native.newFont( native.systemFont )
local currentTop = sbHeight+tbHeight+shadow.contentHeight+10
local padding = 10

-- create textField
titleField = native.newTextField( padding, sbHeight+tbHeight+shadow.contentHeight+10, display.contentWidth-(padding*2), 28 )
titleField.font = textFont
titleField.size = 14

currentTop = currentTop + 28 + padding

-- create textBox
noteText = native.newTextBox( padding, currentTop, display.contentWidth-(padding*2), 264-currentTop-padding )
noteText.isEditable = true
noteText.font = textFont
noteText.size = 14

여기까지 하면 겉모습은 완성 된 겁니다.

다음은 외부 txt파일로 저장하고 불러오는 부분을 다룰 겁니다.

3. Saving and Loading
이 단계에서는 saving과 loading 기능을 넣을 겁니다. 이 기능들은 유저가 Save 버튼이나 Load 버튼을 누르면 생성하도록 하겠습니다.
그리고 최초에 앱이 시작될 때 loadSavedNote()함수가 불려져서 이전에 저장됐던 내용들이 display되도록 하겠습니다.

-------------------------------------------------------------------------------------
-- Saving and Loading functions

function loadSavedNote()
local title_path = system.pathForFile( "title.txt", system.DocumentsDirectory )
local note_path = system.pathForFile( "note.txt", system.DocumentsDirectory )
local fh_title = io.open( title_path, "r" )
local fh_note = io.open( note_path, "r" )

-- load the title
if fh_title then
titleField.text = fh_title:read()
io.close( fh_title )
end

-- load the note
if fh_note then
noteText.text = fh_note:read( "*a" ) -- '*a' is important to preserve line breaks
io.close( fh_note )
end
end

function saveNote()
local title_path = system.pathForFile( "title.txt", system.DocumentsDirectory )
local note_path = system.pathForFile( "note.txt", system.DocumentsDirectory )
local fh_title = io.open( title_path, "w+" )
local fh_note = io.open( note_path, "w+" )

-- load the title
if fh_title then
fh_title:write( titleField.text )
io.close( fh_title )
end

-- load the note
if fh_note then
fh_note:write( noteText.text )
io.close( fh_note )
end
end

loadSavedNote() -- on app start, load previously saved note

이 화면이 완성된 화면입니다.

아래 파일을 다운 받으시면 Full Souce Code와 이미지 파일 등이 있습니다. 참고하세요.

파일 받으시면서 추천버튼도 꾹 부탁드려요.
질문 있으시면 언제든지 댓글에 남겨 주세요.

아래 싸이트에 Corona SDK로 cross platform 앱 개발시 지켜야할 10계명이 올라왔더라구요.

http://fullycroisened.com/10-strategic-tips-for-cross-platform-development-using-corona-sdk/

읽어보니까 많이 공감이 되네요.

그 10가지를 아래 소개합니다.

Corona SDK로 cross platform 앱 개발시 주의해야 할 10가지

1. 실제 기기에서 초기부터 그리고 자주 테스트 하라. 에뮬레이터를 너무 믿지 마라. 실제 기기에서 테스트 하라.
2. 시작하기 전에 해상도에 맞는 이미지 사이즈들을 어떻게 다이나믹하게 다룰지를 먼저 계획하라.
   (각 해상도에 맞춘 이미지들을 미리 계획한다면 많은 시간을 절약할 수 있다.)
3. build.settings 파일에 어떤 퍼미션들을 넣어야 하는지 알고 있어야 한다.
예)
    androidPermissions =
    {
      "android.permission.INTERNET",
      "android.permission.VIBRATE",
      "android.permission.READ_PHONE_STATE",
      "android.permission.CALL_PHONE",
     },
4. 좀 더 테스트 하라.
5. 각 플랫폼에 대한 API들의 제한 사항들을 알고 있어라.
   어떤 기능들은 플랫폼에 따라 기능이 제한 돼 있다.
6. 코딩을 하기 전에 모든것을 Sketch 하라.
   (이렇게 하면 분명 많은 시간을 절약 할 수 있다.)
7. 메모리 사용량과 texture map size 를 항상 체크하라.  
   이렇게 함으로서 쓸데없이 메모리를 차지하는 경우 (이를 일찍 발견하게 돼) 메모리 컨트롤을 더 쉽게 할 수 있다.
8. 지금 하고 있는 것을 다른 곳에서는 어떻게 처리 했는지 research를 해 봐라. 그리고 나서 진행하면 도움이 된다.
   그리고 이것을 공유하라 그리고 당신이 어떻게 좀 더 낫게 구현했는지 살펴 봐라.
9. 커뮤니티를 활용하라. 거기에는 도움을 줄 아주 많은 소스들이 있다.
10. 즐겨라. 코딩이 제일 잘 되는 시간은 밤 11:34부터 새벽 3:07분까지이다.

==> 대부분 공감을 하는데 10번은 공감을 못하겠네요.
일은 일하는 시간에 해야지... 그래야 능률도 더 잘 오르고......
이러면 완전 폐인 되잖아....
초창기에는 나도 밤 새 코딩을 하기도 했는데...
이제는 근무시간에만 딱 하는게 제일 좋더라구요.
밤에 할거면 차라리 일찍 자고 새벽에 일어나서 하던지.....
그리고 6번은 좀 더 강조 하고 싶어요. 단순히 스케치를 하라가 아니고 제대로 된  스토리 보드 만들고 다이어 그램 만들고 클래스/객체 설계도 만들고 진행하라고요. 제대로 기획을 해야 코딩도 제대로 하죠. 앱 만들 때 중요도 기획 80% 코딩 20%.  (내 의견)


  가시기 전 여기 손가락 꾹 ~~~~ ^^        추천 추천...