KR101456508B1 - 웹 어플리케이션 저작에서 데이터 바인딩 방법 및 이를 이용한 저작도구 - Google Patents

웹 어플리케이션 저작에서 데이터 바인딩 방법 및 이를 이용한 저작도구 Download PDF

Info

Publication number
KR101456508B1
KR101456508B1 KR1020120137601A KR20120137601A KR101456508B1 KR 101456508 B1 KR101456508 B1 KR 101456508B1 KR 1020120137601 A KR1020120137601 A KR 1020120137601A KR 20120137601 A KR20120137601 A KR 20120137601A KR 101456508 B1 KR101456508 B1 KR 101456508B1
Authority
KR
South Korea
Prior art keywords
component
data
data source
binding
page
Prior art date
Application number
KR1020120137601A
Other languages
English (en)
Other versions
KR20140069834A (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 KR1020120137601A priority Critical patent/KR101456508B1/ko
Publication of KR20140069834A publication Critical patent/KR20140069834A/ko
Application granted granted Critical
Publication of KR101456508B1 publication Critical patent/KR101456508B1/ko

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • 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]
    • 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
    • G06F3/0486—Drag-and-drop
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/12—Use of codes for handling textual entities
    • G06F40/14—Tree-structured documents
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/40—Transformation of program code
    • G06F8/54—Link editing before load time
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/451—Execution arrangements for user interfaces

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Software Systems (AREA)
  • Human Computer Interaction (AREA)
  • Computational Linguistics (AREA)
  • General Health & Medical Sciences (AREA)
  • Health & Medical Sciences (AREA)
  • Audiology, Speech & Language Pathology (AREA)
  • Artificial Intelligence (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

본 발명은 웹 어플리케이션 저작도구에서 UI 컴포넌트에 바인딩 할 데이터를 가져올 위치를 바인딩 작업을 위한 데이터 소스 컴포넌트의 프로퍼티에 지정해 줌으로써 한 번의 버튼 입력으로 상기 지정된 위치에서 바인딩 할 데이터 소스를 가져올 수 있도록 하며, 상기 지정된 위치에서 가져온 데이터 소스를 트리 형식으로 알기 쉽게 정렬하여 표시해 줄 수 있도록 하며, 또한 상기 트리 형식으로 표시된 데이터 소스들의 프로퍼티를 선택한 후 원하는 UI 컴포넌트에 드래그&드롭 하는 방식으로 바인딩 작업을 간편하게 수행할 수 있도록 하는 웹 어플리케이션 저작에서 데이터 바인딩 방법 및 이를 이용한 저작도구에 관한 것이다.

Description

웹 어플리케이션 저작에서 데이터 바인딩 방법 및 이를 이용한 저작도구{A DATA BINDING METHOD FOR AUTHORING WEB APPLICATIONS AND THE AUTHORING TOOL BY USING THE SAME}
본 발명은 웹 어플리케이션 저작에서 데이터 바인딩 방법 및 이를 이용한 웹 어플리케이션 저작도구에 관한 것으로서, 더욱 상세하게는 웹 어플리케이션 페이지에 레이아웃된 UI 컴포넌트와 지정된 특정 데이터 소스를 연결 해 주는 데이터 바인딩 작업을 쉽게 수행할 수 있는 웹 어플리케이션 저작에서 데이터 바인딩 방법 및 이를 이용한 저작도구에 관한 것이다.
본 발명에 관련된 데이터 바인딩은 웹 어플리케이션 페이지에 레이아웃 된 UI 컴포넌트와 임의의 데이터 소스를 연결하는 기술이다. 예컨대 상기 데이터 바인딩은 임의의 위치에 저장되어 있는 데이터를 웹 페이지 화면상의 UI 컴포넌트에 연결하여, 그 UI 컴포넌트가 있는 웹 페이지 상에 상기 데이터를 가져와 표시 되도록 하는 것이다.
상기 데이터 바인딩을 이용할 수 있는 작업 유형으로는, 예컨대 설정파일에서 데이터를 읽어오기 위한 프로그램을 제작하거나, GUI 편집기의 이벤트와 저장 매체의 데이터를 연결하는 프로그램을 제작하거나, 비즈니스 데이터를 XML로 변환하거나, XML 형태의 자료에서 데이터를 수집하여 다른 파트에서도 바로 사용할 수 있는 형태로 자료를 배포하는 작업이 있을 수 있다.
그런데 상기와 같은 작업을 종래와 같이 저수준(lower level) API(예 : SAX 또는 DOM)를 사용하여 제작할 경우 시간이 많이 소요되는 문제점이 있다. 따라서 종래에 제시되었던 저수준(lower-level)의 API를 사용하는 대신 상기 데이터 바인딩을 이용할 경우 단 몇 줄의 데이터 바인딩 코딩만으로 이러한 작업을 간단히 수행할 수 있는 장점이 있다.
그러나 상기와 같이 편리한 데이터 바인딩 기능을 적용하여 웹 문서 또는 웹 어플리케이션을 만들기 위해서는 그에 대한 전문적인 지식이 있어야 하며, 종래의 드림위버, 나모 웹에디터, 또는 프론트페이지와 같은 웹 페이지 편집기(또는 웹 페이지 저작도구)들은 데이터 바인딩 기능을 지원하지 않기 때문에 이에 대한 전문적인 지식이 없는 사용자들은 최근의 웹 어플리케이션을 개발하는데 어려움이 있으며, 더구나, 종래의 웹 페이지 편집기를 이용하여 웹 페이지를 개발하기 위해서는 HTML 소스 파일을 직접 코딩한 후, FTP와 같은 파일전송 프로그램을 이용하여 웹 페이지 운영 서버에 업로드 한 다음 테스트와 수정을 반복해야 하는 복잡한 절차를 수행해야 하는 문제점이 있다.
본 발명은 상기와 같은 문제점을 해결하기 위해 창작된 것으로서, UI 컴포넌트와 지정된 특정 데이터 소스를 연결 해 주는 데이터 바인딩 작업을 간편하게 수행할 수 있도록 지원하는 웹 어플리케이션 저작도구 및 그 데이터 바인딩 방법을 제공하는데 목적이 있다.
또한 본 발명은 바인딩 할 데이터를 가져올 위치를 바인딩 작업을 위한 데이터 소스 컴포넌트의 프로퍼티에 지정해 줌으로써 한 번의 버튼 입력으로 상기 지정된 위치에서 바인딩 할 데이터 소스를 가져올 수 있도록 하는 웹 어플리케이션 저작도구 및 그 데이터 바인딩 방법을 제공하는데 목적이 있다.
또한 본 발명은 바인딩 할 데이터 소스를 가져와 그 데이터 소스를 트리 형식으로 정렬하여 알기 쉽게 표시해 줌으로써 원하는 데이터 소스를 선택하여 해당하는 UI 컴포넌트에 쉽게 바인딩 할 수 있도록 하는 웹 어플리케이션 저작도구 및 그 데이터 바인딩 방법을 제공하는데 목적이 있다.
또한 본 발명은 트리 형식으로 표시된 데이터 소스를 UI 컴포넌트에 바인딩 할 때 원하는 데이터 소스를 선택하여 해당 UI 컴포넌트에 드래그&드롭 하는 방식으로 간편하게 바인딩을 수행할 수 있도록 하는 웹 어플리케이션 저작도구 및 그 데이터 바인딩 방법을 제공하는데 목적이 있다.
본 발명의 일 측면에 따른 웹 어플리케이션 저작도구에서 데이터 바인딩 방법은 웹 어플리케이션 저작을 위해 적어도 하나의 프로젝트를 생성하는 제1 단계; 상기 프로젝트의 페이지에 적어도 하나 이상의 UI 컴포넌트를 추가하여 레이아웃을 수행하는 제2 단계; 상기 레이아웃된 페이지의 적어도 하나 이상의 UI 컴포넌트에 대해서 적어도 하나 이상의 데이터 소스 컴포넌트를 생성하는 제3 단계; 상기 페이지의 적어도 하나 이상의 UI 컴포넌트와 적어도 하나 이상의 각 데이터 소스 컴포넌트에 포함된 데이터 소스를 연결하여 데이터 바인딩을 수행하는 제 4 단계; 를 포함하며, 상기 데이터 바인딩은 상기 데이터 소스 컴포넌트의 프로퍼티 수정을 통해서 지정된 데이터 소스의 위치로부터 로딩된 데이터 소스를 상기 UI 컴포넌트와 연결되도록 하여 수행되는 것을 특징으로 하며, 상기 제3 단계는, 상기 데이터 소스 컴포넌트를 상기 페이지의 아무 위치에나 드래그&드롭 하여 추가하며, 상기 제3 단계는, 상기 저작도구의 컴포넌트 브라우저에 구비된 데이터 바인딩 컴포넌트 탭을 클릭할 때 생성되는 데이터 소스 컴포넌트들 중 하나를 선택하여 추가하며, 상기 데이터 소스 컴포넌트의 프로퍼티에 지정할 데이터 소스의 위치는 URL로 지정하고, 상기 데이터 소스 컴포넌트의 프로퍼티에는 상기 지정된 위치에서 로딩 할 데이터 소스의 쿼리 값을 추가로 설정하며, 상기 지정된 위치에서 로딩된 데이터 소스들은 트리 형식으로 표시되고, 상기 데이터 소스들 중 배열 형태로 반복된 값들이 존재하는 데이터 소스들은 그룹으로 표시되며, 청구항 1에 있어서, 상기 데이터 소스와 UI 컴포넌트의 연결은, 상기 데이터 소스를 선택하여 연결할 UI 컴포넌트에 드래그&드롭 하여 수행하는 것을 특징으로 한다.
본 발명의 일 측면에 따른 데이터 바인딩 방법을 위한 웹 어플리케이션 저작도구는 청구항1 내지 청구항 8 중 어느 한 항을 이용하여 구성되는 데이터 바인딩 방법을 위한 웹 어플리케이션 저작도구에 있어서, 상기 저작도구에서 생성되는 페이지에 바인딩 할 적어도 하나 이상의 데이터 소스 컴포넌트를 생성하여 추가할 수 있는 데이터 바인딩 컴포넌트; 상기 데이터 소스 컴포넌트들 및 각 데이터 소스 컴포넌트에서 지정된 위치에서 가져온 데이터 소스들을 표시하는 데이터 바인딩 윈도우; 및 상기 데이터 소스 컴포넌트에 설정된 바인딩에 관련된 옵션 항목들을 확인하거나 수정할 수 있는 데이터 바인딩 프로퍼티 설정 윈도우;를 포함하여 구성되고, 상기 데이터 바인딩 컴포넌트는, 컴포넌트 브라우저에 탭 형태로 포함되며, 상기 데이터 소스 컴포넌트는, 상기 데이터 바인딩 컴포넌트를 클릭한 후 표시되는 적어도 하나 이상의 데이터 소스 컴포넌트들 중 하나를 선택하여 상기 페이지의 아무 위치에나 드래그&드롭 하여 추가하고, 상기 데이터 바인딩 윈도우는, 상기 페이지에 추가된 데이터 소스 컴포넌트의 리스트를 나열하는 제1 영역; 상기 데이터 소스 컴포넌트에 지정된 위치에서 가져온 적어도 하나 이상의 데이터 소스를 트리 형식이나 원형 그대로 보여주는 제2 영역;을 포함하고, 상기 데이터 소스 컴포넌트의 프로퍼티 설정 윈도우는 상기 데이터 소스 컴포넌트에 지정된 위치에서 상기 지정된 데이터 소스를 자동으로 로딩하도록 지시하는 로드(Load) 버튼;을 포함하며, 상기 데이터 바인딩 윈도우에 표시된 데이터 소스들 중 원하는 데이터 소스를 선택하여 상기 페이지 내의 해당 UI 컴포넌트에 드래그&드롭 하여 바인딩 시키는 것을 특징으로 한다.
본 발명은 웹 어플리케이션 저작도구에서 UI 컴포넌트에 바인딩 할 데이터를 가져올 위치를 바인딩 작업을 위한 데이터 소스 컴포넌트의 프로퍼티에 지정해 줌으로써 한 번의 버튼 입력으로 상기 지정된 위치에서 바인딩 할 데이터 소스를 가져올 수 있도록 하며, 상기 지정된 위치에서 가져온 데이터 소스를 트리 형식으로 알기 쉽게 정렬하여 표시해 줄 수 있도록 하며, 또한 상기 트리 형식으로 표시된 데이터 소스들의 프로퍼티를 선택한 후 원하는 UI 컴포넌트에 드래그&드롭 하는 방식으로 바인딩 작업을 간편하게 수행할 수 있도록 하는 효과가 있다.
도 1은 본 발명에 관련된 웹 어플리케이션 저작도구의 화면 구조를 보인 예시도.
도 2는 상기 도 1에 있어서, 컴포넌트 브라우저에 포함된 컴포넌트들을 보인 예시도.
도 3은 본 발명의 일 실시예에 따른 데이터 바인딩 윈도우를 보인 예시도.
도 4는 본 발명의 일 실시예에 따라 컴포넌트 브라우저의 데이터 바인딩 탭을 이용하여 바인딩 소스를 추가하는 방법을 설명하기 위한 예시도.
도 5는 본 발명의 일 실시예에 따라 커스텀 프로퍼티 브라우저에서 바인딩 소스의 옵션 내용을 보인 예시도.
도 6은 본 발명의 일 실시예에 따른 쿼리(Query) 입력 창을 보인 예시도.
도 7에 본 발명의 일 실시예에 따라 데이터 소스들이 추가된 데이터 바인딩 윈도우를 보인 예시도.
도 8은 본 발명의 일 실시예에 따라 데이터 소스를 선택하여 드래그&드롭 방식으로 해당 UI 컴포넌트에 바인딩 하는 방법을 보인 예시도.
도 9는 본 발명의 일 실시예에 따라 데이터 바인딩이 적용된 웹 어플리케이션의 에뮬레이션 결과 화면을 보인 예시도.
도 10은 본 발명의 일 실시예에 따른 저작도구를 이용하여 데이터 바인딩이 적용된 웹 어플리케이션을 저작하는 과정을 설명하기 위한 흐름도.
이하, 본 발명에 따른 웹 어플리케이션 저작도구 및 그 데이터 바인딩 방법의 일 실시예를 설명함에 있어서, 상기 웹 어플리케이션 저작도구는 본 발명의 동일 출원인이 2012년 08월 06일에 출원한 대한미국 특허출원 제10-2012-0085995호에 웹 어플리케이션 저작을 위한 통합 플랫폼의 구성과 그 저작도구의 화면 구조에 대해서 상세히 기재되어 있다. 따라서 이하 본 실시예에서는 본 발명의 기술적 요지에 대한 혼란을 방지하기 위하여 상기 웹 어플리케이션 저작도구의 구성에 대한 구체적인 설명은 생략한다.
도 1은 본 발명에 관련된 웹 어플리케이션 저작도구의 개략적인 화면 구조를 보인 예시도이다. 이에 도시된 바와 같이 상기 저작도구는 뷰포트, 페이지브라우저, 프로젝트 매니저, 커스텀 프로퍼티 브라우저, DOM 트리 브라우저, 컴포넌트 브라우저, 애니메이션 에디터 등의 작업 영역을 포함한다.
여기서 상기 프로젝트 매니저는 통합 개발 환경에서 생성한 프로젝트의 구성요소들을 포함시킨 창으로, HTML파일을 더블 클릭하면 뷰포트에 나타나고, 그 외 image, html파일들을 추가, 삭제 시킬 수 있으며, 마우스 드래그&드롭으로도 추가, 삭제가 가능하다.
그리고 상기 페이지 브라우저(Page Browser)는 UI의 개별 화면인 페이지의 생성 및 추가의 작업을 할 수 있는 페이지 탐색기로서, 한 페이지가 선택되면 저작도구의 뷰포트를 포함한 모든 UI 구성을 갱신해서 보여줌으로써 전체적인 구성 파악에 용이하다.
그리고 상기 뷰포트 에디터는 UI 콘텐츠를 시각적으로 볼 수 있는 작업영역으로서, 상기 페이지 브라우저에서 페이지를 선택한 후 사용자가 드래그&드롭을 통해 컴포넌트 브라우저에서 선택된 컴포넌트를 등록할 수 있으며, 상기 커스텀 프로퍼티 브라우저는 선택한 객체나 구성요소의 다양한 속성을 선택해 변경할 수 있으며, 상기 속성들은 키보드 입력이나 마우스의 컨트롤로 변경할 수 있다.
그리고 상기 컴포넌트 브라우저는 페이지를 꾸밀 수 있는 다양한 컴포넌트와 위젯들을 모아 놓은 편집창이며, 상기 DOM 트리 에디터는 페이지 브라우저 탐색기 창에서 선택한 페이지에 대한 정보를 보여주고, 상기 애니메이션 에디터는 상기 페이지에서 보여줄 애니메이션을 제작하거나 편집할 수 있도록 한다.
도 2는 상기 도 1에 있어서, 컴포넌트 브라우저에 포함된 컴포넌트들을 보인 예시도이다. 이에 도시된 바와 같이 상기 컴포넌트에는 그 속성에 따라 베이직(Basic), 뷰(View), 페이지 컨테이너(Page container), 콤비네이션(Combination) 및 본 발명에 관련된 데이터 바인딩을 위한 데이터 바인딩 컴포넌트가 포함되어 있으며, 각 컴포넌트는 마우스를 이용한 선택과 드래그&드롭이 가능한 탭으로 구성되어 있다. 이하 상기 데이터 바인딩 컴포넌트를 이용하여 웹 어플리케이션을 제작 시 데이터 바인딩을 수행하기 위한 방법에 대해서 설명한다.
도 3은 본 발명의 일 실시예에 따른 데이터 바인딩 윈도우를 보인 예시도이다. 여기서 상기 데이터 바인딩 윈도우(710)는 뷰포트의 페이지 내에 바인딩을 위해 추가된 데이터 소스 컴포넌트들을 나열하고, 각 데이터 소스 컴포넌트에 포함된 실질적인 데이터 소스를 보여준다. 예컨대 상기 데이터 바인딩 윈도우는 두 개의 영역으로 구분되며, 그 두 개의 영역은 각기 바인딩을 위해 추가된 데이터 소스 컴포넌트들의 아이디를 나열하는 영역과, 상기 데이터 소스 컴포넌트에 지정된 위치에서 실질적으로 가져온(로딩된) 데이터 소스를 트리 형식이나 원형 그대로 보여주는 영역을 포함한다.
이때 상기 데이터 소스 컴포넌트를 웹 페이지(또는 바인딩 할 UI 컴포넌트가 있는 타겟 페이지)에 추가하기 위해서는, 도 4에 도시된 바와 같이, 컴포넌트 브라우저에 구비된 데이터 바인딩 컴포넌트 탭(720)을 선택하여 데이터 소스 컴포넌트들을 생성하고, 그 데이터 소스 컴포넌트를 선택하여 상기 웹 페이지 내의 아무 위치에나 드래그&드롭 방식으로 추가하면 된다. 추후 상기 페이지 내의 UI 컴포넌트들에 바인딩 할 실질적인 데이터 소스를 상기 데이터 소스 컴포넌트의 프로퍼티에 지정된 위치에서 가져오게 된다.
상기와 같이 컴포넌트 브라우저의 데이터 바인딩 탭(720)을 이용하여 생성된 데이터 소스 컴포넌트가 바인딩 타겟 페이지에 추가되면, 상기 데이터 바인딩 윈도우를 통해서 그 바인딩 소스들(데이터 소스 컴포넌트들)의 리스트를 확인할 수 있다. 이때 상기 각 바인딩 소스(데이터 소스 컴포넌트)의 옵션 값은 커스텀 프로퍼티 브라우저를 통해서 확인하거나 수정할 수 있다.
도 5는 본 발명의 일 실시예에 따라 커스텀 프로퍼티 브라우저에서 바인딩 소스의 옵션 내용을 보인 예시도로서, 이에 도시된 바와 같이 옵션 값을 확인하거나 수정하고자 할 경우, 원하는 바인딩 소스(예 : DataSource_0)를 선택하여 클릭하면 커스텀 프로퍼티 브라우저에 상기 바인딩 소스에 기존에 설정된(또는 디폴트로 설정된) 옵션 내용들(예 : class, id, subid, url, query, schedule, timeout, method 등)이 표시된다.
이에 따라 사용자(개발자)는 상기 프로퍼티의 옵션들 중 원하는 항목을 클릭하여 해당 옵션 값을 수정할 수 있다. 여기서 상기 바인딩 소스(데이터 소스 컴포넌트)의 옵션 항목들 중 url은 ajax, JSONP 등의 리모트 액세스 경로를 나타내며, query는 리모트 액세스 시의 쿼리 정보를 나타내고, schedule은 로딩 주기 설정(0일 경우 자동으로 로딩하지 않음)을 나타내며, timeout은 리모트 액세스 시 데이터에 대한 타임아웃(msec)을 나타내고, method는 리모트 액세스 시의 쿼리 요청 방법을 설정하는 것이며, proxy는 데이터의 로딩 위치/프로토콜을 설정하는 것이고, sourcetype은 원본 데이터의 포맷을 설정하는 것이며, bindonload는 자동 데이터 로드 여부를 설정하는 것이고, autouibind는 url로부터 데이터로딩 이후에 UI에 데이터 바인딩이 적용될지에 대한 여부를 설정하는 것이며, showloadingmsg는 데이터 로딩 시 프로그래스 창을 보여줄지 여부를 설정하는 항목이다.
이상으로 본 발명에 따른 저작도구에서 바인딩을 위한 바인딩 소스(데이터 소스 컴포넌트)를 생성하여 타겟 페이지에 추가하는 방법 및 그 추가된 바인딩 소스들의 리스트를 확인하는 방법과 바인딩 소스의 프로퍼티를 확인하고 수정하는 방법에 대해서 설명하였다.
이하 본 발명에 따른 웹 어플리케이션 저작도구에서 상기 데이터 바인딩 기능을 적용하여 웹 어플리케이션을 제작하는 구체적인 방법을 일 실시예를 이용하여 설명한다. 상기 일 실시예는 편의상 트위터에서 한 유명인(예 : 김연아)의 트윗 정보들을 참조하는 데이터 소스를 본 실시예의 웹 어플리케이션의 UI 컴포넌트에 바인딩 함으로써 간단히 트위터 웹 앱(Web App)을 만드는 방법을 예로 들어서 설명한다.
상기 트위터 웹 앱을 만들기 위해서는 먼저, 통합개발환경(IDE)에서 새로운 프로젝트를 생성한다. 예컨대 통합개발환경에서 프로젝트 생성 메뉴를 클릭하면 프로젝트 설정 윈도우가 표시되고, 상기 프로젝트 설정 윈도우에 생성할 프로젝트의 이름과 어플리케이션 이름을 입력한다.
본 실시예에서는 편의상‘MyTwitter'로 입력한다고 가정한다. 즉, 프로젝트 이름(Name)으로‘MyTwitter'를 설정하고, 어플리케이션의 아이디와 이름에도 각각‘MyTwitter' 로 설정한다고 가정한다. 그 외에도 프로젝트 설정 윈도우에 프로젝트 타입(예 : 스마트폰용 또는 태블릿용 등) 및 뷰 모드, 언어 등의 항목들을 선택한다. 상기와 같이 프로젝트의 생성에 필요한 항목들의 정보를 모두 입력한 다음 완료(또는 Finish) 버튼을 클릭하면‘MyTwitter'라는 이름의 프로젝트가 생성된다.
이 후 상기 프로젝트(예 : MyTwitter)를 선택 후 저작도구를 실행한다.
상기 저작도구를 실행하면, 도 1에 도시된 바와 같이, 상기 프로젝트에 해당하는 저작도구 화면이 표시된다. 그 중 뷰포트 에디터에 상기 프로젝트 생성 시 설정한 타입(예 : 스마트폰용)에 해당하는 뷰포트 에디트 화면(웹 페이지)이 표시된다.
이에 따라 사용자는 상기 프로젝트에 사용 될 UI 컴포넌트들을 상기 페이지에 추가하여 레이아웃을 수행한다. 예컨대 컴포넌트 브라우저의 뷰 컴포넌트에서 헤더(Header)를 선택하고 뷰포트에 드래그&드롭 하여 추가한다. 그 외에도 리스트 아이템, 이미지, 레이블, 풋터, 레이아웃 뷰, 스크롤 뷰를 포함한 적어도 하나 이상의 UI 컴포넌트를 상기 웹 페이지의 특정 부분에 추가한다.
그리고 추가된 UI 컴포넌트들에 대해서 임의의 아이디(ID)를 부여하거나 기 부여된 아이디를 원하는 것으로 변경한다. 예컨대 상기 추가된 헤더 항목의 아이디(ID)를 원하는 이름으로 변경하기 위해서는 상기 뷰포트에 추가된 헤더를 선택하고, 커스텀 프로퍼티의 하위인 프로퍼티 그룹에서 아이디(id) 항목에 원하는 이름(예 : header)을 입력하여 변경하면 된다.
마찬가지로 상기 프로젝트에서 사용할 다른 UI 컴포넌트들(예 : header, lbTitle, footer, lbPage, listItem, imgPicture, lbID, lbContent 등)을 컴포넌트 브라우저에서 선택하여 추가하고, 필요 시 각 UI 컴포넌트의 아이디를 원하는 이름으로 적절하게 변경한다. 상기와 같이 UI 컴포넌트들을 추가하여 웹 어플리케이션의 컴포넌트 레이아웃을 완성시킨다. 이때 상기 컴포넌트 레이아웃은 추후 수정이나 추가도 가능하다. 그리고 DOM 트리 브라우저에서 상기 프로젝트의 컴포넌트 트리를 확인할 수 있다. 이때 상기 예시된 UI 컴포넌트들 중 lbTitle 은 해당 트위터 ID를 나타내고, lbPage는 해당 페이지를 나타내며, imgPicture는 트윗 작성자의 사진을 나타내고, lbID는 트윗 작성자의 아이디를 나타내며, lbContent는 상기 작성자가 쓴 트윗 내용을 나타낸다.
상기와 같이 웹 어플리케이션에 필요한 레이아웃이 완성되면, 이제 본 실시예의 웹 어플리케이션에서 원하는 유명인의 트위터 내용(데이터 소스)을 상기 웹 페이지에 추가된 각 UI 컴포넌트에 바인딩 시키기 위한 데이터 소스 컴포넌트를 추가한다.
예컨대 상기 컴포넌트 브라우저의 데이터 바인딩 컴포넌트 탭을 클릭한 후, 생성되는 데이터 소스 컴포넌트들 중 원하는 하나를 선택하여 상기 웹 페이지(또는 타겟 페이지)의 아무 위치에나 드래그&드롭 하여 추가한다. 이때 상기 데이터 소스 컴포넌트는 다른 UI 컴포넌트처럼 화면에 그려지는 것이 아니라, 개발 시 편의를 위해서 뷰포트에 임시로 표시될 뿐이기 때문에 드래그&드롭 하는 위치는 중요하지 않다.
다음 상기와 같이 바인딩 할 데이터 소스 컴포넌트가 타겟 페이지에 추가되면, 그 데이터 소스 컴포넌트의 프로퍼티를 수정하여 상기 UI 컴포넌트에 바인딩 할 실질적인 데이터 소스를 로딩 할(가져올) 위치와 데이터의 종류를 지정한다.
본 실시예에서는 url과 query만 수정하기로 한다.
예컨대 상기 실질적인 데이터 소스를 가져올 위치는 URL 주소에 해당하는 것으로, 상기 추가된 데이터 소스 컴포넌트의 프로퍼티 항목을 열어서 url 항목에 주소(예 : http://search.twitter.com/search.json)를 입력한다. 그리고 상기 지정된 위치에서 가져올 데이터의 종류를 query에 입력한다. 이때 상기 query는 상기 url 입력 방식과 같이 프로퍼티 내의 query 항목에 직접 입력할 수 있으며, 입력 할 파라미터 개수가 많을 경우에는 상기 데이터 소스 컴포넌트를 더블 클릭하면 나타나는 Query 입력 창을 이용하여 입력할 수도 있다.
도 6은 상기 쿼리(Query) 입력 창을 보인 예시도이다.
상기 데이터 소스 컴포넌트를 더블 클릭하면, 이에 도시된 바와 같은 쿼리 입력 창이 오픈된다. 이때 본 실시예의 프로젝트(예 : MyTwitter)에서 쿼리 타입은‘Http Get’방식이기 때문에 디폴트(Default)를 선택해 주고, 추가 버튼(+)을 클릭해 아래 표1 과 같은 항목들을 입력한다.
Figure 112012099359563-pat00001
상기 항목들이 성공적으로 입력되었다면, 바로 상단에 표시된‘Preview’창에 q=Yunaaaa&rpp=10&result_type=mixed&include_entities=true 와 같이 키(KEY) 이름과 해당 값(VALUE) 들이 지정된 형식으로 표시되고, 하단의 OK 버튼을 클릭하면 쿼리 입력이 완료된다.
상기와 같이 데이터 소스 컴포넌트의 프로퍼티에 실제 데이터 소스를 가져올 위치와 쿼리 입력이 완료되면, 이제 바인딩 타겟이 되는 웹 페이지 내의 UI 컴포넌트들과 모델(데이터 소스)를 연결한다.
상기 UI 컴포넌트들과 모델(데이터 소스)를 연결하기 위해서는 우선 상기 데이터 소스 컴포넌트에 지정한 URL(Uniform Resource Locator)로부터 데이터 소스(또는 소스 오브젝트)를 가져와야 한다. 예컨대 본 실시예에서는 상기 데이터 소스(또는 소스 오브젝트)를 가져오기 위해서 데이터 소스 컴포넌트 리스트에서 어느 하나의 해당하는 데이터 소스 컴포넌트(DataSource_0)를 선택한 후 로드 버튼(Load)을 클릭한다. 상기 로드 버튼이 클릭되면 상기 선택된 데이터 소스 컴포넌트의 프로퍼티에 지정된 위치에서 해당하는 데이터 소스를 자동으로 로딩한다.
상기 데이터 로딩을 마친 후, 도 7에 도시된 바와 같이, 데이터 바인딩 윈도우의 트리 탭을 선택하면, 데이터 바인딩 윈도우의 트리 탭에 상기 지정된 위치에서 가져온 데이터 소스(또는 소스 오브젝트)들의 프로퍼티들이 추가된 것을 확인 할 수 있다.
이제 상기 타겟 페이지의 UI 컴포넌트(예 : lbTitle, lbPage, imgPicture, lbID, lbContent 등)에 상기 지정된 위치에서 가져온 실질적인 데이터(예 : 유명인의 트위터 아이디, 트윗하는 상대 아이디, 그 상대가 작성한 내용 및 페이지 넘버 등)가 표시되도록 데이터 소스를 UI 컴포넌트에 바인딩(연결)하는 작업을 한다.
예컨대 본 실시예에서는, 도 8에 도시된 바와 같이, 상기 lbTitle 컴포넌트에 해당하는 데이터 소스를 연결한다고 가정할 경우, 먼저 데이터 바인딩 윈도우의 트리 탭 내의 데이터 소스들 중 쿼리(query)를 선택하고, 그 선택된 쿼리를 상기 타겟 페이지 내의 해당하는 UI 컴포넌트(예 : lbTitle) 위에 드래그&드롭 하여 바인딩 한다. 상기와 마찬가지 방식으로, 상기 풋터(footer)에 올려진 UI 컴포넌트(lbPage)는 현재 트위터의 페이지를 표시하기 위하여 사용되는데, 상기 데이터 바인딩 윈도우의 트리 탭 내의 데이터 소스들 중 페이지(page)를 선택하고, 그 선택된 페이지(page)를 상기 타겟 페이지 내의 해당하는 UI 컴포넌트(예 : lbPage) 위에 드래그&드롭 하여 바인딩 한다.
다음 리스트 아이템(listItem) 위에 올려진 UI 컴포넌트들에 해당하는 데이터 소스를 바인딩 해야 하는데, 상기 리스트 아이템에 올려진 UI 컴포넌트에 바인딩 할 데이터 소스는 그룹 프로퍼티 내에 있다.
본 실시예에서 상기 그룹 프로퍼티는 상기 데이터 바인딩 윈도우의 트리 탭 내에서 A로 표시한다. 여기서 상기 그룹 프로퍼티는 배열같이 반복된 값들이 존재하는 데이터 소스들의 프로퍼티를 표시하는 것으로서, 상기 그룹 프로퍼티는 리스트 아이템에 올려진 UI 컴포넌트와 바인딩 될 수 있고, 또한 그룹 프로퍼티의 하위 항목들 역시 바인딩 된 리스트 아이템 내의 UI 컴포넌트의 자식 컴포넌트들과만 바인딩 될 수 있다. 따라서 상기 리스트 아이템 위에 올려진 UI 컴포넌트들(예 : imgPicture, lbID, lbContent 등)에 해당하는 데이터 소스를 바인딩하기 위해서는, 상기 리스트 아이템의 UI 컴포턴트들에 해당하는 데이터 소스들이 있는 results 그룹 프로퍼티를 펼쳐 나타나는 그 하위 항목들 중 profile_image_url을 선택하고, 상기 리스트 아이템(listItem) 컴포넌트의 자식 컴포넌트인 imgPicture 컴포넌트 위에 드래그&드롭 하여 바인딩 한다. 마찬가지로 from_user_name을 lbID에 드래그&드롭 하여 바인딩하고, text를 lbContent에 드래그&드롭 하여 바인딩 한다.
상기와 같이 데이터 바인딩 윈도우의 트리 탭 내의 데이터 소스들 중 해당하는 데이터 소스를 선택하여 타겟 페이지 내의 UI 컴포넌트 위에 드래그&드롭 하여 성공적으로 바인딩을 마쳤다면, 마지막으로 그 바인딩을 실행시키면 된다. 즉 상기 작업한 바인딩을 유효화(또는 활성화) 시키는 것이다.
예컨대 본 실시예에서는 도 5에 도시된 바와 같이, 데이터 소스 컴포넌트의 프로퍼티 설정 윈도우의 옵션 항목들 중에서‘bindonload/autouibind’항목의 값을‘true’로 설정함으로써, 웹 어플리케이션 로딩 시 바로 바인딩을 실행해 웹 어플리케이션의 화면에 보여지게 한다. 즉 상기 바인딩의 유효화(또는 활성화)는 웹 어플리케이션이 실행되면 상기 데이터 소스 컴포넌트에 지정된 위치에서 지정된 데이터 소스를 자동으로 가져와 상기 바인딩 된 UI 컴포넌트에 표시되도록 설정하는 것이다.
이상으로 데이터 바인딩에 필요한 모든 연결 작업과 설정이 완료되면, 통합 개발 환경(IDE)에서 상기 작업한 웹 어플리케이션(예 : MyTwitter)을 빌드하고, 빌드가 완성되면 에뮬레이터를 실행한다. 상기 에뮬레이터 실행 결과, 도 9에 도시된 바와 같이, 화면에 지정된 유명인의 트윗 화면이 표시된다. 이후 사용자는 자신만의 레이아웃으로 수정하여 더 멋진 웹 어플리케이션을 간단히 저작할 수 있다.
도 10은 본 발명의 일 실시예에 따른 저작도구를 이용하여 데이터 바인딩이 적용된 웹 어플리케이션을 제작하는 과정을 설명하기 위한 흐름도로서, 이에 도시된 바와 같이 통합개발환경(IDE)에서 원하는 이름으로 프로젝트를 생성하고, 저작도구를 실행하여, 상기 프로젝트의 웹 어플리케이션을 저작하기 위한 저작도구 화면을 표시한다(S101).
이때 상기 저작도구의 뷰포트 화면(웹 페이지)은 빈 화면 상태이다. 따라서 상기 저작도구 화면의 뷰포트 에디트(또는 뷰포트 브라우저)에 상기 프로젝트에서 사용 될 UI 컴포넌트들을 추가한다(S102). 예컨대 상기 UI 컴포넌트들은 컴포넌트 브라우저에서 헤더, 풋터, 리스트 아이템, 이미지, 레이블 등을 선택하여 추가한다. 이때 상기 추가되는 UI 컴포넌트들은 제작할 웹 어플리케이션의 목적이나 용도에 따라 달라질 수 있다.
그리고 상기 웹 어플리케이션의 컴포넌트 레이아웃을 완성시킨다(S103).
상기와 같이 웹 어플리케이션의 컴포넌트 레이아웃이 완성되면 웹 페이지의 아무 위치에나 바인딩 작업을 위한 데이터 소스 컴포넌트를 추가한다(S104). 이때 상기 데이터 소스 컴포넌트는 컴포넌트 브라우저의 데이터 바인딩 컴포넌트 탭을 클릭한 후, 생성된 적어도 하나 이상의 데이터 소스 컴포넌트들 중 하나를 선택하여 드래그&드롭 방식으로 웹 페이지(바인딩 할 UI 컴포넌트가 있는 타겟 페이지)에 추가할 수 있다.
상기와 같이 바인딩 할 데이터 소스 컴포넌트가 추가되면, 그 데이터 소스 컴포넌트의 프로퍼티에 상기 UI 컴포넌트에 바인딩 할 실제 데이터 소스(소스 오브젝트)를 가져 올 URL 위치를 지정한다(S105). 즉, 상기 데이터 소스 컴포넌트에 실제로 바인딩 할 데이터를 가져올 URL 경로(주소)와 그 URL 주소에서 가져올 값들을 지정하는 것이다. 예컨대 트위터에 있는 데이터를 가져온다고 가정할 경우, 그 트위터의 URL 주소를 지정하고, 그 트위터에서 특정인에 대한 트윗 내용에 해당하는 키(KEY)와 그 해당하는 값(Value)을 지정하는 것이다.
상기와 같이 데이터 소스 컴포넌트의 프로퍼티 설정이 완료되면, 이제 바인딩 타겟이 되는 웹 페이지 내의 UI 컴포넌트들과 상기 지정된 위치에서 가져온 데이터 소스를 연결한다(S106). 이때 본 실시예에 따른 저작도구에서는 상기 데이터 소스 컴포넌트를 선택한 후 로드(Load) 버튼을 클릭하는 것만으로 간단히 상기 데이터 소스 컴포넌트에 지정된 위치로부터 데이터 소스들을 가져와 각 데이터 소스의 프로퍼티(이하 소스 프로퍼티)를 표시할 수 있다.
이때 본 실시예에 따른 저작도구에서는 상기 소스 프로퍼티를 데이터 바인딩 윈도우에 트리 형식으로 알기 쉽게 표시한다. 따라서 상기 트리 형식으로 표시된 데이터 소스들 중 어느 하나를 선택한 후, 타겟 페이지 내의 해당 UI 컴포넌트에 드래그&드롭 한다. 이에 따라 상기 데이터 소스 컴포넌트에 지정된 위치에서 가져온 데이터 소스들 중 선택된 데이터 소스가 드래그&드롭 된 UI 컴포넌트에 바인딩 되는 것이다.
상기와 같이 필요한 모든 UI 컴포넌트들과 데이터 소스들에 대한 바인딩 작업이 완료되면, 상기 데이터 소스 컴포넌트의 프로퍼티에서 해당 옵션 항목을 선택하여 바인딩 실행을 활성화 시킨다(S107). 상기와 같이 바인딩 실행을 활성화 시켜 줌으로써 웹 어플리케이션 로딩 시 바로 상기 작업된 바인딩을 실행하여 웹 어플리케이션의 화면에 보여진다.
상기와 같이 데이터 바인딩에 필요한 모든 작업이 완료되면, 통합개발환경(IDE)에서 상기 작업한 웹 어플리케이션을 빌드하고 빌드가 완성되면 에뮬레이터를 실행한다(S108). 상기 에뮬레이터 실행 결과 데이터 바인딩 된 화면이 출력되면 웹 어플리케이션 제작이 정상적으로 완료된다.
이상으로 본 발명은 도면에 도시된 실시예를 참고로 하여 설명되었으나, 이는 예시적인 것에 불과하며, 당해 기술이 속하는 분야에서 통상의 지식을 가진 자라면 이로부터 다양한 변형 및 균등한 타 실시예가 가능하다는 점을 이해할 것이다. 따라서 본 발명의 기술적 보호범위는 아래의 특허청구범위에 의해서 정하여져야 할 것이다.
710 : 데이터 바인딩 윈도우
720 : 데이터 바인딩 탭

Claims (12)

  1. 웹 어플리케이션 저작을 위해 프로젝트를 생성하는 제1 단계;
    상기 프로젝트의 페이지에 적어도 하나 이상의 UI 컴포넌트를 추가하여 레이아웃을 수행하는 제2 단계;
    상기 레이아웃된 페이지의 적어도 하나 이상의 UI 컴포넌트에 대해서 적어도 하나 이상의 데이터 소스 컴포넌트를 생성하는 제3 단계;
    상기 페이지의 적어도 하나 이상의 UI 컴포넌트와 적어도 하나 이상의 각 데이터 소스 컴포넌트에 포함된 데이터 소스를 연결하여 데이터 바인딩을 수행하는 제 4 단계; 를 포함하며,
    상기 데이터 바인딩은 상기 데이터 소스 컴포넌트의 프로퍼티 수정을 통해서 지정된 데이터 소스의 위치로부터 로딩된 데이터 소스를 상기 UI 컴포넌트와 연결되도록 하여 수행되는 것을 특징으로 하는 웹 어플리케이션의 데이터 바인딩 방법.
  2. 청구항 1에 있어서, 상기 제3 단계는,
    상기 데이터 소스 컴포넌트를 상기 페이지의 아무 위치에나 드래그&드롭 하여 추가하는 것을 특징으로 하는 웹 어플리케이션의 데이터 바인딩 방법.
  3. 청구항 1에 있어서, 상기 제3 단계는,
    웹 어플리케이션 저작도구의 컴포넌트 브라우저에 구비된 데이터 바인딩 컴포넌트 탭을 클릭할 때 생성되는 데이터 소스 컴포넌트들 중 하나를 선택하여 추가하는 것을 특징으로 하는 웹 어플리케이션의 데이터 바인딩 방법.
  4. 청구항 1에 있어서,
    상기 데이터 소스 컴포넌트의 프로퍼티에 지정할 데이터 소스의 위치는 URL로 지정하는 것을 특징으로 하는 웹 어플리케이션의 데이터 바인딩 방법.
  5. 청구항 4에 있어서,
    상기 데이터 소스 컴포넌트의 프로퍼티에는 상기 지정된 위치에서 로딩 할 데이터 소스의 쿼리 값을 추가로 설정하는 것을 특징으로 하는 웹 어플리케이션의 데이터 바인딩 방법.
  6. 청구항 1에 있어서,
    상기 지정된 위치에서 로딩된 데이터 소스들은 트리 형식으로 표시되는 것을 특징으로 하는 웹 어플리케이션의 데이터 바인딩 방법.
  7. 청구항 6에 있어서,
    상기 데이터 소스들 중 배열 형태로 반복된 값들이 존재하는 데이터 소스들은 그룹으로 표시되는 것을 특징으로 하는 웹 어플리케이션의 데이터 바인딩 방법.
  8. 청구항 1에 있어서, 상기 데이터 소스와 UI 컴포넌트의 연결은,
    상기 데이터 소스를 선택하여 연결할 UI 컴포넌트에 드래그&드롭 하여 수행하는 것을 특징으로 하는 웹 어플리케이션의 데이터 바인딩 방법.
  9. 웹 어플리케이션의 데이터 바인딩에 의한 웹 어플리케이션 저작도구에 있어서,
    상기 저작도구에서 생성되는 페이지에 바인딩 할 적어도 하나 이상의 데이터 소스 컴포넌트를 생성하여 추가할 수 있는 데이터 바인딩 컴포넌트;
    상기 데이터 소스 컴포넌트들 및 각 데이터 소스 컴포넌트에서 지정된 위치에서 가져온 데이터 소스들을 표시하는 데이터 바인딩 윈도우; 및
    상기 데이터 소스 컴포넌트에 설정된 바인딩에 관련된 옵션 항목들을 확인하거나 수정할 수 있는 데이터 바인딩 프로퍼티 설정 윈도우;를 포함하는 것을 특징으로 하는 웹 어플리케이션 저작도구.
  10. 청구항 9에 있어서, 상기 데이터 바인딩 컴포넌트는,
    컴포넌트 브라우저에 탭 형태로 포함되는 것을 특징으로 하는 웹 어플리케이션 저작도구.
  11. 청구항 9에 있어서, 상기 데이터 바인딩 윈도우는,
    상기 페이지에 추가된 데이터 소스 컴포넌트의 리스트를 나열하는 제1 영역;
    상기 데이터 소스 컴포넌트에 지정된 위치에서 가져온 적어도 하나 이상의 데이터 소스를 트리 형식이나 원형 그대로 보여주는 제2 영역;을 포함하는 것을 특징으로 하는 웹 어플리케이션 저작도구.
  12. 청구항 9에 있어서,
    상기 데이터 소스 컴포넌트의 프로퍼티 설정 윈도우는 상기 데이터 소스 컴포넌트에 지정된 위치에서 상기 지정된 데이터 소스를 자동으로 로딩하도록 지시하는 로드(Load) 버튼;을 포함하는 것을 특징으로 하는 웹 어플리케이션 저작도구.
KR1020120137601A 2012-11-30 2012-11-30 웹 어플리케이션 저작에서 데이터 바인딩 방법 및 이를 이용한 저작도구 KR101456508B1 (ko)

Priority Applications (1)

Application Number Priority Date Filing Date Title
KR1020120137601A KR101456508B1 (ko) 2012-11-30 2012-11-30 웹 어플리케이션 저작에서 데이터 바인딩 방법 및 이를 이용한 저작도구

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
KR1020120137601A KR101456508B1 (ko) 2012-11-30 2012-11-30 웹 어플리케이션 저작에서 데이터 바인딩 방법 및 이를 이용한 저작도구

Publications (2)

Publication Number Publication Date
KR20140069834A KR20140069834A (ko) 2014-06-10
KR101456508B1 true KR101456508B1 (ko) 2014-10-31

Family

ID=51124855

Family Applications (1)

Application Number Title Priority Date Filing Date
KR1020120137601A KR101456508B1 (ko) 2012-11-30 2012-11-30 웹 어플리케이션 저작에서 데이터 바인딩 방법 및 이를 이용한 저작도구

Country Status (1)

Country Link
KR (1) KR101456508B1 (ko)

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR20210064865A (ko) * 2019-11-26 2021-06-03 주식회사 다이아랩 데이터 바인딩을 이용한 프리젠테이션 콘텐츠 생성 방법 및 장치, 및 시스템
KR20220019488A (ko) 2020-08-10 2022-02-17 주식회사 아이티젠 어플리케이션 개발을 위한 멀티채널통합플랫폼 저작장치 및 저작방법

Families Citing this family (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111949266A (zh) * 2020-07-23 2020-11-17 上海硬通网络科技有限公司 网页生成方法、装置及电子设备

Citations (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR20110090651A (ko) * 2010-02-04 2011-08-10 삼성전자주식회사 휴대용 단말기에서 사용자 적응형 애플리케이션 생성 방법 및 장치
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
KR20110090651A (ko) * 2010-02-04 2011-08-10 삼성전자주식회사 휴대용 단말기에서 사용자 적응형 애플리케이션 생성 방법 및 장치
KR20120056472A (ko) * 2010-11-25 2012-06-04 주식회사 케이티 모바일 웹 어플리케이션 프레임워크

Cited By (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR20210064865A (ko) * 2019-11-26 2021-06-03 주식회사 다이아랩 데이터 바인딩을 이용한 프리젠테이션 콘텐츠 생성 방법 및 장치, 및 시스템
KR102303335B1 (ko) * 2019-11-26 2021-09-23 주식회사 다이아랩 데이터 바인딩을 이용한 프리젠테이션 콘텐츠 생성 방법 및 장치, 및 시스템
KR20220019488A (ko) 2020-08-10 2022-02-17 주식회사 아이티젠 어플리케이션 개발을 위한 멀티채널통합플랫폼 저작장치 및 저작방법

Also Published As

Publication number Publication date
KR20140069834A (ko) 2014-06-10

Similar Documents

Publication Publication Date Title
US10318253B2 (en) Smart templates for use in multiple platforms
US11093242B2 (en) Automatically mapping data while designing process flows
EP2151773B1 (en) Synchronous to asynchronous web page conversion
US10776725B2 (en) Graphical modeling tool
US10650093B2 (en) Data structure processing for actionable notifications
CN108369514B (zh) 用于可执行内容和可执行内容流创建的系统和方法
Whiting et al. Creating an iPhone application for collecting continuous ABC data
Del Cid et al. Implementation of a Learning Design Run-Time Environment for the. LRN Learning Management System.
CN108475267B (zh) 用于可执行内容和可执行内容流分发的系统和方法
Gürcan et al. Using Microsoft PowerApps, Mendix and OutSystems in two development scenarios: an experience report
US20140095978A1 (en) Mash-up authoring device using templates and method thereof
Husmann et al. MultiMasher: a visual tool for multi-device mashups
Desolda et al. End-user composition of interactive applications through actionable UI components
KR101456508B1 (ko) 웹 어플리케이션 저작에서 데이터 바인딩 방법 및 이를 이용한 저작도구
US9075891B2 (en) Method and device for editing an object represented in a web page
Pietschmann et al. Application composition at the presentation layer: alternatives and open issues
Kavaldjian et al. Generating content presentation according to purpose
Liu eRecipes: The Design and Development of an iOS Application
Namoune et al. End user development of service-based applications
Raufdeen SE4S toolkit extension project vision diagramming tool build your vision
Lin et al. VMer–Visualized Mobile Designer for Applications on Small Devices
Gao Design and Implementation of End-User Programming Tools for Web Mashups
Hild et al. Working with Email Messages and SharePoint
Couchell-Koutsogiorgas Design and Implementation of the Results Space project into Android OS
Hoffman et al. Storyboard Recipes

Legal Events

Date Code Title Description
A201 Request for examination
E902 Notification of reason for refusal
E701 Decision to grant or registration of patent right
GRNT Written decision to grant
FPAY Annual fee payment

Payment date: 20170904

Year of fee payment: 4

FPAY Annual fee payment

Payment date: 20180927

Year of fee payment: 5

FPAY Annual fee payment

Payment date: 20191024

Year of fee payment: 6