Software & Solution/IBM Connections

IBM Connections 위젯 개발

누한 2018. 1. 10. 23:12
반응형



이번글은 IBM Connections 개발 가이드 입니다.


Connections 구축형 솔루션에서 사용자가 원하는 위젯을 개발하고 화면에 구성하는 방법을 소개합니다.


각각의 단계는 직접해볼수 있도록 단계를 세분해서 설명되어 있습니다.


[교재] 5.2 IC 6.0 Community_위젯 개발.pdf


아래 내용을 정리한 PDF파일도 함게 공유 합니다.






IBM Connections Workshop 

 

  

 

IBM Connections

Lab Manual

 

Cummunity App Customization

 

  

 

 

IBM Connections

Lab Manual

 

Cummunity App Customization

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 


Introduction:

IBM Connections의 커뮤니티에 사용자 어플리케이션을 추가하는 과정을 진행합니다. 이를 통해 외부에서 개발된 다양한 어플리케이션을 등록하고 활용할 수 있습니다..

 

Objective:

This lab will explain the following tasks:

·         Google 캘린더 확보

·         iWidget view&data 개발

·         IBM Connections iWidget 등록

 

 

 

Procedure:

Before you Begin

Step 1              사용자는 구글 캘린더 등록을 위해 사전에 구글 계정을 준비해 주시기 바랍니다.

Step 2              아래의 과정을 이행하기 위해서는 구글에 먼저 로그인된 브라우저가 필요합니다. ( 또는 크롬 브라우저를 통한 실행 필요 )

 

 

 

 

 

구글 캘린더 확보

구글 캘린더로 가서 외부 어플리케이션에 임베디드 시키기 위한 코드를 확보합니다.

Step 3              In a web browser, navigate to URL:

https://www.google.com/calendar

Step 4              각자의 계정에 맞도록 로그인 합니다.

Step 5              로그인 후 설정 à 캘린더 항목으로 이동합니다. 캘린더 리스트에서 이름을 선택 하면 아래와 같이 캘린더를 외부에 추가할 수 있는 iframe 관련 html 코드가 생성됩니다.





Step 6              이 캘린더 추가하기항목에 있는 iframe 코드를 복사한 후 텍스트 에디터에 붙여넣기 합니다.

 

 


iWidget view&data 개발

구글 캘린더를 커뮤니티에 앱으로 등록하기 위해서는 iWidget으로 만들어 등록해야 합니다. 이를 위해 아래에서는 iWidget으로 구현하는 htmlxml 파일을 작성합니다.

 

Step 7              이제 캘린더를 넣기위한 iWidget 관련 파일들을 생성합니다.

 

Step 8              먼저 캘린더를 표현할 lsCalendar.html 파일을 IBM Connections HTTP Server에 생성합니다

 

/opt/IBM/HTTPServer/htdocs/lsCalendar.html

 


Step 9              lsCalendar.html 파일에 아래와 같이 내용을 입력합니다. 여기서는 iWidget을 표현하기 위한 가장 기본적인 html 코드를 삽입합니다.

<html>

<head>Google Calendar</head>

<body></body>

</html>

 

Step 10          위에 입력한 lsCalendar.html 파일의 body 영역에 구글에서 복사한 iframe 코드를 붙여 넣습니다. , width 항목은 100%height400으로 수정 후 저장합니다.

<html>

<head>Google Calendar</head>

<body>

<iframe src="https://calendar.google.com/calendar/embed?src=javatown1201%40gmail.com&ctz=Asia/Seoul" style="border: 0" width="100%" height="400" frameborder="0" scrolling="no"></iframe>

</body>

</html>

 

Step 11          이제 위에 과정을 통해 생성한 lsCalendar.html 파일이 정상적으로 작동하는지 아래 URL을 접속하여 확인합니다.

http://<<servername>>/lsCalendar.html

 

Step 12          이제 iWidget에 대한 기본 xml 파일 생성을 할 차례입니다. 위에 생성한 lsCalendar.html 파일과 같은 경로상에 lsCalendar.xml 파일을 생성합니다.

Step 13          생성된 xml 파일에 아래와 같이 내용을 입력 합니다.

<iw:iwidget name="lsCalendar" xmlns:iw="http://www.ibm.com/xmlns/prod/iWidget" iScope="lsCalendar" supportedModes="view">

<iw:content mode="view">

        <![CDATA[

<iframe src="/lsCalendar.html" scrolling="auto" width="100%" height="500" frameborder="0"></iframe>

 ]]>

     </iw:content>

</iw:iwidget>

 

 

 

 


IBM Connections iWidget 등록

IBM Connections 커뮤니트에 위젯 등록을 위해 widget-config.xml 파일을 수정합니다. 이를 통해 커뮤니티는 위젯을 인식하고 사용자 화면에 추가할 수 있도록 합니다..

 

Step 14          이제 위젯 등록을 위해 widget-config.xml 파일을 수정 합니다. 아래의 명령어를 따라서 수행하세요

 

Step 15          텔넷으로 로그인한 후 Xml 파일 수정을 위해 작업 디렉토리(/home/wasuser/config)를 생성합니다.

mkdir config

 

Step 16          wsadmin.sh을 실행시키기 위해 WAS DMGR로 이동 후 wsadmin.sh을 실행시킵니다.

cd /opt/IBM/WebSphere/AppServer/profiles/Dmgr01/bin

./wsadmin.sh -lang jython -user wasadmin -password iBmC0nn3ti0ns

 

Step 17          이제 기본적인 wsadmin.sh이 준비가 되었다면 커뮤니티 관련 구성 수정을 위한 쉘을 실행시킵니다.

execfile("communitiesAdmin.py")

 

Step 18          아래와 같이 변수로 등록을 합니다. 이렇게 등록된 변수는 명령어 입력시 직접입력에 대한 오류를 감소 시킵니다.

path = "/home/wasuser/config"

cell = AdminControl.getCell()

 

Step 19          위에서 입력한 변수를 매개변수로 커뮤니티의 위젯 구성파일을 작업 준비 시킵니다. 아래의 명령이 정상적으로 동작된 경우 /home/wasuser/config 디렉토리 밑에 widget-config.xml 파일이 생성됩니다.

Step 20          위젯 구성정보의 변경을 위해 위젯 구성 파일에 대한 checkout을 수행합니다.

CommunitiesConfigService.checkOutWidgetsConfig(path, cell)

 

Step 21          widget-config.xml 파일을 열어서 아래의 위젯 정보를 커뮤니티 위젯(type="community" 를 검색) 정보 중간에 삽입합니다.

<resource aclServiceImpl="com.ibm.lconn.comm.acl.ACLSvcImpl" resourceValuesProvider="com.ibm.tango.internal.service.CommunitiesResourceValuesProvider" type="community" xpathMandatedWidgetForMainPage="/tns:config/tns:resource[@type='community']/tns:widgets/tns:layout/tns:page[@pageId = 'communityOverview']">

<widgets>

<definitions>

<widgetDef defId="G_Calendar" description="google Calendar" loginRequired="true" uniqueInstance="true" themes="wpthemeNarrow wpthemeWide wpthemeThin wpthemeBanner" primaryWidget="true" modes="view" url="/lsCalendar.xml"/>

 

 

Step 22          작성된 xml파일을 서버에 적용시키기 위해 checkin을 호출합니다. Checkin을 호출하면 config안에 수정된 xml파일이 실제 WebSphere 서버에 복사가 되어 적용됩니다.

CommunitiesConfigService.checkInWidgetsConfig(path, cell)

 

Step 23          지금까지의 작업을 통해 기본적인 구성작업은 모두 완료되었습니다. 마지막으로 커뮤니티 어플리케이션을 재시작 합니다.

“WAS admin console à 어플리케이션 à 엔터프라이즈 어플리케이션이동

 

커뮤니티 어플리케이션 체크 박스 선택


커뮤니티 어플리케이션 중지

 

커뮤니티 어플리케이션 다시 선택

 

커뮤니티 어플리케이션 시작

 

Step 24          웹 브라우저로 커뮤니티 이동 후 어플리케이션 추가 작업을 수행합니다. 아래 화면과 같이 화면이 정상적으로 나오지 않을 경우 widget-config.xml파일을 재확인 하시기 바랍니다.

 




반응형