출처 : http://blog.naver.com/moral369/70169963515
https://github.com/enyojs/enyo
Quick Info
Core
repository는 enyo코어를 포함하고 있다. enyo코어는 필수적인 요소로 최소화했기 때문에 folk work at the metal. 위젯 라이브러리, g11n코드와 다른 멋진 것들(fancy bits -_-;)은 옵션 패키지이다.
Lib
패키지는 lib이라는 폴더 안에 들어간다(e.g Github의 extra나 canvas repository) lib은 enyo가 작업을 위해 사용하는 패키지를 추가하는 방법에 있어 마법 같은 폴더이다. lib폴더에 자식 폴더를 만들고 패키지를 유지하여 사용하는 것을 추천한다. lib 폴더를 좋을대로 많이 만들어도 어디에 놓아도 상관없다.
Warning about file://
노트: 크롬에서는 다양한 샘플들이 file://에서 작동하지 않는다. 왜냐하면 크롬의 보안정책 때문이다. 로컬서버로 실행 하던가 직접 실행해라. 아니면 http://enyojs.com에서 온라인 버전을 사용하등가.
enyo가 뭐냐?
enyo는 모듈화와 캡슐화를 강조하는 오브젝트지향 자바스크립트 어플리케이션 프레임워크이다. enyo는 작고 큰 스케일의 어플리케이션에 적당하다.
enyo는 1.x부터 HP 터치패드 태블릿을 위한 어플리케이션 개발에 사용된 기본 프레임 워크였다. 터치패드에 제공된 enyo는 사용자 인터페이스 컴포넌트 및 서비스 래퍼의 완전한 셋트가 포함되어있다. 여기 있는 건 enyo2이다. enyo 1쓰던 사람들도 걱정마라 1.0부터는 자체 오픈 소스 라이센스이므로 enyo2와 함께 작동하도록 하는 컨트롤과 다른 좋은 것들을 패키지해놨다.
enyo는 처음부터 매우 확장성 있도록 디자인되었다. 이 repository는 코드의 작은 작업단위를 반영한다. 그것은 확장될 수 있다. 라이브러리와 플러그인이 얼마나 많던 간에.
enyo2는 가볍다. 쉽다. 파워풀하다.
뭘 할 수 있나
코어 코드는 enyo kernel, extensions, 몇몇 ajax tools, elements로부터 많은 DOM을 위한 기본 래퍼 kind 등을 포함하고 있다. 이것들은 실제 분산적이다(enyo의 마이크로 빌드를 만드는 것은 쉽다.) 하지만 이게 유용한 워킹 셋이라고 밑는다.
enyo2 커널은 모듈화 컨셉(컴포넌트) 그리고 뷰 컨셉(UI컴포넌트)을 제공한다. DOM 양상은 위젯컨셉(control) 그리고 확장성있는 이벤트 시스템(Dispatcher)을 포함한다. 에이젝트 페키지는 컴포넌트(ajax)로서 베이직 xhr 기능과 xhr의 구현을 포함하고 있다. 터치 패키지는 UI패키지가 공통 control과 팝업을 위한 베이스 kinds를 제공하는 동안 플렛폼 적응적 스크롤러를 제공한다.
다만 이 조각들은 enyo 캡슐화 모델을 사용하여 대형 응용 프로그램을 만들기에 충분하다. 개발자 저레벨 코드를 원하는 개발자들은 roll-their-own하도록 격려된다. 툴의 부유한 사용을 원하는 그들을 위해 사전구축된 라이브러리가 이미 사용 가능하며 개발 되어지고있다.
왜 쓰나
첫번째 우리가 강조할 것은 크로스플랫폼이다. enyo코어는 데탑과 모바일 브라우저 두가지에서 작동한다.
두번째는 enyo의 빌딩 블럭이 어플리케이션에 접근한다. 각각의 어플리케이션 조각들은 컴포넌트이다. 컴포넌트들은 다른 컴포넌트 밖에서 만들어져있다.
예를 들면 <input>태그 <lable>태그의 조합(콤비네이션)을 LabledInput 컴포넌트로 정의하는 것은 쉽다.
하지만 이건 시작일 뿐이다. 궁극적으로 기능의 큰 조각은 싱글 컴포넌트로 노출될 수 있다. 예를 들면 멋진 보고서 생성기나 color picker 또는 전반적인 페인팅 어플리케이션이 있다.
enyo캡슐화 모델을 쪼개기 위해 사용하라 그리고 큰 프로젝트를 정복해라. 특별히 복잡한 어플리케이션 부분도 없다. 왜냐하면 부분을 결합하는 것은 중앙이기 때문이다. 작은 조각으로 복잡한 섹션을 작은 조각으로 인수분해 하는 것은 당연하다. 그리고 모듈화 때문에 모든 이러한 부분들은 재사용이 가능하다. 같은 프로젝트에서 다른 프로젝트에서 심지어 큰 공공프로젝트에서도 말이다.
이것이 개발자들이 창조와 반복성을 피하도록 하기 위해 집중할 수 있도록 하는 우리 전략의 모든 파트이다.
많은 대화가 가능하다.
enyo 코어는 입증되었다. 터치플랫폼을 위해 개발된 hp의 세밀한 응용프로그램에 의해 입증되었다. 결코 쉽지는 않았습니다. 많은 하드웨어 개발자들과 앱팀이 있었다. 하지만 확신한다. enyo 원칙은 효과적이다. 큰 스케일에서 말이다 열심히 해봐라
기초 예제를 주세요.
여기 “안녕세상아” 예제가 있다.
<html>
<head>
<title>Enyo</title>
<script src="enyojs/2.2.0/enyo.js" type="text/javascript"></script>
<link href="enyojs/2.2.0/enyo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script type="text/javascript">
new enyo.Control({content: "Hello From Enyo"}).renderInto(document.body); </script>
</body>
</html>
여기 딱 보면 enyo.js를 로드 한다. 어디서부터? enyojs/2.2.0/에서 말이다 물론 sdk 다운로드 했다면 말이다. Github로부터 풀 했다면 니 소유의 빌드를 만들수 있다. 뭘로? 최소화된 스크립트(minify script>로 어디 안에? enyo/source/minify(노드 필요) 또는 직접 로드할 수 있다.(enyo/source/enyo.js) 소스에서의 로딩은 또한 호출한다 디버그 로딩을 왜냐하면 모듈들은 로드 된다. 각각의 파일들로서, 이건 디버깅을 위해 쉽다. 하지만 좀 덜 효과적이다.
베이스 enyo.control 일한다. html tag처럼. classes와 attributes를 할당할 수 있다. 그리고 스타일을 줄수도 있다.
new enyo.Control({
content: "Hello From Enyo", classes: "foo", style: "color: red", attributes: {tabIndex: 0}
}).renderInto(document.body);
위 코드가 아래와 같은 걸 생산한다.
<div class="foo" style="color: red;" tabIndex="0">Hello From Enyo</div>
이제 니가 하나 이상의 컨트롤을 결합했을 때 굿한 파트들은 시작한다.
new enyo.Control({
components: [
{content: "Hello From Enyo"},
{tag: "hr"}
]
}).renderInto(document.body);
이 컨트롤은 이제 두개의 컨트롤을 하나의 scope으로 캡슐화한다.(우리는 컴포넌트의 어떤 형이든 캡슐화할 수 있다. 그것이 왜 프로퍼티가 컴포넌트라고 불리는 이유이다.)밖의 컨트롤은 캡슐화된 컴포넌트에 대해 책임이 있다. 이것은 그들의 라이프사이클을 관리한다. 그들의 메시지를 듣는다. 그리고 그들로의 참조성을 유지한다. 예를 들면
new enyo.Control({
components: [
{name: "hello", content: "Hello From Enyo", ontap: "helloTap"},
{tag: "hr"}
],
helloTap: function() {
this.$.hello.addStyles("color: red");
}
}).renderInto(document.body);
여기 우리는 하나의 컴포넌트에 이름을 줬따.“hello"라고 말이다. 그리고 이거한테 보내라고 말했다. 뭘? helloTap 메시지를 말이다. 언제? 탭되었을때(탭은 기본적으로 돔클릭 이벤트와 같다. 하지만 이건 마우스와 터치 환경에서 두가지 경우에서 동작한다.) $ 프로퍼티는 모든 서브컴포넌트를 참조하는 해쉬다(우리는 이러한 레퍼런스들을 this에 저장하지 않는다. 이름 충돌을 피하기 위해 말이다). 거긴 add/remove 기계가 없다. 뭘 위한? 이 이벤트를 듣기 위한, 이들은 자기가 알아서 한다.
중요 포인트는 헬로우와 hr, 이들의 레퍼런스들과 행동이 완전히 밖의 control에 포함된다는 거다. 이제 이걸 재사용해보자 우리는 이걸 프로토타이프로 만들 필요가 있다.
enyo.kind({
name: "Hello",
kind: enyo.Control,
components: [
{name: "hello", content: "Hello From Enyo", ontap: "helloTap"},
{tag: "hr"} ],
helloTap: function() { this.$.hello.addStyles("color: red");
}
});// make two, they're small
new enyo.Control({
components: [ {kind: "Hello"}, {kind: "Hello"} ]
}).renderInto(document.body);
이 코드는 enyo.control에서 유래한 "Hello"라고 불리는 새로운 kind를 생성한다. 이건 몇몇 컴포넌트와 행동을 포함한다. Hello 오브젝트를 내가 원하는 만큼 만들 수 있다. 그리고 Hello의 유저는 내부의 것은 더이상 아무것도 알 필요가 없다. .
캡슐화된 오브젝트와 행동(컴포넌트)을 정의하기 위한 이 능력과 이 프로토타입으로서 이들 캡슐화(kind)를 재사용하기 위한 능력은 돈이다.
'Stupid Computer > 6. WebOs' 카테고리의 다른 글
| [Enyo] 윈도우에 webos, enyo 개발환경 구축하기 ( webos install guide, enyo development guide) (0) | 2014.05.09 |
|---|---|
| [Enyo] debug.html file ~ 엔요 debug.html 파일 소스 ~~ (0) | 2014.04.30 |
| [WebOS] Enyo Example ! (0) | 2014.04.22 |
| [enyo] enyo.scroller 사용법 ! (0) | 2014.04.10 |
| [webos] 기초, enyo bootplate 및 sampler 실습해보기 // 따라하면되네요 (0) | 2014.03.19 |
| [webOS] 이클립스 설치 및 webOS플러그인 설치 (0) | 2014.03.19 |
| [webOS] 개발환경 구축하기 ~ webos 개발환경 세팅 ! (0) | 2014.03.19 |
| [webOs] HP, webOS의 새로운 프레임워크 Enyo 발표 (0) | 2014.03.18 |
| [webOS] adb push, adb pull 사용법 및 read only 오류 해결 방법 ~ (0) | 2014.03.07 |
| 아이폰잡는 WebOs ? (2011년 글 ) (0) | 2014.02.25 |