KR20140019627A - An authoring tool for web applications and the authoring method thereof - Google Patents

Abstract

The present invention relates to a tool for authoring web applications and an authoring method for the same, which is capable of providing editors for editing various components in order to improve the user convenience of authoring and work efficiency when developing web applications, based on the HTML language, wherein the various editors provide an optimized editing function for each of the components and provide visualization editing of a management-centered or image type, such as lists and trees, and intuitive editing using icons at the same time as necessary, and of managing all editor windows of the authoring tool as panes to provide a function for freely arranging editor panes according to editing purposes, and setting all the editors to be linked to one another around a designer view to provide an object-centered editing function. [Reference numerals] (AA) Execute IDE; (BB) Debugging/Distribution; (CC) Manage IDE resources; (DD) Insert a component browser object; (EE) Confirm a Dom tree structure; (FF) Modify the properties of a custom object; (GG) Add a custom event; (HH) Complete an event function; (II) Generate a project; (JJ) Design a UI

Description

BACKGROUND OF THE INVENTION 1. Field of the Invention [0001] The present invention relates to a web application authoring tool,

The present invention relates to a web application authoring tool and a authoring method, and provides editors capable of editing various components in order to develop a web application based on the HTML language for authoring convenience and efficiency of work. Various editors provide optimized editing functions for each of the components, and provide both visual and visual editing of lists and trees, as well as intuitive editing via icons, if necessary. In addition, all the editor windows of the authoring tool are managed as a pane, and autonomous layout function of the editor pane according to the purpose of editing is provided, and all the editors are linked around the designer view to provide object- .

In general, the conventional web has been concentrated on providing a web page or a web site that shows specific information composed of characters, pictures, sounds, or moving pictures to the user. However, the recent web is gradually changing to application form. In other words, a recent web is changing more like a computer application than simply a web page (or a web site).

Therefore, conventional web page editor (such as Dreamweaver, Namo web editor, front page) does not support a unified platform for testing, debugging, and building applications, so it is cumbersome to use and can not be used with CSS3 (Cascading Style Sheet 3) It is difficult to develop a modern web application that needs to use the same technology.

That is, in order to develop a web page by using a conventional web page editor (or a web page authoring tool), the HTML source file is directly encoded and then uploaded to a web page operation server using a file transfer program such as FTP It is necessary to perform a complicated procedure of repeating the modification and the modification. Moreover, users who do not have the expertise related to CSS3 or HTML5 have difficulties in developing the latest web application.

Also, in the prior art, since the editor windows of the authoring tool are not independently managed, it is difficult to arrange the editors autonomously according to the purpose of editing. This is because existing edit windows do not provide object-oriented editing.

The present invention has been made to solve the above-mentioned problems, and it is an object of the present invention to provide a Web application for supporting editor capable of editing various components in order to improve user's authoring convenience and work efficiency in developing a web application based on HTML language Application authoring tools and authoring methods.

Another object of the present invention is to provide a web application authoring tool and a authoring method in which various editors of the authoring tool support an editing function optimized for each of the elements.

Further, the authoring tool according to the present invention is intended to provide a web application authoring tool and a authoring method that simultaneously supports visualization editing of a management center or image form such as a list, tree, and intuitive editing through an icon as needed.

In the present invention, all editor windows of the authoring tool are managed as a pane, and autonomous layout function of the editor pane according to the editing purpose is provided, and all editors are linked around the designer view to provide a web application It is intended to provide authoring tools and authoring methods.

A web application authoring tool according to an aspect of the present invention includes a page browser for creating, adding, or deleting a page; A viewport editor capable of visually viewing and editing contents of the page; A component browser capable of adding a component or a widget to the page; A custom property browser for setting various properties of an object or a component constituting the page; And a DOM tree browser for displaying information about a page selected in the page browser.

Also, in the web application authoring tool according to an aspect of the present invention, the editor and the browser are managed in a pane and can be freely arranged according to the purpose of the author.

Further, in the web application authoring tool according to an aspect of the present invention, the authoring tool further includes a project manager for displaying a folder and files included therein so that the folder structure and components of the project can be grasped without opening a separate explorer .

In addition, in the web application authoring tool according to an aspect of the present invention, the page browser is a searcher that displays all the pages of the current project and selects one of the pages. When a page is selected, It shows the configuration of all UI including the editor, and shows the support of the landscape mode and the portrait mode.

In the web application authoring tool according to an aspect of the present invention, the viewport editor visually displays a page selected in the page browser, allows a user to register a component through drag-and-drop and edit the html page, The horizontal and vertical modes are supported. The edited contents are displayed in the component browser, the DOM tree browser, the custom property browser, and the like, and the contents of the property browser, the DOM tree browser Is also updated.

In addition, in the web application authoring tool according to an aspect of the present invention, the DOM tree browser displays in detail information on elements such as a layer or a widget constituting the contents of a page selected in the page browser in a tree format, And the tree node can be changed or deleted through the down / down button.

In the web application authoring tool according to an aspect of the present invention, the component browser visually displays a list of the components by using icons, and divides the widgets into basic, view, page container, and combination tab Display, drag and drop to add to the page to dynamically create objects, select a page in the page browser to display the properties of the page, and select objects such as labels or buttons in the DOM tree browser or viewport editor The attribute values corresponding to the object type are displayed, and the displayed properties can be easily reconfigured through a keyboard input or a mouse input, and a property edit screen divided into four groups of a matrix, an inline style, a property, and an event listener is provided Respectively, The attribute editor is synchronized bidirectionally and is provided so that it can be switched and used as needed.

Further, in the web application authoring tool according to an aspect of the present invention, the authoring tool further includes an animation editor that provides animation functions to easily recognize and edit changes in position and morphological characteristics of UI objects with respect to time The N-screen manager displays a list of screen sizes added by the user. When the user clicks an icon, the N-screen manager displays an N- List Viewer; N-screen presets that allow you to pre-create optimized UI layouts for each screen size and easily add screen sizes with simple selections such as icon clicks; And an N-screen previewer for easily confirming each screen according to the screen size added by the user. The CSS editor provides a CSS editing function for the CSS Selector, the Declaration, the Property, and the Value, A CSS Property Editor Tab, a CSS Quick View, an HTML Preview, and a CSS editor for creating new CSS and storing edited CSS.

According to an aspect of the present invention, there is provided a method of authoring a web application using a web application authoring tool, the method comprising: a first step of executing an authoring tool using a project created in an integrated development environment; A second step of adding a page to be designed; A third step of adding a component to the added page; A fourth step of setting a property value for the added component; And a fifth step of selectively adding an event to a desired widget. When the creation of the project is completed through the first through fifth steps, an index.html And a sixth step of searching for the same specific file and displaying the content of the specific file so that the contents can be confirmed.

The present invention provides editors capable of editing various components in order to develop a web application based on an HTML language for authoring convenience and efficiency of a user, and various editors provide optimized edits Provides simultaneous editing of management-oriented or image-type visualization such as list and tree as required, and intuitive editing through icon. All editor windows of authoring tool are managed by pane, It has the effect of providing editor-box autonomous layout function, and all editors are linked around designer view to provide object-oriented editing function.

FIG. 1 is an exemplary diagram illustrating a schematic configuration of an integrated platform for authoring a web application according to an embodiment of the present invention; FIG.
FIG. 2 is an exemplary diagram illustrating a design workflow using an authoring tool according to an embodiment of the present invention; FIG.
3 is a diagram illustrating a screen structure of an authoring tool related to UI design according to an embodiment of the present invention;
FIG. 4 is an exemplary view showing a configuration of a project manager of an authoring tool according to an embodiment of the present invention; FIG.
FIG. 5 illustrates an example of a configuration of a page browser of an authoring tool according to an embodiment of the present invention; FIG.
FIG. 6 is an exemplary view showing a configuration of a viewport editor of an authoring tool according to an embodiment of the present invention; FIG.
FIG. 7 is an exemplary diagram illustrating a configuration of a DOM tree editor of an authoring tool according to an embodiment of the present invention; FIG.
FIG. 8 illustrates an exemplary configuration of a component browser of an authoring tool according to an exemplary embodiment of the present invention; FIG.
FIG. 9 is an exemplary view showing a configuration of a custom property browser of an authoring tool according to an embodiment of the present invention; FIG.
FIG. 10 is an exemplary diagram showing a configuration of an animation editor of an authoring tool according to an embodiment of the present invention; FIG.
FIG. 11 illustrates an example of a configuration of an N-screen manager of an authoring tool according to an embodiment of the present invention. FIG.
12 is a diagram illustrating a configuration of a CSS editor of an authoring tool according to an embodiment of the present invention.
13 is a flowchart illustrating a web application authoring process using a authoring tool according to an embodiment of the present invention.

Hereinafter, an embodiment of a web application authoring tool and a authoring method according to the present invention will be described with reference to the accompanying drawings.

The authoring tool according to the present invention assists in the production of web applications based on the HTML language. Web application authoring tools provide editors that allow users to edit various components for ease of authoring and work efficiency. The various editors provide an optimized editing function for each of the components, and also provide a visualization editing of the management center or image type such as a list and a tree, and an intuitive editing through an icon at the same time as needed.

The authoring tool of the present invention supports a development environment that is optimized for the development purpose of developers and designers through a page configuration of a designer, and also provides a user with a native application (e.g., It provides the same level of UX (User Experience) as the mobile device maker, which provides libraries and functions necessary for app creation and provides easy development.

In addition, the present invention provides a development environment optimized for developing business applications corresponding to N-screens and animation contents, and also provides a development environment for N-screen editors (different types of media) Screen-compatible content development environment using an editor that can change the style according to each feature of the media using a program or the like.

It also provides a specialized authoring environment from the point of view of designers and developers. For example, from a designer perspective, it can be used for CSS3 animation and effect creation. It can be used to develop timeline-based animation contents (advertisement, game, education, etc.) There are characteristics. In addition, there is a feature that can improve development and maintenance productivity by separating one page into several logical views at design time, reducing code complexity and increasing recyclability.

The authoring tool according to the present invention assists in the production of web applications based on the HTML language. Web application authoring tools provide editors that allow users to edit various components for ease of authoring and work efficiency. The various editors provide an optimized editing function for each of the components, and also provide a visualization editing of the management center or image type such as a list and a tree, and an intuitive editing through an icon at the same time as needed.

The present invention supports authoring environment configuration and collaboration optimized for development purposes of developers and designers through a page structure of a designer, and also provides a user with a native application (for example, an iPhone It provides the same level of UX (User Experience) as the mobile device maker, which provides libraries and functions necessary for app creation and provides easy development.

In addition, the present invention provides a development environment optimized for developing business applications corresponding to N-screens and animation contents, and also provides a development environment for N-screen editors (different types of media) Screen-compatible content development environment using an editor that can change the style according to each feature of the media using a program or the like.

It also provides a specialized authoring environment from the point of view of designers and developers. For example, from a designer perspective, it can be used for CSS3 animation and effect creation. It can be used to develop timeline-based animation contents (advertisement, game, education, etc.) There are characteristics. In addition, there is a feature that can improve development and maintenance productivity by separating one page into several logical views at design time, reducing code complexity and increasing recyclability.

FIG. 1 is a diagram illustrating a configuration of an integrated development environment for authoring a web application according to an embodiment of the present invention. Referring to FIG.

As shown in the figure, the present invention is a total solution for developing a web application based on HTML5, which includes an authoring tool (AT) 100, a studio 200, a runtime platform 300, and a UI framework 400 And an integrated development environment (IDE) that includes a built-

The studio 200 performs the creation and management of a project for developing a web application and executes UI logic through the authoring tool 100, the runtime platform 300, and the UI framework 400 through seamless interworking. And Biz logic, and the application developed through the interworking performs profiling using a profiler that supports various hardware profiles, and testing using the emulator, and debugging the generated error through a debugger Finally, the completed apps are built and packaged and distributed to web apps, client servers, or hybrid apps (eg Apple, Google).

The present invention relates to an integrated development environment (IDE), which is a cross platform runtime that provides the same functions on various platforms (eg, Android and iOS-based mobile devices) through the same HTML-based source And supports a plug-in architecture in which various functions are provided as JavaScript API (Application Program Interface) to improve application scope and level of application, and third party can easily expand functions required for service development.

In addition, the present invention can be applied to one-source multi-use (OSMU) applications and N-screen services (TVs) based on standard web technologies (e.g. HTML5, CSS3, JS) And services that enable a seamless use of a single piece of content on a variety of devices, including PCs, tablets, and smartphones. That is, it can seamlessly support a series of processes required for developing N-screen compatible web applications. Also, based on the above runtime platform and UI framework, OS fragmentation, H / W fragmentation and business requirements are solved.

As described above, the present invention is an integrated development environment for seamlessly supporting a series of processes from the development of an HTML5-based web application to a service. The authoring tool 100 and the studio 200 seamlessly interwork with each other, It improves development productivity and efficiency by supporting modular development and management of BizLogic (business logic) and by providing a profiler that supports emulators, debuggers and various hardware profiles.

Here, the HTML5 refers to a web programming language that has evolved to embody various application programs such as audio, video, and graphics in an existing web document in which only text and a hyperlink are displayed. HTML5 is, above all, an installation program such as ActiveX (a technology used by Microsoft to develop reusable object-oriented software components) or a mobile application store (a variety of applications ), Which can be used in any browser as well as IE (Internet Explorer). In recent years, the HTML5-based Technologies are growing rapidly, and a variety of 3rd party solutions (eg, frameworks / libraries) are being introduced.

Accordingly, the present invention enables development based on HTML5 from the development stage of a web application, and provides an open architecture that accommodates 100% of HTML5 technology, thereby ensuring compatibility with the third party solution and mutual interoperability.

Here, the authoring tool 100 can create UIs based on an HTML language (in particular, HTML5) and provides editors capable of editing various UI components for authoring convenience and efficiency of a user, Editors provide optimized editing functions for each of the UI components. If necessary, they provide a management-oriented UI such as List and Tree, or visualization editing of images and intuitive editing through icons, ) To design the layout, and to design the desired animation and various effects.

As a result, existing web application development solutions can not be used to modify the exported source and can not be used other than the functions provided by the solution (ie, it is dependent on the solution) The third party JavaScript library or the CSS library can not be applied because it is impossible to customize (or customize) or use the meta format in the authoring step. However, Widgets can be added freely and can be mixed with 3rd party solutions.

The framework of the authoring tool 100 comprises at least one or more editor windows. That is, the editor window (or editor pane) of the authoring tool 100 is managed as a pane (each window thereof when one window is divided into a plurality of windows), and an autonomous arrangement Function. That is, the number, the position, and the size of the editor pane can be increased or decreased in number and size depending on the purpose of editing, and can be moved to a desired position by a user (developer). Here, each of the editor windows (or editor pane) operates as one editor.

The authoring tool 100 provides an object-oriented editing function by setting all editors to be linked with a designer view (or a view window, a viewport window showing an actual design edited by the user). At this time, the design view (or view window) can be edited by WYSIWYG method.

The authoring tool 100 includes a page browser (page browser), which is a page navigator capable of creating, adding, and deleting a page, which is an individual screen in the UI, a viewport (computer graphics A window area for actually displaying a projection-transformed graphic in a rendering process of generating an image in a CG), a custom property for changing various attributes of the selected object or component, A component browser (Component Browser) composed of a DOM (Document Object Model) tree browser (DOM Tree Browser) showing various information about the page selected in the page browser explorer window and various widgets for decorating the page do.

The studio 200 encodes UI logic and bez logic through the project manager 210 and the code editor 220 and outputs them to the emulator 230 / debugger 240 / profiler 250 for testing, debugging, and profiling Ring. The builder 260 and the packager 270 then build and deploy the result. The result is a hybrid application that runs on various mobile devices or a web application that runs on a customer server.

Here, the projector manager 210 can create and manage a project, and can provide various sample projects for convenience of development. The code editor 220 can import and edit the code of a component to be included in the generated project or project.

The emulator 230 provides the same result as executing the web application developed using the integrated platform of the present invention in the mobile device, so that the test or operation can be confirmed. That is, the emulator 230 provides various resolutions, rotations and extenders to provide the same environment as an actual mobile device.

The debugger 240 can easily and easily debug JavaScript included in the web application developed using the integrated platform of the present invention. In addition, the profiler 250 can execute the application in various ways in the course of developing a web application, thereby enabling the system performance and a point where a bottleneck occurs to occur.

The builder 260 creates independent software output (e.g., an executable file) that can execute the source code file of the web application (or project) on the computer (or mobile device). The packager 270 packages the web application (or project) to be distributable.

In addition, the present invention can separately configure a build server 500 for building a hybrid application, and can support various packages of various OSs (e.g., Android and iOS) using the build server 500. At this time, the build server 500 can build and use a local (enterprise) build server according to the needs of the enterprise, and can also provide user management, build state management functions, build history and statistical information. The integrated platform may provide an ecosystem 600 for developing and distributing web applications and supporting and managing users and developers, and may form a separate server or web site for the ecosystem.

A process of developing a web application using the integrated development environment (or integrated platform) configured as described above will be described below.

First, run the Integrated Development Environment (IDE) and create a project. Specifically, a new project is created using the studio 200, and the project type is set to a proper form including a smartphone. Make sure that the project is created. The design is performed using the next authoring tool 100. [ Specifically, a UI layout of a web application to be developed using the authoring tool 100 is configured. The following authoring tools work in conjunction with the Integrated Development Environment (IDE) to perform coding. Then use the emulator or browser to perform the test and also perform the profiling. Debugging is performed when an error occurs through the test and profiling, and the finally completed web application is distributed through a build process and a packaging process.

The authoring tool for web application development according to the present invention is used as a tool for authoring a web application UI, and includes a project manager, a page browser, a viewport editor (designer view), a resource editor, a property editor, a DOM tree browser, And the like. All editor windows of the authoring tool are managed as a pane, and editor panes can be freely arranged according to the purpose of the authoring. All editors are linked around the designer view and provide object-oriented editing.

FIG. 2 is a diagram illustrating a design workflow using an authoring tool. Referring to FIG. 2, a project is created in an integrated development environment. Next, UI design is performed. Then, object insertion is performed in a component browser. Modify the properties, add custom events, and complete the event function. After that, resource management is performed in the integrated development environment, and the process of distributing after debugging is repeated.

FIG. 3 relates to a screen structure of an authoring tool related to a UI design. After a project is created, the user can select the project and execute the operation of the authoring tool. The authoring tool facilitates the development of the web page by providing convenience of the UI design. The widget such as a button, a text field, and a label constitutes a screen, and each component of the user interface is defined. Even if you create a project in the authoring tool, it will initially appear as a blank screen.

After designing the screen with the authoring tool, the user can implement it according to the event defined in the event listener according to the event. All components of the UI must follow the defined event attributes to ensure that the events work smoothly. The function is not defined separately, but you can add the function you want using JavaScript. Therefore, when the user clicks the image at the time of the event, the UI framework internally generates the event defined in the JavaScript and interacts with the other contents.

A page browser, a project manager, a custom property browser, a DOM tree editor, a component browser, and an animation editor for convenience of development of a work area web page of the authoring tool.

The menu bar included in the work area of the authoring tool includes menus related to file creation and editing such as a file, an edit, a tool, a window, and a help. As a vowel, it makes it easy to combine the actions of the menu bar with tools.

The project manager is a window that contains the components of the project created in the integrated development environment. If you double-click the HTML file, it appears in the viewport, and you can add and delete other image and html files. Addition, and deletion are possible. Also, if you double-click the icon set as the folder file, it shows the files contained in it.

The Page Browser is a page navigator that allows you to create and add pages that are individual screens of the UI. When a page is selected, all UI configurations including the viewport of the authoring tool are updated and displayed. . The viewport editor is a workspace that allows you to visually view UI content. After selecting a page in the page browser, the user can register the component by dragging and dropping, html page design is possible, It supports portrait mode.

And the custom property browser can select and change various attributes of the selected object or component, and the object has different properties depending on the type. When you select a page in the page browser, the properties of the page appear, and when you select the component widgets within the page, it appears in the form of 'dvc name'. The displayed properties can be changed by keyboard input or mouse control.

And the Component Browser is a collection of various widgets that can decorate the pages. It is listed in the order of Basic, View and Pad. The DOM Tree Editor shows information about the page selected in the Page Browser Explorer window. Layers and widgets added to the selected page area are displayed in detail, and the order of widgets can be changed through up and down buttons. In addition, the Animation Editor allows you to select the components on the page in the viewport and then play the animation to see how it works on the page. The N-Screen Manager creates an optimized UI layout for each screen size, .

FIG. 4 shows the structure of the project manager. FIG. 4 shows the folder structure of the current project and the files included therein. The folder structure and components of the project can be grasped without opening the explorer. The project name appears and provides sub-folders and a project manager that contains * .html, * .css, and * .js files. When you double-click the html file, the page appears in the viewport. You can add the file you want to add by dragging and dropping the icon after selecting the folder.

FIG. 5 shows a configuration of a page browser. When a page is selected by a page searcher capable of generating and adding a page, which is a separate screen of the UI, all the UI configurations including the viewport of the authoring tool are updated Show. It is easy to grasp the overall configuration. A page navigator that allows you to view and select all the pages that the project currently has. When a page is selected, all UI configurations including the viewport of the authoring tool are updated and displayed. You can visually display one slide and quickly select it as you want. Landscape and portrait modes are supported.

FIG. 6 shows the configuration of the viewport editor. It is a work area for visually viewing UI contents. After selecting a page in the page browser, the user can register the component through drag & drop. It is possible. It supports Landscape mode and Portrait mode. It is a work area where you can visually see the UI contents. You can see the edited contents directly in the component browser, the DOM tree browser, the property browser, and so on. Also, depending on the object selected in the viewport editor, the contents of the Property Browser and DOM Tree Browser are also updated.

Button, Image Button, Radio Button, Icon Button, and Checkbox are displayed on the viewport and dragging the image file will bring up a select window. At this time, when the user selects a place to specify the image, the path is set. Select the component placed in the Viewport and click the left mouse button to display the context menu. The Context menu allows quick access to the abbreviated functions of toolbars and properties. If you double-click a component that has text elements in the viewport's page, you can edit the text in the Edit Text window without having to modify it in your custom browser. With the Tools-Grid Option, you can set the Grid Line in the viewport, and you can work with sub-grid lines in the page. You can check the value set by the user immediately.

FIG. 7 shows the configuration of the DOM tree editor, and shows information about the page selected in the page browser explorer window. Details of the layers and widgets added to the selected page area. It is possible to change the order of the widgets through the up and down buttons. The work area in which the components that make up the content of the selected page are arranged in a tree format. Because it is shown in tree format, you can understand the relationship of UIs. You can change the order of the nodes by using the Up and Down buttons, and you can check the id and subid using the ID button.

Since the components displayed in the DOM tree can be managed as a group, it is possible to display the hierarchical relationship, and the node can be deleted using the upper delete button. The objects selected by the user in the tree are switched to the current selection at the time of editing, highlighted in the viewport, and the properties of the properties are also displayed. Also, if you select a component in another Windows editing window, it will be synchronized with the DOM tree, so that the bidirectional selection state is well communicated.

FIG. 8 shows a configuration of a component browser, which is an editing window that collects various widgets that can decorate a page. Basic, View, and Pad are listed in this order. Provides a list of components that can be easily created and included in the layer as components of the UI. A component visually displays the types of components provided by the UI engine using icons. A user creates a component on the page by dragging and dropping the selected component onto the screen, and at the same time, the object is structurally included in the layer. When a component is newly defined, a new component is added to the authoring tool so that it can be created dynamically. It is composed of basic, view, page container and combination tab according to each property.

FIG. 9 shows the configuration of the custom property browser, which can select and change various attributes of the selected object or component, and the object has different properties depending on the type. When you select a page in the page browser, the properties of the page appear, and when you select the component widgets within the page, it appears in the form of 'dvc name'. The displayed properties can be changed by keyboard input or mouse control. When you select a page in the page browser, the properties of the page are displayed. If you select a label or button in the DOM tree browser or viewport, the property values are displayed to match the object type. The displayed attributes can be easily reconfigured via keyboard input or mouse input. The Property Browser is divided into four groups: Metrics, Inline Styles, Properties, and Event Listeners. It allows quick editing of commonly used attributes in consideration of the frequency of use of the attribute, and provides a sorted editing screen. Each attribute editor is synchronized in both directions and provided for use as needed.

Metrics included in the custom property browser have attributes of Width, Top, Bottom, Height, Left, and Right and show the property values of the selected Component. You can easily check the size information of the selected component, padding, border, margin, position information using the style box provided in the matrix. Inline Styles Group allows you to modify the position, left, top, width, height, etc. of each component. Modifiable attributes of Inline Styles Group are defined according to the characteristics of each component and may differ depending on the selected component type. Properties Group is a part that manipulates the properties of each component and displays the properties that can be modified for each component. The properties that can be modified in the Properties Group are defined according to the characteristics of each component and may differ depending on the selected component type. Event Listeners Group displays event items that each component can process. For components that can not have events, the Event Listeners Group is not added. The event item can be modified with a control in the form of a combo box. When you select Add to add an event, the event function added to the current project's main.js file is added.

FIG. 10 shows a configuration for an animation editor. After selecting a component on a page of a viewport, an animation is played to confirm the operation of the animation on the page. The Animation Editor is an interface that provides various functions to make animation easy. It makes it easy to recognize and edit changes in the position and morphological characteristics of UI objects over time.

The tool button included in the animation editor is a Tool Button Control that adds animation, deletes animation, and operates the applied animation class. The timeline displays the effect to be applied to the key frame in the animation's action as a percentage of the time. An action tree is an area that displays the relationships by linking the effects in an animation's Action tree. Class effects are linked and displayed by each class. The keyframe / effect panel displays the relationship between the key frame and the effect in the animation's action, and displays the effects of each effect in a list by key frame.

 FIG. 11 shows a configuration of an N-screen manager, which produces an optimized UI layout for each screen size, and the browser is automatically applied according to the screen size. The N-SCREEN MANAGER provides a user input interface to accommodate various screen sizes and can simply add a media query to the desired screen size.

The N-Screen List Viewer shows the list of screen sizes added by the user. Clicking on the icon will automatically change the viewport for each size. It provides an N-screen preset interface and provides a convenient interface to easily add the most commonly used screen sizes. It can be easily added by clicking the icon in the button format. You can easily check each screen according to the screen size (screen size) added by the user through the N-screen preview viewer.

The resource editor allows the user to conveniently manage resources in the project. It displays the images folder of the current project and can add new files and folders using the upper file import and folder import icons. The Format tab now provides formatting, all (all views), and unknown (unsupported format) formats for jpg, png, bmp, gif, map and wmv. The user can easily check the information of the desired file by selecting the tab corresponding to the format of the resource to be searched. The thumbnail provided by the thumbnail viewer is selected and dragged and dropped to the viewport, can do. The thumbnail viewer shows thumbnails of the resources of the selected folder in the folder tree selected in the Format tab of the current folder tree (if it is all, the entire file of the folder, or file, which is an unsupported format if unknown).

FIG. 12 shows a configuration related to a CSS editor. The authoring tool of the present invention includes a CSS editor as an editing tool for a CSS function, and has a function of adjusting a screen size of a page displayed in a viewport. The width and height can be arbitrarily changed, and when the basic is selected, the size of the page is set back to a predetermined size. Mode, you can arrange pages by selecting portrait mode (Landscape). The CSS editor provides CSS editing for CSS Selector, Declaration, Property, Value, and supports each CSS Selector List, CSS Property Editor Tab, CSS Quick View, and HTML Preview. do.

It outputs the CSS Selector List as a list that can be checked by the user, and it is possible to select each selector index, and to add, delete, and change the selector. Provides a quick view of the CSS properties edited in the CSS editor. It is categorized into tabs according to the type of CSS properties and provides editing of CSS property properties using Control. Loads the CSS-loaded HTML file into the CSS Editor to provide a preview.

The authoring tool also has a menu (File, Edit, View, Tools, Window and Help) and a toolbar (Open, Save, Font, Font style, text color, undo, redo, refresh, zoom (plus, reset, minus), cut, copy, paste, delete, open CSS editor, open JavaScript. In particular, Edit is a function that adds the functions of the tool bar to the Edit menu bar, and the View includes a view line menu that displays the guideline with a green dotted line for the components of the designed page. It also includes grid functionality as a tool that can be used to make it easier for users to work with a viewport and a grid on the page. It also includes a small Icon and a Large Icon Mode that represent the widgets of the component. The Tools menu contains the Edit menu, which provides links to add and remove html source links (css files), scripts (JavaScript files), grid options to edit the style of the grid in the viewport, Function. The window menus are used to indicate the editing window to be operated by the authoring tool. When the check mark is cleared, the editing window disappears and the editing window name is displayed on the side of the authoring tool. At this time, click the name to configure the window to reappear.

FIG. 13 shows a web application authoring process. Here, a basic example of creating basic widgets and inserting contents into generated elements will be described.

First, run the authoring tool in the integrated development environment. The authoring tool is executed using the project created in the integrated development environment (S101).

Next, in the process of adding a component, when the authoring tool is executed, the first blank screen is displayed (S102). The user can configure the web page design.

Click the page add button to add pages one by one to design (S103). You can also delete a page by clicking the Delete Page button. However, the first page is not deleted. Next, a component is added to design the added page as described above (S104). To add a component, select the widget you want to add to the screen, and drag and drop it to create a widget on the page. When adding a component, you need to move up in view> basic order. First, if the basic widgets go up, the shape of the mouse cursor changes in the authoring tool so that it can not be added.

Next, a property (attribute) value is set for each of the added components as described above (S105). The above property setting can decorate a component by changing the value of each property (property, property). By default, Inline Styles include position, left, right, top, bottom, height, width, font, and color. The value of each attribute can be modified by mouse dragging or keystroke. Since there is no event function in the normal widget, you have to set the event function in the view and apply it. Let's take a look at the properties of each view. Layout Bar - The bar located at the top or bottom of the page, which is located when creating the title or home or back button of the page. Determine the position with bar-pos.

The layout view is a view that contains a basic widget. A button appears on the left side of the view through button-type. The underlying checked-label is "ON" by default when there is no attribute, and unchecked-label is "OFF" by default when there is no attribute. Group-name is the group name for interlocking radio buttons. The scroll view is the first view to add a component to. If you add a scroll view later, you will not be able to do any operation because it overwrites the existing added component. You can set the direction of the x, y, and xy axes (all) by checking the data scroll. A list view is a view that is used when you want to list or list items.

Next, the basic widgets (basic widgets) are the widgets that decorate the page. If you take on the function of showing the page in the view, the basic widget is a function that decorates the screen configuration. Button, Icon Button, and Image Button are common button widgets. The basic elements of the button are text, font-size, up-image, down-image, and border-width. Icon-src can be applied to other Icon buttons. The Image Button is the simplest. The image sets the path of the image to be inserted into the image widget in src and inserts the image. Select any of the Image-type none, zoom, stretch, center, or tile formats you want to edit. Labels can specify the color, font-size, and font-weight of the text, and you can use the left, right, and center alignments through text-align. It is used to display the name of the widget on the screen, or to show the name of the item. Text fields are often used for searching on the web. It uses the placeholder function of the text to indicate the role of the text field. After selecting a class, you can refine the size and shape of the component by applying the appropriate css in the class list. The radio button is used to select or cancel any one. It is used as a sort of select button meaning. You can enter text inside the button to show the web, and you can also show the image when you check it. If you have multiple radio buttons, you can group them together using group-name. A checkbox is similar to a RadioButton, but is a component that allows duplicate selection. When checked, a check-shaped image is displayed by default, and text can be input and output in the CheckBox. The text area is a component used for e-mail, diary, and other memo applications. You can select the background color of the text area by Background-color. Color allows you to select the color of text that appears when you enter text. The switch is a button that one side is selected and the other side is closed. Yes or NO is created by default, so you can enter the text you want to type in checked-label, unchecked-label. Progress shows the progress of the task. You can adjust the width and height, and you can adjust the status of the job from 1 to 100 by modifying the value. The center is a component that helps to keep the text-related part always at the center. width function. The grid replaces the tab view. It differs from ordinary groups and consists of basic right, left, top, bottom, height, and width functions. A Grid Item shows a single item in a grid. The page id (page id) can be written and moved. A picker is used to select time, date, and so on. Event can be added and edited by itself. When a picker is created on the view, the event does not occur.

Next, an event is added (S106). This is the part used to represent the movement of the screen on the web. This does not add events to all widgets. In other words, you can add, edit, and disable the handler after clicking on the widget where you want to insert the event. When you select the handler, a notification window appears in the lower right corner, and an event is added to the main.js file. Through the above process, the creation of the content (or the project) can be completed, the completed project can be called, and the contents of the content can be checked. In other words, you can click Open Project, find the path where the project is saved, and click the index.html file to check the content displayed.

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 embodiments, but, on the contrary, I will understand the point. Accordingly, the technical scope of the present invention should be defined by the following claims.

100: authoring tool 200: studio
210: projector manager 220: code editor
230: Emulator 240: Debugger
250: Profiler 260: Build
270: Packager 300: Runtime platform
400: UI Framework 500: Build Server
600: Ecosystem

Claims (15)

A page browser for creating, adding, or deleting a page;
A viewport editor capable of visually viewing and editing contents of the page;
A component browser capable of adding a component or a widget to the page;
A custom property browser configured to set various properties of an object or a component constituting the page; And
And a DOM tree browser showing information about the page selected by the page browser.
The method according to claim 1,
The editor and the browser are managed in a pane (pane) and the web application authoring tool, characterized in that the free placement is possible according to the authoring purpose.
The method according to claim 1,
The authoring tool further comprises a project manager showing a folder and the files included therein so that the folder structure and components of the project can be identified even without opening a separate browser.
The method according to claim 1,
The page browser is a navigator that displays all the pages of the current project and selects one of them. When a page is selected, the UI is updated by showing all the UIs including the viewport editor of the authoring tool. Web application authoring tool characterized in that the mode and portrait mode are supported.
The method according to claim 1,
The viewport editor visually displays a page selected in the page browser, allows a user to edit a html page by registering a component through drag and drop, and supports a horizontal mode and a vertical mode. Authoring tool.
The method according to claim 1,
The viewport editor displays the edited contents directly in the component browser, the DOM tree browser, the custom property browser, etc., and also updates the contents of the property browser and the DOM tree browser according to the object selected in the viewport editor. Web application authoring tool.
The method according to claim 1,
The DOM tree browser displays information about components, such as layers or widgets, that make up the content of the page selected in the page browser in detail in a tree form, and enables order changes or deletions of tree nodes through up / down buttons. Web application authoring tool, characterized in that.
The method according to claim 1,
The component browser visually displays a list of components using icons by type, and displays widgets divided into basic, view, page container, and combination tabs according to their properties, and is added to a page dynamically by dragging and dropping them. Web application authoring tool, characterized in that configured to create the object.
The method according to claim 1,
When the user selects a page in the page browser, the custom property browser displays the property of the page. When the object such as a label or a button is selected in the DOM tree browser or the viewport editor, the property value corresponding to the object type is displayed. Web application authoring tool, characterized in that can be easily reset through keyboard input or mouse input.
The method according to claim 1,
The custom property browser provides property editing screens divided into four groups: metrics, inline styles, properties, and event listeners, and each property editor is bidirectionally synchronized and provided to be switched as needed. Web application authoring tool.
The method according to claim 1,
The authoring tool further comprises an animation editor that provides animation functions for easily recognizing and editing changes in position and morphological characteristics of UI objects over time.
The method according to claim 1,
The authoring tool further includes an N-screen manager for corresponding to various screen sizes,
The N-screen manager shows a list for each screen size added by the user, and when the icon is clicked, the N-screen list viewer automatically changes the viewport for each size;
N-screen presets that allow you to easily add screen sizes with simple selections such as icon clicks by pre-optimizing the UI layout for each screen size; And
Web application authoring tool comprising a; N-screen previewer that can easily check each screen for each screen size added by the user.
The method according to claim 1,
The authoring tool provides CSS editing functions for CSS Selector, Declaration, Property, and Value, and supports each CSS Selector List, CSS Property Editor Tab, CSS Quick View, and HTML Preview. Web application authoring tool comprising a; CSS editor for storing.
In the web application authoring method using a web application authoring tool configured using any one of claims 1 to 13,
A first step of executing an authoring tool using a project created in the integrated development environment;
A second step of adding a page to be designed;
A third step of adding a component to the added page;
A fourth step of setting a property value for the added component; And
And a fifth step of selectively adding an event to a desired widget.
The method according to claim 14,
When the creation of the project is completed through the first to fifth steps, a specific file such as index.html is searched in the path where the project is stored, and the content is displayed and confirmed Wherein the web application is a web application.

Images