전체에 해당되는 글 125건

글

SAP UI5 Step 3: Controls

S4/HANA 2017. 3. 23. 15:02

Step 3: Controls


이제 HTML 본문의 "Hello World"텍스트를 SAPUI5 컨트롤 sap.m.Text로 대체하여, 첫 번째 작은 UI를 Build 할 차례입니다. 처음에는 JavaScript control interface 를 사용하여 UI를 설정하고 control instance를 HTML 본문에 배치합니다.


Preview


Coding

아래의 site Demo Kit에서 여기서 작성하는 응용 프로그램의 모든 파일을 보고 다운로드 할 수 있습니다. 

Walkthrough - Step 3.


webapp/index.html
<!DOCTYPE html>
<html>
   <head>
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta charset="utf-8">
      <title>Walkthrough</title>
      <script
         id="sap-ui-bootstrap"
         src="/resources/sap-ui-core.js"
         data-sap-ui-theme="sap_belize"
         data-sap-ui-libs="sap.m"
         data-sap-ui-compatVersion="edge"
         data-sap-ui-preload="async" >
      </script>
      <script>
         sap.ui.getCore().attachInit(function () {
            new sap.m.Text({
               text : "Hello World"
            }).placeAt("content");
         });
      </script>
   </head>
   <body class="sapUiBody" id="content">
   </body>
</html>


대화 상자를 표시하기 위해 기본 JavaScript를 사용하는 대신 간단한 SAPUI5 control을 사용하려고합니다. control은 화면의 각 부분의 모양과 동작을 정의하는 데 사용됩니다.


위 예제에서 init event의 Callback 은 SAPUI5 text control을 인스턴스화 하는 곳입니다. 컨트롤 이름(sap.m.Text)에는 컨트롤 라이브러리 sap.m의 name space가 접두어로 붙어 있으며, 옵션은 JavaScript 객체를 사용하여 생성자에 전달됩니다. 우리가 제어 할 수 있도록 text 속성을 "Hello World"값으로 설정했습니다.


컨트롤의 생성자 호출을 문서 객체 모델 (DOM:Document Object Model)) 또는 다른 SAPUI5 컨트롤 인스턴스의 노드 안에 SAPUI5 컨트롤을 배치하는 데 사용되는 표준 메서드 인 placeAt에 연결합니다. DOM 노드의 ID를 인수로 전달합니다. 대상 노드로 HTML 문서의 body 태그를 사용하고 ID 내용을 제공합니다. sapUiBody 클래스는 SAPUI5 응용 프로그램을 표시하기위한 테마 종속 스타일을 추가합니다.


SAPUI5의 모든 컨트롤에는 고정 된 속성, 집계 및 구성 집합이 있습니다. 데모 키트의 Explored 앱에서 설명을 찾을 수 있습니다. 또한 각 컨트롤에는 API 참조에서 찾을 수있는 일련의 public function이 제공됩니다.


body에서 <p>"Hello World"<p>를 삭제하는 것을 잊지 마십시오.


Note

sap.ui.core.Control 또는 해당 하위 클래스의 인스턴스 만 독립 실행형으로 렌더링되고 placeAt 함수를 가질 수 있습니다. 각 컨트롤은 컨트롤 내부에서만 렌더링 할 수있는 sap.ui.core.Element를 확장합니다. 컨트롤의 상속 계층 구조에 대한 자세한 내용은 API 참조를 확인하십시오. 각 컨트롤의 API 문서는 직접 알려진 서브 클래스를 참조합니다.


저작자표시 비영리 변경금지

'S4/HANA' 카테고리의 다른 글

SAP UI5 Step 5: Controllers  (0) 2017.03.24
SAP UI5 Step 4: XML Views  (0) 2017.03.24
SAP UI5 Step 2: Bootstrap  (0) 2017.03.23
SAP UI5 Step 1: Hello World!  (0) 2017.03.23
SAP UI5 API 정리 & 예제 site  (0) 2017.03.23

설정

,

트랙백

댓글

글

SAP UI5 Step 2: Bootstrap

S4/HANA 2017. 3. 23. 09:42

Step 2: Bootstrap


SAPUI5를 사용하여 어떤 작업을 수행하려면 먼저 Load, Initialize 작업을 진행 해야합니다. SAPUI5 Load 및 Initialize Process를 bootstrapping 이라고합니다. 

아래 화면의 기능은 이 Bootstrap 이 종료되면 간단한 alert message("UI5 is ready")를 표시합니다.


Preview


Coding

아래의 site 데모 키트에서 여기서 작성하는 응용 프로그램의 모든 파일을보고 다운로드 할 수 있습니다. 

Walkthrough - Step 2.


Note

SAPUI5는 응용 프로그램이 존재하는 동일한 웹 서버 또는 다른 서버에서 로드 할 수있는 JavaScript 라이브러리입니다. 이 자습서의 코드 예제에서는 항상 상대 경로를 표시하고, 

SAPUI5가 당신의 web server root 컨텍스트의 resources 폴더에 로컬로 배포(존재)되어 있다고 가정합니다.

( assume that SAPUI5 is deployed locally in the resources folder of your Web server's root context. )


SAPUI5가 서버의 다른 곳에 배포되었거나 다른 서버를 사용하려는 경우 이 교재(tutorial)의 부트 스트랩 (여기에서 src = "/resources/sap-ui-core.js")에서 해당 path를 당신의 요구에 맞게 조정해야합니다. 

SAPUI5는 또한 CDN (Content Delivery Network)에서 검색 할 수 있습니다. https://sapui5.hana.ondemand.com/resources/sap-ui-core.js


이 참조는 자습 또는 테스트 용으로 최신의 안정적인 버전의 SAPUI5에 사용할 수 있지만, 실제 Production 용도로는 사용하지 마십시오. 실제 Production 응용 프로그램에서는 항상 SAPUI5 버전을 명시적으로 지정해야 합니다.


CDN에 대한 좀 더 많은 정보를 원하시면 아래 사이트를 참조하세요.

Variant for Bootstrapping from Content Delivery Network.


SAP Web IDE를 사용하는 경우 프로젝트를 마우스 오른쪽 버튼으로 클릭하고  Start of the navigation path New Next navigation step HTML5 Application Descriptor End of the navigation path 를 선택하여 / resources ... reference 작업을 수행 할 수 있습니다. 그러면이 경로에 대한 URL 매핑을 구성하는 neo-app.json 파일이 만들어집니다.

<!DOCTYPE html>
<html>
   <head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta charset="utf-8">
 	<title>Walkthrough</title>
      <script
         id="sap-ui-bootstrap"
         src="/resources/sap-ui-core.js" 
         data-sap-ui-theme="sap_belize"
         data-sap-ui-libs="sap.m"
         data-sap-ui-compatVersion="edge"
         data-sap-ui-preload="async" >
      </script>
      <script>
         sap.ui.getCore().attachInit(function () {
             alert("UI5 is ready");
         });
      </script>
   </head>
   <body>
      <p>Hello World</p>
   </body>
</html>

이 단계에서는 로컬 웹 서버에서 SAPUI5 framework를 Load 하고, 그리고 다음의 Configuration Option으로 Core Module을 Initialize 합니다.


- 첫 번째 <script> 태그의 src 속성은 브라우저에 SAPUI5 Core Library를 찾을 위치를 알려줍니다. 이것은 SAPUI5 런타임을 초기화하고, data-sap-ui-libs 속성에 지정된 라이브러리와 같은 추가 자원을 Load 합니다.


- thema : SAPUI5 컨트롤은 어러가지 다른 테마를 지원하며, 여기에서는 sap_belize를 기본 테마로 선택 하였습니다.


- 이 교재(Tutorial)에 필요한 UI Control이 포함된 UI Library sap.m을 지정합니다.


- SAPUI5의 최신 기능을 사용하기 위해 호환성 버전(compatibility version)을 "edge"로 정의합니다.


- 비동기(asynchronously) 적으로 실행되도록 "bootstrap" 프로세스를 구성합니다. 즉, 성능상의 이유로 백그라운드에서 SAPUI5 리소스를 동시에 로드 할 수 있습니다.


모든 Resource와 Library가 로드되면 SAPUI5 runtime은 Global init event 를 시작하여 라이브러리가 준비되었음을 알립니다. 이벤트가 발생한 후에 Application Logic을 트리거하기 위해서 이 이벤트를 수신하는 것이 좋습니다.

(It is a good practice to listen for this event in order to trigger your application logic only after the event has been fired.)


위 예제에서 sap.ui.getCore ()를 호출하여 SAPUI5 코어에 대한 참조를 얻고 Core에서 attachInit (...)를 호출하여 init 이벤트에 대한 익명 콜백 함수를 등록합니다. SAPUI5에서 이러한 종류의 콜백 함수는 종종 handlers, listener function 또는 단순히 listener 라고합니다. Core는 Singleton 이며 코드의 어느 곳에서나 액세스 할 수 있습니다.


익명의 콜백 함수는 SAPUI5의 bootstrap이 끝나고 native JavaScript alert 를 표시 할 때 실행됩니다.


sap-ui-core.js 파일에는 jQuery의 복사본이 포함되어 있습니다. 즉, 모든 jQuery 기능을 사용할 수 있습니다.

저작자표시 비영리 변경금지

'S4/HANA' 카테고리의 다른 글

SAP UI5 Step 4: XML Views  (0) 2017.03.24
SAP UI5 Step 3: Controls  (0) 2017.03.23
SAP UI5 Step 1: Hello World!  (0) 2017.03.23
SAP UI5 API 정리 & 예제 site  (0) 2017.03.23
UI5 & Fiori 예제 PDF 파일  (0) 2017.03.22

설정

,

트랙백

댓글

글

SAP UI5 Step 1: Hello World!

S4/HANA 2017. 3. 23. 09:09

SAP UI5 Refrence Site

의 예제를 Google 번역기를 돌려서 옮겨 정리할려고 합니다.
번역은 전적으로 구글의 책임 입니다. ㅎㅎ

Step 1: Hello World!

여러분도 알다시피 SAPUI5는 HTML5에 관한 모든 것입니다. HTML만으로 첫 번째 "Hello World"를 만들어 봅니다.


Preview


Coding

아래의 site 데모 키트에서 여기서 작성하는 응용 프로그램의 모든 파일을보고 다운로드 할 수 있습니다. 

Walkthrough - Step 1.



webapp/index.html (New)

<!DOCTYPE html >
<html>
   <head>
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta charset="utf-8">
      <title>Walkthrough</title>
   </head>
   <body>
      <p>Hello World</p>
   </body>
</html>


이 튜토리얼을 통해 만드는 모든 앱 소스를 포함하는 새 폴더 webapp를 만듭니다. 따라서이 폴더를 "App folder"라고합니다. => eclipse를 통해서 project를 만들게 되면 "WebContent" 라고 만들어진다.


이제 app 폴더에 index.html이라는 새로운 루트 HTML 파일을 만듭니다. HTML 문서는 기본적으로 Head와 Body의 두 섹션으로 구성됩니다. Head 부분은 브라우저에서 문서를 처리하는 데 사용됩니다. meta tag를 사용하여 브라우저의 동작에 영향을 미칠 수 있습니다.


이 경우 Microsoft Internet Explorer에 최신 rendering engine (edge)을 사용하고 document character set은 UTF-8이되도록 지시합니다. 우리는 또한 브라우저에 표시 될 Title을 앱에 제공 할 것입니다. Google의 하드 코딩 된 제목은 예를 들어 사용자의 언어로 제목을 표시하는 것과 같이 앱에 의해 무효화 될 수 있습니다.


body 부분은 페이지 레이아웃을 설명합니다. 여기서는 p 태그를 사용하여 "Hello World"를 표시합니다.



Tip

일반적으로 webapp 폴더의 내용은 응용 프로그램 패키지로 웹 서버에 배포됩니다. webapp 폴더 자체를 배포 할 때 index.html 파일을 액세스하기위한 URL path에 webapp가 포함되어 있습니다.

Conventions

index.html 응용 프로그램의 루트 HTML 파일 이름을 지정하고 webapp 폴더에서 찾으십시오.

저작자표시 비영리 변경금지

'S4/HANA' 카테고리의 다른 글

SAP UI5 Step 3: Controls  (0) 2017.03.23
SAP UI5 Step 2: Bootstrap  (0) 2017.03.23
SAP UI5 API 정리 & 예제 site  (0) 2017.03.23
UI5 & Fiori 예제 PDF 파일  (0) 2017.03.22
oData 만들기  (0) 2017.03.13

설정

,

트랙백

댓글

글

SAP UI5 API 정리 & 예제 site

S4/HANA 2017. 3. 23. 08:59

- SAP에서 제공하는 UI5 API Library와 따라 할수 있는 예제까지 제공하는 site


https://sapui5.hana.ondemand.com/#docs/guide/2680aa9b16c14a00b01261d04babbb39.html

저작자표시 비영리 변경금지

'S4/HANA' 카테고리의 다른 글

SAP UI5 Step 2: Bootstrap  (0) 2017.03.23
SAP UI5 Step 1: Hello World!  (0) 2017.03.23
UI5 & Fiori 예제 PDF 파일  (0) 2017.03.22
oData 만들기  (0) 2017.03.13
oData 기본  (0) 2017.03.13

설정

,

트랙백

댓글

글

Global Macro

SAP Program/ABAP 2017. 3. 22. 17:06

종종 프로그램에 break-point를 소스로 처리할 때

BREAK USER_ID.

구문을 쓴다.


이 구문은 사실 ABAP 언어의 문법이 아니라 Global MACRO이다
SAP TABLE : TRMAC 에서 BREAK 로 조회 하면



DATA로 보인다.


이처럼 GLOBAL MACRO는 모든 프로그램에 영향을 미친다.
위와 같은 방법으로 테이블에 업데이트 하면 GLOBAL MACRO를 쓸수 있다.
단 이관이나 다른 문제가 있으니 신중히 써야 된다. (데이터이므로 운영 서버에 데이터를 넣어야 한다.)

저작자표시 비영리 변경금지

'SAP Program > ABAP' 카테고리의 다른 글

MODULE POOL SUBSCREEN에 만든 SELECT-OPTIONS의 ENTER가 안먹을때  (0) 2017.03.28
Internal Table Group By  (0) 2017.03.28
SAP Technical Dictionary  (0) 2017.03.22
Select screen의 extensiom 버튼 기능 제한하기  (0) 2017.03.22
GM_CODE - BAPI_GOODSMVT_CREATE  (0) 2017.03.16

설정

,

트랙백

댓글

글

SAP Technical Dictionary

SAP Program/ABAP 2017. 3. 22. 17:02


DD01L            Domains

DD01T            R/3 DD: domain texts

DD07L            Domain Item Value

DD07T            Domain Item Text

DD02L             SAP Tables

DD02T             R/3 DD: SAP table texts

DD03L             Table Fields

DD03T             DD: Texts for fields (language dependent)

DD04L            Data element

DD04T            R/3 DD: Data element texts

DD05S             Foreign key fields

DD06L             Pool/cluster structures

DD08L             R/3 DD: relationship definitions

DD09L             DD: Technical settings of tables

DD12L             R/3 S_SECINDEX: secondary indexes, header;

DD17S             R/3 S_SECINDEX: secondary indexes, fields

DD30L             Search helps

DD30T             Search help texts

E070               Change & Transport System: Header of Reque

E071               Change & Transport System: Object Entries

ECLOG_HEAD    Table for Log Header

FUPARAREF      Parameters of function modules

LTDX               ALV Layout Variant

LXE_ATTOB       Attributes of Translation Objects

LXE_LOG          SE63 Translation Log

NRIV               Number Range Table

SMEN_BUFFC    Table for Storing Favorites

STXFADM         Smart Forms: Administration

STXH              STXD SAPscript text file header - Long Text Header

STXL              STXD SAPscript text file lines - Long Text Line data

TADIR             프로그램 Attribute

TDEVC             Package

TFDIR             Function Module

TRDIR             프로그램 리스트

TRDIRT           프로그램 이름

TRMAC           Macros in ABAP/4 programs

TSTC              Transaction

TSTCT             Transaction Description


SPROXHDR_TADIR_V  proxy Generated Table for View

SPROXDAT               Proxy Metadata (Substitution Table)


SEOCLASS            Class/Interface

SEOCOMPO            Class/Interface component

ENHOBJ                Enhancement Objects

SEOCOMPODF        Definition class/interface component

TBTCO            Job Status Overview Table

TBTCP            Background Job Step Overview



저작자표시 비영리 변경금지

'SAP Program > ABAP' 카테고리의 다른 글

Internal Table Group By  (0) 2017.03.28
Global Macro  (0) 2017.03.22
Select screen의 extensiom 버튼 기능 제한하기  (0) 2017.03.22
GM_CODE - BAPI_GOODSMVT_CREATE  (0) 2017.03.16
Search Help 를 parameter setting 해서 사용하는 방법  (0) 2017.03.15

설정

,

트랙백

댓글

글

Select screen의 extensiom 버튼 기능 제한하기

SAP Program/ABAP 2017. 3. 22. 16:57

Selection Screen에서 필드 자체를 disable 시키지 않고

해당 필드 extension의 특정 기능만 disable 시키고자 할때 사용하는 coding.


* equal 과 between 기능만 활성화 시킴.


DATA: restrict TYPE sscr_restrict.
* Auxiliary objects for filling RESTRICT
DATA: optlist TYPE sscr_opt_list,
      ass     TYPE sscr_ass.



FORM restrict_sel_field .


  CHECK restrict-opt_list_tab[] IS INITIAL.

  optlist-name       = 'OBJECTKEY1'.
  optlist-options-eq = 'X'.
  optlist-options-bt = 'X'.
  APPEND optlist TO restrict-opt_list_tab.    CLEAR: optlist.

   ass-kind    = 'S'.      "A(ll), B(lock), S(elect-Option)

  ass-name    = 'S_MATNR'.
  ass-sg_main = 'I'.      " (only) I, SPACE = both
  ass-sg_addy = space.
  ass-op_main = 'OBJECTKEY1'.
  APPEND ass TO restrict-ass_tab.    CLEAR: ass.


* 다른 select-option도 추가로 한번에 setting 가능함.

* 추가로 작업하고자 하는 필드를 계속 붙여주면 한꺼번에 여러개 필드 작업이 가능함.


 *
*  optlist-name       = 'OBJECTKEY2'.
*  optlist-options-eq = 'X'.       optlist-options-bt = 'X'.
*  APPEND optlist TO restrict-opt_list_tab.    CLEAR: optlist.

*  ass-kind    = 'S'.
*  ass-name    = 'S_MATNR'.
*  ass-sg_main = 'I'.
*  ass-sg_addy = space.
*  ass-op_main = 'OBJECTKEY2'.
*  APPEND ass TO restrict-ass_tab.    CLEAR: ass.
*/

*  optlist-name       = 'OBJECTKEY3'.
*  optlist-options-eq = 'X'.
*  APPEND optlist TO restrict-opt_list_tab.    CLEAR: optlist.
*
*  ass-kind    = 'S'.
*  ass-name    = 'S_MATNR'.
*  ass-sg_main = 'I'.
*  ass-sg_addy = space.
*  ass-op_main = 'OBJECTKEY3'.
*  APPEND ass TO restrict-ass_tab.    CLEAR: ass.
**/
*  optlist-name       = 'OBJECTKEY4'.
*  optlist-options-eq = 'X'.
*  APPEND optlist TO restrict-opt_list_tab.    CLEAR: optlist.
*
*  ass-kind    = 'S'.
*  ass-name    = 'S_BWART'.
*  ass-sg_main = 'I'.
*  ass-sg_addy = space.
*  ass-op_main = 'OBJECTKEY4'.
*  APPEND ass TO restrict-ass_tab.    CLEAR: ass. 

  CALL FUNCTION 'SELECT_OPTIONS_RESTRICT'
    EXPORTING
      restriction            = restrict
    EXCEPTIONS
      too_late               = 1
      repeated               = 2
      selopt_without_options = 3
      selopt_without_signs   = 4
      invalid_sign           = 5
      empty_option_list      = 6
      invalid_kind           = 7
      repeated_kind_a        = 8
      OTHERS                 = 9.
  IF sy-subrc <> 0.
    MESSAGE ID sy-msgid TYPE sy-msgty NUMBER sy-msgno
             WITH sy-msgv1 sy-msgv2 sy-msgv3 sy-msgv4.
  ENDIF.

ENDFORM.

저작자표시 비영리 변경금지

'SAP Program > ABAP' 카테고리의 다른 글

Global Macro  (0) 2017.03.22
SAP Technical Dictionary  (0) 2017.03.22
GM_CODE - BAPI_GOODSMVT_CREATE  (0) 2017.03.16
Search Help 를 parameter setting 해서 사용하는 방법  (0) 2017.03.15
New Open Sql  (0) 2017.03.07

설정

,

트랙백

댓글

글

UI5 & Fiori 예제 PDF 파일

S4/HANA 2017. 3. 22. 08:56

예제가 10개가 있다.

예제를 따라 해보면 많이 도움이 될것 같음.


Building SAP Fiori-like UIs with SAPUI5 in 10 Exercises.pdf


위 문서 예제에서 사용하는 소스.


Building SAP Fiori-like UIs with SAPUI5 - SAPUI5 Project Sources.zip


저작자표시 비영리 변경금지

'S4/HANA' 카테고리의 다른 글

SAP UI5 Step 1: Hello World!  (0) 2017.03.23
SAP UI5 API 정리 & 예제 site  (0) 2017.03.23
oData 만들기  (0) 2017.03.13
oData 기본  (0) 2017.03.13
UI5, oData 공부 site - https://sapcodes.com/odata/  (0) 2017.03.13

설정

,

트랙백

댓글

글

덴마 4개의 방패

멋진 그림 2017. 3. 20. 13:49

덴마 멋있어 !!!




저작자표시 비영리 변경금지

'멋진 그림' 카테고리의 다른 글

덴마  (0) 2017.03.28

설정

,

트랙백

댓글

글

ALV Change or method call 이후에 넣어야 하는 code

SAP Program/ALV 2017. 3. 20. 09:11

- alv 관련 method (gc_grid_1->get_selected_rows 등) 호출 후에 넣어야 하는 code


CALL METHOD gc_grid_1->get_selected_rows
    IMPORTING
      et_index_rows = gt_rows_1.

  CALL METHOD cl_gui_cfw=>flush. ===> 솔직히 무슨 기능인지 파악 안됨.


- alv grid change 후에 넣어야 하는 code ( 보통 User command 실행 하기전에 넣어줌 )


  DATA: lw_valid(1),
          lw_refresh(1) VALUE 'X'.

  "변경 확인 및 DATA_CHANGED 이벤트 발생
  CALL METHOD gc_grid_2->check_changed_data
    IMPORTING
      e_valid   = lw_valid
    CHANGING
      c_refresh = lw_refresh.


check_changed_data 는 alv_changed event 처리 루틴안에 넣으면 무한 loop에 걸리게 됨.


check_changed_data 는 alv-grid 의 변경사항여부를 점검하여 변경사항이 있을 경우

data_chaged 이벤트로 분기시켜주는 역할을 합니다. 

grid 에서 변경 후처리가 끝난 후라면 변경사항이 없기 때문에 해당 메쏘드를 타지 않을 것이고 

변경하고 후처리가 되지 않았다면 변경사항에 대한 처리가 되지 않았으므로 data_changed 로 분기 되겠죠.

저작자표시 비영리 변경금지

'SAP Program > ALV' 카테고리의 다른 글

ALV Toolbar Button 을 제일 앞에 만들기  (0) 2017.04.06
ALV Cell Style, Cell Color 개별 지정  (0) 2017.03.30
ALV Grid Row별 색깔 지정하기 - zebra 기능 색깔 지정하기  (0) 2017.03.16
SALV vs ALV  (0) 2017.03.03
ALV Grid current row 정보 가져오기  (0) 2017.03.03

설정

,

트랙백

댓글

1 ··· 6 7 8 9 10 11 12 13
지역로그| 태그| 미디어로그| 방명록| 관리자| 쓰기
유부사모's Blog is powered by Daum & Tattertools / Designed by Tistory

티스토리툴바