LeonKim

Using data- attributes with JavaScript
Now that we understand what custom data- attributes are and when we can use them, we should probably take a look at how we can interact with them using JavaScript.

If we wanted to retrieve or update these attributes using existing, native JavaScript, then we can do so using the getAttribute and setAttribute methods as shown below:

iOS HostName을 기반으로 현재 디바이스의 네트워크 상태를 얻기위한 메소드다.

HostName은 http:// <<= 당연히 생략해야한다.

SystemConfiguration.h 을 import하고.. 


- (BOOL)networkReachable {
    Reachability *r = [Reachability reachabilityWithHostName:@"121.137.211.103"];
    NetworkStatus internetStatus = [r currentReachabilityStatus];
    if(internetStatus == NotReachable) {
        return NO;
    }
    return YES;
}




wifi 또는 wwan의 구분 또한 가능하다.
NetworkStatus enum은 아래와 같다. 
typedef enum {
	NotReachable = 0,
	ReachableViaWWAN, // this value has been swapped with ReachableViaWiFi for PhoneGap backwards compat. reasons
	ReachableViaWiFi  // this value has been swapped with ReachableViaWWAN for PhoneGap backwards compat. reasons
} NetworkStatus;

따라서 
internetStatus != ReachableViaWWAN
internetStatus != ReachableViaWiFi

처럼 현재 디바이스의 네트워크 상태를 보다 상세히 파알할 수도 있다.

phonegap plugin ChildBrowser가 iOS5에서 정상 동작하지 않을때.

Done 버튼이 iOS5에서 정상동작하지 않아 childBrowser를 한번 열면 닫을수 없는 문제가 있다.



ChildBrowserViewController 클래스의 closeBrowser() 메소드를 아래와 같이 변경하여야 4.3, 5.0 모두에서 정상 동작한다.

-(void)closeBrowser
{
    if(delegate != NULL)
    {
        [self.delegate onClose];
        
    }
    if ([[super parentViewController] respondsToSelector:@selector(dismissModalViewControllerAnimated:)]) {
        [[super parentViewController] dismissModalViewControllerAnimated:YES];
    } else {
        [[super presentingViewController] dismissViewControllerAnimated:YES completion:nil];
    }
    
}

정말 신선하고, 충격적이며 멋있는 주제가 아닐수 없다 +_+a
미루고 미루다가 드디어 한번 구경해 보게 되었다
http://www.commonjs.org/

그동안 javascript는 브라우저에서만 수행되는 인터프리터 언어로서 취급 되어져 왔다.
나도 그리 생각했었다.
하지만 javascript의 영역이 계속 넓혀지고 있다.

The official JavaScript specification defines APIs for some objects that are useful for building browser

javascript는 이제 브라우저를 뛰쳐 나가고 싶어졌고, 많은 개발자들이 이 꿈을 지원해주고있다.
향후 아래와 같은 환경에서도 이제 js는 큰 역할을 짊어 질수 있을것 같다.
• Server-side JavaScript applications 
• Command line tools 
• Desktop GUI-based applications 
• Hybrid applications 

The CommonJS API will fill that gap by defining APIs that handle many common application needs, ultimately providing a standard library as rich as those of Python, Ruby and Java.

CommonJS에서 제안하고 있는 표준스팩들은 아래와 같다.
http://www.commonjs.org/specs/
•Modules
•Binary strings and buffers
•Charset encodings
•Binary, buffered, and textual input and output (io) streams
•System process arguments, environment, and streams
•File system interface
•Socket streams
•Unit test assertions, running, and reporting
•Web server gateway interface, JSGI
•Local and remote packages and package management

위 제안들을 모두 구현한 구현체가 0.x대 버전을 넘어 1.x대로 진화하는 이후 부터 어떤 일들이 벌어질지 정말 기대된다.
이미 CommonJS에서 제안한 표준에 따라 구현된 구현체들이 상당하다.
아래 주소에서 확인 가능하다.
http://www.commonjs.org/impl/

Node.js 역시 CommonJS의 제안한 표준을 따라 CommonJS에서 정의한 모듈들을 일부 구현하였다.
현재 Node.js는 아래와 같은 상태로서 
v0.4.10 (stable) 
v0.5.2 (unstable) 
http://nodejs.org/#download
0.4 ~0.5 대 버전임에도 불구하고, 벌써부터 Node.js등을 열심히 지지고 볶고 있는 사람들이 많아진것을 구글링을 통해 쉽게 알수 있다.

간단하게 CommonJS에서 제안하고 있는 JS모듈을 Node.js에서 어떻게 사용하는지 모양을 살펴보자.
흔히 FF에 console에서 로그를 찍어보기 위해 console.log(), console.dir() 메소드를 사용하는데, 
http://wiki.commonjs.org/wiki/Console에 해당 모듈도 논의의 대상으로서 리스트에 올라 있다.
현재 Console의 논의 상태와 제안 내용을 살펴 볼수 있다.
11년 7월 현재 아직 PROPOSED, DISCUSSED, SOME IMPLEMENTATIONS 상태임을 알수 있다.

Node.js에서는 이미 이 제안을 참고하여 구현되어있고, 해당 모듈의 사용이 가능하다.
Node.js에서 100%는 아니지만 몇몇 기능을 구현하였고 아래와 같은 형태로 사용이 가능하다.
var maLog = require("console");
maLog.log("Hello world~!!");
-출력결과 당연히 Hello world~!! 라는 주어진 문자열을 출력
>Hello world~!!

maLog.dir(maLog);
-출력결과 당연히 maLog 객체에 assign된 console 모듈 내용을 출력한다. 
- 현재 Node.js에서는 Console스펙의 16가지 기능중 9가지 기능을 구현 제공하고 있음을 알수 있다.
>
{ log: [Function],  
   info: [Function],  
   warn: [Function],  
   error: [Function],  
   dir: [Function],  
   time: [Function],  
   timeEnd: [Function],  
   trace: [Function],  
   assert: [Function] 
}
슬슬 Node.js를 열심히 만져 보아야겠다.

var self = this;

navigator.geolocation.getCurrentPosition( function(position) {

self._lat = position.coords.latitude;

self._lng = position.coords.longitude;

self.getPositionSuccess(type, destinationAddress);

/**

 * Force the PhoneGap geolocation to be used instead of built-in.

 */

Geolocation.usingPhoneGap = false;

Geolocation.usePhoneGap = function() {

    if (Geolocation.usingPhoneGap) {

        return;

    }

    Geolocation.usingPhoneGap = true;

    // Set built-in geolocation methods to our own implementations

    // (Cannot replace entire geolocation, but can replace individual methods)

    navigator.geolocation.setLocation = navigator._geo.setLocation;

    navigator.geolocation.getCurrentPosition = navigator._geo.getCurrentPosition;

    navigator.geolocation.watchPosition = navigator._geo.watchPosition;

    navigator.geolocation.clearWatch = navigator._geo.clearWatch;

    navigator.geolocation.start = navigator._geo.start;

    navigator.geolocation.stop = navigator._geo.stop;

if(jquery.csob.isAndroid == false){

//Android일때는 ChildBrowser 메소드를 수행할 필요가 없다.

ChildBrowser.install(); 

}else{

/*

Android일때 Geolocation 기능을 사횽하고자 할때 아래 메소드를 수행해줘야 한다.

*/

Geolocation.usePhoneGap();

}

<div data-role="page" id="page_default" data-theme="e">
.
.
 

<div data-role="content">

<div id="collapser" data-role="collapsible" data-collapsed="true">

<h3>검색어 입력</h3>

<input  id="enteredItemField" type="search" value="" placeholder="검색어를 입력하세요."</input>

<div data-role="controlgroup" data-type="horizontal" align="center">

<a id="enteredItemSaveButton"href="#" data-icon="star" data-role="button">검색어 저장</a>

<a id="directSearchButton"href="#" data-icon="search" data-role="button">바로 검색</a>

</div>

</div>

<ul id="ItemList" data-role="listview">

<!-- 여기에 동적으로 li가 붙는다. -->

</ul>

</div>

<!-- CONTENT END -->

</div>
.
.



1. 특정 영역만을 scroll가능도록 하기 위해서 일단 이 페이지 (#page_default) 의 스크롤링을 prevent하자.

$("#page_default").live('touchmove', function (e) { e.preventDefault(); }, false); 

 

2. iscroll.js를 페이지에 import하자.
<script src="./lib/iscroll.js"></script>





3. scrolling되었으면 하는 영역을 래핑하자.
 

<div id="wrapper">
    <div id="scroller">
        <ul id="itemList" data-role="listview">
            <li>...</li>
        </ul>
    </div>
</div>

#wrapper {
    position:relative;
    z-index:1;
    width:100%;
    height:350px;
    overflow:auto;
}

roll = new iScroll('scroller'); 


결과 >> 리스트 부분만 스크롤링 된다. 

이 모든 내용은 
http://cubiq.org/iscroll 에 돔 더 자세히 잘 나와 있으니, 참고도록 하자.

" This is an event that fires when PhoneGap is fully loaded. "
(ref : http://docs.phonegap.com/phonegap_events_events.md.html

 말 그대로 deviceready 이벤트는 phonegap 이 모두 로드 완료되었을대 fire되는 이벤트 . .

결국 phonegap 로드가 실패했으니 deviceready 이벤트가 발생하지 않은것.

대부분 phonegap.js의 경로가 잘못되어 발생하는 문제다.

phonegap.js의 import 구문의 경로와 실제 phonegap.js의 위치가 일치하는지를 다시 한번 살펴보도록 하자.