PIXEL PERFECT REAL-TIME WEB APPLICATION FRAMEWORK
Gespeichert in:
| Titel: | PIXEL PERFECT REAL-TIME WEB APPLICATION FRAMEWORK |
|---|---|
| Document Number: | 20180285328 |
| Publikationsdatum: | October 4, 2018 |
| Appl. No: | 15/475089 |
| Application Filed: | March 30, 2017 |
| Abstract: | A system and methods for a real-time web application framework including a server controlled real-time web application with synchronized server components mapped to client widgets, a method for modal execution support in a real-time web application environment, a pixel perfect designer having a designer, an image renderer, and server components, the image renderer configured to render a client widget based on the properties of a server component, and a theming system implemented by the real-time web application during run-time. |
| Claim: | 1. A method of providing a real-time web application, comprising: mapping one or more server components to a plurality of corresponding client widgets, and synchronizing, with a middleware, each of the server components with the corresponding client widget. |
| Claim: | 2. The method according to claim 1, wherein the mapping the one or more server components further comprises: providing within the one or more server components, a map between properties of the components and properties of the corresponding client widgets, resulting in mapped properties wherein the mapped properties of each server component include a unique identifier and a class name of the corresponding client widget. |
| Claim: | 3. The method according to claim 1, wherein the synchronizing each of the server components with the corresponding client widget includes: receiving and processing, by a server, a state and event request message, the message comprising: state data of the client widgets, wherein the state data contains differential state data of each client widget running in the application, the differential state data reflecting changes occurred in each of the client widgets since a previous state and event message, and event data, wherein the event data includes a collection of triggered registered events, the client's pointer location, key code state, widget-specific data, and event specific data; and updating, in memory, the server components based on the differential state data of each of the corresponding client widgets; dispatching each triggered registered event to a corresponding server component, the server component corresponding to the client widget in which the registered event was triggered; processing and executing application specific instructions in a handler, each triggered registered event having a corresponding handler; determining, based on the state data and event data, whether each of the server components must be modified, or destroyed, or a new server component must be created, resulting in a collection of dirty components; updating, in memory, the state properties of each of the client widgets, wherein the state properties represent a last known state of each of the client widgets; and preparing and sending a state and event response message, to a client, the message including updated widget definitions, and a list of instructions based on the collection of dirty components, the list instructing the client to modify or destroy existing client widgets or create new client widgets, wherein the message is formatted in JSON format and the client does not change appearance of the web application unless instructed to by the server. |
| Claim: | 4. The method according to claim 1, further comprising loading the web application, by a server, the loading including: receiving, from a client, a request to load the web application; collecting resources belonging to the web application; loading, in server memory, the web application, the web application having one or more server components; defining one or more client widgets corresponding to each of the server components of the web application, resulting in definitions for the one or more client widgets, the definitions including widget state properties, events, identifiers, and class data; storing, in memory, the widget state properties of each of the client widgets, wherein the state properties represent a last known state of each of the client widgets; registering for events, resulting in a set of registered events that the client shall be instructed to notify the server about; generating instructions, for a client, the instructions including actions for the client to create the one or more client widgets according to the definitions in a client browser; packaging an application load response, the application load response containing the instructions, the definitions, and the registered events; and sending, to the client, the application load response. |
| Claim: | 5. The method according to claim 1, further comprising instructing, by the server, the client to load resources, the instructing including: receiving a bootstrap request from the client, the bootstrap request containing client data, the data including browser type and capabilities, client system information, and application information; determining system resources and application specific resources that a client requires, based on the client data; packaging in a bootstrap response, the system resources and application specific resources required by the client, in the form of URLs to the client; and sending to the bootstrap response to the client. |
| Claim: | 6. The method according to claim 4, further comprising processing, by a client, the application load response, the processing including: receiving the application load response; and executing the instructions in the application load response, resulting in updates to existing client widgets or newly created client widgets, the updates and newly created client widgets according to the definitions in the application load response. |
| Claim: | 7. The method according to claim 1, wherein the synchronizing each of the server components with the corresponding widget comprises: listening, by a client, for a triggering of registered events, the registered events belonging to client widgets; responding, by a client, to the triggering, the responding comprising: pausing the web application in a browser, gathering event data, the event data including client system data, client input device states, event-specific information and client widget-specific information, entering the event data in an event request queue, setting an event request timer for 20 to 100 milliseconds, and resuming the web application in the browser; and responding, by a client, to the event request timer, asynchronously, comprising: determining if there is any pending event data in the event request queue, removing any pending event data from the event request queue, and producing differential widget data, the producing comprising: collecting a current value of the state properties from each of the widgets identified in the list of changed widgets resulting in a collection of current values, and determining each difference between each current value with a previously stored value of each widget in the list of changed widgets, resulting in differential widget data; packaging any pending event data and differential widget data into a state and event request message, and sending the state and event request message and the differential widget data to the server. |
| Claim: | 8. The method according to claim 1, wherein the synchronizing each of the server components with the a corresponding widget includes: listening and processing, by a client, of a state and event response message from the server, the listening and processing comprising: executing a list of instructions in the state and event response message, the executing resulting in newly created client widgets or updates to existing client widgets, the updates and newly created client widgets according to widget definitions contained in the state and event response message. |
| Claim: | 9. The method according to claim 3, wherein the state and event message further comprises instructions to begin modal execution, and the receiving and processing, by the server, further comprises: creating, by the server, a first thread to process the state and event request message; pausing, by the first thread, the processing and execution of the application specific instructions at the point where a modal event instruction is encountered; creating and activating, by the first thread, a modal server component; adding to the state and event response message, instructions to create a modal client widget, the modal client widget corresponding to the modal server component; suspending execution and waiting, by the first thread, for the modal server component to be deactivated; creating, by the server, an additional thread to receive and process an additional state and event request message, upon receipt of the additional state and event request message, the additional message including instructions to end modal execution; deactivating, by the additional thread, the modal server component, resulting in a release of the first thread; suspending execution and waiting, by the additional thread, for the modal component to become unlocked; waking and locking, by the first thread, the modal component; resuming, by the first thread, the processing and executing application specific instructions at the point where the first thread was previously paused; unlocking, by the first thread, the modal component, resulting in the release of the additional thread; and updating and sending, by the additional thread, a subsequent state and event response message, the subsequent message including instructions to terminate the modal widget. |
| Claim: | 10. A method of providing a dynamic, customizable theming system for a web application comprising: creating a theme file, the theme file being a single file and not multiple combined files, in JSON format; defining in the theme file, a theme name, settings, fonts, colors, images and appearances; and converting the theme file into a JavaScript dynamic code that is executed by a client during run-time of the web application; wherein: the settings comprises general system and application specific information including whether or not scrollbars will be displayed and frame padding widths, the fonts comprises an indirection map, mapping differently named fonts to sets of font information, the font information including font type, font size, bold, italic, and url source information, the colors comprises an indirection map, mapping named colors to specific colors that the client may use to draw the named colors, the images defines named images that can be reused in the theme file or web application, mapping named images to defined image sources, the appearances define styles and properties grouped by key names and states, each key name capable of reuse by the web application or widget to determine which styles or properties to use in relation to a state or combination of states, the styles being values that apply to entire widgets using a CSS class system, properties being values that are assigned to a widget property with the same name and capable of being overridden in a specific widget instance, and each appearance of the appearances is capable of being a parent appearance, the parent appearance containing child appearances, the child appearances limited in scope to the child widgets of a widget using the parent appearance. |
| Claim: | 11. A method of generating and displaying pixel perfect representations of web application controls in design-mode, comprising: storing, in computer memory, at least one control having at least one graphical component; storing, in computer memory, at least one image renderer, wherein the at least one image renderer is a rendering engine capable of rendering marked up content; configuring the at least one image renderer to receive a defined set of properties and render a digital image based upon the defined set of properties; storing, in computer memory, at least one designer capable of designing a web application, the at least one designer having a display area configured to display a graphical representation of the web application; defining properties within the at least one control, the properties enabling the at least one image renderer to render a corresponding image file based on the properties; and configuring the at least one designer to call the image renderer, in design-mode and without running the web application, to generate at least one digital image of the at least one graphical component of the at least one control. |
| Claim: | 12. The method of claim 11, wherein the generating further comprises: determining, with the computer, when a user of the designer has added a new control to the web application or has changed a visual property of an existing control of the web application, responding, if the determination is positive, comprising: generating and collecting a set of properties from the at least one control, based on the properties of the control and the needs of a run-time web client, entering, into a computer queue, at least one rendering request for the change in visual property of the at least one control, the rendering request having the set of properties, processing, with a computer, the rendering requests in the computer queue asynchronously, comprising: finding and removing the rendering request from the queue, preparing a widget message definition describing the set of properties of the at least one graphical component, the message definition being in JSON format, generating, with the at least one image renderer, an image based on the widget message definition; signaling, with the at least one image renderer, a Rendering Complete signal to the designer updating, with the designer, the display area by displaying the rendered image in the display area. |
| Current International Class: | 06; 06; 04; 04; 06 |
| Dokumentencode: | edspap.20180285328 |
| Datenbank: | USPTO Patent Applications |
Schreiben Sie den ersten Kommentar!