SAP Tech를 통해 SAP의 Web Application Server와 그것을 근간으로 서비스되는 BSP Application에 대한 소개를 하게 되어 기쁘다

Size: px

Start display at page:

Download "SAP Tech를 통해 SAP의 Web Application Server와 그것을 근간으로 서비스되는 BSP Application에 대한 소개를 하게 되어 기쁘다"

계남 선
4 years ago
Views:

1 BSP Extension 의소개 - HTMLB

2 목 록 1. BSP Extension의소개 BSP Extensions and BSP Elements.4 3. BSP Extension Framework 5 4. Example: Using Extensions in BSP Pages.7 5. 자주사용하는 HTMLB Element button tableview tree tabstrip checkbox radiobutton inputfield dropdownlistbox tray textedit.27

3 1. BSP Extension 의소개 활용 Predefined extension Use HTML 코딩에서레이아웃이복잡하거나, element(button, text, select, ) 들은서로다른스타일과사이즈를가질수있는데, 이때많은내용의코드가들어갈수있다. 이경우에태그를잘못여닫거나, (double quote) 나 (single quote) 를잘못입력하는경우도있다. 그리고, HTML 코드에오류가있더라도컴파일을할수있는툴이제공되지않기때문에, 어느구문에서오류가났는지쉽게찾기가어렵다. BSP Extension을이용하면이런오류를줄이고, 더용이하게코드를작성할수있다. HTMLB, PHTMLB, XHTMLB BSP, XML, WML 등에서사용가능 각 BSP element는기능을구현해놓은 ABAP class가지정되어있어서그 ABAP class class의 method와 attribute를가져다쓸수있다. 생성 Transaction SE80에서필요한 BSP extension을만들수있다. - BSP compile time에코딩상의오류사항이체크된다. - ABAP element class에서코딩이올바르다면 HTML 코드가발생된다. element class에서 HTML 코드를만들어줄때추가로코딩한로직을넣 Advantages 을수있다. - 발생된 HTML 코딩은소스내부에일일이 style sheets를넣어주지않아도, standard로제공하는 style sheets 참조경로를포함한다. - HTML, Javascript 코드와혼용하여사용할수있다.

4 2. BSP Extensions and BSP Elements BSP extension은여러개의 BSP element들로구성된다. BSP element는 BSP layout에서쓸수있는다양한속성들을제공하고, 그속성들은해당 ABAP class에선언되어있다. BSP에서 BSP Extension을사용하려면, extension name과 prefix를선언하고사용한다. 예 ) <%@extension name="htmlb" prefix="htmlb" %> <htmlb:button id= btn1 text= Hit Me! /> 설명 ) => extension name : htmlb => htmlb: XML namespace. Extension의 prefix => button은 id와 text라는속성을가지는 BSP element이다. => BSP 컴파일러에의해다음과같은 pseudocode가만들어진다. data; btn1 type ref to CL_HTMLB_BUTTON. create object btn1. btn1->writer = current_output_writer. bn1->id = btn1. btn1->text = Hit Me!. btn1->begin_tag( ). btn1->end_tag( ).

5 3. BSP Extension Framework BSP layout에서사용한 extension element는메소드와속성이 XML 코드형태로구성되어있다. Extension element는해당 ABAP class와매핑되어있다. ABAP class는 element의이벤트를처리하거나데이터를얻는등의기능이구현되어있다. 예 ) 한 BSP page는 myextension이라는 BSP extension의 elements를사용한다. 이 extension에서모든 BSP elements는 ext라는 prefix를사용한다. 필요한 BSP elements는 BSP extension editor를사용해서 Workbench내에서정의한다. BSP extension은각 elements를컨테이너형태로가지고있다. BSP element는여러개의속성과메소드를가진다. BSP element의기능들은 Class Builder(Transaction code:se24) 에있는 global element handler class인 myelementclass에의해수행된다.

6 BSP Extension 생성과 BSP Elements 생성에대한설명은제외함.

4. Example: Using Extensions in BSP Pages 다음예제는 HTMLB 를이용해서만든 BSP 의간단한소스이다. 아래에서이용된 BSP element 들은 Tag Browser 에서 workbench 로 drag 하여놓고자하는곳에 drop 한다.

7 4. Example: Using Extensions in BSP Pages 다음예제는 HTMLB 를이용해서만든 BSP 의간단한소스이다. 아래에서이용된 BSP element 들은 Tag Browser 에서 workbench 로 drag 하여놓고자하는곳에 drop 한다. 아래의예제는비행기번호를입력하여, 비행기예약데이터를조회하는프로그램으로 content, page, form, label, inputfield, button element 를이용했다. 조회내용은 tableview element 를통해보여진다. [ 참고설명 ] content : extension을사용한코딩의시작을나타낸다. </ui:content> 로코드의끝을나타낸다. HTML에서 <html> 과유사하다. page : 페이지내부에레이아웃을구성하기위한시작 element이다. HTML에서 <head> 태그와유사하다. form : 폼 element를작성하기시작하는 element이다. HTML에서 <form> 태그와유사한기능을제공한다. label : 폼 element의설명이나각종타이틀을달수있는 element이다. inputfield, button은 5번에서설명하므로제외한다.

8 [ 참고설명 ] prefix BSP extension인 htmlb는 extension directive( 두번째라인부분 ) 을통해 BSP page안으로 import된다. Prefix는페이지내에서 extension의식별자기능을한다. 이 directive는개발자가그페이지내에서첫번째 BSP element를 insert한후에자동으로생성된다. ( 마우스로 Tag Browser에있는 element를 drag & drop하면기본적으로생성된다.) 기본적으로프로그램에는 default prefix가들어가있지만, extension directive에서 prefix를다른 name으로바꾸어사용할수있다.

9 5. 자주사용하는 HTMLB element 5.1 button Layout) 속 성 설 명 Id 버튼이름 text 버튼에보일텍스트 tooltip 버튼위에마우스를올리면나오는풍선도움말 onclick 버튼을클릭할경우에이벤트를발생시킨다. design 스탠다드에서제공하는버튼의모양 / 디자인 (STANDARD, EMPHASIZED, SMALL, ) width 버튼넓이

10 Event) OnInputProcessing

11 5.2 tableview Layout) 속성설명 id headertext headervisible design visiblerowcount 테이블뷰의이름테이블뷰의상단에보이는텍스트 headertext를보일것인지아닌지의여부스탠다드에서제공하는테이블뷰의모양 / 디자인테이블뷰에보일데이터의개수개수를지정하면, 페이징기능을제공한다.

fillupemptyrows 지정한 visiblerowcount보다데이터의개수가적을경우, 지정한개수 만큼빈 row를보인다. onheaderclick 헤더를클릭할경우이벤트를발생시킨다. onrowselection row를선택하면이벤트를발생시킨다.

12 fillupemptyrows 지정한 visiblerowcount보다데이터의개수가적을경우, 지정한개수 만큼빈 row를보인다. onheaderclick 헤더를클릭할경우이벤트를발생시킨다. onrowselection row를선택하면이벤트를발생시킨다. selectionmode 테이블의 row를선택하는모드 (NONE, SINGLESELECT, MULTISELECT, LINEEDIT, ) keycolumn 테이블뷰의키칼럼 table 테이블뷰에뿌릴데이터가있는 internal table iterator 테이블뷰의셀에이미지, form element 등을넣을때 iterator를이용하 여셀의내용을변경한다. Event) OnInputProcessing

13 5.3 tree Layout) <htmlb:tree> 속성설명 id title tooltip 트리의이름 트리의상단에보이는텍스트 마우스를트리에가져다대면나오는풍선도움말

14 <htmlb:treenode> - tree 의 child 속성설명 id text isopen tooltip 트리노드의이름노드구성시화면에보이는텍스트트리구성시닫힌형태로보일것인지, 열린형태로보일것이지의여부마우스를트리노드의텍스트에가져다대면나오는풍선도움말 Event) OnInputProcessing

15 5.4 tabstrip Layout) <htmlb:tabstrip> 속성설명 id 탭스트립의이름

16 <htmlb:tabstripitem> - tabstrip 를구성하는 tab 하나 속성설명 id index title tooltip 탭의이름탭의 index(1, 2, 3, ) 탭제목마우스를탭에가져다대면나오는풍선도움말 Event) OnInputProcessing

17 5.5 checkbox Layout) <htmlb:checkboxgroup> 속성설명 id columncount width 체크박스그룹의이름한줄에보일체크박스의개수위의예제는 2를설정했으므로두줄로체크박스가나옴체크박스그룹의넓이 <htmlb:checkbox> - 개별체크박스 속성설명 id text 체크박스의이름 체크박스오른쪽에보일텍스트

18 Event) OnInputProcessing

19 5.6 radiobutton Layout) <htmlb:radiobuttongroup> 속성설명 id 라디오버튼그룹의이름 <htmlb:radiobutton> - 개별의 radiobutton 속성설명 id text 라디오버튼의이름 라디오버튼오른쪽에보일텍스트

20 Event) OnInputProcessing

21 5.7 inputfield Layout) 속 성 설 명 id 필드의이름 description 화면에는보이지않으나, 코딩상도움말형태로적어두는설명 size 필드의사이즈 showhelp type에따른도움말버튼을보일것인지의여부 위의예제는 type이 DATE이므로입력필드오른쪽에달력컴포넌트를 제공하는버튼이달려있다. dovalidate 필드가필수입력항목인지체크 submitonenter 필드에서데이터를입력한후엔터를치면 type에맞게입력한데이터 가변형된다. required 필수항목임을나타낸다. maxlength 최대입력텍스트를지정한다. value 필드에보일값

22 type 필드의타입을지정한다. Event) OnInputProcessing

23 5.8 dropdownlistbox Layout) 속성설명 id nameofkeycolumn nameofvaluecolumn table 콤보박스의이름콤보박스의키가되는 structure의필드명콤보박스의텍스트가되는 structure의필드명콤보박스에뿌릴데이터를가지는 internal table명

24 Event) OnInputProcessing

25 5.9 tray Layout) <htmlb:tray> 속 성 설 명 id 트레이의이름 title 트레이상단에보일텍스트 ( 제목 ) iscollapsed 트레이가열린상태로보일것인지, 닫혀있는상태로보일것인지의

26 여부 oncollapsed ( 위그림에서 ) 트레이맨오른쪽의이미지를누르면발생하는이벤트열리고, 닫힐때마다이벤트를발생시킨다. onremove ( 위그림의 ) 팝업메뉴에서트레이제거이벤트를발생시킨다. <htmlb:traybody> - 속성없음 - 트레이내부에데이터보일곳을지정한다. Event) OnInputProcessing

27 5.10 textedit Layout) 속 성 설 명 id textedit의이름 text textedit에보일데이터 ( 텍스트 ) cols textedit의넓이 rows textedit의높이 ( 줄수 )

28 Event) OnInputProcessing

PowerPoint Template

PowerPoint Template JavaScript 회원정보 입력양식만들기 HTML & JavaScript Contents 1. Form 객체 2. 일반적인입력양식 3. 선택입력양식 4. 회원정보입력양식만들기 2 Form 객체 Form 객체 입력양식의틀이되는 태그에접근할수있도록지원 Document 객체의하위에위치 속성들은모두 태그의속성들의정보에관련된것