[go: up one dir, main page]

KR101456505B1 - 웹 어플리케이션 개발을 위한 사용자 인터페이스 프레임워크 - Google Patents

웹 어플리케이션 개발을 위한 사용자 인터페이스 프레임워크 Download PDF

Info

Publication number
KR101456505B1
KR101456505B1 KR1020120085992A KR20120085992A KR101456505B1 KR 101456505 B1 KR101456505 B1 KR 101456505B1 KR 1020120085992 A KR1020120085992 A KR 1020120085992A KR 20120085992 A KR20120085992 A KR 20120085992A KR 101456505 B1 KR101456505 B1 KR 101456505B1
Authority
KR
South Korea
Prior art keywords
widget
page
basic
user interface
framework
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Active
Application number
KR1020120085992A
Other languages
English (en)
Other versions
KR20140019626A (ko
Inventor
신기루
Original Assignee
인크로스 주식회사
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by 인크로스 주식회사 filed Critical 인크로스 주식회사
Priority to KR1020120085992A priority Critical patent/KR101456505B1/ko
Publication of KR20140019626A publication Critical patent/KR20140019626A/ko
Application granted granted Critical
Publication of KR101456505B1 publication Critical patent/KR101456505B1/ko
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/20—Software design
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/34—Graphical or visual programming
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/38—Creation or generation of source code for implementing user interfaces

Landscapes

  • Engineering & Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Software Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • User Interface Of Digital Computer (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

본 발명은 HTML5, CSS3, Javascript를 포함한 표준 웹 기술과 제이쿼리(jQuery) 및 제이쿼리 모바일(jQuery Mobile) 프레임워크 기반으로 모바일에서 네이티브 앱 수준의 UX를 제공하며, 모바일 웹 앱을 제작할 때 사용성 높은 UI 위젯 및 API를 제공하여 하나의 소스로 N-스크린에 적용 가능하며, 사용자가 기본으로 제공하는 위젯을 확장하여 사용할 수 있으며, 웹 어플리케이션 개발 시 절대좌표 체계와 상대좌표 체계를 동시에 지원하여 사용자의 편의성을 향상시킬 수 있도록 하는 효과가 있는 웹 어플리케이션 개발을 위한 사용자 인터페이스 프레임워크의 구조 및 기능에 대한 것이다.

Description

웹 어플리케이션 개발을 위한 사용자 인터페이스 프레임워크{A USER INTERFACE FRAMEWORK FOR DEVELOPING WEB APPLICATIONS}
본 발명은 웹 어플리케이션 개발을 위한 사용자 인터페이스 프레임워크에 관한 것으로, 더욱 상세하게는 웹 어플리케이션 저작을 위한 전체 플랫폼을 구성하고 있는 요소 중에서 모바일 웹 어플리케이션/하이브리드 웹 어플리케이션 개발을 위한 UI(User Interface) 위젯(Widget) 및 유틸리티를 구성하고 있는 UI 프레임워크에 대한 구조 및 기능에 대한 것이다.
일반적으로 프레임워크는 웹이나 프로그램에서 어떤 프로젝트를 수행하기 위해 미리 정해놓은 틀을 말하는 것으로, 보통 함수들을 이용한 프로그래밍의 불편을 해소하고 소프트웨어 개발의 편의를 위해 제공되는 클래스들의 집합으로서, 개발자의 취향에 따라 다양한 프로그램이 나오게 되면서, 프로그램 개발에 투입되는 개발자의 수와 개발 시간이 점점 늘어나고, 그에 따라 전체 시스템의 통합성과 일관성이 부족하게 됨으로써 도입되기 시작했다.
다시 말해, 상기 프레임워크는 어떤 프로젝트를 진행할 때, 뷰, 컨트롤, 모델 부분을 나누어 처리해서, 프로젝트의 효율성을 향상시키자는 패턴으로서, 이러한 패턴에 따라 프로젝트를 처리하고자 할 때, 뷰 페이지를 생성하거나, 요청을 컨트롤하거나, 비즈니스로직을 수행할 때 도움이 되는 클래스들을 미리 만들어, 하나의 라이브러리로 제공하는 것이라고 할 수 있다. 따라서 사용자는 프레임워크가 제공하는 라이브러리를 이용해서, 가이드라인에 따라 프로젝트를 진행하면 되는 것이다.
상기와 같은 프레임워크에는 소프트웨어 개발 시에 공통으로 사용하는 라이브러리, 공통으로 사용하는 개발 도구, 공통으로 사용하는 인터페이스 등이 있으며, 프레임워크를 이용하여 어플리케이션을 개발할 경우 프로그램(어플리케이션)의 개발 시간을 줄일 수 있고, 개발 시 발생할 수 있는 오류로부터 자유로울 수 있도록 하는 장점이 있다.
그러나 종래에는 HTML5, CSS3, Javascript를 포함한 표준 웹 기술과 제이쿼리(jQuery) 및 제이쿼리 모바일(jQuery Mobile) 프레임워크 기반으로 모바일에서 네이티브 앱(혹은 어플리케이션) 수준의 UX(User eXperience)를 제공하기 위한 UI 프레임워크가 존재하지 않았다. 따라서 모바일 웹 앱(Mobile Web Application)을 제작할 때 사용성 높은 UI 위젯 및 API를 제공하기 어려운 문제가 있었다.
본 발명은 상기와 같은 문제점을 해결하기 위해 창작된 것으로서, 저작도구의 전체 플랫폼을 구성하고 있는 요소 중에서 모바일 웹 어플리케이션/하이브리드 웹 어플리케이션을 효율적으로 개발하기 위한 사용자 인터페이스 프레임워크를 제공하는데 그 목적이 있다.
또한 본 발명은 HTML5, CSS3, Javascript를 포함한 표준 웹 기술과 제이쿼리(jQuery) 및 제이쿼리 모바일(jQuery Mobile) 프레임워크 기반으로 모바일에서 네이티브 앱 수준의 UX를 제공할 수 있는 사용자 인터페이스 프레임워크를 제공하는데 그 목적이 있다.
또한 본 발명은 모바일 웹 앱을 제작할 때 사용성 높은 UI 위젯 및 API를 제공하여 하나의 소스로 N-스크린에 적용 가능한 사용자 인터페이스 프레임워크를 제공하는데 그 목적이 있다.
또한 본 발명은 사용자가 기본으로 제공하는 위젯을 확장하여 사용할 수 있는 웹 어플리케이션 개발을 위한 사용자 인터페이스 프레임워크를 제공하는데 그 목적이 있다.
또한 본 발명은 웹 어플리케이션 개발 시 절대좌표 체계와 상대좌표 체계를 동시에 지원할 수 있는 사용자 인터페이스 프레임워크를 제공하는데 그 목적이 있다.
본 발명의 일 측면에 따른 웹 어플리케이션 개발을 위한 사용자 인터페이스 프레임워크는 UI 레이아웃과 애니메이션 및 다양한 효과를 디자인할 수 있는 저작도구와 상기 저작도구와의 심리스한 인터워킹을 통해서 웹 어플리케이션을 저작할 수 있는 스튜디오로 구성된 통합 플랫폼에서 상기 웹 어플리케이션의 개발 시 사용하기 위한 사용자 인터페이스 프레임워크에 있어서, 자바스크립트를 간결한 상태로 만들기 위한 제이쿼리; 모바일에 최적화되어 각종 UI 컨트롤, 이벤트 처리, 애니메이션 효과, 자동 네비게이션 및 에이젝스(Ajax) 통신을 수행하는 제이쿼리 모바일; 상기 웹 어플리케이션에서 독립적으로 수행되는 프로그램 요소인 위젯; 상기 웹 어플리케이션과 디바이스를 연결해주는 API(Application Program Interface) 세트로 이루어진 유틸리티; 및 모바일 웹에서 단말의 다양한 자원들에 접근할 수 있도록 하는 디바이스 API;를 포함하여 구성되고, 상기 위젯은 상기 제이쿼리 및 제이쿼리 모바일을 기반으로 구성되며, 상기 제이쿼리는 셀렉터 메소드, DOM(Document Object Model) 메소드 및 이벤트 메소드를 포함하고, 상기 제이쿼리 모바일은 기기지원과 브라우저 호환이 가능하게 하고, 코드 사이즈를 최소화하며, 적어도 하나 이상의 주요 모바일 플랫폼에서 호환이 가능하게 하고, 상기 위젯은 버튼(Button), 체크박스(Checkbox), 라디오버튼(RadioButton)을 포함하여 적어도 30개 이상의 기본 위젯을 포함하고, 상기 위젯은 각 위젯별 기능을 위한 메소드 및 위젯별 이벤트를 제공하고, 제이쿼리 모바일을 확장하여 컴포넌트를 설계할 수 있도록 하고, 상기 위젯은 베이직 위젯, 뷰 위젯 및 페이지 컨테이너 위젯을 포함하여 구성되고, 상기 위젯은 각각 아이디나 서브아이디로 구분하며, 아이디는 모든 위젯에서 사용하고, 서브아이디는 베이직 위젯에서만 사용하고, 상기 베이직 위젯은 뷰 위젯에 포함되어 사용하고, 베이직 위젯에서 그리드 위젯은 베이직 위젯을 다시 포함할 수 있으며, 상기 뷰 위젯은 베이직 위젯을 포함할 수 있는 것과 포함할 수 없는 것을 구분하여 사용하고, 상기 페이지 컨테이너 위젯은 페이지만을 포함하여 구성하고, 상기 페이지에서 콘텐츠 위젯, 헤더 위젯, 풋터 위젯은 독립적으로 사용하며, 상기 콘텐츠 위젯은 뷰 위젯과 페이지 컨테이너 위젯을 포함하여 사용하고, 상기 헤더 위젯과 풋터 위젯은 뷰 위젯과 베이직 위젯을 포함하여 사용하며, 상기 사용자 인터페이스 프레임워크는 실제 디바이스에서 동작하기 위해 필요한 디바이스 라이브러리를 포함하는 폴더; 사용자 인터페이스 프레임워크 라이브러리를 포함하는 폴더; 상기 라이브러리에서 사용중인 이미지를 포함하는 폴더; 상기 위젯에서 사용중인 CSS 및 위젯과 유틸리티에 관한 기능, 효과와 속성과 같은 내용에 관련된 라이브러리를 포함하는 폴더;를 포함하여 구성되는 것을 특징으로 한다.
본 발명의 일 측면에 따른 사용자 인터페이스 프레임워크를 이용하여 웹 어플리케이션의 페이지를 구성하는 방법에 있어서, 페이지 상단에서 페이지의 시작에 관련된 정보들을 포함하는 헤더; 페이지 하단에서 페이지의 종료에 관련된 정보들을 포함하는 풋터; 및 상기 헤더와 풋터 사이에서 실제로 제공할 콘텐츠를 포함하는 바디;로 구성되며, 상기 콘텐츠는 적어도 하나 이상의 위젯을 포함할 수 있으며, 그 위젯의 내부에 또 다른 위젯이나 페이지를 포함할 수 있고, 상기 페이지 구성을 위한 사용자 인터페이스 프레임워크는 HTML의 기본 구조에 따른 태그들을 이용하여 구성할 수 있고, 상기 헤더에는 페이지의 크기 및 타이틀, 사용 할 CSS, 자바스크립트(JS)를 정의하며, 상기 바디에 들어가는 페이지나 콘텐츠 및 페이지 이벤트는 제이쿼리 모바일에 정의된 구조를 따르는 것을 특징으로 한다.
본 발명은 모바일 웹 어플리케이션을 효율적으로 개발하기 위한 통합 플랫폼에 관한 것으로서, 기존의 모바일 웹 UI 프레임워크(JQuery Mobile, Sencha 등)와 그 구조가 다르게, HTML5, CSS3, Javascript를 포함한 표준 웹 기술과 제이쿼리(jQuery) 및 제이쿼리 모바일(jQuery Mobile) 프레임워크 기반으로 모바일에서 네이티브 앱 수준의 UX를 제공하며, 모바일 웹 앱을 제작할 때 사용성 높은 UI 위젯 및 API를 제공하여 하나의 소스로 N-스크린에 적용 가능하며, 사용자가 기본으로 제공하는 위젯을 확장하여 사용할 수 있으며, 웹 어플리케이션 개발 시 절대좌표 체계와 상대좌표 체계를 동시에 지원하여 사용자의 편의성을 향상시킬 수 있도록 하는 효과가 있다.
도 1은 본 발명의 일 실시예에 따른 웹 어플리케이션 저작을 위한 통합 플랫폼의 구성을 설명하기 위한 예시도.
도 2는 본 발명의 일 실시예에 따른 UI 프레임워크의 개략적인 구성을 보인 예시도.
도 3은 본 발명의 일 실시예에 따른 UI 프레임워크의 폴더 구조를 설명하는 예시도.
도 4는 본 발명의 일 실시예에 따른 UI 프레임워크에서 이벤트와 이벤트 핸들러를 설명하는 예시도.
도 5는 본 발명의 일 실시예에 따른 UI 프레임워크의 페이지 구조를 보인 예시도.
도 6은 상기 도5에 있어서, 페이지를 구성하는 방법을 설명하기 위한 예시도.
도 7은 본 발명의 일 실시예에 따른 UI 프레임워크에서 페이지 관련 이벤트와 이벤트 핸들러를 설명하는 예시도.
도 8a 내지 도 8d는 본 발명의 일 실시예에 따른 UI 프레임워크의 위젯과 이를 조합한 페이지 구성 방법을 설명하기 위한 예시도.
도 9는 상기 도8에 있어서, 위젯의 흐름을 설명하기 위한 예시도.
도 10a 내지 도 10c는 베이직 위젯에 포함된 dvcAudio 위젯의 특성을 설명하기 위한 예시도.
도 11a 내지 도 11e는 베이직 위젯에 포함된 dvcButton 위젯의 특성을 설명하기 위한 예시도.
도 12a 내지 도 12e는 베이직 위젯에 포함된 dvcCheckbox 위젯의 특성을 설명하기 위한 예시도.
도 13a 내지 도 13d는 베이직 위젯에 포함된 dvcGrid 위젯의 특성을 설명하기 위한 예시도.
도 14a 내지 도 14d는 베이직 위젯에 포함된 dvcImage 위젯의 특성을 설명하기 위한 예시도.
도 15a 내지 도 15e는 베이직 위젯에 포함된 dvcImageButton 위젯의 특성을 설명하기 위한 예시도.
도 16a 내지 도 16e는 베이직 위젯에 포함된 dvcLabel 위젯의 특성을 설명하기 위한 예시도.
도 17a 내지 도 17e는 베이직 위젯에 포함된 dvcPicker 위젯의 특성을 설명하기 위한 예시도.
도 18a 내지 도 18e는 베이직 위젯에 포함된 dvcProgress 위젯의 특성을 설명하기 위한 예시도.
도 19a 내지 도 19e는 베이직 위젯에 포함된 dvcRadioButton 위젯의 특성을 설명하기 위한 예시도.
도 20a 내지 도 20e는 베이직 위젯에 포함된 dvcSlider 위젯의 특성을 설명하기 위한 예시도.
도 21a 내지 도 21e는 베이직 위젯에 포함된 dvcSwitch 위젯의 특성을 설명하기 위한 예시도.
도 22a 내지 도 22e는 베이직 위젯에 포함된 dvcTextarea 위젯의 특성을 설명하기 위한 예시도.
도 23a 내지 도 23e는 베이직 위젯에 포함된 dvcTextfield 위젯의 특성을 설명하기 위한 예시도.
도 24a 내지 도 24b는 베이직 위젯에 포함된 dvcVideo 위젯의 특성을 설명하기 위한 예시도.
도 25a 내지 도 25d는 뷰 위젯에 포함된 dvcCollapseview 위젯의 특성을 설명하기 위한 예시도.
도 26a 내지 도 26c는 뷰 위젯에 포함된 dvcContent 위젯의 특성을 설명하기 위한 예시도.
도 27a 내지 도 27d는 뷰 위젯에 포함된 dvcDivision 위젯의 특성을 설명하기 위한 예시도.
도 28a 내지 도 28d는 뷰 위젯에 포함된 dvcFooter 위젯의 특성을 설명하기 위한 예시도.
도 29a 내지 도 29d는 뷰 위젯에 포함된 dvcHeader 위젯의 특성을 설명하기 위한 예시도.
도 30a 내지 도 30d는 뷰 위젯에 포함된 dvcHtmlview 위젯의 특성을 설명하기 위한 예시도.
도 31a 내지 도 31e는 뷰 위젯에 포함된 dvcLayoutview 위젯의 특성을 설명하기 위한 예시도.
도 32a 내지 도 32e는 뷰 위젯에 포함된 dvcListview 위젯의 특성을 설명하기 위한 예시도.
도 33a 내지 도 33d는 뷰 위젯에 포함된 dvcScrollview 위젯의 특성을 설명하기 위한 예시도.
도 34a 내지 도 34e는 뷰 위젯에 포함된 dvcTreeview 위젯의 특성을 설명하기 위한 예시도.
도 35a 내지 도 35e는 페이지 컨테이너 위젯에 포함된 dvcCarousel 위젯의 특성을 설명하기 위한 예시도.
도 36a 내지 도 36d는 페이지 컨테이너 위젯에 포함된 dvcCarouselIndicator 위젯의 특성을 설명하기 위한 예시도.
도 37a 내지 도 37d는 페이지 컨테이너 위젯에 포함된 dvcPagebox 위젯의 특성을 설명하기 위한 예시도.
도 38a 내지 도 38d는 페이지 컨테이너 위젯에 포함된 dvcPopup 위젯의 특성을 설명하기 위한 예시도.
도 39a 내지 도 39f는 본 발명의 일 실시예에 따른 UI 프레임워크의 API를 설명하기 위한 예시도.
이하, 첨부된 도면을 참조하여 본 발명에 따른 웹 어플리케이션(혹은 앱이라고도 함) 개발을 위한 사용자 인터페이스 프레임워크의 일 실시예를 설명한다.
도1은 본 발명의 일 실시예에 따른 웹 어플리케이션 저작을 위한 통합 플랫폼의 구성을 설명하기 위한 예시도이다. 이에 도시된 바와 같이 웹 어플리케이션 저작을 위한 통합 플랫폼은 저작도구(또는 디자인 툴)(100), 스튜디오(200), 런타임 플랫폼(300) 및 UI 프레임워크(400)를 포함하여 구성된다.
상기 스튜디오(200)는 웹 어플리케이션의 개발을 위한 프로젝트의 생성과 관리를 수행하며, 또한 상기 저작도구(100), 런타임 플랫폼(300), UI 프레임워크(400)와 심리스한 인터워킹을 통해서 UI 로직과 Biz 로직의 개발을 지원하며, 상기 인터워킹을 통해서 개발된 어플리케이션은 다양한 하드웨어 프로파일을 지원하는 프로파일러를 이용해 프로파일링과 에뮬레이터를 이용한 테스트를 수행하며 이때 발생된 에러를 디버거를 통해 디버깅할 수 있도록 하고, 상기 과정을 통해 완료된 앱 어플리케이션은 최종적으로 빌드 및 패키징하여 배포한다.
상기 통합 플랫폼은 통합개발환경(Integrated Development Environment : IDE)으로서, 동일한 HTML 기반의 소스를 통해 다양한 플랫폼(예 : 안드로이드나 iOS 기반의 모바일 기기)에서 동일한 기능을 제공하는 크로스 플랫폼 런타임(cross platform runtime)으로 구성되며, 다양한 네이티브 기능을 자바스크립트 API(Application Program Interface)로 제공하여 어플리케이션의 구현 범위와 수준을 향상시키고, 3rd 파티가 서비스 개발에 필요한 기능을 손쉽게 확장할 수 있는 플러그-인 아키텍처를 지원한다.
또한 상기 통합 플랫폼은 표준 웹 기술(예 : HTML5, CSS3, JS) 기반으로 원소스 멀티유즈(OSMU : one source multi use, 한 사지 제품이나 개념을 다양한 용도로 사용하는 것)와 N-스크린 서비스(TV나 PC, 태블릿PC, 스마트폰 등 다양한 기기에서 하나의 콘텐츠를 끊김없이 이용할 수 있게 해주는 서비스) 개발을 지원한다. 즉, N-스크린 대응 웹 어플리케이션 개발에 필요한 일련의 과정을 심리스하게 지원할 수 있도록 한다. 또한 상기 런타임 플랫폼(300)과 UI 프레임 워크(400)를 기반으로 OS 단편화, H/W 단편화 및 비즈니스 요구사항을 해결한다.
상술한 바와 같이 본 발명에 따른 통합 플랫폼은 HTML5 기반 웹 어플리케이션의 개발로부터 서비스에 이르는 일련의 프로세스들을 심리스하게 지원하는 통합개발환경으로서, 저작도구(100)와 스튜디오(200)가 심리스하게 인터워킹 함으로써, UI 로직과 비즈 로직(업무관련 비즈니스 로직)의 모듈화된 개발 및 관리를 지원하고, 에뮬레이터(230), 디버거(240) 및 다양한 하드웨어 프로파일을 지원하는 프로파일러(250)를 제공하여 개발의 생산성과 효율을 향상시킨다.
상기 스튜디오(200)는 프로젝트 매니저(210) 및 코드 에디터(220)를 통해서 UI 로직 및 비즈 로직을 코딩하며, 이들을 에뮬레이터(230)/디버거(240)/프로파일러(250)에서 테스트, 디버깅 및 프로파일링을 수행한다. 이어서 빌드(260)와 패키저(270)에서 빌드 및 디플로이(Deploy)를 수행하며, 그 결과는 하이브리드 어플리케이션으로 다양한 모바일 디바이스에서 동작하거나, 혹은 웹 어플리케이션으로 커스터머 서버에서 동작한다.
또한 상기 통합 플랫폼은 하이브리드 어플리케이션 빌드를 위한 빌드 서버(500)를 별도로 구성할 수 있으며, 상기 빌드 서버(500)를 이용하여 각종 OS(예 : 안드로이드, iOS)의 다양한 패키징을 지원할 수 있다. 이때 상기 빌드 서버(500)는 기업의 니즈에 따라 local(기업용) 빌드 서버 구축 및 이용이 가능하며, 또한 사용자 관리 및 빌드 상태 관리 기능의 제공, 빌드 히스토리 및 통계 정보를 제공할 수 있다. 그리고 상기 통합 플랫폼은 웹 어플리케이션의 개발과 배포 및 사용자와 개발자를 위한 지원과 관리를 위한 에코 시스템(600)을 제공할 수 있으며, 상기 에코 시스템을 위한 별도의 서버나 웹사이트를 구성할 수 있다.
도2는 본 발명의 일 실시예에 따른 UI 프레임워크의 구성을 보인 예시도이다.
이에 도시된 바와 같이 본 실시예에 따른 UI 프레임워크(400)는 제이쿼리(jQuery, 410) 및 제이쿼리 모바일(jQuery Mobile, 420)에 기반한 확장 가능한 UI 프레임워크 라이브러리를 제공하고, 보다 손쉬운 웹 어플리케이션 UI 저작을 위해서 적어도 30개 이상의 기본 UI 위젯을 제공하며, 보다 손쉽고, 고속이며, 빠르게 UI를 구성할 수 있도록 페이지 템플리트와 컴비네이션 위젯을 제공한다.
또한 본 실시예에 따른 UI 프레임워크는 제이쿼리(jQuery, 410) 및 제이쿼리 모바일(jQuery Mobile, 420)을 기반으로 구성되며 이를 이용한 위젯(Widget, 430)과 어플리케이션(Application) 개발 시, 본 실시예의 UI 프레임워크를 효율적으로 사용할 수 있는 API set인 유틸리티(Utility, 440)를 제공한다. 그리고 모바일 웹에서 단말의 다양한 자원들(예 : GPS, 각종 센서, 주소록, 일정, 카메라 제어, 배터리 정보, 사진첩, 기타 폴더 관리 등)에 접근할 수 있도록 하는 디바이스 API(450)를 포함한다.
여기서 제이쿼리(jQuery)는 자바스크립트(Javascript) 라이브러리로서, 자바스크립트를 간결한 상태로 개발이 가능하도록 도와주는 역할을 수행한다. 예를 들어 수 십줄의 자라스크립트 코딩을 단 몇 줄만으로 해결할 수 있도록 하는 것이다. 상기 제이쿼리의 특징은 크게 네 가지로 볼 수 있다. 첫 번째는 CSS 셀렉터로서 html 내의 엘리먼트들을 손쉽게 표현 및 사용이 가능하게 하고, 두 번째는 플러그인 아키텍처로서 이미 개발된 많은 플러그인을 쉽고 빠르게 사용 가능하게 하며, 세 번째는 메서드 체인으로서 여러개의 기능을 한줄에 나열하여 불필요한 코드 반복을 줄일 수 있도록 하고, 네 번째는 클로스 브라우져로서 브라우져별 발생 이벤트를 각각 지정해 줄 필요가 없도록 한다.
상기 제이쿼리(jQuery)는 자바스크립트 라이브러리인 제이쿼리(예 : jQuery 1.64)에서 제공하는 셀렉터 메소드(Selector method), DOM(Document Object Model) 메소드, 이벤트 메소드 등을 이용한다.
상기 제이쿼리 모바일(jQuery Mobile)은 모바일 웹 어플리케이션 개발을 목적으로 만들어진 자바스크립트 프레임 워크로서 웹에서 많이 사용을 하던 제이쿼리(jQuery)를 직접 개발한 프레임워크로 네이티브 수준의 모바일 웹, 웹 앱을 개발하도록 각종 UI 컨트롤과 이벤트 처리, 애니메이션 효과 및 자동 네비게이션, 에이젝스(Ajax) 통신 등 모바일에 최적화되어 기기지원과 브라우저 호환이 가능하여 성능의 최적화를 위해 코드 사이즈를 최소화하도록 하는 등 주요 모바일 플랫폼에서 호환이 가능하도록 하고 있는 것이다.
여기서, 상기 에이젝스(Ajax)는 WEB 2.0의 기반 기술 중 하나로서, 에이젝스는 자체가 하나의 특정한 기술을 말하는 것이 아니며, 함께 사용하는 기술의 묶음을 지칭하는 용어로 대화식 웹 어플리케이션의 제작을 위해 사용된다. 에이젝스 어플리케이션은 실행을 위한 플랫폼으로 사용되는 기술들을 지원하는 웹 브라우저를 이용하는데, 이를 지원하는 브라우저로는 예컨대 모질라 파이어폭스, 인터넷 익스플로러, 오페라, 사파리 등이 있다.
상기 위젯(Widget)은 독립적으로 수행되는 작은 프로그램으로서, 사용하는 소프트웨어나 디바이스 형태에 따라 위젯 엔진(데스크탑 위젯), 웹 위젯(웹 상에서 구동되는 위젯), 모바일 위젯(휴대폰 화면에 적용된 위젯)으로 분류되기도 한다. 본 실시예에서 상기 위젯은 버튼(Button), 체크박스(Checkbox), 라디오버튼(RadioButton) 등 다양한 위젯(3가지 구조로 분류된 총 30개 위젯)을 제공하며, 위젯별 기능을 위한 메소드를 제공하며, 위젯별 이벤트를 제공하며, 제이쿼리 모바일을 확장하여 컴포넌트(Component)를 설계할 수 있도록 한다.
참고로, 상기 위젯은 영어로 소형 장치나 요소를 뜻하며, 1980년대에 프로젝트 아테나가 최초로 GUI 요소를 위젯이라고 부르기 시작했다. 다른 비슷한 용어에는 적절하지 못한 뜻이 포함될 수도 있었기 때문에 이 낱말이 선택되었으며, 또한 이 프로젝트의 Intrinsics 툴킷(Xt 라이브러리)은 X 윈도우 시스템 위에서 창과 각 위젯을 연결시켰기 때문에 창과 같은 접두어가 선택되었다고 한다. 유사한 용어로 가젯이 있으며 이는 윈도우가 없는 위젯을 의미한다.
상기 유틸리티(Utility)는 본 실시예에 따른 UI 프레임워크를 사용할 때 필요한 API 세트(set)들의 모임이다.
다음 도3을 참조하여 본 실시예의 UI 프레임워크의 폴더 구조를 설명한다.
먼저 통합 플랫폼인 최상위 폴더(예 : davinci)의 하위에 UI 프레임워크의 시스템(system) 폴더가 있으며, 상기 시스템(system) 폴더는 실제 디바이스(device)에서 동작하기 위해 필요한 라이브러리 폴더를 의미한다. 여기서 상기 시스템 폴터의 하위 폴더인 디바이스(device)는 디바이스 라이브러리(device.dvc,js)를 포함하고, 다를 하위 폴더인 프레임워크(framework)는 본 실시예에 따른 UI 프레임워크 라이브러리를 포함하고, 그 하위에는 라이브러리에서 사용 중인 이미지 폴더(images)와 위젯에서 사용중인 CSS(jquery.dvc.css), 위젯 및 유틸리티에 관한 내용(기능, 효과, 속성 등)에 관한 라이브러리(jquery.dvc.js)를 포함한다.
다음 상기 이벤트(Event)는 사전적으로는 어떠한 행동이나 사건을 의미하는 것으로서, 예컨대 마우스오버(mouseover), 키프레스(keypress), 클릭(click) 등이 있다. 그리고 이벤트 핸들러(Event Handler)는 상기 이벤트를 조절해주는 역할을 하는 것으로서, 예컨대 온마우스오버(onMouseOver), 온클리(onClick), 온키프레스(onKeypress) 등이 있으며, 상기 이벤트 핸들러는 이벤트를 판별하고 그에 따른 행위(Behavior)를 결정해 주는 조절자의 역할을 수행한다.
본 실시예에 따른 UI 프레임워크에서는 이벤트 모델(Event Model)의 버블링(Bubbling)을 이용한다. 상기 버블링(Bubbling)은 실제 이벤트 발생 요소인 하위 요소에서 상위 요소에 이벤트 핸들러를 설정하여 실행하는데, 이는 마치 거품이 수면위로 떠오르는 것과 같다. 상기 이벤트와 이벤트 핸들러는 도4에 도시된 바와 같이 설정할 수 있다.
다음 도 5는 본 발명의 일 실시예에 따른 UI 프레임워크의 페이지 구조를 보인 예시도이고, 도 6은 상기 도5에 있어서, 페이지를 구성하는 방법을 설명하기 위한 예시도이다.
도 5에 도시된 바와 같이, 본 실시예에 따른 UI 프레임워크의 페이지는 상단의 헤더(Header, 711)와 하단의 풋터(Footer, 712) 사이에(즉, 바디 영역에) 콘텐츠(Content)를 삽입하는 구조를 갖는다. 상기 콘텐츠(Content)에는 화면으로 표시되는 영역을 분할하여 적어도 하나 이상의 위젯을 포함할 수 있으며, 그 위젯의 내부에 또 다른 위젯이나 페이지를 포함하도록 구성할 수 있다.
도 6에 도시된 바와 같이, 본 실시예에 따른 UI 프레임워크는 <head> <body> HTML의 기본 구조를 따르며, <head>에는 페이지의 크기 및 타이틀, 사용 할 CSS, 자바스크립트(JS)를 정의한다. 즉, 최초 UI 프레임워크의 CSS 및 자바스크립트를 정의하고, 개발 중 필요한 CSS 및 자바스크립트는 작성하여 정의한다. 그리고 <body>안에 들어가는 페이지는 제이쿼리 모바일 구조를 그대로 따르고, <div> 태그를 기반으로 한 위젯(<div> 태그 기반)을 사용한다.
그리고 페이지 이벤트는, 도 7에 도시된 바와 같이, 제이쿼리 모바일에 정의된 페이지 관련 이벤트를 사용한다.
도8a 내지 도8d는 본 발명의 일 실시예에 따른 UI 프레임워크의 위젯과 이를 조합한 페이지 구성 방법을 설명하기 위한 예시도이다.
도8a 및 도8b에 도시된 바와 같이 UI 프레임워크(400)는 베이직 위젯(431), 뷰 위젯(432), 페이지 컨테이너 위젯(433)을 포함한다. 상기 UI 프레임워크(400)는 제이쿼리 및 제이쿼리 모바일을 기반으로 확장 가능한 UI 프레임워크 라이브러리를 제공하고, 또한 웹 앱 UI를 더 쉽게 저작할 수 있는 적어도 30개 이상의 기본 UI 위젯을 제공하며, 더 쉽고 빠른 UI 구성을 위하여 페이지 템플릿과 베이직 위젯, 뷰 위젯, 페이지 컨테이너 위젯을 조합하여 기본 위젯을 확장시킬 수 있다.
도8c는 상기 페이지 템플릿을 이용한 페이지 저작과정을 보인 예시도로서, 사용자(개발자)는 블랭크 페이지(Blank page)가 표시된 상태에서 원 클릭으로 미리 구성된 페이지를 선택한 후 간단한 조작으로 프로퍼티(property)를 설정하고 원하는 UI 로직을 개발함으로써 페이지를 완성하게 된다. 또한 도8d에 도시된 바와 같이 일정 패턴을 반복하여 위젯들을 블록 단위로 조합함으로써 개발자는 자신만의 조합된 위젯을 생성하고 등록할 수 있다. 예컨대 도8d와 같이 위젯 조합(예 : Layoutview, Grid, Image, Label)을 이용하여 메일에 관련된 어느 하나의 탭을 만들고, 그 탭을 만드는 과정을 반복하여 메일에 관련된 탭들(Inbox, SentMail, Draft, Important)의 블록을 구성할 수 있다.
이하 다른 도면들을 참조하여 상기 각 위젯의 기능, HTML 태그, 기본 스타일 클래스(style class), 옵션(options), 옵션 샘플(option sample), 메소드(method), CSS, 이벤트(event)로 나누어 설명한다. 그리고 옵션(options)은 카멜 표기법(예 : button Type)을 사용하고, 옵션(options)을 사용할 경우 대문자가 들어가는 경우에는 소문자로 변경한다(예 : buttonType → button-type).
그리고 모든 위젯들은 각각 아이디(id)나 서브아이디(subid)로 구분하여 사용한다. 여기서 서브아이디(subid)는 아이디(id)가 중복될 경우에 발생하는 문제를 해결하기 위해 도입한 것이며, 서브아이디(subid)는 베이직 위젯(Basic Widget)에서만 사용 가능하고, 아이디(id)는 모든 위젯에서 사용한다.
도9는 상기 도8에 있어서, 위젯의 흐름을 설명하기 위한 예시도이다.
이에 도시된 바와 같이 베이직 위젯(Basic Widget)은 반드시 뷰 위젯(View Widget)에 포함되어 사용하고, 베이직 위젯에서 그리드 위젯(Grid Widget)은 베이직 위젯을 다시 포함할 수 있도록 구성한다. 그리고 상기 뷰 위젯에서 베이직 위젯을 포함할 수 있는 것과 포함할 수 없는 것(예 : Htmlview, Treeview, Audio, Video)를 구분하여 사용한다. 그리고 페이지 컨테이너 위젯(Page Container Widget)은 페이지만을 포함하여 구성하여 사용하고, 페이지에서 콘텐츠(Content), 헤더(Header), 풋터 위젯(Footer widget)은 같은 뷰 위젯과 다르게 독립적으로 사용한다. 그리고 콘텐츠 위젯(Content Widget)은 뷰, 페이지 컨테이너 위젯을 포함하여 사용하는데, 이때 베이직 위젯(Basic Widget)은 포함 불가이다. 그리고 헤더, 풋터 위젯은 뷰, 베이직 위젯을 포함하여 사용하는데, 이때 페이지 컨테이너 위젯은 포함 불가이다.
도10a 내지 도10c는 베이직 위젯에 포함된 dvcAudio 위젯의 특성을 설명하기 위한 예시도이다.
상기 dvcAudio 위젯은 오디오(Audio) 파일을 재생할 수 있는 위젯이다. 예를 들어 상기 dvcAudio 위젯의 HTML 엘리먼트(element)는 <div data-role="dvcAudio" id="Audio_0"> </div> 와 같은 형식으로 기재할 수 있다.
상기 dvcAudio 위젯은 도10a에 도시된 바와 같이 다양한 옵션들을 포함하고 있으며, 도10b에 도시된 바와 같은 메소드(method)들로 구성된다. 여기서 메소드란 메시지에 따라 실행시킬 프로시저로서 객체 지향 언어에서 사용되는 것이다. 즉, 메소드는 객체안에 하나하나 있는 일종의 명령 집합체로서, 예컨대 사람이라는 객체가 있다면 그 객체 안에는 본다, 먹는다, 물건을 집어라는 명령의 집합이 있으며, 그 명령의 집합을 메소드라고 할 수 있는 것이다. 따라서 상기 객체 지향 언어에서는 메시지를 보내 메소드를 수행시킴으로써 통신을 수행하며 그 응답에 따라 객체의 상태를 알 수 있게 되는 것이다. 그리고 상기 dvcAudio 위젯은 도10c에 도시된 바와 같이 오디오 재생이 완료되었을 때 발생하는 이벤트(예 : ev_ended(e))에 대한 처리를 수행한다.
도11a 내지 도11e는 베이직 위젯에 포함된 dvcButton 위젯의 특성을 설명하기 위한 예시도이다.
상기 dvcButton 위젯은 텍스트, 이미지, 아이콘을 넣을 수 있는 버튼 위젯이다. 상기 dvcButton 위젯은 버튼의 폭(width)을 기입하지 않으면 텍스트 폭(text width)에 맞게 버튼 폭(button width)이 자동으로 설정되고, 크기를 고정하여 사용하고 싶을 경우에는 min-width를 설정한다. 이때 상기 버튼의 폭(width) 설정 시 폭(width)이 아닌 max-width를 사용해야 한다. 만약 max-width를 설정하지 않으면 텍스트의 폭(width)이 버튼의 폭(width)을 초과할 경우 생략표시(...)가 표시되지 않는다. 예를 들어 상기 dvcButton 위젯의 HTML 엘리먼트(element)는 <div data-role="dvcButton" subid="btn1" style="left:10px; top:10px; height:36px;"> </div> 와 같은 형식으로 기재할 수 있으며, 기본 스타일 클래스는 도 11a와 같은 형식으로 기재할 수 있다.
상기 dvcButton 위젯은 도 11b에 도시된 바와 같이 다양한 옵션들을 포함하고 있으며, 도 11c에 도시된 바와 같은 메소드(method)들로 구성되며, 도 11d에 도시된 바와 같은 CSS(cascading style sheets) 항목들을 포함한다. 여기서 CSS는 웹 문서의 전반적인 스타일을 미리 저장해 둔 스타일시트로서, 문서 전체의 일관성을 유지할 수 있고, 세세한 스타일 지정의 필요를 줄어들게 하는 특성이 있다. 예를 들어 HTML을 이용해서 웹 페이지를 제작할 경우 전반적인 틀에서 세세한 글꼴 하나하나를 일일이 지정해주어야 하지만, 웹 페이지의 스타일(작성형식)을 미리 저장해 두면 웹 페이지의 한 가지 요소만 변경해도 관련되는 전체 페이지의 내용이 한꺼번에 변경되므로, 문서 전체의 일관성을 유지할 수 있고 작업 시간도 단축된다. 따라서 웹 개발자들은 보다 풍부한 디자인으로 웹을 설계할 수 있고, 글자의 크기, 글자체, 줄간격, 배경 색상, 배열위치 등을 자유롭게 선택하거나 변경할 수 있으며 유지·보수도 간편하게 할 수 있게 되는 것이다. 또한 각기 다른 사용자 환경에서 동일한 형태의 문서를 제공한다는 이점도 있다. 즉, CSS로 만들어진 문서는 사용자들의 브라우저 환경에 따라 웹 페이지가 다르게 나타나는 일이 없고 어느 환경에서나 제작자가 의도한대로 그 효과가 전달되는 것이다. 그리고 상기 dvcButton 위젯은 도 11e에 도시된 바와 같이 버튼 클릭 시 발생하는 이벤트(예 : ev_click(id))에 대한 처리를 수행한다.
도12a 내지 도12e는 베이직 위젯에 포함된 dvcCheckbox 위젯의 특성을 설명하기 위한 예시도이다.
상기 dvcCheckbox 위젯은 동시에 여러 버튼을 선택하여 사용할 경우의 위젯이다. 상기 dvcCheckbox 위젯은 크기를 고정하여 사용하고 싶을 경우에는 min-width를 설정한다. 이때 상기 버튼의 폭(width) 설정 시 폭(width)이 아닌 max-width를 사용해야 한다. 만약 max-width를 설정하지 않으면 텍스트의 폭(width)이 버튼의 폭(width)을 초과할 경우 생략표시(...)가 표시되지 않는다. 예를 들어 상기 dvcCheckbox 위젯의 HTML 엘리먼트는 <div data-role="dvcCheckbox" subid="chkbtn" style="left:10px; top:30px; min-width:30px; height:30px;"> </div> 와 같은 형식으로 기재할 수 있으며, 기본 스타일 클래스는 도12a와 같은 형식으로 기재할 수 있다.
상기 dvcCheckbox 위젯은 도 12b에 도시된 바와 같이 다양한 옵션들을 포함하고 있으며, 도 12c에 도시된 바와 같은 메소드(method)들로 구성되며, 도 12d에 도시된 바와 같은 CSS(cascading style sheets) 항목들을 포함한다. 그리고 상기 dvcCheckbox 위젯은 도 12e에 도시된 바와 같이 체크박스 선택 후 상태 변경 시 이벤트(예 : ev_change(id, value))에 대한 처리를 수행한다.
도 13a 내지 도 13d는 베이직 위젯에 포함된 dvcGrid 위젯의 특성을 설명하기 위한 예시도이다.
상기 dvcGrid 위젯은 UI 구성 중 공간을 동일한 사각형으로 분할하고 각 셀에 위젯을 배치하는 위젯이다. 예를 들어 상기 dvcGrid 위젯의 HTML 엘리먼트는 <div data-role="dvcGrid" style="left:50px; top:0px; right:50px; bottom:0px;"> <div class="dvc-grid-item"> </div> </div>와 같은 형식으로 기재할 수 있으며, 기본 스타일 클래스는 도 13a와 같은 형식으로 기재할 수 있다.
상기 dvcGrid 위젯은 도 13b에 도시된 바와 같이 다양한 옵션들을 포함하고 있으며, 도 13c에 도시된 바와 같은 메소드(method)들로 구성되며, 도 13d에 도시된 바와 같은 CSS(cascading style sheets) 항목들을 포함한다.
도 14a 내지 도 14d는 베이직 위젯에 포함된 dvcImage 위젯의 특성을 설명하기 위한 예시도이다.
상기 dvcImage 위젯은 이미지를 넣어 보여주는 위젯이다. 예를 들어 상기 dvcImage 위젯의 HTML 엘리먼트는 <div data-role="dvcImage" subid="img" style="left:10px; top:10px; width:200px; height:200px;"> </div> 와 같은 형식으로 기재할 수 있으며, 기본 스타일 클래스는 도 14a와 같은 형식으로 기재할 수 있다.
상기 dvcImage 위젯은 도 14b에 도시된 바와 같이 다양한 옵션들을 포함하고 있으며, 도 14c에 도시된 바와 같은 메소드(method)들로 구성되며, 도 14d에 도시된 바와 같은 CSS(cascading style sheets) 항목들을 포함한다.
도 15a 내지 도 15e는 베이직 위젯에 포함된 dvcImageButton 위젯의 특성을 설명하기 위한 예시도이다.
상기 dvcImageButton 위젯은 텍스트와 이미지를 넣을 수 있는 버튼 위젯이다. 상기 dvcImageButton 위젯은 크기를 고정하여 사용하고 싶을 경우에는 min-width를 설정한다. 이때 상기 버튼의 폭(width) 설정 시 폭(width)이 아닌 max-width를 사용해야 한다. 만약 max-width를 설정하지 않으면 텍스트의 폭(width)이 버튼의 폭(width)을 초과할 경우 생략표시(...)가 표시되지 않는다. 예를 들어 상기 dvcImageButton 위젯의 HTML 엘리먼트는 <div data-role="dvcImageButton" subid="imgbtn" style="left:50px; top:80px; width:42px; height:36px;"> </div> 와 같은 형식으로 기재할 수 있으며, 기본 스타일 클래스는 도 15a와 같은 형식으로 기재할 수 있다.
상기 dvcImageButton 위젯은 도 15b에 도시된 바와 같이 다양한 옵션들을 포함하고 있으며, 도 15c에 도시된 바와 같은 메소드(method)들로 구성되며, 도 15d에 도시된 바와 같은 CSS(cascading style sheets) 항목들을 포함한다. 그리고 상기 dvcImageButton 위젯은 도 15e에 도시된 바와 같이 이미지버튼 클릭 시 이벤트(예 : ev_click(event, id))에 대한 처리를 수행한다.
도16a 내지 도16e는 베이직 위젯에 포함된 dvcLabel 위젯의 특성을 설명하기 위한 예시도이다.
상기 dvcLabel 위젯은 고정된 텍스트를 화면에 표시하며, 사용자가 직접 내용을 변경할 수 없는 위젯이다. 예를 들어 상기 dvcLabel 위젯의 HTML 엘리먼트는 <div data-role="dvcLabel" subid="label" style="left:10px; top:40px; width:150px; height:36px;"> </div> 와 같은 형식으로 기재할 수 있으며, 이때 멀티라인(multiline)을 사용할 경우에는 스타일(style)에 line-height를 추가한다. 그리고 기본 스타일 클래스는 도 16a와 같은 형식으로 기재할 수 있다.
상기 dvcLabel 위젯은 도 16b에 도시된 바와 같이 다양한 옵션들을 포함하고 있으며, 도 16c에 도시된 바와 같은 메소드(method)들로 구성되며, 도 16d에 도시된 바와 같은 CSS(cascading style sheets) 항목들을 포함한다. 그리고 상기 dvcLabel 위젯은 도 16e에 도시된 바와 같이 레이블 클릭 시 이벤트(예 : ev_click(id))에 대한 처리를 수행한다.
도 17a 내지 도 17e는 베이직 위젯에 포함된 dvcPicker 위젯의 특성을 설명하기 위한 예시도이다.
상기 dvcPicker 위젯은 고정된 텍스트를 화면에 표시하며, 사용자가 직접 내용을 변경할 수 없는 위젯이다. 예를 들어 상기 dvcPicker 위젯의 HTML 엘리먼트는 <div data-role="dvcPicker" subid="picker" style="left:10px; top:50px; width:150px;"> </div> 와 같은 형식으로 기재할 수 있으며, 기본 스타일 클래스는 도17a와 같은 형식으로 기재할 수 있다.
상기 dvcPicker 위젯은 도 17b에 도시된 바와 같이 다양한 옵션들을 포함하고 있으며, 도 17c에 도시된 바와 같은 메소드(method)들로 구성되며, 도 17d에 도시된 바와 같은 CSS(cascading style sheets) 항목들을 포함한다. 그리고 상기 dvcPicker 위젯은 도 17e에 도시된 바와 같이 피커(picker)의 상태 변경 시 발생되는 이벤트(예 : ev_click(id))를 처리하고, 피거(picker)를 처음 동작 시 발생되는 이벤트(예 : ev_scrollstart)를 처리하고, 피커(picker)가 동작이 완료 되었을 때 발생하는 이벤트(예 : ev_scrollstop)에 대한 처리를 수행한다.
도 18a 내지 도 18e는 베이직 위젯에 포함된 dvcProgress 위젯의 특성을 설명하기 위한 예시도이다.
상기 dvcProgress 위젯은 진행상태를 화면상에 출력시켜주는 위젯이다. 예를 들어 상기 dvcProgress 위젯의 HTML 엘리먼트는 <div data-role="dvcProgress" subid="prg" style="left:30px; top:80px; height:19px; width:300px;"> </div> 와 같은 형식으로 기재할 수 있으며, 기본 스타일 클래스는 도18a와 같은 형식으로 기재할 수 있다.
상기 dvcProgress 위젯은 도 18b에 도시된 바와 같이 다양한 옵션들을 포함하고 있으며, 도 18c에 도시된 바와 같은 메소드(method)들로 구성되며, 도18d에 도시된 바와 같은 CSS(cascading style sheets) 항목들을 포함한다. 그리고 상기 dvcProgress 위젯은 도 18e에 도시된 바와 같이 프로그래스(progress) 클릭 시 발생되는 이벤트(예 : ev_change(id, value))에 대한 처리를 수행한다.
도 19a 내지 도 19e는 베이직 위젯에 포함된 dvcRadioButton 위젯의 특성을 설명하기 위한 예시도이다.
상기 dvcRadioButton 위젯은 동시에 여러 버튼을 그룹화하여 원하는 버튼만 선택할 수 있는 위젯이다. 상기 dvcRadioButton 위젯은 크기를 고정하여 사용하고 싶을 경우에는 min-width를 설정한다. 이때 상기 버튼의 폭(width) 설정 시 폭(width)이 아닌 max-width를 사용해야 한다. 만약 max-width를 설정하지 않으면 텍스트의 폭(width)이 버튼의 폭(width)을 초과할 경우 생략표시(...)가 표시되지 않는다. 예를 들어 상기 dvcRadioButton 위젯의 HTML 엘리먼트는 <div data-role="dvcRadioButton" subid="rdobtn" style="left:10px; top:80px; width:30px; height:30px;"> </div> 와 같은 형식으로 기재할 수 있으며, 기본 스타일 클래스는 도 19a와 같은 형식으로 기재할 수 있다.
상기 dvcRadioButton 위젯은 도 19b에 도시된 바와 같이 다양한 옵션들을 포함하고 있으며, 도 19c에 도시된 바와 같은 메소드(method)들로 구성되며, 도 19d에 도시된 바와 같은 CSS(cascading style sheets) 항목들을 포함한다. 그리고 상기 dvcRadioButton 위젯은 도 19e에 도시된 바와 같이 체크박스(checkbox) 클릭 시 발생되는 이벤트(예 : ev_change(id, value))에 대한 처리를 수행한다.
도 20a 내지 도 20e는 베이직 위젯에 포함된 dvcSlider 위젯의 특성을 설명하기 위한 예시도이다.
상기 dvcSlider 위젯은 일정 범위 내에서 사용자가 움직이면서 값을 선택하는 위젯이다. 예를 들어 상기 dvcSlider 위젯의 HTML 엘리먼트는 <div data-role="dvcSlider" subid="slider" style="left:10px; top:10px; width:200px; height:250px;"> </div> 와 같은 형식으로 기재할 수 있으며, 기본 스타일 클래스는 도 20a와 같은 형식으로 기재할 수 있다.
상기 dvcSlider 위젯은 도 20b에 도시된 바와 같이 다양한 옵션들을 포함하고 있으며, 도 20c에 도시된 바와 같은 메소드(method)들로 구성되며, 도 20d에 도시된 바와 같은 CSS(cascading style sheets) 항목들을 포함한다. 그리고 상기 dvcSlider 위젯은 도 20e에 도시된 바와 같이 슬라이더(slider) 클릭 시 이벤트를 발생시키는 'ev_click(id)', 슬라이더 이동시 이벤트를 발생시키는 'ev_change(id, value)'를 포함한다.
도 21a 내지 도 21e는 베이직 위젯에 포함된 dvcSwitch 위젯의 특성을 설명하기 위한 예시도이다.
상기 dvcSwitch 위젯은 상태를 사용자가 변경하고자 할 경우 값을 선택하는 위젯이다. 예를 들어 상기 dvcSwitch 위젯의 HTML 엘리먼트는 <div data-role="dvcSwitch" subid="switch" style="left:100px; top:100px; width:100px; height:30px;"> </div> 와 같은 형식으로 기재할 수 있으며, 기본 스타일 클래스는 도 21a와 같은 형식으로 기재할 수 있다.
상기 dvcSwitch 위젯은 도 21b에 도시된 바와 같이 다양한 옵션들을 포함하고 있으며, 도 21c에 도시된 바와 같은 메소드(method)들로 구성되며, 도 21d에 도시된 바와 같은 CSS(cascading style sheets) 항목들을 포함한다. 그리고 상기 dvcSwitch 위젯은 도 21e에 도시된 바와 같이 스위치 상태 변경 시 이벤트를 발생시키는 'ev_change(id, value)'를 포함한다.
도 22a 내지 도 22e는 베이직 위젯에 포함된 dvcTextarea 위젯의 특성을 설명하기 위한 예시도이다.
상기 dvcTextarea 위젯은 사용자가 여러 문자열을 직접 입력할 수 있는 위젯이며, 뷰 위젯 중 리스트뷰(Listview)에는 포함 불가이다. 예를 들어 상기 dvcTextarea 위젯의 HTML 엘리먼트는 <div data-role="dvcTextarea" subid="textarea" style="left:10px; top:40px; right:10px; height:100px;"> </div> 와 같은 형식으로 기재할 수 있으며, 기본 스타일 클래스는 도 22a와 같은 형식으로 기재할 수 있다.
상기 dvcTextarea 위젯은 도 22b에 도시된 바와 같이 다양한 옵션들을 포함하고 있으며, 도 22c에 도시된 바와 같은 메소드(method)들로 구성되며, 도 22d에 도시된 바와 같은 CSS(cascading style sheets) 항목들을 포함한다. 그리고 상기 dvcTextarea 위젯은 도 22e에 도시된 바와 같이 'ev_change(id, value)'를 이용하여 텍스트에어리어(textarea) 클릭 시 이벤트를 발생시킨다.
도 23a 내지 도 23e는 베이직 위젯에 포함된 dvcTextfield 위젯의 특성을 설명하기 위한 예시도이다.
상기 dvcTextfield 위젯은 사용자가 문자를 직접 입력할 수 있는 위젯이다. 예를 들어 상기 dvcTextfield 위젯의 HTML 엘리먼트는 <div data-role="dvcTextfield" subid="textfield" style="left:100px; top:50px; right:300px; height:30px;"> </div> 와 같은 형식으로 기재할 수 있으며, 기본 스타일 클래스는 도23a와 같은 형식으로 기재할 수 있다.
상기 dvcTextfield 위젯은 도 23b에 도시된 바와 같이 다양한 옵션들을 포함하고 있으며, 도23c에 도시된 바와 같은 메소드(method)들로 구성되며, 도23d에 도시된 바와 같은 CSS(cascading style sheets) 항목들을 포함한다. 그리고 상기 dvcTextfield 위젯은 도 23e에 도시된 바와 같이 'ev_click(id)'을 이용하여 텍스트필드(textfield) 클릭 시 이벤트를 발생시키고, ‘ev_keyup(id, value, keycode)'를 이용하여 텍스트필드의 키 입력 시 이벤트를 발생시킨다.
도24a 내지 도24b는 베이직 위젯에 포함된 dvcVideo 위젯의 특성을 설명하기 위한 예시도이다.
상기 dvcVideo 위젯은 비디오(Video) 파일을 재생할 수 있는 위젯이다. 예를 들어 상기 dvcVideo 위젯의 HTML 엘리먼트는 <div data-role="dvcVideo" id="Video01"> </div> 와 같은 형식으로 기재할 수 있다.
상기 dvcVideo 위젯은 도 24a에 도시된 바와 같이 다양한 옵션들을 포함하고 있으며, 도24b에 도시된 바와 같은 메소드(method)들로 구성된다.
도25a 내지 도25d는 뷰 위젯에 포함된 dvcCollapseview 위젯의 특성을 설명하기 위한 예시도이다.
상기 dvcCollapseview 위젯은 화면에 접거나 펼칠 수(expand-collapse) 있는 뷰를 보여주기 위한 위젯이다.
예를 들어 상기 dvcCollapseview 위젯의 HTML 엘리먼트는 <div data-role="dvcCollapseview" id="collapse" style="position:relative;"> </div> 와 같은 형식으로 기재할 수 있으며, 기본 스타일 클래스는 도 25a와 같은 형식으로 기재할 수 있다.
상기 dvcCollapseview 위젯은 도 25b에 도시된 바와 같이 다양한 옵션들을 포함하고 있으며, 도 25c에 도시된 바와 같은 메소드(method)들로 구성되며, 도 25d에 도시된 바와 같은 CSS(cascading style sheets) 항목들을 포함한다.
도 26a 내지 도 26c는 뷰 위젯에 포함된 dvcContent 위젯의 특성을 설명하기 위한 예시도이다.
상기 dvcContent 위젯은 헤더와 풋터를 제외하고 모든 위젯을 배치할 수 있는 위젯이다. 예를 들어 상기 dvcContent 위젯의 HTML 엘리먼트는 <div data-role="dvcContent"> </div> 와 같은 형식으로 기재할 수 있으며, 기본 스타일 클래스는 도 26a와 같은 형식으로 기재할 수 있다.
상기 dvcContent 위젯은 도 26b에 도시된 바와 같이 다양한 옵션들을 포함하고 있으며, 도 26c에 도시된 바와 같은 CSS(cascading style sheets) 항목들을 포함한다.
도 27a 내지 도 27d는 뷰 위젯에 포함된 dvcDivision 위젯의 특성을 설명하기 위한 예시도이다.
상기 dvcDivision 위젯은 사용자가 원하는 플러그인이나 3rd 파트(part)의 내용을 추가하고자 할 때 사용하는 위젯이다. 예를 들어 상기 dvcDivision 위젯의 HTML 엘리먼트는 <div data-role="dvcDivision"> </div> 와 같은 형식으로 기재할 수 있으며, 기본 스타일 클래스는 도 27a와 같은 형식으로 기재할 수 있다.
상기 dvcDivision 위젯은 도 27b에 도시된 바와 같이 다양한 옵션들을 포함하고 있으며, 도 27c에 도시된 바와 같은 CSS(cascading style sheets) 항목들을 포함한다. 그리고 상기 dvcDivision 위젯은 도 27d에 도시된 바와 같이 'ev_dvcdivisioninit(e, id)'을 이용하여 디비전(Division)이 생성될 때 초기화를 위해 이벤트를 발생시키고 처리한다.
도 28a 내지 도 28d는 뷰 위젯에 포함된 dvcFooter 위젯의 특성을 설명하기 위한 예시도이다.
상기 dvcFooter 위젯은 UI를 구성할 때 화면의 가장 하단에 배치하는 바(bar) 형식의 위젯이다. 예를 들어 상기 dvcFooter 위젯의 HTML 엘리먼트는 <div data-role="dvcFooter" id="footer"> </div> 와 같은 형식으로 기재할 수 있으며, 기본 스타일 클래스는 도 28a와 같은 형식으로 기재할 수 있다.
상기 dvcFooter 위젯은 도 28b에 도시된 바와 같이 다양한 옵션들을 포함하고 있으며, 도 28c에 도시된 바와 같은 CSS(cascading style sheets) 항목을 포함하고, 도 28d에 도시된 바와 같이 'ev_onclick(e, id)'을 이용하여 하위 위젯에서 클릭 시 발생된 이벤트를 처리하고, ‘ev_onchange(e, id, value)'을 이용하여 하위 위젯에서 상태 변경 시 발생된 이벤트를 처리하며, ‘ev_keyup(e, id, value, keycode)’를 이용하여 하위 위젯에서 키 입력 시 발생된 이벤트를 처리한다.
도 29a 내지 도 29d는 뷰 위젯에 포함된 dvcHeader 위젯의 특성을 설명하기 위한 예시도이다.
상기 dvcHeader 위젯은 UI를 구성할 때 화면의 가장 상단에 배치하는 바(bar) 형식의 위젯이다. 예를 들어 상기 dvcHeader 위젯의 HTML 엘리먼트는 <div data-role="dvcHeader" id="header"> </div> 와 같은 형식으로 기재할 수 있으며, 기본 스타일 클래스는 도 29a와 같은 형식으로 기재할 수 있다.
상기 dvcHeader 위젯은 도 29b에 도시된 바와 같이 다양한 옵션들을 포함하고 있으며, 도 29c에 도시된 바와 같은 CSS(cascading style sheets) 항목을 포함하고, 도 29d에 도시된 바와 같이 'ev_onclick(e, id)'을 이용하여 하위 위젯에서 클릭 시 발생된 이벤트를 처리하고, ‘ev_onchange(e, id, value)'을 이용하여 하위 위젯에서 상태 변경 시 발생된 이벤트를 처리하며, ‘ev_onkeyup(e, id, value, keycode)’를 이용하여 하위 위젯에서 키 입력 시 발생된 이벤트를 처리한다.
도 30a 내지 도 30d는 뷰 위젯에 포함된 dvcHtmlview 위젯의 특성을 설명하기 위한 예시도이다.
상기 dvcHtmlview 위젯은 HTML 형식의 문서를 화면에 표시하기 위한 위젯이다. 예를 들어 상기 dvcHtmlview 위젯의 HTML 엘리먼트는 <div data-role="dvcHtmlview" id="htmlview" style="position:relative; background-color:white;"> </div> 와 같은 형식으로 기재할 수 있으며, 기본 스타일 클래스는 도 30a와 같은 형식으로 기재할 수 있다.
상기 dvcHtmlview 위젯은 도 30b에 도시된 바와 같이 다양한 옵션들을 포함하고 있으며, 도 30c에 도시된 바와 같은 CSS(cascading style sheets) 항목을 포함하고, 도 30d에 도시된 바와 같은 메소드(method)들로 구성된다.
도31a 내지 도31e는 뷰 위젯에 포함된 dvcLayoutview 위젯의 특성을 설명하기 위한 예시도이다.
상기 dvcLayoutview 위젯은 UI 구성 중 공간에 베이직 위젯을 배치하기 위한 컨테이너 위젯이다. 예를 들어 상기 dvcLayoutview 위젯의 HTML 엘리먼트는 <div data-role="dvcLayoutview" id="layoutview1" style="position:relative; margin-left:10px; margin-right:10px; height:60px"> </div> 와 같은 형식으로 기재할 수 있으며, 기본 스타일 클래스는 도 31a와 같은 형식으로 기재할 수 있다.
상기 dvcLayoutview 위젯은 도 31b에 도시된 바와 같이 다양한 옵션들을 포함하고 있으며, 도 31c에 도시된 바와 같은 메소드(method)들로 구성되고, 도 31d에 도시된 바와 같은 CSS(cascading style sheets) 항목들을 포함한다. 그리고 상기 dvcLayoutview 위젯은 도 31e에 도시된 바와 같이 'ev_onclick(e, id)'을 이용하여 하위 위젯에서 클릭 시 발생된 이벤트를 처리하고,‘ev_onchange(e, id, value)’을 이용하여 하위 위젯에서 상태 변경 시 발생된 이벤트를 처리하며, ‘ev_onkeyup(e, id, value, keycode)’를 이용하여 하위 위젯에서 키 입력 시 발생된 이벤트를 처리한다.
도 32a 내지 도 32e는 뷰 위젯에 포함된 dvcListview 위젯의 특성을 설명하기 위한 예시도이다.
상기 dvcListview 위젯은 사용자에게 하나 이상의 객체를 보이고 하나 혹은 다수 아이템을 선택 가능하게 하는 위젯이며, 리스트뷰(Listview)에서는 아이디(id)와 서브아이디(subid)를 확실히 구분해서 사용한다. 예를 들어 상기 dvcListview 위젯의 HTML 엘리먼트는 <div data-role="dvcListview" id="listview" style="position:relative; margin-left:10px; margin-right:10px; height:60px"> </div> 와 같은 형식으로 기재할 수 있으며, 기본 스타일 클래스는 도 32a와 같은 형식으로 기재할 수 있다.
상기 dvcListview 위젯은 도 32b에 도시된 바와 같이 다양한 옵션들을 포함하고 있으며, 도32c에 도시된 바와 같은 메소드(method)들로 구성되고, 도 32d에 도시된 바와 같은 CSS(cascading style sheets) 항목들을 포함한다. 그리고 상기 dvcListview 위젯은 도 32e에 도시된 바와 같이 'ev_onclick(e, id, lineIndex)'을 이용하여 하위 위젯에서 클릭 시 발생된 이벤트를 처리하고,‘ev_onchange(e, id, value, lineIndex)’을 이용하여 하위 위젯에서 상태 변경 시 발생된 이벤트를 처리하며, 'ev_onswipeleft(e, id, lineIndex)를 이용하여 리스트뷰(listview)의 한 라인을 왼쪽으로 스와이프(swipe) 시 발생된 이벤트를 처리하고, 'ev_onswiperight(e, id, lineIndex)를 이용하여 리스트뷰(listview)의 한 라인을 오른쪽으로 스와이프(swipe) 시 발생된 이벤트를 처리하고,‘ev_onkeyup(e, id, value, keycode)’를 이용하여 하위 위젯에서 키 입력 시 발생된 이벤트를 처리한다.
도 33a 내지 도 33d는 뷰 위젯에 포함된 dvcScrollview 위젯의 특성을 설명하기 위한 예시도이다.
상기 dvcScrollview 위젯은 제이쿼리 모바일의 익스페리먼트(Experiments)에 포함된 ‘jquery.mobile.scrollview’를 상속 받아 구현하고, 화면의 크기를 벗어난 뷰를 보여주기 위한 위젯이다.
예를 들어 상기 dvcScrollview 위젯의 HTML 엘리먼트는 <div data-role="dvcScrollview" id="scollview" style="position:absolute; left:0; right:0; top:60px; bottom:60px;"> </div> 와 같은 형식으로 기재할 수 있으며, 기본 스타일 클래스는 도 33a와 같은 형식으로 기재할 수 있다.
상기 dvcScrollview 위젯은 도 33b에 도시된 바와 같이 다양한 옵션들을 포함하고 있으며, 도 33c에 도시된 바와 같은 메소드(method)들로 구성되고, 도 33d에 도시된 바와 같은 CSS(cascading style sheets) 항목들을 포함한다.
도 34a 내지 도 34e는 뷰 위젯에 포함된 dvcTreeview 위젯의 특성을 설명하기 위한 예시도이다.
상기 dvcTreeview 위젯은 HTML로만 구성된 페이지를 직접 보여주는 위젯이다. 예를 들어 상기 dvcTreeview 위젯의 HTML 엘리먼트는 <div data-role="dvcTreeview" id="treeview" style="background-color:white; margin-left:10px; margin-right:20px;"> </div> 와 같은 형식으로 기재할 수 있으며, 기본 스타일 클래스는 도 34a와 같은 형식으로 기재할 수 있다.
상기 dvcTreeview 위젯은 도34b에 도시된 바와 같이 다양한 옵션들을 포함하고 있으며, 도34c에 도시된 바와 같은 메소드(method)들로 구성되고, 도 34d에 도시된 바와 같은 CSS(cascading style sheets) 항목들을 포함한다.
그리고 상기 dvcTreeview 위젯은 도 34e에 도시된 바와 같이 'ev_onclick(e, id)'을 이용하여 트리뷰에서 텍스트 클릭 시 발생된 이벤트를 처리하고, ‘ev_onchange(e, id, value)’을 이용하여 트리뷰에서 체크박스의 상태 변경 시 발생된 이벤트를 처리하며, ‘ev_onecclick(e, id, ecData, ecPath)’를 이용하여 트리뷰에서 익스팬드(expand)의 값이 변경될 때 발생된 이벤트를 처리한다.
도 35a 내지 도 35e는 페이지 컨테이너 위젯에 포함된 dvcCarousel 위젯의 특성을 설명하기 위한 예시도이다.
상기 dvcCarousel 위젯은 현재 화면에서 앱처럼 화면 이동 가능한 위젯이다. 예를 들어 상기 dvcCarousel 위젯의 HTML 엘리먼트는 <div data-role="dvcCarousel" id="carousel" style="position:relative; height:420px;"> </div> 와 같은 형식으로 기재할 수 있으며, 기본 스타일 클래스는 도 35a와 같은 형식으로 기재할 수 있다.
상기 dvcCarousel 위젯은 도 35b에 도시된 바와 같이 다양한 옵션들을 포함하고 있으며, 도 35c에 도시된 바와 같은 메소드(method)들로 구성되고, 도 35d에 도시된 바와 같은 CSS(cascading style sheets) 항목들을 포함한다. 그리고 상기 dvcCarousel 위젯은 도 35e에 도시된 바와 같이 ‘ev_onchange(e, id, $page, nowPage)’을 이용하여 캐러셀(carousel)에서 페이지 이동 시 발생된 이벤트를 처리한다.
도 36a 내지 도 36d는 페이지 컨테이너 위젯에 포함된 dvcCarouselIndicator 위젯의 특성을 설명하기 위한 예시도이다.
상기 dvcCarouselIndicator 위젯은 캐러셀(Carousel)에 포함된 페이지의 총 개수와 현재 선택된 페이지를 표시하기 위한 위젯이다.
예를 들어 상기 dvcCarouselIndicator 위젯의 HTML 엘리먼트는 <div data-role="dvcCarouselIndicator" id="indicator" style="position:relative; height:40px;"> </div> 와 같은 형식으로 기재할 수 있으며, 기본 스타일 클래스는 도 36a와 같은 형식으로 기재할 수 있다.
상기 dvcCarouselIndicator 위젯은 도 36b에 도시된 바와 같이 다양한 옵션들을 포함하고 있으며, 도 36c에 도시된 바와 같은 메소드(method)들로 구성되고, 도 36d에 도시된 바와 같은 CSS(cascading style sheets) 항목을 포함한다.
도 37a 내지 도 37d는 페이지 컨테이너 위젯에 포함된 dvcPagebox 위젯의 특성을 설명하기 위한 예시도이다.
상기 dvcPagebox 위젯은 현재 페이지에 다른 페이지를 보여줄 수 있는 위젯이다. 예를 들어 상기 dvcPagebox 위젯의 HTML 엘리먼트는 <div data-role="dvcPagebox" id="pagebox" style="left:0px; right:0px; top:0px; bottom:82px; background-color:#eee;"> </div> 와 같은 형식으로 기재할 수 있으며, 기본 스타일 클래스는 도 37a와 같은 형식으로 기재할 수 있다.
상기 dvcPagebox 위젯은 도 37b에 도시된 바와 같이 다양한 옵션들을 포함하고 있으며, 도 37c에 도시된 바와 같은 메소드(method)들로 구성되고, 도 37d에 도시된 바와 같은 CSS(cascading style sheets) 항목을 포함한다.
도 38a 내지 도 38d는 페이지 컨테이너 위젯에 포함된 dvcPopup 위젯의 특성을 설명하기 위한 예시도이다.
상기 dvcPopup 위젯은 새로운 창에 페이지를 표시하기 위한 위젯이다. 예를 들어 상기 dvcPopup 위젯의 HTML 엘리먼트는 <div data-role="page" id="mainPage" data-page-type="main" </div> 와 같은 형식으로 기재할 수 있으며, 기본 스타일 클래스는 도 38a와 같은 형식으로 기재할 수 있다.
상기 dvcPopup 위젯은 도 38b에 도시된 바와 같이 다양한 옵션들을 포함하고 있으며, 도38c에 도시된 바와 같은 메소드(method)들로 구성되고, 도38d에 도시된 바와 같은 CSS(cascading style sheets) 항목을 포함한다.
도39a 내지 도39f는 본 발명의 일 실시예에 따른 UI 프레임워크의 API를 설명하기 위한 예시도이다.
이에 도시된 바와 같이 API는 UI 프레임워크를 사용할 때 필요한 API로서, 위젯을 사용할 때 필요한 명령어를 제공하며,“$.davinci.(api명)”의 형식으로 사용 가능하다. 참고로, 상기 API(Application Programming Interface)는 운영체제가 응용프로그램을 위해 제공하는 함수의 집합으로서 응용프로그램과 디바이스를 연결해주는 역할을 한다.
이상으로 본 발명은 도면에 도시된 실시예를 참고로 하여 설명되었으나, 이는 예시적인 것에 불과하며, 당해 기술이 속하는 분야에서 통상의 지식을 가진 자라면 이로부터 다양한 변형 및 균등한 타 실시예가 가능하다는 점을 이해할 것이다. 따라서 본 발명의 기술적 보호범위는 아래의 특허청구범위에 의해서 정하여져야 할 것이다.
100 : 저작도구 200 : 스튜디오
210 : 프로젝터 매니저 220 : 코드 에디터
230 : 에뮬레이터 240 : 디버거
250 : 프로파일러 260 : 빌드
270 : 패키저 300 : 런타임 플랫폼
400 : UI 프레임워크 500 : 빌드 서버
600 : 에코 시스템 400 : UI 프레임워크
410 : 제이쿼리 420 : 제이쿼리 모바일
430 : 위젯 431 : 베이직 위젯
432 : 뷰 위젯 433 : 페이지 컨테이너 위젯
440 : 유틸리티 450 : 디바이스 API
711 : 헤더 712 : 풋터

Claims (17)

  1. 사용자 인터페이스(UI) 레이아웃, 애니메이션 또는 적어도 하나 이상의 효과를 포함하여 웹 어플리케이션의 페이지 디자인을 수행할 수 있는 저작도구와 상기 저작도구와의 심리스한 인터워킹을 통해서 웹 어플리케이션을 개발할 수 있는 스튜디오를 포함하여 구성된 통합 플랫폼의 사용자 인터페이스 프레임워크 제공 장치에 있어서,
    상기 웹 어플리케이션에서 독립적으로 수행되는 위젯;
    상기 웹 어플리케이션과 디바이스를 연결해주는 API(Application Program Interface) 세트로 이루어진 유틸리티; 및
    모바일 웹에서 단말의 다양한 자원들에 접근할 수 있도록 하는 디바이스 API;를 포함하여 구성된 것을 특징으로 하는 사용자 인터페이스 프레임워크 제공 장치.
  2. 청구항 1에 있어서,
    상기 위젯은,
    자바스크립트를 보다 간결한 상태로 만들기 위한 제이쿼리 및 모바일에 맞게 각종 UI 컨트롤, 이벤트 처리, 애니메이션 효과, 자동 네비게이션 및 에이젝스 통신을 수행하는 제이쿼리 모바일을 기반으로 구성되는 것을 특징으로 하는 사용자 인터페이스 프레임워크 제공 장치.
  3. 청구항 2에 있어서,
    상기 제이쿼리는,
    셀렉터 메소드, DOM(Document Object Model) 메소드 및 이벤트 메소드를 포함하는 것을 특징으로 하는 사용자 인터페이스 프레임워크 제공 장치.
  4. 청구항 2에 있어서,
    상기 제이쿼리 모바일은,
    기기지원과 브라우저 호환이 가능하게 하고, 코드 사이즈를 최소화하며, 적어도 하나 이상의 주요 모바일 플랫폼에서 호환이 가능하게 하는 것을 특징으로 하는 사용자 인터페이스 프레임워크 제공 장치.
  5. 청구항 1에 있어서,
    상기 위젯은,
    버튼(Button), 체크박스(Checkbox) 및 라디오버튼(RadioButton)을 포함하여 적어도 30개 이상의 기본 위젯을 포함하는 것을 특징으로 하는 사용자 인터페이스 프레임워크 제공 장치.
  6. 청구항 1에 있어서,
    상기 위젯은,
    각 위젯별 기능을 위한 메소드 및 위젯별 이벤트를 제공하고, 제이쿼리 모바일을 확장하여 컴포넌트를 설계할 수 있도록 하는 것을 특징으로 하는 사용자 인터페이스 프레임워크 제공 장치.
  7. 청구항 1에 있어서,
    상기 위젯은,
    베이직 위젯, 뷰 위젯 및 페이지 컨테이너 위젯을 포함하여 구성된 것을 특징으로 하는 사용자 인터페이스 프레임워크 제공 장치.
  8. 청구항 7에 있어서,
    상기 위젯은,
    각각 아이디나 서브아이디로 구분하며, 아이디는 모든 위젯에서 사용하고, 서브아이디는 베이직 위젯에서만 사용하는 것을 특징으로 하는 사용자 인터페이스 프레임워크 제공 장치.
  9. 청구항 7에 있어서,
    상기 베이직 위젯은,
    뷰 위젯에 포함되어 사용하고, 베이직 위젯에서 그리드 위젯은 베이직 위젯을 다시 포함할 수 있는 것을 특징으로 하는 사용자 인터페이스 프레임워크 제공 장치.
  10. 청구항 7에 있어서,
    상기 뷰 위젯은,
    베이직 위젯을 포함할 수 있는 것과 포함할 수 없는 것을 구분하여 사용하는 것을 특징으로 하는 사용자 인터페이스 프레임워크 제공 장치.
  11. 청구항 7에 있어서,
    상기 페이지 컨테이너 위젯은,
    페이지만을 포함하여 구성하는 것을 특징으로 하는 사용자 인터페이스 프레임워크 제공 장치.
  12. 청구항 11에 있어서,
    상기 페이지에서 콘텐츠 위젯, 헤더 위젯 및 풋터 위젯은,
    독립적으로 사용하며, 상기 콘텐츠 위젯은 뷰 위젯과 페이지 컨테이너 위젯을 포함하여 사용하고, 상기 헤더 위젯과 풋터 위젯은 뷰 위젯과 베이직 위젯을 포함하여 사용하는 것을 특징으로 하는 사용자 인터페이스 프레임워크 제공 장치.
  13. 청구항 1에 있어서,
    상기 사용자 인터페이스 프레임워크 제공 장치는,
    실제 디바이스에서 동작하기 위해 필요한 디바이스 라이브러리를 포함하는 폴더;
    사용자 인터페이스 프레임워크 라이브러리를 포함하는 폴더;
    상기 사용자 인터페이스 프레임워크 라이브러리에서 사용 중인 이미지를 포함하는 폴더;
    상기 위젯에서 사용중인 CSS 및 위젯과 유틸리티에 관한 기능, 효과와 속성과 같은 내용에 관련된 라이브러리를 포함하는 폴더;를 포함하여 구성된 것을 특징으로 하는 사용자 인터페이스 프레임워크 제공 장치.
  14. 사용자 인터페이스 프레임워크 제공 장치를 이용하여 페이지를 구성하는 방법에 있어서,
    상기 페이지는,
    페이지 상단에서 페이지의 시작에 관련된 정보들을 포함하는 헤더;
    페이지 하단에서 페이지의 종료에 관련된 정보들을 포함하는 풋터; 및
    상기 헤더와 풋터 사이에서 실제로 제공할 콘텐츠를 포함하는 바디;로 구성되며,
    상기 콘텐츠는 적어도 하나 이상의 위젯을 포함할 수 있으며, 그 위젯의 내부에 또 다른 위젯이나 페이지를 포함할 수 있는 것을 특징으로 하는 사용자 인터페이스 프레임워크 제공 장치를 이용한 페이지 구성방법.
  15. 청구항 14에 있어서,
    상기 페이지의 구성을 위한 사용자 인터페이스 프레임워크 제공 장치는,
    HTML의 기본 구조에 따른 태그들을 이용하여 구성할 수 있는 것을 특징으로 하는 사용자 인터페이스 프레임워크 제공 장치를 이용한 페이지 구성방법.
  16. 청구항 14에 있어서,
    상기 헤더에는 페이지의 크기 및 타이틀, 사용할 CSS 및 자바스크립트(JS)를 정의하는 것을 특징으로 하는 사용자 인터페이스 프레임워크 제공 장치를 이용한 페이지 구성방법.
  17. 청구항 14에 있어서,
    상기 바디에 들어가는 페이지나 콘텐츠 및 페이지 이벤트는 제이쿼리 모바일에 정의된 구조를 따르는 것을 특징으로 하는 사용자 인터페이스 프레임워크 제공 장치를 이용한 페이지 구성방법.
KR1020120085992A 2012-08-06 2012-08-06 웹 어플리케이션 개발을 위한 사용자 인터페이스 프레임워크 Active KR101456505B1 (ko)

Priority Applications (1)

Application Number Priority Date Filing Date Title
KR1020120085992A KR101456505B1 (ko) 2012-08-06 2012-08-06 웹 어플리케이션 개발을 위한 사용자 인터페이스 프레임워크

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
KR1020120085992A KR101456505B1 (ko) 2012-08-06 2012-08-06 웹 어플리케이션 개발을 위한 사용자 인터페이스 프레임워크

Publications (2)

Publication Number Publication Date
KR20140019626A KR20140019626A (ko) 2014-02-17
KR101456505B1 true KR101456505B1 (ko) 2014-10-31

Family

ID=50267031

Family Applications (1)

Application Number Title Priority Date Filing Date
KR1020120085992A Active KR101456505B1 (ko) 2012-08-06 2012-08-06 웹 어플리케이션 개발을 위한 사용자 인터페이스 프레임워크

Country Status (1)

Country Link
KR (1) KR101456505B1 (ko)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR20200114025A (ko) * 2019-03-27 2020-10-07 주식회사 티맥스 소프트 데이터 변환 서버 및 컴퓨터 프로그램

Families Citing this family (9)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR101616914B1 (ko) 2014-10-06 2016-04-29 전자부품연구원 사용자 맞춤형 콘텐츠 적응 객체 구성 방법, 이를 수행하는 사용자 맞춤형 콘텐츠 적응 객체 구성 서버 및 이를 저장하는 기록매체
KR101646138B1 (ko) 2014-11-20 2016-08-12 전자부품연구원 레이아웃 결정 방법, 이를 수행하는 레이아웃 결정 서버 및 이를 저장하는 기록매체
CN107153528A (zh) 2016-03-02 2017-09-12 阿里巴巴集团控股有限公司 混合模型列表项重用的方法及设备
KR20170110935A (ko) * 2016-03-24 2017-10-12 전자부품연구원 모바일 디바이스에서의 프레임워크
CN107340997A (zh) * 2016-05-03 2017-11-10 广州红线冻品信息科技有限公司 一种用于冻品行业电子商务平台的移动端web界面自适应方法
KR101885067B1 (ko) * 2017-09-12 2018-09-10 주식회사 명리 콘텐츠 분할 및 예약어를 이용한 홈페이지 콘텐츠 편집 서비스 제공 방법
CN108733377B (zh) * 2018-05-14 2020-03-10 蜂助手股份有限公司 一种App中网页端与手机端的JS交互方法
CN112230986B (zh) * 2020-10-28 2025-02-07 北京五八信息技术有限公司 项目文件生成方法、装置、电子设备和计算机可读介质
CN112926003A (zh) * 2021-03-11 2021-06-08 中国软件与技术服务股份有限公司 一种基于魔方模型三维动态数据展示的方法

Citations (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR20110054995A (ko) * 2009-11-19 2011-05-25 주식회사 엘지유플러스 웹 애플리케이션 플랫폼 및 웹 애플리케이션을 실행하는 모바일 단말
KR20120056472A (ko) * 2010-11-25 2012-06-04 주식회사 케이티 모바일 웹 어플리케이션 프레임워크

Patent Citations (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR20110054995A (ko) * 2009-11-19 2011-05-25 주식회사 엘지유플러스 웹 애플리케이션 플랫폼 및 웹 애플리케이션을 실행하는 모바일 단말
KR20120056472A (ko) * 2010-11-25 2012-06-04 주식회사 케이티 모바일 웹 어플리케이션 프레임워크

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR20200114025A (ko) * 2019-03-27 2020-10-07 주식회사 티맥스 소프트 데이터 변환 서버 및 컴퓨터 프로그램
KR102293178B1 (ko) * 2019-03-27 2021-08-25 주식회사 티맥스 소프트 데이터 변환 서버 및 컴퓨터 프로그램

Also Published As

Publication number Publication date
KR20140019626A (ko) 2014-02-17

Similar Documents

Publication Publication Date Title
KR101456505B1 (ko) 웹 어플리케이션 개발을 위한 사용자 인터페이스 프레임워크
KR101456506B1 (ko) 웹 어플리케이션 저작도구 및 저작 방법
KR101416089B1 (ko) 웹 어플리케이션 저작을 위한 통합 플랫폼 및 그 저작 방법
JP5089684B2 (ja) サービス・プログラムを生成する技術
JP2016224923A (ja) ユーザフォームインタフェースの自動生成の方法およびシステム
US20090172516A1 (en) Providing Enhanced Information When a Pointing Device Points to a Specific Area In a Graphical User Interface
KR101416104B1 (ko) 하이브리드 웹 어플리케이션의 네이티브 기능을 수행하는 자바스크립트 코드의 동적 로딩 장치와 방법
CN112352214A (zh) 显示控制装置、显示控制方法和显示控制程序
Freeman Pro react 16
US12124671B1 (en) Method for providing visual scripts on a one- source multi-use support platform and computer-readable medium for performing the same
Moore Mastering GUI programming with Python: Develop impressive cross-platform GUI applications with Pyqt
US20240053996A1 (en) Bridging ui elements across multiple operating systems
Yuen Mastering Windows Presentation Foundation: Build responsive UIs for desktop applications with WPF
Meier Python GUI Programming Cookbook
KR101456507B1 (ko) Ｎ-스크린 적용을 위한 웹 어플리케이션 ｕｉ 저작 장치 및 그 저작 방법
de Paz Tkinter GUI Application Development Cookbook: A practical solution to your GUI development problems with Python and Tkinter
Stephens Start Here! Fundamentals of Microsoft. NET Programming
Yosifovich Windows Presentation Foundation 4.5 Cookbook
JPWO2006129621A1 (ja) パソコンのデスクトップ上にユーザーインタフェースを表示するための方法及びプログラム
KR102743354B1 (ko) 사용자 인터페이스 플랫폼 개발 시스템에서의 확장형 컴포넌트 생성 방법 및 이를 수행하는 프로그램
Yuen Mastering Windows Presentation Foundation
Moemeka et al. Real World Windows 10 Development
Barney Developing hybrid applications for the iPhone: using HTML, CSS, and JavaScript to build dynamic apps for the iPhone
Precord WxPython application development cookbook
Paramonov et al. Preprocessor based approach for cross-platform development with Qt quick components

Legal Events

Date Code Title Description
A201 Request for examination
PA0109 Patent application

Patent event code: PA01091R01D

Comment text: Patent Application

Patent event date: 20120806

PA0201 Request for examination
E902 Notification of reason for refusal
PE0902 Notice of grounds for rejection

Comment text: Notification of reason for refusal

Patent event date: 20131129

Patent event code: PE09021S01D

AMND Amendment
PG1501 Laying open of application
E601 Decision to refuse application
PE0601 Decision on rejection of patent

Patent event date: 20140530

Comment text: Decision to Refuse Application

Patent event code: PE06012S01D

Patent event date: 20131129

Comment text: Notification of reason for refusal

Patent event code: PE06011S01I

AMND Amendment
PX0901 Re-examination

Patent event code: PX09011S01I

Patent event date: 20140530

Comment text: Decision to Refuse Application

Patent event code: PX09012R01I

Patent event date: 20140116

Comment text: Amendment to Specification, etc.

PX0701 Decision of registration after re-examination

Patent event date: 20140627

Comment text: Decision to Grant Registration

Patent event code: PX07013S01D

Patent event date: 20140610

Comment text: Amendment to Specification, etc.

Patent event code: PX07012R01I

Patent event date: 20140530

Comment text: Decision to Refuse Application

Patent event code: PX07011S01I

Patent event date: 20140116

Comment text: Amendment to Specification, etc.

Patent event code: PX07012R01I

X701 Decision to grant (after re-examination)
GRNT Written decision to grant
PR0701 Registration of establishment

Comment text: Registration of Establishment

Patent event date: 20141024

Patent event code: PR07011E01D

PR1002 Payment of registration fee

Payment date: 20141024

End annual number: 3

Start annual number: 1

PG1601 Publication of registration
FPAY Annual fee payment

Payment date: 20170904

Year of fee payment: 4

PR1001 Payment of annual fee

Payment date: 20170904

Start annual number: 4

End annual number: 4

FPAY Annual fee payment

Payment date: 20180927

Year of fee payment: 5

PR1001 Payment of annual fee

Payment date: 20180927

Start annual number: 5

End annual number: 5

FPAY Annual fee payment

Payment date: 20191024

Year of fee payment: 6

PR1001 Payment of annual fee

Payment date: 20191024

Start annual number: 6

End annual number: 6