Appview 소개

AppView
Cloud Mobile Application Development Solution
INTRODUCE

Cloud Mobile Application Development SolutionAppView
INDEX
1. AppView 개요
2. 개발 프로세스
3. Library 구성도
4. Native Rendering
5. Native Interface
6. Component Interface
7. Enhanced Web View Componet
8. 주요특징
9. 레퍼런스

1. 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 Language
AppView는 Web의 장점을 갖는 Native 개발 Solution으로 쉬운 개발과 유지보수 및 높은 성능을 제공

2. 개발 프로세스
4
Web Server
Cloud apps
AppView
Library
MOML 개발
[서버형 APP 배포 방식]
[단말기 설치형 APP 배포 방식]
APK, IPA
Build
Embedded
APPLICATIONINF
O
THEME
UI
DEVICEINFO
OBJECTS
XML(MOML)
Resources
IMAGE
MEDIA
SOUND
DATA
Coding
Real time
Download
NETWORK
(Wi-Fi, 3G, Lte)
[Application Source Files]
Web
Directory
- Real time Data
- AppView library
Stand-Alone apps
- XML(MOML)
- Resource Files
(Image, Sound, …)
- AppView library
Source files
Upload
 컨텐츠와 화면변경이 잦은 어플리케이션은 Source files을 서버에 업로드 하여 실시간으로 화면을 생성 할 수 있습니다.
 AppView Library와 함께 빌드하면 독립형 네이티브 App으로 생성됩니다.

3. Library 구성도
5
MOML
* 화면전환, 효과 등 모바일 최적화
XML
MOML Script Parser
* UI, Object 컨트롤 및 로직 처리
Native Interface
* OS 별 Platform API의 직접적 사용
Custom Component
* 개발자가 직접 제작한 UI 및 Object 추가 용이
1
2
3
4
MOML Script Parser
Native Interface
Layout Manager
OS Layer
Custom Component
Native Component
MOML Page
Appview App
Appview Library
1
2
3
3 4

4. Native Rendering
6
 자체 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>

5. 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.MOMLView
android: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

6. Component Interface
8
public class CitrineAPIDemoActivity extends MOMLActivity {
@Override
public 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 {
@Override
public 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” />

7. 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

8. 주요 특징(1/2)
1
10
2
스마트폰 태블릿PC
App 개발 후 별도 추가 작업 없이 태블릿 기기에도
바로 적용이 됩니다.
One resource Multi-resolution 적용
3
XML 서버 통신으로 사용하여 App 관리가 용이합니다.
서버코드 수정작업만으로 업데이트 바로 반영
고객사 서버
Application
XML 통신
- 페이지 다운로드 형식
수정 업데이
트
AppView™
Library
최적화된 장치 Device 연동
(AppView API 제공)
카메라 GPS
주소록
푸시서비스
다양한 디바이스가 간편한 XML 코드로 제공되어
하드웨어 연동 설정이 우수합니다.
다양한 디바이스에 대한 Easy Access 가능
스마트폰 태블릿 기기

8. 주요 특징(2/2)
11
4
5 모바일 웹 서비스보다 빠른 성능을 제공합니다.
네이티브 기반의 플랫폼으로 빠른 성능을 지원
AppView
Library
Easy
Develop Skill
XML 문법 구조로 웹개발자도 쉽게 학습이 용이합니다.
XML 지식이 있으면 누구나 쉽게 활용
- XML Based MOML*
* MOML : Mobile Markup Language
모바일 개발자
웹 개발자
6 기 개발 자원의 재 사용으로 재 구축 시
비용 절감 효과가 큽니다.
기 개발 컴포넌트의 재 사용성이 높음 레고 블록처럼 컴포넌트
추가, 변경이 용이한 구조
네이티브 OS 랜더링 엔진
사용으로 모바일 기기 성능 최적화
브라우져 랜더링 엔진
사용으로 상대적인 속도 저하

AppView를 사용하여 원 소스 형태로 개발된 Native 의료업무 어플리케이션 입니다.
9. 레퍼런스(1/5)
 서울 아산병원 / 을지의료원 모바일 App 주요화면
서울아산 / 을지의료원 Mobile 구축 (Android & iOS)
 서울 아산 / 을지의료원 모바일 App 소개
언제 어디서나 쉽고 빠르게 의료 정보에 접근함으로써 진료 업무의 효율성을 개선하고, 보다 수준 높은 환자 대응
서비스를 제공하기 위한 병원의 의사, 간호사 용 업무 어플리케이션입니다.
12
[메인 화면]
[CT촬영 조회 화면][환자 정보 화면] [그래프 및 차트 화면]

AppView 기반으로 개발하였으며 Data Source를 사용한 데이터통신 위주의 쇼핑몰 App 소개 입니다.
9. 레퍼런스(2/5)
 마리해즈 쇼핑몰 App 주요화면
[메인 화면] - Android [추천 상품 화면] - Android
[인기 상품 화면] - iOS[상품소개 상세 화면] - Android [상품목록 화면] - iOS
[웹뷰 화면] - Android
쇼핑몰 App(Android & iOS)
 쇼핑몰 App 소개
기존 웹으로 구성된 쇼핑몰을 모바일 영역으로 확장한 서비스로서 다양한 애니메이션 효과, 데이터 바인딩 기술, 웹뷰 연동을
적용하여 개발하였습니다.
13

애니메이션 및 멀티미디어 위주의 Interactive Book 입니다.
9. 레퍼런스(3/5)
 베리앱 App 주요화면
[메인 화면]
베리앱 App(Android & iOS)
 베리앱 App 소개
튼튼영어의 베이비리그 학습 내용을 미리 체험해 볼 수 있도록 제작한 유아교육용 어플리케이션입니다.
배경음악, 효과음, 다양하고 인터렉티브 한 터치 액션을 적용하였습니다.
14
[읽기 화면]
[게임 화면] [안내 화면]

동영상 및 카메라 등 장치 연동 위주의 어플리케이션 입니다.
9. 레퍼런스(4/5)
 페이스닝 App 주요화면
[메인 화면]
페이스닝 어플리케이션 개발(Android)
 페이스닝 App 소개
얼굴에 특화된 요가 동작을 동영상으로 제공하며, 즐겨찾는 요가 동영상을 스크랩할 수 있습니다.
동영상 반복 및 전면 카메라를 통한 셀프 촬영 모드 제공으로 사용자가 따라하기 편하게 사용성을 증대하였습니다.
15
[즐겨찾기 화면]
[요가 재생 화면]
[Before & After 화면]

AppView 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 기능]

Cloud Mobile Application Development SolutionAppView 17
10. Easy Mobile Programing by MOML
http://youtu.be/eEg-u-r5NC8 , http://yooic.com/adhoc/

Appview 소개

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (9)

Similar to Appview 소개

Similar to Appview 소개 (20)

Appview 소개