AU2014100798A4 - A visual role and transition based method and system for developing complex web applications - Google Patents

Abstract

An innovative cross-platform, cross-browser visual development, testing, and execution system comprising features that allow end-users without programming knowledge to design and develop dynamic, multi-user, multi-role web-based applications. The development system comprises several key components, namely, (i) a method for visually and naturally specifying process flow across multiple pages and multiple user roles; (ii) a method for visually designing the interface of the application; and (iii) a method for specifying and validating computations without programming skills; and (iv) a method for specifying rules and logic of execution flow without programming skills. Together, these methods enable a user to specify their mental map of his/her design of the web-based application visually, easily and yet in sufficient detail to enable our system to convert them to an executable program. The executable program includes several architectural components: HTML5 pages and client-side script for presentation, server-side script for business logic, and SQL databases for data layer. To convert a visual design specified by a user into this set of components requires new computation methods currently unavailable. These include (i) a method for translating canvas-like interface design into web pages coded in HTML5 and client-side validation JavaScript (ii) a method for translating computations and logic design into server-side scripts for managing interactions with users and across roles, execution flow, and data manipulation (iii) a method for translating data needs captured indirectly through the page, computation, and flow design into database and data manipulation logic. To enable a user to test the resultant executable programs visually and naturally also require new methods for testing and executing the resultant programs. These methods are described in two separate patent documents.

Description

1 A VISUAL ROLE AND TRANSITION BASED METHOD AND SYSTEM FOR DEVELOPING COMPLEX WEB APPLICATIONS Background [0001] Despite the availability of the off the shelf software as well as SaaS, organizations still require in their own customised applications. However, developing customised application requires substantial amount of time and cost that organizations may not be able to or want to afford. As a result, many software needs are often left unmet. In cases where budget is available, the typical software development process often requires communication between business analyst and developers on one hand, and the business and users on the other hand. The process is often error-prone and result in specification discrepancies and unsuitable software. The ideal situation to deal with these cost and time constraints as well as miscommunication is to empower the business and end-users to develop the applications directly. This need coupled with increasing user sophistication see a new breed of so called DIY application development tool. These tools currently fall into one of the following two categories: (1) Simple web content development tools that require no programming skills and (2) More complex, dynamic application development tools that require substantial programming skills. These tools however, left a large area of need where moderately complex application is required by businesses that do not have resources for programmers or users without programming skills. The system and method described in this patent provides the necessary visual elements, specification protocol, and behind-the-scene support for end users to develop moderately complex applications without programming skills. Summary Technical Problem [0002] There is always a need for software in assisting businesses and their daily tasks. To encourage the use of software, the cost and time invested have to be affordable and reasonable. Provisioning costs include development software/hardware, hiring developers and project management. In certain situation, ones even need to spend time in exploring new technologies and conducting proof of concept activities. For low budget 2 project, end-users can't afford developers and might be forced to learn programming language (e.g. Excel Macro and VBA). It is hard to learn programming language even for an IT or computer science graduates, let alone with fresh graduate from other disciplines. Besides programming, they also need to learn to conduct testing and deployment. For big budget project, there are problems with expectation and requirements. These gaps between end-users and development team would normally lead to 'scope creed'. And, scope creed costs money and time. Solution to Problem [0003] To achieve the goal of providing users with the ability to create sophisticated applications without the need for programming requires a collection of components that is expressive enough but yet is natural and intuitive. Our design is based on the philosophy that all the design elements needed to express are so simple to use that it does not violate the requirement of having to learn to program. The methods used in this project empower end-users to design and develop an application themselves. These methods include the following: (1) Process Flow (2) Page Design (3) Computation Design (4) Transition Design [0004] With the process flow method, end-users are able to specify various user roles and design the application's flow visually by creating a list of inter-related pages with simple mouse clicks or screen touches. The visual process flow defines the page sequence for each role that correlates the transition flow between pages with a role playing end-user. And, this method also offers a visual overview of the whole application's flow. Process designer is built into a tabular format, which consists of several rows and columns. Rows in the process designer represent the role of users and columns represent the time series of the application. Each intersection area of row and column is called a grid area. This tabular format helps end-users to visualise the flow in time sequence of web pages. To enable an easy to use environment, simple mouse clicks or screen touches are used to create page objects in the grid area that are bound in a time frame along with several other supporting functionalities such as logical flaw detection and automatic synchronisation of pages from different roles.

3 [0005] Secondly, end-users can build, change and customise the web pages' design visually and naturally. Unlike existing web page design tools, our method enables canvas-like environment that allows end-users to drag and drop web elements into the page freely. With Page Designer the user can design a page from scratch or use previously created pages and templates or templates from other sources. The Page Designer also enables the user to design in-page logic visually so that they can control the content of each page dynamically. In addition, users are also able to create new, reusable customized elements by simply grouping existing elements. [0006] Thirdly, computation design allows end-users to create new elements which to be used in transition designer and page designer. As the process flow is designed in time sequence manner, which means the elements that can be used in a page design at one particular time frame are either from the same page design or from previous page design. An element can only be used when it was created on or before the current timeframe. And, a new element can be created either through computation design method or page design method. Computation design method uses an iterative computing mechanism that enables end-users to compose multiple single arithmetic calculations that involve at least two operands and one operator visually and iteratively until a complex and complicated computation is formed. A standard operator list will be readily available and provided upfront whereas a much complex operator will be pre defined and pulled from backend support. And, the newly created computation can be shared and reused in the current and future application. [0007] Lastly, end-users can define and modify the conditions that used in the rules that determine the page's transition logic by using transition design. End-users choose or define the rules and logic of execution flow that need to be fulfilled for transitioning/moving from one page to the next. These rules and logic can be reused across different applications at the later stage. Each condition contains at least one operand, and one operator. Multiple conditions can be defined and their relationship will be AND-ed, which means these conditions must be valid or true to enable the page transition. As for multiple rules, their relationship will be OR-ed, which means either one of these rules must be valid or true to enable the page transition.

4 Advantageous Effects of Invention [0008] All in all, the design and development methods used in the tool are in the following sequence, Process Flow + Page Design + Create and Specify Computations + Flow Transition between Pages, which is simulating the logical mental map of an end-user. The learning curve of this system is gradual and yet it is able to express a complicated application. This is an iterative process that allows end-users to revisit and revise the system from the start. For each iteration the process flow, page, computation and transition design modifications can be modified and enhanced, evolving the design until a complete and full application is implemented. All the design specification and data will be stored in a centralized database. Once the design requirement gathering is completed, the system can be triggered to extract design data from the database, compile the requirements and generate executable web pages. These web pages are deployed into a production server for testing and execution. There is a test service in the patented system that can be used to conduct unit, integration, regression and user acceptance testing. [0009] Overall our patent describes an end-user program that assists them to analyse, design and develop a web application. It is a user-friendly environment in which no programming is needed throughout the entire development cycle. All the complex programming syntax will be avoided and very minimal typing is needed. And importantly, it enables and empowers end-users to develop complex web applications with complicated functionalities without sacrificing the expressiveness of the tool, and yet lowering the learning curve required by the end-user. Brief Description of Drawings [0010] Figure 1 depicts the overall system's component architecture. [0011] Figure 2 depicts the activity flow in flow designer method. [0012] Figure 3 depicts the layout of process designer with user role represented by row and timeframe represented by column. [0013] Figure 4 depicts the activity flow of process designer method. [0014] Figure 5 depicts the activity flow of page designer method. [0015] Figure 6 depicts the activity flow of transition designer method. [0016] Figure 7 depicts the activity flow of computation designer method.

5 [0017] Figure 8 depicts the activity flow of saving design specifications. [0018] Figure 9 depicts the activity flow of generating and deploying executable pages. [0019] Figure 10 depicts the overview of orchestration process in Execution Service. [0020] Figure 11 depicts the overview of data synchronization service. Description of Embodiments Overview of the system's architecture Figure 1 has been intentionally removed and inserted into Drawings pages [0020a] Figure 1 depicts the overall system's component architecture Designer Inputs (Figure 1.101) [0021] Designer Inputs method contains several user interfaces that allow end-users to interact with the system via direct manipulation. They are flow designer, page designer, transition designer and computational designer. Direct manipulation allows users to manipulate visual objects, which correspond to certain actions presented to them. An example of direct manipulation is resizing the height and width of a time frame in flow designer. Unlike other interaction style such as command programming, direct manipulation does not required users to learn programming languages. And, it allows users to complete tasks in less time and fewer errors with constant feedback from WYSIWYG user interface. It is considered much intuitive and natural to use compared to programming languages by majority end-users as it was proven through the success of Microsoft Excel. Flow Designer (Figure 1.103) [0022] Flow Designer method allows end-users to convey their mental model of the process flow into steps in a web-based application. End-users interact with the system through direct manipulation by clicking the designated grid area to create new page of data representation. This new page object corresponds to both page designer and transition designer. The flow of the pages could be merged or split in the case of convergent or divergent branch out of a process. All the design components and notation are designed graphically. Each subject role will be represented by a swim lane 6 process flow diagram. The swim lane process flow is spanned through numerous time frames which used to keep track of the specific time throughout the application. Each user interface is bound by a time frame. Between the user interfaces, there is a transition interface which used to define the logic of the process flow. Page Designer (Figure 1.102) [0023] Page Designer method is a canvas-like user interface that allows end-users to design and develop web page interface(s) by selecting and clicking respective web controls into the page's content. The result page will be WYSIWYG. What makes this different compared to other HTML editors is that end-users do not need to worry about the layout of the page design. They can create the control elements (e.g. textbox) in any positions in the design without using <div> and <table>. Their customised page design can be stored along with other pre-designed page templates that can be reused later. Transition Designer (Figure 1.104) [0024] Transition Designer method allows end-users to define and specify the condition(s) and rule(s) which will be used to define the next executable page in the process flow. The system adopts the rules-based processing method, and thus each action in a web page will be corresponded to an event. For example, a clicked event leads the end-user to next page. Basically, it defines the condition(s) to direct the process flow to the next specific page. Computation Designer (Figure 1.105) [0025] Computation designer method allows end-users to implements new variable(s) and formula(s) for transition and page designer. The output or result set of the created formula will be stored into a new variable that to be used in transition and page designer, and could also be re-used in another application. The formula will be stored in database and be shared or available to other application as well as allowing other end-users to re use them. Data Storage (Figure 1.106) 7 [0026] Data Storage method is a backend service that to be triggered by either an automated timer (defaulted to run every 5 minutes) or a save action event. This process will capture all the design's flow and its content (e.g. pages, transitions, computed elements), and store them to database or a local xml file. The individual page, transition or computation's design can be saved separately as well. Web Page Generation (Figure 1.107) [0027] Web Page Generation method is a backend service that generates and converts the application (Its process flow of execution, transition logic, and visual properties and responding actions of the page design) to executable web pages. Each page object in process flow will be processed and generated with 2 php pages, display.php and redirection.php. Display.php contains the HTML tags of the end-users' design, JavaScript used for page and elements' validation, logic and calculation, and a link to Redirection.php file. The latter contains the server side script that used to execute formula's logic, rules and conditions defined in transition design which used to decide the next executable page defined in the process flow design. Deployment Service (Figure 1.108) [0028] Deployment Service is a backend service that obtains all the executable php pages and deploys them into respective servers such as test server, deployment server and production server. The target servers' configuration and connection settings are stored in the database. They can be configured through direct changes via database script or Content Management User Interface (CMUI). And, a new database will be created that to be used for the application. Execution and Orchestration Service (Figure 1.109) [0029] Execution and Orchestration Service is a backend service that orchestrates the process flow of the web pages during application run-time. Its functions are creating, deleting, retrieving and updating page elements' values to/from MSSQL database while maintaining the execution stage of those web pages. As iCre8Sys also used to develop interactive application, there is a pre-designed waiting page or event during the process flow of execution.

8 Test Service (Figure 1.110) [0030] Test Service is a user interface that runs multiple role-specific instances of web pages simultaneously, which allows testing of multiple pages interactively. It allows multiple web pages' screen opened at the same time in the same interface, and allows end-users to enter inputs (e.g. string, number, checkbox selection) for respective pages. The user interface then processes the input and responds with the pre-defined logic as if it is running in the actual production environment. Database Synchronization (Figure 1.111) [0031] Database Synchronization service is a backend service that allows end-users to work on the application's design during offline, and a local compact database will be used to store the design. Upon connection restored, the data in local compact database will be synchronized with the centralized SQL server database. The version control mechanism will be triggered and used to manage the various design contents, as to prevent any contention of data as well as confusion to end-users. Detailed Process Description [0032] Figure 2 depicts the end-to-end processes of how iCre8Sys creating a web based application. The process involves 2 roles, designer and backend services. Designer can be anyone (e.g. software developer or business analyst) who preferably know the business requirements well, and with or without programming skills. Backend services are a set of components that help to convert the design into a complete application with interactive design and data storage. Figure 2 has been intentionally removed and inserted into Drawings pages [0032a] Figure 2 depicts the activity flow in Flow Designer Defining visual flow of execution [0033] Defining visual flow of execution method allows end-users to convey their mental model of the process flow into steps in a web-based application. Process designer is 9 built into a tabular format, which consists of several rows and columns. Swim lane or row in the process designer represents the role of users and time frame or column represents the time series of the application. Each intersection area of row and column is called grid area. Basically, end-users just need to click on the designated grid area to create page object that bound in a time frame. Each page object contains a set of row (x) and column (y), (x, y). End-users interact with the system through direct manipulation by clicking the designated grid area to create new page of data representation. This new page object corresponds to both page designer and transition designer. The flow of the pages could be merged or split in the case of convergent or divergent branch out of a process. All the design components and notation are designed graphically. Each subject role will be represented by a swim lane process flow diagram. The swim lane process flow is spanned through numerous time frames which used to keep track of the specific time throughout the application. Each user interface is bound by a time frame. Between the user interfaces, there is a transition interface which used to define the logic of the process flow. [0034] There is a list of functionalities which represented by a set of icons in the top menu bar. End-users can call or trigger these functionalities by clicking into them as well as using the mouse right click context menu. Mouse over and right click on the user interface node and display a context menu which has option to link to a list of functionalities (e.g. Save, undo/redo, zoom in/out and etc). One of the functionalities is to link to the page designer tool that used to design the free style web page. If double click the transition interface, it displays the transition designer tool that used to define, implement, or manipulate the condition for transition from previous page to the next page. Figure 3 has been intentionally removed and inserted into Drawings pages [0034a] Figure 3 depicts the layout of process designer with user role represented by row and timeframe represented by column Figure 4 has been intentionally removed and inserted into Drawings pages [0034b] Figure 4 depicts the activity flow of process designer [0035] Steps taken in creating process flow design: 10 [0036] 1. When first log into the process flow designer, a new flow will be created. When a new process flow is created, a unique key for the flow will be created and stored in database or local xml file. The key is used to identify and locate the flow's details. The destination of storage is varied depends on the internet connection. If there is connection, the IDE will create the flow's details into database, or else, it will save it into a local xml file. And, the xml file will be synchronized with the database when internet connection is enabled. [0037] 2. End-users click on a designated grid area to create a new page which contains link to page designer and transition designer. Page designer is used to construct web page design and transition designer is used to define and develop transition rules logic. [0038] 3. There are several functionality icons in the menu bar in process flow designer user interface. [0039] 3.1 Create/Edit page design: Mouse-click the page object and select 'Page designer' item option from the menu bar. This will open up the page designer window. The process flow designer window and page designer window are showing the parent-child relationship which the parent window will be locked out and can't be accessed when end-users are working on the child window. [0040] 3.2 Insert new role: Select 'New role' item option from the menu bar to create a new swim lane in flow designer. The role in this tool refers to the user profiles of end-users. For example, in a class registration application, user profiles contain student, lecturer and administrator. [0041] 3.3 Split/Merge pages: Select either 'Split' item option or 'Merge' item option from the menu bar to define divergent or convergent relationship between 2 pages in sequence. There are rules to dictate the next execution page from a previous page. When in divergent, a page leads to either one of the next pages with at least one specified transition rules. As for convergent, multiple pages lead to one page with or without transition rules. [0042] 3.4 Copy & Paste page(s): Right-click the page objects and select 'Copy' item option. Then go to the designated grid area, right-click and select 'Paste' 11 item. Or, end-users can use short-cut commands, Ctrl-C and Ctrl-V to perform copy and paste operation. Use rubber band technique (A rectangle surrounding all the objects you want to select and drag from one corner of that rectangle to the opposite corner) to select multiple page objects and perform copy and paste operation. [0043] 3.5 Save process flow: Select 'Save' item option from the menu bar to save the process flow. This is the manual way to save the process flow and there will be an automated service which running every 5 mins (Initial setting but can be changed in configuration page) to save the process flow that work in progress. Use 'Save-As' when end-users want to save the flow design to a xml file. [0044] 3.6 Undo/Redo transaction: Select 'Undo' item option from the menu bar to undo the last completed action. Likewise, select 'Redo' item option from the menu bar to restore the last action that has been undone early. This feature is especially useful when end-users have accidentally removed object in their process flow. [0045] 3.7 Zoom In/Out: Select 'Zoom In' item option from the menu bar to zoom in certain grid area within the process flow diagram so that it provides a bigger picture of the specific flow design area and easier for viewing. Likewise, select 'Zoom Out' item option from the menu bar to zoom out the flow design so that it provides a broader and helicopter's view of the process flow. It enables the viewing of the entire process flow in one screen. [0046] 3.8 Delete page: Select 'Delete' item option from the menu bar to delete 1 or more selected/highlighted page object(s). [0047] 3.9 Import process flow: Select 'Import' item option from the menu bar to import process flow xml file from local directory. This allows end-users to load the process flow file that created in another machine. [0048] 3.10 View print preview: Select 'Print preview' item option from the menu bar to view the printable version of the process flow diagram.

12 [0049] 4. Click 'Save process flow & exit' item option from the menu bar to save the process flow to database and exit the application. Anyhow, there will be an automated saving process running from the backend to save the user's design periodically (The period is defaulted to 5 mins) Designing interface of application [0050] A canvas-like user interface allows end-users to design and develop web page interface(s) by dragging and dropping respective web controls into the page's content. The result page will be WYSIWYG. Figure 5 has been intentionally removed and inserted into Drawings pages [0050a] Figure 5 depicts the activity flow of page designer [0051] Steps taken in creating page design: [0052] 1. After created or selected a page object in flow designer, end-users select 'Page designer' item option from menu bar and the page designer window will be opened. It is a modal dialog window which the parent window can't be modified or accessed while its child window is opened. This is to prevent the end-users from making changes to the process flow while designing or editing the page. [0053] 2. Upon opening the page designer window, the system will check whether there is any existing page design. If it exists, the system will load the page design from database. Or else, it will create a new blank page or allow end-users to choose a page design from the template list. [0054] 3. When a new page is created, a unique key for the page will be created and stored in database or local xml file. The key is used to identify and locate the page's details. The destination of storage is varied depends on the internet connection. If there is connection, the IDE will create the page's details into database, or else, it will save it into a local xml file. And, the xml file will be synchronized with the database when internet connection is enabled. [0055] 4. If there is already a page in placed, when it is loading, the unique key that was created upon page creation process will be used to locate the page's details and restore 13 its state into page designer. If there is no internet connection, the IDE will search for the page's details in the local xml file. [0056] 5. End-users can insert control elements into the page designer's main panel by selecting, dragging and dropping them. All the designing process shall be able to complete by using direct manipulation with several clicks. Neither typing nor coding is needed throughout this process except when end-users wanted to pre-define some statements or words into static control elements like paragraph and text box. [0057] 6. During the design process, end-users can either choose to exit or continue to complete the design. However, there will be an automated saving process running from the backend to save the user's design. [0058] 7. End-users can either retrieve the page design from the database or import it from an xml file. Upon retrieval, the page details will be populated into the page designer. End-users can then choose to save the page designer back to the xml file or database upon completion. Specifying rules and logic of execution [0059] Specifying rules and logic of execution method allows end-users to define and specify the condition(s) and rule(s) which will be used to define the next executable page. The system adopts the rules-based processing method, and thus each action in a web page will be corresponded to an event. It also defines and implements new variable(s), formula(s) and where condition(s) is/are to direct the experiment flow to the next specific page. Figure 6 has been intentionally removed and inserted into Drawings pages [0059a] Figure 6 depicts the activity flow of transition designer [0060] Steps taken in creating transition design: [0061] 1. After created a new page in flow designer, end-users double-click the transition box (the rectangle box that the page objects next to) and the transition designer window will be opened. It is a modal dialog window which the parent window 14 can't be modified or accessed while its child window is opened. This is to prevent the end-users from making changes to the process flow while designing or editing the transition. [0062] 2. Upon opening the transition designer window, the system will check whether there is any existing transition design. If it exists, the system will load the transition condition(s) and rule(s) from database. Or else, it will create a new blank transition page. From the database perspective, all the transition logic (rules and conditions) will be referenced to a page. [0063] 3. End-users can insert multiple rules into a page's transition. And each rule needs to have at least a condition. The relationship between Conditions is AND-ed, and relationship between rules is OR-ed. For example, if the transition logic has 2 rules and each rules has 2 conditions, their result set is as follow, Result = (Condition A AND Condition B) OR (Condition C AND Condition D). From the flow designer perspective, this means that the previous page in the flow will only be able to propagate to the existing page when the 'Result' is equal to true. [0064] 4. The condition consists of 2 operands and an operator. There are several ways to define the condition in transition designer. They are as follows, [0065] 4.1 Expressing programming logic in English-like statement. For example, button is clicked. 'Button' and 'clicked' event here are 2 operands and 'is' is the operator that creates relation between 2 operands. Compared to programming syntax, this statement is rather intuitive and easy to comprehend. [0066] 4.2 Expressing mathematical logic. For example, number 1 > number 2. 'Number 1' and 'number 2' are 2 operands and '>' is the operator that compare these 2 operands. [0067] 4.3 Expressing comparison logic. For example, string A is not null. 'String A' and 'not null' are 2 operands and 'is' is the operator that compare these 2 operands.

15 [0068] As for the complicated mathematical calculation and validation logic, end-users need to use computation designer to derive the result from the complex mathematical calculation and assign it to a variable. And, use that variable in the condition. [0069] 5. During the transition design process, end-users can either choose to exit or continue to work on the rules and conditions. However, there will be an automated saving process running from the backend to save the page's transition. [0070] And there is an important feature in the transition designer. All user-manipulable elements are source-sensitive and source-enabled Source sensitivity provides visual cues in the form of page design snapshot to inform users of the source of any element that a user wishes to manipulate. This enables user to easily visualize the source of all elements used in driving flow execution without having to name them and remember where they originated. [0071] Source-enabled provides users with the ability to "define" manipulable elements naturally as part of a page design or as a consequence of a computation. A page designed by the users in the page designer or a result from a computation defined in the computation designer becomes a source of data. It does so by allowing user to preview a page design and select the respective control element as the source of data. And if the variable is derived from a formula (which created through computation designer), then the system will show the complete formula equation in its preview. [0072] This is important because in web page design, the input value of the control elements are required to be stored for later use, used in calculation, and manipulated for viewing. Very often, programmer needs to remember their variables' name and type. As such, programmer needs to name the variable with a meaningful name. However, this is not something end-users may be able to conceptualize or willing to invest time in. They wanted something easy to use and yet expressive. Specifying computations [0073] Specifying computations method allows end-users to develop formula for transition and page designer. The newly output or result set of the created formula will be stored into a new variable that to be used in transition and page designer, and could 16 also be re-used in another application. The formula will be stored in database and be shared or available to other application as well as allowing other end-users to re-use them. Figure 7 has been intentionally removed and inserted into Drawings pages [0073a] Figure 7 depicts the activity flow of computation designer [0074] Steps taken in creating computation design: [0075] 1. End-users can click into computational designer window either through page designer or transition designer. It is a modal dialog window which the parent window can't be modified or accessed while its child window is opened. This is to prevent the end-users from making changes to the page or transition design while creating new computed element. [0075] 2. Upon opening the computational designer window, the system will load the available computed elements from database. From the database perspective, all the computed elements will be referenced to either a page or transition. [0076] 3. End-users can choose either re-use an existing element or create a new element. With the existing element, end-users can modify it and save it as a new element into database. As for the new element, end-users need to insert a list of operands and apply an operator to them. The list of operands must have at least one element. [0077] 4. When applying an operator to a computed element, the system will check the elements' variable type. If the variable types are numeric, then a numerical operation can be performed. Or else, an error message will be displayed. Operation between 2 different variable types can't be processed. For example, adding a number and a string is strictly prohibited. [0078] 5. Every computed operation will be assigned to a new operand which can be used continually for building a longer and complicated formula. There will be a formula syntax check feature. The newly created element can only be used by the pages or transitions resided in the subsequent time frame. It can't be used or called from the 17 pages or transitions resided in the previous time frame. Think about it as you can't reach out to the thing that created in future and only allowed to use thing that had been created. Element that created in the previous time frame can only be used by the subsequent pages or transitions and vice versa. [0079] 6. During the computation design process, end-users can either choose to exit or continue to work on the new formula. However, there will be an automated saving process running from the backend to save the computation design. [0080] And there is an important feature in the computational designer. Like transition designer, it also has the source-enabled element that enables end-users to preview the page design and select the control element in the page as its source of value. Besides, users can preview the derived formula by moving the mouse over the newly created variable. This allows users to create new variable and formula in less time and fewer errors with frequent feedback from this WYSIWYG design interface. Saving design specifications [0081] Saving design specifications is a method that can be triggered by either an automated timer (which running every 5 minutes) or a save action event. This process will capture all the design's flow and its content (e.g. pages, transitions, computed elements), and store them to database or a local xml file. The individual page, transition or computation's design can also be saved separately. Figure 8 has been intentionally removed and inserted into Drawings pages [0081 a] Figure 8 depicts the activity flow of saving design specifications Generating executable web pages [0082] Generating executable web pages is a method that converts the page designs (visual properties of the page and its transition logic) to executable HTML pages. Figure 9 has been intentionally removed and inserted into Drawings pages [0082a] Figure 9 depicts the activity flow of generating and deploying executable pages [0083] Steps taken in generating and deploying executable pages: 18 [0084] 1. This service retrieves flow design from database along with pages design, transitions' rule(s) and condition(s), and elements' logic and validation scripts. [0085] 2. It loops through the pages in the flow design and starts to create executable web pages in php format. For each loop/page object, it will generate 2 php pages, Display page and Redirect page. Following are the tasks, [0086] a. In the Display php page, it includes HTML tags, page validation, elements' logic and validation, pre-calculation and a redirection action which handled by JavaScript. [0087] b. Display page links to Redirect php page that used to generate and execute server side scripting, which save all the control variables' value into session. [0088] c. And, the Redirect php page also calculates the variables' value (which based on the settings of transition and computational design) and produce the next page object in the flow based on the defined rules and conditions in transition design. [0089] d. Once these 2 pages are created, they will be deployed to a folder in web server. [0090] 3. Once it is done with the looping, it ends the process. Deploying executable web pages [0091] Deploying executable web pages is a method that obtains all the executable php pages and deploys them into respective servers such as test server, deployment server and production server. The target servers' configuration and connection settings are stored in the database. They can be configured through direct changes via database script or Content Management User Interface (CMUI). Orchestrating application flow of execution 19 [0092] Orchestrating application flow of execution is a method that monitors, controls and executes the process flow of the HTML web pages during application run-time. Its functions are creating, deleting, retrieving and updating page elements' values to/from MSSQL database while maintaining the execution stage of those HTML web pages. Figure 10 has been intentionally removed and inserted into Drawings pages [0092a] Figure 10 depicts the overview of orchestration process in Execution Service Conducting unit, integration and UAT testings [0093] Testing is an important user interface that runs multiple role-specific instances of web pages simultaneously, which allows testing of multiple pages interactively. It allows multiple web application screens opened at the same time in the same interface, and allows end-users to enter values for respective application screens. The user interface then processes the input and responds with the pre-defined logic as if it is running in the actual production environment. [0094] When test analyst needs to test an application, they need to assume different roles for different functionalities. The testing path could be varied and different across multiple roles. And in normal circumstances, the testing is conducted asynchronously and interdependently. You can't perform a certain test without tested its pre-condition test case. For example, you can't submit your order without making payment. Due to the asynchronous nature of your testing, test analyst needs to be well aware of the process or sequence of testing and possibly memorizing various login details. And, this test service can help to resolve this difficulty by running multiple testing browser instances simultaneously. [0095] From the technical development support perspective, we want to conduct regression testing after deployment or code patches. It could be hard to perform a thorough regression testing within a short period of time. As such, we want to have an automated process that run to conduct regression testing from time to time. With this in place, there is no need for the development team to hire tester as designer can conduct various testing.

20 [0096] It runs multiple role-specific instances of a web application simultaneously and interactively. It allows multiple web application screens opened at the same time in the same interface, and allows end-users to enter values to respective application screens. The respective user interface then processes the input and respond with the pre-defined logic as if it is running in the actual production environment. Synchronizing design specifications [0097] Synchronizing design specifications is a method that allows end-users to work on the application's design during offline, and a local compact database will be used to store the design. Upon connected, the data in local compact database will be synchronized with the centralized SQL server database. The version control mechanism will be triggered and used to manage the various design contents, as to prevent any confusion to end-users. Figure 11 has been intentionally removed and inserted into Drawings pages [0097a] Figure 11 depicts the overview of data synchronization process

Claims (8)

1. An innovative cross-platform, cross-browser visual development, testing, and execution system comprising features that allow end-users without programming knowledge to design and develop dynamic, multi-user, multi-role web-based applications.

2. A method according to claim 1 wherein visually and naturally specifying process flow across multiple pages and multiple user roles.

3. A method according to claim 1 wherein visually designing the interface of the application.

4. A method according to claim 1 wherein specifying and validating computations without programming skills.

5. A method according to claim 1 wherein specifying rules and logic of execution flow without programming skills.

6. A method according to claim 3 wherein translating canvas-like interface design into executable web pages coded in HTML5 and client-side validation JavaScript.

7. A method according to claim 4 and 5 wherein translating computations and logic design into server-side scripts for managing interactions with users and across roles, execution flow, and data manipulation.

8. A method according to claim 1 wherein for translating data needs captured indirectly through the page, computation, and flow design into database and data manipulation logic.