KR20150136310A - Wysiwyg editor system - Google Patents

Wysiwyg editor system Download PDF

Info

Publication number
KR20150136310A
KR20150136310A KR1020140063634A KR20140063634A KR20150136310A KR 20150136310 A KR20150136310 A KR 20150136310A KR 1020140063634 A KR1020140063634 A KR 1020140063634A KR 20140063634 A KR20140063634 A KR 20140063634A KR 20150136310 A KR20150136310 A KR 20150136310A
Authority
KR
South Korea
Prior art keywords
screen
moml
window
source code
app
Prior art date
Application number
KR1020140063634A
Other languages
Korean (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 KR1020140063634A priority Critical patent/KR20150136310A/en
Publication of KR20150136310A publication Critical patent/KR20150136310A/en

Links

Images

Classifications

    • 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/33—Intelligent editors

Abstract

The present invention relates to a WYSIWYG EDITOR system and, more specifically, to a WYSIWYG EDITOR system for writing a mobile object markup language. The system comprises: an application maker generation display portion which generates and displays an application maker window including at least a palette display window, which is an assembly of graphic components that can be included on a UI screen to be designed, a canvas area for designing the UI screen, and a system file structure display window; a UI screen edition display portion which arranges and displays the graphic components, which are selected and located by an application developer, on the UI screen on the canvas area; a modeling source code assembly which maps each graphic component with a tag of MOML and attributes, and models the same to have a structure subordinated to a MOML grammar; and a source code conversion portion which accesses a modeling source code which is mapped to the graphic components arranged and displayed on the UI screen in accordance with a source code conversion command of the application developer, gives property information of each arranged and displayed component, and converts, outputs, and displays the same into MOML source codes.

Description

위지윅 에디터 시스템{WYSIWYG EDITOR SYSTEM}WYSIWYG editor system {WYSIWYG EDITOR SYSTEM}

본 발명은 위지윅 에디터(WYSIWYG EDITOR) 시스템에 관한 것으로, 특히 모바일 객체 마크업 언어(Mobile Object Markup Language:MOML이라 함) 작성을 위한 위지윅 에디터 시스템에 관한 것이다.The present invention relates to a WYSIWYG editor system, and more particularly to a WYSIWYG editor system for creating a mobile object markup language (MOML).

모바일 앱 개발은 다양한 디바이스의 운영체제(안드로이드, iOS)를 지원하기 위하여 디바이스가 지원하는 운영체제의 개발 플랫폼별로 에디터(editor) 시스템을 개발해야 하므로 개발 시간과 비용이 많이 소요된다. 이러한 모바일 앱 개발방법의 단점을 극복하기 위하여 업계에서는 크로스-플랫폼(cross-platform)을 지원하는 다양한 개발도구 및 방법을 제공하고 있다.In order to support various devices' operating systems (Android, iOS), mobile application development requires developing an editor system for each development platform of the operating system supported by the device, which requires a lot of development time and cost. To overcome the shortcomings of this mobile app development approach, the industry offers a variety of development tools and methods that support cross-platform.

예를 들면 mospi.org에서 MOML 표준 및 모바일용 뷰어인 씨트린(citrine)을 제공하고 있는데, 이를 이용하여 모바일 앱을 개발하기 위해서는 MOML 문서를 텍스트 에디터(text editor)로 작성해야 도 1에 도시한 바와 같은 MOML을 생성할 수 있다. 즉, MOML은 해당 문법에 맞게 xml 문서 에디터를 이용하여 xml 문서를 작성해야 한다.For example, mospi.org provides the MOML standard and Citrine, a mobile viewer. To develop a mobile application using the MOML standard, a MOML document must be written as a text editor. You can create a MOML like the bar. In other words, MOML should write xml document using xml document editor according to the grammar.

따라서 MOML 생성을 위해서는 작성자가 MOML 문법에 대한 사전 지식이 필요하다는 단점이 있으며, xml 작성시 오류가 발생하더라도 이를 직관적으로 인식할 수 없기 때문에 MOML 생성을 위한 시간을 단축하는데 있어 제약이 따른다. 이러한 단점 및 제약사항은 텍스트 에디터를 통해서 xml 문서를 작성한다는데 기인한다. 이클립스용 MOML 텍스트 에디터 플러그인이 제공되고 있기는 하나, 이 역시 텍스트 에디터의 한계(문법체계 숙지, 작성문서에 대한 결과치 직관적 인식 불가능, 오류의 실시간 검출 불가능)를 벗어나지 못하고 단순히 MOML 태그에 대한 코드 어시스트(assist) 기능만 제공하고 있다.Therefore, in order to generate MOML, the author needs a prior knowledge of the MOML grammar. Even if an error occurs in the creation of xml, it can not be perceived intuitively. Therefore, there is a restriction in shortening the time for generating MOML. These drawbacks and constraints are caused by writing an xml document through a text editor. Although the MOML text editor plug-in for Eclipse is provided, it can not go beyond the limits of the text editor (not knowing the grammatical structure, not recognizing the result intuitively, and not detecting the error in real time) assist) function.

대한민국 공개특허공보 10-2006-0112577Korean Patent Publication No. 10-2006-0112577

이에 본 발명은 전술한 문제점을 해결하기 위해 안출된 것으로서, 본 발명의 목적은 MOML 문법체계를 숙지하지 않고서도 누구나 손쉽게 MOML을 생성할 수 있는 위지윅 에디터 시스템을 제공함에 있으며,It is an object of the present invention to provide a WYSIWYG editor system capable of easily generating a MOML without knowing the MOML grammar system,

더 나아가 본 발명의 또 다른 목적은 컴퓨터 화면을 통해 작성하고자 하는 UI를 생성토록 유도하고, 그 생성된 UI에 따른 MOML 문서가 자동 생성되도록 하여 모바일 앱 개발 생산성 및 품질을 향상시킬 수 있는 위지윅 에디터 시스템을 제공함에 있으며,It is still another object of the present invention to provide a WYSIWYG editor system capable of improving productivity and quality of mobile application development by inducing a UI to be created through a computer screen to be generated and automatically generating a MOML document according to the generated UI, Lt; / RTI >

더 나아가 본 발명은 직관적인 화면 설계는 물론 문서 작성 오류를 최소화하면서 편리하게 MOML 문서 작성을 위한 위지윅 에디터 시스템을 제공함에 있다.Furthermore, the present invention provides a WYSIWYG editor system for easily creating MOML documents while minimizing errors in document creation as well as intuitive screen design.

상술한 기술적 과제를 해결하기 위한 본 발명의 실시예에 따른 위지윅 에디터 시스템은 컴퓨터 시스템에서 실행 가능한 프로그램 코드들의 집합체로서,According to an aspect of the present invention, there is provided a WYSIWYG editor system comprising: a collection of program codes executable in a computer system,

설계하고자 하는 UI 화면에 포함될 수 있는 그래픽 컴포넌트들의 집합체인 팔레트 표시창과 UI 화면 설계를 위한 캔버스 영역 및 시스템 파일구조 표시창을 적어도 포함하는 앱 메이커 윈도우창을 생성 표시하는 앱 메이커 생성 표시부와;An app maker generating and displaying unit for generating and displaying an app maker window window including at least a pallet display window, a canvas area for UI screen design, and a system file structure display window, which is an aggregate of graphic components that can be included in a UI screen to be designed;

앱 개발자에 의해 선택 및 위치 조정되는 그래픽 컴포넌트들을 상기 캔버스 영역상의 UI 화면에 배치 표시하는 UI 화면 편집 표시부와;A UI screen edit display unit for displaying graphical components selected and adjusted by an application developer on a UI screen on the canvas area;

상기 각 그래픽 컴포넌트들을 MOML의 태그 및 애트리뷰트들과 매핑하고 MOML 문법에 종속되는 구조를 가지도록 모델링한 모델링 소스 코드 집합체와;A modeling source code set modeling each graphic component with a tag and attributes of the MOML and having a structure dependent on the MOML grammar;

앱 개발자의 소스 코드 변환명령에 따라 상기 UI 화면에 배치 표시된 그래픽 컴포넌트들에 매핑된 모델링 소스 코드를 액세스하고 배치 표시된 각 컴포넌트들의 속성정보를 부가하여 MOML 소스 코드들로 변환 출력 표시하는 소스 코드 변환부;를 포함함을 특징으로 한다.A source code conversion unit for accessing the modeling source code mapped to the graphic components placed on the UI screen according to the source code conversion instruction of the app developer and adding attribute information of each of the displayed components to the MOML source codes, ; And

더 나아가 상술한 위지윅 에디터 시스템은 변환 출력 표시된 상기 MOML 소스 코드들을 기록매체에 저장하기 위한 MOML 소스 코드 저장부;를 더 포함할 수 있으며,The WYSIWYG editor system may further include a MOML source code storage unit for storing the MOML source codes displayed on the conversion output on a recording medium,

앱 개발자의 다이어그램 표시 명령에 따라 상기 변환 출력 표시된 MOML 소스 코드들이 표현하는 그래픽 컴포넌트들을 상기 UI 화면에 배치 표시하는 다이어그램 변환부;를 더 포함할 수도 있다.And a diagram converter for displaying graphic components represented by the MOML source codes displayed by the conversion output on the UI screen in accordance with a diagram display command of an app developer.

아울러 상술한 위지윅 에디터 시스템의 앱 메이커 생성 표시부는,In addition, the app maker creation display unit of the WYSIWYG editor system described above,

상기 캔버스 영역의 UI 화면상에 표시되는 그래픽 컴포넌트들의 계층적 파일 구조를 생성하여 표시하기 위한 UI 파일구조 표시창을 상기 앱 메이커 윈도우창에 더 표시함을 특징으로 하며,A UI file structure display window for generating and displaying a hierarchical file structure of graphical components displayed on the UI screen of the canvas area is further displayed on the app maker window,

더 나아가 앱 메이커 생성 표시부는 상기 그래픽 컴포넌트들의 속성을 입력하기 위한 속성 표시 입력창을 상기 앱 메이커 윈도우창에 더 표시함을 특징으로 한다.Furthermore, the app maker creation display unit may further display an attribute display input window for inputting the attributes of the graphic components in the app maker window.

상술한 과제 해결 수단에 따르면, 본 발명은 팔레트 표시창에 위치한 그래픽 컴포넌트들을 이용하여 캔버스 영역 상에 원하는 UI 화면을 시각적으로 보면서 설계할 수 있기 때문에 설계하는 UI 화면을 직관적으로 인식할 수 있으며,According to the present invention, it is possible to intuitively recognize a UI screen to design because it is possible to visually design a desired UI screen on a canvas area using graphic components located in a palette display window,

더 나아가 본 발명은 각 그래픽 컴포넌트들을 MOML의 태그 및 애트리뷰트들과 매핑하고 MOML 문법에 종속되는 구조를 가지도록 사전 모델링해 놓음으로써, 설계된 UI 화면에 일치하는 MOML 소스 코드가 자동 생성되는 구조이므로 MOML 문법 체계를 숙지하지 않고서도 편리하게 UI 화면에 대한 MOML 소스 코드를 생성할 수 있는 이점이 있다. 이러한 이점 및 효과들로 본 발명은 모바일 앱 개발의 생산성 및 품질을 한층 더 향상시킬 수 있는 부대 효과도 얻을 수 있다.Furthermore, since the present invention is a structure in which MOML source code corresponding to the designed UI screen is automatically generated by mapping each graphic component with the tags and attributes of the MOML and preliminarily modeling the structure according to the MOML grammar, There is an advantage in that it is possible to conveniently generate MOML source code for a UI screen without knowing the system. With these advantages and effects, the present invention can provide a side effect that further enhances the productivity and quality of mobile application development.

도 1은 텍스트 에디터를 이용한 MOML 생성 예시도.
도 2는 본 발명의 실시예에 따른 위지윅 에디터 시스템의 주변 블럭 구성 예시도.
도 3은 본 발명의 실시예에 따른 위지윅 에디터 시스템의 상세 구성 예시도.
도 4는 본 발명의 실시예에 따른 앱 메이커 윈도우창 예시도.
도 5는 본 발명의 실시예에 따라 그래픽 컴포넌트들을 MOML의 태그 및 애트리뷰트(attribute)들과 매핑하고 MOML 문법에 종속되는 구조를 가지도록 모델링한 모델링 소스 코드 집합체의 모델링 구조 일부 예시도.
도 6은 본 발명의 실시예에 따른 위지윅 에디터 시스템을 이용하여 UI 화면을 설계하는 과정을 설명하기 위한 도면.
도 7은 도 6에 예시한 UI 화면 설계에 따라 생성되는 MOML 소스 코드 생성 예시도.
도 8은 MOML에서 사용할 함수를 관리하기 위한 화면 예시도.1 shows an example of MOML generation using a text editor.
BACKGROUND OF THE INVENTION 1. Field of the Invention [0001]
3 is a diagram illustrating a detailed configuration of a WYSIWYG editor system according to an embodiment of the present invention;
4 illustrates an example of an app maker window according to an embodiment of the present invention;
FIG. 5 is a diagram illustrating an example of a modeling structure of a modeling source code set modeled by mapping graphic components to tags and attributes of an MOML according to an embodiment of the present invention and having a structure dependent on the MOML grammar; FIG.
6 is a diagram for explaining a process of designing a UI screen using a WYSIWYG editor system according to an embodiment of the present invention;
FIG. 7 is a diagram illustrating an example of MOML source code generation generated according to the UI screen design shown in FIG. 6; FIG.
FIG. 8 is an exemplary screen for managing a function to be used in the MOML; FIG.

이하 본 발명의 바람직한 실시예를 첨부 도면을 참조하여 상세히 설명하기로 한다. 본 발명을 설명함에 있어 관련된 공지 기능 혹은 구성과 같은 구체적인 설명이 본 발명의 요지를 불필요하게 흐릴 수 있다고 판단되는 경우 그에 대한 상세한 설명은 생략하기로 한다.Hereinafter, preferred embodiments of the present invention will be described in detail with reference to the accompanying drawings. In the following description of the present invention, a detailed description of known functions and configurations incorporated herein will be omitted when it may make the subject matter of the present invention rather unclear.

우선 도 2는 본 발명의 실시예에 따른 위지윅(WYSIWYG) 에디터 시스템(100)의 주변 블럭 구성도를 예시한 것이다.FIG. 2 illustrates a peripheral block diagram of a WYSIWYG editor system 100 according to an embodiment of the present invention. Referring to FIG.

도 2에 도시한 바와 같이 위지윅 에디터 시스템(100)을 이용하여 UI 화면을 설계하고자 하는 앱 개발자는 앱 스토리 보드(App Story Board)를 MOML 기반의 위지윅 에디터 시스템(일명 앱 메이커라고도 함)(100)을 통해 앱 프로젝트를 구성하고, 위지윅 에디터 시스템(100)을 이용하여 UI 화면을 설계한다. 설계된 UI 화면은 최종 MOML 소스 코드로 생성되어 파일 형태로 "Native Authoring Tools(Xcode, ADT)(200)을 통해 앱 스토어(300)로 전달됨으로써, 사용자들은 앱 스토어(300)를 통해 스마트 폰에 최종 설치한다.As shown in FIG. 2, an app developer who wants to design a UI screen using the WYSIWYG editor system 100 inserts an AppStory Board into a WYSIWYG editor system (also called an app maker) 100 based on MOML, And the UI screen is designed using the WYSIWYG editor system 100. [ The designed UI screen is generated as the final MOML source code and transferred to the app store 300 through the Native Authoring Tools (Xcode, ADT) 200 in the form of a file, Install it.

이하 UI 화면을 설계하기 위한 위지윅 에디터 시스템(100)을 보다 구체적으로 설명하기로 한다.Hereinafter, the WYSIWYG editor system 100 for designing a UI screen will be described in more detail.

도 3은 본 발명의 실시예에 따른 위지윅 에디터 시스템(100)의 상세 구성도를 예시한 것이며, 도 4는 본 발명의 실시예에 따른 앱 메이커 윈도우창(400)을 예시한 것이다. 그리고 도 5는 본 발명의 실시예에 따라 그래픽 컴포넌트(Graphic components)들을 MOML의 태그(tag) 및 애트리뷰트(attribute)들과 매핑하고 MOML 문법에 종속되는 구조를 가지도록 모델링한 모델링 소스 코드 집합체의 모델링 구조 일부를 예시한 것이다.FIG. 3 illustrates a detailed configuration diagram of the WYSIWYG editor system 100 according to an embodiment of the present invention. FIG. 4 illustrates an app maker window 400 according to an embodiment of the present invention. 5 illustrates modeling of a modeling source code set modeled by mapping graphical components with tags and attributes of MOML and having a structure dependent on MOML syntax according to an embodiment of the present invention. Some of the structures are illustrated.

도 3을 참조하면, 우선 위지윅 에디터 시스템(100)은 도 4에 도시한 바와 같이 설계하고자 하는 UI 화면(420)에 포함될 수 있는 그래픽 컴포넌트들의 집합체인 팔레트(Palette) 표시창(440)과 UI 화면(420) 설계를 위한 캔버스 영역(430) 및 시스템 파일구조 표시창(410)을 적어도 포함하는 앱 메이커 윈도우창(400)을 생성 표시하는 앱 메이커 생성 표시부(110)를 포함한다.3, the WYSIWYG editor system 100 includes a palette display window 440 and an UI window (not shown), which are a collection of graphic components that can be included in a UI screen 420 to be designed, And an app maker creation display unit 110 for creating and displaying an app maker window window 400 including at least a canvas area 430 for designing the system file structure display window 410 and a system file structure display window 410.

더 나아가 앱 메이커 생성 표시부(110)는 캔버스 영역(430)의 UI 화면(420)상에 표시되는 그래픽 컴포넌트들의 계층적 파일 구조를 생성하여 표시하기 위한 UI 파일구조 표시창(450)을 앱 메이커 윈도우창(400)에 더 표시할 수 있다. 또한 앱 메이커 생성 표시부(110)는 그래픽 컴포넌트들의 속성(예를 들면 컴포넌트의 하나인 윈도우의 크기, 이미지 컬러 등)을 입력하기 위한 속성 표시 입력창(460)을 앱 메이커 윈도우창(400)에 더 표시할 수도 있으며, 상술한 모든 표시 혹은 입력창들을 도 4에서와 같이 모두 표시할 수도 있다.Furthermore, the app maker creation display unit 110 displays a UI file structure display window 450 for generating and displaying a hierarchical file structure of graphic components displayed on the UI screen 420 of the canvas area 430, (400). In addition, the app maker creation display unit 110 displays a property display input window 460 for inputting the attributes of the graphic components (for example, the size of the window that is one of the components, the image color, and the like) in the app maker window 400 And all of the above-described display or input windows may be displayed as shown in FIG.

한편 위지윅 에디터 시스템(100)은 기본적으로 UI 화면 편집 표시부(120)를 포함한다. 이러한 UI 화면 편집 표시부(120)는 앱 개발자에 의해 선택 및 위치 조정되는 그래픽 컴포넌트들을 캔버스 영역(430)상의 UI 화면(420)에 배치 표시한다. 도 4에서 UI 화면(420)에 배치 표시되는 그래픽 컴포넌트는 아이디와 비밀번호 입력필드 및 그 옆의 로그인 클릭버튼이다.On the other hand, the WYSIWYG editor system 100 basically includes a UI screen edit display unit 120. The UI screen display / display unit 120 arranges graphic components selected and positioned by the application developer on the UI screen 420 on the canvas area 430. In FIG. 4, graphic components arranged and displayed on the UI screen 420 are an ID and a password input field and a login click button beside the ID and password input field.

앱 메이커 생성 표시부(110)와 UI 화면 편집 표시부(120) 외에 위지윅 에디터 시스템(100)은 도 5에 예시한 바와 같이 각 그래픽 컴포넌트들을 MOML의 태그(DATASOURCELIST, FUNCTIONLIST, UI, UILAYOUT,..) 및 애트리뷰트들(id, condition, cmd, delay,..)과 매핑하고 MOML 문법에 종속되는 구조를 가지도록 사전 모델링한 모델링 소스 코드 집합체(130)와, 앱 개발자의 소스 코드 변환명령에 따라 상기 UI 화면(420)에 배치 표시된 그래픽 컴포넌트들에 매핑된 모델링 소스 코드를 액세스하고, 그 배치 표시된 각 컴포넌트들의 속성정보를 부가하여 도 7에 도시한 바와 같은 MOML 소스 코드들로 변환 출력 표시하는 소스 코드 변환부(140)를 기본적으로 포함한다.In addition to the app maker creation display unit 110 and the UI screen edit display unit 120, the WYSIWYG editor system 100 includes graphic components such as DATASOURCE, FUNCTIONLIST, UI, UILAYOUT, A modeling source code set 130 that is pre-modeled so as to have a structure that is mapped to attributes (id, condition, cmd, delay, ..) and has a structure dependent on the MOML grammar, The modeling source code mapped to the graphic components placed in the source code conversion section 420 is accessed, and the attribute information of each of the displayed components is added to the MOML source codes as shown in FIG. (140).

물론 위지윅 에디터 시스템(100)은 도 7에 도시한 바와 같이 변환 출력 표시된 MOML 소스 코드들을 기록매체에 저장하기 위한 MOML 소스 코드 저장부(150)를 더 포함할 수 있으며, 앱 개발자의 다이어그램 표시 명령에 따라 상기 변환 출력 표시된 MOML 소스 코드들이 표현하는 그래픽 컴포넌트들을 다시 UI 화면(420)에 배치 표시하는 다이어그램 변환부(160)를 더 포함할 수 있으며, 경우에 따라서는 MOML 페이지에서 사용할 함수를 관리하기 위한 함수 관리부를 더 포함할 수도 있을 것이다.As shown in FIG. 7, the WYSIWYG editor system 100 may further include a MOML source code storage unit 150 for storing the MOML source codes displayed on the recording medium, as shown in FIG. 7, And a diagram transformation unit 160 for rearranging and displaying graphical components represented by the MOML source codes displayed on the transformation output on the UI screen 420. In some cases, And may further include a function management unit.

이하 상술한 구성을 가지는 위지윅 에디터 시스템(100)을 이용하여 UI 화면을 설계하고, 그 설계된 UI 화면에 대응하는 MOML 소스 코드의 생성과정을 도 6 내지 도 8을 참조하여 부연 설명하기로 한다.Hereinafter, a UI screen is designed using the WYSIWYG editor system 100 having the above-described configuration, and a process of generating a MOML source code corresponding to the designed UI screen will be described with reference to FIGS. 6 to 8. FIG.

도 6은 본 발명의 실시예에 따른 위지윅 에디터 시스템(100)을 이용하여 UI 화면(420)을 설계하는 과정을 설명하기 위한 도면을 도시한 것이며, 도 7은 도 6에 예시한 UI 화면(420) 설계에 따라 생성되는 MOML 소스 코드를, 도 8은 MOML에서 사용할 함수를 관리하기 위한 화면을 각각 예시한 것이다.6 is a diagram for explaining a process of designing a UI screen 420 using the WYSIWYG editor system 100 according to an embodiment of the present invention. FIG. 7 is a diagram illustrating a UI screen 420 ) Design, and FIG. 8 illustrates a screen for managing a function to be used in the MOML.

도 6을 참조하면, 우선 위지윅 에디터 시스템(100)을 이용하여 UI 화면을 설계하고자 하는 앱 개발자는 컴퓨터 시스템에 설치된 위지윅 에디터 시스템(100)을 실행시킨다. 시스템 실행에 따라 표시부에는 도 6에 도시한 바와 같은 초기 화면의 앱 메이커 윈도우창이 표시된다. 도 6에서는 캔버스 영역(430)에 그래픽 컴포넌트의 하나인 UI 화면(420)이 표시되어 있지만 초기 화면에는 캔버스 영역(430)에 아무런 그래픽 컴포넌트가 존재하지 않는다.Referring to FIG. 6, an application developer who wishes to design a UI screen using the WYSIWYG editor system 100 executes a WYSIWYG editor system 100 installed in a computer system. An app maker window window of the initial screen as shown in Fig. 6 is displayed on the display unit according to the system execution. In FIG. 6, the UI screen 420, which is one of graphic components, is displayed in the canvas area 430, but there is no graphic component in the canvas area 430 in the initial screen.

이러한 상태에서 앱 개발자는 마우스를 이용하여 팔레트 표시창(440)에 존재하는 그래픽 컴포넌트들 중 예를 들면 '윈도우'를 선택하여 캔버스 영역(430)에서 위치 크기 조정한다. 이러한 '윈도우' 선택 및 위치 크기 조정에 의해 도 6에 도시한 바와 같이 캔버스 영역(430)상에 하나의 윈도우, 즉 UI 화면(420)이 생성 표시된다. 이러한 동작은 UI 화면 편집 표시부(120)에 의해 이루어진다.In this state, the app developer selects, for example, 'window' among graphic components existing in the palette display window 440 using the mouse, and scales the position in the canvas area 430. By this 'window' selection and position adjustment, one window, that is, a UI screen 420, is created and displayed on the canvas area 430 as shown in FIG. This operation is performed by the UI screen display / display unit 120.

이러한 방식으로 UI 화면 편집 표시부(120)는 앱 개발자의 그래픽 컴포넌트 선택 및 위치 크기 조정 명령에 따라 UI 화면(420)상에 선택된 다양한 그래픽 컴포넌트들을 배치 표시한다. 이와 같이 UI 화면(420)상에 다양한 그래픽 컴포넌트들이 배치 표시되는 경우 앱 메이커 생성 표시부(110)는 캔버스 영역(430)의 UI 화면(420)상에 표시되는 그래픽 컴포넌트들의 계층적 파일 구조를 생성하여 UI 파일 구조 표시창(450)에 표시해 준다. 아울러 앱 개발자는 UI 화면(420)상에 그래픽 컴포넌트를 배치함에 있어 속성표시 입력창(460)을 통해 각 그래픽 컴포넌트의 속성을 입력할 수 있다.In this manner, the UI screen edit display unit 120 arranges and displays various graphic components selected on the UI screen 420 according to the graphic component selection and the position adjustment instruction of the app developer. When various graphic components are arranged and displayed on the UI screen 420 in this way, the app maker creation display unit 110 creates a hierarchical file structure of graphic components displayed on the UI screen 420 of the canvas area 430 And displays it on the UI file structure display window 450. In addition, the application developer can input the attributes of each graphic component through the attribute display input window 460 in disposing the graphic components on the UI screen 420.

이상과 같은 방식으로 앱 메이커 윈도우창(400)에 포함된 팔레트 표시창(440)에 위치하는 그래픽 컴포넌트들과 속성표시 입력창(460)을 통해 원하는 UI 화면(420)을 설계 완료하면, 앱 개발자는 캔버스 영역(430) 좌측 하단부에 위치한 소스(source) 변환 버튼을 클릭한다.When the desired UI screen 420 is designed through the graphic components and the property display input window 460 located in the palette display window 440 included in the application maker window 400 in the above manner, And clicks the source conversion button located in the lower left portion of the canvas region 430. [

소스 코드 변환부(140)는 소스 코드 변환명령에 따라 상기 UI 화면(420)에 배치 표시된 그래픽 컴포넌트들 각각에 매핑되어 있는 모델링 소스 코드를 모델링 소스 코드 집합체로부터 액세스하고, 그 배치 표시된 각 컴포넌트들에 대해 입력된 속성정보를 부가하여 MOML 소스 코드들로 변환 출력 표시한다. 이러한 표시 화면의 예를 도 7에 도시하였으며, 이러한 MOML 소스 코드들은 앱 메이커 윈도우창(400)의 캔버스 영역(430)의 위치에 표시된다. 도 7에 도시한 MOML 소스 코드들은 MOML 소스 코드 저장부(150)에 의해 기록매체에 저장되어 외부 기관의 디바이스로 전달(export)될 수 있다.The source code conversion unit 140 accesses the modeling source code mapped to each of the graphic components placed on the UI screen 420 according to the source code conversion instruction from the modeling source code set and displays And converts the output information into MOML source codes. An example of such a display screen is shown in FIG. 7, and these MOML source codes are displayed at the position of the canvas area 430 of the app maker window window 400. FIG. The MOML source codes shown in FIG. 7 may be stored in a recording medium by the MOML source code storage unit 150 and then exported to a device of an external organization.

참고적으로 도 7에서 대문자는 각 그래픽 컴포넌트들에 대응하는 MOML의 태그(UI, UILAYOUT, WINDOW,..)를 나타내며, 소문자는 태그에 속하는 애트리뷰트들(align, id, layout,..)을 나타낸다. 그리고 도 6의 속성표시 입력창(460)을 통해 입력된 예를 들어 'height, left, top, width'의 값이 '659, 3, 57, 473'이 레이아웃 값으로 입력된 것을 나타내고 있다.For reference, in FIG. 7, an upper case letter indicates a tag (UI, UILAYOUT, WINDOW, ..) corresponding to each graphic component, and a lower case letter indicates an attribute (align, id, layout, ..) . The values of 'height, left, top, and width' inputted through the property display input window 460 of FIG. 6 are inputted as the layout values '659, 3, 57, and 473'.

한편, 앱 개발자는 캔버스 영역(430) 좌측 하단부에 위치한 디자인(Design) 변환 버튼을 클릭한다. 그러면 다이어그램 변환부(160)는 도 7과 같이 변환 출력 표시된 MOML 소스 코드들이 표현하는 그래픽 컴포넌트들을 다시 도 6의 UI 화면(420)에 표시한다. 즉, 앱 개발자는 디자인 버튼과 소스 버튼을 통해 설계된 UI 화면을 MOML 소스 코드들로 혹은 MOML 소스 코드들을 다시 디자인된 UI 화면으로 자유롭게 변환할 수 있다.On the other hand, the app developer clicks the design conversion button located at the lower left of the canvas area 430. Then, the diagram conversion unit 160 displays the graphic components represented by the MOML source codes displayed as the conversion output on the UI screen 420 shown in FIG. 6 again as shown in FIG. That is, an app developer can freely convert UI screens designed through design buttons and source buttons into MOML source codes or MOML source codes into redesigned UI screens.

이와 같이 본 발명은 팔레트 표시창(440)에 위치한 그래픽 컴포넌트들을 이용하여 캔버스 영역(430) 상에 원하는 UI 화면(420)을 시각적으로 보면서 설계할 수 있기 때문에 설계하는 UI 화면을 직관적으로 인식할 수 있으며 문서 작성 오류를 최소화할 수 있는 이점이 있고, 더 나아가 설계된 UI 화면과 일치하는 MOML 소스 코드가 자동 생성되는 구조이므로 MOML 문법 체계를 숙지하지 않고서도 편리하게 MOML 문서를 작성할 수 있다.As described above, since the desired UI screen 420 can be visually designed on the canvas area 430 using graphic components located in the palette display window 440, the UI screen to be designed can be intuitively recognized It has the advantage of minimizing document creation errors. Furthermore, MOML source code corresponding to the designed UI screen is automatically generated, so it is possible to create MOML document conveniently without knowing the MOML grammar system.

이상 본 발명은 도면에 도시된 실시예들을 참고로 설명되었으나 이는 예시적인 것에 불과하며, 당해 기술분야에서 통상의 지식을 가진자라면 이로부터 다양한 변형 및 균등한 타실시예가 가능하다는 점을 이해할 것이다. 예를 들면, 위지윅 에디터 시스템에 함수 관리부를 더 포함하여 MOML 페이지에서 사용할 함수를 추가적으로 관리하도록 할 수도 있다. 따라서 본 발명의 진정한 기술적 보호범위는 첨부된 특허청구범위에 의해서만 정해져야 할 것이다.While the present invention has been particularly shown and described with reference to exemplary embodiments thereof, it is to be understood that the invention is not limited to the disclosed exemplary embodiments, but, on the contrary, is intended to cover various modifications and equivalent arrangements included within the spirit and scope of the invention. For example, a function management unit may be further included in the WYSIWYG editor system to additionally manage a function to be used in a MOML page. Accordingly, the true scope of the present invention should be determined only by the appended claims.

Claims (6)

설계하고자 하는 UI 화면에 포함될 수 있는 그래픽 컴포넌트들의 집합체인 팔레트 표시창과 UI 화면 설계를 위한 캔버스 영역 및 시스템 파일구조 표시창을 적어도 포함하는 앱 메이커 윈도우창을 생성 표시하는 앱 메이커 생성 표시부와;
앱 개발자에 의해 선택 및 위치 조정되는 그래픽 컴포넌트들을 상기 캔버스 영역상의 UI 화면에 배치 표시하는 UI 화면 편집 표시부와;
상기 각 그래픽 컴포넌트들을 MOML의 태그 및 애트리뷰트들과 매핑하고 MOML 문법에 종속되는 구조를 가지도록 모델링한 모델링 소스 코드 집합체와;
앱 개발자의 소스 코드 변환명령에 따라 상기 UI 화면에 배치 표시된 그래픽 컴포넌트들에 매핑된 모델링 소스 코드를 액세스하고 배치 표시된 각 컴포넌트들의 속성정보를 부가하여 MOML 소스 코드들로 변환 출력 표시하는 소스 코드 변환부;를 포함함을 특징으로 하는 위지윅 에디터 시스템An app maker generating and displaying unit for generating and displaying an app maker window window including at least a pallet display window, a canvas area for UI screen design, and a system file structure display window, which is an aggregate of graphic components that can be included in a UI screen to be designed;
A UI screen edit display unit for displaying graphical components selected and adjusted by an application developer on a UI screen on the canvas area;
A modeling source code set modeling each graphic component with a tag and attributes of the MOML and having a structure dependent on the MOML grammar;
A source code conversion unit for accessing the modeling source code mapped to the graphic components placed on the UI screen according to the source code conversion instruction of the app developer and adding attribute information of each of the displayed components to the MOML source codes, The WYSIWYG editor system 청구항 1에 있어서, 변환 출력 표시된 상기 MOML 소스 코드들을 기록매체에 저장하기 위한 MOML 소스 코드 저장부;를 더 포함함을 특징으로 하는 위지윅 에디터 시스템.The WYSIWYG editor system according to claim 1, further comprising: a MOML source code storage unit for storing the MOML source codes displayed on the conversion output on a recording medium. 청구항 1에 있어서, 앱 개발자의 다이어그램 표시 명령에 따라 상기 변환 출력 표시된 MOML 소스 코드들이 표현하는 그래픽 컴포넌트들을 상기 UI 화면에 배치 표시하는 다이어그램 변환부;를 더 포함함을 특징으로 하는 위지윅 에디터 시스템.The WYSIWYG editor system according to claim 1, further comprising a diagram converter for displaying graphic components represented by the MOML source codes displayed by the conversion output on the UI screen in accordance with a diagram display command of an app developer. 청구항 1 내지 청구항 3중 어느 한 항에 있어서, 상기 앱 메이커 생성 표시부는 상기 캔버스 영역의 UI 화면상에 표시되는 그래픽 컴포넌트들의 계층적 파일 구조를 생성하여 표시하기 위한 UI 파일구조 표시창을 상기 앱 메이커 윈도우창에 더 표시함을 특징으로 하는 위지윅 에디터 시스템.The method as claimed in any one of claims 1 to 3, wherein the app maker creation display unit displays a UI file structure display window for creating and displaying a hierarchical file structure of graphic components displayed on the UI screen of the canvas area, Window in the window. 청구항 4에 있어서, 상기 앱 메이커 생성 표시부는 상기 그래픽 컴포넌트들의 속성을 입력하기 위한 속성 표시 입력창을 상기 앱 메이커 윈도우창에 더 표시함을 특징으로 하는 위지윅 에디터 시스템.The WYSIWYG editor system of claim 4, wherein the app maker creation display unit further displays an attribute display input window for inputting the attributes of the graphic components in the app maker window. 청구항 1 내지 청구항 3중 어느 한 항에 있어서, 상기 앱 메이커 생성 표시부는 상기 그래픽 컴포넌트들의 속성을 입력하기 위한 속성 표시 입력창을 상기 앱 메이커 윈도우창에 더 표시함을 특징으로 하는 위지윅 에디터 시스템.The WYSIWYG editor system according to any one of claims 1 to 3, wherein the app maker creation display unit further displays an attribute display input window for inputting the attributes of the graphic components in the app maker window.
KR1020140063634A 2014-05-27 2014-05-27 Wysiwyg editor system KR20150136310A (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
KR1020140063634A KR20150136310A (en) 2014-05-27 2014-05-27 Wysiwyg editor system

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
KR1020140063634A KR20150136310A (en) 2014-05-27 2014-05-27 Wysiwyg editor system

Publications (1)

Publication Number Publication Date
KR20150136310A true KR20150136310A (en) 2015-12-07

Family

ID=54872300

Family Applications (1)

Application Number Title Priority Date Filing Date
KR1020140063634A KR20150136310A (en) 2014-05-27 2014-05-27 Wysiwyg editor system

Country Status (1)

Country Link
KR (1) KR20150136310A (en)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR20200025441A (en) 2018-08-30 2020-03-10 쉬프트정보통신 주식회사 Method of performing synchronization between html execution screen and edit screen using a tag, and program implementing the same

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR20200025441A (en) 2018-08-30 2020-03-10 쉬프트정보통신 주식회사 Method of performing synchronization between html execution screen and edit screen using a tag, and program implementing the same

Similar Documents

Publication Publication Date Title
US10255044B2 (en) Method and system for modifying deployed applications
US20230036518A1 (en) System and method for smart interaction between website components
US20140047409A1 (en) Enterprise application development tool
JP7420911B2 (en) Systems and methods for smart interactions between website components
CN103309659A (en) User interface dynamic generation method and device based on rich client platform
Allen et al. Beginning Android 4
US9286270B2 (en) Simultaneously displaying multiple related documents in a logically hierarchical manner
da Silva et al. Model-driven gui generation and navigation for android bis apps
US20110126171A1 (en) Dynamic native editor code view facade
US11231909B2 (en) Validation for graphical user interface
KR101649822B1 (en) Apparatus and method for building web-page
KR20150136310A (en) Wysiwyg editor system
KR101546359B1 (en) Web page making system and method for maintaining compatibility of web browser and font
JP4889338B2 (en) Screen program layout changing method, information processing apparatus, program, and recording medium
KR20140137630A (en) Widget authoring system and method thereof
US20140157105A1 (en) Methods and systems for creating custom digital publications
GB2523074A (en) A method and system for modifying deployed applications
BRPI0719484B1 (en) METHOD, EQUIPMENT AND PROGRAM TO SUPPORT OBJECT SELECTION IN THE CREATION OF WEB PAGES
CN105677340A (en) FTK based quick touch screen interface development method
Brüggemann-Klein et al. Graphical User Interface Tool forDesigningModel-BasedUserInterfaces with UIML
JP2004537793A (en) Control / Display Unit Page Builder Software Tool
Feiler Exploring Swift Playgrounds: The Fastest and Most Effective Way to Learn to Code and to Teach Others to Use Your Code
Kato et al. Form Follows Function () An IDE to Create Laser-cut Interfaces and Microcontroller Programs from Single Code Base
Braxton et al. dot-app: a Graphviz-Cytoscape conversion plug-in
Moberg et al. SlideNoter-Developing a notepad application for Android tablets

Legal Events

Date Code Title Description
A201 Request for examination
E902 Notification of reason for refusal
E601 Decision to refuse application