SOA 시대와 웹 프로그래밍 모델 유비쿼터스 컴퓨팅이나 SOA 같은 개념을 현실과 그대로 비교해 보면 거창하게 느껴지기도 하고, 이론적이라고 치부할 수도 있다. 하지만 누군가 상상하고 그린 모습이 미래를 만드는 후보가 되고 끈길지고 열정적인 사람이 매달린 꿈은 곧 현실이 된다.
WOA = REST? WOA가 곧 REST(Representational State Transfer)는 아니지만, 둘은 구분하기 어려울 정도로 꽤나 닮아 있다. 다음은 위키피디아에서 찾은 WOA 정의다. Web Oriented Architecture(WOA) is a style of software architecture that extends service-oriented architecture(SOA) to web based applications, and is sometimes considered to be a light-weight wersion of SOA. WOA is also aimed at maximizing the browser and server interactions by use of technologies such as REST and POX(Plain Old XML). REST는 WOA 를 위해 쓰이는 기술중의 하나일 뿐임을 알 수 있다.
SOFEA(Service-Oriented Front-End Architecture) SOFEA가 기준으로 삼는 5가지 원칙은 아래와 같다. 1. 표현 층에서 서로 직교하는 세 가지 다른 처리인 애플리케이션 내려받기와 표현흐름, 데이터 교환은 서로 구분해야 한다. 2. 클라이언트 유형을 고려해 내려 받는 방법을 다양하게 해야 한다. 3. 표현 흐름은 서버 개입 없이 클라리언트가 처리한다. 대부분의 웹 프레임워크가 사용하는 프론트 컨트롤러 패턴은 바람직 하지 않다. 4. 표현 층도 반드시 복잡한 데이터 구조와 타입, 데이터 제약을 지원해야 한다. 이상적인 모습은 클라이언트/서버 모델이 아니라 P2P모델을 통한 자연스런 이벤트 통지다. 5. MVC는 표현 층 개발에는 좋은 패턴이지만 프론트 컨트롤러를 사용하는 MVC 구현은 잘못된 방식이다. MVC 컨트롤러는 표현흐름과 데이터교환을 주도하는 핵심 구성요소로 클라이언트 상태 변화를 관장한다.
아래의 그림 1, 이는 전통적인 MVC 와 SOFEA가 제시한 MVC 차이를 잘 표현하는 그림이 다. 1. 전통적인 MVC 모델
2. 웹 2.0의 새로운 아키텍처
현재의 문제점은 지금까지의 작업에 묻혀서 생각의 전환이 쉽지않는다는 것과 좀더 나은 프로그램을 하려는 마음이 생기지 않는데에 있다. 작업일정에 쫓기다 보면 계속 동일한 방법만 반복되는게 현실이니까. 방법론이나 프로세스를 꾸준히 발전시켜서 적용하는건 일단은 리더의 문제라고 담아 짊어지려 한다.
width=device-width
이 값은 페이지를 기기의 width에 맞도록 출력합니다. 아이폰은 320*480의 세로보기 모드와 480*320의 가로보기 모드를
가지고 있습니다. width=780 과 같이 특정 값을 정의할 수도 있지만, 가로, 세로보기 모드에 최적화 시키기 위해서
width=device-width로 설정하는 경우 기기의 width값에 맞춰서 페이지를 보여줍니다.
initial-scale=1.0
이것은 페이지가 로딩될때 확대비율을 정할수 있습니다. 값이 커질 수록 확대 비율된 모습으로 페이지가 나타납니다.
maximum-scale=1.0
허용가능한 확대비율의 최대치를 설정합니다.
user-scalable=0
사용자의 확대보기를 허용할지 여부를 설정합니다. 값은 0(허용하지 않음), 1(확대보기 허용함) 입니다.
11.모바일로 홈페이지 접속하는 사람들만 골라서 모바일홈페이지로이동시켜주기
12.모바일 사파리의 inputtype에 따른 키보드 레이아웃변화
1. <input type='text' /> 기본 텍스트 타입 입니다.
따로 변경된 부분은 없는 일반 적인 키보드 레이아웃이며 Form 요소로서 return 부분의 Text만 Go 로 변경됬습니다.
2. <input type='search' /> search 타입 입니다.
기본 text type과 동일하며 return 부분의 Text만 Search 로 변경됬습니다. Form 의 내부에 있을때만 적용됩니다.
3. <input type='tel' /> tel 타입 입니다.
제일 특이한 부분인데요 전화번호를 입력하기 위한 숫자 키보드가 나타납니다.
4. <input type='url' /> url 타입 입니다.
url 입력시 사용자 편의를 위해 하단에"." , "/" , ".com"등의 국가코드에 대한 알리아스를 제공합니다. ".com" 버튼을 길게 탭하고 있으면 선택할수 있는 리스트가 나타납니다.
5. <input type='email' /> email 을 입력할수 있는 type 입니다.
위의 url 과 동일하세 입력편의를 위한, "@" , "." 을 기본 레이아웃으로 제공하여 줍니다.
6. <input type='password' /> 일반적으로 많이 쓰이는 password 타입입니다.
7. <input type='number' /> 마지막으로 숫자 입력을위한 number 타입입니다.
이때 나타나는 레이아웃은 일반 키보드 레이아웃에서 "123" 숫자 키를 선택했을떄 나타나는 레이아웃과 동일합니다.
8.사파리에서 검색에 히스토리 아이콘 표시하는 방법
<input type="text" />
사파리에서 검색에 히스토리 아이콘 표시하는 방법
<input type="search" results="5" />
다음 브라우저에서는 text field로 표시가 되는 것을 확인하였다고 하네요
Safari
Camino
Firefox
IE6
IE7
Opera 9
그러나 유효하지 않는 XHTML이 되버려서 safari만을 위한 자바스크립트를 사용하는 것이 더 좋을 것 같다.
스크립트 많이 쓰이는 구만...
safari ->사파리 브라우저 확인용 변수 사용자가 정의를 해야 되겠군요.
if (safari) {
var s = $("#s"); // s라는 ID값을 가진 객체를 jquery로 선택
s.attr("type", "search").attr("results", "5");
}
if (safari) {
var s = document.getElementById("s");
s.type = "search";
s.setAttribute("results", "5");
}
13.아이폰 모바일 사파리에서 아이폰 기본어플 실행하기
1. 전화걸기 Anchor 태그에 "tel" 프로토콜을 사용하면 자동으로 전화 연결이 됩니다. 전화 기능이 없는 아이팟 터치
에서는 주소록에 등록하기 메뉴가 뜹니다. 또한 '< meta name = "format-detection"
content = "telephone=no >' 태그 설정을 해주지 않으면 연속 되는 7자리 이상의 숫자나 특정 패턴의
숫자는 전화번호로 인식하기 때문에 주의 하여야 합니다.
<a href="tel:15880010">Show 고객센터 연결하기</a>
2. 문자보내기 Anchor 태그에 "sms" 프로토콜을 사용하면 문자보내기로 연결됩니다.
문자 보내기 어플은 아래와 같이 전화번호를 입력하여 받는사람을 지정할수 있습니다.
3. 메일보내기 Anchor 태그에 "mailto" 프로토콜을 사용하여 메일을 보낼수있습니다. 이는 모바일 사파리 뿐만 아니라
모든 브라우져에서 공통된 기능이구요, mailto 에는 받는사람, 메일제목, 참조자, 메일 내용까지 지정하여 어플을 실행시킬수
있습니다.
또한 메일보내기는 사파리를 종료하지 않고 메일보내기가 실행되므로, 사용자 관점에서는 참유용한 기능인듯 합니다.
6. 아이튠즈 및 앱스토어 실행하기 아래의 URL로 앱스토어 및 아이튠즈 어플이 실행가능합니다. 한가지 주의 할점은 앱스토어의 경우
"http://itunes.apple.com/kr/app/id304608425?mt=8" 어플이 일반적인 경로(일반 web에서
사용)이나, 모바일 사파리에선 내부에서 자동으로 아래 패턴으로 변경하여 사용합니다. 하지만 어플위에 올라간 UIWebview
컨트롤상에서는 따로 구현해주지 않으면 앱스토어 넘어가지 않습니다.
<a
href="http://phobos.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=304608425&cc=kr&mt=8&ign-iphone=1
">지도어플(앱스토어 연결)</a>
<a
href="http://phobos.apple.com/WebObjects/MZStore.woa/wa/viewAlbum?i=156093464&id=156093462&s=143441">Toy
Story OST(itunes 연결)</a>
14.모바일 사파리에서 Geolocation 사용하기
Geolocation 객체는 모바일 사파리에서 위치 정보를 담고 있는 오브젝트로 OS3.0 이상에서 사용가능하며.
좌표체게는 위도와 경도를 이용하는 WGS84 좌표계를 쓰고 있다.
<script type="text/javascript"> /* Mobile Browser UA 체크 */ var ua = navigator.userAgent.toLowerCase(); browser = { skt : /msie/.test( ua ) && /nate/.test( ua ), lgt : /msie/.test( ua ) && /([010|011|016|017|018|019]{3}\d{3,4}\d{4}$)/.test( ua ), opera : /opera/.test( ua ) || /opera mobi/.test( ua ), ipod : /webkit/.test( ua ) && /\(ipod/.test( ua ) , iphone : /webkit/.test( ua ) && (/\(iphone/.test( ua ) || /\(device/.test( ua )), android : /webkit/.test( ua ) && /android/.test( ua ) }
// 3.1.2 에서는 Geolocation이 제대로 동작하지 않음. if((browser.ipod || browser.iphone) && (version.major > 2 && version.build < 2)){ navigator.geolocation.getCurrentPosition(foundLoc); }
function foundLoc(position){ var latitude = position.coords.latitude; var longitude = position.coords.longitude; alert("위도 : "+latitude +" , 경도 : "+longitude ) }
</script>
16.기울기에 따라 css따로 불러오게 하기
<script type="text/javascript"> function orient() { switch(window.orientation){ case 0: document.getElementById("orient_css").href = "css/iphone_portrait.css"; break;
case -90: document.getElementById("orient_css").href = "css/iphone_landscape.css";
break;
case 90: document.getElementById("orient_css").href = "css/iphone_landscape.css";
break;
}
}
window.onload = orient();
</script>
<bodyonorientationchange="orient();">
</body>
</html>
17.툴바 숨기기
사파리브라우저의 주소입력창과 검색창이 있는 툴바를 보이지 않는 상태로 변환합니다.
툴바가 사라지는 것이 아니라 스크립트를 통하여 스크롤을 아래로 내려 툴바 바로 아래에서부터 웹페이지가 보여질수 있도록 하는것입니다.
이 스크립트를 사용하는 경우 사용자에게 최초로 페이지를 보여줄때 툴바가 차지했던 부분까지 화면공간을 확보하여 보여줄 수 있습니다.
18.콘텐츠 길이가 너무 짧아 툴바가 보여지지도 사라지지도 않은 반쯤 가려진 상태로 보이게 되는 경우
페이지 콘텐츠 길이가 너무 짧아서 스크롤할 내용이 없을때 이 스크립트는 우리가 원하는 기능을 수행하지 않을 수도 있습니다.
그리고 페이지 콘텐츠 길이가 스크롤을 내리기에 어정쩡한 길이라면 툴바가 보여지지도 사라지지도 않은 반쯤 가려진 상태로 보이게 되는 경우도 있습니다.
이런문제를 해결하기 위해서는 높이값을 최대사이즈로 지정하여 페이지가 스크롤될 수 있게 할 수 있습니다.
select box의 내용 가져오기 $("#select_box > option:selected").val(); select box의 값 설정 $("#select_box > option[@value=지정값]").attr("selected", "true")
My last jQuery post looked at how to count the number of options in a select and then clear all options from the select. This post looks at how to add a new option to a select with jQuery.
Working Example
The following is an example showing an already populated select.
Clicking the "Add option" button adds a new option to the end of the
select and makes it the selected one. Clicking "Replace options"
replaces them with a new set of options and then selects the "Green"
one.
Note that the above example will not work if you are reading this in a feed reader. In this case click through to view this post in a web browser.
Adding a single option - by appending HTML
Adding a single option can be done by appending HTML to the select
box. The select in the above example has an id of "example" i.e.
<select id="example"> and using this method adding a new option by
appending HTML can look like this:
This newly added option will be the selected option; to change this behavior remove the selected="selected" part.
Adding a single option - by appending a new option - method 1
To avoid having to write and append HTML and stick with a more
Javascript approach the new option can be appended with jQuery by
creating a new option object. This next example does not work correctly in Internet Explorer; it will add the new option but only the value and not display any text.
The true, true part at the end will make this item the selected one.
Adding a single option - by appending a new option - method 2
This method gets a handle to the options and adds a new option to the
array of options. This does work in Internet Explorer and is the more
traditional Javascript way of adding options.
Using the final method above this last example shows how to replace
the existing set of options with a new set, which may have been
retrieved from an AJAX call or similar.
Lines 1 to 7 define the new options with an associative array and the
one which will be selected. This is what might have been retrieved from
an AJAX call.
Lines 9 and 10 cache a handles to #example and its options.
Line 11 removes all the existing options.
Lines 13 to 15 loop through the new options and add them to the select box.
And finally line 16 sets the selected option.
Alternative methods
There are some alternative methods to adding options to a select box
with jQuery using various plug-ins and I may look at these in a future
post.
<audio id="sound1" controls="controls" style="whidth:100px;height:100px;" > <source src="windows_notify.mp3" type="audio/mpeg" /> Your browser does not support the audio element. </audio>
Definition and Usage
The <audio> tag defines sound, such as music or other audio streams.
Differences Between HTML 4.01 and HTML 5
The <audio> tag is new in HTML 5.
Tips and Notes
Tip: You can write text inside the start and end audio tags, to show
older browser that they do not support this tag.
데이터베이스 읽고 쓰기 - SQLite : Android 에서는 직접 바이트 데이터를 파일로 저장하는 것 외에 데이터베이스로 저장하는 것도 가능하다. 저장장소는 파일저장과 마찬가지로 /data/data/패키지명/database/데이터베이스파일명 으로 생성된다. Android는 SQL의 서브 셋에 있는 SQLite를 이용한다. SQLite 는 SQL의 일부를 지원하는 관계형 데이터베이스 관리 프로그램으로, SQLite 의 주요 명령으로는 다음과 같은 것이 있다.
1. 문자열 바이트 배열 변환 : 문자열을 파일로 저장할 때에는 바이트 배열로 변환한 후 저장해야 하고, 문자열을 바이트 배열로 변환하려면 String 클래스의 getByte() 메소드를 사용해야 한다. byte[] getBytes() 기능 : 바이트 배열로 변환 변환값 : 바이트 배열
2. 바이트 배열의 문자열 변환 : 바이트 배열을 파일로부터 읽은 후 문자열로 번달하려면 String 클래스의 생성자를 사용한다. String(byte[] data) 기능 : String 클래스의 생성자 인수 : data 바이트 배열
String(byte[] data, String encoding) 기능 : String 클래스 생성자 인수 : data 바이트 배열 encoding 인코딩 - 인코딩은 [UTF-8]을 지정.
3. 파일 출력 스트림의 개방 : 스트림의 바이트 배열을 파일로 쓰려면, 파일 출력 스트림을 열고 쓰기 처리를 한 후 마지막으로 닫는다. 파일 출력 스트림을 열려면 Context 클래스의 openFileOutput()메소드를 사용한다. OutputStream openFileOutput(String fileName, int mode)
기능 : 파일의 열기
인수 : fileName 파일명 mode 모드 반환값 : 출력 스트림 : 파일명으로는 저장할 파일명을 지정한다. 절대경로는 /data/data/패키지명/files/파일명 이 된다. 모드는 다음의 정수를 지정한다. 여기서는 Contenxt.MODE_PRIVATE 로 파일 생성을 했다.
모드
기능
Context.MODE_APPEND
기존 파일 단말기로부터 추가 쓰기
Context.MODE_PRIVATE
다른 어플리케이션으로부터는 접근불가
Context.MODE_WORLD_READABLE
다른 어플리케이션으로부터 읽기 가능
Context.MODE_WORLD_WRITEABLE
다른 어플리케이션으로부터 쓰기 가능
4. 바이트 배열의 쓰기 : 바이트 배열을 출력 스트림에 쓰려면 OutputStream 클래스의 write() 메소드를 사용한다. void write(byte[] data, int off, int len) 기능 : 바이트 데이터 data의 off 번째부터 len 만큼 쓰기 인수 : data 바이트 데이터 off 데이터의 시작 위치 len 쓰기 바이트 수 void write(byte[] data)
기능 : 바이트 데이터 data의 모든 데이터 쓰기
인수 : data 바이트 데이터 void write(int data)
기능 : 1 바이트의 바이트 데이터 쓰기
인수 : data 바이트 데이터( 0 ~ 255 )
: 인수는 int 형이지만, 0 ~ 255 값만을 지정한다.
5. 파일 출력 스트림의 닫기 : 파일 출력 스트림을 닫으려면 OutputStream 클래스의 close() 메소드를 사용한다. void close()
기능 : 출력 스트림 닫음
6. 파일 입력 스트림의 개방 : 스트림의 개방 파일로부터 바이트 배열을 읽으려면 파일 입력 스틀미을 열고 읽기 처리를 실행한 후 마지막으로 닫는다. 파일입력 스트림을 열려면 Context 클래스의 openFileInput() 메소드를 사용한다. OutputStream openFileInput(String fileName, int mode)
기능 : 파일 입력 스트림의 열기
인수 : fileName 파일명 mode 모드
7. 바이트 배열의 읽기 : 바이트 배열의 읽기를 실행하려면 InputStream 클래스의 read() 메소드를 사용한다. int read(byte[] data)
기능 : 바이트 배열의 읽기
인수 : data 바이트 배열 반환값 : 읽은 바이트 크기 : 인수로 전달한 바이트 배열에 읽은 데이터가 저장되고, 반환값에는 읽은 바이트 크기가 전달된다. 단, 바이트 배열보다 큰 바이트 데이터는 읽을 수 없다. 거기에서 읽은 바이트크기가 0이 될 때까지 read() 메소드를 반복하여 호출하면서 가변 길이 바이트 배열 ByteArrayOutputStream 클래스에 쓰고 있다.
8. 파일 입력 스트림의 닫기 : 파일 입력 스트림을 닫기 위해서는 Input Stream 클래스의 close() 메소드를 사용한다. void close()
기능 : 파일 입력 스트림의 닫기
9. ByteArrayOutputStream 객체의 바이트 배열화 : ByteArrayOutputStream 객체에서 갖고 있는 바이트 데이터를 byte[] 형의 값으로 얻으려면 ByteArrayOutputStream 클래스의 toByteArray() 메소드를 사용한다. byte[] toByteArray()
기능 : 바이트 배열 구하기 반환값 : 바이트 배열
* DDMS 의 File Explorer : DDMS의 File Explorer 를 사용하면, 저장되어 있는 파일을 확인 할 수 있다. 1. Eclipse 메뉴중 [Window]-[Open Perspective]-[DDMS] 를 선택. 2. Devices 에서 단말기를 선택한다(에뮬레이터의 경우는 emulator-XXXX). 3. File Explorer 에서 [data]-[data]-[패키지명]-[files]-[파일명] 을 선택. 4. 우측 위의 [Pull a file from the device] 버튼을 통해 파일 대화상자를 열고 파일을 컴퓨터에 저장할수 있다. [Put File on Device] 버튼을 통해 컴퓨터로부터 파일을 추가할 수 있고, [삭제] 버튼을 통해 파일 삭제도 가능하다.
public class FileEx extends Activity implements View.OnClickListener{ private EditText editText; private Button btnWrite; private Button btnRead;
// 초기화 @Override public void onCreate(Bundle icicle) { super.onCreate(icicle); requestWindowFeature(Window.FEATURE_NO_TITLE);
// 레이아웃 생성 LinearLayout layout = new LinearLayout(this); layout.setBackgroundColor(Color.rgb(255, 255, 255)); layout.setOrientation(LinearLayout.VERTICAL); setContentView(layout);
// 텍스트 박스의 생성 editText = new EditText(this); editText.setText("", EditText.BufferType.NORMAL); setLLParams(editText, 240, 50); layout.addView(editText);
// 쓰기 버튼의 생성 btnWrite = new Button(this); btnWrite.setText("쓰 기"); btnWrite.setOnClickListener(this); setLLParams(btnWrite); layout.addView(btnWrite);
// 읽기 버튼의 생성 btnRead = new Button(this); btnRead.setText("읽 기"); btnRead.setOnClickListener(this); setLLParams(btnRead); layout.addView(btnRead); }
// 파일 -> 바이트 데이터 private static byte[] file2data(Context context, String fileName) throws Exception{ int size; byte[] w = new byte[1024]; InputStream in = null; ByteArrayOutputStream out = null;
try {
// 파일 입력 스트림의 개방 (6) in = context.openFileInput(fileName);
// 바이트 배열의 읽기 (7) out = new ByteArrayOutputStream(); while(true){ size = in.read(w); if (size <= 0) break; out.write(w, 0, size); } out.close();