언어&플랫폼/Html/JQuery 2013. 9. 10. 14:23

.min.js를 .js로 변환

http://jsbeautifier.org/ 


자바스크립트 소스를 알아보기 편하게 정렬 시켜주는 사이트입니다. 

해당코드를 붙여넣어서 아래 버튼을 클릭

'언어&플랫폼 > Html/JQuery' 카테고리의 다른 글

[web] jquery ajax json data  (0) 2013.10.07
크롬에서 크로스도메인 해제 하기  (0) 2013.10.04
[html] 페이지 이동하기  (0) 2013.08.21
[HTML]DIV 태그로 왼쪽,오른쪽정렬을 한줄에 다 표현하는 방법  (0) 2013.08.01
javascript 현재 경로 얻기  (0) 2013.07.10
posted by cozyboy
:
언어&플랫폼/Html/JQuery 2013. 8. 21. 20:09

[html] 페이지 이동하기

http://elren.blog.me/120172160904

 

<head>

<META http-equiv="refresh" content="3; url=http:home/home.html>

</head>

'언어&플랫폼 > Html/JQuery' 카테고리의 다른 글

크롬에서 크로스도메인 해제 하기  (0) 2013.10.04
.min.js를 .js로 변환  (0) 2013.09.10
[HTML]DIV 태그로 왼쪽,오른쪽정렬을 한줄에 다 표현하는 방법  (0) 2013.08.01
javascript 현재 경로 얻기  (0) 2013.07.10
[bootstrap] layout Designer site (beta)  (0) 2013.06.27
posted by cozyboy
:
언어&플랫폼/Html/JQuery 2013. 8. 1. 09:45

[HTML]DIV 태그로 왼쪽,오른쪽정렬을 한줄에 다 표현하는 방법

<div style="float:left;">왼쪽</div>
<div style="float:right;">오른쪽</div>



[펌]:

http://photoshop-textcube.blogspot.kr/2009/05/htmldiv-%ED%83%9C%EA%B7%B8%EB%A1%9C-%EC%99%BC%EC%AA%BD%EC%98%A4%EB%A5%B8%EC%AA%BD%EC%A0%95%EB%A0%AC%EC%9D%84-%ED%95%9C%EC%A4%84%EC%97%90-%EB%8B%A4-%ED%91%9C%ED%98%84%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95.html

'언어&플랫폼 > Html/JQuery' 카테고리의 다른 글

.min.js를 .js로 변환  (0) 2013.09.10
[html] 페이지 이동하기  (0) 2013.08.21
javascript 현재 경로 얻기  (0) 2013.07.10
[bootstrap] layout Designer site (beta)  (0) 2013.06.27
간단하게 Tab을 구현하기 위한 제안 , jQuery + CSS [펌]  (0) 2013.06.26
posted by cozyboy
:
언어&플랫폼/Html/JQuery 2013. 7. 10. 23:14

javascript 현재 경로 얻기

var path = window.location.pathname;


'언어&플랫폼 > Html/JQuery' 카테고리의 다른 글

[html] 페이지 이동하기  (0) 2013.08.21
[HTML]DIV 태그로 왼쪽,오른쪽정렬을 한줄에 다 표현하는 방법  (0) 2013.08.01
[bootstrap] layout Designer site (beta)  (0) 2013.06.27
간단하게 Tab을 구현하기 위한 제안 , jQuery + CSS [펌]  (0) 2013.06.26
[bootstrap] 기본정리 [펌]  (0) 2013.06.24
posted by cozyboy
:
언어&플랫폼/Html/JQuery 2013. 6. 27. 09:23

[bootstrap] layout Designer site (beta)

주소 : http://www.layoutit.com/build


bootstrap을 사용하여 drag&drop으로 레이아웃을 잡고, 해당 소스를 다운받아 사용할 수 있다.

'언어&플랫폼 > Html/JQuery' 카테고리의 다른 글

[HTML]DIV 태그로 왼쪽,오른쪽정렬을 한줄에 다 표현하는 방법  (0) 2013.08.01
javascript 현재 경로 얻기  (0) 2013.07.10
간단하게 Tab을 구현하기 위한 제안 , jQuery + CSS [펌]  (0) 2013.06.26
[bootstrap] 기본정리 [펌]  (0) 2013.06.24
HTML 태그 설명 모음 사이트  (0) 2013.06.12
posted by cozyboy
:
언어&플랫폼/Html/JQuery 2013. 6. 26. 15:44

간단하게 Tab을 구현하기 위한 제안 , jQuery + CSS [펌]

출처 : http://windowx.tistory.com/274#recentTrackback




오늘은 jQuery기반 CSS Tab 을 소개 해 드립니다..

물론 제가 개발한 건 아니고.... 급하게 쓸만한것 소싱하가다가 물건이다 십에서 소개 해 드립니다.
(현업에서 jQueryUI tab 의 사용이 어려울때가 많습니다. 특히 디자이너가 반대 하는경우가 많죠...
이럴경우 손쉽게 css 를 수정할 수 있는 tab 이 필요한데, 그럴때 안성마춤 입니다.)






HTML
<ul class="tabs">
    <li><a href="#tab1">Gallery</a></li>
    <li><a href="#tab2">Submit</a></li>
</ul>

<div class="tab_container">
    <div id="tab1" class="tab_content">
        <!--Content-->
    </div>
    <div id="tab2" class="tab_content">
       <!--Content-->
    </div>
</div>

TAB CSS

ul.tabs {
	margin: 0;
	padding: 0;
	float: left;
	list-style: none;
	height: 32px; /*--Set height of tabs--*/
	border-bottom: 1px solid #999;
	border-left: 1px solid #999;
	width: 100%;
}
ul.tabs li {
	float: left;
	margin: 0;
	padding: 0;
	height: 31px; /*--Subtract 1px from the height of the unordered list--*/
	line-height: 31px; /*--Vertically aligns the text within the tab--*/
	border: 1px solid #999;
	border-left: none;
	margin-bottom: -1px; /*--Pull the list item down 1px--*/
	overflow: hidden;
	position: relative;
	background: #e0e0e0;
}
ul.tabs li a {
	text-decoration: none;
	color: #000;
	display: block;
	font-size: 1.2em;
	padding: 0 20px;
	border: 1px solid #fff; /*--Gives the bevel look with a 1px white border inside the list item--*/
	outline: none;
}
ul.tabs li a:hover {
	background: #ccc;
}
html ul.tabs li.active, html ul.tabs li.active a:hover  { /*--Makes sure that the active tab does not listen to the hover properties--*/
	background: #fff;
	border-bottom: 1px solid #fff; /*--Makes the active tab look like it's connected with its content--*/
}

Tab Conent CSS

b_container {
	border: 1px solid #999;
	border-top: none;
	overflow: hidden;
	clear: both;
	float: left; width: 100%;
	background: #fff;
}
.tab_content {
	padding: 20px;
	font-size: 1.2em;
}

Tab Script

$(document).ready(function() {

	//When page loads...
	$(".tab_content").hide(); //Hide all content
	$("ul.tabs li:first").addClass("active").show(); //Activate first tab
	$(".tab_content:first").show(); //Show first tab content

	//On Click Event
	$("ul.tabs li").click(function() {

		$("ul.tabs li").removeClass("active"); //Remove any "active" class
		$(this).addClass("active"); //Add "active" class to selected tab
		$(".tab_content").hide(); //Hide all tab content

		var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
		$(activeTab).fadeIn(); //Fade in the active ID content
		return false;
	});

});



'언어&플랫폼 > Html/JQuery' 카테고리의 다른 글

javascript 현재 경로 얻기  (0) 2013.07.10
[bootstrap] layout Designer site (beta)  (0) 2013.06.27
[bootstrap] 기본정리 [펌]  (0) 2013.06.24
HTML 태그 설명 모음 사이트  (0) 2013.06.12
css 선택자  (0) 2013.06.11
posted by cozyboy
:
언어&플랫폼/Html/JQuery 2013. 6. 24. 23:06

[bootstrap] 기본정리 [펌]

[펌] : http://helloworld.naver.com/helloworld/67876


부트스트랩(Bootstrap)은 트위터에서 오픈 소스로 공개한 웹 프런트 엔드 개발 도구입니다. 부트스트랩은 유연한 HTML, CSS, JavaScript 템플릿과 다양한 UI 컴포넌트, 인터랙션을 제공해서 웹 사이트를 구축하는 시작점이 될 수 있습니다. 이 글에서는 부트스트랩의 특징이 무엇이고 어떻게 부트스트랩으로 웹 사이트 구축을 시작할 수 있는지 간단하게 알아 보겠습니다.

Bootstrap from Twitter

웹 UI 개발은 쉬워 보이면서도 직접 접하면 수많은 어려움에 부딪히게 된다. 단일한 클라이언트 환경만 고려하면 되는 다른 UI 개발과는 달리, 웹 UI 개발은 다양한 브라우저 환경에서 호환성을 충족시키는 크로스 브라우징(Cross Browsing) 작업이 필요하다.

Internet Explorer, Firefox, Chrome, Safari, Opera 등 PC에서 많이 사용하는 브라우저만 해도 5가지이며, 각 브라우저의 버전이나 운영체제에 따라 별도의 작업을 해야 하는 경우도 있다. 게다가 최근에는 스마트폰, 태블릿 PC 등 다양한 스크린 크기와 기기에 특화된 브라우저가 있는 모바일 환경까지 고려해야 하는 상황이다.

중소규모의 웹 사이트에서 이렇게 다양하고 복잡한 브라우저 환경에 대응해 크로스 브라우징 작업을 하기에는 부담이 많을 수 밖에 없다. 트위터의 프런트 엔드(Front End) 툴킷인 부트스트랩 (Bootstrap)은 이런 어려움을 해결해 간편하고 빠르게 유연한 사이트를 구현할 수 있는 시작점을 제공해 준다.

부트스트랩은 트위터의 UI 디자이너 Mark Otto와 개발자 Jacob Thornton이 만든 오픈소스 프런트 엔드 툴킷이다. 부트스트랩의 의미가 "컴퓨터의 전원을 켜거나 리셋 키를 누르는 따위의 동작으로 시스템을 시동하는 일"이라는 것에서 알 수 있듯이 부트스트랩은 웹 사이트를 구축하는 시작점으로 유연한 HTML, CSS, JavaScript 템플릿을 제공한다. 또한, 자주 사용하는 다양한 UI 컴포넌트와 인터랙션을 포함하고 있다.

이 글에서는 부트스트랩이 제공하는 요소와 부트스트랩의 특징을 살펴보면서 부트스트랩으로 어떻게 웹 사이트를 만들 수 있을지 간단하게 알아 보겠다.

격자 시스템

격자(Grid)는 레이아웃 디자인에 있어 기본적인 요소이다. 웹 페이지의 레이아웃은 일반적으로 <div> 태그와 CSS를 이용해 화면을 분할해 요소를 배치한다. 이러한 화면 분할을 정형화해서 격자 레이아웃 시스템을 제공하는 CSS 프레임워크로는 Blueprint, 960 grid, YUI CSS grids 등이 유명하다.

부트스트랩도 자체적인 격자 레이아웃 시스템을 제공한다. 부트스트랩의 격자 시스템은 12열의 격자(12-column grid)로 이루어져 있으며 기본 버전과 유동 버전이 있다. 또한 다양한 화면 크기에 대응하기 위해 4개의 디자인 변형체를 갖는데 이는 나중에 설명할 반응형 디자인과 연계되어 동작한다.

기본 격자 시스템

기본 격자 시스템(Default grid system)은 940px 고정 너비에 12열 격자로 이루어진다.

행은 "row", 열은 "span*"이라는 클래스로 표현되는데, "span*" 클래스는 span1~12 까지 사용할 수 있다.

열 사이의 간격은 20px이며 "span1" 클래스의 너비는 60px이다. "span*" 클래스의 숫자가 하나씩 증가할 때마다 너비가 80px씩 늘어나 "span12" 클래스의 너비는 전체 너비인 940px이 된다.

fea5f257d28fadbca6ceff64a0f03c65.png

그림 1. 12열 격자 시스템

그림 1에서 3번째 행에 해당하는 마크업은 아래와 같이 작성할 수 있으며, 화면에 300px + 20px + 620px 크기의 영역(전체 940px)으로 표현된다.

?
1
2
3
4
<div class="row">
    <div class="span4">…</div>
    <div class="span8">…</div>
</div>

유동 격자 시스템

유동 격자 시스템(Fluid grid system)은 격자 크기를 픽셀이 아닌 퍼센트로 사용한다. 유동 격자 시스템을 사용하려면 행의 클래스를 "row-fluid"로 바꾸기만 하면 된다.

?
1
2
3
4
<div class="row-fluid">
    <div class="span4">…</div>
    <div class="span8">…</div>
</div>

열 위치 이동하기 (Offsetting columns)

열에 "offset*" 클래스를 추가하면 열을 오른쪽으로 이동시켜 배치할 수 있다. 단, 열 위치 이동은 기본 격자 시스템에서만 가능하다.

92a4908c7e06a6ff1d880be4116110b9.png

그림 2. 오프셋을 이용한 격자 위치 이동

그림 2에서 첫 번째 행에 해당하는 마크업은 아래와 같이 작성할 수 있다. 두 번째 열에 해당하는 <div>는 격자 4개의 너비(offset4)만큼 오른쪽으로 이동한다.

?
1
2
3
4
<div class="row">
    <div class="span4">…</div>
    <div class="span4 offset4">…</div>
</div>

열 내부에 격자 포함하기

<그림 3> 과 같이 열 내부에 격자를 포함시키려면 "row" 클래스와 "span*" 클래스가 있는 새로운 <div> 태그를 추가로 지정하면 된다.

400128dcaaac7f667cf4f3ad9bdffc95.png

그림 3. 중첩 격자

기본 격자인 경우는 내부 열의 합이 부모 열의 숫자가 되도록 지정한다.

?
1
2
3
4
5
6
7
8
9
<div class="row">
    <div class="span6">
    Level 1 of column
        <div class="row">
            <div class="span3">Level 2</div>
            <div class="span3">Level 2</div>
        </div>
    </div>
</div>

유동 격자인 경우는 퍼센트로 되어 있어 내부 열의 합이 부모열의 숫자가 아닌 12가 되도록 지정한다.

?
1
2
3
4
5
6
7
8
9
<div class="row-fluid">
    <div class="span6">
    Level 1 of column
        <div class="row-fluid">
            <div class="span6">Level 2</div>
            <div class="span6">Level 2</div>
        </div>
    </div>
</div>

반응형 디자인

반응형 디자인(Responsive Design)이란 CSS3의 미디어쿼리(media query)를 이용해 PC, 태블릿 PC, 스마트폰 등 다양한 기기의 해상도나 화면 크기에 최적화된 레이아웃으로 자동으로 변환되도록 디자인하는 기법을 말한다.

부트스트랩은 유연하고 간단한 화면 구성을 위해 격자 시스템과 함께 반응형 디자인을 적용해 제공한다. 반응형 디자인을 적용하면 격자의 크기도 화면 크기에 따라 다음 표와 같이 변경된다.
표 1. 기기에 따른 격자 크기의 변화

구분

화면 너비

격자 열 너비

격자 열 간격 너비

스마트폰

480px 이하

고정되지 않은 가변 폭

세로 모드 태블릿 PC

767px 이하

고정되지 않은 가변 폭

가로 모드 태블릿 PC

768px 이상

42px

20px

기본

980px 이상

60px

20px

와이드 모니터

1200px 이상

70px

30px

다음 그림은 반응형 디자인을 적용해 화면 크기에 따라 레이아웃이 변하는 예이다.

d693b1bd1908b2ec062c1cb26aef620b.png    

그림 4. 화면 크기에 따른 반응형 디자인

기기의 크기에 반응해 미디어 쿼리가 동작하도록 하는 CSS는 다음과 같다.

?
1
2
3
4
5
6
7
8
9
10
11
// Landscape phones and down
@media (max-width: 480px) { ... }
  
// Landscape phone to portrait tablet
@media (max-width: 767px) { ... }
  
// Portrait tablet to landscape and desktop
@media (min-width: 768px) and (max-width: 979px) { ... }
  
// Large desktop
@media (min-width: 1200px) { ... }

또한, 이 CSS에는 기기에 최적화된 내용이 보이도록 하는 유틸리티(utility)성격의 선택자(selector)가 포함되어 있다.

표 2 기기별 반응형 CSS 클래스

클래스

휴대폰

480px 이하

태블릿 PC

767px 이하

데스크톱

768px 이상

.visible-phone

보임

보이지 않음

보이지 않음

.visible-tablet

보이지 않음

보임

보이지 않음

.visible-desktop

보이지 않음

보이지 않음

보임

.hidden-phone

보이지 않음

보임

보임

.hidden-tablet

보임

보이지 않음

보임

.hidden-desktop

보임

보임

보이지 않음

깔끔하고 정돈된 느낌의 기본 CSS 제공

부트스트랩은 기본으로 적용한 CSS를 적용해도 깔끔하고 잘 정돈된 느낌의 버튼과 여러 스타일을 제공한다.

다음은 부트스트랩에서 기본으로 제공하는 버튼 디자인이다.

표 3 버튼 종류별 CSS 클래스 예

버튼

class=""

설명

8b65d3ce21038004504352fd65f9a6d4.png

btn

그라데이션이 적용된 회색 기본 버튼

d01b03fd7364b16709d54fdd6677ed6b.png

btn btn-primary

시각적으로 강조해야 할 필요가 있거나 특별한 행동을 하는 것을 표시하는 버튼

27f6354b3b87505e9a464ae3d4f50c6b.png

btn btn-info

기본 버튼을 대체해서 사용할 수 있는 버튼

34a0b3adb9fce45a517ce59b4c501ca4.png

btn btn-success

성공한 행동이나 긍정적인 행동을 표시하는 버튼

d20338e43681128407da7dcb39d8f69a.png

btn btn-warning

주의 버튼

c2f705a5ceb4d63234e47fd435f6b2f8.png

btn btn-danger

위험이나 부정적인 영향이 있음을 표시하는 버튼

c4178273a449e4c7c571ef32cc2f7b72.png

btn btn-inverse

특별한 의미 없이 일반적으로 사용할 수 있는 어두운 회색 버튼

다음은 부트스트랩에서 기본으로 제공하는 폼(Form) 디자인이다.

91ca055eb6ec5e5a5e4ac16c6c531bc7.png

그림 5. 폼 표현 CSS 클래스

부트스트랩은 처음에는 Internet Explorer를 지원하지 않았다. 그러나 나중에 Internet Explorer 7 이상에서도 호환되도록 바꾸었다. 이 여파로 Internet Explorer에서는 디자인이 완전히 동일하지 않다. 그라데이션(gradation)과 둥근 모서리(rounded-border) 등 CSS 지원 여부에 따라 보이는 모양이 조금씩 다를 수 있다. 하지만 전체적인 레이아웃과 색감 등은 유지하고 있다.

63263abf1fe0f229a3bcc626380810e2.png

그림 6. Internet Explorer에서의 폼 표현 예제 비교.

CSS 리셋(Reset)에는 Nicolas Gallagher의 normalize.css를 사용하고 있으며 UI의 아이콘 이미지는 Glyphicons에서 제공한 아이콘 셋을 이용하고 있다. 아이콘 셋은 단일 이미지로 CSS 스프라이트(CSS Sprite) 기법을 적용해 사용하고 있다.

e75a758b7d20f655fa34dfd6ec69c174.png

그림 7. Glyphicons 아이콘 셋

다음은 아이콘 셋을 적용한 UI 컴포넌트의 예이다.

a330ec77cf395920ac48ad3494073e25.png

그림 8. 아이콘 셋이 적용된 UI 컴포넌트

부트스트랩의 CSS는 나중에 설명할 LESS로 작성되어 있어서 쉽게 고쳐서 테마를 재생산할 수 있다.

UI 컴포넌트와 jQuery 플러그인

웹 페이지를 제작할 때 자주 사용하는 UI 패턴이 있다. 이러한 패턴을 재사용하기 쉽도록 마크업과 CSS, JavaScript를 묶어서 제공하는 것을 UI 컴포넌트라고 부른다.

부트스트랩에는 기본 CSS가 적용되어 있어 손쉽게 가져다 쓰면 되는 다양한 UI 컴포넌트가 있다. 그 중 동적인 인터랙션이 필요한 컴포넌트는 jQuery 플러그인 형태의 JavaScript로 컨트롤할 수 있도록 했다.

기본 CSS를 사용하는 컴포넌트에는 버튼 그룹, 드롭다운 목록, 내비게이션, 탭, 페이지 이동 버튼, 배지, 섬네일 레이아웃, 경고 표시, 닫기 아이콘 등이 있다. 자세한 컴포넌트 목록과 예는 http://twitter.github.com/bootstrap/components.html 페이지를 참조한다.

jQuery 플러그인으로 인터랙션을 컨트롤하는 컴포넌트에는 모달 레이어, 드롭다운, 토글 탭, 툴팁 등이 있다. 자세한 컴포넌트 목록과 예는 http://twitter.github.com/bootstrap/javascript.html를 참조한다.

참고

NHN에서도 손쉽게 가져다 사용할 수 있는 컴포넌트를 공개하고 있다.

UIO Factory(http://html.nhndesign.com/uio_factory)는 정적인 UI 패턴 모음을 제공하고 있으며, 동적인 UI를 위한 컴포넌트는 Jindo 프레임워크 기반의 Jindo Component(http://dev.naver.com/projects/jindo/)로 제공하고 잇다.

LESS

일반 프로그래밍 언어와 달리 CSS는 상속이나 변수 등의 개념이 없어서 단순히 화면 높이가 변경되어도 일일이 찾아서 수정해야 한다. CSS 작성과 관리가 번거롭기 때문에 이러한 어려움을 해결하고자 CSS 전처리 도구들이 생겨났다.

CSS 전처리 도구는 기존 CSS 문법을 확장해 자체적으로 정의한 문법을 가지고 있다. 확장한 문법으로 변수나 믹스인(mixin), 상속, 연산, 함수 등의 기능을 기술할 수 있으며, 확장 CSS로 작성된 코드를 컴파일해 브라우저에 호환하는 최종 CSS를 만들어 낸다. CSS3에 이러한 동적이고 객체지향적인 개념이 빠진 것에 대해 아쉬움을 갖는 사람도 있었다.

대표적인 CSS 전처리 도구에는 LESS, Sass, Stylus 등이 있는데, 문법이나 기능은 대동소이하다. 부트스트랩은 이 가운데 LESS를 CSS 전처리 도구로 사용한다.

상당한 장점에도 불구하고 국내의 사이트들이 실무에서 이러한 CSS 전처리 도구를 적용한 사례는 거의 없다. 컴파일해야 하는 불편함도 있지만 홈페이지 디자인을 주로 단발성 외주로 처리하는 등의 환경으로 인해 이전 CSS가 재사용되지 않고 버려지고, 잘 구조화된 마크업과 CSS를 작성할 수 있는 전문가도 많지 않기 때문이다. 해외에서는 부트스트랩이 github로 공개되자 CSS 전처리 도구를 LESS대신 Sass나 Stylus로 변경한 프로젝트도 만들어지는 등 활발히 연구하고 활용하고 있다.

LESS에 대해 좀 더 알아보도록 하자.

LESS 문법

LESS 문법은 표준 CSS 문법에 기능만 확장한 문법을 사용한다.

변수 선언

변수를 선언할 때에는 @ 심볼을 이용한다.

?
1
2
3
4
5
6
7
8
9
@mainColor: #0982c1;
@siteWidth: 1024px;
@borderStyle: dotted;
  
body {
    color: @mainColor;
    border: 1px @borderStyle @mainColor;
    max-width: @siteWidth;
}

믹스인 함수

다음과 같이 클래스 선택자와 유사한 형태로 믹스인 함수를 만들어 활용할 수 있다.

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* LESS mixin error with (optional) argument @borderWidth which defaults to 2px if not specified */
.error(@borderWidth: 2px) {
    border: @borderWidth solid #F00;
    color: #F00;
}
  
.generic-error {
    padding: 20px;
    margin: 4px;
    .error(); /* Applies styles from mixin error */
}
.login-error {
    left: 12px;
    position: absolute;
    top: 20px;
    .error(5px); /* Applies styles from mixin error with argument @borderWidth equal to 5px */
}

상속

LESS는 클래스 선택자 형태로 믹스인 함수를 정의하기 때문에 일반 클래스 선택자도 믹스인 함수처럼 사용할 수 있어서 다음과 같이 상속을 표현할 수 있다.

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.block {
    margin: 10px 5px;
    padding: 2px;
}
  
p {
    .block; /* Inherit styles from '.block' */
    border: 1px solid #EEE;
}
ul, ol {
    .block; /* Inherit styles from '.block' */
    color: #333;
    text-transform: uppercase;
}

연산자

연산이 가능한 속성값에는 다음과 같이 간단한 연산자를 사용할 수도 있다.

?
1
2
3
4
5
6
body {
    margin: (14px/2);
    top: 50px + 100px;
    right: 100px - 50px;
    left: 10 * 10;
}

중첩된 선택자

다음과 같이 중첩된 선택자를 표현할 수 있다.

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
section {
    margin: 10px;
  
    nav {
        height: 25px;
      
        a {
            color: #0982C1;
          
            &:hover {
                text-decoration: underline;
            }
        }
    }
}

중첩된 선택자를 컴파일하면 다음과 같은 CSS가 나온다.

?
1
2
3
4
5
6
7
8
9
10
11
12
section {
    margin: 10px;
}
section nav {
    height: 25px;
}
section nav a {
    color: #0982C1;
}
section nav a:hover {
    text-decoration: underline;
}

부트스트랩 LESS

부트스트랩에는 레이아웃과 컴포넌트와 관련해 미리 정의한 수많은 LESS 변수와 믹스인이 있다. 미리 정의된 변수와 믹스인을 수정해 간단하게 변경할 수 있으며 다양한 테마를 만들어 낼 수 있다.

부트스트랩에서 기본으로 정의한 LESS 변수와 값의 예이다. 자세한 내용은 http://twitter.github.com/bootstrap/less.html#variables 페이지를 참조한다.

fa88a75d98a1cdd6aa2f9ff6bb8b16c8.png

그림 9 부트스트랩의 다양한 LESS 변수

다음은 부트스트랩에서 기본으로 정의한 믹스인의 예이다. 자세한 내용은 http://twitter.github.com/bootstrap/less.html#mixins 페이지를 참조한다.

52ce72d10b35598b0a8f817dcd665342.png

그림 11. 부트스트랩의 다양한 LESS 믹스인들

LESS 컴파일

LESS 컴파일은 클라이언트 방식과 서버 방식이 있다.

클라이언트 방식은 less.js 파일을 웹 서버에 두고 다음과 같이 링크하면 된다.

?
1
<link rel="stylesheet/less" href="http://helloworld.naver.com/bootstrap.less" <script="" src="http://helloworld.naver.com/less.js">

서버 방식은 node.js 패키지 매니저에서 컴파일러를 받아 설치한 후 사용한다.

?
1
2
$ npm install –g less
$ lessc bootstrap.less > bootstrap.css

커스터마이징

부트스트랩 홈페이지에서는 LESS에 적용된 변수 값을 변경하고 자신이 사용할 CSS와 jQuery 플러그인만 선택해 커스터마이징한 세트를 다운로드할 수 있다.

컴포넌트와 jQuery 플러그인을 선택하면 필요한 CSS와 JavaScript만 골라서 받을 수 있다.

85319acad8a3b474128bc170ee04ef6b.png

그림 12 부트스트랩 커스터마이징 페이지

LESS 컴파일러가 없어도 커스터마이징 페이지에서 LESS 변수에 적용된 값을 원하는 대로 변경할 수 있다.

2d8eb68069ceeee3f16e7638cb4ab753.png

그림 13 LESS 변수 값 커스터마이징

컴포넌트와 jQuery 플러그인을 선택하고 LESS 변수 값을 수정한 다음 다운로드 버튼을 클릭하면 자신이 선택한 CSS와 JavaScript를 압축한 .zip 파일을 다운로드할 수 있다.

23cfea2b6ff9acf18482dd56acf6e589.png

그림 14. 커스터마이징 결과 다운로드

커스터마이징 페이지 이외에도 http://bootswatch.com/ , http://wrapbootstrap.com/, http://stylebootstrap.info/ 등과 같은 다양한 부트스트랩용 테마 제공 사이트를 활용할 수도 있다.

마치며

지금까지 트위터의 프런트 엔드 개발 프레임워크라고 할 수 있는 부트스트랩에 대해 살펴보았다. 사실 개별적으로 떼어 보면 새로운 기술이 있는 것이 아니다. 특별할 것이 없어 보인다. 하지만 github에서 Watch와 Fork 횟수가 수위에 오를 정도로 인기가 높고 다양한 관련 사이트가 존재한다.

얼핏 보면 무언가 특별한 것이 없어 보이지만 그 안에는 트위터의 프런트 엔드 개발 노하우가 고스란히 녹아 있고 개발자들이 쉽고 빠르게 가져다 활용할 수 있도록 잘 구성해 놓았다. 부트스트랩 소개 페이지(http://twitter.github.com/bootstrap/)에서도 설명하듯이 괴짜 개발자들이 괴짜 개발자들을 위해 만들었기(Built for and by nerds)때문이 아닌가 싶다.

참고 문헌

[1] Bootstrap, from Twitter: http://twitter.github.com/bootstrap/

[2] Stepping Out Width Bootstrap from Twitter: http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/stepping-out-with-bootstrap-from-twitter/

[3] CSS3 미디어 쿼리: http://www.w3.org/TR/css3-mediaqueries/

[4] Sass vs. LESS vs. Stylus: http://net.tutsplus.com/tutorials/html-css-techniques/sass-vs-less-vs-stylus-a-preprocessor-shootout/

[5] 20 Resources for Bootstrap Lovers: http://designshack.net/articles/css/20-awesome-resources-for-twitter-bootstrap-lovers/

'언어&플랫폼 > Html/JQuery' 카테고리의 다른 글

[bootstrap] layout Designer site (beta)  (0) 2013.06.27
간단하게 Tab을 구현하기 위한 제안 , jQuery + CSS [펌]  (0) 2013.06.26
HTML 태그 설명 모음 사이트  (0) 2013.06.12
css 선택자  (0) 2013.06.11
[twitter bootstrap] 트위터 부트스트랩이란?  (0) 2013.06.11
posted by cozyboy
:
언어&플랫폼/Html/JQuery 2013. 6. 12. 10:15

HTML 태그 설명 모음 사이트

조잡 : http://koxo.com/

심플 : http://blog.naver.com/ioiioizzz?Redirect=Log&logNo=189161093

'언어&플랫폼 > Html/JQuery' 카테고리의 다른 글

[bootstrap] layout Designer site (beta)  (0) 2013.06.27
간단하게 Tab을 구현하기 위한 제안 , jQuery + CSS [펌]  (0) 2013.06.26
[bootstrap] 기본정리 [펌]  (0) 2013.06.24
css 선택자  (0) 2013.06.11
[twitter bootstrap] 트위터 부트스트랩이란?  (0) 2013.06.11
posted by cozyboy
:
언어&플랫폼/Html/JQuery 2013. 6. 11. 17:38

css 선택자

CSS에서 선택자는 정말 중요하다.
CSS 자체가 HTML의 스타일을 정의하는 시트인데, 어떤 HTML 요소에 스타일을 입힐껀지 정하는것이 바로 선택자이기 때문이다.
정말 선택자만 잘 사용해도 코드양을 효과적으로 많이 줄일 수 있다.


다음은 많이 사용하는 선택자들을 모아서 정리한 것이다.

형식

이름

의미

*

전체 선택자

모든 태그의 스타일을 지정

body

태그 선택자

특정 이름을 가진 태그의 스타일을 지정

h1 p

하위 선택자

첫번째 태그 안에있는 두번째 태그의 스타일을 지정

h1 > p

자식 선택자

첫번째 태그 안에있는 두번째 태그 중 자식에 해당되는 태그에만 스타일을 지정

h1 + p

인접 선택자

첫번째 태그 안에있는 바로 인접하여 나오는 두번째 태그에만 스타일을 지정

#wrap

ID 선택자

해당 ID를 가지고 있는 태그에만 스타일을 지정

.gnb

Class 선택자

해당 Class를 가지고 있는 태그에만 스타일을 지정

위 표에 명시되어 있는 선택자 외에도 [속성 선택자], [nth-child 선택자]등 다양한 선택자가 존재하지만 대체적으로 위의 선택자가 가장 많이 사용되므로 표로 작성하였다.

선택자를 잘 사용하게 되면, 무분별하게 사용되는 ID와 Class를 줄일 수 있으며 보다 효율적으로 CSS를 작성할 수 있다.

그리고 추 후 유지보수에도 큰 도움이 될것이다.

선택자들의 형식은 생각보다 직관적이므로 다양한 선택자들을 활용하여 보다 아름다운(?) 코딩이 될 수 있도록 우리모두 노력하자!!!

[출처] [CSS] 선택자|작성자 Tionnii

 

'언어&플랫폼 > Html/JQuery' 카테고리의 다른 글

[bootstrap] layout Designer site (beta)  (0) 2013.06.27
간단하게 Tab을 구현하기 위한 제안 , jQuery + CSS [펌]  (0) 2013.06.26
[bootstrap] 기본정리 [펌]  (0) 2013.06.24
HTML 태그 설명 모음 사이트  (0) 2013.06.12
[twitter bootstrap] 트위터 부트스트랩이란?  (0) 2013.06.11
posted by cozyboy
:
언어&플랫폼/Html/JQuery 2013. 6. 11. 15:17

[twitter bootstrap] 트위터 부트스트랩이란?

트위터 근무자가 web UI를 트위터와 비슷하게.. 빠르게 만들수 있는 프레임 워크로 만들었다고 한다.


1. 부트스트랩은 HTML5와 CSS3, JQuery를 기반으로 사용 한다고 한다.

2. 일반적으론 CSS 프레임 워크랜다.

3. 반응형 웹이다 ---> 브라우저 크기에 따라 형태가 변한다(모바일, 태블렛, PC모두에서 사용 가능)


한마디로 버튼, 테이블 등 디자인이 어느정도 되어서 나온 소스라고 본다.


★ 웹 개발자들은 필요 없겠지만, 비 웹개발자가 무언가를 금방 만들어야 할때!!!

쓸만 할것 같다.


CSS는 HTML에서 디자인(겉모양)을 따로 때어낸 것이며,

JQuery는 javascript 라이브러리 라고 보면 될 듯하다.





아랫 글 : http://rkjun.wordpress.com/2012/02/28/bootstrap-2-0-intro/



1. 부트스트랩 (Bootstrap, from Twitter) 은 무엇인가?

부트스트랩  (http://twitter.github.com/bootstrap/) 은 트위터에 근무하는 두 명의 엔지니어 (Mark Otto와 Jacob Thornton) 가 개발한 가볍고 간단한 오픈소스기반 (아파치2.0라이센스) 의 HTML5, CSS3 UI 프레임워크입니다. HTML5, CSS3, Javascript 로 구성되어 있고, 가볍게 트위터 디자인 비슷한 UI 를 빠르게 구현해낼 수 있는 각종 콤포넌트들을 제공해 주고 있습니다.



3. 내 홈페이지에 bootstrap 적용하기

HTML, CSS, Javascript 에 선수지식이 있으면 조예가 깊지 않아도, 부트스트랩을 가져다가 나만의 사이트를 만들 수 있습니다. 이미 샘플로 구성된 부트 스트랩 예제 화면을 참조하면 어렵지 않게 따라 만들 수 있습니다. 또한 부트스트랩 홈페이지에서 자세한 설명까지 설명되어 있으니, 조금만 시간을 내어 읽어보면 원하는 입맛대로 만들어 낼 수 있습니다. 기본적으로 CSS 에 대한 깊은 지식이 없어도 class 를 이용하는 것으로 충분히 원하는 의도대로 만들어 낼 수 있다는 점에서, 디자인에 약한 개발자에게는 나홀로 이쁜 사이트 만들기에 최적화된 아이템임에 틀림없습니다.


4. 커스터마이징

어느정도까지는 내 입맛대로 바꿔서 쓸 수 있어야, 써볼 맛이 납니다. 부트스트랩 페이지에서도 이미 커스터마이즈 기능을 기본으로 제공해 주고 있습니다. 추가로 부츠왓치(http://bootswatch.com/) 사이트를 통해서도 간단하게 색상 변경을 통해 원하는 CSS 를 얻어낼 수도 있습니다. 랩부트스트랩 (http://wrapbootstrap.com/) 에서는 부트스트랩용 테마를 판매하고 있기도 합니다.


5. 웹 개발자의 놀이가 되어 줄 부트스트랩.

사이트의 틀을 부트스트랩이 잡아주니, 나머지는 웹 개발자 혼자서도 어떻게든, 그럭저럭 이쁜 사이트를 만들어 낼 수 있을 듯 합니다. 나머지 코딩은 개발자 몫인 거죠. 부트스트랩에 최적화된 JQuery Plugin 들도 꽤 흥미롭습니다.  특히나 캐러셀 (carousel : 화면을 회전하듯 부드럽게 전환시키는 방식.) 같은 기능들은 왠지 무조건 넣고 봐야 하는 거죠.^^;


8. 잡담

디자인에 약한 웹 개발자들(특히나 서버사이드개발자) 에게  꽤 흥미로운 물건이다. 쉽고 재밌게 가져다 쓸 수 있는 것도 큰 장점이고. 암튼 이 bootstrap 의 기반에는 less (http://lesscss.org/) 기술도 사용되어지고 있는데 이게 또 꽤 흥미로운데, 이건 나중에 차차 다시 포스팅해야겠다.




'언어&플랫폼 > Html/JQuery' 카테고리의 다른 글

[bootstrap] layout Designer site (beta)  (0) 2013.06.27
간단하게 Tab을 구현하기 위한 제안 , jQuery + CSS [펌]  (0) 2013.06.26
[bootstrap] 기본정리 [펌]  (0) 2013.06.24
HTML 태그 설명 모음 사이트  (0) 2013.06.12
css 선택자  (0) 2013.06.11
posted by cozyboy
:
언어&플랫폼/Eclipse RCP&RAP 2013. 3. 11. 20:42

[Eclipse RAP]국제화, Internationalize - juno

 - RAP Developer Guide에 쓰인 방법으로 정리

 

  • RCP의 국제화와 방법이 다른 이유 :
In RAP we have to deal with different languages for different user sessions. Indeed, the language can also change between requests within the same session. Therefore, we cannot store language related information statically in Message classes as this is done in RCP. Instead, we must use a different instance of the Message class for every language.

각기 다른 유저 세션을 위한 언어가 다르기 때문이다. 게다가 같은 세션의 request에서도 다른 language를 요구할수 있다.

그러므로 우리는 language를 RCP처럼 클래쓰 안에 staticaaly하게 정의하고 사용할수 없다. 대신에 message class(language설정의 위한 클래스)의 instance를 사용해야 한다.

 

 

[시작]

  • test.mail.message 패키지 생성 >  Messages 클래스 생성(만든 패키지에)

public class Messages {
 
    private static final String BUNDLE_NAME
      = "test.mail.message.messages"; //$NON-NLS-1$
    public String HelloWorld;


    private Messages() {
      // prevent instantiation
    }
   
    public static Messages get() {
      Class clazz = Messages.class;
      return ( Messages )RWT.NLS.getISO8859_1Encoded( BUNDLE_NAME, clazz );
    }
  }

 

 

  • test.mail.message 패키지에 properties 파일 생성

messages.properties                             - 디폴트 (찾을수 없을때 사용되는 파일)

messages_ko_KR.properties                   - 언어 코드, 국가 코드 : 한국

messages_en_US.properties

 

  • messages.properties 내용

HelloWorld = Hello

farewell = Goodbye.

 

  • messages_ko_KR.properties 내용

HelloWorld = 안녕

farewell = 잘가

 

 

  • properties 사용할 부분에 코드 삽입
  public void createPartControl( Composite parent ) {
    Label label = new Label ( parent, SWT.NONE );
    label.setText( Messages.get().HelloWorld );
    label.setSize( 80, 20 );

 

 

 

 

 

 

 

일단은 이렇게만 실행해보아도 properties 적용이 잘 된것을 확인 할 수 있다.

properties를 다른 폴더에 넣고 싶으면, javabuild에서 폴더를 생성후 path를 등록하면 될것 같고.

참조 사이트에 보면 war로 배포하여 동작하기 위해선 web.xml에

   <init-param>
      <param-name>commandline</param-name>
      <param-value>-registryMultiLanguage</param-value>    
    </init-param>
  를 추가해야 한다고 나와있다.

 

여튼 저튼 위와 같은 방법으로 적용으로 테스트 해보면 된다.

 

 

참조 사이트 :

eclipse RAP Developer Guide(internationalization) : http://help.eclipse.org/juno/index.jsp?topic=%2Forg.eclipse.rap.help%2Fhelp%2Fhtml%2Fadvanced%2Fdeployment.html

 

RWT.NLS javadoc : http://help.eclipse.org/indigo/index.jsp?topic=%2Forg.eclipse.rap.help%2Fhelp%2Fhtml%2Freference%2Fapi%2Forg%2Feclipse%2Frwt%2FRWT.NLS.html


클래프 패스 문제 (java.util.MissingResourceException: Can't find bundle for base name javan.Res_test, locale ko_KR) : http://darky.egloos.com/1066166



'언어&플랫폼 > Eclipse RCP&RAP' 카테고리의 다른 글

[Eclipse RAP or Java] 국제화, Internationalizing 관련 사이트  (0) 2013.03.11
[Eclipse RCP&RAP] 북마크 정리  (0) 2013.03.11
swt 관련 사이트  (0) 2013.02.12
org.eclipse.swt.SWTException: Invalid thread access  (0) 2013.02.12
[Eclipse rap] openfire linux(centOS)  (0) 2013.02.06
posted by cozyboy
:
언어&플랫폼/Eclipse RCP&RAP 2013. 3. 11. 17:18

[Eclipse RAP or Java] 국제화, Internationalizing 관련 사이트

eclipse RAP Developer Guide(internationalization) : http://help.eclipse.org/juno/index.jsp?topic=%2Forg.eclipse.rap.help%2Fhelp%2Fhtml%2Fadvanced%2Fdeployment.html

RWT.NLS javadoc : http://help.eclipse.org/indigo/index.jsp?topic=%2Forg.eclipse.rap.help%2Fhelp%2Fhtml%2Freference%2Fapi%2Forg%2Feclipse%2Frwt%2FRWT.NLS.html

 

자바 Internationalizing the sample program : http://docs.oracle.com/javase/tutorial/i18n/intro/steps.html

 

java Locale Doc : http://www.javacool.net/_cool/api_doc/kor_jdk11api/java.util.Locale_dsc.htm

LocalePlanet(자바로캘 한국어 일반정보?) : http://www.localeplanet.com/java/ko-KR/index.html

자바 인코딩 및 로케일 정보 얻기 : http://blog.naver.com/PostView.nhn?blogId=oomymy&logNo=120051174487

ResourceBundle 사용하기 : http://jcjang.tistory.com/4

how to internationalize your Eclipse plug-in : http://www.eclipse.org/articles/Article-Internationalization/how2I18n.html

how to test your Internationalized Eclipse plug-in : http://www.eclipse.org/articles/Article-TVT/how2TestI18n.html

ISO(International Organization for Standardization) : http://ko.wikipedia.org/wiki/%EA%B5%AD%EC%A0%9C_%ED%91%9C%EC%A4%80%ED%99%94_%EA%B8%B0%EA%B5%AC

I18N : http://www.terms.co.kr/internationalization.htm

'언어&플랫폼 > Eclipse RCP&RAP' 카테고리의 다른 글

[Eclipse RAP]국제화, Internationalize - juno  (0) 2013.03.11
[Eclipse RCP&RAP] 북마크 정리  (0) 2013.03.11
swt 관련 사이트  (0) 2013.02.12
org.eclipse.swt.SWTException: Invalid thread access  (0) 2013.02.12
[Eclipse rap] openfire linux(centOS)  (0) 2013.02.06
posted by cozyboy
:
언어&플랫폼/Eclipse RCP&RAP 2013. 3. 11. 10:23

[Eclipse RCP&RAP] 북마크 정리

RAP 정식 사이트 : http://eclipse.org/rap/

technologi : http://developer.eclipsesource.com/technology/crossplatform/

Jface api 사이트 : http://help.eclipse.org/helios/index.jsp?topic=%2Forg.eclipse.platform.doc.isv%2Freference%2Fapi%2Forg%2Feclipse%2Fjface%2Fviewers%2Fpackage-summary.html

SWT examples : http://www.eclipse.org/swt/examples.php

SWT Snippets : http://www.eclipse.org/swt/snippets/

GEF : http://www.eclipse.org/gef/  (Draw2d, GEF, Zest)

RCP tutorial : http://www.programcreek.com/develop-plug-ins-using-rcp/

Ecipspse 4 RCP tutorial : http://www.vogella.com/articles/EclipseRCP/article.html

한금 사이트 : http://hangumkj.blogspot.kr/2009/10/eclipse-rcp-rap.html

한금 피피트 리스트 : http://www.slideshare.net/hangum/eclipse-rap-1617751

이클립스 개념(한금) : http://blog.naver.com/blueshawn

이클립스 한국 위키 : http://ko.wikipedia.org/wiki/이클립스

rcp-rap ppt : http://www.slideshare.net/caniszczyk/single-sourcing-rcp-and-rap

OSGi 이론 : http://mobicon.tistory.com/34

http://pirrip.tistory.com/122

http://cafe.naver.com/eclipseplugin/2278

이클립스 소개글 : http://cafe.naver.com/eclipseplugin/29

http://blog.naver.com/PostView.nhn?blogId=cjmzzang119&logNo=110108686370

RAP architectur : http://www.itblogging.de/java/eclipse-rap/rich-ajax-platform-architektur/

integrating BIRT into RAP applications : http://eclipsesource.com/blogs/2009/07/06/integrating-birt-into-rap-applications/

서블릿 컨테이너에서의 equinox 역할 : http://eclipse.org/equinox/server/http_in_container.php

RAP Developer Guide (in eclipse help) war deployment : http://help.eclipse.org/indigo/index.jsp?topic=%2Forg.eclipse.rap.help%2Fhelp%2Fhtml%2Fadvanced%2Fdeployment.html

OSGi 라이프 사이클 바뀌는 방법 : http://eclipsesource.com/blogs/2013/01/23/how-to-track-lifecycle-changes-of-osgi-bundles/

RAP RCP 다른점 : http://blog.naver.com/waitzero?Redirect=Log&logNo=70025111691

 

 

RCP 사용자 정의 다이얼로그 사용하기 : http://www.dorajistyle.pe.kr/2008/03/%EC%9D%B4%ED%81%B4%EB%A6%BD%EC%8A%A4rcpeclipse-rcp-eclipsercp-%EC%82%AC%EC%9A%A9%EC%9E%90-%EC%A0%95%EC%9D%98.html

 

Brand your Eclipse RCP applications

: http://www.ibm.com/developerworks/library/os-eclipse-brand/

 

특집기사: Table Viewer / Tree Viewer 성능향상 테크닉 :

http://eclipse.or.kr/wiki/%ED%8A%B9%EC%A7%91%EA%B8%B0%EC%82%AC:Table_Viewer_/_Tree_Viewer_%EC%84%B1%EB%8A%A5%ED%96%A5%EC%83%81_%ED%85%8C%ED%81%AC%EB%8B%89#.EA.B8.B0.EC.A1.B4_.ED.8A.B8.EB.A6.AC.2F.ED.85.8C.EC.9D.B4.EB.B8.94_.EB.B7.B0.EC.96.B4_.EB.AC.B8.EC.A0.9C.EC.A0.90

SWT에서 Multi-Thread로 인한 UI Blocking에 대한 고찰

http://blog.naver.com/PostView.nhn?blogId=albertx&logNo=100093142739&redirect=Dlog&widgetTypeCall=true

 

RAP 2.0 migration guide : http://www.eclipse.org/community/rcpos.php

RAP/server push : http://wiki.eclipse.org/RAP/UI_Callback

 

'언어&플랫폼 > Eclipse RCP&RAP' 카테고리의 다른 글

[Eclipse RAP]국제화, Internationalize - juno  (0) 2013.03.11
[Eclipse RAP or Java] 국제화, Internationalizing 관련 사이트  (0) 2013.03.11
swt 관련 사이트  (0) 2013.02.12
org.eclipse.swt.SWTException: Invalid thread access  (0) 2013.02.12
[Eclipse rap] openfire linux(centOS)  (0) 2013.02.06
posted by cozyboy
:
언어&플랫폼/Eclipse RCP&RAP 2013. 2. 12. 20:12

swt 관련 사이트

SWT에서 Multi-Thread로 인한 UI Blocking에 대한 고찰

http://blog.naver.com/PostView.nhn?blogId=albertx&logNo=100093142739&redirect=Dlog&widgetTypeCall=true

 

 

SWT, Swing or AWT (일반적으로 자바를 배운사람은 swing은 대략 안다. SWT, Swing, AWT 객체비교 표가 존재하는데, 비교하면 대략 SWT와 매치시킬수 있다)

http://www.ibm.com/developerworks/kr/library/os-swingswt/index.html

 

Swt widgets, snippets, JFace Snippets 예제 및 그림 존재

http://www.eclipse.org/swt/snippets/

'언어&플랫폼 > Eclipse RCP&RAP' 카테고리의 다른 글

[Eclipse RAP or Java] 국제화, Internationalizing 관련 사이트  (0) 2013.03.11
[Eclipse RCP&RAP] 북마크 정리  (0) 2013.03.11
org.eclipse.swt.SWTException: Invalid thread access  (0) 2013.02.12
[Eclipse rap] openfire linux(centOS)  (0) 2013.02.06
[Eclipse RAP] RAP 2.0 관련 사이트  (0) 2013.02.06
posted by cozyboy
:
언어&플랫폼/Eclipse RCP&RAP 2013. 2. 12. 20:06

org.eclipse.swt.SWTException: Invalid thread access

 Viewpart에서 외부library 사용중 그 라이브러리에서도 내부적으로 쓰레드를 사용하여 충돌이 발생한듯 하다.

 

안드로이드 같은경우 main 스레드와 UI 스레드가 따로 구분되어 있다.

SWT역시 그러한듯 하다. 그렇게 만들어져야만 한다.

 

Text text;

text.getDisplay().asyncExec( ~로도 안되고

PlatformUI.getWorkbench().getDisplay().asyncExec(  ~로도 안된다.

 

Display.getDefault().asyncExec(new Runnable() {
@Override
  public void run() {
      여기에 작성

  }
  });
}

 

http://rusya7.blogspot.kr/2011/11/orgeclipseswtswtexception-invalid.html에서 해결법 찾음

 

 

페이지 제목이 Java-studying / swt-widget-thread-problem 인것을 보면 Thread 관련 소스예제들이 존재하는 듯하다.

https://github.com/rusya7/Java-studying/tree/master/swt-widget-thread-problem

 

 

 

 

There's only one UI thread in Eclipse. In a nutshell, the rules are:

  • If you got called as part of a UI operation (e.g. event handler, view initialization) you are in the UI thread.
  • All other operations that invoke a UI (e.g. a job which needs to show a dialog or send information to a view which modifies a widget) - need to sync with the UI thread.

This is basically done like this:

 Display.getDefault().syncExec( new Runnable() {  public void run() { } });

Your code goes in the run method. You may also use the asyncExec method to continue without waiting for the UI to finish.

Try using the snippet above to wrap the problematic code.

 

 -> http://www.vogella.com/articles/EclipseJobs/article.html

 

왜 이렇게 해결이 되는것인가???

 

Display javadoc ->

http://help.eclipse.org/indigo/index.jsp?topic=%2Forg.eclipse.platform.doc.isv%2Freference%2Fapi%2Forg%2Feclipse%2Fswt%2Fwidgets%2FDisplay.html

 

  • Class Display  (Display 는 class, 디스플레이는 말그대로 영어 표현)

 

SWT와 기본 운영 체제 사이의 연결을 관리 할 책임이 있다.

가장 중요한 기능은 플랫폼 이벤트 모델의 관점에서 SWT 이벤트 루프를 구현하는 것이다. 또한 운영 체제에 대한 정보를 액세스하기위한 다양한 방법을 제공하고, 어떤 SWT를 할당 운영 체제 리소스를 전체 제어 할 수 있다.

 

SWT로 만드는 응용 프로그램은 기존의 Display가 dispose() 메시지를 보내지 않은이상, 거의.. 단 하나의 Display만 존재한다.

 

SWT에서 Display instance를 생성 한 스레드가 해당 디스플레이의 사용자 인터페이스 스레드로 구분된다. (메인 스레드와 사용자 스레드는 같다는 말같다. 대신 아래나오지만, )

 

특정 디스플레이에 대한 사용자 인터페이스 스레드는 다음과 같은 특수 속성이 있다. :

1. The event loop for that display must be run from the thread.


2. Some SWT API methods (notably, most of the public methods in Widget and its subclasses), may only be called from the thread. (To support multi-threaded user-interface applications, class Display provides inter-thread communication methods which allow threads other than the user-interface thread to request that it perform operations on their behalf.)


3. The thread is not allowed to construct other Displays until that display has been disposed. (Note that, this is in addition to the restriction mentioned above concerning platform support for multiple displays. Thus, the only way to have multiple simultaneously active displays, even on platforms which support it, is to have multiple threads.)

 

1. 디스플레이에 대한 event loop는 스레드에서 실행해야만 한다.

2. 일부 SWT api methods(특히, 위젯의 public method의 대부분)는 쓰레드로 불려야만 한다. (multi-threaded user-interface 응용 프로그램을 지원하기 위해, class Display는

inter-thread communication methods를 제공한다(자신의 작업을 대신수행하는 user-interface thread 보다는 말이다)

3. 스레드는 디스플레이가 dispose되기전까지 다른 Display를 허락하지 않는다. 심지어 multiple displays를 지원하는 플랫폼에서조차. 그래서 mutiple displays를 활성화 하는 방법은 multiple thread 뿐이다.

 

 

  • Display.getDefault

Returns the default display. One is created (making the thread that invokes this method its user-interface thread) if it did not already exist.

 

  • Display.getDefault.asyncExec

Causes the run() method of the runnable to be invoked by the user-interface thread at the next reasonable opportunity. The caller of this method continues to run in parallel, and is not notified when the runnable has completed. Specifying null as the runnable simply wakes the user-interface thread when run.

Note that at the time the runnable is invoked, widgets that have the receiver as their display may have been disposed. Therefore, it is necessary to check for this case inside the runnable before accessing the widget.

 

 

 

[참고]

Eclipse Jobs and Background Processing

http://www.vogella.com/articles/EclipseJobs/article.html

 

Display javadoc

http://help.eclipse.org/indigo/index.jsp?topic=%2Forg.eclipse.platform.doc.isv%2Freference%2Fapi%2Forg%2Feclipse%2Fswt%2Fwidgets%2FDisplay.html

 

 

 

'언어&플랫폼 > Eclipse RCP&RAP' 카테고리의 다른 글

[Eclipse RCP&RAP] 북마크 정리  (0) 2013.03.11
swt 관련 사이트  (0) 2013.02.12
[Eclipse rap] openfire linux(centOS)  (0) 2013.02.06
[Eclipse RAP] RAP 2.0 관련 사이트  (0) 2013.02.06
[Eclipse Rap] RAP2.0 - Remote Application Platform  (0) 2013.02.05
posted by cozyboy
:
언어&플랫폼/Eclipse RCP&RAP 2013. 2. 6. 17:44

[Eclipse rap] openfire linux(centOS)

mysql에 openfire 디비 생성(mysqld가 실행되고 있게 한다. 내부db를 사용할수도 있다는데 mysql 사용함)

 

http://www.igniterealtime.org/

openfire linux tar 다운

 

압축 풀기

 

bin/openfire 에 777 권한 주고

 

openfire start

 

http://localhostIP:9090 으로 접속

(접속이 잘 안된다면 openfire status로 실행중인지 확인)

 

 

next -> next -> 아이피와 아까 생성한 디비명을 적고

 

비번 생성

 

admin, 비번으로 접속

 

 

 

http://mytory.net/archives/212

'언어&플랫폼 > Eclipse RCP&RAP' 카테고리의 다른 글

swt 관련 사이트  (0) 2013.02.12
org.eclipse.swt.SWTException: Invalid thread access  (0) 2013.02.12
[Eclipse RAP] RAP 2.0 관련 사이트  (0) 2013.02.06
[Eclipse Rap] RAP2.0 - Remote Application Platform  (0) 2013.02.05
[Eclipse RCP] elicpse e4(juno) 관련 사이트  (0) 2013.02.05
posted by cozyboy
:
언어&플랫폼/Eclipse RCP&RAP 2013. 2. 6. 11:12

[Eclipse RAP] RAP 2.0 관련 사이트

The Pillars of the RAP 2.0 API(RAP 2.0 Countdown (2/5)) -

http://eclipsesource.com/blogs/2013/02/04/rap-2-0-countdown-25/

 

 

RAP protocol: On the way to RAP 2.0

http://eclipsesource.com/blogs/2010/04/28/rap-2-0-protocol/

 

RAP protocol: JSON messages -

http://eclipsesource.com/blogs/2010/05/10/rap-protocol-json-messages/

 

RAP becomes the Remote Application Platform -

http://eclipsesource.com/blogs/2012/11/26/rap-becomes-the-remote-application-platform/

'언어&플랫폼 > Eclipse RCP&RAP' 카테고리의 다른 글

org.eclipse.swt.SWTException: Invalid thread access  (0) 2013.02.12
[Eclipse rap] openfire linux(centOS)  (0) 2013.02.06
[Eclipse Rap] RAP2.0 - Remote Application Platform  (0) 2013.02.05
[Eclipse RCP] elicpse e4(juno) 관련 사이트  (0) 2013.02.05
[Eclipse RCP] view와 editor의 차이점  (0) 2013.01.29
posted by cozyboy
:
언어&플랫폼/Eclipse RCP&RAP 2013. 2. 5. 17:30

[Eclipse Rap] RAP2.0 - Remote Application Platform

eclipse platform 개발할때,

RCP는 3.x로 할지 e4로 할지, RAP는 1.x로 할지 2.x로 할지 고민중에 RAP의 이름이 변경된 이유가 써있길래 겸사겸사 번역?? 스럽게 적어둠.   [원문]보기

 

RAP의 경우 1.x버전의 코드를 2.x로 convert하는 것도 일이 되겠구나란 생각이 든다.

 

  • ajax platform에서 protocol형태로 바뀐 간략한 이유 

1. 자바코드가 server에서 돌고 있는데, javascript 를 qooxdoo(자바스크립트 UI 프래임워크)에 의해 widgets으로 rendering(서버가 qooxdoo에 맞는 자바스크립트 코드를 클라이언트에게 보내는것)하도록 하는 부분이 과부하가 컸다.

 

2. 클라이언트는 특정 자바스크립트 프래임워크에 취약하다.

 

이 두가지의 상황을 더 좋게 하기위해 protocol 개념을 사용하게 되었다.

 

 

 

Eclipse RAP 1.x 까진 Rich ajax platform이란 명칭이였지만

2.x에서부턴 명칭은 같으나 Remote Application Platform라는 새로운 이름이 부여되었다.

 

새로운 RAP는 "Half Object plus Protocol(HOPP)" 패턴으로 구현되었다.

 

 

 

 

RAP에서 위젯의 반은 server에서, 반은 client에서 작동되게 된다.

그 둘은 protocol에 의해 연결된다.

 

이와같은 디자인의 가장 큰 장점은 어플리케이션이 client/server communication을 신경쓸 필요가 없다는 것이다. 이 둘의 communication은 플랫폼이 알아서 한다.

 

이전의 RAP는 반의 objects만 가지고 있었으나 protocol은 없었다. 대신 javascript commands와 http parameters에 의해서 통신을 하였다.

 

RAP 1.5부터는 전체적인 플랫폼들이 open JSON protocol로 migration 되었다.

 

client의 구조와 server는 JSON messageds로 바뀌었다.

이 메시지는 header 부분과 operations list로 구성된다.

 

{
head: { … },
operations: [ … ]
}

 

 

오퍼레이션은 크게 여섯가지 타입이 있다.

create – to create a remote object,

set – to set one or more properties on the remote object, and

destroy – to well, you guessed it. Besides set there is also call to call a method on a remote object.

listen and notify to exchange events

 

Every remote object is identified by an id and every operation addresses exactly one target object.

모든 remote object는 id로 식별되고, 모든 operation은 address로 하나의 target object로써 식별된다.  (맞는지 모르겠다. 위 글이 원문임.)

 

 

예시) message that creates a Button with a Selection listener

{
  "head": {
    "requestCounter": 1
  },
  "operations": [
    [ "create", "w4", "rwt.widgets.Button", {
        "parent": "w2",
        "style": [ "PUSH" ],
        "bounds": [ 5, 68, 131, 32 ],
        "text": "I am a button" } ],
    [ "listen", "w4", { "Selection": true } ]
  ]
}

 

위의 json(프로토콜)을 보면 create operation이 이미 버튼의 특성을 init하는 부분을 포함하고 있다는 것을 볼수 있다.  그리고 selection listener가 붙는 listen operation을 확인할 수 있다.  

 

버튼이 클릭될 시, 클라이언트가 서버에 보내는 message

{
  "head": {
    "requestCounter": 1
  },
  "operations": [
    [ "notify", "w4", "Selection", {
        "shiftKey": false,
        "ctrlKey": false,
        "altKey": false
      } ],
    [ "set", "w1", {
        "cursorLocation": [ 121, 104 ],
        "focusControl": "w4"
      } ]
  ]
}

 

 

위의 것은 대략적인 작동을 위한 글이며, 자세한 protocol을 알고 싶다면

eclipse wiki 에서 확인.

 

 

이 글에서 중요한 점은, RAP가 half objects라도 protocol에 UI의 세부사항이 없다는 것이다.

protocol은 더이상 HTTP에 depends하지 않다. 비록 RAP가 여전히 HTTP에 얽매여 있지만, 앞으로의 버전은 다른 추가적인 protocols에 의해 작동될것이다.

 

(ajax와 qooxdoo에 depends하게 동작하지 않겠다는 소리 같음. 중요한것은 독자적인 프로토콜로 동작할 것이란 말인듯하다. 그것이 표준인지 표준을 만들겠다는 것인지까진 모르겠지만)

 

(암튼 이게 RAP 가 새로운 이름으로 변경된 이유라고 한다. 또 모든것이 같은 프로그래밍 모델이 되기 위한 길이라고 한다. 어플리케이션과 웹과 스마트폰의 프로그래밍 일치화. 뭐 이런것??)

 

 

-------------------------------------------------

 

RAP protocol: On the way to RAP 2.0 -

http://eclipsesource.com/blogs/2010/04/28/rap-2-0-protocol/

 

Remote - The New "R" in RAP

http://eclipsesource.com/blogs/2013/02/01/rap-2-0-countdown-15/

 

RAP protocol: JSON messages

http://eclipsesource.com/blogs/2010/05/10/rap-protocol-json-messages/

'언어&플랫폼 > Eclipse RCP&RAP' 카테고리의 다른 글

[Eclipse rap] openfire linux(centOS)  (0) 2013.02.06
[Eclipse RAP] RAP 2.0 관련 사이트  (0) 2013.02.06
[Eclipse RCP] elicpse e4(juno) 관련 사이트  (0) 2013.02.05
[Eclipse RCP] view와 editor의 차이점  (0) 2013.01.29
[Eclipse RAP]tomcat(war) Deploy, 배포  (2) 2013.01.24
posted by cozyboy
:
언어&플랫폼/Eclipse RCP&RAP 2013. 2. 5. 14:28

[Eclipse RCP] elicpse e4(juno) 관련 사이트

이클립스 3.x(indigo) 와 4.x(juno)는 상이한 면이 많은것 같다.

개발 시 어떤것을 택할지도 고려해야 한다. 일단 자료수집 수집 수집


juno tutorial

http://help.eclipse.org/juno/index.jsp?topic=%2Forg.eclipse.ocl.doc%2Fhelp%2FTutorials.html


indigo toturial

http://help.eclipse.org/indigo/index.jsp?topic=%2Forg.eclipse.ocl.doc%2Fhelp%2FTutorials.html

-------------------------------------------------------------------------------------------------------------------


eclipse e4 top 10 특징

http://eclipsesource.com/blogs/2012/06/27/top-10-eclipse-juno-features/


이클립스 e4 tutorial -

http://www.vogella.com/articles/EclipseRCP/article.html


이클립스4(4.2 or juno, or e4) application model 튜토리얼 pdf 다운(영어) -

http://eclipsesource.com/en/info/eclipse-4-tutorial/


이클립스 트레이닝 ??

http://eclipsesource.com/en/services/eclipse-training/


이클립스 e4 tutorial 몇개 정리되 있는 블로그

http://eclipsesource.com/blogs/2012/05/10/eclipse-4-final-sprint-part-1-the-e4-application-model/

 

e4 Technical Overview(아키텍쳐와 프로그래밍 모델 요약문) -

http://www.eclipse.org/e4/resources/e4-whitepaper.php


 

GEF(Graphical Editing Framework) Draw2d, GEF(MVC), Zest

http://www.eclipse.org/gef/

'언어&플랫폼 > Eclipse RCP&RAP' 카테고리의 다른 글

[Eclipse RAP] RAP 2.0 관련 사이트  (0) 2013.02.06
[Eclipse Rap] RAP2.0 - Remote Application Platform  (0) 2013.02.05
[Eclipse RCP] view와 editor의 차이점  (0) 2013.01.29
[Eclipse RAP]tomcat(war) Deploy, 배포  (2) 2013.01.24
[Eclipse RCP] GUI Designer tool  (0) 2013.01.16
posted by cozyboy
:
언어&플랫폼/Eclipse RCP&RAP 2013. 1. 29. 16:55

[Eclipse RCP] view와 editor의 차이점

1. 편집기는 같은 위도우 내의 퍼스펙티브 간에 공유한다. 예를 들어, 한 퍼스펙티브에서 편집기를 닫으면 모든 퍼스펙티브에서 편집기가 닫힌다.

2. 편집기와 뷰는 같은 스택 위에 배치할 수 없다. 예를 들어 퍼스펙티브의 동일한 위치에 뷰와 편집기를 드래그앤드롭할 수 없다.

3. 뷰는 워크벤치 위도우에서 떼어진다.

4. 뷰는 제목 없이 보일 수 있다.

5. 편집기는 메인 툴바와 메뉴에 기여할 수 있지만 뷰는 뷰 자신의 툴바와 메뉴에만 기여할 수 있다. 하지만 뷰가 활성화될 때 액션 집합의 지정이 가능하다.

6. 편집기가 포커스를 갖지 않더라도, 마지막으로 포커스를 가졌던 편집기는 활성화된 편집기로나아 있어서 다른 요소에게 정보를 제공한다. 그러므로 좀 더 쉽게 편집기와 뷰는 동기화된다. 예를 들면 아웃라인 형태의 뷰와 편집기를 연결하는 일은 쉽다.

 

위와 같은 내용은 이클립스를 실행하여 이것저것 만져보면 감을 잡기 쉽다.

'언어&플랫폼 > Eclipse RCP&RAP' 카테고리의 다른 글

[Eclipse Rap] RAP2.0 - Remote Application Platform  (0) 2013.02.05
[Eclipse RCP] elicpse e4(juno) 관련 사이트  (0) 2013.02.05
[Eclipse RAP]tomcat(war) Deploy, 배포  (2) 2013.01.24
[Eclipse RCP] GUI Designer tool  (0) 2013.01.16
[Eclipse RCP] 패키지, 배포 - 펌  (0) 2013.01.16
posted by cozyboy
:

티스토리툴바