Method for creating extended components in a user interface platform development system and program for doing so

Abstract

A method for generating an extended component in a user interface platform development system capable of generating an extended component and a program for performing this method are provided. [Solution] A computer program stored on a computer-readable medium for performing an extended component generation method, which causes a computer to execute the following steps: generating a page for the extended component using a development tool; selecting one of the basic components provided by the development tool; inputting information regarding additional functions; generating an extended component that inherits all the functions of the basic component and has the additional functions added; and registering the extended component with the development tool.

Description

[Technical Field]

[0001] The present invention relates to a method for generating an extended component in a user interface platform development system and a program for performing this method. [Background technology]

[0002] With the advancement of computer technology, various types of software have been developed. Software development generally requires the use of program development equipment, and while in the past developers often had to code by hand, software is now developed more easily using a graphical user interface (GUI).

[0003] When developing a program, there are often cases where objects such as buttons, boxes, grids, and scroll views that are placed at specific positions on the screen using graphics must be changed at any time, or their parent objects must be changed, or the order of sibling objects must be changed. However, existing program development devices have limitations in that it is not easy to edit such objects.

[0004] As a related patent, Korean Patent No. 10-1282970, which was filed and registered by the present applicant, discloses a situation-aware positioning device and method for screen objects during program development.

[0005] The matters described in the technical background section of the present invention are intended to help understand the background of the invention, and cannot be conclusively determined to be prior art already known to a person having ordinary skill in the field to which this technology belongs. [Prior art documents] [Patent documents]

[0006] Korean Patent Publication No. 10-1282970 (registered on July 1, 2013) - Screen object context-aware positioning device and method during program development Summary of the Invention [Problem to be solved by the invention]

[0007] Therefore, the present invention has been devised to solve the above-mentioned problems, and an object of the present invention is to provide a method and a program for generating an extensible component in a user interface platform development system that supports multiple browsers, multiple devices, and multiple OSes in One Source Multi Use (OSMU), allowing developers to add additional functions to components that are basically provided in the system, thereby generating an extensible component that has extended functions while inheriting attributes as they are.

[0008] Other objects of the present invention will become more apparent based on the preferred embodiments described below. [Means for solving the problem]

[0009] In order to achieve the above object, according to one aspect of the present invention, there is provided a computer program stored on a computer-readable medium for performing an extended component generation method, the computer program causing a computer to perform the following steps, the steps including: generating a page for an extended component using a development tool; selecting one of the basic components provided by the development tool; inputting information about additional functions; generating an extended component that inherits all the functions of the basic component and has the additional functions added; and registering the extended component with the development tool.

[0010] The extended component page may be a page having a design tab and a source tab.

[0011] The basic component may be a component belonging to at least one of the following types: Forms, Grid, Container, Navigation, Chart, Frame, HTML5, and others.

[0012] The extended component inherits all the attributes, events, and APIs of the base component, but can only inherit from one base component.

[0013] Meanwhile, according to another aspect of the present invention, there is provided an extended component generation device included in a user interface platform development system, the extended component generation device including: a page generation unit that generates a page for an extended component using a development tool; a component extension unit that selects one of the basic components provided by the development tool, inputs information about additional functions, and generates an extended component that inherits all the functions of the basic component and is given the additional functions; and a registration unit that registers the extended component with the development tool.

[0014] Further aspects, features, and advantages will become apparent from the following drawings, claims, and detailed description of the invention. [Effects of the Invention]

[0015] According to an embodiment of the present invention, in order to support multiple browsers, multiple devices, and multiple OSes with One Source Multi-Use (OSMU), it is possible for a developer to add additional functions to components that are basically provided by the system, thereby creating extended components that have extended functions while inheriting attributes as they are.

[0016] The effects obtained by the present invention are not limited to those mentioned above, and other effects not mentioned will be clearly understood by those having ordinary skill in the art to which the present invention pertains from the following description. [Brief explanation of the drawings]

[0017] [Figure 1] FIG. 1 illustrates the architecture of a user interface platform development system according to an embodiment of the present invention. [Figure 2] FIG. 10 is a structural comparison diagram between XML code generated by a system according to an embodiment of the present invention and general HTML code. [Figure 3] FIG. 10 is a diagram showing a script execution procedure when the main screen includes overlapping wframes. [Figure 4] 1 is a flowchart illustrating a method for developing a user interface platform according to an embodiment of the present invention. [Figure 5] 1 is a block diagram illustrating a configuration of an extensible component generation device of a user interface platform development system according to an embodiment of the present invention. [Figure 6] 1 is a flowchart illustrating a method for generating an extended component according to an embodiment of the present invention. [Figure 7] FIG. 10 is an example of a pop-up window for inputting information about an extended component. [Figure 8] FIG. 10 is an example of a pop-up window for inputting information about an extended component. [Figure 9] 11 is a design tab screen showing the attributes of an extension component and a UDC. [Figure 10] 1 is a diagram illustrating a configuration of a system according to an embodiment of the present invention. DETAILED DESCRIPTION OF THE INVENTION

[0018] Since the present invention can be modified in various ways and can have multiple embodiments, specific embodiments will be illustrated in the drawings and described in detail, but it should be understood that this is not intended to limit the present invention to the specific embodiments, and that the present invention encompasses all modifications, equivalents, and alternatives within the spirit and scope of the present invention.

[0019] When a component is referred to as being "coupled" or "connected" to another component, it should be understood that the component may be directly coupled or connected to the other component, but that there may be other components between them. On the other hand, when a component is referred to as being "directly coupled" or "directly connected" to another component, it should be understood that there are no other components between them.

[0020] Terms such as first and second may be used to describe various components, but the components should not be limited by these terms. These terms are used only to distinguish one component from another.

[0021] The terms used in this application are merely used to describe specific embodiments and are not intended to limit the present invention. The singular expressions include the plural expressions unless the context clearly dictates otherwise. In this application, the terms "comprise" or "have" are intended to specify only the presence of features, numbers, steps, operations, components, parts, or combinations thereof described in the specification, and should not be understood to preclude the presence or possible addition of one or more other features, numbers, steps, operations, components, parts, or combinations thereof.

[0022] As used herein, the term "module" includes hardware-implemented units, software-implemented units, and units implemented using both hardware and software. Also, one unit may be implemented using two or more pieces of hardware, or two or more units may be implemented using a single piece of hardware. Meanwhile, the term "module" is not limited to software or hardware; a "module" may reside on an addressable storage medium or implement one or more processors. Thus, by way of example, a "module" includes components such as software components, object-oriented software components, class components, and task components, as well as processes, functions, attributes, procedures, subroutines, program code segments, drivers, firmware, microcode, circuits, data, databases, data structures, tables, arrays, and variables. The functionality provided by the components and "modules" may be combined into fewer components and "modules" or further separated into additional components and "modules." Furthermore, a component and "module" may be embodied to implement one or more CPUs within a device.

[0023] Furthermore, it is natural that the components of the embodiments described with reference to each drawing are not limited to being applied only to the embodiment in question, but may be embodied in a manner that is included in other embodiments within the scope that maintains the technical idea of ​​the present invention, and that even if separate explanations are omitted, multiple embodiments may be re-embodied as a single integrated embodiment.

[0024] In addition, when describing the present invention with reference to the accompanying drawings, the same or related reference numerals are used to designate the same components regardless of the reference numerals, and redundant descriptions thereof will be omitted. In describing the present invention, if a detailed description of related known art is deemed to unnecessarily obscure the gist of the present invention, the detailed description thereof will be omitted.

[0025] FIG. 1 is a diagram showing the architecture of a user interface platform development system according to one embodiment of the present invention, FIG. 2 is a diagram comparing the structure of XML code generated by a system according to one embodiment of the present invention with that of general HTML code, FIG. 3 is a diagram showing the script execution procedure when a main screen includes overlapping wframes, and FIG. 4 is a flowchart of a user interface platform development method according to one embodiment of the present invention.

[0026] A user interface platform development system 1 according to one embodiment of the present invention supports various client smart devices and web browser environments, and the server environment supports platform independence for any web application server (WAS, Web Application Server) that supports J2EE (Java 2 Enterprise Edition), any framework, any OS, etc.

[0027] Hereinafter, the user interface platform development software according to this embodiment may also be referred to as WebSquare, which is developed and sold by the applicant of the present invention.

[0028] The user interface platform development system 1 includes a client 30 used by a user, a development tool 20 (also called a 'studio') used by a developer, and a server 10 that enables the development of a web square screen file in the development tool 20 in response to a request from the client 30.

[0029] The development tool 20 provides an environment in which a developer can develop a Web square screen file related to a business system. A client engine is installed in the client 30, and the client engine displays the Web square screen file on a browser.

[0030] The client 30 is written in JavaScript and is based on the AJAX architecture. It supports dynamically executed UI components such as grids and charts. It can also include communication and other UI-related utilities.

[0031] The client engine included in the client 30 can have a single page application (SPA) structure.

[0032] The client engine may include modules such as UDC, page components, project components, MSA components, grid layout, UI components, MSA message hub, cross-MSA resource sharing, data collection, module loader, plausible workflow, logging / debug, etc.

[0033] Components are basic files that make up the screen of a business system and can be used to develop pages, project UDCs, MSA UDCs, UDCs, and TTCs. All screens of a business system can be composed of structured components, which can be reused anywhere and support efficient operation.

[0034] Web Square Page Component is a basic screen file used in the form of a component. It supports the newly added Project UDC, MSA UDC, UDC, and TTC. It uses the xml extension.

[0035] UDC stands for User Defined Component, and is a user-defined component registered in the studio palette.

[0036] TTC stands for Trust Third-Part Component and helps you use external solutions as webpage components.

[0037] A Project UDC is a common function file that contains common functions used throughout a project. It is defined in the Websquare preferences and is automatically loaded when the Websquare engine is loaded.

[0038] MSA UDC is a common function file that contains common functions to support Micro Frontends. It is defined in the Web Square environment settings and loads resources on the server where the microservice runs when the associated Web Square engine is loaded.

[0039] The components broadly include built-in components, SP4 UDC components, and Web Square components.

[0040] Built-in components include GridView, Grid, Table, Combo, Input, TabControl, etc. These are the basic components provided by Web Square.

[0041] SP4 UDC components include SP4 UDC and SPC TTC. SP4 UDC is a user-defined component standard that developers can add directly. SPC TTC is a TTC that adds component products through collaboration with solution manufacturers.

[0042] Web Square Components include UDC, TTC, Project UDC, and MSA UDC. UDC and TTC are page-based user-defined components introduced to increase the reusability of UI elements (pages) developed by developers. By simplifying and structuring existing pages (XML), all pages can be developed as components. Coupling between pages can be reduced to modularize them.

[0043] Project UDCs are global UDCs that can be called from any screen. They can be used to develop common business UDCs to maximize reuse.

[0044] MSA UDC is a UDC for implementing micro-frontends, and enables cross-domain processing by applying MSA.

[0045] Data Collection is a module for intuitive, consistent, and convenient data management in a table format. It provides an API similar to that of a grid component, allowing developers to easily operate in a grid format.

[0046] Promise Workflow makes asynchronous processing programming, which was previously complex and difficult when developing with HTML5, simple and easy through an intuitive GUI.

[0047] The server 10 holds application resources (images, HTML, JS, CSS, XML, etc.). The server architecture includes utilities for adapters, file upload / download, Excel I / E (import / export), license management, etc. It can also include modules for framework interfaces, such as business common, business module, DBIO, and system common module.

[0048] The server 10 is implemented independently of the OS, DBMS, and WAS, and can support platform independence.

[0049] The development tool 20 provides a WYSIWYG integrated development environment to help developers easily develop their applications. Developers can draw components, add scripts, check screens, debug, and more all at once through the development tool 20.

[0050] Furthermore, the development tool 20 can perform configuration management (SCM, Software Configuration Management) using SVN / CVS / Git, etc. Commercial configuration management solutions can be linked to vendor plug-ins provided by vendors.

[0051] The development tool 20 may include modules such as W-Pack (source compiler), design system, snippets, Git / SVN, MAS message hub editor, WRM component, grid layout editor, layout manager, page component editor, design editor, code editor, message interface, etc. It also supports reusable common business UDC.

[0052] When a client 30 installed on various devices (PC, tablet, smartphone, smart TV, etc.) makes a request (HTTP REST API (JSON / XML)) to the server 10, the server 10 finds resources on the web server, exchanges data with the web application server, and transmits a response (HTTP REST API (JSON / XML)) corresponding to the request to the client 30. JS screen source can be distributed through the connection between the web server 10 and the development tool 20.

[0053] In this embodiment, in order to support a microservice architecture (MSA), it is possible to have a micro-front-end architecture with an MSA message broker and a cross MSA resource sharing function.

[0054] In addition, performance can be improved through single-page applications (SPA), engine optimization (Engine Optimizer), resource optimization (W-Pack), and support for large-volume data processing.

[0055] Its open architecture supports any web application server, any framework, any OS, and helps improve development productivity through open source recycling. It also supports easy integration with various open / commercial libraries and integration with various security solutions.

[0056] The XML code generated by Web Square and a typical HTML code structure are compared in Figure 2(a) and (b).

[0057] The components of the Web Square XML code can be broadly divided into:

[0058] for, <xf:model> 、 <script>、<style>要素が含まれる。

[0059] <xf:model>には、<w2:dataCollection>、<xf:workflow>、<xf:submission>領域が含まれる。

[0060] <w2:dataCollection>はデータオブジェクトを定義する領域で、DataMap、DataList、LinkedDataListが含まれる。サーバー通信のための要請(request)、応答(response)データ、及び画面で使用するデータを定義する。

[0061] <xf:workflow>はsubmit,submitDoneの実行順序が定義される。複数のSubmissionを実行する場合に使用する。実行順序、結果処理の順序、結果に応じた以後のサブミッションの実行可否などを定義する。照会(Select)用途の通信に使用することが推奨される。

[0062] <xf:submission>は、サービス呼び出しに必要なsubmitを定義する。各submitは、固有のIDを含む。サーバ通信のためのインタフェースとして、用途別に複数の定義が可能である。通信方式(同期 / 非同期)選択が可能であり、通信前 / 後に実行する関数定義も可能である。送信するデータ(requestまたはref)と受信するデータ(responseまたはtarget)を設定することができる。

[0063] <script>は、グローバルスクリプトとコンポーネントのイベント関数を定義して作業ロジックを構成することができる。

[0064] <style>は、スタイルを指定する。

[0065] <body>は、コンポーネント、コンポーネント属性、画面UI情報を含む。画面UI情報として、コンポーネントの配置及び構成、各コンポーネントの属性に関する情報を含まれ得る。

[0066] 本実施例において、Webスクエアページコンポーネントを生成する場合、スクリプトの実行順序は、外部JSファイル->ローカルスクリプト-><initScript>->onpageload-><postSCript>である。

[0067] メイン画面がWFrameを重ねて含んでいる場合、スクリプトの実行順序は、図3に示されている通りである。

[0068] ソースコンパイラであるW-Packは、画面ソースをジャバスクリプト(JavaScript)でビルドできる。開発ツール20で開発した画面ファイルは、XML形式で生成され、W-Packは、これをブラウザ環境に最適化されたジャバスクリプトファイルに変換する。

[0069] 圧縮及び最小化(Minify)機能を提供することで、既存のXML形式と比較してファイルサイズが減少できる。難読化(Obfuscation)により、ソースコードのセキュリティを向上させることができる。Web環境に最適化されたJSファイルは、XMLと比較してロード時間が短く、メモリ使用量が少なく、クライアントエンジンは、JSファイルを用いて画面をすばやくブラウザに描画できる。

[0070] 開発ツール20で作成した画面は、XMLファイルで生成され、W-PackによりJSファイルに変換され、ブラウザは、XMLファイル名が表示されるが、画面を表示する際に実際に使用するファイルは、JSファイルである。

[0071] 画面のブラウザ呼び出し順序は、以下の通りである。(1)ブラウザから画面を呼び出す(2)サーバー側Webスクエアエンジンのwebsquare.htmlファイルが呼び出される(3) Websquareエンジンが駆動される(4)画面に該当するXMLファイルをURLに呼び出す(5) W-Packにより変換されたJSファイルがロードされる(6) 当該画面がブラウザに表示される

[0072] 本実施例に係るユーザーインタフェースプラットフォーム開発システム1は、様々な共通開発用リソースを提供する。すぐに使用可能な完成度の高いリソースで、サムネイル画像の形態で提供することができる。開発者は、直観的にテンプレートを確認し、コーディングプロセスなしでマウスクリックだけで当該リソースを簡単に使用することができる。

[0073] 共通開発用リソースには、ページテンプレート(画面ファイル生成時に選択可能)、レイアウトテンプレート(画面ファイル生成時に選択可能)、及びスニペット(デザインシステムにおいてサムネイル画像を通じて提供)などが含まれ得る。

[0074] 図4を参照すると、本システムでは、開発プロセスに従って段階別にウィザード、マネージャ、エディタなどを提供し、各段階に適した共通リソースを提供することができる。開発プロセスに準拠してデザインの一貫性を維持することができ、共通リソースを最大限に再使用することができる。

[0075] また、本実施例では、モジュール化された開発が可能である。開発する画面ファイルは、コンポーネントの形態で使用することができる。特定の画面をUDCやプロジェクトコンポーネントとして登録して使用する場合、再使用が可能である。登録したUDCを修正する場合、変更事項が一括反映され、開発生産性とメンテナンス効率性に優れる。

[0076] 本システムにおいて開発する画面ファイルは、コンポーネントの形態で使用でき(ページコンポーネント)、既存のページファイルのすべての機能を支援する。ページをUDCとして登録して共通コンポーネントとして使用する場合は、UDCのAPIに対する注釈をもとにしてUDC説明文書を作成することができ、スクリプトエディタでUDCのAPIに対する自動完成機能を使用することができる。

[0077] すべてのページは、コンポーネントとして登録可能であり、コンポーネントとして登録されたページは、簡単なクリックだけで他の画面開発で使用することができる。

[0078] コンポーネントは、ユーザーインターフェースプラットフォーム開発システム1に内蔵されて基本に提供されることが一般的である。本実施例では、このようなコンポーネントに対して追加機能を付与して拡張型コンポーネントを生成して新規登録可能とすることで、開発者が新しいコンポーネントを製作して登録する手続きを簡素化できる方法を提供しようとする。

[0079] 図5は、本発明の一実施例に係るユーザーインタフェースプラットフォーム開発システムの拡張型コンポーネント生成装置の構成ブロック図であり、図6は、本発明の一実施例に係る拡張型コンポーネント生成方法の順序図であり、図7及び図8は、拡張型コンポーネントの情報を入力するためのポップアップウィンドウの例示図であり、図9は、拡張型コンポーネントとUDCの属性を示すデザインタブ画面である。

[0080] 図5を参照すると、本発明の一実施例に係る拡張型コンポーネント生成装置100は、ページ生成部110、コンポーネント拡張部120、及び登録部130を含むことができる。

[0081] 拡張型コンポーネント生成装置100は、開発ツール20、すなわち、スタジオに含まれるソフトウェアモジュールであり得る。開発ツール20を実行した状態で、ユーザー入力(例えば、メニュー選択、ショートカットキー入力など)により拡張型コンポーネント生成装置100が活性化して動作することができる。

[0082] 拡張型コンポーネント生成装置100は、ユーザーインタフェースプラットフォーム開発システム1で基本に提供するコンポーネントに対して全ての機能を同一に使用しつつ、プロジェクト特性に合わせて追加機能を付与して使用できる拡張型コンポーネント(EXC、Extended Component)を生成して、開発ツール20内に登録し、当該プロジェクトで今後活用できるようにする。

[0083] ページ生成部110は、拡張型コンポーネントを生成しようとするユーザーの入力に応じて拡張型コンポーネント生成のためのEXCページを生成する(ステップS200)。

[0084] EXCページは、デザイン(Design)タブとソース(Source)タブを持つページであり得る。

[0085] デザインタブ画面は、拡張型コンポーネントのベースとなる基本コンポーネントが描かれ、必要に応じてコンポーネントデザインが修正される空間である。

[0086] ソースタブ画面は、拡張型コンポーネントのベースとなる基本コンポーネントに関するソースコードが表示される空間である。また、今後の情報入力によって追加される機能に関するソースコードがソースタブ画面に更新表示されることもできる。

[0087] コンポーネント拡張部120は、生成されたEXCページからユーザー入力に相応して拡張しようとする基本コンポーネントを選択する(ステップS210)。ユーザーは、追加機能を付与しようとする基本コンポーネントを選択することができる。

[0088] 基本コンポーネントには、フォーム(Forms)、グリッド(Grid)、コンテナ(Container)、ナビゲーション(Navigation)、チャート(Chart)、フレーム(Frame)、HTML5などのタイプが含まれ得る。

[0089] フォームタイプには、以下のような基本コンポーネントが含まれる。

[0090] Anchorコンポーネントは、HTMLのタグのようにハイパーリンクの役割を行う。スタイルとクラスの変更により、様々な形態の支援が可能な機能及び特徴を有する。クリックイベントを提供し、Web接近性を支援することができる。

[0091] Accordionコンポーネントは、複数のパネルにコンテンツを表示する。異なるコンテンツを含む複数のパネルを含み、各パネルの追加、削除、開く / 閉じることができる機能及び機能を有する。異なるコンテンツをパネルごとに分離して1画面に表示するときに利用される。

[0092] AutoCompleteコンポーネントは、SelectBox機能を拡張したコンポーネントで、入力されたテキストに従って自動完成機能を提供する。大文字と小文字を区分したり、入力テキストを強調したり、キーワード含み検索とキーワード一致検索を支援したりすることができる。検索用のキーワード入力ボックスとして利用できる。

[0093] Calendarコンポーネントは、カレンダー画像を出力して日付を選択えきるインターフェースを提供する。日付形式指定、最小 / 最大年度設定、開始曜日設定、スキンデザイン選択、年 / 月表示順序指定などが可能な日付選択手段である。

[0094] CheckBoxコンポーネントは、選択対象項目を選択ボックスと一緒に出力する。HTMLで提供されるInputオブジェクトのtype="checkbox"に類似したインタフェースを提供する。Radioとは異なり、複数の項目を同時に選択できる複数選択が可能なメニューである。

[0095] CheckComboBoxコンポーネントは、CheckBoxとSelectBoxを混合した形態のコンポーネントである。入力されたテキストに従って自動完成機能を提供する。複数選択が可能であり、選択ボックスと一緒にドロップダウンリスト形態のメニューを提供することができる。

[0096] DatePickerコンポーネントは、モバイル専用カレンダーコンポーネントである。モバイル環境でカレンダーコンポーネントと入力カレンダーコンポーネントを置き換える。コンポーネントの最上位は、HTML を使用することができる。

[0097] Editorコンポーネントは、WebエディタであるCKeditorを生成し、オプションを通じて様々な機能を提供する。

[0098] FlipToggleコンポーネントは、タッチドラッグによるトグルを支援する。ラベル指定が可能であり、モバイル装置用のトグルインターフェースとして活用することができる。

[0099] Imageコンポーネントは、画面に画像を出力する。パス設定による画像の追加が可能であり、画像のサイズやスタイルの指定が可能である。画面が画像を挿入するために利用される。

[0100] InputBoxコンポーネントは、テキスト入力ボックスで、最も基本的なテキスト入力コンポーネントである。

[0101] InputCalendarコンポーネントは、日付を直接入力したり、カレンダー画像から日付を選択できるインタフェースを提供する。

[0102] MultiSelectコンポーネントは、ユーザーの複数選択を支援する。選択ボックスの形態で複数選択を支援するコンポーネントである。

[0103] MultiUploadコンポーネントは、複数のファイルを一度にアップロードできる機能を提供するコンポーネントである。

[0104] Radioコンポーネントは、選択対象の項目を選択用のボタンと一緒に提供するが、単一選択のみを許容するコンポーネントである。

[0105] ScheduleCalendarコンポーネントは、カレンダー形態でスケジュールを表示するコンポーネントで、スケジュールの追加、削除、編集が可能である。

[0106] SearchBoxコンポーネントは、検索用のテキスト入力ボックスである。基本的に入力ボックスと同じ機能を提供し、さらに全テキストを削除できるボタンを共に提供することができる。

[0107] Secretコンポーネントは、テキスト入力ボックスであり、入力されたテキストを別途の指定された記号で表示する。パスワード入力ボックスとして利用することができる。

[0108] SelectBoxコンポーネントは、コンボボックスを介して選択対象をリストとして表示し、単一選択のみが許容されるドロップダウンリスト形態のメニューを提供する。

[0109] Sliderコンポーネントは、上下左右のスライドを介して値を選択できるインターフェースを提供する。

[0110] Spanコンポーネントは、tagname属性がSpanのテキストボックスコンポーネントである。Webブラウザ全体の幅にわたって文字列を出力できる。

[0111] Spinnerコンポーネントは、矢印で値を選択できる機能を提供する。

[0112] TextAreaコンポーネントは、改行テキストの入力 / 出力を支援する。複数行のテキスト入力が可能である。

[0113] TextBoxコンポーネントは、単純なテキスト出力用のOutputコンポーネントの軽量化バージョンである。

[0114] Triggerコンポーネントは、ボタンUIを提供し、HTML <input>タグのtype=buttonに類似したインターフェースを提供する。

[0115] Uploadコンポーネントは、ファイルをアップロードできるようにする。

[0116] グリッドタイプには、テーブル型の資料をグリッドで表示するグリッドコンポーネントが含まれる。大きくBodyとHeaderに区分され、様々なデータ形式を支援する。自由なグリッド編集が可能であり、ページング、ソート、フィルタリング、グルーピングを支援することができる。複雑なテーブル構成、大量のデータを処理するテーブル構成、大容量ファイルのアップロード / ダウンロード(Excel、CVS、ハンセル / ネクセルなど)に利用することができる。

[0117] コンテナタイプには、以下のような基本コンポーネントが含まれる。

[0118] FloatingLayerコンポーネントは、画面にポップアップ形態で出力される新しいウィンドウを作成する。画面最上層に出力し、移動制御が可能である。

[0119] Generatorコンポーネントは、複数のコンポーネントで構成されたコンポーネントグループを一度に生成するためのコンポーネントである。複数のコンポーネントで構成されたWeb UIを生成するインタフェースとして利用することができる。

[0120] Groupコンポーネントは、複数のコンポーネントをグルーピングするコンポーネントである。全体のレイアウトを構成するか、あるいは複雑な階層構造を具現するために利用することができる。

[0121] ScrollViewコンポーネントは、モバイル専用のタッチスクロールを提供する。

[0122] SlideHideコンポーネントは、スライドを介した非表示 / 表示機能を提供する。クイックメニューのようにマウスを上げると、UIをしばらく表示する状況で使用することができる。

[0123] Switchコンポーネントは、複数の状況ができる場合、各状況に対する画面を構成し、当該状況に合った画面を出力する。

[0124] TabControlコンポーネントは、タブ形態の画面を構成する。TabControlコンポーネントを描画すると、最初の1つのTabと当該コンテンツ領域が作成される。各コンテンツは、Groupのように下位にコンポーネントを含むことができる。

[0125] TableLayoutコンポーネントは、Groupコンポーネントのtagname属性にHTML5タグ(<colgroup)、、、)を追加してタグで結ぶ。

[0126] WidgetContainerコンポーネントは、複数のWebウィジェットを1画面で提供するコンポーネントである。サーバ通信などを含む業務画面をWebウィジェットとして使用することができる。業務画面とユーティリティの使用環境をパーソナライズできる。各ウィジェットは、異なるURLを介して管理し、ユーザーが望むコンテンツだけを1つの画面に配置できる。WFrameを使用することで、SPAの具現及び効率的なリソース管理が可能である。

[0127] WindowContainerコンポーネントは、ツールバーを用いて複数のウィンドウを制御する。

[0128] ナビゲーションタイプには、以下のような基本コンテナが含まれる。

[0129] Accordianコンポーネントは、複数のパネルにコンテンツを表示する機能を提供する。

[0130] PageControlコンポーネントは、ページ移動用のUIを提供する。

[0131] PageListコンポーネントは、ページ数とページを選択するインタフェースを提供する。

[0132] TreeViewコンポーネントは、階層的なデータをツリー形態で表示する。ドラッグアンドドロップによる動的編集が可能であり、一般データを階層的なデータに変換することもできる。

[0133] チャートタイプには、以下のような基本コンポーネントが含まれる。

[0134] FusionChartコンポーネントは、様々なデバイス、ブラウザ、プラットフォームで動作するJavaScriptベースのチャートである。

[0135] MapChartコンポーネントは、d3データを用いて地図を様々な形態で視覚化して表現することができる。

[0136] フレームタイプには、以下のような基本コンポーネントが含まれる。

[0137] IFrameコンポーネントは、HTMLのIFrameに類似している。IFrameを介してWebスクエアファイル、一般Webコンテンツ、他のサイトを画面に出力することができる。SPAモード適用が可能なコンポーネントである。

[0138] PageInheritコンポーネントは、他のWebスクエア画面を現在の画面に挿入する。

[0139] WFrameコンポーネントは、Webスクエア画面を挿入し、上位ページと一緒にレンダリングすることができる。

[0140] HTML5タイプには、Article、Aside、Audio、Canvas、Footer、Header、Navigation、Section、Videoなどの基本コンポーネントが含まれる。

[0141] その他のタイプには、以下のような基本コンポーネントが含まれる。

[0142] ActiveXの使用を支援するActiveXコンポーネント、Appletの使用を支援するAppletコンポーネント、Flashの使用を支援するFlashコンポーネントを含む。

[0143] Outputコンポーネントは、ブラウザに文字列を出力する。ProgressBarコンポーネントは、進行状況を表示する。RounderRectangleコンポーネントは、丸みを帯びた角の四角形を提供する。Tagコンポーネントは、一般HTMLタグをWebスクエアで管理する上位オブジェクトである。XHTMLコンポーネントは、XHTMLファイルをレイヤーに表示し、XHTMLページを埋め込むことができるプラグインである。XSLコンポーネントは、XSLを介してWebスクエアXMLを出力する。

[0144] コンポーネント拡張部120は、選択されたコンポーネントに付与しようとする追加機能に関する情報を入力される(ステップS220)。そのために情報入力のためのポップアップウィンドウが実行されることができる。

[0145] 図7及び図8には、拡張可能コンポーネントに関する情報を入力するポップアップウィンドウの例が示されている。図7(a)は、一般的な事項を入力するGeneral入力ウィンドウであり、(b)は、外部に追加に露出される属性情報を入力するProperties入力ウィンドウである。図8(a)は、外部に追加に露出されたイベントを入力するイベント入力ウィンドウであり、(b)は、外部に追加に露出されるAPI情報を入力するAPI入力ウィンドウである。

[0146] 拡張型コンポーネントは、選択された基本コンポーネントの属性、イベント、及びメソッドをそのまま継承して使用することになる。ここに、ポップアップウィンドウを介して入力された情報に基づく機能が追加され、コンポーネントが拡張された効果を現すようになる。

[0147] したがって、コンポーネント拡張部120は、選択された基本コンポーネントをベースとし、追加に入力されたポップアップウィンドウの情報を反映して拡張型コンポーネントを生成することができる(ステップS230)。

[0148] 拡張型コンポーネントは、デザインとソースで構成されている。UDC2.0仕様を準用する。1つの拡張型コンポーネントは、1つの基本コンポーネントに対して継承でき、1つのxmlファイルで管理することができる。

[0149] 登録部130は、コンポーネント拡張部120によって生成された拡張型コンポーネントを開発ツール20に登録し(ステップS240)、業務画面のようなユーザーインタフェースプラットフォームの開発時に活用することができる。

[0150] 一例として、基本コンポーネントがSelectBoxの場合、追加機能としてドロップダウンリストを提供するようにする拡張型コンポーネントを生成して登録することができる。他の例として、基本コンポーネントがInputBoxの場合、最大入力桁数制御またはマスキング処理を追加機能として付与した拡張型コンポーネントを生成して登録することができる。

[0151] 本実施例に係る拡張型コンポーネントは、UDC(User Defined Component)と比較すると、以下のような差異点がある。

[0152] 具現方法において、拡張型コンポーネントは、基本コンポーネントのすべての属性、イベント、及びAPIを継承するため、再具現する必要はない。これに対し、UDCは、UDCが提供する属性、イベント、及びAPIを新たに具現しなければならない。

[0153] 制約事項としては、拡張型コンポーネントの場合、基本コンポーネントを一つずつだけ継承可能である。これに対して、UDCは、複数のコンポーネントの組み合わせで具現可能である。

[0154] 使用方法において、拡張型コンポーネントは、Groupコンポーネントを継承する場合、Groupの固有属性であるコンテナの役割が可能である。図9(a)を参照すると、exc_groupコンポーネントの下位ノードに他のコンポーネントを生成できることを現している。

[0155] これに対して、GroupコンポーネントでUDCを生成する場合、Groupの固有属性を使用することはできず、UDCが提供する属性のみが使用可能である。図9(b)を参照すると、udc_udc_groupコンポーネントの下位ノードに他のコンポーネントを生成できないことを現している。

[0156] 図10は、本発明の一実施例に係るシステムの構成を示す図である。

[0157] 図10を参照すると、拡張型コンポーネント生成装置100は、プロセッサ310とメモリ320とを含む。メモリ320は、プロセッサ310によって実行可能な1つ以上の命令語を格納する。プロセッサ310は、メモリ320に格納された1つ以上の命令語を実行する。プロセッサ310は、命令語を実行することによって、図6から図9に関して上述した1つ以上の動作を実行することができる。さらに、図5を参照して上述した本発明の構成は、プロセッサ310によって実行される命令語によって具現される構成であり得る。

[0158] 以上で説明した実施例は、ハードウェア構成要素、ソフトウェア構成要素、及び / またはハードウェア構成要素及びソフトウェア構成要素の組み合わせで具現できる。例えば、実施例で説明した装置、方法及び構成要素は、例えば、プロセッサ、コントローラ、中央処理装置(Central Processing Unit;CPU)、グラフィックプロセッシングユニット(Graphics Processing Unit;GPU)、ALU(arithmetic logic unit)、デジタル信号プロセッサ(digital signal processor)、マイクロコンピュータ、FPGA(field programmable gate array)、PLU(programmable logic unit)、マイクロプロセッサ、注文型集積回路(Application Specific Integrated Circuits;ASICS)、または命令(instruction)を実行し応答できる他の装置と同様に、1つ以上の汎用コンピュータまたは特殊目的コンピュータを用いて具現できる。

[0159] 上記の拡張型コンポーネント生成方法は、コンピュータによって実行されるアプリケーションまたはプログラムモジュールのようなコンピュータによって実行可能な命令語を含む記録媒体の形態でも具現できる。コンピュータ読み取り可能な媒体は、コンピュータによってアクセス可能な任意の可用媒体であり得、揮発性及び不揮発性媒体、分離型及び非分離型媒体のすべてを含む。さらに、コンピュータ読み取り可能な媒体はコンピュータ記憶媒体を含むことができる。コンピュータ記憶媒体は、コンピュータ読取可能な命令語、データ構造、プログラムモジュール、または他のデータのような情報を記憶するための任意の方法又は技術で具現された揮発性及び不揮発性、分離型及び非分離型媒体のすべてを含む。

[0160] 上述した拡張型コンポーネント生成方法は、端末に基本的にインストールされたアプリケーション(これは端末に基本的に搭載されたプラットフォームやオペレーティングシステムなどに含まれるプログラムを含むことができる)によって実行することができ、ユーザーがアプリケーションストアサーバ、アプリケーションまたは該当サービスに関連するWebサーバなどのアプリケーション提供サーバを介してマスター端末に直接インストールしたアプリケーション(すなわち、プログラム)によって実行することもできる。このような意味から、上述した拡張型コンポーネント生成方法は、端末に基本的にインストールされるか、またはユーザーによって直接インストールされたアプリケーション(すなわち、プログラム)で具現され、端末などのコンピュータで読み出し可能な記録媒体に記録することができる。

[0161] 以上では、本発明の一実施例を参照して説明したが、当該技術分野で通常の知識を有する者であれば、下記の特許請求の範囲に記載された本発明の思想及び領域から逸脱しない範囲内で、本発明を多様に修訂及び変更することができることが理解できるであろう。

符号の説明

[0162] 100: 拡張型コンポーネント生成装置110: ページ生成部120: コンポーネント拡張部130:登録部< / script> < / xf:model>

Claims

1. 1. A computer program stored on a computer-readable medium for causing a computer to perform an extended component generation method, the computer program causing a computer to perform the following steps, the steps comprising: generating a page for the extended component with a development tool; selecting one of the basic components provided by the development tool; Inputting information regarding additional features; generating an extended component that inherits all the functionality of the base component and is provided with the additional functionality; registering the extended component with the development tool; 10. A computer program stored on a computer-readable medium, wherein the extended component inherits all of the attributes, events, and APIs of the base component, but only for one of the base components.

2. 2. The computer program stored on a computer-readable medium of claim 1, wherein the extended component page is a page having a design tab and a source tab.

3. The basic component is a component belonging to at least one type among Forms, Grids, Containers, Navigation, Charts, Frames, HTML5, and others; Among the above types, the others include ActiveX components that support the use of ActiveX, Applet components that support the use of Applet, Flash components that support the use of Flash, and Output components that output character strings to the browser. It includes a ProgressBar component that displays the progress, a RounderRectangle component that provides a rectangle with rounded corners, a Tag component that is a higher-level object that manages general HTML tags in a Web Square, an XHTML component that is a plug-in that displays XHTML files in a layer and can embed XHTML pages, and an XSL component that outputs Web Square XML via XSL.

10. A computer program stored on a computer-readable medium according to claim 1.

4. An extensible component generation device included in a user interface platform development system, a page generating unit that generates a page for the extended component using a development tool; a component extension unit that selects one of the basic components provided by the development tool, inputs information about additional functions, and generates an extended component that inherits all the functions of the basic component and is provided with the additional functions; a registration unit that registers the extended component with the development tool; The extended component inherits all the attributes, events, and APIs of the base component, but only for one of the base components.

5. 5. The extendable component generating device according to claim 4, wherein the extendable component page is a page having a design tab and a source tab.

6. The basic component is a component belonging to at least one type among Forms, Grids, Containers, Navigation, Charts, Frames, HTML5, and others; Among the above types, the others include ActiveX components that support the use of ActiveX, Applet components that support the use of Applet, Flash components that support the use of Flash, and Output components that output character strings to the browser. It includes a ProgressBar component that displays the progress, a RounderRectangle component that provides a rectangle with rounded corners, a Tag component that is a higher-level object that manages general HTML tags in a Web Square, an XHTML component that is a plug-in that displays XHTML files in a layer and can embed XHTML pages, and an XSL component that outputs Web Square XML via XSL.

5. The extendable component generation device according to claim 4.

Images