※ PowerBuilder에서 Daum 우편번호 API 사용하기
1) 다음(Daum)에서 적용하는 javascript API 코드를 복사해서 HTML화일을 생성한다.
- postcode_new.html
- Daum API에 대한 정보는 http://postcode.map.daum.net/guide
- 아래 소스는 Daum에서 제공하는 예제 소스내용입니다.
<input type="text" id="sample4_postcode1"> - <input type="text" id="sample4_postcode2"> <input type="button" onclick="sample4_execDaumPostcode()" value="우편번호 찾기"><br> <input type="text" id="sample4_roadAddress" placeholder="도로명주소"> <input type="text" id="sample4_jibunAddress" placeholder="지번주소"> <span id="guide" style="color:#999"></span>
<script src="https://spi.maps.daum.net/imap/map_js_init/postcode.v2.js"></script> <script> function sample4_execDaumPostcode() { new daum.Postcode({ oncomplete: function(data) { // 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.
// 도로명 주소의 노출 규칙에 따라 주소를 조합한다. // 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다. var fullRoadAddr = data.roadAddress; // 도로명 주소 변수 var extraRoadAddr = ''; // 도로명 조합형 주소 변수
// 법정동명이 있을 경우 추가한다. if(data.bname !== ''){ extraRoadAddr += data.bname; } // 건물명이 있을 경우 추가한다. if(data.buildingName !== ''){ extraRoadAddr += (extraRoadAddr !== '' ? ', ' + data.buildingName : data.buildingName); } // 도로명, 지번 조합형 주소가 있을 경우, 괄호까지 추가한 최종 문자열을 만든다. if(extraRoadAddr !== ''){ extraRoadAddr = ' (' + extraRoadAddr + ')'; } // 도로명, 지번 주소의 유무에 따라 해당 조합형 주소를 추가한다. if(fullRoadAddr !== ''){ fullRoadAddr += extraRoadAddr; }
// 우편번호와 주소 정보를 해당 필드에 넣는다. document.getElementById("sample4_postcode1").value = data.postcode1; document.getElementById("sample4_postcode2").value = data.postcode2; document.getElementById("sample4_roadAddress").value = fullRoadAddr; document.getElementById("sample4_jibunAddress").value = data.jibunAddress;
// 사용자가 '선택 안함'을 클릭한 경우, 예상 주소라는 표시를 해준다. if(data.autoRoadAddress) { //예상되는 도로명 주소에 조합형 주소를 추가한다. var expRoadAddr = data.autoRoadAddress + extraRoadAddr; document.getElementById("guide").innerHTML = '(예상 도로명 주소 : ' + expRoadAddr + ')';
} else if(data.autoJibunAddress) { var expJibunAddr = data.autoJibunAddress; document.getElementById("guide").innerHTML = '(예상 지번 주소 : ' + expJibunAddr + ')';
} else { document.getElementById("guide").innerHTML = ''; } } }).open(); } </script> |
2) Web서버의 특정 위치에 postcode_new.html를 복사
3) 인터넷창(IE,크롬)에서 해당 html을 호출이 가능한지 테스트 진행
- http://웹서버주소/postcode_new.html
|
- 상단과 같이 나오면 다음 API를 사용할수 있음.
4) PowerBuilder OLE인 Microsoft Web Browser를 이용해서 html 화일을 호출해서 사용한는데 파워빌더가 자 체지원하는 Microsoft Web Browser를 사용하지 못 할수도 있기 때문에 아래의 사이트에 가서 유저오브젝 트(u_web_browser.sru)를 다운 받아 import해서 사용합니다.
받은 주소 : http://cafe.daum.net/SWShin/N7Ql/168
5) 윈도우 w_postcode_daum를 만든다
6) 작업 pbl내용
|
- u_web_browser
- w_postcode_daum
7) w_postcode_daum에 Create User Object control로 u_web_browser를 아래와 import시킨 후 아래와 같이 화면을 구성한다
|
8) w_post_code_daum의 Open 이벤트에 아래와 같이 기술한다.
string ls_url
ls_url = 'http://웹서버주소/postcode_new.html' ole_postcode.object.navigate(ls_url,0,0,0,0) |
- w_post_code_daum을 실행하면 아래와 같이 실행된다.
|
9) 이제 기본 화면 구성은 마무리 하고, postcode_new.html을 아래와 같이 수정합니다.
수정된 내용은 빨간색으로 표시 했습니다.
수정한 내용에 대해서는 자세히 설명하지 않겠습니다. JAVASCRIPT에 대한 약간의 지식이 필요합니다.
소스를 분석해보면 충분히 이해할수 있습니다.
<input type="text" id="sample4_postcode1"> - <input type="text" id="sample4_postcode2"> <input type="button" onclick="sample4_execDaumPostcode()" value="우편번호 찾기"><br> <input type="text" id="sample4_roadAddress" placeholder="도로명주소"> <input type="text" id="sample4_jibunAddress" placeholder="지번주소"> <input type="hidden" id="addr1"> //추가된 부분 : INPUT TYPE을 HIDE을 사용한 의미를 파악하면될 것 같습니다. <input type="hidden" id="addr2"> //추가된 부분 : INPUT TYPE을 HIDE을 사용한 의미를 파악하면될 것 같습니다. <span id="guide" style="color:#999"></span>
<script src="https://spi.maps.daum.net/imap/map_js_init/postcode.v2.js"></script> <script> function sample4_execDaumPostcode() { new daum.Postcode({ oncomplete: function(data) { // 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.
// 도로명 주소의 노출 규칙에 따라 주소를 조합한다. // 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다. var fullRoadAddr = data.roadAddress; // 도로명 주소 변수 var extraRoadAddr = ''; // 도로명 조합형 주소 변수
// 법정동명이 있을 경우 추가한다. if(data.bname !== ''){ extraRoadAddr += data.bname; } // 건물명이 있을 경우 추가한다. if(data.buildingName !== ''){ extraRoadAddr += (extraRoadAddr !== '' ? ', ' + data.buildingName : data.buildingName); } // 도로명, 지번 조합형 주소가 있을 경우, 괄호까지 추가한 최종 문자열을 만든다. if(extraRoadAddr !== ''){ extraRoadAddr = ' (' + extraRoadAddr + ')'; } // 도로명, 지번 주소의 유무에 따라 해당 조합형 주소를 추가한다. if(fullRoadAddr !== ''){ fullRoadAddr += extraRoadAddr; }
// 우편번호와 주소 정보를 해당 필드에 넣는다. document.getElementById("sample4_postcode1").value = data.postcode1; document.getElementById("sample4_postcode2").value = data.postcode2; document.getElementById("sample4_roadAddress").value = fullRoadAddr; document.getElementById("sample4_jibunAddress").value = data.jibunAddress;
var addr = fullRoadAddr.replace(/(\s|^)\(.+\)$|\S+~\S+/g, ''); //필요없는 문자를 ‘’로 변환한다. document.getElementById('addr1').value = '@' + data.postcode1 + data.postcode2 + '/' + addr + '$'; // 직접가져갈 자료(구주소) // 추가된 부분 : 호출될 소스에서 @,$를 기준으로 구분할겁니다.
var addr = data.jibunAddress.replace(/(\s|^)\(.+\)$|\S+~\S+/g, ''); //필요없는 문자를 ‘’로 변환한다. document.getElementById('addr2').value = '*' + data.postcode1 + data.postcode2 + '/' + addr + '%'; // 직접가져갈 자료(신주소) // 추가된부분 : 호출될 소스에서 *,%를 기준으로 구분할겁니다. // (중요) 구분값으로 사용되는 특수문자는 호출된 html에서 사용 되지 않는 기호를 사용해야합니다.
// 사용자가 '선택 안함'을 클릭한 경우, 예상 주소라는 표시를 해준다. if(data.autoRoadAddress) { //예상되는 도로명 주소에 조합형 주소를 추가한다. var expRoadAddr = data.autoRoadAddress + extraRoadAddr; document.getElementById("guide").innerHTML = '(예상 도로명 주소 : ' + expRoadAddr + ')';
} else if(data.autoJibunAddress) { var expJibunAddr = data.autoJibunAddress; document.getElementById("guide").innerHTML = '(예상 지번 주소 : ' + expJibunAddr + ')';
} else { document.getElementById("guide").innerHTML = ''; } } }).open(); } </script> |
10) w_post_code_daum 윈도우의 “확인” 버튼의 clicked 이벤트에 아래와 같이 기술한다.
oleobject obj string ls_temp, ls_return long ll_str, ll_end
//작업내용 가져오기 IF ole_postcode.object.Busy = FALSE THEN
Obj = ole_postcode.OBJECT.Document IF ole_postcode.OBJECT.document THEN ls_temp = Obj.body.outerhtml END IF END IF
//원하는 내용 자르기 //구주소 ll_str = pos(ls_temp, '@') ll_end = pos(ls_temp, '$') ll_end = ll_end - ll_str
ls_return = mid(ls_temp, ll_str + 1, ll_end - 1) sle_1.text = mid(ls_return,1,6) ll_end = len (ls_return) sle_2.text = mid(ls_return,8,ll_end)
//신주소 ll_str = pos(ls_temp, '*') ll_end = pos(ls_temp, '%') ll_end = ll_end - ll_str
ls_return = mid(ls_temp, ll_str + 1, ll_end - 1) sle_3.text = mid(ls_return,1,6) ll_end = len (ls_return) sle_4.text = mid(ls_return,8,ll_end) |
(중요)Script를 분석하면 postcode_new.html에서 사용한 특수문자 사용 이유를 확인할수 있습니다.
11) 실행 결과 확인
가) 실행된 화면에서 우편번호 찾기를 Click한다
|
나) 호출된 POPUP창에서 주소를 검색 후 원하는 주소를 클릭한다.
|
다) 주소를 불러온 w_postcode_daum 윈도우에서 확인 버튼을 Click한다.
|
라) 최종 화면
|
나. 참고 내용
|
- UserObject 로 호출한 html 문서는 Daum Api 샘플을 그대로 사용했기 때문에 상단의 화면을 그대로 사용 할수 없습니다
- 따라서, 해당 html의 소스(JavaScript)를 수정해서 원하는 화면으로 재구성해서 사용해야합니다.
'PowerBuilder > 활용' 카테고리의 다른 글
POWERBUILDER와 SAP RFC 연동 관련 (0) | 2019.01.16 |
---|