이번 시간에는
This presentation is the property of its rightful owner.
Sponsored Links
1 / 16

이번 시간에는 ... PowerPoint PPT Presentation


  • 105 Views
  • Uploaded on
  • Presentation posted in: General

이번 시간에는. 지난 시간에는 WAP 컨텐츠 제작을 위한 마크업 언어인 WML 개발의 첫번째 시간으로 , WML 의 소개와 정의 , WML 문서 구조 , WML 사용 첫번째 예제 및 WML 의 택스트 포맷 태그와 이미지 처리 태그에 대해 알아 보았습니다 . 이번 시간에는 WML 개발 그 두번째 시간으로 , 링크 및 태스크 지원 WML 태그들에 대해서 학습해 보도록 하겠습니다. 학습 목표. 16 회차 강의에서 다루게 되는 내용은 다음과 같습니다. WML 개발 - II. 이번 장의 학습 목표.

Download Presentation

이번 시간에는 ...

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


3488778

이번 시간에는...

지난 시간에는 WAP 컨텐츠 제작을 위한 마크업 언어인 WML 개발의 첫번째 시간으로, WML의 소개와 정의, WML 문서 구조, WML 사용 첫번째 예제 및 WML의 택스트 포맷 태그와 이미지 처리 태그에 대해 알아 보았습니다.

이번 시간에는 WML 개발 그 두번째 시간으로, 링크 및 태스크 지원 WML 태그들에 대해서 학습해 보도록 하겠습니다.


3488778

학습 목표

16 회차 강의에서 다루게 되는 내용은 다음과 같습니다.

WML 개발 - II

이번 장의 학습 목표

WML 페이지 이동 태그에 대해 알 수 있다.

WML 태스크 수행 태그에 대해 알 수 있다.

WML 이벤트 처리 태그에 대해 알 수 있다.

WML 사용자 Input 처리 태그에 대해 알 수 있다.


3488778

<wml>

<card>

<p>

다른 페이지 이동

<anchor title="page_two">

<go href="http://127.0.0.1/page2.wml"/> 페이지 2

</anchor><br/>

다른 카드 이동

<anchor title="Next_Card">

<go href="#Next_Card"/> 다음 Card

</anchor>

</p>

</card>

<card id="card1">

<p>

다음 Card로 이동했음 <br/>

</p>

</card>

</wml>

다른 페이지 이동

<페이지 2>

다른 카드 이동

<다음 Card>

사이트 이동

다른 페이지인 페이지 Number 2로 이동했음

카드간 이동

다음 카드로 이동 했음

같은 WML 문서 내에서 다른 Card로 이동

무선 네트워크 통신으로 다른 사이트로 이동

WML 페이지 이동 Tag

  • Navigation을 위한 WML 태그

    • WML <ANCHOR> 태그

      • <ANCHOR> 태그는 <GO> 태그와 함께 사용하여 다른 사이트로의 이동을 위한 하이퍼링크와 하나의 WML 문서내에서 각 WML Card 간 이동을 지원하는 Internal 링크로 사용


3488778

<wml>

<card>

<p>

<a href="http://127.0.0.1/page_two.wml"/>

전화번호부

<img src="http://127.0.0.1/phone_img.bmp"/>

</a> <br/>

</p>

</card>

</wml>

사이트 이동

전화번호부

External 링크

다른 페이지인 페이지 2로 이동했음

다른 사이트에서 이미지 추출

: External 링크

다른 사이트로 이동

WML 페이지 이동 Tag

  • Navigation을 위한 WML 태그

    • WML <A> 태그

      • <A> 태그는 <ANCHOR> 와 <GO> 태그의 사용과 그 기능이 같으며, 다른 사이트로의 이동을 위한 하이퍼링크와 하나의 WML 문서내에서 각 WML Card 간 이동을 지원하는 Internal 링크로 사용

      • <A> 태그는 사이트 및 WML Card간 이동시 변수를 사용하지 않을 경우 사용  사이트 또는 WML Card간 이동 시, 특정 값을 전달 할 때는 (변수를 전달할 경우) <ANCHOR> 태그 사용

    • WML <IMG> 태그

      • <IMG> 태그의 “src”는 현재 문서와 다른 문서를 연결하는 External 링크로 사용 가능하며, 다른 곳에 위치한 Image 파일을 현재 문서로 불로 올 때 사용


3488778

<wml>

<card id="first_card">

<do type="accept" label="다음">

<go href="#next_card" />

</do>

<p align="center"> 1번 카드 </p>

</card>

<card id="next_card">

<do type="prev" label="이전">

<prev/>

</do>

<p align="center"> 2번 카드</p>

</card>

</wml>

2번 카드

_____________

이전

2번 카드

_____________

이전

<DO>와 <GO>

사용

<DO>와 <PREV>

사용

WML Task 수행 Tag

  • WML 액션 태그

    • 특정 Task 작업 수행을 위한 WML 태그 <DO>, <GO>, <PREV>, <POSTFIELD> 등

    • WML <DO> 태그

      • 사용자 인터페이스 (UI: User Interface)와 관련된 작업 처리  사용자 액션에 따른 작업 수행

      • WAP용 휴대폰 단말기의 확인 및 메뉴 버튼을 누를 때, <DO> ~ </ DO> 부분에 설정한 작업 실행

      • 작업 타입 : ACCEPT, OPTIONS, HELP, (PREV, DELETE, RESET)

      • 작업 내용:GO, (PREV, REFRESH, NOOP)

1번 카드

_____________

다음

1번 카드

_____________

다음


3488778

전화번호

[011xxx0123]

<wml>

<card id="Go_Get_Example">

<do type="accept">

<go href ="http://127.0.0.1/Get_This.wml

TelNo=$TelNO" />

</do>

<p>

전화번호:

<input name="TelNo" />

</p>

</card>

</wml>

당신이 입력한

전화번호는

011xxx0123 입니다.

<GO> GET

전송방식 사용

HTTP 헤더 URL 필드에

사용자 입력 전화번호 값을 포함하여 전송

Get_This.wml

011xxx0123 전달

WML Task 수행 Tag

  • WML 이동 태그

    • WML <GO> 태그

      • WML <GO> 태그는 “href”속성으로 WML 문서 또는 WML Card 로 이동할 주소 명시, “method”속성으로 이동 문서로 사용자 입력값 전달

      • WML은 다수개 이상의 주소로 데이터 전송 가능 (HTML의 경우, 입력한 데이터는 하나의 URL로만 전송 가능)

      • WML <GO> 태그 데이터 전송 방법: GET & POST

        • GET 방식 : 전송할 변수와 변수 값을 URL에 포함시켜 전송, Default 방식

    • GET 방식 <GO> 태그 사용 예


3488778

이름

[June]

100자 메모

[입력값이긴데이터전송에는POST]

<wml>

<card id="Go_Post_Ex">

<do type="accept">

<go href ="http://127.0.0.1/Post_this.wml"

method="post">

<postfield name="Buddy" value="$Buddy" />

<postfield name="Memo" value="$Memo" />

</go>

</do>

<p>

이름 : <input name=Buddy /> <br/>

100자 메모: <input name="Memo" /> <br/>

</p>

</card>

</wml>

June이 입력한

100자 메모는 :

입력값이긴데이터전송에는POST

••••

<GO> POST

전송방식 사용

HTTP 헤더의 URL 필드와 사용자 입력값 분리 전송

사용자 입력값 전달

WML Task 수행 Tag

  • WML 이동 태그

    • WML <POSTFIELD> 태그

      • WML <POSTFIELD> 태그는 <GO> 태그와 함께 사용하여 <GO> 태그의 POST 방식으로 사용자 입력값을 전달

      • WML <GO> 태그의 POST 방식: 전송할 변수와 변수 값을 URL과 분리하여 전송

      • 주로, 사용자 입력 값의 사이즈가 클 경우 POST 방식 사용

    • POST 방식 <GO> 태그와 <POSTFIELD> 사용 예

Post_This.wml


3488778

100자메모

[사용자 입력 값을

다시 입력하는 예

제입니다.]

_______________

OK Clear

<wml>

<card>

<do type="accept">

<go href ="http://127.0.0.1/memo.wml"

method="post">

<postfield name=“Memo" value="$Memo" />

</go>

</do>

<do type="options" label="Clear">

<refresh>

<setvar name="Memo" value=""/>

</refresh>

</do>

<p>

100자 메모: <input name="Memo" /> <br/>

</p>

</card>

</wml>

100자메모

[ ]

_______________

OK Clear

입력값

새로고침

사용자 입력값

전달

127.0.0.1

컨텐츠 서버

memo.mwl

WML Task 수행 Tag

  • WML 액션 태그

    • WML <REFRESH> 태그

      • WML <REFRESH> 태그는 <DO> 태그와 함께 사용하여 WML Card내 변수값 재 설정에 사용

      • 주로, 사용자가 입력한 데이터를 “새로 고쳐” 다시 입력할 때 사용

    • <REFRESH> 사용 예

메모 재입력


3488778

<wml>

<card id= "card1" ontimer="#card2">

<timer value=“30"/>

Call_Stock_Info_Display(); <br/>

</card>

<card id="card2" ontimer="$card1">

<timer value="50">

Call_Stock_Info_Get(); <br/>

</card>

</wml>

3초마다

자동이동

IPT 주식 정보

상한: xxx

하한: xxx

현재: xxx

_______________

OK

Card2

Call_Stock_Info_Get

주식정보

Display

5초마다

자동이동

Card1

주식정보

컨텐츠 서버

Call_Stock_Info_Get

WML 이벤트 Tag

  • WML 시간 Event 처리 태그

    • WML <ONTIMER> 태그

      • WML <ONTIMER> 태그는 특정 시간이 경과 시, 미리 설정한 작업 자동 수행 기능

      • <ONTIMER> 태그의 시간 단위는 0.1초로, 값을 100으로 설정할 경우, 실제 시간은 10초

    • <ONTIMER> 사용 예

      • 다음 <ONTIMER> 태그 예제는 실시간 변하는 주식 데이터 값 처리를 위해 5 초마다 주식 정보 사이트로 이동하여 Display할 주식 값을 5초 간격으로 변경하는 예제

      • 여기서 Call_Stock_Info_Get()은 주식 정보 사이트에 접속하여 새로운 주식 정보를 가져오는 기능을, Call_ Stock_Info_Display()는 주식 정보를 단말기 창에 Display 하는 기능을 수행한다고 가정


3488778

Second.wml이동

두번째 페이지

_______________

이전문서

사이트 홈

1… 메뉴 …

2… 메뉴 …

_______________

이전문서

Secod.wml

First.wml

<wml>

<card id="first_card">

<onevent type="onenterbackward">

<go href="http://127.0.0.1/home.wml"/>

</onevent>

<onevent type="accept">

<go href="http://127.0.0.1/second.wml"/>

</onevent>

<p align="center">현재페이지</p>

</card>

</wml>

<PREV> 태그로 이전 페이지이동

자동이벤트 발생

사이트홈으로이동

hppt://127.0.0.1/home.wml

WML 이벤트 Tag

  • WML 액션 Event 처리 태그

    • WML <ONEVENT> 태그

      • WML <ONEVENT> 태그는 type 속성으로 지정한 특정 액션 발생 시, 미리 설정한 작업 자동 수행 기능

      • <ONEVENT> 발생 액션 (type 속성 값)

        • onpick : <SELECT> 태그 사용 시, 사용자가 리스트 중 특정 값을 선택할 때, Event 발생

        • onenterforward : <GO> 태그를 사용해서 다른 URL로 이동 시, Event 발생

        • onenterbackward : <PREV> 태그 사용해서 이전 URL로 돌아갈 때, Event 발생

        • ontimer : <TIMER> 태그와 함께 <TIMER> 태그에서 지정한 시간 경과 시, Event 발생

    • <ONEVENT> 사용 예


3488778

<wml>

<card id="select">

<p>

컬러선택 :

<select name="color" ivalue="1;3" multiple="true">

<option value="red">red</option>

<option value="blue" onpick="#onpick1">blue</option>

<option value="green">green</option>

<option value="yellow">yellow</option>

</select>

</p>

</card>

<card id="onpick1">

<p>

선택한컬러 : <br/>

$color

</p>

</card>

</wml>

컬러선택

1* red

2 blue

3*green

4> yellow

OK

선택한컬러 :

red, green, yellow

OK

WML Input 처리 Tag

  • User 선택값 처리 WML 태그

    • WML <SELECT> 태그

      • WML <SELECT> 태그는 다수 리스트 중 하나 이상을 사용자가 선택할 수 있도록 함

    • <SELECT>와 <ONPICK> 이벤트 태그 사용 예

<Select> 사용시,

ivalue는 미리 선택할 리스트 아이템

Multiple=true일 경우, 다수개 아이템 선택 가능

<ONPICK> 이벤트 발생

onpick1 카드로 이동


3488778

WML Input 처리 Tag

  • User 입력값 처리 WML 태그

    • WML <INPUT> 태그

      • WML <INPUT> 태그는 사용자로부터 숫자 및 문자 데이터 값을 입력 받는 기능

      • <INPUT> 태그 속성

  • <INPUT> 태그 Format 속성


3488778

계좌번호입력:

287-33- _

____________

NUM

<wml>

<card id="input_card">

<do type="accept" level=“Enter">

<go href="print_card"/>

</do>

<p>

계좌번호입력:

<input name="account" format="NNN\-NN\-NNNN"/>

</p>

</card>

<card id="print_card">

<p>

입력값 : <br/>

$account <br/>

</p>

</card>

</wml>

format 속성에 의해 정해진 규격의 숫자만

입력 가능

계좌번호입력:

287-33- 7629

____________

Enter

입력값:

287-33- 7629

____________

OK

WML Input 처리 Tag

  • User 입력값 처리 WML 태그

    • WML <INPUT> 태그 예

      • <INPUT> 태그의 format 속성 설정으로, “234-56-7890”과 같이 정해진 규격의 숫자 데이터 입력 예제


3488778

요약 정리

이번 시간에 소개했던 내용을 정리해 봅시다.

WML 페이지 이동 태그에 대해 학습하였습니다.

WML 태스크 수행 태그에 대해 학습하였습니다.

WML 이벤트 처리 태그에 대해 학습하였습니다.

WML 사용자 Input 처리 태그에 대해 학습하였습니다.

다음 시간에는 WML 스크립트 개발에 대하여 학습하시게 될 것입니다.


3488778

평가 하기

문제1

페이지간 링크를 지원하는 태그에는 무었이 있는지 말해 보시오

정답은 다음과 같습니다.

<A>, <ANCHOR>, <GO> 태그

해설내용: WML에서 페이지간 이동 및 링크를 지원하는 태그에는 <A>, <ANCHOR>, <GO> 태그가 있으며, <GO> 태그는 항상 <DO> 태그와 함께 사용되어, 특정 태스크 발생 시, 사이트 이동을 정의합니다.

문제2

<ONEVENT> 태그의 이벤트에는 무었이 있는지 말해 보시오

정답은 다음과 같습니다.

ONPICK, ONENTERFORWARD, ONENTERBACKWARD, ONTIMER 이벤트

해설내용: <ONEVENT> 태그는 <SELECT> 태그와 함께 사용하는 ONPICK 이벤트, 다른 페이지에서 현재 페이지로 재이동할 때 발생하는 ONENTERFORWARD, 이전 페이지로 돌아갈 때 발생하는 ONENTERBACKWARD, 시간 설정에 따른 이벤트 ONTIMER 이벤트가 있습니다.


3488778

평가 하기

사용자 입력값 처리 태그는 무엇입니까?

문제3

정답은 다음과 같습니다.

<SELECT> 및 <INPUT> 태그

해설내용: <SELECT> 태그는 리스트 중의 사용자가 고른 한가지 값을 받아들이는 역할을 수행하고, <INPUT> 태그는 사용자의 직접 입력값을 받아들이는 역할을 수행합니다.


  • Login