Technology & Developer 02 Technology & Developer Oracle ADF Mobile ORACLE KOREA MAGAZINE Spring Oracle ADF Mobile: 단일아키텍처를기반으로엔터프라이즈애플리케이션과모바일

Transcription

1 Technology & Developer Oracle ADF Mobile: 단일아키텍처를기반으로엔터프라이즈애플리케이션과모바일애플리케이션에통합된개발환경제공 스마트폰보급과함께모바일오피스에대한관심이커지면서기업들의모바일업무혁신에 대한기대또한높아지고있다. 금융, 공공, 유통, 교육, 제조등우리나라전산업에걸쳐 모바일업무시스템환경을보다신속하고유연하게구축하여비즈니스혁신을이루고자하고 있다. 기업들이모바일업무혁신을빠르게이룰수있도록도움을주는모바일엔터프라이즈 애플리케이션인오라클 ADF 모바일은 ADF(Application Development Framework), 자바테크놀로지, HTML5, CSS3, 자바스크립트등의표준기술을이용하여한번의개발로안드로이드와 ios 에 하이브리드모바일애플리케이션으로배포가가능한혁신적인솔루션이다. 저자 - 정보람컨설턴트, 한국오라클 APAC Channel Enablement(boram.jeong@oracle.com) 데이터베이스 웹서비스 레거시시스템 애플리케이션 < 그림 1> Oracle ADF - 멀티채널프레임워크 다양한디바이스에사용가능한 공통개발툴 공통프레임워크 공통서비스제공 공통보안 기존에각사용자기기에따라애플리케이션을개발해야했던번거로움을없애고같은코드와개발방법 을사용하여모바일애플리케이션개발을가능하게해주는 ADF 모바일과오라클 JDeveloper 를이용하여 안드로이드와 ios 애플리케이션을만드는방법을살펴보고자한다. 웹브라우저 모바일 클라우드 오피스 MS Excel

2 Oracle ADF Mobile을이용한 Android & ios 모바일애플리케이션생성모바일애플리케이션을생성하기위해서는 JDeveloper 버전과 ADF Mobile Extensions와안드로이드애플리케이션개발에필요한 Android SDK 버전 4.03 설치되어있어야한다. STEP1. 애플리케이션생성하기모바일애플리케이션을생성하기위한방법은엔터프라이즈애플리케이션생성방법과유사하다. 간단하게마법사를통해 Mobile Application(ADF) 를생성한다. ➊ JDeveloper 을이용하여새로운모바일애플리케이션을생성한다. 파일에서 New Application 클릭, General 클릭, Applications 클릭, Mobile Application (ADF) 클릭한후 OK를선택하면된다. ➋ 모바일애플리케이션생성마법사가나타나면, < 그림2> 처럼입력한후 Next 를클릭한다. 총다섯단계로구성되어있으며, 두번째단계부터는기본설정값그대로 Next 버튼을클릭하여완료한다. ➌ 마법사가완료되면 Employees라는모바일애플리케이션이생성되고프 < 그림2> 마법사를통해모바일애플리케이션생성 < 그림 3> 모바일애플리케이션기본화면 로젝트에 ApplicationController 와 ViewController 가생성된것을확인할수있다. STEP2. 애플리케이션에 Feature 생성하기일반적으로 ADF Mobile 애플리케이션을배포할때, 모바일디바이스에는하나의애플리케이션으로등록되어사용된다. 하지만하나의애플리케이션안에서는직원검색하는페이지로이루어진부분, 도움말과같이 html 문서로되어있는부분등과같이여러개의다른파트로구성이가능하고이는모두 features에서관리한다. 75

3 76 < 그림 4> ViewController 폴더구조 < 그림 5> 모바일애플리케이션에피처 (Feature) 등록화면 ➊ ViewController 프로젝트안에 Application Sources을확장해보면, META-INF라는폴더가있고그안에 adfmf-feature.xml 이라는파일을볼수있다. ➋ Feature 옆에있는버튼을클릭하여 Employees라는새로운 feature를등록할수있다. ➌ ADF Mobile 에서는 UI 콘텐트를생성할수있는 3가지타입이존재한다. 첫번째타입은 ADF Mobile AMX이다. 이는 AMX 컴포넌트를이용하여 Drag & Drop 방식으로데이터와바인딩할수있다. 기존에엔터프라이즈애플리케이션에사용한 Java Server Faces 컴포넌트와유사하다. ADF Mobile AMX 파일은디바이스에서애플리케이션을실행하는시점에서 HTML이나자바스크립트로변환된다. 두번째타입은 Remote URL이다. Remote URL을이용하여서버기반의웹애플리케이션을 ADF 모바일에추가할수있다. 이러한웹애플리케이션은폰갭 (PhoneGap) 에서제공하는자바스크립트 API 를통해디바이스서비스 ( 카메라, 주소록, 캘린더등등 ) 를이용할수있다. 마지막으로제공되는타입은 Local HTML이다. HTML5를이용하여 Local HTML 페이지를생성할수있다. STEP3. ADF Task Flow 생성하나의큰 JSF 페이지플로우로애플리케이션의흐름을보여줄수도있지만오라클 ADF에서는재사용가능한태스크플로우로나타낸다. 각태스크플로우는페이지간에인터랙션을표현하거나애플리케이션로직을실행하기도하고, 다른태스크플로우를호출하는등의논리적오퍼레이션을수행하는액티비티노드로구성되어있다. 각액티비티간에트랜젝션은컨트롤플로우케이스를통해수행된다. ➊ Content 탭을선택한후버튼을클릭하고 Task flow를 EmpsTaskFlow.xml 이름으로생성한다. ➋ 생성된 EmpsTaskFlow.xml에 View와 Control Flow Case 컴포넌트를이용하여 < 그림 6> 처럼만들어준

4 < 그림 6> 새로운피처등록 다. 이때 showgraph 컨트롤플로우케이스속성은 filpright로지정하여모바일상에서오른쪽으로넘길경우페이지간의이동이벤트가발생되도록한다. STEP4. 자바클래스와데이터컨트롤생성하기오라클 ADF는개발생산성을극대화하는 Java EE 기반의 MVC 프레임워크다. ADF는데이터를관리하기위한모델레이어를제공하기때문에 UI는어디에어떻게데이터가저장되는지알필요없이데이터를사용할수있다. 이것을데이터컨트롤레이어라고부른다. ADF는데이터베이스, 웹서비스, 메인프레임, 애플리케이션등과같은다양한데이터소스로부터데이터컨트롤을생성할수있다. ADF 모바일의경우 Managed bean을이용하여데이터컨트롤을생성하게되는데, 일단데이터컨트롤을생성하면 Drag & Drop 방식으로원하는 UI 컴포넌트와데이터를바인딩할수있다. ➊ ViewController에서 New를클릭한후 General 카테고리에있는 Java Class 를선택한다. 아래와같이코드를작성한후에 Generate accessors를이용하면필요한코드가자동으로생성된다. ➋ Emps라는자바파일도위와같은방법으로생성하고 < 그림 8> 과같이입력한다. < 그림 7> Emp.java 파일생성 < 그림 8> Emps.java 파일생성 77

5 78 ➌ 완성된자바파일을이용해데이터컨트롤을생성하기위해서는자바파일선택한후에마우스우클릭을이용하여 Create Data Control를선택한다. STEP5. UI 생성하고테스트해보기태스크플로우에서생성한 View 컴포넌트는실제페이지가아니다. 어떤페이지를보여줄지에대한참조정보를가지고있기때문에페이지를생성해주어야한다. ➊ EmpsTaskFlow.xml에서 emplist를더블클릭하면 ADF Mobile AMX 페이지를생성할수있는창이나타난다. 원하는속성을선택한후에 OK 를클릭한다. ➋ < 그림9> 처럼 emplist.amx로만들어지며, Preview를통해내가소스로작성한부분들이어떻게모바일화면에서보여질지확인할수가있다. Header의 text value를 Emp List로변경한다. ➌ Primary 버튼 text를 Graph로변경하고이버튼을누르면그래프로정보를 < 그림 9> 모바일페이지 emplist.amx 화면 < 그림 10> emplist.amx의구조 (Structure) < 그림 11> 모바일애플리케이션에서사용가능한 ADF Mobile Faces Rich Client 컴포넌트 볼수있는페이지로연결될수있도록 Action에 showgraph 를선택한다. ➍ STEP4에서자바클래스를이용해생성한데이터컨트롤패널을확장해보면 < 그림10> 처럼 Emps라는데이터컨트롤이생성된것을확인할수가있다. Emps를 Drag하여 emplist.amx의 Panel Page에 Drop한다. ➎ 그러면 < 그림11> 처럼생성된데이터를다양한 UI 컴포넌트형태로생성할수가있다. 이번랩에서는 List View 형태를만들것이므로 ADF Mobile List View를클릭한다.

6 < 그림 12> List View 컴포넌트이동 < 그림 13> 읽기전용폼 (Form) 형태로데이터바인딩 < 그림 14> Action Binding Property 설정 ➏ ListView Gallery가나타나면사용자가원하는형태의 list를 < 그림12> 처럼선택할수가있다. 그다음에는 Edit 창이나타나게되는데선택된 List View를 Divider Mode를 First Letter로지정해주면알파벳이름으로정렬된다. ➐ Panel Splitter를이용하여 < 그림 12> 와같은구조로만들어준다. ➑ Panel Item 안에는데이터컨트롤에있는 Emps를 Drag하여 Form ADF Mobile Read-only Form 형태로생성한다. Form에한글로표시되길원할경우 Display Label을수정해주면된다. < 그림13> ➒ Panel splitter 안에있는 List Item에 Set Property Listener를추가해준다. < 그림14> ❿ 데이터컨트롤을생성하게되면많이사용되는기능들이자동으로생성된다. setcurrentrowwithkey를 ADF Mobile Button UI 컴포넌트와바인딩해준다. Edit Action Binding 창이나타나면 RowKey 값을 EL로다음과같이표현해준다. #{pageflowscope.empid} 79

7 80 < 그림 15> ActionListener 코드수정 < 그림 16> Emps를이용하여 ADF Mobile Chart 생성 < 그림15> 처럼 CommandButton에 ActionListener 부분을복사해서 ListItem 으로붙여넣고 CommandButton 부분을삭제한다. EmpList와같은방법으로 Graph 페이지를생성한다. Primary의 text는 Back으로입력하고 Action은 back을선택하여다시 EmpList 로돌아갈수있도록지정해준다. 데이터컨트롤에있는 Emps를 ADF Mobile Chart 형태로생성한다. < 그림16> ADF에서지원하는그래프컴포넌트의종류는약 50여가지가넘는다. Bar 그래프를선택한후에각컬럼에알맞은값을입력한다. (Bars: salary, X Axis: name) Android 의경우 application signing 에쓰일 key 를생성해야한다. 아래의커맨드를입력하면된다. Keytool genkey v keystore employees.keystore alias employees keyalg RSA keysize 2048 validity ADF Mobile 프로젝트에서 Preferences를보면 ADF Mobile안에 Platforms 이라는항목이있다. 여기에서 ADF Mobile 플랫폼을설정할수가있는데, Android로선택하고 Signing Credentials 부분에있는 Release에 K e y s t or e Location을조금전에설정한경로로지정해준다. < 그림17> 배포를하기위해서메뉴에있는 < 그림 17> ADF Mobile Preferences 화면 Application에서 Deploy를클릭한후 New Deployment Profile을선택하고 OK 를클릭한다.

8 < 그림 18> ADF 모바일애플리케이션배포 < 그림 19> Deployment Actions 선택 한번 Deployment Profile을설정하면 Application -> Deploy에사용자가조금전에생성한프로파일을확인할수가있다. Application -> Deploy -> ANDROID_ MOBILE_NATIVE_archive1를선택한다. < 그림18> Deploy Action에서 Deploy application to emulator 를선택한다. < 그림19> Emulator에배포된 Employees를확인하고클릭한다. < 그림20>< 그림21> < 그림 20> Android Emulator 에등록된 Employees 모바일애플리케이션 < 그림 21> 완성된모바일화면 81

9 82 STEP6. ios 애플리케이션으로생성하기 완성된안드로이드애플리케이션을코드수정없이 ios 애플리케이션으로배포할수있다. ➊ 애플리케이션에서새로운 Deployment Profile 을생성한다. < 그림 22> ➋ 디플로이에서방금생성한 Deployment Profile 을선택한다. < 그림 23> < 그림 22> 완성된모바일애플리케이션을 ios 로배포하기위한 deployment profile 설정 < 그림 24> Deployment Actions 선택 ➌ Deploy application to simulator 를선 택하면 ios 애플리케이션을확인할수 있다. < 그림 24> 오라클 ADF Mobile 에대한더많은정보는아래한국 ADF 커뮤니티에서찾아볼수있다. 참고 : 한국오라클 ADF 커뮤니티 < 그림 23> 새로설정된 deployment profile 로배포