[go: up one dir, main page]
More Web Proxy on the site http://driver.im/

KR20150097150A - A method for providing an application developing environment - Google Patents

A method for providing an application developing environment Download PDF

Info

Publication number
KR20150097150A
KR20150097150A KR1020140018350A KR20140018350A KR20150097150A KR 20150097150 A KR20150097150 A KR 20150097150A KR 1020140018350 A KR1020140018350 A KR 1020140018350A KR 20140018350 A KR20140018350 A KR 20140018350A KR 20150097150 A KR20150097150 A KR 20150097150A
Authority
KR
South Korea
Prior art keywords
component
information
screen
application
page
Prior art date
Application number
KR1020140018350A
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 KR1020140018350A priority Critical patent/KR20150097150A/en
Publication of KR20150097150A publication Critical patent/KR20150097150A/en

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00Arrangements for program control, e.g. control units
    • G06F9/06Arrangements 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/44Arrangements for executing specific programs
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F15/00Digital computers in general; Data processing equipment in general
    • G06F15/16Combinations of two or more digital computers each having at least an arithmetic unit, a program unit and a register, e.g. for a simultaneous processing of several programs

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Theoretical Computer Science (AREA)
  • Computer Hardware Design (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Stored Programmes (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

According to an embodiment of the present invention, a method for providing environment for developing applications includes: a step of storing a form page separated into two or more pages; a step of displaying an application project setting screen for the input of one or more pieces of information on an application to be developed; a step of generating an application project corresponding to the inputted information; a step of displaying a first screen including a form tab area for setting the connection between the pages; a step of displaying a second screen showing the connection between multiple components; a step of displaying a predefined component list including multiple component items; and a step of inserting a code corresponding to a moved component item into an application code.

Description

애플리케이션 개발 환경 제공 방법 {A method for providing an application developing environment}[0001] The present invention relates to a method for providing an application development environment,

본 발명은 애플리케이션 개발 환경 제공 방법에 관한 것이며, 더욱 상세하게는 애플리케이션 개발자의 개발 효율을 향상시킬 수 있는 애플리케이션 개발 환경 제공 방법에 관한 것이다.
The present invention relates to a method of providing an application development environment, and more particularly, to a method of providing an application development environment capable of improving development efficiency of an application developer.

최근, 다양한 종류의 스마트 폰이나 태블릿 PC과 같은 단말 장치들이 등장함에 따라 이러한 단말 장치들에서 사용할 수 있는 애플리케이션에 대한 관심이 증폭되고 있다.2. Description of the Related Art In recent years, various types of terminal devices such as smart phones and tablet PCs have emerged, and interest in applications that can be used in such terminal devices is being amplified.

특히, 최근에는 개발자들이 애플리케이션을 개발하여 소정의 애플리케이션 스토어에 업로드하면, 사용자들이 단말 장치를 이용하여 상기 애플리케이션 스토어에 접속한 후 자신이 원하는 애플리케이션을 구매하여 다운로드하는 방식이 널리 이용되고 있다. 이에 따라, 다양한 분야에서 애플리케이션 개발이 활발하게 이루어지고 있다.Particularly, in recent years, when a developer develops an application and uploads the application to a predetermined application store, a method in which users access the application store using a terminal device, and then purchase and download an application desired by the user is widely used. Accordingly, application development is actively performed in various fields.

이와 같이 다양하고, 활발한 애플리케이션 개발을 위해서, 일반적으로 C 언어, 자바(JAVA), OBDC, SQL 등을 다룰 줄 아는 전문가들은 직접적인 코드 작성 및 개발을 수행하고 있다.In order to develop such diverse and active applications, experts who are dealing with C language, Java (JAVA), OBDC, SQL etc. are generally doing direct code writing and development.

도 1은 일반적인 애플리케이션 개발 환경을 나타내는 도면이다.1 is a diagram showing a general application development environment.

도 1에 도시된 바와 같이, 일반적인 애플리케이션 개발은 각각의 이벤트 또는 윈도우 메시지에 의한 단계별 매칭을 위해 Activity, Dialog, Frame 등과 같은 위젯들을 선언하고, 이를 상속받는 이벤트 프로시져(procedure)를 소정의 코드로 구현하는 방식에 의해 이루어지고 있다.As shown in FIG. 1, in general application development, widgets such as Activity, Dialog, Frame, and the like are declared for step-by-step matching by each event or window message, and an event procedure And the like.

그러나, 이와 같은 개발 방식은 숙련된 개발자만이 접근할 수 있으며, 앞서 설명한 언어들에 대한 전문 지식들을 필요로 한다. 그리고, 개발자는 많은 양의 코드를 이벤트 프로시져를 통해 직접 구현해야 하므로 많은 지식과 상당한 노력을 들여 애플리케이션 개발을 수행하여야 하는 어려움이 있다.However, such a development approach is only accessible to experienced developers and requires expertise in the languages described above. In addition, the developer must implement a large amount of code directly through the event procedure, so that it is difficult to perform application development with a lot of knowledge and considerable effort.

또한, 개발된 코드에 의한 서비스 시나리오에 변경이 있는 경우, 개발자는 다시 많은 코드들을 변경해야 하는 문제점이 있다.Further, when there is a change in the service scenario based on the developed code, the developer has to change many codes again.

뿐만 아니라, 개발자마다 전문 지식의 정도 및 개인적인 코드 스타일 차이가 상이하여 단체협업 또는 개발자 교체시 모듈간 호환성 확보에 어려움이 있으며, 모듈화에 대한 이해도에 따라 코드가 복잡하게 생산될 수 있어 치명적인 버그가 다수 발생할 수 있다.In addition, there is a difference in the degree of expertise and personal code style among developers, so it is difficult to ensure interoperability between modules when collective collaboration or developer replacement, and code can be complicated according to understanding of modularity, Lt; / RTI >

한편, 개발자가 동일한 기능을 갖는 애플리케이션을 개발하더라도 그 애플리케이션이 적용될 OS의 플랫폼에 따라 서로 다른 애플리케이션 개발 툴을 이용하여 개발을 수행해야 하는 문제가 있으며, 애플리케이션의 중복 개발에 따른 노력과 시간이 많이 소요될 수 있다.
On the other hand, even if a developer develops an application having the same function, there is a problem that development must be performed using different application development tools depending on the platform of the OS to which the application is applied. In addition, .

본 발명의 목적은, 개발자의 개발 효율을 향상시킬 수 있는 애플리케이션 개발 환경 제공 방법을 제공함에 있다.It is an object of the present invention to provide a method of providing an application development environment capable of improving development efficiency of a developer.

또한, 복잡하고 전문적인 지식 없이도 시나리오 관리 및 애플리케이션 개발을 용이하게 할 수 있는 유저 인터페이스를 제공하는 애플리케이션 개발 환경 제공 방법을 제공함에 있다.It is another object of the present invention to provide a method of providing an application development environment that provides a user interface that facilitates scenario management and application development without complicated and specialized knowledge.

또한, 본 발명의 또 다른 목적은 모듈간 호환성을 유지하면서도 다양한 기기에 적응적으로 변환 적용할 수 있어 중복 개발을 방지할 수 있는 애플리케이션 개발 환경 제공 방법을 제공함에 있다.
It is still another object of the present invention to provide an application development environment providing method capable of adaptively applying conversion and adaptation to various devices while maintaining compatibility between modules, thereby preventing duplication of development.

상기 목적을 달성하기 위한 본 발명의 실시 예에 따른 애플리케이션 개발 환경 제공 방법은 폼 페이지를 두 개 이상의 페이지로 분리하여 저장하는 단계;According to another aspect of the present invention, there is provided an application development environment providing method comprising: dividing a form page into two or more pages;

개발 대상 애플리케이션의 식별 정보, 버전 정보, 개발자 정보, 인증정보, 이미지 정보, 데이터베이스 연결 정보, 서버 연결 정보, 모듈 정보 및 소스정보를 하나 이상 입력하기 위한 애플리케이션 프로젝트 설정 화면을 표시하는 단계;Displaying an application project setting screen for inputting at least one of identification information, version information, developer information, authentication information, image information, database connection information, server connection information, module information, and source information of a development target application;

상기 애플리케이션 프로젝트 설정 화면 상에 개발 대상 애플리케이션의 식별 정보, 버전 정보, 개발자 정보, 인증정보, 이미지 정보, 데이터베이스 연결 정보, 서버 연결 정보, 모듈 정보 및 소스정보가 하나 이상 입력되면, 입력된 정보에 부합되는 애플리케이션 프로젝트를 생성하는 단계;When one or more pieces of identification information, version information, developer information, authentication information, image information, database connection information, server connection information, module information, and source information of a development target application are inputted on the application project setting screen, Creating an application project;

애플리케이션을 구성하는 복수의 페이지 이미지와 상기 복수의 페이지 이미지를 연결하는 복수개의 화살표 이미지를 통해 상기 애플리케이션을 구성하는 복수의 페이지 이미지 사이의 연결 관계를 나타내는 페이지 간 연결 영역과 상기 페이지 간 연결 영역 상에 페이지를 추가하고, 페이지들 간 연결 관계를 설정하기 위한 폼 탭 영역을 포함하는 제1화면을 표시하는 단계;An inter-page connection area indicating a connection relationship between a plurality of page images constituting an application and a plurality of page images constituting the application through a plurality of arrow images connecting the plurality of page images, Displaying a first screen including a form tab area for adding a page and establishing a connection relationship between the pages;

상기 복수의 페이지들 중 어느 하나에 대하여 각 페이지 내에서 각 화면 또는 기능을 담당하는 복수의 컴포넌트들의 사이의 관계를 화살표로 연결-이벤트 정보를 포함하는 제1 컴포넌트와 액션 정보를 포함하는 제2 컴포넌트가 화살표로 연결-하여 나타내는 제2 화면을 표시하는 단계;Linking the relationship between a plurality of components responsible for each screen or function within each page for any one of the plurality of pages with arrows - a first component including event information and a second component including action information Displaying a second screen by connecting with an arrow;

상기 제2 화면에서 이벤트 정보를 포함하는 제1 컴포넌트와 액션 정보를 포함하는 제2 컴포넌트가 화살표로 연결되면, 상기 제1컴포넌트와 제2컴포넌트간 연결에 대응하는 코드를 자동으로 생성하는 단계;Automatically generating a code corresponding to a connection between the first component and the second component when a first component including event information and a second component including action information are connected by an arrow in the second screen;

상기 복수의 페이지 중 하나에 추가할 수 있는 미리 정의된 컴포넌트 리스트-복수의 컴포넌트 아이템들을 포함하며, 각각의 컴포넌트 아이템들은 미리 정의된 기능 또는 화면을 가지는 각 컴포넌트 코드에 대응하는 컴포넌트 리스트-를 표시하는 단계;A list of predefined components that can be added to one of the plurality of pages - a plurality of component items, each component item representing a component list corresponding to each component code having a predefined function or screen step;

상기 컴포넌트 아이템들 중 어느 하나가 선택되어 드래그 앤 드랍 방식으로 페이지 화면에 이동되면, 상기 이동된 컴포넌트 아이템에 대응되는 코드를 애플리케이션 코드에 삽입하는 단계;를 포함하는 애플리케이션 개발 환경 제공 방법이다.
And inserting a code corresponding to the moved component item into the application code when any one of the component items is selected and moved to a page screen in a drag and drop manner.

본 발명의 실시예에 따르면, 애플리케이션 개발 환경을 제공할 때 복수의 페이지들간 연결 관계를 나타내는 제1 화면을 표시하고, 어느 하나의 페이지에 대하여 컴포넌트간 연결 관계를 나타내는 제2 화면을 표시하게 된다.According to an embodiment of the present invention, when providing an application development environment, a first screen showing a connection relationship between a plurality of pages is displayed, and a second screen showing a connection relationship between the components is displayed on any one of the pages.

특히, 이벤트 정보를 포함하는 제1 컴포넌트와 액션 정보를 포함하는 제2 컴포넌트를 연결하여 컴포넌트간 연결 관계를 직관적으로 표시할 수 있게 된다.In particular, the first component including the event information and the second component including the action information can be connected to intuitively display the connection relationship between the components.

한편, 컴포넌트간 연결 관계를 나타내는 이미지 객체에 대한 변형에 따라 연결 관계가 변경될 수 있어 전문적인 지식이 없는 일반 개발자라 하더라도, 컴포넌트간 연결관계 및 시나리오 구현을 용이하게 수행할 수 있게 된다.Meanwhile, since the connection relation can be changed according to the transformation of the image object indicating the connection relation between the components, even the general developer who does not have the expert knowledge can easily perform the connection relationship between the components and the scenario implementation.

또한, 이와 같은 애플리케이션 개발을 위해 본 발명의 실시 예에 따른 중간 언어를 이용함으로써, 동일한 애플리케이션을 서로 다른 OS의 플랫폼으로 용이하게 변환 적용할 수 있게 된다. 따라서, 한 번의 애플리케이션 개발을 통해 다양한 OS에서 이용 가능한 애플리케이션을 개발할 수 있게 되므로 개발에 필요한 시간과 노력을 크게 저감시킬 수 있다.In addition, by using an intermediate language according to the embodiment of the present invention for developing such an application, the same application can be easily converted and applied to different OS platforms. Therefore, it is possible to develop applications that can be used in various OSs through a single application development, thereby greatly reducing the time and effort required for development.

또한, 애플리케이션 개발을 용이하게 하기 위한 다양한 유저 인터페이스 및 그 동작을 제공할 수 있어, 개발자의 이용 편의성이 증대될 수 있다.
In addition, various user interfaces and operations for facilitating application development can be provided, and the convenience of use of the developer can be increased.

도 1은 일반적인 애플리케이션 개발 화면을 나타낸다.
도 2는 본 발명의 일 실시 예에 따른 애플리케이션 개발 환경 제공 장치를 포함하는 전체 개발 시스템의 일 예를 개략적으로 나타낸 도면이다.
도 3은 본 발명의 일 실시 예에 따른 애플리케이션 개발환경 제공장치의 세부 구성을 나타낸다.
도 4 내지 도 7은 본 발명의 일 실시 예에 따른 애플리케이션 개발 환경 제공 방법을 설명하기 위한 도면들이다.
도 8은 본 발명의 실시 예에 따른 제2 화면과 실제 코드와의 관계를 나타내는 도면이다.
도 9은 본 발명의 일 실시 예에 따른 제2 화면(120)의 액션 리스트를 설명하기 위한 도면이다.
도 10는 본 발명의 다른 일 실시 예에 따른 애플리케이션 개발 환경 제공 장치(100)의 컴포넌트 블록 표시 및 연결관계 표시 방법을 나타낸다.
도 11은 본 발명의 일 실시 예에 따른 애플리케이션 개발 환경 제공 장치(100)의 컴포넌트 추가 방법을 설명하기 위한 도면이다.
도 12은 본 발명의 일 실시 예에 따른 애플리케이션 개발 환경 제공 장치(100)의 데이터 바인딩(binding) 방법을 나타낸다.
도 13는 본 발명의 일 실시 예에 따른 애플리케이션 개발 환경 제공 장치(100)의 관계형 데이터베이스 관리 시스템(RDBMS) 설정 방법을 나타낸다.
도 14은 본 발명의 일 실시 예에 따른 애플리케이션 개발 환경 제공 장치(100)의 오픈 API형 데이터 설정 방법을 나타낸다.
도 15는 본 발명의 일 실시 예에 따른 애플리케이션 개발 환경 제공 장치(100)의 전문 Restful/SOAP 설정 방법을 나타낸다.
도 16 내지 도 25는 본 발명의 다른 일 실시 예에 따른 애플리케이션 개발 환경 제공 방법을 설명하기 위한 도면들이다.
도 26는 애플리케이션 개발 환경 제공 장치(100)가 타겟 단말기(300)에 구동 가능한 제2 언어로 변환하여 출력한 애플리케이션이 타겟 단말기(300)에서 실행된 화면을 나타낸다.
도 27 및 도 28은 본 발명의 다른 일 실시 예에 따른 애플리케이션 개발 환경 제공 장치(100)에서 제공되는 제2 화면의 컴포넌트 배치 방법을 나타낸다.
도 29은 본 발명의 또 다른 일 실시 예에 따른 애플리케이션 개발 환경 제공 장치(100)의 레이아웃 방법을 나타낸다.
도 29 내지 도 31은 블록 레이아웃의 실시 예들을 나타낸다.
도 32은 애플리케이션 개발 환경 제공 장치(100)의 플랫폼을 도식화한 블록도이며, 도 33는 애플리케이션을 실행할 수 있는 단말기(300)의 플랫폼을 도식화한 블록도이고, 도 34은 서버(300)의 아키텍쳐를 나타내는 블록도이다.
도 35는 본 발명의 실시 예에 따른 컴포넌트 구조도를 나타낸다.
도 36 내지 도 53는 본 발명의 실시 예에 따른 애플리케이션 개발 환경 제공 방법에 따라 제공되는 화면들을 이용하여 애플리케이션이 생성되는 과정을 설명하기 위하여 참조되는 도면들이다.
1 shows a general application development screen.
FIG. 2 is a diagram schematically showing an example of a whole development system including an application development environment providing apparatus according to an embodiment of the present invention.
3 shows a detailed configuration of an application development environment providing apparatus according to an embodiment of the present invention.
4 to 7 are diagrams for explaining a method of providing an application development environment according to an embodiment of the present invention.
8 is a diagram showing a relationship between a second screen and an actual code according to the embodiment of the present invention.
FIG. 9 is a view for explaining an action list of the second screen 120 according to an embodiment of the present invention.
10 illustrates a method of displaying a component block and a connection relationship in an application development environment providing apparatus 100 according to another embodiment of the present invention.
11 is a diagram for explaining a method of adding a component of an application development environment providing apparatus 100 according to an embodiment of the present invention.
FIG. 12 shows a data binding method of an apparatus 100 for providing an application development environment according to an embodiment of the present invention.
FIG. 13 shows a relational database management system (RDBMS) setting method of an application development environment provision apparatus 100 according to an embodiment of the present invention.
14 shows an open API type data setting method of the application development environment provision apparatus 100 according to an embodiment of the present invention.
FIG. 15 shows a detailed restful / SOAP setting method of the application development environment provision apparatus 100 according to an embodiment of the present invention.
16 to 25 are diagrams for explaining a method of providing an application development environment according to another embodiment of the present invention.
26 shows a screen in which an application converted by the application development environment providing apparatus 100 into a second language that can be driven by the target terminal 300 and output by the target terminal 300 is executed.
27 and 28 illustrate a method of arranging the components of the second screen provided in the application development environment providing apparatus 100 according to another embodiment of the present invention.
29 shows a layout method of an application development environment providing apparatus 100 according to another embodiment of the present invention.
Figures 29-31 illustrate embodiments of block layout.
33 is a block diagram illustrating a platform of a terminal 300 capable of executing an application and FIG. 34 is a block diagram illustrating an architecture of the server 300 according to an embodiment of the present invention. FIG. Fig.
35 shows a component structural view according to an embodiment of the present invention.
FIGS. 36 to 53 are views for explaining a process of creating an application using screens provided according to an application development environment providing method according to an embodiment of the present invention.

이하의 내용은 단지 본 발명의 원리를 예시한다. 그러므로 당업자는 비록 본 명세서에 명확히 설명되거나 도시되지 않았지만 본 발명의 원리를 구현하고 본 발명의 개념과 범위에 포함된 다양한 장치를 발명할 수 있는 것이다. 또한, 본 명세서에 열거된 모든 조건부 용어 및 실시예들은 원칙적으로, 본 발명의 개념이 이해되도록 하기 위한 목적으로만 명백히 의도되고, 이와 같이 특별히 열거된 실시예들 및 상태들에 제한적이지 않는 것으로 이해되어야 한다.The following merely illustrates the principles of the invention. Thus, those skilled in the art will be able to devise various apparatuses which, although not explicitly described or shown herein, embody the principles of the invention and are included in the concept and scope of the invention. Furthermore, all of the conditional terms and embodiments listed herein are, in principle, intended only for the purpose of enabling understanding of the concepts of the present invention, and are not intended to be limiting in any way to the specifically listed embodiments and conditions .

또한, 본 발명의 원리, 관점 및 실시예들 뿐만 아니라 특정 실시예를 열거하는 모든 상세한 설명은 이러한 사항의 구조적 및 기능적 균등물을 포함하도록 의도되는 것으로 이해되어야 한다. 또한 이러한 균등물들은 현재 공지된 균등물뿐만 아니라 장래에 개발될 균등물 즉 구조와 무관하게 동일한 기능을 수행하도록 발명된 모든 소자를 포함하는 것으로 이해되어야 한다.It is also to be understood that the detailed description, as well as the principles, aspects and embodiments of the invention, as well as specific embodiments thereof, are intended to cover structural and functional equivalents thereof. It is also to be understood that such equivalents include all elements contemplated to perform the same function irrespective of the currently known equivalents as well as the equivalents to be developed in the future, i.e., the structure.

따라서, 예를 들어, 본 명세서의 블럭도는 본 발명의 원리를 구체화하는 예시적인 회로의 개념적인 관점을 나타내는 것으로 이해되어야 한다. 이와 유사하게, 모든 흐름도, 상태 변환도, 의사 코드 등은 컴퓨터가 판독 가능한 매체에 실질적으로 나타낼 수 있고 컴퓨터 또는 프로세서가 명백히 도시되었는지 여부를 불문하고 컴퓨터 또는 프로세서에 의해 수행되는 다양한 프로세스를 나타내는 것으로 이해되어야 한다.Thus, for example, it should be understood that the block diagrams herein represent conceptual views of exemplary circuits embodying the principles of the invention. Similarly, all flowcharts, state transition diagrams, pseudo code, and the like are representative of various processes that may be substantially represented on a computer-readable medium and executed by a computer or processor, whether or not the computer or processor is explicitly shown .

프로세서 또는 이와 유사한 개념으로 표시된 기능 블럭을 포함하는 도면에 도시된 다양한 소자의 기능은 전용 하드웨어뿐만 아니라 적절한 소프트웨어와 관련하여 소프트웨어를 실행할 능력을 가진 하드웨어의 사용으로 제공될 수 있다. 프로세서에 의해 제공될 때, 상기 기능은 단일 전용 프로세서, 단일 공유 프로세서 또는 복수의 개별적 프로세서에 의해 제공될 수 있고, 이들 중 일부는 공유될 수 있다.The functions of the various elements shown in the figures, including the functional blocks depicted in the processor or similar concept, may be provided by use of dedicated hardware as well as hardware capable of executing software in connection with appropriate software. When provided by a processor, the functions may be provided by a single dedicated processor, a single shared processor, or a plurality of individual processors, some of which may be shared.

또한 프로세서, 제어 또는 이와 유사한 개념으로 제시되는 용어의 명확한 사용은 소프트웨어를 실행할 능력을 가진 하드웨어를 배타적으로 인용하여 해석되어서는 아니되고, 제한 없이 디지털 신호 프로세서(DSP) 하드웨어, 소프트웨어를 저장하기 위한 롬(ROM), 램(RAM) 및 비 휘발성 메모리를 암시적으로 포함하는 것으로 이해되어야 한다. 주지관용의 다른 하드웨어도 포함될 수 있다.Also, the explicit use of terms such as processor, control, or similar concepts should not be interpreted exclusively as hardware capable of running software, and may be used without limitation as a digital signal processor (DSP) (ROM), random access memory (RAM), and non-volatile memory. Other hardware may also be included.

본 명세서의 청구범위에서, 상세한 설명에 기재된 기능을 수행하기 위한 수단으로 표현된 구성요소는 예를 들어 상기 기능을 수행하는 회로 소자의 조합 또는 펌웨어/마이크로 코드 등을 포함하는 모든 형식의 소프트웨어를 포함하는 기능을 수행하는 모든 방법을 포함하는 것으로 의도되었으며, 상기 기능을 수행하도록 상기 소프트웨어를 실행하기 위한 적절한 회로와 결합된다. 이러한 청구범위에 의해 정의되는 본 발명은 다양하게 열거된 수단에 의해 제공되는 기능들이 결합되고 청구항이 요구하는 방식과 결합되기 때문에 상기 기능을 제공할 수 있는 어떠한 수단도 본 명세서로부터 파악되는 것과 균등한 것으로 이해되어야 한다.In the claims hereof, the elements represented as means for performing the functions described in the detailed description include all types of software including, for example, a combination of circuit elements performing the function or firmware / microcode etc. , And is coupled with appropriate circuitry to execute the software to perform the function. It is to be understood that the invention defined by the appended claims is not to be construed as encompassing any means capable of providing such functionality, as the functions provided by the various listed means are combined and combined with the manner in which the claims require .

상술한 목적, 특징 및 장점은 첨부된 도면과 관련한 다음의 상세한 설명을 통하여 보다 분명해질 것이며, 그에 따라 본 발명이 속하는 기술분야에서 통상의 지식을 가진 자가 본 발명의 기술적 사상을 용이하게 실시할 수 있을 것이다. 또한, 본 발명을 설명함에 있어서 본 발명과 관련된 공지 기술에 대한 구체적인 설명이 본 발명의 요지를 불필요하게 흐릴 수 있다고 판단되는 경우에 그 상세한 설명을 생략하기로 한다. BRIEF DESCRIPTION OF THE DRAWINGS The above and other objects, features and advantages of the present invention will become more apparent from the following detailed description of the present invention when taken in conjunction with the accompanying drawings, in which: There will be. In the following description, well-known functions or constructions are not described in detail since they would obscure the invention in unnecessary detail.

이하, 첨부된 도면을 참조하여 본 발명에 따른 바람직한 일 실시예를 상세히 설명하기로 한다.Hereinafter, a preferred embodiment of the present invention will be described in detail with reference to the accompanying drawings.

도 2는 본 발명의 일 실시 예에 따른 애플리케이션 개발 환경 제공 장치(100)를 포함하는 애플리케이션 개발 시스템의 일 예를 개략적으로 나타낸 도면이다.2 is a diagram schematically showing an example of an application development system including an application development environment provision apparatus 100 according to an embodiment of the present invention.

도 2를 참조하면, 본 발명의 일 실시 예에 따른 애플리케이션 개발 시스템은 애플리케이션 개발 환경 제공 장치(100), 서버(200), 단말기(300) 및 마켓 네트워크(400)를 포함한다.2, an application development system according to an embodiment of the present invention includes an application development environment provision apparatus 100, a server 200, a terminal 300, and a market network 400.

애플리케이션 개발 환경 제공 장치(100)는 본 발명의 실시 예에 따라 애플리케이션을 구성하는 복수의 페이지들 사이의 연결관계 및 상기 복수의 페이지들 중 어느 하나에 대하여 복수의 컴포넌트들의 사이의 연결관계를 직관적으로 나타내는 화면들을 제공할 수 있다. The application development environment provision apparatus 100 intuitively manages a connection relationship between a plurality of pages constituting an application and a connection relation between a plurality of components with respect to any one of the plurality of pages according to an embodiment of the present invention Can be provided.

이를 위해, 애플리케이션 개발 환경 제공 장치(100)는 애플리케이션을 구성하는 복수의 페이지들 사이의 연결관계를 나타내는 제1 화면을 표시하고, 상기 복수의 페이지들 중 어느 하나에 대하여 복수의 컴포넌트들의 사이의 연결관계를 나타내는 제2 화면을 표시하는 표시부 및 상기 제2 화면에서 이벤트 정보를 포함하는 제1 컴포넌트와 액션 정보를 포함하는 제2 컴포넌트가 연결되도록 제어하는 제어부를 포함할 수 있다.To this end, the application development environment providing apparatus 100 displays a first screen showing a connection relationship between a plurality of pages constituting an application, and connects a connection among a plurality of components to any one of the plurality of pages And a controller for controlling a connection between a first component including event information and a second component including action information on the second screen.

여기서, 애플리케이션은 애플리케이션 개발 환경 제공 장치(100) 또는 단말기(300)에서 실행하기 위한 애플리케이션 데이터를 의미할 수 있다. 그리고, 애플리케이션 데이터는 애플리케이션 개발 환경 제공 장치(100)에 의해 생성될 수 있으며, 단말기(300)로 직접 전송될 수 있다. Here, the application may mean application data to be executed by the application development environment providing apparatus 100 or the terminal 300. [ The application data may be generated by the application development environment providing apparatus 100 and directly transmitted to the terminal 300. [

또한, 생성된 애플리케이션 데이터는 마켓 네트워크(400)로 업로드 될 수 있고, 업로드 된 애플리케이션 데이터는 구매 인증된 단말기(300)로 전송될 수도 있다. In addition, the generated application data may be uploaded to the market network 400, and the uploaded application data may be transmitted to the purchase authenticated terminal 300.

그리고, 애플리케이션은 복수의 페이지들을 포함할 수 있으며, 각 페이지들은 복수의 컴포넌트를 포함할 수 있다. And, the application may include a plurality of pages, and each page may include a plurality of components.

애플리케이션 페이지는 단말기(300)에 의해 해석되어 실행되는 객체로서의 전자 문서 또는 그래픽 유저 인터페이스를 의미할 수 있다. 또한, 각 페이지에 포함된 복수의 컴포넌트들은 구조적으로 다른 페이지에 포함되는 컴포넌트들과 연결 관계를 형성할 수 있다. The application page may refer to an electronic document or graphical user interface as an object interpreted and executed by the terminal 300. [ In addition, a plurality of components included in each page may form a connection relationship with components included in other pages structurally.

이와 같은 연결 관계는, 특정 컴포넌트에 포함된 이벤트 정보가 다른 컴포넌트의 액션 정보와 연결되는 경우 형성될 수 있다. Such a connection relationship may be formed when event information included in a specific component is linked to action information of another component.

보다 구체적으로, 애플리케이션이 실행되고, 상기 이벤트 정보에 기초하여 특정 컴포넌트의 이벤트가 발생하면, 이와 연결된 타 컴포넌트의 액션 정보에 기초하여 상기 타 컴포넌트에 대한 액션이 수행될 수 있다. More specifically, when an application is executed and an event of a specific component is generated based on the event information, an action for the other component may be performed based on action information of another component connected to the event.

따라서, 단말기(300)는 애플리케이션이 실행되면, 복수의 페이지간 연결 관계 및 각 컴포넌트들간 연결 관계에 의해 다양한 동작을 수행할 수 있다. 그리고, 개발자는 이를 이용하여 다양한 애플리케이션 서비스를 제공할 수 있게 된다. 특히, 본 발명의 실시 예에 따르면, 이와 같은 페이지 및 컴포넌트간 연결 관계 설정을 위한 직관적이고 단순한 인터페이스를 제공함으로써 개발을 위한 시간 및 노력을 저감시킴은 물론이며 프로그래밍에 대한 전문 지식 없이도 애플리케이션 개발을 매우 용이하게 되는 효과가 있다.Accordingly, when the application is executed, the terminal 300 can perform various operations according to a connection relationship among a plurality of pages and a connection relation between the respective components. Then, the developer can use this to provide various application services. In particular, according to the embodiment of the present invention, it is possible to reduce time and effort for development by providing an intuitive and simple interface for establishing a connection relationship between pages and components, There is an effect that it becomes easy.

한편, 애플리케이션 개발 환경 제공 장치(100)는 애플리케이션 개발 환경을 통해 생성되는 애플리케이션 프로젝트를 중간 언어로 구성할 수 있으며, 중간 언어로 구성된 애플리케이션 프로젝트 또는 애플리케이션 코드를 타겟 단말기의 타겟 플랫폼 또는 OS에 따라 적응적으로 변환할 수 있다. 그리고, 애플리케이션 개발 환경 제공 장치(100)는 타겟 단말기에서 실행 가능한 애플리케이션을 출력할 수 있다.Meanwhile, the application development environment providing apparatus 100 can configure an application project, which is generated through an application development environment, as an intermediate language. The application project or application code configured in an intermediate language can be adaptively managed according to the target platform or OS of the target terminal . ≪ / RTI > Then, the application development environment provision apparatus 100 can output an executable application in the target terminal.

특히, 애플리케이션 개발 환경 제공 장치(100)는 기존의 정형화된 개발 패턴의 문제점과 코드 재사용성이 낮은 문제점들을 해결하기 위해, 컴포넌트 기반의 중간 언어로 구성되는 애플리케이션을 생성할 수 있다. 이에 따라 애플리케이션 개발자는 시나리오 기획, 서버 개발 및 클라이언트 개발을 동시적으로 수행할 수 있게 된다.In particular, the application development environment provision apparatus 100 can generate an application configured as a component-based intermediate language in order to solve the problems of the conventional formal development pattern and low code reusability. As a result, application developers can perform scenario planning, server development, and client development concurrently.

그리고, 애플리케이션 개발 환경 제공 장치(100)는 어플리케이션 개발을 위한 통합 플랫폼을 제공할 수 있으며, UX 컴포넌트 및 서버 컴포넌트 개발 및 템플릿 개발을 추가 할 수 있는 인터페이스를 제공할 수 있고, 누구나 쉽게 컴포넌트를 제작하고 쉽게 추가 할 수 있는 오픈 플랫폼을 제공할 수 있다. 따라서, 본 발명의 실시 예에 따르면 개발자 중심이 아닌 사용자 및 제품 중심으로서의 애플리케이션 개발 환경을 제공할 수 있게 된다.The application development environment provision apparatus 100 can provide an integrated platform for application development, provide an interface to add UX component and server component development and template development, and can easily create a component You can provide an open platform that you can easily add. Therefore, according to the embodiment of the present invention, it is possible to provide an application development environment as a user-centered product rather than a developer-oriented environment.

한편, 서버(200)는 애플리케이션 개발 환경 제공 장치(100)와 연결될 수 있으며, 애플리케이션 개발 환경 제공 장치(100)에서 필요한 데이터 및 인증 정보 등을 제공할 수 있다. Meanwhile, the server 200 can be connected to the application development environment providing apparatus 100, and can provide necessary data, authentication information, and the like in the application development environment providing apparatus 100.

또한, 서버(200)는 애플리케이션 개발 환경 제공 장치(100)의 버전 정보를 체크할 수 있으며, 업데이트를 제공할 수도 있다. 그리고, 서버(200)는 애플리케이션 개발 환경 제공 장치(100)에서 필요로 하는 데이터베이스 또는 WAS(Web Application Server)를 포함할 수 있다.In addition, the server 200 may check the version information of the application development environment provision apparatus 100 and may provide an update. The server 200 may include a database or a WAS (Web Application Server) required by the application development environment providing apparatus 100.

특히, 서버(200)는 애플리케이션 개발 환경 제공 장치(100)에서 사용될 수 있는 컴포넌트 데이터베이스를 포함할 수 있다. 그리고, 서버(200)는 특정 컴포넌트의 구매가 인증된 애플리케이션 개발 환경 제공 장치(100)로 해당 컴포넌트를 전송할 수 있다. 그리고 서버(200)는 컴포넌트의 해석을 위한 웹 컨테이너를 포함할 수도 있다.In particular, the server 200 may include a component database that can be used in the application development environment providing apparatus 100. The server 200 may transmit the component to the application development environment providing apparatus 100 in which the purchase of the specific component is authenticated. The server 200 may include a web container for analyzing the components.

한편, 각 단말기(300)는 애플리케이션 개발 환경 제공 장치(100)에서 생성된 애플리케이션이 실행 가능한 단말기일 수 있으며, 스마트 폰이나 태블릿 PC등이 예시될 수 있다. Each terminal 300 may be a terminal capable of executing an application generated in the application development environment providing apparatus 100, and may be a smart phone, a tablet PC, or the like.

특히, 각 단말기(300)의 플랫폼 또는 OS는 서로 다를 수 있다. 따라서, 본 발명의 실시 예에 따른 애플리케이션 개발 환경 제공 장치(100)는 타겟 단말기를 식별하고, 중간 언어로 구성된 애플리케이션을 타겟 단말기에 해당하는 코드로 변환하여 제공할 수 있다. 그리고, 타겟 단말기는 변환된 애플리케이션을 수신하여 실행할 수 있게 되다. 이를 통해, 개발자는 동일 어플리케이션을 다른 플랫폼으로 변환하기 위한 시간과 노력을 크게 줄일 수 있으며, 타 OS에 대한 전문 지식 없이도 용이하게 변환 및 개발을 수행할 수 있게 된다.
In particular, the platform or OS of each terminal 300 may be different from each other. Accordingly, the application development environment provision apparatus 100 according to the embodiment of the present invention can identify a target terminal, and convert an application configured in an intermediate language into a code corresponding to a target terminal. Then, the target terminal can receive and execute the converted application. Through this, developers can greatly reduce the time and effort required to convert the same application to another platform, and can easily perform conversion and development without expert knowledge of other operating systems.

도 3은 본 발명의 일 실시 예에 따른 애플리케이션 개발환경 제공장치의 세부 구성을 나타낸다. 3 shows a detailed configuration of an application development environment providing apparatus according to an embodiment of the present invention.

애플리케이션 개발환경 제공장치의 세부 구성은 개발 대상 애플리케이션의 식별 정보, 버전 정보, 개발자 정보, 인증정보, 이미지 정보, 데이터베이스 연결 정보, 서버 연결 정보, 모듈 정보 및 소스정보를 하나 이상 입력하기 위한 애플리케이션 프로젝트 설정 화면을 표시하고, 애플리케이션을 구성하는 복수의 페이지 이미지와 상기 복수의 페이지 이미지를 연결하는 복수개의 화살표 이미지를 통해 상기 애플리케이션을 구성하는 복수의 페이지 이미지 사이의 연결 관계를 나타내는 페이지 간 연결 영역과 상기 페이지 간 연결 영역 상에 페이지를 추가하고, 페이지들 간 연결 관계를 설정하기 위한 폼 탭 영역을 포함하는 제1화면을 표시하고, 상기 복수의 페이지들 중 어느 하나에 대하여 각 페이지 내에서 각 화면 또는 기능을 담당하는 복수의 컴포넌트들의 사이의 관계를 화살표로 연결-이벤트 정보를 포함하는 제1 컴포넌트와 액션 정보를 포함하는 제2 컴포넌트가 화살표로 연결-하여 나타내는 제2 화면을 표시하고, 상기 복수의 페이지 중 하나에 추가할 수 있는 미리 정의된 컴포넌트 리스트-복수의 컴포넌트 아이템들을 포함하며, 각각의 컴포넌트 아이템들은 미리 정의된 기능 또는 화면을 가지는 각 컴포넌트 코드에 대응하는 컴포넌트 리스트-를 표시하는 표시부(191)와, 상기 애플리케이션 프로젝트 설정 화면 상에 개발 대상 애플리케이션의 식별 정보, 버전 정보, 개발자 정보, 인증정보, 이미지 정보, 데이터베이스 연결 정보, 서버 연결 정보, 모듈 정보 및 소스정보가 하나 이상 입력되면, 입력된 정보에 부합되는 애플리케이션 프로젝트가 생성되도록 제어하며, 상기 제2 화면에서 이벤트 정보를 포함하는 제1 컴포넌트와 액션 정보를 포함하는 제2 컴포넌트가 연결되도록 제어하며, 상기 컴포넌트 아이템들 중 어느 하나가 선택되어 드래그 앤 드랍 방식으로 페이지 화면에 이동되면, 상기 이동된 컴포넌트 아이템에 대응되는 코드를 애플리케이션 코드에 삽입되도록 제어하는 제어부(196)와, 상기 제2 화면에서 이벤트 정보를 포함하는 제1 컴포넌트와 액션 정보를 포함하는 제2 컴포넌트가 화살표로 연결되면, 상기 제1컴포넌트와 제2컴포넌트간 연결에 대응하는 코드를 자동으로 생성하는 생성부(193)로 구성되어 있다.The detailed configuration of the application development environment providing device includes an application project setting for inputting one or more pieces of identification information, version information, developer information, authentication information, image information, database connection information, server connection information, module information, An inter-page connection area indicating a connection relationship between a plurality of page images constituting an application and a plurality of page images constituting the application through a plurality of arrow images connecting the plurality of page images, A first screen including a form tab region for adding a page on an inter-connection region and establishing a connection relationship between the pages, and displaying a first screen on each of the plurality of pages, Multiple composers responsible for A second screen including a first component including event information and a second component including action information is displayed by arrows and displayed on the screen, and the second screen is added to one of the plurality of pages - a display unit (191) for displaying a list of predefined components, each of which includes a plurality of component items, each component item corresponding to each component code having a predefined function or screen; If at least one of the identification information, the version information, the developer information, the authentication information, the image information, the database connection information, the server connection information, the module connection information, and the source information of the development target application is inputted on the setting screen, In the second screen, And a second component including action information are connected to each other, and when any one of the component items is selected and moved to a page screen in a drag and drop manner, When the first component including the event information and the second component including the action information are connected by an arrow in the second screen, the first component and the second component, And a generator 193 for automatically generating a code corresponding to the connection between the components.

또한, 애플리케이션 개발환경 제공장치의 세부 구성 요소로써 애플리케이션 프로젝트 생성 화면에 대한 입력을 통해 애플리케이션 프로젝트를 생성하고 애플리케이션 식별 정보(Application ID)를 입력하며 인증 정보 및 프로파일과 어플리케이션 이미지를 입력하는 입력부(192)가 있으며 상기 표시부를 통해 선택된 타겟 플랫폼이 구동되는 단말기의 해상도 정보를 식별하고, 상기 해상도 정보 및 상기 제2화면에 표시된 적어도 하나의 컴포넌트의 배치 상태에 대응하는 배치 정보에 기초하여 상기 컴포넌트들의 레이아웃을 결정한 후, 상기 결정된 레이아웃에 따라 상기 제1 코드를 상기 제2 코드로 변환하는 변환부(194) 서버와 애플리케이션 개발환경 제공장치간의 데이터 통신을 담당하는 통신부(195)로 구성된다. 상기에서 데이터 통신을 하는 데이터로는 생성된 제1 또는 제 2의 컴포넌트들도 포함된다.
As an example of a detailed component of the application development environment providing apparatus, an input unit 192 for generating an application project through inputting an application project creation screen, inputting application identification information (Application ID), and inputting authentication information, a profile and an application image, And displays the resolution of the terminal on which the selected target platform is driven based on the resolution information and the layout information corresponding to the layout state of at least one component displayed on the second screen, And a communication unit 195 for performing data communication between the conversion unit 194 server for converting the first code into the second code according to the determined layout and the application development environment provision apparatus. The data for data communication includes the first or second components generated.

한편, 애플리케이션 개발 환경 제공 장치에는 기동 시 종래의 기술에서 문제시 되었던 애플리케이션 속도 및 메모리 속도의 저하 문제를 해결하기 위한 폼 슬라이싱 부(197)가 포함되어 구성된다.
On the other hand, the application development environment providing apparatus includes a form slicing unit 197 for solving the problem of lowering the application speed and memory speed, which has been a problem in the conventional technology at startup.

상기에서 폼 슬라이싱 부는 HTML기반 애플리케이션에서 수많은 페이지를 관리하게 되었을 때 애플리케이션의 웹브라우저 콤포넌트가 가많은 양의 HTML 및 자바스크립트, CSS(cascading style sheets), 이미지를 구문 분석하고 화면에 그리기 위한 사전작업을 하게 되어 필연적으로 애플리케이션의 로딩속도가 급격히 저하되는 문제점을 해결하기 위한 애플리케이션 개발 환경 제공 장치 세부 구성요소로써 로딩 속도의 급격한 저하의 문제점을 해결하기 위하여 시작화면, 로그인화면, 메인화면 과 같이 초기 로딩시 부터 빈번하게 필요한 부분은 종래의 기술로 페이지 관리를 하지만 그 외의 화면들은 별도의 HTML으로 분리하여 파일로 저장하여 처리한다.
In the above, the form slicing unit is designed to allow a web browser component of an application to manage a large number of pages in an HTML-based application by parsing a large amount of HTML and JavaScript, cascading style sheets (CSS) In order to solve the problem of a sudden drop in the loading speed, it is necessary to provide an application development environment providing detailed information such as initial screen, login screen, main screen, However, the other screens are separated into separate HTML files and stored as files.

일반적으로 HTML “article” 또는 “div”와 같은 태그 요소를 이용하여 화면영역을 표현하고 있으며 각 화면에 차일드 엘리먼트를 이용하여 헤더영역과 각종 콘텐츠를 같이 표현하고 있다. 이를 분리하여 화면을 저장하게 되면 분리된 화면들은 런타임 시에 버튼 또는 기타 사용자 이벤트에 대응하여 화면 이동전에 필요한 화면들을 동적으로 화면에 삽입 처리하여 로딩속도를 개선한다.In general, a screen area is expressed using a tag element such as an HTML "article" or a "div", and a header area and various contents are expressed using child elements on each screen. When the screen is separated, the separated screens are dynamically inserted into the screen in response to a button or other user event at the time of the start of the screen to improve the loading speed.

또한 화면이 계속 변경 되는 상황에 따라서 더 이상 해당 화면이 필요 없게 되는 시점을 이용하여 슬라이싱된 HTML 파일을 삭제함으로서 필요 없는 리소스를 정리되어 메모리의 성능을 향상시킬 수 있다.
In addition, by deleting the sliced HTML file by using a point at which the corresponding screen is no longer needed according to a situation in which the screen is continuously changed, unnecessary resources can be arranged and the performance of the memory can be improved.

도 54는 일반적인 종래의 기술 페이지를 도 55는 슬라이싱된 폼의 영역으로서 기본적인 화면의 역영만을 정의한 화면을 도 56은 슬라이싱된 폼의 엘리먼트는 별도로 “slice.html”파일로 정의한 화면을 도 57은 화면들은 별도의 HTML으로 분리하여 파일로 저장된 디렉토리 화면을 나타낸다.
FIG. 54 shows a typical conventional technology page. FIG. 55 shows a screen in which only the normal image of the basic screen is defined as a sliced form area. FIG. 56 shows a screen in which elements of the sliced form are separately defined as "slice.html" Represents a directory screen that is stored as a file separated by separate HTML.

이하에서는 도 4 내지 도 7을 참조하여 본 발명의 일 실시 예에 따른 애플리케이션 개발 환경 제공 방법을 설명한다.Hereinafter, a method of providing an application development environment according to an embodiment of the present invention will be described with reference to FIGS.

도 4은 본 발명의 일 실시 예에 따른 애플리케이션 개발 환경 제공 방법을 설명하기 위한 흐름도이다.4 is a flowchart illustrating an application development environment providing method according to an embodiment of the present invention.

도 4을 참조하면, 먼저 애플리케이션 개발 환경 제공 장치(100)는 애플리케이션 프로젝트를 생성한다(S101).Referring to FIG. 4, the application development environment providing apparatus 100 first creates an application project (S101).

애플리케이션 개발 환경 제공 장치(100)는 애플리케이션의 개발을 위한 애플리케이션 프로젝트를 생성할 수 있다. 애플리케이션 프로젝트는 개발 대상 애플리케이션을 구성하는 다양한 정보를 포함할 수 있다. 또한, 애플리케이션 프로젝트는 개발 대상 애플리케이션의 식별 정보, 버전 정보, 개발자 정보, 인증 정보, 이미지 정보, 데이터베이스 연결 정보, 서버 연결 정보, 모듈 정보 및 소스 정보를 포함할 수 있으며, 개발 대상 플랫폼에 대응하여 최적화된 정보를 포함할 수 있다. The application development environment provision apparatus 100 can generate an application project for development of an application. The application project may include various information constituting the application to be developed. The application project may include identification information of the application to be developed, version information, developer information, authentication information, image information, database connection information, server connection information, module information, and source information. And the like.

이를 위해, 애플리케이션 개발 환경 제공 장치(100)는 애플리케이션 프로젝트 생성 화면을 제공할 수 있다.To this end, the application development environment provision apparatus 100 may provide an application project creation screen.

도 5는 애플리케이션 개발 환경 제공 장치(100)에 의해 제공되는 애플리케이션 프로젝트 생성 화면을 나타낸다.FIG. 5 shows an application project creation screen provided by the application development environment provision apparatus 100. FIG.

도 5에 도시된 바와 같이, 개발자는 애플리케이션 프로젝트 생성 화면에 대한 입력을 통해 애플리케이션 프로젝트를 생성할 수 있다. 애플리케이션 프로젝트 생성 화면은 도 5와 같이 애플리케이션 식별 정보(Application ID) 입력부, 인증 정보 및 프로파일 입력부 및 어플리케이션 이미지 입력부를 포함할 수 있다. 이에 따라 개발자가 입력해야 하는 입력정보의 최소화 및 필요이미지의 최소화가 구현될 수 있다.As shown in FIG. 5, the developer can create an application project through an input to the application project creation screen. The application project creation screen may include an application ID input unit, authentication information and profile input unit, and an application image input unit, as shown in FIG. This minimizes the input information that the developer has to input and minimizes the required image.

특히, 애플리케이션 개발 환경 제공 장치(100)는 애플리케이션 프로젝트가 생성되고, 개발 대상 플랫폼이 설정되면, 이에 따라 애플리케이션 페이지의 자동 리사이징(Resizing) 및 자동 버전 관리를 수행할 수 있다.In particular, when an application project is created and a development target platform is set, the application development environment providing apparatus 100 can perform automatic resizing and automatic version management of an application page accordingly.

이후, 애플리케이션 개발 환경 제공 장치(100)는 복수의 페이지들간 연결관계를 나타내는 제1 화면을 표시한다(S103).Then, the application development environment providing apparatus 100 displays a first screen showing a connection relationship among a plurality of pages (S103).

애플리케이션 개발 환경 제공 장치(100)는 생성된 애플리케이션 프로젝트에 의해 개발 중인 애플리케이션의 페이지 정보를 제1 화면을 통해 표시할 수 있다. 그리고, 제1 화면은 각 페이지간의 연결 관계를 나타낼 수 있다.The application development environment providing apparatus 100 can display page information of an application being developed by the generated application project through the first screen. The first screen may indicate the connection relationship between the respective pages.

한편으로 화면이 스마트 폰 등보다 상대적으로 큰 테블릿 전용 스마트 디바이스를 위한 프레임을 나누어 애플리케이션을 구성하는 기본 설정을 실시할 수 있다.On the other hand, the screen can be divided into frames for a relatively large tablet-specific smart device, such as a smart phone, and basic settings can be configured to configure the application.

도 58은 애플리케이션 개발 환경 제공 장치(100)에 의해 표시되는 테블릿 전용 디바이스를 위한 프레임을 나누는 화면을 나타낸다.58 shows a screen for dividing a frame for a tablet-dedicated device displayed by the application development environment provision apparatus 100. Fig.

테블릿 전용 스마트 디바이스를 위한 프레임간 이동 컴포넌트, 프레임간의 액션 컴포넌트, 프레임간의 데이타 이동 컴포넌트를 지원하도록 개발환경을 제공한다.It provides a development environment to support inter-frame movement components for tablet-specific smart devices, action components between frames, and data movement components between frames.

도 6는 애플리케이션 개발 환경 제공 장치(100)에 의해 표시되는 제1 화면(110)을 나타낸다.6 shows a first screen 110 displayed by the application development environment providing apparatus 100. As shown in FIG.

도 6에 도시된 바와 같이, 제1 화면(110)은 애플리케이션 프로젝트에서 개발 중인 애플리케이션에 포함되는 복수의 페이지들에 대한 연결 관계를 나타낼 수 있다. 각 페이지들은 단말기(300)에서 애플리케이션이 동작하는 경우 표시될 수 있는 각 전자 문서를 나타낼 수 있다. 그리고 애플리케이션 동작에 의해 단말기(300)에서 표시되는 전자 문서는 각각의 페이지들간의 연결 관계에 따라 전환될 수 있다. 이와 같은 전환 또는 이동은 앞서 설명한 컴포넌트의 이벤트 발생 및 이에 따른 액션 동작에 의해 수행될 수 있다.As shown in FIG. 6, the first screen 110 may represent a connection relationship to a plurality of pages included in an application under development in an application project. Each page may represent each electronic document that may be displayed when an application is running on the terminal 300. [ The electronic document displayed on the terminal 300 by the application operation can be switched according to the connection relationship between the respective pages. Such a conversion or movement can be performed by the event generation of the component described above and the action action accordingly.

예를 들어, 도 6와 같이 애플리케이션은 Home 페이지, Card 페이지, Find 페이지, Donut 페이지, SNS 페이지 및 View 페이지를 포함할 수 있다. 그리고, 제1 화면(110)은 각 페이지간 연결 관계를 나타내는 복수의 화살표 이미지(111)를 포함할 수 있다. 각 화살표 이미지(111)는 각 페이지들간의 이동 또는 전환관계를 나타낼 수 있다.For example, as shown in FIG. 6, an application may include a Home page, a Card page, a Find page, a Donut page, an SNS page, and a View page. The first screen 110 may include a plurality of arrow images 111 indicating connection relationships between the respective pages. Each arrow image 111 may represent a movement or a conversion relationship between the respective pages.

특히, 애플리케이션 개발자는 제1 화면(110)에 표시되는 각각의 화살표 이미지(111)를 변형 또는 삭제함으로써 페이지간 연결 관계를 원하는 대로 변경 할 수 있다. 예를 들어, 개발자는 새로운 화살표를 연결하여 페이지 사이를 연결시킬 수 있다. 또한, 기존의 화살표를 삭제하여 페이지 사이를 끊을 수 있다. In particular, the application developer may modify the inter-page connection relationships as desired by modifying or deleting each arrow image 111 displayed on the first screen 110. [ For example, a developer could link new arrows to link between pages. Also, you can delete existing arrows to break between pages.

그리고, 애플리케이션 개발 환경 제공 장치(100)는 이와 같은 화살표 이미지의 변경 또는 삭제가 있는 경우, 이를 중간 언어로 구성된 애플리케이션 코드에 반영시킬 수 있다. 따라서, 애플리케이션 개발자는 코드 수정에 대한 전문적인 지식 없이도 각 페이지간의 연결 관계를 용이하게 파악하고, 수정할 수 있게 된다.If there is a change or deletion of the arrow image, the application development environment providing apparatus 100 can reflect the change or deletion of the image of the arrow in the application code configured in the intermediate language. Therefore, application developers can easily grasp and modify the connection relationship between each page without expert knowledge of code modification.

한편, 애플리케이션 개발 환경 제공 장치(100)는 제1 화면(110) 주변에 페이지간 연결 관계 설정 또는 페이지 추가를 위한 폼 탭(112)을 표시할 수 있다. 폼 탭(112)은 예를 들어, 연결 관계 설정 및 페이지 추가를 위해 미리 정의된 아이콘들을 포함할 수 있다. Meanwhile, the application development environment providing apparatus 100 may display a form tab 112 for setting a connection relationship between pages or adding a page to the first screen 110. The form tabs 112 may include predefined icons, for example, for establishing connection relationships and adding pages.

그리고, 각 아이콘들은 드래그 앤 드랍 방식에 의해 이동될 수 있으며, 제1 화면(110)으로 이동되는 경우 해당 아이콘에 대응하여 애플리케이션 개발 환경 제공 장치(100)는 연결 관계 설정 또는 미리 정의된 페이지 추가를 수행할 수 있다.In addition, when the icons are moved to the first screen 110, the application development environment providing apparatus 100 may set a connection relationship or add a predefined page corresponding to the corresponding icon Can be performed.

다시 도 4를 설명한다.4 will be described again.

이후, 애플리케이션 개발 환경 제공 장치(100)는 어느 하나의 페이지에 대하여 컴포넌트간 연결 관계를 나타내는 제2 화면을 표시한다(S105). 그리고, 애플리케이션 개발 환경 제공 장치(100)는 이벤트 정보를 포함하는 제1 컴포넌트와 액션 정보를 포함하는 제2 컴포넌트를 연결한다(S107).Then, the application development environment providing apparatus 100 displays a second screen showing a connection relationship between the components on one page (S105). Then, the application development environment providing apparatus 100 connects the first component including the event information and the second component including the action information (S107).

앞서 설명한 바와 같이, 페이지는 복수의 컴포넌트들을 포함할 수 있다. 각 컴포넌트들은 페이지 내에서 각 화면 또는 기능을 담당하는 하나의 단위 객체를 의미할 수 있다. 그리고, 컴포넌트들은 이와 같은 화면 또는 기능을 담당하기 위한 이벤트 정보 또는 액션 정보를 포함할 수 있다. As described above, a page may include a plurality of components. Each component may refer to a unit object that is responsible for each screen or function within a page. In addition, the components may include event information or action information for performing such a screen or function.

이벤트 정보는 단말기(300)에 대해 미리 설정된 사용자 입력 또는 단말기(300) 동작에 의해 발생되는 이벤트들을 포함할 수 있다. 예를 들어, 이벤트들은 onClose, onInit, onScrollMouse, onClick, onError, onSuccess 또는 onEnd 이벤트 등을 포함할 수 있다. The event information may include events generated by a predetermined user input to the terminal 300 or an operation of the terminal 300. For example, events may include onClose, onInit, onScrollMouse, onClick, onError, onSuccess, or onEnd events.

그리고, 이벤트 각각은 다른 컴포넌트에 포함된 액션 정보에 대응될 수 있다. 액션 정보는 단말기(300)에서 발생된 이벤트에 따라 수행되는 애플리케이션의 동작에 대한 정보를 포함할 수 있다. 예를 들어 이벤트에 따라 수행되는 애플리케이션의 동작은 특정 컴포넌트의 실행, 숨김, 보임, 토글, 페이지 이동, clear명령, goHome명령, goBack명령, bind명령 또는 next명령 등을 포함할 수 있다.Each of the events may correspond to action information included in another component. The action information may include information on an operation of an application that is performed according to an event generated in the terminal 300. [ For example, the behavior of an application that is performed according to an event can include running, hiding, showing, toggling, paging, clear, goHome, goBack, bind or next commands of a particular component.

이와 같이 각 컴포넌트에 포함되는 이벤트 정보 또는 액션 정보는 각각 대응될 수 있으며 이에 따른 연결 관계는 제2 화면에 표시될 수 있다.As described above, event information or action information included in each component may correspond to each other, and the connection relation therebetween may be displayed on the second screen.

도 7은 본 발명의 실시 예에 따른 제2 화면(120)을 나타낸다.7 shows a second screen 120 according to an embodiment of the present invention.

도 7에 도시된 바와 같이, 제2 화면(120)은 각 컴포넌트를 나타낼 수 있으며, 각 컴포넌트에 포함되는 이벤트 정보와 액션 정보간 연결 관계를 나타낼 수 있다.As shown in FIG. 7, the second screen 120 may represent each component and may represent a connection relationship between event information and action information included in each component.

특히, 제2 화면(120)에서 각 컴포넌트들은 각각의 블록 형태로 표시될 수 있다. 그리고, 각 컴포넌트에 포함되는 액션 정보는 블록의 일측에 텍스트 박스 형태로 표시될 수 있으며, 이벤트 정보는 블록의 타측에 텍스트 박스 형태로 표시될 수 있다. In particular, each component in the second screen 120 may be displayed in a respective block form. The action information included in each component may be displayed in the form of a text box on one side of the block, and the event information may be displayed in the form of a text box on the other side of the block.

그리고, 각 박스들간의 연결 관계가 화살표 이미지로 표시될 수 있다. 각각의 화살표 이미지는 특정 컴포넌트의 특정 이벤트로부터 시작될 수 있으며, 다른 컴포넌트의 특정 액션을 향할 수 있다. 이 경우, 화살표 이미지는 특정 이벤트가 발생하면 그 다음으로 실행될 컴포넌트의 액션임을 나타낼 수 있다.Then, the connection relation between each box can be indicated by an arrow image. Each arrow image can be started from a specific event of a specific component, and can be directed to a specific action of another component. In this case, the arrow image may indicate that the action of the component to be executed next when a specific event occurs.

앞서 제1 화면(110)에서 설명한 바와 동일하게, 애플리케이션 개발자는 제2 화면(120)에서 각 화살표 이미지를 변경 또는 삭제할 수 있고, 각 컴포넌트들은 드래그 앤 드랍 방식에 의해 추가 또는 삭제될 수도 있다. 이에 따라, 각 컴포넌트들의 이벤트와 액션간 연결 관계는 변경될 수 있으며, 애플리케이션 개발 환경 제공 장치(100)는 제2 화면(120)에 표시되는 컴포넌트와 화살표 이미지의 변경에 따라 중간 언어로 구성되는 애플리케이션의 코드를 생성 또는 삭제할 수 있다. As described above in the first screen 110, the application developer can change or delete the image of each arrow in the second screen 120, and each component may be added or deleted by a drag-and-drop method. Accordingly, the connection relationship between the event and the action of each component can be changed, and the application development environment providing apparatus 100 can display the component displayed on the second screen 120 and the application Can be generated or deleted.

예를 들어, button1 컴포넌트 블록(121)은 onClick 이벤트 박스(123)를 포함할 수 있으며, onClick 이벤트 박스(123)는 화살표 이미지에 의해 link1 컴포넌트 블록(122)에 포함된 goBack 액션 박스(124)와 연결될 수 있다. 이 경우, 애플리케이션 개발 환경 제공 장치(100)는 button1 컴포넌트에 대한 onClink이벤트 발생시 link1 컴포넌트의 goBack 액션이 수행되도록 중간 언어로 코드를 생성하여 개발 중인 애플리케이션 코드에 삽입할 수 있다. 따라서, 개발자는 코드에 대한 이해 없이 유저 인터페이스 조작만으로도 컴포넌트간 연결 관계를 설정할 수 있게 된다.
For example, the button1 component block 121 may include an onClick event box 123, and the onClick event box 123 may include a goBack action box 124 included in the link1 component block 122 by an arrow image Can be connected. In this case, the application development environment providing apparatus 100 may generate a code in an intermediate language so that the goBack action of the link1 component is performed when an onClink event for the button1 component is generated, and insert the code into the application code under development. Therefore, the developer can establish the connection relationship between the components by only manipulating the user interface without understanding the code.

도 8은 본 발명의 실시 예에 따른 제2 화면과 실제 코드와의 관계를 나타내는 도면이다.8 is a diagram showing a relationship between a second screen and an actual code according to the embodiment of the present invention.

도 8에 도시된 바와 같이, 본 발명의 실시 예에 따르면 애플리케이션 개발자는 제2 화면(120)에서 Button1 컴포넌트의 onClick 이벤트 발생시 그 다음 실행할 컴포넌트 messagebox1과, 그 컴포넌트가 가지고 있는 액션인 show를 화살표 이미지로 연결함으로써 지정할 수 있게 된다. 이 경우 도 8 하단 코드의 박스부분과 같은 코드를 애플리케이션 개발 환경 제공 장치(100)는 자동적으로 생성하여 애플리케이션 코드에 삽입할 수 있다. 따라서, 개발자는 JAVA 코드 작성으로 이벤트와 액션간의 연결 관계를 구현할 필요 없이 유저 인터페이스에 대한 조작만으로도 원하는 컴포넌트의 이벤트와 액션간 연결을 설정 할 수 있다.8, according to an exemplary embodiment of the present invention, an application developer generates a component messagebox1 to be executed next when an onClick event of a Button1 component is generated in the second screen 120, and an action show, You can specify by connecting. In this case, the application development environment providing apparatus 100 can automatically generate a code similar to the box portion of the lower half code in Fig. 8 and insert it into the application code. Therefore, the developer can set the connection between the event and the action of the desired component by manipulating the user interface without writing the connection relation between the event and the action by writing the JAVA code.

도 9는 본 발명의 일 실시 예에 따른 제2 화면(120)의 액션 리스트를 설명하기 위한 도면이다.9 is a view for explaining an action list of the second screen 120 according to an embodiment of the present invention.

도 9를 참조하면, 애플리케이션 개발 환경 제공 장치(100)는 이벤트와 액션간의 일대일 관계를 제2 화면(120)에서 화살표 이미지로 나타낼 수 있으나, 이는 한 번의 이벤트에 대응하여 많은 컴포넌트들의 액션을 실행하게 하는 데에는 제약이 따를 수 있다. Referring to FIG. 9, the application development environment providing apparatus 100 may display a one-to-one relationship between an event and an action in an arrow image on the second screen 120. However, There are limitations to doing so.

따라서, 본 발명의 실시 예에 따르면, 이를 해결하기 위해 제2 화면(120)은 액션 리스트 컴포넌트 블록(125)을 더 포함할 수 있다. 액션 리스트 컴포넌트 블록(125)은 하나의 이벤트에 대응하여 다수의 액션을 수행하기 위해 컴포넌트 사이에 삽입되는 중간 컴포넌트를 의미할 수 있다.Accordingly, according to an embodiment of the present invention, the second screen 120 may further include an action list component block 125 to solve this problem. The action list component block 125 may refer to an intermediate component inserted between components to perform a plurality of actions corresponding to one event.

예를 들어, 개발자는 액션 리스트 컴포넌트 블록(125)을 생성하고, 한 번의 이벤트(onClink)에 대응하여 액션 리스트 컴포넌트 블록(125)의 execute 액션이 실행되도록 화살표 이미지를 연결함으로써 복수의 이벤트들(event1~event9)이 발생되도록 연결 관계를 설정할 수 있다. 그리고, 개발자는 각 복수의 이벤트들(event1~event9)에 의해 실행될 컴포넌트 및 액션을 다시 화살표 이미지를 이용하여 지정할 수 있다. 도 9에서는 event1에 대응하여 panel1 컴포넌트의 hide 액션이 수행되며, evnet2에 대응하여 messagebox1의 show 액션이 수행되도록 설정된 것을 나타내고 있다.For example, the developer may create an action list component block 125 and associate an arrow image so that the execute action of the action list component block 125 is executed in response to one event (onClink) ~ event9) can be generated. Then, the developer can designate the components and actions to be executed by each of the plurality of events (event1 to event9) using the arrow image again. In FIG. 9, the hide action of the panel1 component is performed in response to the event 1, and the show action of the message box 1 is set to be performed in response to the evnet2.

그리고, 애플리케이션 개발 환경 제공 장치(100)는 도 9 하단과 같이 제2 화면(120)에서 설정된 연결 관계가 애플리케이션에서 실행될 수 있도록 중간 언어로 구성된 코드를 생성할 수 있다.The application development environment providing apparatus 100 may generate a code configured in an intermediate language so that the connection relationship established in the second screen 120 may be executed in the application as shown in the lower part of FIG.

이에 따라, 단말기(300)에서 어플리케이션이 실행되면, 제2 화면(120)에서 설정된 연결 관계에 의해, 사용자가 Button1을 Click하였을 때, panel1을 hide하고 messagebox1을 show하는 동작이 수행되게 된다. Accordingly, when the application is executed in the terminal 300, when the user clicks Button1 by the connection relationship set in the second screen 120, the operation of hiding panel1 and showing messagebox1 is performed.

한편, 도 10는 본 발명의 다른 일 실시 예에 따른 애플리케이션 개발 환경 제공 장치(100)의 컴포넌트 블록 표시 및 연결관계 표시 방법을 나타낸다.FIG. 10 shows a method of displaying a component block and a connection relationship in an application development environment providing apparatus 100 according to another embodiment of the present invention.

도 10을 참조하면, 애플리케이션 개발 환경 제공 장치(100)는 페이지 화면(130)과 함께 상기 페이지에 포함된 컴포넌트 블록들을 나타내는 컴포넌트 블록 화면(140)을 표시할 수 있다.Referring to FIG. 10, the application development environment providing apparatus 100 may display a component block screen 140 showing the component blocks included in the page together with the page screen 130.

페이지 화면(130)은 각각의 컴포넌트들에 의해 구현된 페이지 이미지를 나타낼 수 있다.The page screen 130 may represent a page image implemented by each of the components.

그리고, 컴포넌트 블록 화면(140)은 컴포넌트와 이벤트 및 액션간의 연결 관계를 트리 구조로 나타낼 수 있다. 각 컴포넌트들은 1 depth로 표시될 수 있으며, 각각의 컴포넌트의 하위 depth에는 그 컴포넌트가 포함하는 액션들이 위치할 수 있다. 이에 따라, 개발자는 원하는 컴포넌트와 액션을 용이하게 선택할 수 있다.In addition, the component block screen 140 can display a connection relationship between components, events, and actions in a tree structure. Each component can be represented by a depth, and the lower depth of each component can contain actions that the component contains. Accordingly, the developer can easily select a desired component and an action.

그리고, 선택된 컴포넌트 또는 액션의 속성 정보가 컴포넌트 블록 화면(140)의 상단에 표시될 수 있다. 속성 정보는 각 컴포넌트 또는 액션의 식별 정보, 데이터 연결 정보 및 각 액션과 연결된 이벤트 정보를 포함할 수 있다.The attribute information of the selected component or action may be displayed at the top of the component block screen 140. The attribute information may include identification information of each component or action, data connection information, and event information associated with each action.

그리고, 이와 같은 컴포넌트 블록 화면(140)과 페이지 화면(130)은 앞서 설명한 제2 화면(120)에 대응될 수 있다. 따라서, 애플리케이션 개발 환경 제공 장치(100)는 동일한 어플리케이션을 제2 화면(120) 또는 컴포넌트 블록 화면(140)과 페이지 화면(130) 중에서 선택하여 표시할 수 있다. 이를 위해, 애플리케이션 개발 환경 제공 장치(100)는 컴포넌트의 연결 관계 표시 방법에 대한 설정 메뉴를 제공할 수도 있다.The component block screen 140 and the page screen 130 may correspond to the second screen 120 described above. Accordingly, the application development environment providing apparatus 100 can select and display the same application from the second screen 120, the component block screen 140, and the page screen 130. [ To this end, the application development environment providing apparatus 100 may provide a setup menu for the connection relationship display method of the component.

이와 같은 이벤트 및 액션간 연결 설정 방식은 기존 개발환경에서의 더블클릭 및 프로시저 생성을 통한 이벤트 처리 방법과 달리, 각 컴포넌트에 포함되는 이벤트 및 액션을 선택하는 방식일 수 있다. 따라서, 개발자는 특정 버튼을 눌렀을 경우 실행하고자 하는 컴포넌트 객체 및 그 객체에 포함된 액션을 선택하기만 하면 이벤트 및 액션간 연결 설정이 완료될 수 있다.
The connection establishment method between events and actions may be a method of selecting an event and an action included in each component, unlike the event processing method through double click and procedure creation in the existing development environment. Accordingly, when the developer presses a specific button, the connection between the event and the action can be completed only by selecting a component object to be executed and an action included in the object.

한편, 도 59는 분기(if) 컴포넌트를 추가하여 제 2화면 구성 시 조건별로 이벤트 및 액션이 발생하였을 때 컴포넌트간의 연결 관계가 분기되는 컴포넌트 상의 설정을 하는 화면을 나타낸다.On the other hand, FIG. 59 shows a screen for setting on a component to which a connection relationship between components is branched when an event and an action occur according to a condition in a second screen configuration by adding a branch (if) component.

컴포넌트의 비교 분기는 상수와 데이터베이스의 값에의 해 비교되어 분기될 수 있으며 상수 값인 경우에는 사용자가 직접 입력함을 통하여 컴포넌트 간의 분기를 실시할 수 있다. 또한 미리 정의된 상수 및 시스템 환경변수를 이용할 수 있도록 설정될 수 있다.The comparison branch of the component can be compared with the value of the constant and the database and can be branched. If the value is a constant value, the user can input the value directly to branch between the components. It can also be configured to take advantage of predefined constants and system environment variables.

도 11은 본 발명의 일 실시 예에 따른 애플리케이션 개발 환경 제공 장치(100)의 컴포넌트 추가 방법을 설명하기 위한 도면이다.11 is a diagram for explaining a method of adding a component of an application development environment providing apparatus 100 according to an embodiment of the present invention.

도 11을 참조하면, 애플리케이션 개발 환경 제공 장치(100)는 페이지 화면(151)에 추가할 수 있는 미리 정의된 컴포넌트 리스트(150)를 표시할 수 있다. 그리고, 컴포넌트 리스트(150)는 복수의 컴포넌트 아이템들을 포함할 수 있다. 각각의 컴포넌트 아이템들은 미리 정의된 기능 또는 화면을 가지는 각 컴포넌트 코드에 대응될 수 있다.Referring to FIG. 11, the application development environment providing apparatus 100 may display a predefined component list 150 that can be added to the page screen 151. The component list 150 may include a plurality of component items. Each component item may correspond to each component code having a predefined function or screen.

그리고, 개발자는 이와 같은 컴포넌트 아이템들 중 어느 하나를 선택하여 드래그 앤 드랍 방식으로 페이지 화면(151)에 이동시킬 수 있다. 이에 대응하여, 애플리케이션 개발 환경 제공 장치(100)는 이동된 컴포넌트 아이템에 대응되는 코드를 애플리케이션 코드에 삽입함으로써 컴포넌트 추가를 용이하게 할 수 있다. 따라서, 개발자는 애플리케이션 개발시 컴포넌트에 대한 코드 작성 없이도 간단한 드래그 앤 드랍만으로 컴포넌트를 페이지에 추가할 수 있게 된다. Then, the developer can select any one of these component items and move them to the page screen 151 in a drag-and-drop manner. Correspondingly, the application development environment providing apparatus 100 can facilitate adding a component by inserting a code corresponding to the moved component item into the application code. This allows developers to add components to a page with a simple drag and drop without having to write code for the component during application development.

또한, 미리 정의된 컴포넌트들은 서버(200)로부터 수신 및 업데이트될 수 있다. 애플리케이션 개발 환경 제공 장치(100)는 서버(200)와 통신하여 새로운 컴포넌트들을 수신하고, 컴포넌트 리스트를 업데이트할 수 있다. 개발자는 업데이트된 컴포넌트 리스트로부터 드래그 앤 드랍으로 애플리케이션 페이지에 새로운 컴포넌트를 추가할 수 있다.In addition, the predefined components may be received and updated from the server 200. The application development environment providing apparatus 100 can communicate with the server 200 to receive new components and update the component list. The developer can add new components to the application page by dragging and dropping from the updated component list.

도 12은 본 발명의 일 실시 예에 따른 애플리케이션 개발 환경 제공 장치(100)의 데이터 바인딩(binding) 방법을 나타낸다.FIG. 12 shows a data binding method of an apparatus 100 for providing an application development environment according to an embodiment of the present invention.

도 12에 도시된 바와 같이, 컴포넌트는 데이터 컴포넌트(dbtable1, data_store)를 포함할 수 있다. 데이터 컴포넌트는 SQL 또는 RESTful/SOAP을 통한 웹 상의 DB와 연결할 수 있으며, 연결된 DB로부터 데이터를 수신하여 표시할 수 있는 객체를 나타낼 수 있다. 애플리케이션 개발 환경 제공 장치(100)는 데이터 컴포넌트에 대하여 DB 연결을 위한 바인딩을 제공할 수 있으며, 이에 따라 개발자는 SQL 또는 RESTful/SOAP에 대한 지식이 없이도 어플리케이션과 DB간의 데이터 바인딩을 수행할 수 있게 된다.As shown in Fig. 12, a component may include a data component (dbtable1, data_store). A data component can be connected to a DB on the Web via SQL or RESTful / SOAP, and can represent an object that can receive and display data from a connected DB. The application development environment providing apparatus 100 can provide a binding for DB connection to the data component so that the developer can perform data binding between the application and the DB without knowledge of SQL or RESTful / SOAP .

도 13는 본 발명의 일 실시 예에 따른 애플리케이션 개발 환경 제공 장치(100)의 관계형 데이터베이스 관리 시스템(RDBMS) 설정 방법을 나타낸다.FIG. 13 shows a relational database management system (RDBMS) setting method of an application development environment provision apparatus 100 according to an embodiment of the present invention.

도 12에 도시된 바와 같이, 애플리케이션은 RDBMS와 연결될 수 있다. 따라서, 애플리케이션 개발 환경 제공 장치(100)는 RDBMS를 위한 설정 화면을 표시할 수 있다. 이를 위해, 애플리케이션 개발 환경 제공 장치(100)는 애플리케이션에 대응되는 RDBMS 설정을 위한 데이터베이스 타입 정보, 호스트 정보, 카탈로그 정보, 유저 ID 정보, 패스워드 정보, 테스트 버튼, 프록시 URL 정보, 프록시 연결 테스트 버튼 및 SecretKeySpec 정보 설정 인터페이스를 포함할 수 있다.As shown in FIG. 12, an application may be connected to an RDBMS. Accordingly, the application development environment provision apparatus 100 can display a setting screen for the RDBMS. To this end, the application development environment provision apparatus 100 includes database type information, host information, catalog information, user ID information, password information, test button, proxy URL information, proxy connection test button, and SecretKeySpec Information setting interface.

도 14은 본 발명의 일 실시 예에 따른 애플리케이션 개발 환경 제공 장치(100)의 오픈 API형 데이터 설정 방법을 나타낸다.14 shows an open API type data setting method of the application development environment provision apparatus 100 according to an embodiment of the present invention.

도 14에 도시된 바와 같이, 컴포넌트는 오픈 API형 데이터와 연결될 수 있다. 예를 들어, 도14에 도시된 Twitter1 컴포넌트는 SNS의 일종인 트위터의 오픈 API와 연결될 수 있다. 이에 대한 설정을 위해, 애플리케이션 개발 환경 제공 장치(100)는 트위터 아이디를 설정하기 위한 인터페이스를 더 표시할 수 있다.As shown in Fig. 14, the component can be associated with open API type data. For example, the Twitter1 component shown in FIG. 14 can be connected to an open API of a Twitter, which is a kind of SNS. For this setting, the application development environment providing apparatus 100 may further display an interface for setting a Twitter ID.

도 15는 본 발명의 일 실시 예에 따른 애플리케이션 개발 환경 제공 장치(100)의 전문 Restful/SOAP 설정 방법을 나타낸다.FIG. 15 shows a detailed restful / SOAP setting method of the application development environment provision apparatus 100 according to an embodiment of the present invention.

도 15에 도시된 바와 같이, 애플리케이션 개발 환경 제공 장치(100)는 전문적인 Restful/SOAP 설정을 위한 Restful/SOAP 설정 화면을 제공할 수 있다. 이와 같은 애플리케이션 개발 환경 제공 장치(100)를 통해 전문적인 지식이 있는 사용자의 경우에는 세부적인 클래스 모듈간 설정 및 서버와의 연결 설정을 수행할 수 있게 된다.
As shown in FIG. 15, the application development environment providing apparatus 100 can provide a Restful / SOAP setting screen for a professional Restful / SOAP setting. In the case of a user having a specialized knowledge through such an application development environment providing apparatus 100, it is possible to perform detailed class module setting and connection setting with the server.

도 60은 본 발명의 일 실시 예에 따른 애플리케이션 개발 환경 제공 장치(100)의 데이터 바인딩 에디터의 주요 화면이다.60 is a main screen of the data binding editor of the application development environment providing apparatus 100 according to an embodiment of the present invention.

애플리케이션 개발 환경 제공 장치(100)의 데이터 바인딩 에디터는 종래의 개발방법으로 데이터를 바인딩하기 위해서 개발자가 파일, XML, 데이터베이스 등의 자료를 직접 액세스하여 데이터를 가공 할 수 있는 코드를 작성하고 사용자 인터페이스에 표현하는 코드를 작성하는 과정을 통하여 데이터베이스의 자료 접근 또는 처리를 수행하고 있었던 것을 단순한 사용자 행위 만으로 데이터베이스 접근 등의 데이터 바인딩을 행할 수 있도록 하는 방법을 제공한다.The data binding editor of the application development environment providing apparatus 100 is a conventional development method in which a developer directly accesses data such as a file, XML, or database in order to bind data, writes code that can process data, The data accessing or processing of the database is performed through the process of writing the representation code, and the data binding such as the database access can be performed by a simple user action.

또한, 애플리케이션 개발 환경 제공 장치에서 제공하는 다양한 콤포넌트와 데이터 스토어 콤포넌트 간의 연관 관계를 그래픽화 하여 아이콘을 끌어서 연결 관계를 설정하는 드래그 앤 커넥트 방식으로 콤포넌트에 데이터를 쉽고 유지보수 가능 하도록 표현 할 수 있는 방법을 제공한다.
In addition, a drag-and-connect method for graphically displaying the relationship between various components provided by an application development environment providing device and a data store component and dragging and dropping an icon to express the data in a component easily and maintainably .

도 61의 데이터 바인딩 에디터 화면을 보면 dbtable1 콤포넌트는 데이터스토어 콤포넌트로 The data binding editor screen of FIG. 61 shows that the dbtable1 component is a data store component

기존 데이타베이스 관리시스템(DBMS)정보를 이용하여 테이블 또는 뷰 정보를 설정할 수 있도록 제공하고 있다. 데이터베이스 필드 정보는 데이터 바인딩 에디터에서 데이타베이스 에 특화하여 바인딩 가능한 필드정보를 표현하고 있다.And provides table / view information setting using existing database management system (DBMS) information. The database field information represents the field information that can be bound to the database in the data binding editor.

각 필드들은 색깔별로 구분하여 자료의 입력, 출력 필드를 표현하여 제공하며 “Label”, “ThumbListView” 등의 제공되는 콤포넌트들을 설정하여 데이터를 받아서 화면에 표현하는 부분으로 각 구성요소에 어떻게 데이터를 표현할지를 정의가능하다.Each field is divided by color and provides input and output fields of data. It provides components such as "Label" and "ThumbListView", and receives the data and displays it on the screen. Can be defined.

이러한 입 출력 필드를 서로 연결하여 쉽게 데이터를 개발자의 특별한 코드구현 없이 개발 가능한 방법을 제공한다. These input / output fields are connected to each other to provide a way to easily develop data without developer's special code implementation.

도 62는 도 61의 데이터 바인딩을 통한 결과 화면을 나타내주고 있다.FIG. 62 shows a result screen through the data binding of FIG.

도 63은 도 61의 데이터 바인딩을 통한 결과 화면을 위하여 XML화일로 저장된 형태를 보여주고 있다.
FIG. 63 shows a form stored as an XML file for a result screen through the data binding of FIG.

일면으로 종래의 기술에서 클라이언트 서버 간의 애플리케이션인 경우에는 서버개발자와의 입출력 규격에 대해서 많은 문제점들을 보유하고 있었고 데이터 정합성 검증에 많은 노력과 시간을 들이고 있었다. On the other hand, in the case of an application between the client server and the conventional technology, there are many problems with the input / output specification with the server developer, and a lot of effort and time are spent in verifying the data consistency.

애플리케이션 개발 환경 제공 장치(100)에서는 데이터 바인딩 에디터를 포함하여 검증을 위한 서버 데이터 시뮬레이션을 시행하는 방법을 제공한다.The application development environment providing apparatus 100 includes a data binding editor to provide a method for performing server data simulation for verification.

도 64는 서버 데이터 시뮬레이터의 실시 예를 보여주고 있다. 서버 데이터 시뮬레이터는 현재 가용한 서버 콤포넌트 목록을 조회하여 해당 콤포넌트의 명세정보를 읽어 서버 시뮬레이터에서는 입,출력에 대한 데이터베이스 정보를 얻어 오게 된다. 시뮬레이터는 얻어온 입력정보를 바탕으로 서버측에 데이터를 요청하여 출력정보를 통하여 화면에 표시하고 시뮬레이션시 오류가 발생하였을 경우에는 오류 정보를 출력하게 된다.Figure 64 shows an embodiment of a server data simulator. The server data simulator retrieves the list of currently available server components and reads the specification information of the corresponding component, so that the server simulator obtains database information about the input and output. The simulator requests data on the server side based on the input information obtained, displays it on the screen through the output information, and outputs error information when an error occurs in the simulation.

도 65는 서버 데이터 시뮬레이터의 오류정보 발생시 오류정보 출력에 관한 화면을 표시하고 있다.
65 shows a screen for outputting error information upon occurrence of error information in the server data simulator.

일면으로, 본 발명의 애플리케이션 개발환경 제공장치(100)는 컴포넌트 간의 연결 관계를 확인하여 애플리케이션 구조에 맞지 않게 설정되는 복수의 컴포넌트 사이의 연결 관계를 제 1화면과 제 2화면을 설정하고 이벤트나 액션을 연결하는 과정에서 잘못된 사용자의 오류를 검증하여 공지하는 방법을 제공한다. In one aspect, the application development environment providing apparatus 100 of the present invention confirms a connection relationship among components, sets a connection relationship between a plurality of components that are set to be incompatible with an application structure, sets a first screen and a second screen, A method of verifying and notifying an error of a wrong user is provided.

즉, 컴포넌트의 상속구조 위와 같은 상속구조 상에서 각 컴포넌트 간의 상속 구조에 맞지 않게 설정되는 애플리케이션 프로그램들은 애플리케이션 개발 환경 제공장치에서 자동으로 체크 및 검증하여 공지 또는 자동 수정 처리하는 방법을 제공한다.In other words, the inheritance structure of the component. In the inheritance structure like the above, the application programs set to be incompatible with the inheritance structure between the components are automatically checked and verified by the application development environment providing device, and a method of notifying or automatically correcting the processing is provided.

사용자는 제 1화면 또는 제 2화면에서 상속 구조 상에서 구조적으로 맞지 않는 오류의 여지가 있는 컴포넌트를 이벤트와 액션등을 활용하여 연결하기 위하여 가져올 때, 애플리케이션 개발 환경은 오류의 여지를 확인하고 사용자에게 공지 또는 자동 수정처리를 실시한다.
When the user brings in a component which is structurally incompatible with the inheritance structure on the first screen or the second screen by using an event and action or the like, the application development environment checks the room for the error and informs the user Or automatic correction processing.

실시 예로 리스트 형 구조 중 "Collection" 컴포넌트의 경우 “Visual” 컴포넌트를 상속 받고 있는 콤포넌트 지만 "Container" 컴포넌트와 달리 "CollectionItem" 콤포넌트들 만을 가질 수 있는 리스트 콤포넌트의 최상위 콤포넌트로 설정이 되어 있어 각각의 “Collection” 컴포넌트는 각자 전용의 CollectionItem를 컴포넌트를 가져야 한다는 조건 등을 확인하여 이를 위반하는 경우 오류의 여지를 확인하고 사용자에게 공지하는 개발 환경을 제공한다.For example, in the case of the "Collection" component of the list type, the component inherits the "Visual" component. However, unlike the "Container" component, it is set as the top component of the list component having only the "CollectionItem" Collection "component checks the condition that each exclusive CollectionItem should have a component, and if it violates it, checks the room of error and provides a development environment to notify the user.

도 66은 정상적으로 CollectionItem이 추가된 경우의 화면을 표시하고 있다.FIG. 66 shows a screen when CollectionItem is normally added.

도 67은 잘못된 CollectionItem을 삽입하고자 하는 경우 또는 Collection 컴포넌트가 아닌 콤포넌트에 CollectionItem을 삽입하고자 할 경우에 경고 메시지가 나오는 화면을 나타내고 있다.
FIG. 67 shows a screen in which a warning message is displayed when an attempt is made to insert a wrong CollectionItem or when a CollectionItem is to be inserted into a component that is not a Collection component.

이하에서는 도 16 내지 도 25를 참조하여 본 발명의 다른 일 실시 예에 따른 애플리케이션 개발 환경 제공 방법을 설명한다.Hereinafter, a method of providing an application development environment according to another embodiment of the present invention will be described with reference to FIGS.

도 16는 본 발명의 다른 일 실시 예에 따른 애플리케이션 개발 환경 제공 방법을 나타낸다.16 shows a method of providing an application development environment according to another embodiment of the present invention.

도 16를 참조하면, 먼저 본 발명의 다른 일 실시 예에 따른 애플리케이션 개발 환경 제공 장치(100)는 중간 언어로 정의되는 적어도 하나의 컴포넌트를 화면에 표시하고(S201), 컴포넌트에 지정되는 이벤트 또는 액션에 다라 상기 중간 언어로 구성된 제1 코드를 생성한다(S203).Referring to FIG. 16, an application development environment providing apparatus 100 according to another embodiment of the present invention displays at least one component defined as an intermediate language on a screen (S201), and displays an event or an action And generates a first code composed of the intermediate language (S203).

본 발명의 실시 예에 따른 애플리케이션 개발 환경 제공 장치(100)는 중간 언어로 정의되는 적어도 하나의 컴포넌트를 화면에 표시할 수 있다. 중간 언어는 애플리케이션을 타겟 단말기에 따라 적용하기 위한 XML방식의 언어를 포함할 수 있다. 또한, 중간 언어는 상술한 바와 같은 컴포넌트간 연결 관계 화면에 기초하여 생성될 수 있다. 이와 같이 본 발명의 실시 예에 따른 개발 환경 제공 장치(100)는 중간 언어를 활용함으로써 동일 어플리케이션을 다른 플랫폼에 적용하기 위한 중복 개발을 방지할 수 있다.The application development environment providing apparatus 100 according to the embodiment of the present invention can display at least one component defined as an intermediate language on the screen. The intermediate language may include an XML-based language for applying the application to the target terminal. Further, the intermediate language can be generated based on the inter-component connection relationship screen as described above. As described above, the development environment providing apparatus 100 according to the embodiment of the present invention can prevent the redundant development for applying the same application to another platform by utilizing an intermediate language.

도 17은 본 발명의 실시 예에 따른 중간 언어와 일반적인 JAVA 코드와의 비교도이다.17 is a diagram illustrating a comparison between an intermediate language and general JAVA codes according to an embodiment of the present invention.

도 17에 도시된 바와 같이, 코드가 많아지고 복잡해 질수록 일반적인 JAVA 코드와는 달리 중간 언어의 코드는 짧고 간결하게 작성될 수 있음을 알 수 있다. 또한, 이와 같은 중간 언어 코드는 애플리케이션 개발 환경 제공 장치(100)에서 제공되는 컴포넌트간의 연결 관계 기반 애플리케이션 개발 환경에 의해 자동적으로 작성될 수 있어 개발자의 수고를 저감시킬 수 있다. 또한, 개발 중 서비스 시나리오 변경 및 유지 보수에도 상당한 이점을 얻을 수 있다.As shown in FIG. 17, it can be seen that the code of the intermediate language can be written short and concise, unlike the general JAVA code, as the number of codes increases and becomes more complicated. In addition, such intermediate language code can be automatically created by the connection-based application development environment between the components provided in the application development environment providing apparatus 100, thereby reducing the developer's labor. In addition, significant benefits can be obtained in service scenario changes and maintenance during development.

도 18은 중간 언어로 정의되는 컴포넌트의 XML 포맷을 나타낸다.Figure 18 shows the XML format of a component defined as an intermediate language.

도 18에 도시된 바와 같이, 컴포넌트는 중간 언어로 정의된 XML 코드로 구현될 수 있다. 특히, 중간 언어는 플랫폼 중립적이어야 하며, 최종단계에서는 각 플랫폼에 최적화된 코드 생성을 필요로 한다.As shown in FIG. 18, the component may be implemented with XML code defined as an intermediate language. In particular, intermediate languages must be platform neutral and require code generation optimized for each platform at the end.

따라서, 본 발명의 실시 예에 따르면 도 18에 도시된 바와 같이 중간 언어에는 XML 엘리먼트들이 정의될 수 있으며, 애플리케이션 개발 환경 제공 장치(100)는 이 XML 엘리먼트들을 이용하여 최종 빌드 단계에서 각 플랫폼에 최적화된 코드를 생성할 수 있게 된다.Accordingly, according to the embodiment of the present invention, as shown in FIG. 18, XML elements can be defined in the intermediate language, and the application development environment providing apparatus 100 can optimize The generated code can be generated.

도 19 내지 24은 본 발명의 실시 예에 따른 컴포넌트별 XML 코드 유형 및 이에 따른 제1 화면 또는 제2 화면의 구성을 설명하기 위한 도면이다.FIGS. 19 to 24 are diagrams for explaining a component type of an XML code according to an embodiment of the present invention and a configuration of a first screen or a second screen according to the XML code type.

도 19은 본 발명의 실시 예에 따른 애플리케이션 개발 환경 제공 장치(100)에서 제공되는 기본 형태의 컴포넌트에 대한 XML코드를 나타낸다. 도 19에 도시된 바와 같이, 기본 형태의 컴포넌트는 빈 여백을 나타낼 수 있다.FIG. 19 shows an XML code of a basic type component provided in the application development environment providing apparatus 100 according to the embodiment of the present invention. As shown in FIG. 19, a basic type of component may represent a blank margin.

도 20은 본 발명의 실시 예에 따른 애플리케이션 개발 환경 제공 장치(100)에서 제공되는 헤더 컴포넌트 및 풋터(footer) 컴포넌트를 나타낸다. 도 20에 도시된 바와 같이, 헤더 컴포넌트 및 풋터 컴포넌트는 각각 페이지의 상단에 표시되는 상단 바 또는 하단에 표시되는 하단 바에 대응될 수 있다.20 shows a header component and a footer component provided in the application development environment providing apparatus 100 according to the embodiment of the present invention. As shown in FIG. 20, the header component and the footer component may correspond to a top bar displayed at the top of the page or a bottom bar displayed at the bottom, respectively.

한편, 도 21은 본 발명의 실시 예에 따른 애플리케이션 개발 환경 제공 장치(100)에서 제공되는 레이블, 텍스트박스 및 버튼 컴포넌트를 나타낸다. 도 21에 도시된 바와 같이, 각 레이블, 텍스트박스, 및 버튼 컴포넌트들은 각각 애플리케이션 페이지의 특정 위치와 XML코드에 대응될 수 있다.Meanwhile, FIG. 21 shows a label, a text box, and a button component provided in the application development environment providing apparatus 100 according to the embodiment of the present invention. As shown in FIG. 21, each label, text box, and button components may correspond to a specific location of an application page and an XML code, respectively.

그리고, 도 22은 본 발명의 실시 예에 따른 애플리케이션 개발 환경 제공 장치(100)에서 제공되는 컨테이너형 컴포넌트들을 나타낸다. 도 22을 참조하면, 컴포넌트가 다른 컴포넌트를 포함하는 경우, 그 컴포넌트는 컨테이너형 컴포넌트 일 수 있다. 예를 들어, Panel1 컴포넌트는 textbox1 컴포넌트 및 button1 컴포넌트를 포함할 수 있으므로, Panel1 컴포넌트는 컨테이너형 컴포넌트일 수 있다.22 shows container-type components provided in the application development environment providing apparatus 100 according to the embodiment of the present invention. 22, when a component includes another component, the component may be a container-like component. For example, a Panel1 component can include a textbox1 component and a button1 component, so that the Panel1 component can be a container-like component.

한편, 도 23는 본 발명의 실시 예에 따른 애플리케이션 개발 환경 제공 장치(100)에서 제공되는 리스트형 컴포넌트들을 나타낸다. 도 23를 참조하면, 예를 들어, 리스트형 컴포넌트는 복수의 컴포넌트 아이템들을 리스트로 나열하는 것을 나타낼 수 있다. 그리고, 도 23에 도시된 바와 같이, 애플리케이션 개발 환경 제공 장치(100)는 리스트 나열을 위해 리스트형 컴포넌트에 대응되는 XML코드를 생성할 수 있다.Meanwhile, FIG. 23 shows the list-type components provided in the application development environment providing apparatus 100 according to the embodiment of the present invention. Referring to FIG. 23, for example, a list type component may indicate listing a plurality of component items. As shown in FIG. 23, the application development environment provision apparatus 100 may generate XML code corresponding to the list type component for list listing.

그리고, 도 24은 본 발명의 실시 예에 따른 애플리케이션 개발 환경 제공 장치(100)에서 제공되는 논 비주얼(non-visual)컴포넌트들을 나타낸다. 도 24를 참조하면, 예를 들어 컴포넌트는 존재하나, 페이지에는 표시되지 않는 컴포넌트의 경우, 그 컴포넌트는 논 비주얼 컴포넌트 일 수 있다.24 shows non-visual components provided in the application development environment providing apparatus 100 according to the embodiment of the present invention. Referring to FIG. 24, for example, in the case of a component that is present but not displayed on a page, the component may be a nonvisual component.

한편 컴포넌트는 도 25와 같은 구조를 가질 수 있다.On the other hand, the component may have the structure as shown in FIG.

도 25를 참조하면, 예를 들어, 컴포넌트는 비주얼 컴포넌트, 컨테이너 컴포넌트, 콜렉션 컴포넌트 및 논비주얼 컴포넌트를 포함할 수 있다. Referring to Figure 25, for example, a component may include a visual component, a container component, a collection component, and a nonvisual component.

비주얼 컴포넌트는 일반적인 유저 인터페이스 컴포넌트(버튼, 라벨, 텍스트박스 등)를 의미할 수 있으며, 컨테이너 컴포넌트는 비주얼 컴포넌트를 포함하는 유저 인터페이스 컴포넌트(폼, 헤더, 풋터, 패널)를 의미할 수 있다. 그리고, 콜렉션 컴포넌트는 리스트를 표현하는 유저 인터페이스 컴포넌트(리스트뷰, 커버플로우, 네비게이션 바)를 의미할 수 있으며, 논비주얼 컴포넌트는 화면에 바로 보이지는 않지만 특정행위 또는 데이터 처리를 담당하는 컴포넌트(타이머, 링크, 메시지박스, db테이블)일 수 있다.A visual component may refer to a general user interface component (button, label, text box, etc.), and a container component may refer to a user interface component (form, header, footer, panel) that contains a visual component. A collection component may refer to a user interface component (list view, cover flow, navigation bar) representing a list, and a nonvisual component may include a component (timer, Link, message box, db table).

이와 같은 각 컴포넌트들은 이에 대응되는 XML 형식의 중간 언어로 구성될 수 있다. 그리고, 컴포넌트에 지정되는 이벤트 또는 액션에 따라 상기 중간 언어로 구성된 제1 코드는 타겟 플랫폼에 대응되는 제2 코드로 변환된다(S205).Each of these components can be configured as an intermediate language corresponding to the XML format. The first code configured as the intermediate language is converted into a second code corresponding to the target platform according to the event or action specified in the component (S205).

이와 같이 중간 언어로 구성된 컴포넌트는 XML의 형태를 가질 수 있다. 예를 들어, 각 컴포넌트는 XML의 노드 단위를 나타낼 수 있다. 그리고, 각 컴포넌트는 qname 및 id attribute를 통해 선언 될 수 있다. qname의 prefix는 namespace를 의미할 수 있으며, name은 컴포넌트 명을 가질 수 있다. 그리고, id attribute는 하나의 페이지에서 유일한 값을 가질 수 있으며, 영문자로 시작하되, 영문자와 숫자간 조합을 가질 수도 있다.Thus, a component configured in an intermediate language can have the form of XML. For example, each component can represent a node unit of XML. And each component can be declared via the qname and id attributes. The prefix of qname can be a namespace, and name can have a component name. The id attribute may have a unique value in one page, and may start with an alphabetic character, but may have a combination of alphabetic characters and digits.

한편, 중간 언어의 최 상위 노드는 페이지를 나타낼 수 있다. 이에 따라, qname의 prefix는 페이지 엘리먼트의 xmlns: attribute에서 선언될 수 있다.On the other hand, the top node of the intermediate language can represent a page. Thus, the prefix of qname can be declared in the xmlns: attribute of the page element.

그리고, 한 화면을 구성하는 페이지는 한 개의 파일 단위로 존재할 수 있고, 각각의 페이지의 id 엘리먼트는 모든 페이지들에서 유일한 값을 가질 수 있다.In addition, a page constituting one screen may exist in one file unit, and an id element of each page may have a unique value in all pages.

이와 같은 컴포넌트들의 액션 및 이벤트들은 각 선언된 컴포넌트 엘리먼트의 child 엘리먼트로 포함될 수 있다. 예를 들어, 컨테이너 컴포넌트는 비주얼 컴포넌트를 child 엘리먼트로 포함시킬 수 있다. 또한, 컬렉션 컴포넌트는 자신이 포함 가능한 아이템 컴포넌트를 아이템 엘리먼트의 형태로 포함할 수 있다. 그리고, 모든 컴포넌트들은 이벤트 및 액션 중 적어도 하나를 포함할 수 있다.Actions and events of such components may be included as child elements of each declared component element. For example, a container component can include a visual component as a child element. In addition, the collection component can include an item component that can be included in the collection component in the form of an item element. And, all components may include at least one of an event and an action.

도 26는 애플리케이션 개발 환경 제공 장치(100)가 타겟 단말기(300)에 구동 가능한 제2 언어로 변환하여 출력한 애플리케이션이 타겟 단말기(300)에서 실행된 화면을 나타낸다. 26 shows a screen in which an application converted by the application development environment providing apparatus 100 into a second language that can be driven by the target terminal 300 and output by the target terminal 300 is executed.

본 발명의 실시 예에 따른 애플리케이션 개발 환경 제공 장치(100)는 중간 언어로 작성된 코드를 타겟 디바이스에 적합한 제2 언어로 변환할 수 있다. 예를 들어, 본 발명의 실시 예에 따른 애플리케이션 개발 환경 제공 장치(100)는 iOS시리즈, Android시리즈, 타이젠 OS 등으로 중간 언어에서 제2 코드로의 직접 변환을 수행할 수 있다. 따라서, 개발 효율을 극대화 할 수 있게 된다.The application development environment providing apparatus 100 according to the embodiment of the present invention can convert the code written in the intermediate language into a second language suitable for the target device. For example, the application development environment providing apparatus 100 according to the embodiment of the present invention can directly convert from an intermediate language to a second code using an iOS series, an Android series, a Tezen OS, or the like. Therefore, the development efficiency can be maximized.

또한, 본 발명의 실시 예에 따른 애플리케이션 개발 환경 제공 장치(100)는 타겟 플랫폼에 따른 시뮬레이션 화면을 애플리케이션 개발 환경과 함께 제공할 수 있다. 이에 따라 개발자는 선택된 디바이스에서 구동되는지 여부를 미리 판단할 수 있게 된다.In addition, the application development environment providing apparatus 100 according to the embodiment of the present invention can provide a simulation screen according to the target platform along with the application development environment. Thus, the developer can determine in advance whether or not the selected device is driven.

한편, 도 27 및 도 28은 본 발명의 다른 일 실시 예에 따른 애플리케이션 개발 환경 제공 장치(100)에서 제공되는 제2 화면의 컴포넌트 배치 방법을 나타낸다.27 and 28 illustrate a method of arranging the components of the second screen provided in the application development environment providing apparatus 100 according to another embodiment of the present invention.

본 발명의 다른 일 실시 예에 따른 애플리케이션 개발 환경 제공 장치(100)는 컴포넌트의 표시 및 각 이벤트 및 액션간의 연결 관계를 효과적으로 표시하기 위해, 컴포넌트 객체의 상단 영역에는 컴포넌트 객체의 인스턴스명, 객체명 및 아이콘을 배치할 수 있다. 이에 따라 컴포넌트의 구분이 용이하게 될 수 있다. 이는 도 27에 나타나 있다.The application development environment providing apparatus 100 according to another embodiment of the present invention displays an instance name of the component object, an object name, and an object name of the component object in the upper area of the component object, Icons can be placed. Thus, the classification of the components can be facilitated. This is shown in Fig.

여기서, 컴포넌트 객체 내 일측에는 박스 형태의 액션을 배치할 수 있으며, 타측에는 박스 형태의 이벤트들을 배치할 수 있다. 그리고, 각 이벤트에서 액션으로 연결되는 연결 관계는 화살표 이미지의 방향으로 표시할 수 있다. 이에 따라 개발자는 일측에서부터 타측으로 이어지는 자연스러운 애플리케이션의 동작 흐름을 파악할 수 있게 된다.Here, a box-shaped action can be disposed on one side of the component object, and box-shaped events can be disposed on the other side. Also, the connection relationship between each event and the action can be displayed in the direction of the arrow image. This allows the developer to understand the flow of natural applications running from one side to the other.

한편, 본 발명의 다른 일 실시 예에 따른 애플리케이션 개발 환경 제공 장치(100)는 컴포넌트의 표시 및 각 이벤트 및 액션간의 연결 관계를 효과적으로 표시하기 위해, 각 컴포넌트들을 정렬하여 표시할 필요성이 있다.Meanwhile, the application development environment providing apparatus 100 according to another embodiment of the present invention needs to sort and display each component in order to effectively display the display of components and the connection relation between each event and action.

도 28에 도시된 바와 같이, 이와 같은 컴포넌트의 정렬을 위해 애플리케이션 개발 환경 제공 장치(100)는 최상위 폼 페이지를 왼쪽 상단 1순위로 배치하고, 버튼 및 메뉴 항목들을 2순위로 배치하며, 상기 버튼 및 메뉴 항목에 대응되는 링크(화살표 이미지)들을 3순위로 배치하고, 헤더와 풋터와 같은 이벤트에 대해 자주 사용되지 않는 항목들은 최하순위로 배치할 수 있다.As shown in FIG. 28, the application development environment providing apparatus 100 arranges the top-level form pages in the top-left first order, arranges the buttons and menu items in the second order, Links (arrow images) corresponding to menu items are arranged in three positions, and items that are not frequently used for events such as a header and a footer can be arranged in the lowest order.

이와 같은 배치를 통해 도 28에 도시된 바와 같이, 왼쪽에서 오른쪽으로 이어지는 각 컴포넌트의 배치 흐름에 용이하게 될 수 있으며, 개발자가 일일이 컴포넌트를 재 배치해야 하는 수고를 저감시킬 수 있게 된다.With this arrangement, it is possible to facilitate the arrangement flow of each component from left to right as shown in FIG. 28, and it is possible to reduce the labor of the developer to rearrange the components one by one.

한편, 도 29는 본 발명의 또 다른 일 실시 예에 따른 애플리케이션 개발 환경 제공 장치(100)의 레이아웃 방법을 나타낸다.29 shows a layout method of an application development environment providing apparatus 100 according to another embodiment of the present invention.

기존의 하이브리드 앱 개발 도구들은 다양한 해상도를 지원하지 못하는 문제점이 있었다. 특히, 기존의 WYSWYG 지원 앱 개발 도구들은 개발자의 드래그 앤 드롭을 통해 레이아웃 좌표를 적용하기 위해 X, Y 좌표만을 이용하여 UI컴포넌트를 배치 설계하고 있다. 그러나, 이는 단말의 해상도가 조금이라도 바뀌거나 가로 모드로 변경되면 이에 맞는 별도 화면을 각각 개발해야 하는 문제점이 있었다.Conventional hybrid application development tools do not support various resolutions. In particular, existing WYSWYG supported application development tools are designed to deploy UI components using only X and Y coordinates in order to apply layout coordinates through drag-and-drop of developer. However, there has been a problem in that a separate screen corresponding to the resolution of the terminal needs to be developed when the resolution of the terminal changes slightly or changes to the landscape mode.

따라서, 도 29를 참조하면, 본 발명의 실시 예에 따른 애플리케이션 개발 환경 제공 장치(100)는 블록단위를 이용하여 어떤 단말기든 어떤 해상도이든 동일하게 표현 될 수 있는 블록레이아웃 방식을 사용할 수 있다.29, the apparatus 100 for providing an application development environment according to an embodiment of the present invention can use a block layout method in which any terminal can be expressed at any resolution by using block units.

블록레이아웃 방식은 화면을 각 UI컴포넌트를 이용하여 배치하는 경우, X, Y의 좌표정보를 이용하는 것이 아니라, 컨테이너 컴포넌트를 기준으로 상하좌우에 정렬하는 방식을 의미할 수 있다. 이 경우, 해상도가 변경되어도 각 컴포넌트들은 항상 상하좌우 위치를 고수하게 되어 타겟 단말기마다 동일한 레이아웃을 표현할 수 있게 된다.In the case of arranging the screen using each UI component, the block layout method may refer to a method of arranging up, down, left, and right based on the container component, instead of using coordinate information of X and Y. In this case, even if the resolution is changed, each component always maintains the up, down, left, and right positions so that the same layout can be expressed for each target terminal.

또한, 연속된 컴포넌트가 배열된 경우, 예를 들어, 버튼1, 버튼2 및 버튼 3을 배치하는 경우에, 각 버튼들의 사이즈만 정의하더라도 화면이 로테이션 되거나 해상도가 다른 디바이스에서도 동일한 레이아웃이 표현될 수 있다. In the case where the continuous components are arranged, for example, in the case of arranging the buttons 1, 2, and 3, even if only the size of each button is defined, the screen may be rotated or the same layout may be displayed on devices having different resolutions have.

도 29 내지 도 31은 이와 같은 블록 레이아웃의 실시 예들을 나타낸다.Figures 29-31 illustrate embodiments of such a block layout.

예를 들어, 도 29과 같이, 각 컴포넌트들 중 최상단에 헤더, 중간단에 패널1 및 하단의 풋터가 순차적으로 배치될 수 있다. 폼, 헤더, 풋터 및 패널들은 컨테이너 컴포넌트로서의 역할을 수행할 수 있고, 각 컨테이너들은 상하 배치를 담당할 수 있게 된다.For example, as shown in FIG. 29, a header may be arranged at the top of each component, a panel 1 at the middle end, and a footer at the bottom. Forms, headers, footers, and panels can act as container components, and each container can be placed up and down.

도 30는 본 발명의 실시 예에 따른 애플리케이션 개발 환경 제공 장치(100)가 텍스트박스 컴포넌트 및 버튼 컴포넌트에 대한 X,Y 좌표정보 없이 애플리케이션을 생성하는 방법을 설명하기 위한 도면이다.30 is a diagram for explaining a method of generating an application without providing X, Y coordinate information for a text box component and a button component, according to an application development environment providing apparatus 100 according to an embodiment of the present invention.

도 30를 참조하면, 본 발명의 실시 예에 따른 애플리케이션 개발 환경 제공 장치(100)는 X, Y 좌표 정보 없이 텍스트박스 컴포넌트 및 버튼 컴포넌트에 대한 width 및 height를 설정할 수 있다. 이 경우, 실제 화면에서 표시되는 경우에는 텍스트박스를 먼저 배치하고 바로 오른 쪽에 버튼을 두게 되어 있어 애플리케이션 개발 환경에 의해 제작된 애플리케이션 들은 X, Y 좌표변환 없이도 각 단말기에 적합한 해상도로 변환될 수 있다.Referring to FIG. 30, an apparatus 100 for providing an application development environment according to an exemplary embodiment of the present invention may set the width and height of a text box component and a button component without X, Y coordinate information. In this case, when displayed on the actual screen, the text box is arranged first and the button is placed on the right side, so that applications produced by the application development environment can be converted into resolution suitable for each terminal without changing the X and Y coordinates.

도 31은 본 발명의 실시 예에 따른 애플리케이션 개발 환경 제공 장치(100)의 컴포넌트 배치 방법을 나타낸다.31 shows a method of arranging components of an application development environment providing apparatus 100 according to an embodiment of the present invention.

도 31에 도시된 바와 같이, 본 발명의 실시 예에 따른 애플리케이션 개발 환경 제공 장치(100)는 페이지상의 하단 풋터 영역에 네비게이션 컴포넌트를 배치할 수 있다. 이 경우, 컨테이너 형식의 네비게이션 컴포넌트에 대해, 애플리케이션 개발 환경 제공 장치(100)는 그 Child 컴포넌트들을 타겟 단말기(300)의 해상도에 따라 크기 변경을 수행할 수 있다. 그리고, 크기 변경된 Child 컴포넌트들은 화면에 꽉 차도록 표시될 수 있다.As shown in FIG. 31, the application development environment providing apparatus 100 according to the embodiment of the present invention may place a navigation component in a lower footer area on a page. In this case, the application development environment providing apparatus 100 may change the size of the child components according to the resolution of the target terminal 300, for a container-type navigation component. Then, the resized Child components may be displayed to fill the screen.

한편, 도 32은 애플리케이션 개발 환경 제공 장치(100)의 플랫폼을 도식화한 블록도이며, 도 33는 애플리케이션을 실행할 수 있는 단말기(300)의 플랫폼을 도식화한 블록도이고, 도 34은 서버(300)의 아키텍쳐를 나타내는 블록도이다.33 is a block diagram illustrating a platform of a terminal 300 capable of executing an application and FIG. 34 is a block diagram illustrating a platform of an application development environment providing apparatus 100 according to an embodiment of the present invention. Fig.

본 발명의 실시 예에 따른 애플리케이션 개발 환경 제공 장치(100)는 각각의 개발자 기호 및 목적에 따서 다양한 deploment방식을 지원할 수 있으며, 이를 위해 다양한 시스템 프레임워크를 탑재할 수 있다. 본 발명의 실시 예에 따르면, iOS의 경우, xarchive, ipa, Xcode project 3가지 타입 지원 및 인증서 signing까지 자동화를 지원할 수 있다. 그리고, Android의 경우 apk, ADT project 2가지 타입 지원 및 인증서 생성 및 signing까지 자동화를 지원할 수 있고, Data Server를 통해 WAR 패키징 및 ftp를 통한 서버 업로드를 지원할 수 있다. The application development environment providing apparatus 100 according to the embodiment of the present invention can support various deploment schemes according to the developer's preference and purpose, and various system frameworks can be loaded therefor. According to the embodiment of the present invention, in the case of iOS, three types of support for xarchive, ipa, and Xcode project and automation can be supported up to certificate signing. Android can support two types of apk and ADT project, automation of certificate generation and signing, support for WAR packaging through server, and server upload via ftp.

한편, 본 발명의 실시 예에 따른 애플리케이션 개발 환경 제공 장치(100)는 진정한 의미의 Once Source, Multi Platform을 구현하기 위해, Webkit 엔진 내장 및 OSX, Linux, Windows에도 모두 동일하게 개발될 수 있도록 설계될 수 있다. 한편, 애플리케이션 개발 환경 제공 장치(100)는 eclipse와는 차별화 하여 개발자로 하여금 별도의 설정 및 WAS와 같은 별도의 개발자적 설치사항이 필요하지 않도록 애플리케이션 개발 환경을 제공할 수 있다. 또한, JVM 및 Webkit의 내장으로 별도의 연관된 설치 및 설정이 전혀 필요 없게 된다.Meanwhile, the application development environment providing apparatus 100 according to the embodiment of the present invention is designed to be developed in the same manner as the Webkit engine and OSX, Linux, and Windows in order to implement a true source of Once Source and Multi Platform . On the other hand, the application development environment providing apparatus 100 can differentiate from eclipse and provide the application development environment so that the developer does not need separate setting and separate developer installation items such as WAS. In addition, there is no need for any separate installation and configuration with the built-in JVM and Webkit.

도 35는 본 발명의 실시 예에 따른 컴포넌트 구조도를 나타낸다.35 shows a component structural view according to an embodiment of the present invention.

도 35를 참조하면, 컴포넌트는 가상 컴포넌트를 포함할 수 있으며, 하위 단계에 비주얼 컴포넌트 및 논비주얼 컴포넌트를 포함할 수 있다. 그리고, 비주얼 컴포넌트는 라벨, 버튼, 텍스트박스, 텍스트뷰, 콤보박스, 텍스트 영역, 이미지뷰, 차트, 구글맵, 미디어 또는 임베디드 컴포넌트 중 적어도 하나를 포함할 수 있으며, 그 하위 단계에 컨테이너 컴포넌트 및 콜렉션 컴포넌트를 포함할 수 있다.Referring to FIG. 35, a component may include a virtual component, and may include a visual component and a nonvisual component at a lower level. The visual component may include at least one of a label, a button, a text box, a text view, a combo box, a text area, an image view, a chart, a Google map, a media or an embedded component, Component.

컨테이터 컴포넌트는 애플리케이션, 폼, 헤더, 풋터, 패널, 레이아웃 패널, 수직 패널, Accordion, 프레임 스플리터, 프레임 컨테이너 및 프레임 중 적어도 하나를 포함할 수 있고, 컬렉션 컴포넌트는 이미지슬라이드 뷰, 커버 플로우, 아이콘리스트 뷰, 썸네일리스트 뷰, 네비게이션 바 리스트 뷰, 리스트 뷰, 멀티 리스트 뷰 및 캘린터 리스트 뷰 컴포넌트 중 적어도 하나를 포함할 수 있다.The container component may include at least one of an application, a form, a header, a footer, a panel, a layout panel, a vertical panel, an Accordion, a frame splitter, A thumbnail list view, a navigation bar list view, a list view, a multi-list view, and a calendar list view component.

한편, 논비주얼 컴포넌트는 로딩 바, 타이머, 날짜시간, DBinsert/Update/Delete, 링크, 웹링크, 메시지박스, 액션리스트, 변수, 로그인 및 doc뷰어 컴포넌트중 적어도 하나를 포함할 수 있으며, 하위레벨에 데이터스토어 컴포넌트를 포함할 수 있다. 데이터스토어 컴포넌트는 DB관련하여, DB테이블, 웹 앱 모듈, Rss, Assets, 파일리스트, 폼데이터스토어, 앱데이터스토어, GPS, 컴파스 및 배터리 컴포넌트 중 적어도 하나를 포함할 수 있다.Non-visual components may include at least one of loading bar, timer, date time, DBinsert / Update / Delete, link, web link, message box, action list, variable, login and doc viewer component, And may include a data store component. The data store component may include at least one of a DB table, a web app module, an Rss, an Assets, a file list, a form data store, an app data store, a GPS, a compass and a battery component.

이하에서는 도 36 내지 도 53을 참조하여 본 발명의 실시 예에 따른 애플리케이션 개발 환경 제공 방법에 따라 제공되는 화면들을 이용하여 애플리케이션이 생성되는 과정을 설명한다.Hereinafter, a process of creating an application using screens provided according to an application development environment providing method according to an embodiment of the present invention will be described with reference to FIGS. 36 to 53. FIG.

도 36는 본 발명의 실시 예에 따른 애플리케이션 개발 환경 제공을 위한 프로젝트 생성 화면을 나타낸다. 도 36에서 개발자는 파일 메뉴의 새로 만들기를 클릭함으로써, 제작하고자 하는 프로젝트에 대한 선택을 수행할 수 있다.36 shows a project creation screen for providing an application development environment according to an embodiment of the present invention. In Fig. 36, the developer can select a project to be produced by clicking New in the File menu.

이후, 도 37과 같이 개발자가 새로운 프로젝트를 선택하고자 하는 경우 복수의 템플릿을 제공하는 화면이 표시될 수 있다. 특히, 템플릿 외에도 function 및 tablet이 제공될 수 있으며, 개발자가 Default를 선택하는 경우 템플릿 없이 임의로 원하는 프로젝트 제작에 착수할 수 있는 인터페이스를 제공할 수 있다. 그리고, 개발자가 복수의 템플릿 중 특정 템플릿을 선택하는 경우, 기본적인 구성이 미리 설정된 템플릿에 기초하여 새로운 프로젝트를 생성할 수 있다.Thereafter, when a developer wants to select a new project as shown in FIG. 37, a screen for providing a plurality of templates may be displayed. In particular, functions and tablets can be provided in addition to templates, and if the developer chooses Default, they can provide an interface that allows them to initiate the desired project without any template. When a developer selects a specific template among a plurality of templates, a new project can be created based on a template in which a basic configuration is set in advance.

그리고, 도 38에서는 프로젝트 생성을 위한 라이선스 유효성 검증 화면을 나타내고 있다. 서버(200) 또는 애플리케이션 개발 환경 제공 장치(100)는 사용자, 비밀번호 및 호스트 URL입력에 기초하여 프로젝트 생성을 위한 라이선스가 있는지를 확인할 수 있다. 그리고, 애플리케이션 개발 환경 제공 장치(100)는 구매 인증되거나 또는 ASP 서비스로 이용함이 확인되는 경우에만 유효하게 다음 단계로 이동하도록 제한할 수 있다.38 shows a license validation screen for project creation. The server 200 or the application development environment providing apparatus 100 can confirm whether there is a license for creating a project based on a user, a password, and a host URL input. Then, the application development environment provision apparatus 100 may restrict the migration to the next step only when it is confirmed that the purchase is authenticated or used as the ASP service.

도 39은 프로젝트 정보 설정 화면을 나타낸다. 프로젝트 정보 설정 화면은 애플리케이션 개발을 위한 프로젝트의 명칭, 어플명, 아이디 및 프로젝트 버전을 설정할 수 있다.39 shows a project information setting screen. The project information setting screen can set the project name, application name, ID, and project version for application development.

도 40는 본 발명의 실시 예에 따른 제1 화면을 포함하는 어플리케이션 개발 환경을 나타낸다. 특히, 제1 화면은 도 39의 sitemap 에디터 창에 대응될 수 있다. 도 40에서는 앞서 선택된 RSS 템플릿에 의해 미리 생성된 기본 Home 페이지가 생성되어 있으며, 활성화 되어 있음을 나타내고 있다.40 shows an application development environment including a first screen according to an embodiment of the present invention. In particular, the first screen may correspond to the sitemap editor window of Fig. In FIG. 40, it is shown that a basic home page generated in advance by the RSS template selected in advance is generated and activated.

도 41은 제1 화면에 새로운 페이지가 추가된 것을 나타낸다. 앞서 설명한 바와 같이, 본 발명의 실시 예에 따른 애플리케이션 개발 환경 제공 장치(100)는 드래그 앤 드랍을 이용하여 페이지를 추가할 수 있다. 예를 들어, 도 41과 같이 sitemap 에디터 창 우측 palette에 포함된 Form 페이지 아이콘을 제1 화면으로 드래그 앤 드랍함으로써 Form 페이지가 추가될 수 있다.41 shows that a new page is added to the first screen. As described above, the application development environment providing apparatus 100 according to the embodiment of the present invention can add pages using drag and drop. For example, as shown in FIG. 41, a Form page can be added by dragging and dropping a Form page icon included in the right palette of the sitemap editor window to the first screen.

도 42은 Form 페이지의 속성값 변경을 통해 페이지의 ID를 RSSpage로 변경하는 것을 나타낸다. 개발자는 속성 창에 표시된 입력 인터페이스를 통하여 각 페이지별 속성값 변경을 수행할 수 있다. 42 shows the change of the ID of the page to the RSSpage by changing the attribute value of the Form page. The developer can change the attribute value of each page through the input interface displayed in the property window.

그리고, 도 43는 Home 페이지와 RSSpage 사이의 연결을 수행하는 것을 나타낸다. 도 43에 도시된 바와 같이, 개발자는 link를 클릭 후, 먼저 연결 시작 페이지인 Home 페이지 아이콘을 클릭하고, 이후 연결 대상 페이지인 RSSpage 페이지 아이콘을 클릭함으로써 페이지간 연결이 수행될 수 있다. 연결이 수행되면 제1 화면에는 각 페이지간의 연결 관계가 앞서 설명한 화살표 이미지로 표시될 수 있다.43 shows a connection between the home page and the RSS page. As shown in FIG. 43, the developer can click the link, click the Home page icon, which is the connection start page, and then click the RSSpage page icon, which is the connection target page, to perform the inter-page connection. When the connection is performed, the connection relationship between the respective pages may be displayed on the first screen by the arrow image described above.

도 44은 Home 페이지에 컴포넌트를 추가하기 위한 화면을 나타낸다. 예를 들어, 애플리케이션 개발 환경 제공 장치(100)는 도 43의 에디터 상에서 select 클릭 및 이에 따른 Home 페이지 더블 클릭에 따라, 컴포넌트 추가 화면을 표시할 수 있다. 도 44과 같이, 추가 가능한 컴포넌트의 종류는 예를들어 Basic, Time, ListView, Layout, Database, DataStore, Forms, Extention, Platform, Tablet, Charts, Rules 및 Unofficials 중 적어도 하나를 포함할 수 있다.44 shows a screen for adding a component to a Home page. For example, the application development environment providing apparatus 100 may display a component addition screen according to a select click on the editor of FIG. 43 and a double-click of the home page accordingly. As shown in FIG. 44, the types of components that can be added may include at least one of Basic, Time, ListView, Layout, Database, DataStore, Forms, Extension, Platform, Tablet, Charts, Rules and Unofficials.

한편, 도 45는 Home 페이지에 RSS_CNN 버튼 컴포넌트가 생성된 것을 나타낸다. 예를 들어, Basic 종류의 컴포넌트 중 Button 컴포넌트가 드래그 앤 드랍되어 Home 페이지에 추가될 수 있으며, 속성 창에서 ID값이 RSS_CNN값으로 변경됨으로써 도 45와 같은 RSS_CNN 버튼 컴포넌트가 생성될 수 있다. 또한, 속성의 Style 탭에서 size값 변경을 수행하여 RSS_CNN 버튼 컴포넌트를 적당한 크기로 변경할 수 있다.On the other hand, FIG. 45 shows that the RSS_CNN button component is created in the Home page. For example, a Button component of a Basic type component can be added to the Home page by dragging and dropping, and an ID value in the property window is changed to an RSS_CNN value, whereby an RSS_CNN button component as shown in FIG. 45 can be generated. You can also change the RSS_CNN button component to an appropriate size by performing a size value change on the Style tab of the attribute.

그리고, 도 46는 Home 페이지에 포함된 각 컴포넌트간 연결 관계를 나타내는 제2 화면을 표시하고, RSS_CNN 버튼 컴포넌트를 link_RSSpage 컴포넌트와 연결시키는 것을 나타낸다. 제2 화면으로의 전환은 하단의 Workflow 탭 선택으로 이루어질 수 있다. 그리고, 우측 flow창의 아이콘들을 드래그 앤 드랍함으로써 RSS_CNN 버튼의 onClick 이벤트와 link_RSSpage의 move 액션을 연결시킬 수 있다. 이에 따라 컴포넌트간 연결 관계가 화살표 이미지로 표시될 수 있으며, 이와 같은 링크 연결을 통해 Home 페이지에서의 RSS_CNN버튼이 클릭되면 RSSpage 페이지로 이동되도록 설정될 수 있다.46 shows a second screen showing the connection relationship among the components included in the Home page, and shows that the RSS_CNN button component is linked to the link_RSSpage component. Switching to the second screen can be done by selecting the Workflow tab at the bottom. You can also link the onClick event of the RSS_CNN button with the move action of the link_RSSpage by dragging and dropping the icons in the right flow window. Accordingly, the connection relationship between components can be displayed as an arrow image, and when the RSS_CNN button on the Home page is clicked through the link connection, it can be set to be moved to the RSSpage page.

도 47은 RSSpage 페이지의 컴포넌트 추가 화면을 나타낸다. 도 47과 같이, RSS page 페이지로 ThumbListView를 드래그 앤 드랍 하여 RSSpage에 이동하면, 미리 설정된 썸네일 리스트 뷰 컴포넌트가 RSS page의 페이지 화면에 표시될 수 있다.47 shows a component addition screen of the RSS page. As shown in FIG. 47, when the ThumbListView is dragged and dropped onto the RSS page to move to the RSS page, a preset thumbnail list view component can be displayed on the page page of the RSS page.

도 48은 RSSPage 페이지에 대한 컴포넌트간 연결 관계 화면을 나타낸다.48 shows a connection relationship between components of the RSSPage page.

도 48에 도시된 바와 같이, RSSpage 가 초기화 될 때에 발생하는 onInit이벤트와 RSS Data를 가져오는 Bind 액션이 연결될 수 있다. 이는 앞서 설명한 바와 마찬가지로 flow를 클릭하여 RSS page form 컴포넌트의 onInit 이벤트와 rss1 컴포넌트의 bind를 연결 함으로서 즉시 수행될 수 있다.As shown in FIG. 48, an onInit event that occurs when the RSS page is initialized can be connected to a Bind action that fetches the RSS data. This can be done immediately by clicking on the flow as described above and linking the onInit event of the RSS page form component with the bind of the rss1 component.

도 49은 RSSpage 페이지의 RSS컴포넌트에 대한 데이터 바인딩을 위한 화면을 나타낸다.49 shows a screen for data binding to the RSS component of the RSS page.

도 49과 같이, 애플리케이션 개발 환경 제공 장치(100)는 RSS 데이터 값들을 페이지 상에서 보여주는 화면을 표시할 수 있다. 또한, 애플리케이션 개발 환경 제공 장치(100)는 RSS data 값들이 ThumbListView 컴포넌트의 어느 위치에 대응될 것인지를 결정할 수 있으며, rss1에 자동으로 형성된 값들을 ThumbListView의 대응 리스트 값에 할당할 수 있다.As shown in FIG. 49, the application development environment providing apparatus 100 may display a screen showing RSS data values on a page. Also, the application development environment providing apparatus 100 can determine which position of the ThumbListView component the RSS data values correspond to, and assign the values automatically formed in the rss1 to the corresponding list value of the ThumbListView.

그리고, 도 50는 완성된 애플리케이션을 다양한 플랫폼에 맞게 변환하기 위한 내보내기 화면을 나타낸다. 앞서 설명한 바와 같이, 완성된 애플리케이션은 중간 언어로 구성될 수 있으며, 타겟 OS에 따라 제2 언어로 변환될 수 있다. 따라서, 내보내기 화면은 이와 같은 제2 언어를 선택할 수 있도록 하는 선택 화면을 제공할 수 있다. 예를 들어, 내보내기 선택 대상은 안드로이드 프로젝트, Xcode 프로젝트, 윈도우폰, 타이젠 중 어느 하나일 수 있다.
50 shows an export screen for converting the completed application into various platforms. As described above, the completed application can be configured as an intermediate language and can be converted into a second language according to the target OS. Thus, the export screen can provide a selection screen that allows selection of such second language. For example, the export selection may be an Android project, an Xcode project, a Windows phone, or a title.

도 68은 기존의 타겟 OS에 따라 제2 언어로 변환될 수 있을 뿐 아니라 일면으로 웹킷(WebKit) CSS(Cascade Style Sheet)을 지정하면 HTML5형식을 포함하여 각 브라우져에 맞도록 변환하는 방법을 제공하는 화면이다. 최근 안드로이드, iOS뿐 아니라 Windows8 IE, Tizen, Ubuntu, Mozilla, Opera등의 새로운 플랫폼들이 속속들이 선보임에 따라서 이전에 작성한 HTML애플리케이션의 CSS 호환성의 문제점을 해결하고 각기 다른 웹브라우져 플랫폼들은 서로 표준화되지 않고 호환되지 않는 CSS를 이용하고 있어 개발자들의 각 웹 플랫폼에 맞도록 CSS를 사용하여야 하는 문제점을 해결하기 위하여 기존의 웹킷(Webkit) CSS만 입력하면, 플랫폼 뿐 아니라 각 브라우저에 맞도록 변환하여 개발할 수 있는 방법을 제공한다.
68 is a diagram illustrating a method of converting a WebKit CSS (Cascade Style Sheet) to HTML2 format according to an existing target OS and transforming it to fit each browser Screen. Recently, new platforms such as Android, iOS as well as Windows8 IE, Tizen, Ubuntu, Mozilla, and Opera have been intensely introduced. As a result, the problem of CSS compatibility of the HTML application written before is solved and different web browser platforms are not compatible with each other (Webkit) CSS in order to solve the problem that CSS is used to suit each developer's web platform. So, if you enter only the existing Webkit CSS, to provide.

도 51은 안드로이드 프로젝트를 선택한 경우 패키지 생성화면을 나타낸다. 이 경우, 애플리케이션 개발 환경 제공 장치(100)는 안드로이드 마켓 어플리케이션(apk) 자체를 생성하거나 안드로이드 개발을 위한 프로젝트 자체를 생성할 수 잇는 선택 메뉴를 표시할 수 있다. 프로젝트 자체를 생성하는 경우에는 안드로이드 앱 개발을 위한 다른 툴에서도 애플리케이션 수정이 가능하게 되는 장점이 있다.51 shows a package creation screen when the Android project is selected. In this case, the application development environment provision apparatus 100 can display a selection menu that can generate the Android market application apk itself or create a project itself for Android development. If you create the project itself, you can also modify the application in other tools for Android app development.

도 52는 해당 어플리케이션에서 실제로 동작하는지를 확인하기 위한 시뮬레이터 동작 화면을 나타내며, 도 53은 최종 애플리케이션이 변환 출력되고, 스마트 디바이스로 전송되어 동작하는 스마트 디바이스의 화면을 나타낸다.FIG. 52 shows a simulator operation screen for confirming whether the application actually operates, and FIG. 53 shows a screen of a smart device which is converted and outputted by the final application and transmitted to the smart device and operated.

도 53에 도시된 바와 같이, 스마트 디바이스에서는 앞서 생성한 RSS_CNN 버튼을 home 페이지에서 클릭하면 Form1 페이지(RSSpage)로 이동되며, Form1 페이지 기동에 따라 데이터 바인딩된 웹상의 DB로부터 RSS데이터를 수신하여 썸네일 리스트 뷰 컴포넌트에 표시할 수 있는 애플리케이션이 동작하게 된다.As shown in FIG. 53, in the smart device, when the RSS_CNN button created above is clicked on the home page, it is moved to the Form1 page (RSSpage), and the RSS data is received from the DB on the data- The application that can be displayed in the view component will work.

이와 같이 본 발명의 실시 예에 따른 애플리케이션 개발 환경 제공 장치(100)는 애플리케이션 개발에 있어서, 각종 다양한 코드 언어에 대한 전문적인 지식 없이도, 단순 클릭 및 드래그 앤 드랍만으로 다양한 플랫폼에 대한 용이한 어플리케이션 개발이 가능하게 된다. As described above, in the application development environment providing apparatus 100 according to the embodiment of the present invention, easy application development for various platforms can be performed by simply clicking and dragging and dropping without expert knowledge on various code languages .

상술한 본 발명에 따른 애플리케이션 개발 환경 제공 방법은 컴퓨터에서 실행되기 위한 프로그램으로 제작되어 컴퓨터가 읽을 수 있는 기록 매체에 저장될 수 있으며, 컴퓨터가 읽을 수 있는 기록 매체의 예로는 ROM, RAM, CD-ROM, 자기 테이프, 플로피디스크, 광 데이터 저장장치 등이 있으며, 또한 캐리어 웨이브(예를 들어 인터넷을 통한 전송)의 형태로 구현되는 것도 포함한다.The method for providing an application development environment according to the present invention may be stored in a computer-readable recording medium. The computer-readable recording medium may be a ROM, a RAM, a CD- ROM, a magnetic tape, a floppy disk, an optical data storage device, and the like, and may also be implemented in the form of a carrier wave (for example, transmission over the Internet).

컴퓨터가 읽을 수 있는 기록 매체는 네트워크로 연결된 컴퓨터 시스템에 분산되어, 분산방식으로 컴퓨터가 읽을 수 있는 코드가 저장되고 실행될 수 있다. 그리고, 상기 방법을 구현하기 위한 기능적인(function) 프로그램, 코드 및 코드 세그먼트들은 본 발명이 속하는 기술분야의 프로그래머들에 의해 용이하게 추론될 수 있다.The computer readable recording medium may be distributed over a networked computer system so that computer readable code can be stored and executed in a distributed manner. And, functional programs, codes and code segments for implementing the above method can be easily inferred by programmers of the technical field to which the present invention belongs.

또한, 이상에서는 본 발명의 바람직한 실시예에 대하여 도시하고 설명하였지만, 본 발명은 상술한 특정의 실시예에 한정되지 아니하며, 청구범위에서 청구하는 본 발명의 요지를 벗어남이 없이 당해 발명이 속하는 기술분야에서 통상의 지식을 가진 자에 의해 다양한 변형 실시가 가능한 것은 물론이고, 이러한 변형 실시들은 본 발명의 기술적 사상이나 전망으로부터 개별적으로 이해 되어서는 안될 것이다.을 설명하기 위하여 참조되는 도면들이다.
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, It will be understood by those skilled in the art that various changes in form and details may be made therein without departing from the spirit and scope of the present invention as defined by the following claims.

Claims (15)

폼 페이지를 두 개 이상의 페이지로 분리하여 저장하는 단계;
개발 대상 애플리케이션의 식별 정보, 버전 정보, 개발자 정보, 인증정보, 이미지 정보, 데이터베이스 연결 정보, 서버 연결 정보, 모듈 정보 및 소스정보를 하나 이상 입력하기 위한 애플리케이션 프로젝트 설정 화면을 표시하는 단계;
상기 애플리케이션 프로젝트 설정 화면 상에 개발 대상 애플리케이션의 식별 정보, 버전 정보, 개발자 정보, 인증정보, 이미지 정보, 데이터베이스 연결 정보, 서버 연결 정보, 모듈 정보 및 소스정보가 하나 이상 입력되면, 입력된 정보에 부합되는 애플리케이션 프로젝트를 생성하는 단계;
애플리케이션을 구성하는 복수의 페이지 이미지와 상기 복수의 페이지 이미지를 연결하는 복수개의 화살표 이미지를 통해 상기 애플리케이션을 구성하는 복수의 페이지 이미지 사이의 연결 관계를 나타내는 페이지 간 연결 영역과 상기 페이지 간 연결 영역 상에 페이지를 추가하고, 페이지들 간 연결 관계를 설정하기 위한 폼 탭 영역을 포함하는 제1화면을 표시하는 단계;
상기 복수의 페이지들 중 어느 하나에 대하여 각 페이지 내에서 각 화면 또는 기능을 담당하는 복수의 컴포넌트들의 사이의 관계를 화살표로 연결-이벤트 정보를 포함하는 제1 컴포넌트와 액션 정보를 포함하는 제2 컴포넌트가 화살표로 연결-하여 나타내는 제2 화면을 표시하는 단계;
상기 제2 화면에서 이벤트 정보를 포함하는 제1 컴포넌트와 액션 정보를 포함하는 제2 컴포넌트가 화살표로 연결되면, 상기 제1컴포넌트와 제2컴포넌트간 연결에 대응하는 코드를 자동으로 생성하는 단계;
상기 복수의 페이지 중 하나에 추가할 수 있는 미리 정의된 컴포넌트 리스트-복수의 컴포넌트 아이템들을 포함하며, 각각의 컴포넌트 아이템들은 미리 정의된 기능 또는 화면을 가지는 각 컴포넌트 코드에 대응하는 컴포넌트 리스트-를 표시하는 단계;
상기 컴포넌트 아이템들 중 어느 하나가 선택되어 드래그 앤 드랍 방식으로 페이지 화면에 이동되면, 상기 이동된 컴포넌트 아이템에 대응되는 코드를 애플리케이션 코드에 삽입하는 단계;를 포함하는 애플리케이션 개발 환경 제공 방법.
Separating the form page into two or more pages and storing the form page;
Displaying an application project setting screen for inputting at least one of identification information, version information, developer information, authentication information, image information, database connection information, server connection information, module information, and source information of a development target application;
When one or more pieces of identification information, version information, developer information, authentication information, image information, database connection information, server connection information, module information, and source information of a development target application are inputted on the application project setting screen, Creating an application project;
An inter-page connection area indicating a connection relationship between a plurality of page images constituting an application and a plurality of page images constituting the application through a plurality of arrow images connecting the plurality of page images, Displaying a first screen including a form tab region for adding a page and establishing a connection relationship between the pages;
Linking the relationship between a plurality of components responsible for each screen or function within each page for any one of the plurality of pages with arrows - a first component including event information and a second component including action information Displaying a second screen by connecting with an arrow;
Automatically generating a code corresponding to a connection between the first component and the second component when a first component including event information and a second component including action information are connected by an arrow in the second screen;
A list of predefined components that can be added to one of the plurality of pages - a plurality of component items, each component item representing a component list corresponding to each component code having a predefined function or screen step;
And inserting a code corresponding to the moved component item into the application code when any one of the component items is selected and moved to the page screen in a drag and drop manner.
제1항에 있어서,
상기 제2 화면을 표시하는 단계는,
상기 이벤트 정보와 상기 액션 정보 사이의 연결 관계를 표시하는 단계를 포함하는 애플리케이션 개발 환경 제공 방법.
The method according to claim 1,
The displaying of the second screen may include:
And displaying a connection relationship between the event information and the action information.
제1항에 있어서,
상기 이벤트 정보는 복수의 이벤트 아이템을 포함하고,
상기 복수의 이벤트 아이템 중 적어도 하나는 상기 제2 컴포넌트에 연결되는 애플리케이션 개발 환경 제공 방법.
The method according to claim 1,
Wherein the event information includes a plurality of event items,
Wherein at least one of the plurality of event items is connected to the second component.
제1항에 있어서,
상기 액션 정보는 복수의 액션 아이템을 포함하고,
상기 복수의 이벤트 아이템 중 적어도 하나는 상기 복수의 액션 아이템 중 어느 하나와 연결되는 애플리케이션 개발 환경 제공 방법.
The method according to claim 1,
Wherein the action information includes a plurality of action items,
Wherein at least one of the plurality of event items is associated with any one of the plurality of action items.
제1항에 있어서,
상기 표시된 제1 화면은 상기 복수의 페이지들 사이의 연결 관계를 방향성을 가지는 이미지 객체로 나타내는 애플리케이션 개발 환경 제공 방법.
The method according to claim 1,
Wherein the first screen displayed is a connection relationship between the plurality of pages as an image object having a directivity.
제5항에 있어서,
상기 이미지 객체가 변형 또는 삭제됨에 따라 상기 복수의 페이지들 사이의 연결 관계가 변경되는 애플리케이션 개발 환경 제공 방법.
6. The method of claim 5,
And the connection relationship between the plurality of pages is changed as the image object is modified or deleted.
제1항에 있어서,
상기 복수의 페이지들 중 특정 페이지의 세부 정보를 표시하는 단계를 더 포함하고,
상기 세부 정보는 상기 특정 페이지에 포함된 컴포넌트들에 대한 식별 정보 및 상기 특정 페이지에서 선택된 컴포넌트에 대한 속성 정보를 포함하는 애플리케이션 개발 환경 제공 방법.
The method according to claim 1,
Further comprising displaying detailed information of a specific one of the plurality of pages,
Wherein the detailed information includes identification information on components included in the specific page and attribute information on a component selected on the specific page.
제7항에 있어서,
상기 속성 정보는 상기 선택된 컴포넌트에 대한 기본 정보, 데이터 연결 정보, 스타일 정보 및 이벤트 정보 중 적어도 하나를 포함하는 애플리케이션 개발 환경 제공 방법.
8. The method of claim 7,
Wherein the attribute information includes at least one of basic information, data connection information, style information, and event information for the selected component.
제1항에 있어서,
상기 표시된 제2 화면은 상기 복수의 컴포넌트들 사이의 연결 관계를 방향성을 가지는 이미지 객체로 나타내며, 상기 이미지 객체가 변형 또는 삭제됨에 따라 상기 복수의 컴포넌트들 사이의 연결 관계가 변경되는 애플리케이션 개발 환경 제공 방법.
The method according to claim 1,
Wherein the second screen displays the connection relationship between the plurality of components as a directional image object and changes the connection relationship between the plurality of components as the image object is transformed or deleted .
제1항에 있어서,
상기 제2 컴포넌트 및 상기 액션 정보간의 관계를 나타내는 구조 화면을 표시하는 단계를 더 포함하는 애플리케이션 개발 환경 제공 방법.
The method according to claim 1,
And displaying a structure screen representing a relationship between the second component and the action information.
제1항에 있어서, 상기 자동으로 생성되는 코드는,
중간언어로 구성되며,
상기 중간언어는,
복수의 컴포넌트 사이에 지정되는 이벤트 또는 액션간 연결관계 화면에 기초하여 생성되며,
상기 컴포넌트 및 상기 컴포넌트에 지정된 이벤트 또는 액션을 나타내는 복수의 엘리먼트 코드들을 포함하는 애플리케이션 개발 환경 제공 방법.
The method of claim 1, wherein the automatically generated code comprises:
It is composed of intermediate languages,
The intermediate language includes:
Based on a connection relation screen between an event or an action specified between a plurality of components,
And a plurality of element codes indicating an event or an action assigned to the component and the component.
제1항에 있어서, 상기 자동으로 생성되는 코드는,
중간언어로 구성되며,
상기 중간언어는,
상기 컴포넌트간 상대적인 배치 정보를 포함하며,
상기 배치 정보는 화면에 표시된 적어도 하나의 컴포넌트의 배치 상태에 따라 결정되는
애플리케이션 개발 환경 제공 방법.
The method of claim 1, wherein the automatically generated code comprises:
It is composed of intermediate languages,
The intermediate language includes:
Wherein the information includes relative placement information between the components,
The placement information is determined according to the placement state of at least one component displayed on the screen
A method for providing an application development environment.
제1항에 있어서,
테블릿 전용 애플리케이션 개발시, 테블릿 전용을 위한 프레임을 구분하여 출력하는 단계를 더 포함하는 애플리케이션 개발 환경 제공 방법.
The method according to claim 1,
Further comprising the step of separately outputting a frame for a tablet only when developing a dedicated application for a tablet.
제1항에 있어서,
분기 컴포넌트를 추가하여 화면 구성 시, 조건별로 이벤트 및 액션이 발생하였을 때 컴포넌트간의 연결 관계가 분기되도록 컴포넌트를 설정하는 단계를 더 포함하는 애플리케이션 개발 환경 제공 방법.
The method according to claim 1,
Further comprising setting a component so that a connection relationship between components is branched when an event and an action occur according to a condition in a screen configuration by adding a branch component.
제1항에 있어서,
클라이언트/서버 간의 애플리케이션인 경우, 서버 측 입출력 규격을 확인하는 데이터 정합성 검증단계를 더 포함하는 애플리케이션 개발 환경 제공 방법.
The method according to claim 1,
And a data consistency verification step of confirming a server-side input / output specification when the application is a client / server application.
KR1020140018350A 2014-02-18 2014-02-18 A method for providing an application developing environment KR20150097150A (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
KR1020140018350A KR20150097150A (en) 2014-02-18 2014-02-18 A method for providing an application developing environment

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
KR1020140018350A KR20150097150A (en) 2014-02-18 2014-02-18 A method for providing an application developing environment

Publications (1)

Publication Number Publication Date
KR20150097150A true KR20150097150A (en) 2015-08-26

Family

ID=54059197

Family Applications (1)

Application Number Title Priority Date Filing Date
KR1020140018350A KR20150097150A (en) 2014-02-18 2014-02-18 A method for providing an application developing environment

Country Status (1)

Country Link
KR (1) KR20150097150A (en)

Similar Documents

Publication Publication Date Title
KR20150099136A (en) A method for providing an application developing environment
KR20150097181A (en) A system for providing an application developing environment
KR20150097162A (en) A method for providing an application developing environment
KR20150097150A (en) A method for providing an application developing environment
KR20150097148A (en) A method for providing an application developing environment
KR20150097146A (en) A method for providing an application developing environment
KR20150097153A (en) A method for providing an application developing environment
KR20150098891A (en) A method for providing an application developing environment
KR20150098896A (en) A method for providing an application developing environment
KR20150097121A (en) A device for providing an application developing environment
KR20150099239A (en) A method for providing an application developing environment
KR20150099215A (en) A method for providing an application developing environment
KR20150097106A (en) A method for providing an application developing environment
KR20150097120A (en) A device for providing an application developing environment
KR20150097147A (en) A method for providing an application developing environment
KR20150097154A (en) A method for providing an application developing environment
KR20150098894A (en) A method for providing an application developing environment
KR20150097179A (en) A system for providing an application developing environment
KR20150099325A (en) A method for providing an application developing environment
KR20150098845A (en) A method for providing an application developing environment
KR20150099157A (en) A method for providing an application developing environment
KR20150099287A (en) A method for providing an application developing environment
KR20150099306A (en) A method for providing an application developing environment
KR20150099338A (en) A method for providing an application developing environment
KR20150097178A (en) A system for providing an application developing environment

Legal Events

Date Code Title Description
WITN Withdrawal due to no request for examination