이글은 아래 링크의 원본 글에 대한 한글 번역 입니다
http://scn.sap.com/community/web-dynpro-abap/floorplan-manager/blog/2013/09/19/using-fpm-applications-on-an-ipad

 

 

웹딘프로아밥과 FPM 은 데스크탑 어플리케이션 작성을 위해 설계되었습니다. 기술적으로는 FPM 어플리케이션은 태블릿이나 스마트폰처럼 모바일 환경에서도 사용 가능합니다. 그러나 많은 기능 제약이 있었습니다. 이제 SAP에도 변화가 생기고 있습니다. 노트 1853087을 적용하면 웹딘프로아밥/FPM 을 모바일 사파리 브라우저에서도 실행할 수 있습니다.

 

이 블로그에서는 모바일 장치에서 FPM 어플리케이션을 실행할때 사용할 수 있는 새로운 기능을 소개하겠습니다. 서버 버전이 NW 7.03/7.31 SP9 (+ 노트 1893651) 또는 NW 7.40 SP4 이상이면 가능합니다.

 

모바일과 데스크탑의 주요 차이점은 키보드와 마우스를 사용하지 않고 "터치"를 사용하는 방식 뿐만 아니라 화면의 크기가 데스크탑에 비해 매우 작다라는 특징이 있습니다. 그래서 보통 모바일 용 화면은 더 단순하게 만듭니다. 꼭 필요한 필드만 배치하고 자주 사용하지 않는 필드를 표시하지 않는다거나 기존의 복잡한 화면을 여러개의 단순한 화면으로 나누어 작은 화면에 잘 보이도록 배치하는 등의 방법을 사용합니다.

 

FPM의 configuration을 활용하면 이렇게 데스크탑/모바일의 화면을 별도로 가지는게 가능합니다. 이제부터 어떻게 만들고 enhance하고 adapt할 건지 소개하겠습니다. 기술적인 부분은 How to Create, Enhance, and Adapt Floorplan Manager Applications on SAP NetWeaver 7.31 를 참고하세요.

 

하지만 아직 한가지 문제는 남아있습니다:

 

만약 어플리케이션을 모바일용으로 adapt 하면 데스크탑 사용자들은 모바일에 맞춰 줄어든 기능을 함께 사용해야 하는 불편함을 감수 해야 합니다. 아니면 복사본을 만들어서 모바일용과 데스크탑용을 분리하여 운영 할 수 있습니다. 이런 경우 2개의 어플리케이션을 유지보수 해야 하고 각자 실행하는 어플리케이션이 달라지는 문제가 있습니다.

 

다행히 해결방법이 있습니다: 접속 장치의 종류를 인식하고 Context-Based Adaptations (CBA) 를 사용하는 것입니다. 무슨뜻이냐면 모바일용으로 복사가 아니라 단지 데스크탑용 대비 delta(변화량)만 관리하면 된다는 것입니다. FPM이 자동으로 장치의 종류를 인식하여 어플리케이션에 delta(변화량)를 적용해서 실행할 것인지 아닌지를 판단합니다. 이렇게 하면 하나의 어플리케이션만 유지보수 하면 됩니다. 사용자들은 동일한 어플리케이션을 사용하지만 접속 장치에 따라 모바일은 더 단순한 UI 를 보게 됩니다.

 

이 기술은 modification이 필요하지 않습니다. 그러므로 SAP 스탠다드 프로그램을 adpat 하는데에도 전혀 문제가 없습니다.

 

단계별 설명

이 블로그의 나머지 부분은 예제를 통해서 어떻게 작동하는지 설명하겠습니다. 예제는 SAP 스탠다드 어플리케이션이고 이를 단순화 시켜 adapt 하여 모바일로 접속하여 사용하는 것을 보여드리겠습니다. 예제 어플리케이션은 바로 FPM_DEMO_PLAYER 입니다. 이 어플리케이션은 엄청 단순합니다. 탭으로 구성된 2개의 리스트가 있습니다. 하나는 유명 축구 선수 목록이고 하나는 유명 테니스 선수 목록입니다. 선수를 선택 하게 되면 상세내역을 아래에 폼으로 보여줍니다.
FPM_DEMO_PLAYER.png

 

0. Adaptation Schema 만들기

이 준비 단계는 Netweaver 7.03/7.31 SP9 버전에서만 필요합니다. 높은 버전을 사용하고 있다면 이 단계를 건너띄고 스탠다드에 있는 스키마 FPM_DEVICE 를 사용하면 됩니다.
Context Based Adaptations(CBA)에는 어플리케이션이 무엇을 기준으로 adapt 할것인지 결정하는 adaptation scheme가 있습니다. 이번 예제에서는 1개의 기준(dimension)만 있으면 됩니다. 바로 장치 종류 (데스크탑, 테블릿, 스마트폰) 입니다.
adaptation scheme는 뷰클러스터 유지보수에서 정의합니다.
  1. 티코드 SM34로 이동합니다.
  2. 뷰클러스터 FPM_VC_ADAPT_SCHEMA를 입력하고 '유지보수' 버튼을 누릅니다.
  3. 새로운 스키마를 등록합니다. 이름은 ZDEVICE로 하겠습니다.
  4. 새로 만든 스키마를 선택하고 왼쪽 트리에서 Dimensions를 선택합니다.
  5. Dimension 하나를 추가 합니다. 이름은 DEVICE, 인덱스는 1, 타입은 FPM_DEVICE_TYPE
  6. 저장합니다.

 

1. CBA 활성화

첫번째 단계는 기존 데스크탑용 어플리케이션을 adapt 가능하도록 변경하는 것입니다. 장치 종류를 인식하여 분기할 수 있도록 하기 위함이죠.
  1. 티코드 FPM_WB 를 실행하여 FPM 워크벤치를 실행합니다. SAP GUI에서 실행한 경우 웹브라우저 새창으로 화면이 뜹니다.
  2. 화면에서 Context Based Adaptations 섹션에 있는 "Enable FPM Applications for Context-Based Adaptations" 링크를 찾아서 클릭합니다. FPM_WB.png
  3. 이제 CBA Enabler 가 실행됩니다. 우선 application configuration name에 변경할  어플리케이션을(FPM_DEMO_PLAYER) 입력합니다. 그리고 adaptation schema에 적용할 스키마를(ZDEVICE 또는 0단계 생략했다면 FPM_DEVICE) 입력합니다. 그리고 2개의 새로 만들 이름을(adapted application 과 adapted application configuration) 입력합니다. 2개의 이름은 아무렇게나 해도 되지만 2개를 동일하게 입력하기를 바랍니다. 예를들어 ZDEMO_PLAYER 를 입력하겠습니다. 이제 다 입력했으면 Next 버튼을 누릅니다.CBA Enabler Step 1.png
  4. 이제 CBA Enabler의 2번째 단계 화면에 들어왔습니다. 패키지와 transport request를 지정합니다. 여기서는 아무것도 변경할 필요없이 단지 Save 버튼만 눌러도 됩니다. 어플리케이션이 adapt 할 수 있는 준비가 되었습니다. 결과 화면에는 단순하게 링크 2개가 보입니다. CBA Enabler Step 3.png

어플리케이션을 adapt 하기 전에 좀전에 Save 버튼을 눌러서 어떤 변화가 생긴건지 설명해 주세요:

어플리케이션 FPM_DEMO_PLAYER 자체는 변경되지 않습니다. 대신 adpat 가능한 새로운 어플리케이션 (ZDEMO_PLAYER)으로 감싸는 형태로 만들었습니다. 이 새 어플리케이션은 원래 기능을 포함하고 있습니다.(복사가 아닙니다) 그리고 adapt 가능한 기능을 추가로 가지고 있습니다. 그러므로 새 어플리케이션을 실행(링크 Execute Application을 클릭)해도 기존 어플리케이션과 동일한 화면이 나타납니다.

이제 Configuration Editor를 (링크 Launch Configuration Editor를 클릭) 실행하도록 하겠습니다.

2. UI에 adapt 적용

앞에서 링크 Launch Configuration Editor를 클릭했다면 바로 FPM configuration editor ("FLUID")가 실행됩니다. 만약 CBA enabler를 닫아버려서 링크를 누를수 없다면, SE80에서 실행할 수 있습니다. 로컬 오브젝트로 이동합니다. 새로만든 FPM 어플리케이션 컨피규레이션 ZDEMO_PLAYER를 선택합니다. Start Configurator 버튼을 누르거나 단축키 F7을 누르세요. 웹브라우저에 Configurator가 나타날 겁니다. 링크 FPM_DEMO_PLAYER_OIF 를 눌러서 이동하세요.

툴바에는 추가 뷰를 볼 수 있는 3가지 버튼이 있습니다.

icon_buttons.png

 

이 중에서 왼쪽 첫번째 있는 버튼을 누르면 화면 상위 adaptation 패널이 열립니다. 이제 화면이 아래 그림처럼 보입니다:

FLUID.png

 

모바일용 새로운 adaptation을 추가 하기 위해서 Add 버튼을 누릅니다. 팝업 화면이 나타납니다. Applies to all values 체크 박스를 풉니다. Device Type 에는 TABLET을 선택합니다. Namespace에는 Z를 입력합니다.adatation popup.png

 

OK 버튼을 누르면 태블릿용 adaptation이 생성됩니다. 이제 이 adaptation에는 FPM configuration editor의 모든 기능을 사용하여 편집할 수 있습니다. 자유롭게 필요한 변경사항을 적용하세요.

편집을 끝내고 태블릿에서 어플리케이션을 실행하면 화면은 이런식으로 됩니다:

app on tablet.png

 

이런 화면을 보려고 우리가 무엇을 한건가요:

테니스 선수 뷰를 삭제하였습니다. 대신 상세(detail)뷰를 만들고 기존에 상세 폼을 이동시켰습니다.

툴바에서 Edit 와 Check 버튼을 제거했습니다.

목록 제거와 상세 폼의 제목을 제거하기 위해서 list configuration인 FPM_DEMO_PLAYER_LIST_FOOTBALL 와 form configuration인 FPM_DEMO_PLAYER_FORM_FOOTBALL에 adaptation을 생성했습니다. 앞서 adaptation을 만드는 작업과 동일한 방법으로 하면 됩니다.

이 모든 작업은 FPM configuration editor 에서 스탠다드 수정없이 모두 가능합니다. 그리고 변경한 내용은 오직 태블릿으로 접속할때만 나타납니다. 만약 데스크탑에서 실행한다면 어플리케이션에는 아무 변화도 없을 것입니다.

요약

웹딘프로아밥과 FPM은 모바일 장치를 위해 설계된것은 아닙니다. 모바일 사용자의 완벽한 요구사항을 만족하기 위해서 FPM은 좋은 선택이 아닙니다. 그러나 이미 만들어둔 FPM 어플리케이션을 모바일 장치에서도 사용할 수 있도록 하는 대안이 될 수 있습니다. 이 방법(adaptation)의 장점은 다음과 같습니다:

  • 데스크탑 어플리케이션에 전혀 영향이 없습니다.
  • 모바일용 adaptation은 원본에서 변경된 것만 가지고 있습니다. 그러므로 원본에 버그 수정이나 기능 향상이 있다면 모바일에도 동일하게 적용이 됩니다.
  • 다른 UI를 가지고 있지만 실행하는 어플리케이션은 여전히 동일하고 비지니스 로직에는 전혀 변화가 없습니다.
  • 이런 adaptation을 작성하는데 작업량이 적습니다. (빠른 개발)

 

이글은 아래 링크의 원본 글에 대한 한글 번역 입니다
http://scn.sap.com/community/web-dynpro-abap/floorplan-manager/blog/2013/09/19/using-fpm-applications-on-an-ipad

 

저작자 표시 변경 금지
신고
Posted by boy0
enjoy2016.09.13 10:05

부모님이 강제로 가입해주신 소중한 새누리당이다.

 

문자 메시지 폭탄이라는 말이 딱 맞다.

수신거부도 소용없다. 그들은 안심번호다 처리기간이 걸린다 등등 각종 핑계를 대면서 수신거부를 안해준다.

문자 메시지가 너무 많이 와서 일상생활에 지장이 있을 정도다.

이제 그만 받고 싶다.

 

새누리당 탈퇴를 하는 방법을 알려 드립니다.

전화를 걸어 탈퇴 한다고 하면 여러번 돌려돌려 같은말 반복하는 일을 3번정도 하면 알려줍니다.

전화 걸지 마시고 아래 방법대로 하시면 됩니다.

 

지역별 새누리당 홈페이지에 접속합니다. 서울시당을 예로 보여 드립니다.

소개 > 당원가입 안내 로 들어가면 탈당 신고서와 당비해지요청서가 있습니다. 둘다 작성하여 팩스로 보내면 됩니다.

http://seoul.saenuriparty.kr/bbs/s_1_3.php

 

 

저작자 표시 변경 금지
신고
Posted by boy0

이글은 아래 링크의 원본 글에 대한 한글 번역 입니다
http://scn.sap.com/community/web-dynpro-abap/floorplan-manager/blog/2014/10/28/team-fpm--instance-styling-in-fpm

 

 

Christian Guenther

** Team FPM ** - FPM에서 CSS 스타일 적용하기

Posted by Christian Guenther in Floorplan Manager for Web Dynpro ABAP on Oct 28, 2014 1:18:09 PM

새로운 기능 Instance Styling (서버 버전이 SAP_UI 7.40 SP 10 이후 가능)으로 이제 FPM의 각 UI 엘리먼트별로 CSS 스타일을 적용할 수 있습니다. 이 블로그에서 어떻게 FPM에서 CSS 스타일을 적용하는지 예제를 통해 살펴보겠습니다.

FPM의 Instance Styling은 웹딘프로아밥에 새로 추가된 Instance Styling 을 기반으로 하고있습니다. 웹딘프로아밥과는 다르게 FPM 개발시에는 직접 UI 엘리먼트에 직접 접근하지 못합니다. FPM이 내부적으로 UI 엘리먼트를 그립니다. GUIBB에 필드를 추가하고, 버튼을 그리고, 페이지를 추가하고, 페이지에 섹션을 추가하고, 등등 FPM에서 개발한 내용은 FPM에 의해서 웹딘프로아밥 UI 엘리먼트가 그려집니다.

우리(FPM팀)는 FLUID(= FPM configuration editor)의 많은 엔티티에 새로운 어트리뷰트( Style, Label Style, ...)를 추가 했습니다. 여기에 여러분이 CSS 스타일 정보를 입력하면 FPM이 내부적으로 웹딘프로아밥 UI 엘리먼트를 그릴때 Instance Style로 변환하여서 연결해줍니다.

다음 섹션에서 이 기능을 어떻게 사용하는지 예제를 통해 살펴보겠습니다. 이 예제는 스탠다드 데모 어플리케이션 /BOBF/EPM_FPM_SADL_PD 를 변경하겠습니다. 다른 FPM 어플리케이션에도 적용할 수 있습니다.

이 어플리케이션을 실행하고 검색을 하면 아래 그림처럼 화면이 표시됩니다.

p1.png

 

툴바 버튼에 스타일 적용하기


"Switch to Filter Page" 버튼에 스타일을 적용해보겠습니다. configuration editor 를 열어서 이 버튼을 선택하세요.

p2.png

네비게이션 패널에서 "Search EPM Products" 페이지를 선택합니다. 프리뷰 또는 툴바 스키마에서 "Switch to Filter Page" 버튼을 선택합니다. Style 속성에 다음 값을 넣으세요.

borderRadius:30px;backgroundColor:#7D9847;

 

저장을 하고 어플리케이션을 다시 실행해보세요. 이제 버튼에 둥근모서리가 있고 배경색이 변경된 것을 확인할 수 있습니다.

p3.png

 

버튼 위로 마우스를 올려보세요. hover background 와 font color 가 기존과 다르게 (우리가 "hoverBackgroundColor" 와 "hoverFontColor"를 변경하지 않았는데) 자동으로 변경되었습니다.

이제 "hoverBackgroundColor"를 지정하여 변화를 살펴보겠습니다. 다음 내용을 입력합니다.

borderRadius:30px;backgroundColor:#7D9847;hoverBackgroundColor:blue;

결과는 이렇게 됩니다:

p4.png

 

왜 이런지 설명을 드리겠습니다. 하나의 스타일을 변경하면 관련된 다른 스타일이 자동으로 보기 좋게 맞춰서 변경됩니다. 이번 예제에서 원래의 "hoverFontColor"는 검정색이고 "hoverBackgroundColor"는 밝은 회색이였습니다. 배경색을 어두운 색상으로 변경하였기 때문에 기존 밝은 회색은 hover background color로 적절하지 않습니다. 그래서 이 속성은 어두운 녹색으로 자동 조정됩니다. 마우스를 올렸을때 어두운 녹색 배경에서 폰트색상으로 검정색은 읽기 어려우므로 hover font color 도 흰색으로 자동 조정됩니다. 다음으로 우리는 "hoverBackgroundColor"를 스타일에 추가하여 파란색으로 변경해 보았습니다. 이렇게 스타일에 추가한 값은 자동 조정된 값을 무시하고 대신(override) 적용됩니다. 그러면 hover font color 가 자동으로 조정되는데 파란색 배경에 맞춰 읽기 좋도록 역시 하얀색으로 조정되었습니다.

배경 그림 추가하기

배경 그림을 넣고 싶다는 요청사항은 자주 있는 편입니다. 스타일에 "backgroundImage" 속성을 사용하면 가능합니다.

배경 그림으로 사용될 이미지파일은 반드시 URL로 접근 가능해야 합니다. 이번 예제에서는 MIME 저장소에 이미지파일을 업로드 하고 그 URL을 사용했습니다.

이미지파일을 페이지의 배경 그림으로 넣어보겠습니다. configuration editor 를 열어서 페이지를 선택하고 Style 속성에 다음 값을 넣으세요.

backgroundImage:<Url to Image>;

p5.png

 

어플리케이션을 다시 실행해보면 아래와 같이 보일겁니다.

p6.png

 

요약

각 UI 엘리먼트에 Instance Styling 을 적용하여 CSS로 모양을 꾸밀 수 있습니다. 스탠다드 데모 WDR_TEST_CUSTOM_STYLES를 제공하므로 이를 통해 개략적인 스타일링 적용법을 살펴볼 수 있습니다.

Instance Styling 적용시 주의사항은 남용하면 안되고 꼭 필요할 때만 사용해 주세요. 해당 UI 엘리먼트가 특별하고 다른 UI 엘리먼트와 구분되어 보여야 할때 사용하는 것입니다. 단지 나는 동그란 모서리를 가진 버튼이 좋다는 이유로 모든 버튼에 Instance Styling을 적용하는 것은 좋지 않습니다. 다른 모양으로 표시하여 구분될 필요가 있는 경우에만 적용하세요. 만약 모든 버튼에 동그란 모서리를 적용하고 싶다면 차라리 테마 에디터를 이용하는게 좋습니다.

 

 

 

이글은 아래 링크의 원본 글에 대한 한글 번역 입니다
http://scn.sap.com/community/web-dynpro-abap/floorplan-manager/blog/2014/10/28/team-fpm--instance-styling-in-fpm

저작자 표시 변경 금지
신고
Posted by boy0

티스토리 툴바