AppViewCloud Mobile Application Development SolutionINTRODUCE
Cloud Mobile Application Development SolutionAppViewINDEX1. AppView 개요2. 개발 프로세스3. Library 구성도4. Native Rendering5. Native...
Cloud Mobile Application Development SolutionAppView1. AppView 개요3<UI><UILAYOUT portrait="320,460" landscape="320,460" the...
Cloud Mobile Application Development SolutionAppView2. 개발 프로세스4Web ServerCloud appsAppViewLibraryMOML 개발[서버형 APP 배포 방식][단말...
Cloud Mobile Application Development SolutionAppView3. Library 구성도5MOML* 화면전환, 효과 등 모바일 최적화XMLMOML Script Parser* UI, Obje...
Cloud Mobile Application Development SolutionAppView4. Native Rendering6 자체 UI Object를 사용하지 않고 해당 OS의 UI Object를 사용 함으로서 ...
Cloud Mobile Application Development SolutionAppView5. Native Interface<?xml version="1.0" encoding="utf-8"?><FrameLayout ...
Cloud Mobile Application Development SolutionAppView6. Component Interface8public class CitrineAPIDemoActivity extends MOM...
Cloud Mobile Application Development SolutionAppView7. Enhanced Web View Component<?xml version="1.0" encoding="UTF-8"?><M...
Cloud Mobile Application Development SolutionAppView8. 주요 특징(1/2)1102스마트폰 태블릿PCApp 개발 후 별도 추가 작업 없이 태블릿 기기에도바로 적용이 됩니다.One...
Cloud Mobile Application Development SolutionAppView8. 주요 특징(2/2)1145 모바일 웹 서비스보다 빠른 성능을 제공합니다.네이티브 기반의 플랫폼으로 빠른 성능을 지원App...
Cloud Mobile Application Development SolutionAppViewAppView를 사용하여 원 소스 형태로 개발된 Native 의료업무 어플리케이션 입니다.9. 레퍼런스(1/5) 서울 아산병...
Cloud Mobile Application Development SolutionAppViewAppView 기반으로 개발하였으며 Data Source를 사용한 데이터통신 위주의 쇼핑몰 App 소개 입니다.9. 레퍼런스(...
Cloud Mobile Application Development SolutionAppView애니메이션 및 멀티미디어 위주의 Interactive Book 입니다.9. 레퍼런스(3/5) 베리앱 App 주요화면[메인 화...
Cloud Mobile Application Development SolutionAppView동영상 및 카메라 등 장치 연동 위주의 어플리케이션 입니다.9. 레퍼런스(4/5) 페이스닝 App 주요화면[메인 화면]페이스...
Cloud Mobile Application Development SolutionAppViewAppView Libary의 API들을 예제를 통해서 설명한 reference App입니다.9. 레퍼런스(5/5) Citri...
Cloud Mobile Application Development SolutionAppView 1710. Easy Mobile Programing by MOMLhttp://youtu.be/eEg-u-r5NC8 , htt...
Upcoming SlideShare
Loading in...5
×

Appview 소개

351

Published on

The "MOML Application Viewer" is an application for browsing MOML(Mobile Object Markup Language) pages on the web.

You don't need to build android application for testing MOML pages if the page is in a web server.

Just run "MOML Application Viewer" and type page url.

By default, this version includes sample pages.

You can add your own site or other MOML application site url.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
351
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Appview 소개

  1. 1. AppViewCloud Mobile Application Development SolutionINTRODUCE
  2. 2. Cloud Mobile Application Development SolutionAppViewINDEX1. AppView 개요2. 개발 프로세스3. Library 구성도4. Native Rendering5. Native Interface6. Component Interface7. Enhanced Web View Componet8. 주요특징9. 레퍼런스
  3. 3. Cloud Mobile Application Development SolutionAppView1. AppView 개요3<UI><UILAYOUT portrait="320,460" landscape="320,460" theme="theme1"><LABEL layout="0,0,320,30" themeId="title" text="Citrine API Demo"/><WINDOW themeId="bg" layout="0,30,320,430" onCreate="{function.onCreate}"/><WINDOW layout="5,35,310,400" align="linear:vertical" ><BUTTON id="btn2" themeId="listButton"><LABEL themeId="listItemText" text="Camera"/><LABEL themeId="listItemArrow"/></BUTTON><BUTTON id="btn12" themeId="listButton><LABEL themeId="listItemText" text="Uncategorized..."/><LABEL themeId="listItemArrow"/></BUTTON></WINDOW></UILAYOUT></UI>MOML Viewer Mobile 어플리케이션의 UI와 동작을 구조적으로 정의한 Markup LanguageAppView는 Web의 장점을 갖는 Native 개발 Solution으로 쉬운 개발과 유지보수 및 높은 성능을 제공
  4. 4. Cloud Mobile Application Development SolutionAppView2. 개발 프로세스4Web ServerCloud appsAppViewLibraryMOML 개발[서버형 APP 배포 방식][단말기 설치형 APP 배포 방식]APK, IPABuildEmbeddedAPPLICATIONINFOTHEMEUIDEVICEINFOOBJECTSXML(MOML)ResourcesIMAGEMEDIASOUNDDATACodingReal timeDownloadNETWORK(Wi-Fi, 3G, Lte)[Application Source Files]WebDirectory- Real time Data- AppView libraryStand-Alone apps- XML(MOML)- Resource Files(Image, Sound, …)- AppView librarySource filesUpload 컨텐츠와 화면변경이 잦은 어플리케이션은 Source files을 서버에 업로드 하여 실시간으로 화면을 생성 할 수 있습니다. AppView Library와 함께 빌드하면 독립형 네이티브 App으로 생성됩니다.
  5. 5. Cloud Mobile Application Development SolutionAppView3. Library 구성도5MOML* 화면전환, 효과 등 모바일 최적화XMLMOML Script Parser* UI, Object 컨트롤 및 로직 처리Native Interface* OS 별 Platform API의 직접적 사용Custom Component* 개발자가 직접 제작한 UI 및 Object 추가 용이1234MOML Script ParserNative InterfaceLayout ManagerOS LayerCustom ComponentNative ComponentMOML PageAppview AppAppview Library1233 4
  6. 6. Cloud Mobile Application Development SolutionAppView4. Native Rendering6 자체 UI Object를 사용하지 않고 해당 OS의 UI Object를 사용 함으로서 빠른 반응 속도를 보장합니다.Android iOS<?xml version="1.0" encoding="UTF-8"?><MOML version="1.0.0"><UI><UILAYOUT portrait="640,960"><WINDOW layout="0,0,640,960" align="linear:vertical"><LABEL layout="100,75" text="label" textAlign="center" />. . . .<BUTTON layout="100,75" text="button" textAlign="center" /></WINDOW></UILAYOUT></UI></MOML>
  7. 7. Cloud Mobile Application Development SolutionAppView5. Native Interface<?xml version="1.0" encoding="utf-8"?><FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:mospi="http://schemas.android.com/apk/res/net.mospi.nativetest"android:layout_width="300px"android:layout_height="200px"android:background="#ffffff" ><org.mospi.moml.framework.pub.core.MOMLViewandroid:id="@+id/momlView"android:layout_width="300px"android:layout_height="200px"mospi:startUrl="coverflow.xml"/></FrameLayout>momlView = (MOMLView)coverflow.findViewById(R.id.momlView);momlView.addUIObjectHandler("root.coverflow", new DefaultUIObjectHandler() {public boolean onClick(MOMLUIObject uiObject) {int index = Integer.parseInt((String)uiObject.getProperty("index"));mTextView.setText(overlayDataList.get(index).getTitle()+"n"+overlayDataList.get(index).getContent()+"n"+"전화번호n"+ overlayDataList.get(index).getNumber());return true; }});7
  8. 8. Cloud Mobile Application Development SolutionAppView6. Component Interface8public class CitrineAPIDemoActivity extends MOMLActivity {@Overridepublic void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);getMomlView().registerUIComponent("org.mospi.moml.component.qrcode.componentUIQrcode", "QRCODE", "WINDOW");this.loadApplication("applicationInfo.xml");}} public class componentUIQrcode extends DefaultUIComponent {@Overridepublic ObjectApiInfo getObjectApiInfo() {ObjectApiInfo apiInfo =ObjectApiInfo.createObjectApiInfo("QRCODE", "1.0.0", "1.0.0", "",super.getClass());apiInfo.registerProperty("type", null, "1.0.0", "1.0.0", "");apiInfo.registerProperty("data", null, "1.0.0", "1.0.0", "");apiInfo.registerMethod("share", null, 0, "1.0.0", "1.0.0", "");return apiInfo;}}<QRCODE id=“qrcode” layout=“290,180” type=“text” defaultImg=“#000000” />
  9. 9. Cloud Mobile Application Development SolutionAppView7. Enhanced Web View Component<?xml version="1.0" encoding="UTF-8"?><MOML version="1.0.0"><UI><UILAYOUT portrait="640,960"><WEBVIEW2 layout="0,0,640,960"loadSrc=“http://www.host.com/index.html></UILAYOUT></UI></MOML><html><script type="xml/momloverlay"><moml:ACCELCOVERFLOW id="coverflow"dataSource="http://../coverflowData.xml"dataList="/IMAGELIST/ITEM" imagePath="./@src"titlePath="./@name" /></script></html>9
  10. 10. Cloud Mobile Application Development SolutionAppView8. 주요 특징(1/2)1102스마트폰 태블릿PCApp 개발 후 별도 추가 작업 없이 태블릿 기기에도바로 적용이 됩니다.One resource Multi-resolution 적용3XML 서버 통신으로 사용하여 App 관리가 용이합니다.서버코드 수정작업만으로 업데이트 바로 반영고객사 서버ApplicationXML 통신- 페이지 다운로드 형식수정 업데이트AppView™Library최적화된 장치 Device 연동(AppView API 제공)카메라 GPS주소록푸시서비스다양한 디바이스가 간편한 XML 코드로 제공되어하드웨어 연동 설정이 우수합니다.다양한 디바이스에 대한 Easy Access 가능스마트폰 태블릿 기기
  11. 11. Cloud Mobile Application Development SolutionAppView8. 주요 특징(2/2)1145 모바일 웹 서비스보다 빠른 성능을 제공합니다.네이티브 기반의 플랫폼으로 빠른 성능을 지원AppViewLibraryEasyDevelop SkillXML 문법 구조로 웹개발자도 쉽게 학습이 용이합니다.XML 지식이 있으면 누구나 쉽게 활용- XML Based MOML** MOML : Mobile Markup Language모바일 개발자웹 개발자6 기 개발 자원의 재 사용으로 재 구축 시비용 절감 효과가 큽니다.기 개발 컴포넌트의 재 사용성이 높음 레고 블록처럼 컴포넌트추가, 변경이 용이한 구조네이티브 OS 랜더링 엔진사용으로 모바일 기기 성능 최적화브라우져 랜더링 엔진사용으로 상대적인 속도 저하
  12. 12. Cloud Mobile Application Development SolutionAppViewAppView를 사용하여 원 소스 형태로 개발된 Native 의료업무 어플리케이션 입니다.9. 레퍼런스(1/5) 서울 아산병원 / 을지의료원 모바일 App 주요화면서울아산 / 을지의료원 Mobile 구축 (Android & iOS) 서울 아산 / 을지의료원 모바일 App 소개언제 어디서나 쉽고 빠르게 의료 정보에 접근함으로써 진료 업무의 효율성을 개선하고, 보다 수준 높은 환자 대응서비스를 제공하기 위한 병원의 의사, 간호사 용 업무 어플리케이션입니다.12[메인 화면][CT촬영 조회 화면][환자 정보 화면] [그래프 및 차트 화면]
  13. 13. Cloud Mobile Application Development SolutionAppViewAppView 기반으로 개발하였으며 Data Source를 사용한 데이터통신 위주의 쇼핑몰 App 소개 입니다.9. 레퍼런스(2/5) 마리해즈 쇼핑몰 App 주요화면[메인 화면] - Android [추천 상품 화면] - Android[인기 상품 화면] - iOS[상품소개 상세 화면] - Android [상품목록 화면] - iOS[웹뷰 화면] - Android쇼핑몰 App(Android & iOS) 쇼핑몰 App 소개기존 웹으로 구성된 쇼핑몰을 모바일 영역으로 확장한 서비스로서 다양한 애니메이션 효과, 데이터 바인딩 기술, 웹뷰 연동을적용하여 개발하였습니다.13
  14. 14. Cloud Mobile Application Development SolutionAppView애니메이션 및 멀티미디어 위주의 Interactive Book 입니다.9. 레퍼런스(3/5) 베리앱 App 주요화면[메인 화면]베리앱 App(Android & iOS) 베리앱 App 소개튼튼영어의 베이비리그 학습 내용을 미리 체험해 볼 수 있도록 제작한 유아교육용 어플리케이션입니다.배경음악, 효과음, 다양하고 인터렉티브 한 터치 액션을 적용하였습니다.14[읽기 화면][게임 화면] [안내 화면]
  15. 15. Cloud Mobile Application Development SolutionAppView동영상 및 카메라 등 장치 연동 위주의 어플리케이션 입니다.9. 레퍼런스(4/5) 페이스닝 App 주요화면[메인 화면]페이스닝 어플리케이션 개발(Android) 페이스닝 App 소개얼굴에 특화된 요가 동작을 동영상으로 제공하며, 즐겨찾는 요가 동영상을 스크랩할 수 있습니다.동영상 반복 및 전면 카메라를 통한 셀프 촬영 모드 제공으로 사용자가 따라하기 편하게 사용성을 증대하였습니다.15[즐겨찾기 화면][요가 재생 화면][Before & After 화면]
  16. 16. Cloud Mobile Application Development SolutionAppViewAppView Libary의 API들을 예제를 통해서 설명한 reference App입니다.9. 레퍼런스(5/5) Citrine API Demo App 주요화면Citrine API Demo (Android) Citrine API Demo App 소개AppView의 기능과 API를 적용한 앱입니다. AppView 에 대한 이해와 적용 사례를 확인하실 수 있으며차트 및 그래프의 효과, Theme, Webview 등 추가된 기능들을 확인하실 수 있습니다.16[메인 화면] [Coverflow & Galley][Chart 및 그래프 효과] [Theme 기능]
  17. 17. Cloud Mobile Application Development SolutionAppView 1710. Easy Mobile Programing by MOMLhttp://youtu.be/eEg-u-r5NC8 , http://yooic.com/adhoc/

×