KR20150099199A - A recording media recognized by computer for providing an application developing environment program - Google Patents
A recording media recognized by computer for providing an application developing environment program Download PDFInfo
- Publication number
- KR20150099199A KR20150099199A KR1020140020790A KR20140020790A KR20150099199A KR 20150099199 A KR20150099199 A KR 20150099199A KR 1020140020790 A KR1020140020790 A KR 1020140020790A KR 20140020790 A KR20140020790 A KR 20140020790A KR 20150099199 A KR20150099199 A KR 20150099199A
- Authority
- KR
- South Korea
- Prior art keywords
- information
- component
- screen
- application
- connection
- Prior art date
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
- Stored Programmes (AREA)
Abstract
A computer-readable recording medium storing an application development environment providing program according to an exemplary embodiment of the present invention includes a function of storing form pages into two or more pages and storing them;
A function of displaying an application project setting screen for inputting at least one of identification information, version information, developer information, authentication information, image information, database connection information, server connection information, module information and source information of a development target application;
When one or more pieces of identification information, version information, developer information, authentication information, image information, database connection information, server connection information, module information, and source information of a development target application are inputted on the application project setting screen, The ability to create an application project;
An inter-page connection area indicating a connection relationship between a plurality of page images constituting an application and a plurality of page images constituting the application through a plurality of arrow images connecting the plurality of page images, A function of displaying a first screen including a form tab area for adding a page and establishing a connection relation between the pages;
Displaying a second screen showing a connection relationship among a plurality of components that are responsible for each screen or function within each page for any one of the plurality of pages;
When a first component including event information and a second component including action information are connected by an arrow in the second screen, a structural connection error between the first component and the second component connected by the arrow is verified, Generating a first code composed of an intermediate language corresponding to a connection between the first component and the second component if an error is found, displaying error information on the screen;
And a function of converting the first code into a second code corresponding to the target platform or the target browser is a computer-readable recording medium recording an application development environment providing program for executing the program.
Description
The present invention relates to a method of providing an application development environment, and more particularly, to a method of providing an application development environment capable of improving development efficiency of an application developer.
2. Description of the Related Art In recent years, various types of terminal devices such as smart phones and tablet PCs have emerged, and interest in applications that can be used in such terminal devices is being amplified.
Particularly, in recent years, when a developer develops an application and uploads the application to a predetermined application store, a method in which users access the application store using a terminal device, and then purchase and download an application desired by the user is widely used. Accordingly, application development is actively performed in various fields.
In order to develop such diverse and active applications, experts who are dealing with C language, Java (JAVA), OBDC, SQL etc. are generally doing direct code writing and development.
1 is a diagram showing a general application development environment.
As shown in FIG. 1, in general application development, widgets such as Activity, Dialog, Frame, and the like are declared for step-by-step matching by each event or window message, and an event procedure And the like.
However, such a development approach is only accessible to experienced developers and requires expertise in the languages described above. In addition, the developer must implement a large amount of code directly through the event procedure, so that it is difficult to perform application development with a lot of knowledge and considerable effort.
Further, when there is a change in the service scenario based on the developed code, the developer has to change many codes again.
In addition, there is a difference in the degree of expertise and personal code style among developers, so it is difficult to ensure interoperability between modules when collective collaboration or developer replacement, and code can be complicated according to understanding of modularity, Lt; / RTI >
On the other hand, even if a developer develops an application having the same function, there is a problem that development must be performed using different application development tools depending on the platform of the OS to which the application is applied. In addition, .
It is an object of the present invention to provide a method of providing an application development environment capable of improving development efficiency of a developer.
It is another object of the present invention to provide a method of providing an application development environment that provides a user interface that facilitates scenario management and application development without complicated and specialized knowledge.
It is still another object of the present invention to provide an application development environment providing method capable of adaptively applying conversion and adaptation to various devices while maintaining compatibility between modules, thereby preventing duplication of development.
According to another aspect of the present invention, there is provided a computer-readable recording medium storing an application development environment providing program, the computer-readable recording medium having a function of storing a form page into two or more pages,
A function of displaying an application project setting screen for inputting at least one of identification information, version information, developer information, authentication information, image information, database connection information, server connection information, module information and source information of a development target application;
When one or more pieces of identification information, version information, developer information, authentication information, image information, database connection information, server connection information, module information, and source information of a development target application are inputted on the application project setting screen, The ability to create an application project;
An inter-page connection area indicating a connection relationship between a plurality of page images constituting an application and a plurality of page images constituting the application through a plurality of arrow images connecting the plurality of page images, A function of displaying a first screen including a form tab area for adding a page and establishing a connection relation between the pages;
Displaying a second screen showing a connection relationship among a plurality of components that are responsible for each screen or function within each page for any one of the plurality of pages;
When a first component including event information and a second component including action information are connected by an arrow in the second screen, a structural connection error between the first component and the second component connected by the arrow is verified, Generating a first code composed of an intermediate language corresponding to a connection between the first component and the second component if an error is found, displaying error information on the screen;
And a function of converting the first code into a second code corresponding to the target platform or the target browser is a computer-readable recording medium recording an application development environment providing program for executing the program.
According to an embodiment of the present invention, when providing an application development environment, a first screen showing a connection relationship between a plurality of pages is displayed, and a second screen showing a connection relationship between the components is displayed on any one of the pages.
In particular, the first component including the event information and the second component including the action information can be connected to intuitively display the connection relationship between the components.
Meanwhile, since the connection relation can be changed according to the transformation of the image object indicating the connection relation between the components, even the general developer who does not have the expert knowledge can easily perform the connection relationship between the components and the scenario implementation.
In addition, by using an intermediate language according to the embodiment of the present invention for developing such an application, the same application can be easily converted and applied to different OS platforms. Therefore, it is possible to develop applications that can be used in various OSs through a single application development, thereby greatly reducing the time and effort required for development.
In addition, various user interfaces and operations for facilitating application development can be provided, and the convenience of use of the developer can be increased.
1 shows a general application development screen.
FIG. 2 is a diagram schematically showing an example of a whole development system including an application development environment providing apparatus according to an embodiment of the present invention.
3 shows a detailed configuration of an application development environment providing apparatus according to an embodiment of the present invention.
4 to 7 are diagrams for explaining a method of providing an application development environment according to an embodiment of the present invention.
8 is a diagram showing a relationship between a second screen and an actual code according to the embodiment of the present invention.
FIG. 9 is a view for explaining an action list of the second screen 120 according to an embodiment of the present invention.
10 illustrates a method of displaying a component block and a connection relationship in an application development
11 is a diagram for explaining a method of adding a component of an application development
FIG. 12 shows a data binding method of an
FIG. 13 shows a relational database management system (RDBMS) setting method of an application development
14 shows an open API type data setting method of the application development
FIG. 15 shows a detailed restful / SOAP setting method of the application development
16 to 25 are diagrams for explaining a method of providing an application development environment according to another embodiment of the present invention.
26 shows a screen in which an application converted by the application development
27 and 28 illustrate a method of arranging the components of the second screen provided in the application development
29 shows a layout method of an application development
Figures 29-31 illustrate embodiments of block layout.
33 is a block diagram illustrating a platform of a
35 shows a component structural view according to an embodiment of the present invention.
FIGS. 36 to 53 are views for explaining a process of creating an application using screens provided according to an application development environment providing method according to an embodiment of the present invention.
The following merely illustrates the principles of the invention. Thus, those skilled in the art will be able to devise various apparatuses which, although not explicitly described or shown herein, embody the principles of the invention and are included in the concept and scope of the invention. Furthermore, all of the conditional terms and embodiments listed herein are, in principle, intended only for the purpose of enabling understanding of the concepts of the present invention, and are not intended to be limiting in any way to the specifically listed embodiments and conditions .
It is also to be understood that the detailed description, as well as the principles, aspects and embodiments of the invention, as well as specific embodiments thereof, are intended to cover structural and functional equivalents thereof. It is also to be understood that such equivalents include all elements contemplated to perform the same function irrespective of the currently known equivalents as well as the equivalents to be developed in the future, i.e., the structure.
Thus, for example, it should be understood that the block diagrams herein represent conceptual views of exemplary circuits embodying the principles of the invention. Similarly, all flowcharts, state transition diagrams, pseudo code, and the like are representative of various processes that may be substantially represented on a computer-readable medium and executed by a computer or processor, whether or not the computer or processor is explicitly shown .
The functions of the various elements shown in the figures, including the functional blocks depicted in the processor or similar concept, may be provided by use of dedicated hardware as well as hardware capable of executing software in connection with appropriate software. When provided by a processor, the functions may be provided by a single dedicated processor, a single shared processor, or a plurality of individual processors, some of which may be shared.
Also, the explicit use of terms such as processor, control, or similar concepts should not be interpreted exclusively as hardware capable of running software, and may be used without limitation as a digital signal processor (DSP) (ROM), random access memory (RAM), and non-volatile memory. Other hardware may also be included.
In the claims hereof, the elements represented as means for performing the functions described in the detailed description include all types of software including, for example, a combination of circuit elements performing the function or firmware / microcode etc. , And is coupled with appropriate circuitry to execute the software to perform the function. It is to be understood that the invention defined by the appended claims is not to be construed as encompassing any means capable of providing such functionality, as the functions provided by the various listed means are combined and combined with the manner in which the claims require .
BRIEF DESCRIPTION OF THE DRAWINGS The above and other objects, features and advantages of the present invention will become more apparent from the following detailed description of the present invention when taken in conjunction with the accompanying drawings, in which: There will be. In the following description, well-known functions or constructions are not described in detail since they would obscure the invention in unnecessary detail.
Hereinafter, a preferred embodiment of the present invention will be described in detail with reference to the accompanying drawings.
2 is a diagram schematically showing an example of an application development system including an application development
2, an application development system according to an embodiment of the present invention includes an application development
The application development
To this end, the application development
Here, the application may mean application data to be executed by the application development
In addition, the generated application data may be uploaded to the
And, the application may include a plurality of pages, and each page may include a plurality of components.
The application page may refer to an electronic document or graphical user interface as an object interpreted and executed by the
Such a connection relationship may be formed when event information included in a specific component is linked to action information of another component.
More specifically, when an application is executed and an event of a specific component is generated based on the event information, an action for the other component may be performed based on action information of another component connected to the event.
Accordingly, when the application is executed, the terminal 300 can perform various operations according to a connection relationship among a plurality of pages and a connection relation between the respective components. Then, the developer can use this to provide various application services. In particular, according to the embodiment of the present invention, it is possible to reduce time and effort for development by providing an intuitive and simple interface for establishing a connection relationship between pages and components, There is an effect that it becomes easy.
Meanwhile, the application development
In particular, the application development
The application development
Meanwhile, the
In addition, the
In particular, the
Each terminal 300 may be a terminal capable of executing an application generated in the application development
In particular, the platform or OS of each terminal 300 may be different from each other. Accordingly, the application development
3 shows a detailed configuration of an application development environment providing apparatus according to an embodiment of the present invention.
The detailed configuration of the application development environment providing device includes an application project setting for inputting one or more pieces of identification information, version information, developer information, authentication information, image information, database connection information, server connection information, module information, An inter-page connection area indicating a connection relationship between a plurality of page images constituting an application and a plurality of page images constituting the application through a plurality of arrow images connecting the plurality of page images, A first screen including a form tab region for adding a page on an inter-connection region and establishing a connection relationship between the pages, and displaying a first screen on each of the plurality of pages, Multiple composers responsible for A second screen including a first component including event information and a second component including action information is displayed by arrows and displayed on the screen, and the second screen is added to one of the plurality of pages - a display unit (191) for displaying a list of predefined components, each of which includes a plurality of component items, each component item corresponding to each component code having a predefined function or screen; If at least one of the identification information, the version information, the developer information, the authentication information, the image information, the database connection information, the server connection information, the module connection information, and the source information of the development target application is inputted on the setting screen, In the second screen, And a second component including action information are connected to each other, and when any one of the component items is selected and moved to a page screen in a drag and drop manner, When the first component including the event information and the second component including the action information are connected by an arrow in the second screen, the first component and the second component, And a generator 193 for automatically generating a code corresponding to the connection between the components.
As an example of a detailed component of the application development environment providing apparatus, an input unit 192 for generating an application project through inputting an application project creation screen, inputting application identification information (Application ID), and inputting authentication information, a profile and an application image, And displays the resolution of the terminal on which the selected target platform is driven based on the resolution information and the layout information corresponding to the layout state of at least one component displayed on the second screen, And a communication unit 195 for performing data communication between the conversion unit 194 server for converting the first code into the second code according to the determined layout and the application development environment provision apparatus. The data for data communication includes the first or second components generated.
On the other hand, the application development environment providing apparatus includes a form slicing unit 197 for solving the problem of lowering the application speed and memory speed, which has been a problem in the conventional technology at startup.
In the above, the form slicing unit is designed to allow a web browser component of an application to manage a large number of pages in an HTML-based application by parsing a large amount of HTML and JavaScript, cascading style sheets (CSS) In order to solve the problem of a sudden drop in the loading speed, it is necessary to provide an application development environment providing detailed information such as initial screen, login screen, main screen, However, the other screens are separated into separate HTML files and stored as files.
In general, a screen area is expressed using a tag element such as an HTML "article" or a "div", and a header area and various contents are expressed using child elements on each screen. When the screen is separated, the separated screens are dynamically inserted into the screen in response to a button or other user event at the time of the start of the screen to improve the loading speed.
In addition, by deleting the sliced HTML file by using a point at which the corresponding screen is no longer needed according to a situation in which the screen is continuously changed, unnecessary resources can be arranged and the performance of the memory can be improved.
FIG. 54 shows a typical conventional technology page. FIG. 55 shows a screen in which only a normal screen is defined as a sliced form area. FIG. 56 shows a screen in which elements of a sliced form are separately defined as a "slice.html" Represents a directory screen that is stored as a file separated by separate HTML.
Hereinafter, a method of providing an application development environment according to an embodiment of the present invention will be described with reference to FIGS.
4 is a flowchart illustrating an application development environment providing method according to an embodiment of the present invention.
Referring to FIG. 4, the application development
The application development
To this end, the application development
FIG. 5 shows an application project creation screen provided by the application development
As shown in FIG. 5, the developer can create an application project through an input to the application project creation screen. The application project creation screen may include an application ID input unit, authentication information and profile input unit, and an application image input unit, as shown in FIG. This minimizes the input information that the developer has to input and minimizes the required image.
In particular, when an application project is created and a development target platform is set, the application development
Then, the application development
The application development
On the other hand, the screen can be divided into frames for a relatively large tablet-specific smart device, such as a smart phone, and basic settings can be configured to configure the application.
58 shows a screen for dividing a frame for a tablet-dedicated device displayed by the application development
It provides a development environment to support inter-frame movement components for tablet-specific smart devices, action components between frames, and data movement components between frames.
6 shows a first screen 110 displayed by the application development
As shown in FIG. 6, the first screen 110 may represent a connection relationship to a plurality of pages included in an application under development in an application project. Each page may represent each electronic document that may be displayed when an application is running on the
For example, as shown in FIG. 6, an application may include a Home page, a Card page, a Find page, a Donut page, an SNS page, and a View page. The first screen 110 may include a plurality of arrow images 111 indicating connection relationships between the respective pages. Each arrow image 111 may represent a movement or a conversion relationship between the respective pages.
In particular, the application developer may modify the inter-page connection relationships as desired by modifying or deleting each arrow image 111 displayed on the first screen 110. [ For example, a developer could link new arrows to link between pages. Also, you can delete existing arrows to break between pages.
If there is a change or deletion of the arrow image, the application development
Meanwhile, the application development
In addition, when the icons are moved to the first screen 110, the application development
4 will be described again.
Then, the application development
As described above, a page may include a plurality of components. Each component may refer to a unit object that is responsible for each screen or function within a page. In addition, the components may include event information or action information for performing such a screen or function.
The event information may include events generated by a predetermined user input to the terminal 300 or an operation of the terminal 300. For example, events may include onClose, onInit, onScrollMouse, onClick, onError, onSuccess, or onEnd events.
Each of the events may correspond to action information included in another component. The action information may include information on an operation of an application that is performed according to an event generated in the
As described above, event information or action information included in each component may correspond to each other, and the connection relation therebetween may be displayed on the second screen.
7 shows a second screen 120 according to an embodiment of the present invention.
As shown in FIG. 7, the second screen 120 may represent each component and may represent a connection relationship between event information and action information included in each component.
In particular, each component in the second screen 120 may be displayed in a respective block form. The action information included in each component may be displayed in the form of a text box on one side of the block, and the event information may be displayed in the form of a text box on the other side of the block.
Then, the connection relation between each box can be indicated by an arrow image. Each arrow image can be started from a specific event of a specific component, and can be directed to a specific action of another component. In this case, the arrow image may indicate that the action of the component to be executed next when a specific event occurs.
As described above in the first screen 110, the application developer can change or delete the image of each arrow on the second screen 120, and each component may be added or deleted by a drag-and-drop method. Accordingly, the connection relationship between the event and the action of each component can be changed, and the application development
For example, the button1 component block 121 may include an onClick event box 123, and the onClick event box 123 may include a goBack action box 124 included in the link1 component block 122 by an arrow image Can be connected. In this case, the application development
8 is a diagram showing a relationship between a second screen and an actual code according to the embodiment of the present invention.
8, according to an exemplary embodiment of the present invention, an application developer generates a component messagebox1 to be executed next when an onClick event of a Button1 component is generated in the second screen 120, and an action show, You can specify by connecting. In this case, the application development
9 is a view for explaining an action list of the second screen 120 according to an embodiment of the present invention.
Referring to FIG. 9, the application development
Accordingly, according to an embodiment of the present invention, the second screen 120 may further include an action list component block 125 to solve this problem. The action list component block 125 may refer to an intermediate component inserted between components to perform a plurality of actions corresponding to one event.
For example, the developer may create an action list component block 125 and associate an arrow image so that the execute action of the action list component block 125 is executed in response to one event (onClink) ~ event9) can be generated. Then, the developer can designate the components and actions to be executed by each of the plurality of events (event1 to event9) using the arrow image again. In FIG. 9, the hide action of the panel1 component is performed in response to the
The application development
Accordingly, when the application is executed in the terminal 300, when the user clicks Button1 by the connection relationship set in the second screen 120, the operation of hiding panel1 and showing messagebox1 is performed.
FIG. 10 shows a method of displaying a component block and a connection relationship in an application development
Referring to FIG. 10, the application development
The page screen 130 may represent a page image implemented by each of the components.
In addition, the component block screen 140 can display a connection relationship between components, events, and actions in a tree structure. Each component can be represented by a depth, and the lower depth of each component can contain actions that the component contains. Accordingly, the developer can easily select a desired component and an action.
The attribute information of the selected component or action may be displayed at the top of the component block screen 140. The attribute information may include identification information of each component or action, data connection information, and event information associated with each action.
The component block screen 140 and the page screen 130 may correspond to the second screen 120 described above. Accordingly, the application development
The connection establishment method between events and actions may be a method of selecting an event and an action included in each component, unlike the event processing method through double click and procedure creation in the existing development environment. Accordingly, when the developer presses a specific button, the connection between the event and the action can be completed only by selecting a component object to be executed and an action included in the object.
On the other hand, FIG. 59 shows a screen for setting on a component to which a connection relationship between components is branched when an event and an action occur according to a condition in a second screen configuration by adding a branch (if) component.
The comparison branch of the component can be compared with the value of the constant and the database and can be branched. If the value is a constant value, the user can input the value directly to branch between the components. It can also be configured to take advantage of predefined constants and system environment variables.
11 is a diagram for explaining a method of adding a component of an application development
Referring to FIG. 11, the application development
Then, the developer can select any one of these component items and move them to the page screen 151 in a drag-and-drop manner. Correspondingly, the application development
In addition, the predefined components may be received and updated from the
FIG. 12 shows a data binding method of an
As shown in Fig. 12, a component may include a data component (dbtable1, data_store). A data component can be connected to a DB on the Web via SQL or RESTful / SOAP, and can represent an object that can receive and display data from a connected DB. The application development
FIG. 13 shows a relational database management system (RDBMS) setting method of an application development
As shown in FIG. 12, an application may be connected to an RDBMS. Accordingly, the application development
14 shows an open API type data setting method of the application development
As shown in Fig. 14, the component can be associated with open API type data. For example, the Twitter1 component shown in FIG. 14 can be connected to an open API of a Twitter, which is a kind of SNS. For this setting, the application development
FIG. 15 shows a detailed restful / SOAP setting method of the application development
As shown in FIG. 15, the application development
60 is a main screen of the data binding editor of the application development
The data binding editor of the application development
In addition, a drag-and-connect method for graphically displaying the relationship between various components provided by an application development environment providing device and a data store component and dragging and dropping an icon to express the data in a component easily and maintainably .
The data binding editor screen of FIG. 61 shows that the dbtable1 component is a data store component
And provides table / view information setting using existing database management system (DBMS) information. The database field information represents the field information that can be bound to the database in the data binding editor.
Each field is divided by color and provides input and output fields of data. It provides components such as "Label" and "ThumbListView", and receives the data and displays it on the screen. Can be defined.
These input / output fields are connected to each other to provide a way to easily develop data without developer's special code implementation.
FIG. 62 shows a result screen through the data binding of FIG.
FIG. 63 shows a form stored as an XML file for a result screen through the data binding of FIG.
On the other hand, in the case of an application between the client server and the conventional technology, there are many problems with the input / output specification with the server developer, and a lot of effort and time are spent in verifying the data consistency.
The application development
Figure 64 shows an embodiment of a server data simulator. The server data simulator retrieves the list of currently available server components and reads the specification information of the corresponding component, so that the server simulator obtains database information about the input and output. The simulator requests data on the server side based on the input information obtained, displays it on the screen through the output information, and outputs error information when an error occurs in the simulation.
65 shows a screen for outputting error information upon occurrence of error information in the server data simulator.
In one aspect, the application development
In other words, the inheritance structure of the component. In the inheritance structure like the above, the application programs set to be incompatible with the inheritance structure between the components are automatically checked and verified by the application development environment providing device, and a method of notifying or automatically correcting the processing is provided.
When the user brings in a component which is structurally incompatible with the inheritance structure on the first screen or the second screen by using an event and action or the like, the application development environment checks the room for the error and informs the user Or automatic correction processing.
For example, in the case of the "Collection" component of the list type, the component inherits the "Visual" component. However, unlike the "Container" component, it is set as the top component of the list component having only the "CollectionItem" Collection "component checks the condition that each exclusive CollectionItem should have a component, and if it violates it, checks the room of error and provides a development environment to notify the user.
FIG. 66 shows a screen when CollectionItem is normally added.
FIG. 67 shows a screen in which a warning message is displayed when an attempt is made to insert a wrong CollectionItem or when a CollectionItem is to be inserted into a component that is not a Collection component.
Hereinafter, a method of providing an application development environment according to another embodiment of the present invention will be described with reference to FIGS.
16 shows a method of providing an application development environment according to another embodiment of the present invention.
Referring to FIG. 16, an application development
The application development
17 is a diagram illustrating a comparison between an intermediate language and general JAVA codes according to an embodiment of the present invention.
As shown in FIG. 17, it can be seen that the code of the intermediate language can be written short and concise, unlike the general JAVA code, as the number of codes increases and becomes more complicated. In addition, such intermediate language code can be automatically created by the connection-based application development environment between the components provided in the application development
Figure 18 shows the XML format of a component defined as an intermediate language.
As shown in FIG. 18, the component may be implemented with XML code defined as an intermediate language. In particular, intermediate languages must be platform neutral and require code generation optimized for each platform at the end.
Accordingly, according to the embodiment of the present invention, as shown in FIG. 18, XML elements can be defined in the intermediate language, and the application development
FIGS. 19 to 24 are diagrams for explaining a component type of an XML code according to an embodiment of the present invention and a configuration of a first screen or a second screen according to the XML code type.
FIG. 19 shows an XML code of a basic type component provided in the application development
20 shows a header component and a footer component provided in the application development
Meanwhile, FIG. 21 shows a label, a text box, and a button component provided in the application development
22 shows container-type components provided in the application development
Meanwhile, FIG. 23 shows the list-type components provided in the application development
24 shows non-visual components provided in the application development
On the other hand, the component may have the structure as shown in FIG.
Referring to Figure 25, for example, a component may include a visual component, a container component, a collection component, and a nonvisual component.
A visual component may refer to a general user interface component (button, label, text box, etc.), and a container component may refer to a user interface component (form, header, footer, panel) that contains a visual component. A collection component may refer to a user interface component (list view, cover flow, navigation bar) representing a list, and a nonvisual component may include a component (timer, Link, message box, db table).
Each of these components can be configured as an intermediate language corresponding to the XML format. The first code configured as the intermediate language is converted into a second code corresponding to the target platform according to the event or action specified in the component (S205).
Thus, a component configured in an intermediate language can have the form of XML. For example, each component can represent a node unit of XML. And each component can be declared via the qname and id attributes. The prefix of qname can be a namespace, and name can have a component name. The id attribute may have a unique value in one page, and may start with an alphabetic character, but may have a combination of alphabetic characters and digits.
On the other hand, the top node of the intermediate language can represent a page. Thus, the prefix of qname can be declared in the xmlns: attribute of the page element.
In addition, a page constituting one screen may exist in one file unit, and an id element of each page may have a unique value in all pages.
Actions and events of such components may be included as child elements of each declared component element. For example, a container component can include a visual component as a child element. In addition, the collection component can include an item component that can be included in the collection component in the form of an item element. And, all components may include at least one of an event and an action.
26 shows a screen in which an application converted by the application development
The application development
In addition, the application development
27 and 28 illustrate a method of arranging the components of the second screen provided in the application development
The application development
Here, a box-shaped action can be disposed on one side of the component object, and box-shaped events can be disposed on the other side. Also, the connection relationship between each event and the action can be displayed in the direction of the arrow image. This allows the developer to understand the flow of natural applications running from one side to the other.
Meanwhile, the application development
As shown in FIG. 28, the application development
With this arrangement, it is possible to facilitate the arrangement flow of each component from left to right as shown in FIG. 28, and it is possible to reduce the labor of the developer to rearrange the components one by one.
29 shows a layout method of an application development
Conventional hybrid application development tools do not support various resolutions. In particular, existing WYSWYG supported application development tools are designed to deploy UI components using only X and Y coordinates in order to apply layout coordinates through drag-and-drop of developer. However, there has been a problem in that a separate screen corresponding to the resolution of the terminal needs to be developed when the resolution of the terminal changes slightly or changes to the landscape mode.
29, the
In the case of arranging the screen using each UI component, the block layout method may refer to a method of arranging up, down, left, and right based on the container component, instead of using coordinate information of X and Y. In this case, even if the resolution is changed, each component always maintains the up, down, left, and right positions so that the same layout can be expressed for each target terminal.
In the case where the continuous components are arranged, for example, in the case of arranging the
Figures 29-31 illustrate embodiments of such a block layout.
For example, as shown in FIG. 29, a header may be arranged at the top of each component, a
30 is a diagram for explaining a method of generating an application without providing X, Y coordinate information for a text box component and a button component, according to an application development
Referring to FIG. 30, an
31 shows a method of arranging components of an application development
As shown in FIG. 31, the application development
33 is a block diagram illustrating a platform of a terminal 300 capable of executing an application and FIG. 34 is a block diagram illustrating a platform of an application development
The application development
Meanwhile, the application development
35 shows a component structural view according to an embodiment of the present invention.
Referring to FIG. 35, a component may include a virtual component, and may include a visual component and a nonvisual component at a lower level. The visual component may include at least one of a label, a button, a text box, a text view, a combo box, a text area, an image view, a chart, a Google map, a media or an embedded component, Component.
The container component may include at least one of an application, a form, a header, a footer, a panel, a layout panel, a vertical panel, an Accordion, a frame splitter, A thumbnail list view, a navigation bar list view, a list view, a multi-list view, and a calendar list view component.
Non-visual components may include at least one of loading bar, timer, date time, DBinsert / Update / Delete, link, web link, message box, action list, variable, login and doc viewer component, And may include a data store component. The data store component may include at least one of a DB table, a web app module, an Rss, an Assets, a file list, a form data store, an app data store, a GPS, a compass and a battery component.
Hereinafter, a process of creating an application using screens provided according to an application development environment providing method according to an embodiment of the present invention will be described with reference to FIGS. 36 to 53. FIG.
36 shows a project creation screen for providing an application development environment according to an embodiment of the present invention. In Fig. 36, the developer can select a project to be produced by clicking New in the File menu.
Thereafter, when a developer wants to select a new project as shown in FIG. 37, a screen for providing a plurality of templates may be displayed. In particular, functions and tablets can be provided in addition to templates, and if the developer chooses Default, they can provide an interface that allows them to initiate the desired project without any template. When a developer selects a specific template among a plurality of templates, a new project can be created based on a template in which a basic configuration is set in advance.
38 shows a license validation screen for project creation. The
39 shows a project information setting screen. The project information setting screen can set the project name, application name, ID, and project version for application development.
40 shows an application development environment including a first screen according to an embodiment of the present invention. In particular, the first screen may correspond to the sitemap editor window of Fig. In FIG. 40, it is shown that a basic home page generated in advance by the RSS template selected in advance is generated and activated.
41 shows that a new page is added to the first screen. As described above, the application development
42 shows the change of the ID of the page to the RSSpage by changing the attribute value of the Form page. The developer can change the attribute value of each page through the input interface displayed in the property window.
43 shows a connection between the home page and the RSS page. As shown in FIG. 43, the developer can click the link, click the Home page icon, which is the connection start page, and then click the RSSpage page icon, which is the connection target page, to perform the inter-page connection. When the connection is performed, the connection relationship between the respective pages may be displayed on the first screen by the arrow image described above.
44 shows a screen for adding a component to a Home page. For example, the application development
On the other hand, FIG. 45 shows that the RSS_CNN button component is created in the Home page. For example, a Button component of a Basic type component can be added to the Home page by dragging and dropping, and an ID value in the property window is changed to an RSS_CNN value, whereby an RSS_CNN button component as shown in FIG. 45 can be generated. You can also change the RSS_CNN button component to an appropriate size by performing a size value change on the Style tab of the attribute.
46 shows a second screen showing the connection relationship among the components included in the Home page, and shows that the RSS_CNN button component is linked to the link_RSSpage component. Switching to the second screen can be done by selecting the Workflow tab at the bottom. You can also link the onClick event of the RSS_CNN button with the move action of the link_RSSpage by dragging and dropping the icons in the right flow window. Accordingly, the connection relationship between components can be displayed as an arrow image, and when the RSS_CNN button on the Home page is clicked through the link connection, it can be set to be moved to the RSSpage page.
47 shows a component addition screen of the RSS page. As shown in FIG. 47, when the ThumbListView is dragged and dropped onto the RSS page to move to the RSS page, a preset thumbnail list view component can be displayed on the page page of the RSS page.
48 shows a connection relationship between components of the RSSPage page.
As shown in FIG. 48, an onInit event that occurs when the RSS page is initialized can be connected to a Bind action that fetches the RSS data. This can be done immediately by clicking on the flow as described above and linking the onInit event of the RSS page form component with the bind of the rss1 component.
49 shows a screen for data binding to the RSS component of the RSS page.
As shown in FIG. 49, the application development
50 shows an export screen for converting the completed application into various platforms. As described above, the completed application can be configured as an intermediate language and can be converted into a second language according to the target OS. Thus, the export screen can provide a selection screen that allows selection of such second language. For example, the export selection may be an Android project, an Xcode project, a Windows phone, or a title.
68 is a diagram illustrating a method of converting a WebKit CSS (Cascade Style Sheet) to HTML2 format according to an existing target OS and transforming it to fit each browser Screen. Recently, new platforms such as Android, iOS as well as Windows8 IE, Tizen, Ubuntu, Mozilla, and Opera have been intensely introduced. As a result, the problem of CSS compatibility of the HTML application written before is solved and different web browser platforms are not compatible with each other (Webkit) CSS in order to solve the problem that CSS is used to suit each developer's web platform. So, if you enter only the existing Webkit CSS, to provide.
51 shows a package creation screen when the Android project is selected. In this case, the application development
FIG. 52 shows a simulator operation screen for confirming whether the application actually operates, and FIG. 53 shows a screen of a smart device which is converted and outputted by the final application and transmitted to the smart device and operated.
As shown in FIG. 53, in the smart device, when the RSS_CNN button created above is clicked on the home page, it is moved to the Form1 page (RSSpage), and the RSS data is received from the DB on the data- The application that can be displayed in the view component will work.
As described above, in the application development
The method for providing an application development environment according to the present invention may be stored in a computer-readable recording medium. The computer-readable recording medium may be a ROM, a RAM, a CD- ROM, a magnetic tape, a floppy disk, an optical data storage device, and the like, and may also be implemented in the form of a carrier wave (for example, transmission over the Internet).
The computer readable recording medium may be distributed over a networked computer system so that computer readable code can be stored and executed in a distributed manner. And, functional programs, codes and code segments for implementing the above method can be easily inferred by programmers of the technical field to which the present invention belongs.
While the present invention has been particularly shown and described with reference to exemplary embodiments thereof, it is to be understood that the invention is not limited to the disclosed exemplary embodiments, but, on the contrary, It will be understood by those skilled in the art that various changes in form and details may be made therein without departing from the spirit and scope of the present invention as defined by the following claims.
Claims (17)
A function of displaying an application project setting screen for inputting at least one of identification information, version information, developer information, authentication information, image information, database connection information, server connection information, module information and source information of a development target application;
When one or more pieces of identification information, version information, developer information, authentication information, image information, database connection information, server connection information, module information, and source information of a development target application are inputted on the application project setting screen, The ability to create an application project;
An inter-page connection area indicating a connection relationship between a plurality of page images constituting an application and a plurality of page images constituting the application through a plurality of arrow images connecting the plurality of page images, A function of displaying a first screen including a form tab area for adding a page and establishing a connection relation between the pages;
Displaying a second screen showing a connection relationship among a plurality of components that are responsible for each screen or function within each page for any one of the plurality of pages;
When a first component including event information and a second component including action information are connected by an arrow in the second screen, a structural connection error between the first component and the second component connected by the arrow is verified, Generating a first code composed of an intermediate language corresponding to a connection between the first component and the second component if an error is found, displaying error information on the screen;
And converting the first code into a second code corresponding to the target platform or the target browser.
The function of displaying the second screen includes:
And a function of displaying a connection relationship between the event information and the action information.
Wherein the event information includes a plurality of event items,
And at least one of the plurality of event items is connected to the second component.
Wherein the action information includes a plurality of action items,
Wherein at least one of the plurality of event items is associated with any one of the plurality of action items.
Wherein the first screen displayed is a connection object between the plurality of pages as a directional image object.
And the connection relationship between the plurality of pages is changed as the image object is modified or deleted.
Further comprising the step of displaying detailed information of a specific page among the plurality of pages,
Wherein the detailed information is identification information on the components included in the specific page and attribute information on the selected component in the specific page.
Wherein the attribute information is at least one of basic information, data connection information, style information, and event information for the selected component.
Wherein the second screen displays the connection relationship between the plurality of components as a directional image object and changes the connection relationship between the plurality of components as the image object is transformed or deleted, Readable recording medium having recorded thereon.
Further comprising a function of displaying a structure screen showing a relationship between the second component and the action information.
The function of converting,
A function of displaying a selection screen for selecting the target platform or the target browser;
And converting the first code into the second code corresponding to the target platform or the target browser according to the target platform or the target browser selected on the selection screen.
Further comprising a function of selecting a format of the converted second code,
Wherein the format is any one of a first format that can be installed on the target platform or a terminal driven by the target browser or a second format that is executable on the target platform or the target browser, media.
Wherein the intermediate language is an application development environment providing program that is generated based on an event or action connection relation screen designated between a plurality of components and includes a plurality of element codes indicating an event or an action specified for the component and the component Recorded on a recording medium.
Wherein the intermediate language includes relative placement information between the components, and the placement information is determined according to a placement state of at least one component displayed on the screen.
A program for providing an application development environment that further performs a function of separately outputting a frame for a tablet when developing a dedicated application for a tablet.
Further comprising a function of setting a component so that a connection relationship between components is branched when an event and an action are generated according to a condition in a second screen configuration by adding a branch component. Possible recording medium.
And an application development environment providing program for further executing a data consistency verification function for confirming a server side input / output specification when the application is a client / server application.
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
KR1020140020790A KR20150099199A (en) | 2014-02-21 | 2014-02-21 | A recording media recognized by computer for providing an application developing environment program |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
KR1020140020790A KR20150099199A (en) | 2014-02-21 | 2014-02-21 | A recording media recognized by computer for providing an application developing environment program |
Publications (1)
Publication Number | Publication Date |
---|---|
KR20150099199A true KR20150099199A (en) | 2015-08-31 |
Family
ID=54060414
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
KR1020140020790A KR20150099199A (en) | 2014-02-21 | 2014-02-21 | A recording media recognized by computer for providing an application developing environment program |
Country Status (1)
Country | Link |
---|---|
KR (1) | KR20150099199A (en) |
-
2014
- 2014-02-21 KR KR1020140020790A patent/KR20150099199A/en not_active Application Discontinuation
Similar Documents
Publication | Publication Date | Title |
---|---|---|
KR20150097230A (en) | A recording media recognized by computer for providing an application developing environment program | |
KR20150099196A (en) | A recording media recognized by computer for providing an application developing environment program | |
KR20150098992A (en) | A recording media recognized by computer for providing an application developing environment program | |
KR20150099348A (en) | A recording media recognized by computer for providing an application developing environment program | |
KR20150099195A (en) | A recording media recognized by computer for providing an application developing environment program | |
KR20150099199A (en) | A recording media recognized by computer for providing an application developing environment program | |
KR20150099197A (en) | A recording media recognized by computer for providing an application developing environment program | |
KR20150098840A (en) | A recording media recognized by computer for providing an application developing environment program | |
KR20150099177A (en) | A recording media recognized by computer for providing an application developing environment program | |
KR20150098802A (en) | A recording media recognized by computer for providing an application developing environment program | |
KR20150098989A (en) | A recording media recognized by computer for providing an application developing environment program | |
KR20150098832A (en) | A recording media for providing an application developing environment program | |
KR20150099252A (en) | A recording media recognized by computer for providing an application developing environment program | |
KR20150099078A (en) | A recording media specialized for an application developing environment program recording recognized by computer | |
KR20150099067A (en) | A recording media recognized by computer for providing an application developing environment program | |
KR20150097220A (en) | A recording media recognized by computer for providing an application developing environment program | |
KR20150099007A (en) | A recording media specialized for an application developing environment program recording recognized by computer | |
KR20150097217A (en) | A recording media recognized by computer for providing an application developing environment program | |
KR20150098761A (en) | A recording media recognized by computer for providing an application developing environment program | |
KR20150099064A (en) | A recording media recognized by computer for providing an application developing environment program | |
KR20150099188A (en) | A device for providing an application developing environment | |
KR20150099057A (en) | A recording media recognized by computer for providing an application developing environment program | |
KR20150098801A (en) | A recording media for providing an application developing environment program | |
KR20150099351A (en) | A recording media specialized for an application developing environment program recording recognized by computer | |
KR20150098867A (en) | A device for providing an application developing environment |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
WITN | Withdrawal due to no request for examination |