KR20140022137A - An authoring apparatus for applying n-screen to web application ui and the method for the same - Google Patents

Abstract

The present invention relates to an authoring apparatus of providing environments for automatically authoring a web application UI so as to be suitable for an N-screen when developing the web application UI, and an authoring method thereof. If one web application is developed to be applied to various kinds of screen conditions, a web application corresponding to a specific device is immediately generated. Also, after conditions of a target device are collected in a state where an application is previously and easily developed for various kinds of devices, a corresponding application can be immediately provided. Consequently, there is an effect of removing inconvenience of developing new web application for each device. [Reference numerals] (810) N-screen previewer; (820) N-screen list viewer; (AA) Phone(All); (BB) Phone(Landscape); (CC) Phone(Portrait); (DD) iPad(All); (EE) iPad(Landscape); (FF) iPad(Portrait); (GG) Phone; (HH) iPad

Description

TECHNICAL FIELD [0001] The present invention relates to a web application UI authoring apparatus and an authoring method thereof,

The present invention relates to a web application UI authoring apparatus for N-screen application and a method of authoring the web application UI authoring apparatus. More particularly, the present invention relates to a web application UI authoring apparatus capable of authoring a web application UI And a method of authoring the same.

In general, Hybrid WebApp combines the advantages of App (APP) and Mobile Web (WEB). For example, an app may be able to develop a specific application by operating system and device, but it has a higher development cost and a relatively longer development period than a mobile web. It is difficult to update and modify and manage, and it is difficult to develop the same application for each OS because it is necessary to acquire a programming language for each OS, and development can be done only when understanding the individual characteristics of the smartphone is required.

On the other hand, Mobile Web has shorter development period than the app, it can be developed as web development knowledge, it is easy to update and modify, and it can be accessed on any PC because it can be run on a PC. This is a slow and difficult accessibility due to the secondary access through the browser because it can not use the acceleration function of the GPS which is the hardware function of the smartphone. There is a problem that the accessibility is good and the compatibility is good because the OS or the device is not selected. There is an advantage not required.

Therefore, the hybrid web application combining the above advantages has an advantage of being able to use an internal structure, a user interface, and a hardware function such as a camera or a terminal sensor operation while making an application irrespective of a device. Therefore, JavaScript, HTML5, and CSS, which are widely used on the web, are used in the hybrid web application. Although it is enough to make a good application, it is necessary to use the mobile framework in order to make development easier and better. do.

Conventionally, in order to develop a web application of a specific device, a separate web application corresponding to the condition of the device including resolution has been separately developed for each device to provide a service. Therefore, developing a separate web application for every device requires a long development period and requires a new application to be developed every time, so that the UI configuration may not be consistent depending on the device, .

It is an object of the present invention to provide a UI authoring apparatus and a method for authoring a UI of a web application according to characteristics of various devices based on HTML language easily and conveniently, .

In addition, the present invention provides a UI authoring apparatus and a authoring method including editors capable of editing various UI components for authoring a UI of a web application according to characteristics of various devices, There is a purpose.

In addition, the present invention provides various editors for authoring a UI of a web application according to characteristics of various devices in a UI authoring apparatus, and provides optimized editing functions for UI components of the respective editors, Accordingly, it is an object of the present invention to provide a UI authoring device and a authoring method capable of simultaneously providing a management-oriented UI such as a list and a tree, or an intuitive editing through visualization of an image form and an icon.

A web application UI authoring apparatus for N-screen application according to an aspect of the present invention includes: an N-screen list viewer for displaying a screen size list added by a user; An N-screen preview viewer for displaying a result of application on an actual device according to a media type; And an N-screen preset for displaying the most frequently used screen sizes in a list form so that they can be easily selected and added. The N-screen list viewer displays the list of screen sizes in the form of icons, Screen preview viewer can automatically display at least one screen of various screen sizes at the same time, and the list displayed on the N-screen preset displays the shape and size of the screen The N-screen preset provides an applicable media query list in a preview form. The N-screen preset includes a template that reflects characteristics of the corresponding media type , And the variety Screen manager for creating a screen size design and adding a template and managing its own design and template, and the N-screen manager includes a simple description, a screen size, and a CSS file And a user input interface for simply adding a media query, and the UI authoring apparatus can perform a drag-and-drop method and a user can author in a WYSIWYG manner to obtain the same result as the content displayed on the screen .

A web application UI authoring method for N-screen application according to an aspect of the present invention displays a list of screen sizes added by a user through an N-screen list viewer, and when the icon is clicked, step; A second step of previously creating an optimized UI layout for each screen size through an N-screen preset and easily adding a screen size by a simple selection such as clicking an icon; And a third step of confirming each screen according to the screen size added by the user through the N-screen previewer. The design and the template of various screen sizes desired by the user through the N-screen manager are created and added And a fourth step of managing its own design and template, and the fourth step is to add a simple description, a screen size and a CSS file through the N-screen manager to easily add a media query .

When a web application is developed and applied to a screen condition of various kinds of devices, a web application corresponding to a specific device is created, and an application can be easily developed in advance for various types of devices It is possible to collect the condition of the target device in a state and immediately provide the corresponding application, thereby eliminating the need to newly develop a web application for each device.

1 is a conceptual diagram illustrating a configuration and operation of an integrated platform for authoring a web application according to an embodiment of the present invention;
2 is a diagram illustrating a configuration of a runtime platform for authoring a web application according to an embodiment of the present invention;
FIG. 3 illustrates an operation of a runtime plug-in of an integrated platform for authoring a web application according to an embodiment of the present invention; FIG.
4 is a diagram illustrating a framework of a UI authoring apparatus for N-screen application according to an embodiment of the present invention.
5 illustrates an example of a design workflow using a UI authoring tool according to an embodiment of the present invention.
FIG. 6 is an exemplary view schematically illustrating a process of authoring a web application for N-screen application according to an embodiment of the present invention; FIG.
7 is a diagram illustrating a screen configuration of a UI authoring apparatus for an N-screen according to an embodiment of the present invention.
FIG. 8 is an exemplary view for explaining an N-screen manager of a UI authoring apparatus for an N-screen according to an embodiment of the present invention; FIG.

Hereinafter, an embodiment of a web application UI authoring apparatus and a method for authoring the same will be described with reference to the accompanying drawings.

FIG. 1 is a conceptual diagram illustrating an overall configuration and operation of an integrated platform for authoring a web application according to an embodiment of the present invention. Referring to FIG. As shown, the integrated platform for web application authoring includes a authoring tool (or design tool) 100, a studio 200, a runtime platform 300, and a UI framework 400.

As shown in FIG. 1, the integrated platform according to the present invention is a total solution for developing a web application based on HTML5. The integrated platform includes an integrated development environment including an authoring tool (AT) 100 and a studio 200 (IDE).

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 integrated platform according to the present invention can be developed on the basis of HTML5 from the development stage of the web application, and can provide compatibility with the 3rd party solution and interoperability by providing an open architecture that accommodates 100% HTML5 technology .

In addition, the integrated platform is based on standard web technologies (eg, HTML5, CSS3, JS), one source multi-use (OSMU) And services that enable users to seamlessly use a single piece of content on a variety of devices, including TVs, PCs, tablet PCs, and smartphones. That is, it can seamlessly support a series of processes required for developing N-screen compatible web applications. In addition, OS runtime platform 300 and UI framework 400 are used to solve OS fragmentation, hardware fragmentation, and business requirements.

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

The authoring tool 100 is a tool for authoring a web application UI. The authoring tool 100 can create a UI based on an HTML language (in particular, HTML5) and can edit various UI components for authoring convenience and efficiency The various editors provide optimized editing functions for each of the UI components. If necessary, they can be used for visualization editing of images in the form of a management center UI such as a list or a tree, or intuitive editing through icons. Simultaneously, it is possible to design a UI (or GUI) layout, and to design 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 performs the creation and management of a project for developing a web application and manages the user interface 100 through seamless interworking with the authoring tool 100, the runtime platform 300, the UI framework 400, (UI) logic and business (Biz) logic, and the application developed through the interworking performs the profiling using the profiler supporting various hardware profiles and the test using the emulator, Debugging through a debugger, and finally, the completed application application is built and packaged and distributed.

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 build 260 is then deployed and deployed in the packager 270. The result is a hybrid application that runs on various mobile devices or as a web application 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 build 260 generates independent software output (e.g., an executable file) that can execute a source code file of a web application (or project) on a computer (or mobile device). The packager 270 packages the web application (or project) so that the web application (or project) can be published.

In addition, the integrated platform may separately configure a build server 500 for building a hybrid application, and may support various packages of various OSs (e.g., Android, 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.

The runtime platform 300 includes a runtime core, a device API plugin (built-in), a user plugin, an application, and a service framework, as shown in FIG.

The runtime core includes a webkit, a plugin loader, and an application manager, and WebKit is an open source web browser engine that includes HTML, CSS rendering, and a JavaScript engine. In addition, the plug-in loader performs built-in / custom plug-in API management for interlocking native functions, and the application manager performs the function of executing and managing the application, that is, the execution and the update of the application. In addition, the runtime API provider of the service framework provides a built-in API function for the functions required by the application, and provides an interworking function for an extended custom API in the plug-in.

3 is a diagram for explaining a plug-in. For example, the iOS runtime is configured in such a manner that a corresponding function of a native module is executed through a common interface in a JavaScript API implementation unit and the result is transmitted to a web page again.

As shown in FIG. 3, the Web-Native interface refers to standardization of hardware or specific functions of other applications so that they can be accessed from a web browser. Developers can use either HTML tags or JavaScript objects, hardware native interfaces (eg, GPS, cameras, Safari on iPhone) that interface hardware specific features to the DOM level An application native interface that interfaces with a specific application or middleware function embedded in the device so that it can be used at the Document Object Model (DOM) level (for example, exposing a function of a middleware managing a local address book or a calendar as a browser interface, To use it to display data on a web page or to pass it to a server, or the <video> tag in HTML5). Also, since the video output function implemented through the plug-in is drawn in another window, there is not much control in the web browser, but video is output in the same memory space where the <video> The result is that canvas or scalable vector graphics (SVG) can be used to give various effects to the video.

The web application UI authoring apparatus for N-screen application according to the present invention may operate as a component included in the integrated platform or separately from the integrated platform and operate independently.

Also, the UI authoring device (or authoring tool) according to the present invention supports editing of a web application based on an HTML language, and provides editors capable of editing various components for authoring convenience and efficiency of a user. The various editors provide optimized editing functions for each of the components, and provide visualization editing of the management type or image type such as list, tree, etc. as required and intuitive editing through the icon at the same time.

In addition, the UI authoring device (or authoring tool) according to the present invention supports a development environment optimized for a development purpose of a developer and a designer through a page configuration of a designer, and supports a development environment optimized for a user through a component- It provides the same level of UX (User Experience) as a native app (for example, a mobile device manufacturer such as an iPhone, which provides libraries and functions necessary to build an app so that it can be easily developed).

In addition, the UI authoring apparatus according to 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 (for example, Unlike the past, CSS3 provides an environment for N-screen compatible content development using an editor that can change the style according to the feature of each media).

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. It also allows designers to divide a page into multiple logical views at design time to reduce code complexity and increase recyclability to improve development and maintenance productivity.

4 is a diagram illustrating a framework of a UI authoring apparatus for N-screen application according to an embodiment of the present invention.

As shown, the UI editor includes a viewport editor, a project manager, a page browser, a resource editor, a component browser, a property browser, a DOM tree editor, an N-screen list viewer, and the like for convenience in developing a work area web page of the UI authoring apparatus. The menu bar included in the work area of the UI authoring apparatus includes menus related to file creation and editing such as file, edit, tool, window, help, and the toolbar is a collection of work tools required in the viewport, It makes it easy to combine the actions of the menu bar with tools.

All the editor windows are managed as a pane, and the editor pane can be autonomously arranged according to the editing purpose, and a pane for editing a specific function can be added or removed as needed. The editor windows are set in association with all editors around a view point, thereby providing an object-centered editing function.

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.

Here, the page browser is a page navigator that can create and add a page, which is a separate screen 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 where you can visually view the UI contents. After selecting the page in the page browser, the user can register the component by dragging and dropping, designing the HTML page, It supports portrait mode.

The property browser (or property editor) can select and change various properties of the selected object or component, and objects have 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 compilation of various widgets that can decorate the page, and it is listed in order of basic, view, pad.

And the DOM tree browser (or 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 resource editor allows users to conveniently manage resources in a project, and provides a folder tree, a format tab, and a thumbnail viewer function. The Resource Editor also displays the images folder of the current project and can add new files and folders using the top 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. Users can easily check the information of the desired file by selecting a tab corresponding to the format of the resource to be searched by the user. The thumbnail provided by the thumbnail viewer is selected and dragged and dropped to the viewport, Can be applied. The thumbnail viewer displays thumbnails of resources having the format selected in the format tab among the resources of the folder selected in the current folder tree (if it is all, the entire file of the folder, if the unknown file is a file that is an unsupported format).

FIG. 5 illustrates a design workflow using a UI authoring tool according to an exemplary embodiment of the present invention. In FIG. 5, a project is created in an integrated development environment, a UI design is performed, After checking the tree structure, modify the properties of the custom object, add a custom event, 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.

For the UI design according to the present invention, a project is created, and then the project is selected and the designer is executed. The designer provides a convenience of UI design to facilitate development of a web page, forms a screen with widgets such as buttons, text filters, and labels, and defines and uses elements of each user interface .

Next, when the designer finishes the screen design and sets the event defined in the event listener, the implementation part of the event function mapped to the main JavaScript (for example, main.js) is automatically created, and the actual implementation The user is required to implement a function to be operated in the network. All components of the UI must follow the predefined event attributes to ensure that the event runs smoothly. The function is not defined separately, but you can add the function you want using JavaScript. Therefore, when the user clicks the image when performing the event, the UI framework internally generates the event defined in the JavaScript and interacts with the other contents while interacting with other contents. The resource is managed through the above process.

Hereinafter, the UI authoring process of the web application for applying the N-screen according to the present invention will be described.

The UI authoring apparatus according to the present invention is capable of authoring WYSIWYG, and the web browser type UI authoring environment allows the user to obtain the same result as the content displayed on the screen. There is also a feature of displaying content that is directly authored or modified using the same HTML code as on the authoring screen without using a meta language in between. You can also drag and drop UI layout configuration.

That is, as shown in FIG. 6, a UI layout is configured by dragging and dropping views and components, an image resource is configured using a property editor, and properties are changed. We then use event listeners to add events for BizLogic. At this time, a notification message according to the event can be displayed. When the UI is configured as described above, the operation of the UI is checked through the emulator. Here, an event handler is used to develop the biz logic (or UI logic).

Hereinafter, a configuration of the UI authoring apparatus for applying the authored web application to the N-screen will be described.

7 is a diagram illustrating a screen configuration of a UI authoring apparatus for an N-screen according to an exemplary embodiment of the present invention. As shown in FIG. 7, an N-screen manager, an N-screen previewer 810, A list viewer 820, and an N-screen preset 830.

The UI authoring device for the N-screen according to the present invention provides UI / UX optimized for various LCD sizes for N-screen service of web applications, and provides an optimized UI layout for various screen sizes based on HTML5 standard technology Screen editor that can be developed and managed and can be extended to general-purpose functions for responsive web design that actively responds to external environments (eg weather, location, sensors, etc.) .

The N-SCREEN MANAGER allows the developer to add his or her own template to configure a specialized design or to easily recycle his / her template.

The N-screen manager produces an optimized UI layout for each screen size as shown in FIG. 8, 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. For example, as shown in FIG. 8, it is possible to simply add a media query by attaching a brief explanation, a size (Minwidth, Maxwidth), and a CSS file.

The N-screen preview viewer shows a result of application of a screen according to a media type, and can predict a result of a screen to be displayed in an actual device. At this time, the screen of the sizes of various devices can be displayed at the same time. The list of screen sizes added by the user is displayed through the N-screen list viewer. When the icon is clicked, the viewport for each size is automatically changed.

The N-screen preset provides a convenient interface to easily add the most commonly used screen sizes. You can easily add the screen size by clicking the icon in the button format. Then, each screen according to the screen size (screen size) added by the user can be easily confirmed through the N-screen preview viewer. The N-screen preset provides a template reflecting the characteristics of various media so that the screen can be designed by applying characteristics without development, and the applicable media query list is provided in a preview form, After confirming this, make it applicable.

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: Project Manager 220: Code Editor
230: Emulator 240: Debugger
250: Profiler 260: Build
270: Packager 300: Runtime platform
400: UI Framework 500: Build Server
600: eco system 810: N-screen preview viewer
820: N-screen list viewer 830: N-screen preset

Claims (11)

An N-screen list viewer showing a list of screen sizes added by the user;
An N-screen preview viewer for displaying a result of application on an actual device according to a media type; And
Web application UI authoring device for N-screen application, characterized in that it comprises a; N-screen preset to show in the form of a list so that you can simply select and add the most used screen size.
The method according to claim 1,
The screen for each screen size displayed on the N-screen list viewer is displayed in the form of an icon, and when the icon is clicked, the viewport for each size is automatically changed.
The method according to claim 1,
The N-screen previewer is a web application UI authoring apparatus for N-screen application, characterized in that at least one or more screens of various screen sizes can be displayed at the same time.
The method according to claim 1,
The list displayed on the N-screen preset is displayed in the form of an icon indicating the shape or size of the screen, and one of the web screens can be selected and added by clicking on one of them. UI authoring device.
The method according to claim 1,
The N-screen preset is a web application UI authoring device for N-screen application, characterized in that the template provides a list of applicable media queries in the form of a preview, each reflecting the characteristics of the corresponding media type.
The method according to claim 1,
Web application for N-screen application, characterized in that it further comprises; N-screen manager to create and add a design and templates of various screen sizes desired by the user, and manage their own design and template UI authoring device.
The method of claim 6,
The N-screen manager is a web application UI authoring device for N-screen application, characterized in that consisting of a user input interface that can simply add a media query by attaching a brief description, screen size and CSS file.
The method according to claim 1,
The UI authoring apparatus is a web application UI authoring apparatus for N-screen application, characterized in that the drag and drop method and the user can author in the Wiziwick method to obtain the same results as the content displayed on the screen.
A first step of displaying a list of screen sizes added by a user through an N-screen list viewer and automatically changing a viewport for each size by clicking an icon;
A second step of previously creating an optimized UI layout for each screen size through an N-screen preset and easily adding a screen size by a simple selection such as clicking an icon; And
And a third step of checking each screen according to the screen size added by the user through the N-screen preview viewer.
The method of claim 9,
A fourth step of creating and adding designs and templates of various screen sizes desired by the user through the N-screen manager, and managing their own designs and templates; Web application UI authoring method.
The method of claim 10,
The fourth step is a web application UI authoring method for N-screen application, characterized in that it is possible to simply add a media query by attaching a brief description, screen size and CSS file through the N-screen manager.

Images