WAP강좌 (1 주째) 허재형
WAP강좌 1. WAP 서버 setting (mime 설정 등) 2. WAP 시뮬레이터 setting 3. WBMP 이미지 변환 툴 사용법 4. 무선 단말기 최소 스펙 5. WML 개발 방향 6. WML 1.1 태그 7. 간단한 실습
WAP 서버 setting < IIS 서버의 기본 웹 사이트 등록정보 > 교재 83 page 참조
WAP 서버 setting <기본 웹 사이트 등록 정보 화면 >
WAP 서버 setting <IIS 서버 mime 타입 설정>
WAP 서버 setting 구분 연결된 확장자(A) 내용 형식(MIME) WML .wbmp image/vnd.wap.wbmp WAP 서버 setting 구분 연결된 확장자(A) 내용 형식(MIME) WML .wbmp image/vnd.wap.wbmp .wml text/vnd.wap.wml .wmlc application/vnd.wap.wmlc .wmlsc application/vnd.wap.wmlscriptic .wmlscript text/vnd.wap.wmlscript .ws .wsc HDML .hdml text/x-hdml;charset=KS_C_5601-1987 MHTML .nbmp image/nbmp .sis image/sis .si6 image/si6 .toy image/toy [마임타입 추가 내용]
2. WAP 시뮬레이터 setting 교재 127 page 참조 < UP.Link Settings > 시뮬레이터 화면에서 [Settings] 메뉴를 선택하면 설정에 관련된 메뉴가 나타납니다. 이 메뉴에서 [UP.Link Settings]를 선택합니다. 교재 127 page 참조
2. WAP 시뮬레이터 setting < 네트워크 설정 > 시뮬레이터의 [Settings] 메뉴에서 [Network Settings…]를 선택합니다. 네트워크 설정을 위한 대화 상자가 나타나는데, 이 상자에서는 지원하는 네트워크의 형태를 설정하게 됩니다. 원하시는 네트워크의 형태를 선택하면 됩니다. 보통, “Lan Network(No Delay)”를 선택하면 됩니다.
2. WAP 시뮬레이터 setting < 디스플레이 글자 폰트 설정 > 시뮬레이터에 표시할 글자 폰트에 대한 설정입니다. [Settings] 메뉴의 [Device Settings…]를 선택합니다. 글자 폰트 설정을 위한 대화상자가 나타나면 보통, Language는 “(ko) Korean”을 선택하고 Charset은 “Korean(KS_C_5601-1987)”을 선택합니다.
3. WBMP 이미지 변환 툴 < DissectImage 툴 > 자신의 서버 root 폴더 아래에 wml폴더를 만들고, 그 밑에 wbmp 폴더를 만들고 거기에 logo.wbmp를 저장한다.
3. WBMP 이미지 변환 툴 < Root 폴더에 index.wml로 저장 > <?xml version="1.0" encoding="euc-kr" ?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <head></head> <card id="index" title="초기화면"> <p align="center"> <img src="http://자신의 컴퓨터 IP/wml/wbmp/logo.wbmp" alt=“로고"/> </p> </card> </wml> < Root 폴더에 index.wml로 저장 >
4.무선 단말기 최소 스펙 무선 단말기의 디스플레이 창은 한 줄에 12문자를 표시, 한 화면 당 최소 4줄의 텍스트 표시 2. 좌/우 스크롤 키 지원은 옵션이며 상/하 스크롤 키는 지원해야 함 선택(Accept) 및 메뉴 (Options) 버튼 지원 다음(Next)버튼은 다음 화면을 액세스, 이전(Prev)버튼은 이전 화면을 액세스 ASCII 문자셋을 지원하고, UNICODE를 지원 단말기의 키 패드는 숫자 및 문자 입력
5. WML 개발 방향 작은 디스플레이 화면을 고려하여, 단말기 LCD 창에 디스플레이 할 수 있는 한 화면 단위로 개발 - 전체 4줄, 한번에 저장 가능한 캐쉬 용량 100줄을 넘는 데이터는 전송 에러 발생 2. 화면의 한 줄에 표시할 수 있는 문자 수 고려 - 한 줄에 12자를 표현할 수 있는 화면 창에 한 줄에 80자로 된 문서를 전송하면 Readability 감소 3. 전체 WML 문서 라인 수를 고려하여 하나의 WML문서를 여러 개의 Card로 분리하여 개발
6. WML 1.1 태그 < 문법 규칙- 1> 대/소문자 구분 => 모든 태그언어를 소문자로 작성 2. 공백 문자 : 줄바꿈 문자(CR), 새로운 줄 문자(LF) 빈 칸, 탭 문자 등은 모두 하나의 공백으로 처리됨. => 예약어인 를 사용한다. 3. 모든 WML문서 첫 줄에 삽입 <?xml version="1.0" encoding="euc-kr" ?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1 //EN" "http://www.wapforum.org/DTD/wml_1.1.xml">
6. WML 1.1 태그 < 문법 규칙- 2> 태그만을 사용할 때 “<태그/>”형식으로 사용 태그 시작은 “<“ 기호로 시작 태그 마감은 “/>”로 끝맺음 ex1) <p> WML 태그 시작 </p> ex2) <p> WML 태그 시작 <br/> </p> 태그만을 사용할 때 “<태그/>”형식으로 사용
6. WML 1.1 태그 < 문법 규칙- 3> 5. WML 태그 속성 태그마다 각각의 속성을 가짐 <do type=“accept” label=“YES”> <go href=“#다음 카드명 또는 링크” /> </do> do 태그는 type 속성과 label 속성을 가짐
6. WML 1.1 태그 < 문법 규칙- 4> 6. 예약어 사용 문자 WML 표시방법 ‘ '; “ " < > & & $ $$ 공백문자 하이픈 (-)
6. WML 1.1 태그 < 문법 규칙- 5> 7. 주석 처리 “<!-- ” 와 “ --> ”로 처리 <do type=“accept” label=“YES”> <!-- 아래 go문은 다음 링크로 간다 --> <go href=“#다음 카드명 또는 링크” /> </do>
6. WML 1.1 태그 Card <wml> <card id="name" title="label" newcontext="boolean" ordered="true" onenterforward="url" onenterbackward="url" ontimer="url"> 내용 </card> </wml> id : 카드명, title:카드제목, newcontext:내용 초기화 ordered:내용표시순서, onenterforward:<go>태그의 경로로 이동 onenterbackward: <prev>태그의 경로로 이동
6. WML 1.1 태그 card.wml <?xml version="1.0" encoding="euc-kr" ?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1 //EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <card id="card1"> <do type=“accept"> <go href=“#card2"/> </do> <p> 첫번째 card입니다. </p> </card> <card id="card2"> <p> 두번째 card입니다. </p> </wml> card.wml
6. WML 1.1 태그 do <go> <prev> <noop> <refresh> <do type="type" label="label" name="name" optional="boolean"> 수행할 내용 </do> <go> <prev> <noop> <refresh> : 특정 url또는 카드로 이동 : 이전 url로 이동 : 아무 동작도 수행하지 않음 : 관련 변수들을 새롭게 설정
6. WML 1.1 태그 <?xml version="1.0" encoding="euc-kr" ?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1 //EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <card> <p> 확인 또는 옵션을 선택하세요</p> <do type="accept" label=“확인"> <go href="#acceptcard"/> </do> <do type="accept" label="선택"> <go href="#optionscard"/> </card> do.wml의 앞부분
6. WML 1.1 태그 do.wml의 뒷부분 <card id="acceptcard"> <p> 당신은 확인 키를 눌렀습니다. ! </p> </card> <card id="optionscard"> <p> 당신은 옵션 키를 눌렀습니다. ! </p> </wml> do.wml의 뒷부분
6. WML 1.1 태그 img alt : 이미지 대신 텍스트 표시 src : 표시할 이미지 url 링크 <img alt="text" src="url" localsrc="icon" align="alignment" height="n" width="n" vspace="n" hspace="n"/> alt : 이미지 대신 텍스트 표시 src : 표시할 이미지 url 링크 Localsrc : 이미지 대신 아이콘 Align : 이미지 위치 Vspace:좌우 여백 Hspace:상하 여백
6. WML 1.1 태그 Image.wml <?xml version="1.0" encoding="euc-kr" ?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1 //EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <card id="card1"> <p align="center"> <img src=“home.bmp" alt=“home” localsrc=“house” /> </p> </card> </wml> Image.wml
6. WML 1.1 태그
6. WML 1.1 태그 viewallicon.wml의 앞부분 <?xml version="1.0" encoding="euc-kr" ?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1 //EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <card> <do type="accept" label="Enter"> <go href="viewallicon.wmls#main()"> <setvar name="iconnum" value="0"/> </go> </do> <p align="center"> -- View All icon -- </p> <p align="center"> Press Enter key ! </p> </card> viewallicon.wml의 앞부분
6. WML 1.1 태그 viewallicon.wml의 뒷부분 <card id="card2"> <onevent type="ontimer"> <go href="viewallicon.wmls#main()"/> </onevent> <timer value="1"/> <p align="center"> -- View icon -- </p> <p> Icon no : $iconnum </p> <p> <img src="$iconnum.bmp" localsrc="$iconnum" alt="invalid icon num"/> </p> </card> </wml> viewallicon.wml의 뒷부분
6. WML 1.1 태그 viewallicon.wml의 Viewallicon.wmls extern function main( ) { var iconnum = Lang.parseInt(WMLBrowser.getVar("iconnum")); Console.println("iconnum:" + WMLBrowser.getVar("iconnum")); if ( iconnum < 166 ) { iconnum = iconnum + 1; WMLBrowser.setVar("iconnum", iconnum); WMLBrowser.go("viewallicon.wml#card2"); } viewallicon.wml의 Viewallicon.wmls
6. WML 1.1 태그 go Href:이동할 url Method:변수값 전달 방식 (post 또는 get) <go href="url" sendreferer="boolean" method="method” accept-charset="charset”> <postfield name="data" value="value"/> 전달할 변수와 변수값 </go> Href:이동할 url Method:변수값 전달 방식 (post 또는 get) Accept-charset:사용하는 문자셋
6. WML 1.1 태그 go.wml ( Post 방식 ) <wml> <card> <do type="accept"> <go method="post" href="printname.asp"> <postfield name="firstname" value="$firstname"/> <postfield name="lastname" value="$lastname"/> </go> </do> 1. 성 : <input name="firstname"/> 2. 이름 : <input name="lastname"/> </card> </wml> go.wml ( Post 방식 )
6. WML 1.1 태그 go.wml ( Get 방식 ) <wml> <card> <do type="accept"> <go href="printname.asp?firstname=$firstname&lastname=$lastname"/> </do> 성 : <input name="firstname"/> 이름 : <input name="lastname"/> </card> </wml> go.wml ( Get 방식 )
6. WML 1.1 태그 printname.asp <% Response.ContentType = "text/vnd.wap.wml" Dim firstname, lastname firstname = request("firstname") lastname = request("lastname") %> <wml> <card> <p> 성: <%=firstname%> <br/> 이름 : <%=lastname%> </p> </card> </wml> printname.asp
6. WML 1.1 태그 select Multiple:사용자가 여러 개 선택가능여부 Name:select문의 변수명 선택하세요 <select title="label" multiple="boolean" name="variable" value="default" iname="index_var" ivalue="default" tabindex="n"> <option value=“”>선택내용</option> </select> Multiple:사용자가 여러 개 선택가능여부 Name:select문의 변수명 Value:default값을 설정
6. WML 1.1 태그 <?xml version="1.0" encoding="euc-kr" ?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1 //EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <card > <p> 좋아하는 동물 선택: <select name="animal"> <option value="Dog"> Dog </option> <option value="Cat"> Cat </option> <option value="Horse"> Horse </option> </select> </p> select.wml의 앞부분
6. WML 1.1 태그 select.wml의 뒷부분 <do type="accept"> <go href="#card2"/> </do> </card> <card id="card2"> <p> 좋아하는 동물 : $(animal)<br/> </p> </wml> select.wml의 뒷부분
6. WML 1.1 태그 option Value: 선택한 옵션의 변수값 Onpick:선택되면 이동할 url <option title="label" value="value" onpick="url"> 선택내용 </option> Value: 선택한 옵션의 변수값 Onpick:선택되면 이동할 url
6. WML 1.1 태그 <?xml version="1.0" encoding="euc-kr" ?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1 //EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <card> <p> 좋아하는 색깔은: <select name="color"> <option title="R" value="1" onpick="#card2">빨간색 </option> <option title="B" value="2" onpick="#card2">파란색 </option> <option title="G" value="3" onpick="#card2">녹 색 </option> <option title="Y" value="4" onpick="#card2">노란색 </option> option.wml의 앞부분
6. WML 1.1 태그 option.wml의 뒷부분 </select> </p> </card> <card id="card2"> <p> color number : $(color) </p> </wml> option.wml의 뒷부분
6. WML 1.1 태그 onevent (1) Onpick: 사용자가 옵션을 선택했을 때 <onevent type="type"> type 속성에 표시한이벤트 발생시 수행하는 동작 </onevent> Onpick: 사용자가 옵션을 선택했을 때 Onenterforward: 사용자가 <go>로 해당 카드에 이동해올때 Onenterbackward:사용자가 <prev>로 해당 카드에 이동해 올때 Ontimer : 타이머가 종료할 때
6. WML 1.1 태그 onevent (2) 이벤트 발생시 수행하는 동작들 <go> <prev> <noop> <refresh> : 특정 url또는 카드로 이동 : 이전 url로 이동 : 아무 동작도 수행하지 않음 : 관련 변수들을 새롭게 설정
6. WML 1.1 태그 setvar Name:변수명 Value:변수값 <setvar name="name" value="value"/> Name:변수명 Value:변수값
6. WML 1.1 태그 <?xml version="1.0" encoding="euc-kr" ?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1 //EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <card id="card1"> <do type="accept"> <go href="#card2"> <setvar name="color" value="Blue"/> <setvar name="animal" value="Horse"/> </go> </do> <p align="center"> 확인버튼을 누르세요 </p> </card> setvar.wml의 앞부분
6. WML 1.1 태그 setvar.wml의 뒷부분 <card id="card2"> <p> 색깔 : $(color) <br/> 동물 : $(animal) </p> </card> </wml>
6. WML 1.1 태그 refresh 변수 값을 재설정할 때 사용 꼭 하나 이상의 변수와 변수 값을 사용해야 함. <refresh>재설정할 변수와 변수 값 </refresh>
6. WML 1.1 태그 <?xml version="1.0" encoding="euc-kr" ?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1 //EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <card> <do type="accept” label=“저장”> <go method="post" href="printname.asp"> <postfield name="firstname" value="$firstname"/> <postfield name="lastname" value="$lastname"/> </go> </do> refresh.wml의 앞부분
6. WML 1.1 태그 refresh.wml의 뒷부분 <do type="options" label=“다시"> <setvar name="firstname" value=""/> <setvar name="lastname" value=""/> </refresh> </do> <p> 성 : <input name="firstname"/> 이름 : <input name="lastname"/> </p> </card> </wml> refresh.wml의 뒷부분
6. WML 1.1 태그 timer : <onevent> 태그와 함께 사용하면 사용자가 아무일도 하지 않고 지정한 시간이 지나면 자동으로 태스크를 수행할 수 있다. <timer name="variable" value="value"/> Name:타이머 값을 저장할 변수 Value:name변수에 설정할 시간 값 ex) 1/10초로서, 10 => 1초임.
6. WML 1.1 태그 <?xml version="1.0" encoding="euc-kr" ?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1 //EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <card id="card1"> <onevent type="ontimer"> <go href="#card2"/> </onevent> <timer name="time" value="10"/> <p> card1입니다. </p> </card> timer.wml의 앞부분
6. WML 1.1 태그 timer.wml의 뒷부분 <card id="card2"> <p> card2입니다. <br/> 시간은 : $(time) </p> </card> </wml> timer.wml의 뒷부분
6. WML 1.1 태그 input Name:input 변수명 Type:text/password 중 하나를 선택 입력제목 <input name="variable" title="label" type="type" value="value" format="specifier" emptyok="boolean" size="n" maxlength="n" tabindex="n"/> Name:input 변수명 Type:text/password 중 하나를 선택 Value:변수의 기본값 Format: 입력 텍스트의 양식 Maxlength:사용자의 최대 입력 문자수
6. WML 1.1 태그 input 태그의 format 속성 설정 입력양식 태그 설 명 A 기호, 대문자 알파벳(숫자 안 됨) 기호, 소문자 알파벳(숫자 안 됨) N 숫자(기호, 알파벳 안 됨) X 기호, 숫자, 대문자 알파벳(소문자 알파벳 안 됨) x 기호, 숫자, 대문자 알파벳(대문자 알파벳 안 됨) M 기본적으로 첫 문자는 대문자 m 기호, 숫자, 소문자 알파벳(대문자 알파벳 안 됨) 기본적으로 첫 문자는 소문자
6. WML 1.1 태그 input.wml의 앞부분 <?xml version="1.0" encoding="euc-kr" ?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1 //EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <card> <do type="accept" label="Enter"> <go href="#card2"/> </do> <p> 사용자 ID : <input name="userid" type="text" format="aaaa6a"/> <br/> 패스워드 :<input name="passwd" type="password" maxlength="10"/> <br/> </p> </card>
6. WML 1.1 태그 input.wml의 뒷부분 <card id="card2"> <p> card2입니다. <br/> 사용자 ID : $(userid) <br/> 패스워드 : $(passwd) </p> </card> </wml> input.wml의 뒷부분
6. WML 1.1 태그 p :한 문단을 표시한다. Align:문단정렬 left/right/center중 선택 <p align="alignment" mode="wrapmode"> 내용 </p> Align:문단정렬 left/right/center중 선택 Mode:줄단위 문자 스크롤 지정 여부 wrap/nowrap
6. WML 1.1 태그 <?xml version="1.0" encoding="euc-kr" ?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1 //EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <card id="card1"> <do type="accept" label="nowrap모드전환"> <go href="#card2"/> </do> <p mode="wrap"> Wrap mode임. <br/> nowrap 모드전환을 위해 전환버튼을 클릭 </p> </card> p.wml의 앞부분
6. WML 1.1 태그 p.wml의 뒷부분 <card id="card2"> <do type="accept" label="wrap모드전환"> <go href="#card1"/> </do> <p mode="nowrap"> No wrap 모드임 <br/> wrap mode모드전환을 위해 전환버튼 클릭 </p> </card> </wml>
6. WML 1.1 태그 p1.wml : 텍스트 정렬 예제 <wml> <card> <?xml version="1.0" encoding="euc-kr" ?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1 //EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <card> <p align="left"> left align </p> <p align="right"> right align </p> <p align="center"> center align </p> </card> </wml>
6. WML 1.1 태그 table : 표를 만들 때 사용함 열의 개수를 반드시 표시해야 하며, 행의 개수는 표시하지 않음. <table title="name" align="left|right|center" columns=“열의 수"> 표 내용 </table> align:표 내용의 정렬설정 colums:열의 개수 표시
6. WML 1.1 태그 <?xml version="1.0" encoding="euc-kr" ?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1 //EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <card> <p align="center"> Score </p> <p align="left" mode="nowrap"> <table columns="2"> <tr> <td>한국</td> <td>일본</td> </tr> table.wml의 앞부분
6. WML 1.1 태그 table.wml의 뒷부분 <tr> <td>17</td> </p> </card> </wml> table.wml의 뒷부분
6. WML 1.1 태그 anchor : 링크를 만드는데 사용되는 태그 <anchor title="label">수행할 태스크</anchor>
6. WML 1.1 태그 anchor.wml의 앞부분 <wml> <card> <p> <?xml version="1.0" encoding="euc-kr" ?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1 //EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <card> <p> 링크들:<br/> <anchor title="링크1"> <go href="#card2"/> 뉴스 </anchor><br/> <anchor title="링크2"> <go href="#card3"/> 스포츠 </anchor> </p> </card> anchor.wml의 앞부분
6. WML 1.1 태그 anchor.wml의 뒷부분 <card id="card2"> <p> 링크1 (뉴스) </p> </card> <card id="card3"> <p> 링크2 (스포츠) </p> </wml> anchor.wml의 뒷부분
6. WML 1.1 태그 a : <go> 태그가 포함된 <anchor> 태그의 축약형 링크를 만드는데 사용되는 태그 <a href="url" title="label"> 텍스트 내용 </a>
6. WML 1.1 태그 a.wml의 앞부분 <wml> <card> <p> <?xml version="1.0" encoding="euc-kr" ?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1 //EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <card> <p> 링크들:<br/> <a href="#card2" title="링크1"> 뉴스 </a><br/> <a href="#card3" title="링크2"> 스포츠 </a> </p> </card> a.wml의 앞부분
6. WML 1.1 태그 a.wml의 뒷부분 <card id="card2"> <p> 링크1(뉴스) </p> </card> <card id="card3"> <p> 링크2(스포츠) </p> </wml>
6. WML 1.1 태그 <b> : 진한 글씨 <big> : 큰 글씨 <em> : 강조체 <small> : 작은 글씨 <strong> : 강조체 <u> : 밑줄
6. WML 1.1 태그 template : wml 덱 전체에 영향을 미치는 동작을 정의 단, 카드에서 정의된 동작이 우선한다. <template onenterforward="url" onenterbackward="url" ontimer="url"> 특정 이벤트가 발생했을 때 일어나는 동작 - <do>, <onevent> </template> Onenterforward: <go>태그를 사용하여 사용자가 해당 wml덱으로 이동해 왔을 때 이동할 url을 표시 Onenterbackward : <prev> 태그를 사용하여 해당 wml덱으로 Ontimer : 타이머가 종료되었을 때 이동할 url을 표시
6. WML 1.1 태그 <head> : 메타 정보와 접근 권한을 포함 <meta> : 덱에 대한 접근 권한 정보 <head> <meta http-equiv="Cache-Control" content="max-age=0" forua= true /> <meta http-equiv="Cache-Control" content="must-revalidate" forua= true/> <meta http-equiv="Cache-Control" content="no-cache“ forua= true/> </head>