Patent Application
20120324377
A web application (also known as a “web app” or “webapp”) is an application that is accessible over a network such as the Internet or an intranet. A web application may be hosted in a common web browser that renders the application. Web applications are becoming popular due to the prevalence of web browsers, and the convenience of using a web browser as a client. The ability to update and maintain web applications without distributing and installing software on potentially thousands of client computers is one reason for their popularity, as is the inherent support for cross-platform compatibility. Examples of web applications include some blogs, webmail, online retail sales, online auctions, wikis and many other functions.
Webapp development software products currently exist that may be used to develop a web application, such as Joomla!® developed by the Joomla Project Team (used to develop websites), and WordPress® (used to develop web blogs). Furthermore, development tools exist that further support the development and the publishing of web applications developed by such webapp development software products. However, current development tools are constrained in terms of user interface flexibility. Currently, a user interface for a web development tool cannot be customized for a particular web application. Instead, users have to write/provide code to provide a customized user interface. This restricts the number of users who can enhance a web application and adds complexity, because the user has to write code, and typically has to compile the code and install it onto a destination computer at which the web application resides to enhance a web application.
This Summary is provided to introduce a selection of concepts in a simplified form that are further described below in the Detailed Description. This Summary is not intended to identify key features or essential features of the claimed subject matter, nor is it intended to be used to limit the scope of the claimed subject matter.
Methods, systems, and computer program products are provided that enable the customization of user interfaces provided by web development tools for development of web applications. A customization object is provided that defines one or more customizations to the web development tool user interface. The customization object may have a format that specifies the customizations as a list of tasks that are interpretable by the web development tool. The web development tool processes the tasks to customize the web development tool user interface. The customizations to the user interface may include a grouping of items to perform a set of tasks. The customizations aid in making web application development easier by providing user interface elements that are customized for a particular web application, among other benefits.
For instance, in one implementation, a system and method for generating a customization object is provided. A user is enabled to generate a object that includes a definition of at least one user interface element. The user is enabled to include the generated object in a stored plurality of objects. The objects are configured/capable of being loaded and installed by a web development tool as an instance of a web application. The object is configured to be read by the web development tool to display the user interface element(s) as a customization to a graphical user interface displayed by the web development tool. The graphical user interface is configured to be interacted with to enable the web application to be better developed.
In another implementation, a method for customizing a user interface for a web development tool is provided. A plurality of objects that define a web application is received. The objects are determined to include a customization object that includes a definition for at least one user interface element as a customization to a graphical user interface. The customization object is parsed to receive the user interface element definition(s). A graphical user interface is generated for display that is configured to be interacted with by a user to enable the web application to be developed. The graphical user interface is generated to include the user interface element(s) based on the user interface element definition(s) as a customization to the graphical user interface.
In still another embodiment, a web development tool is provided. The web development tool includes a loader, a file parser, and a GUI (graphical user interface) generator. The loader is configured to access a plurality of objects that define a web application. If the objects include a customization object, the loader is further configured to load the customization object, which includes a definition for at least one user interface element as a customization to a graphical user interface. The file parser is configured to parse the customization object to receive the user interface element definition(s). The GUI generator is configured to generate a graphical user interface for display that is configured to be interacted with by a user to enable the web application to be developed. The GUI generator includes the user interface element(s) in the graphical user interface based on the user interface element definition(s) as a customization to the graphical user interface.
Computer program products are also described herein for enabling the customization of graphical user interfaces for web application development tools, and for further embodiments as described herein.
Further features and advantages of the invention, as well as the structure and operation of various embodiments of the invention, are described in detail below with reference to the accompanying drawings. It is noted that the invention is not limited to the specific embodiments described herein. Such embodiments are presented herein for illustrative purposes only. Additional embodiments will be apparent to persons skilled in the relevant art(s) based on the teachings contained herein.
The accompanying drawings, which are incorporated herein and form a part of the specification, illustrate the present invention and, together with the description, further serve to explain the principles of the invention and to enable a person skilled in the pertinent art to make and use the invention.
The features and advantages of the present invention will become more apparent from the detailed description set forth below when taken in conjunction with the drawings, in which like reference characters identify corresponding elements throughout. In the drawings, like reference numbers generally indicate identical, functionally similar, and/or structurally similar elements. The drawing in which an element first appears is indicated by the leftmost digit(s) in the corresponding reference number.
The present specification discloses one or more embodiments that incorporate the features of the invention. The disclosed embodiment(s) merely exemplify the invention. The scope of the invention is not limited to the disclosed embodiment(s). The invention is defined by the claims appended hereto.
References in the specification to “one embodiment,” “an embodiment,” “an example embodiment,” etc., indicate that the embodiment described may include a particular feature, structure, or characteristic, but every embodiment may not necessarily include the particular feature, structure, or characteristic. Moreover, such phrases are not necessarily referring to the same embodiment. Further, when a particular feature, structure, or characteristic is described in connection with an embodiment, it is submitted that it is within the knowledge of one skilled in the art to effect such feature, structure, or characteristic in connection with other embodiments whether or not explicitly described.
Embodiments relate to techniques for customizing the user interfaces used for development of web applications. Such embodiments enable the user interfaces to be customized on a web application-by-web application basis. Furthermore, as opposed to current techniques, embodiments do not need code to be compiled, or need code to be installed into a global assembly cache or registry. The customization may be provided as a list of tasks that may be interpreted by a web development tool.
Embodiments apply to various types of web applications. For instance, webapp development applications such as WordPress® and Movable Type® (developed by Six Apart of San Francisco, Calif.) enable the development of web blogs. Webapp development applications, including open source content management systems such as Joomla!®, Drupal®, XOOPS® (developed by the XOOPS Project), and TYPO3® (developed by the TYPO3 Association), and enterprise content management systems such as Alfresco® (developed by Alfresco Software, Inc.) enable the development of websites, including blogs. Embodiments enable user interfaces used to develop these and other types of web applications to be customized, including blogs, webmail, online retail sales, online auctions, wikis, and many other types of web applications.
A variety of web development platform tools exist that support the development of web applications, and that have user interfaces that may be customized in embodiments. For instance, Microsoft WebMatrix®, developed by Microsoft Corporation of Redmond, Wash., is a web development tool that enables developers to build web applications capable of running on Microsoft Windows®, Linux®, or other platforms. WebMatrix® includes a bundle of software/tools, integrating a web server (IIS Express) and a database engine (SQL (structured query language) Server Compact), supports code written using ASP.NET or PHP, installs and configures components such as PHP or MySQL, and enables web application publishing. WebMatrix® includes an editor, but also enables integration of available webapp development applications, such as the webapp development applications mentioned herein, and provides the integrated webapp development applications to be used to edit web applications. In another example, Google Web Toolkit™ is a development toolkit developed by Google Inc. of Mountain View, Calif., for building and optimizing complex browser-based applications. Note that WebMatrix® and Google Web Toolkit™ are mentioned herein as examples of web development tools for purposes of illustration, and further types of web development tools exist and/or may be developed that are applicable to the embodiments described herein.
Numerous exemplary embodiments of the present invention are described as follows. It noted that any section/subsection headings provided herein are not intended to be limiting. Embodiments are described throughout this document, and any type of embodiment may be included under any section/subsection.
Embodiments provide techniques for customizing user interfaces for web applications. For example, in an embodiment, a customization object such as a customization file may be added to the constituent files and/or other objects of a web application. The customization file may be loaded by a web development tool when loading the web application objects. The customization file may include one or more user interface customizations and/or other types of customizations. The web development tool may modify a user interface of the web development tool according to the user interface customizations. For instance, one or more buttons, menus, links, and/or other user interface elements may be added, removed, and/or modified according to the user interface customizations. Additionally and/or alternatively, the customization file may apply to web development tool aspects other than the user interface. For instance, the customization file may provide an indication of where to store new files for a web application, may indicate a type of image and/or other media object that may be created for the web application, may indicate how web application files may be encoded, may provide information about a database associated with the web application, and/or may provide further information. In this manner, a user experience during development of a web application may be improved.
Such embodiments may be implemented in a variety of environments. For instance,
Computing device 102 may be any type of stationary or mobile computing device, including a desktop computer (e.g., a personal computer, etc.), a mobile computer or computing device (e.g., a Palm® device, a RIM Blackberry® device, a personal digital assistant (PDA), a laptop computer, a notebook computer, a tablet computer (e.g., an Apple iPad™), a netbook, etc.), a mobile phone (e.g., a cell phone, a smart phone such as an Apple iPhone, a Google Android™ phone, etc.), or other type of mobile device. Publication server 104 may be implemented in one or more computer systems, including one or more servers, which may be any type of computing device described herein or otherwise known that is capable of enabling the corresponding functionality described herein.
Computing device 102 and publication server 104 are communicatively coupled by network 112. Network 112 may include one or more communication links and/or communication networks, such as a PAN (personal area network), a LAN (local area network), a WAN (wide area network), or a combination of networks, such as the Internet. Computing device 102 and publication server 104 may be communicatively coupled to network 112 using various links, including wired and/or wireless links, such as IEEE 802.11 wireless LAN (WLAN) wireless links, Worldwide Interoperability for Microwave Access (Wi-MAX) links, cellular network links, wireless personal area network (PAN) links (e.g., Bluetooth™ links), Ethernet links, USB links, etc.
A single computing device 102 is shown in
Web development tool 108 is a web development tool configured to enable developers to build and publish web applications on various computing platforms, such as one or more of Microsoft Windows®-based computer systems, Linux-based computer systems, etc. For instance, a user of computing device 102 may develop a web application using webapp development application 110 implemented by computing device 102. Webapp development application 110 may be implemented in a browser at computing device 102 (e.g., as a plug-in, add-in, a browser-based editor, etc.), may be made accessible by a browser at computing device 102, or may be implemented separately from a browser at computing device 102. Webapp development application 110 may be a proprietary or commercially available webapp development application such as WordPress®, Movable Type®, Joomla!®, Drupal®, XOOPS®, TYPO3®, etc. Webapp development application 110 may generate a web application 130 by generating a folder 118 in storage 106 that contains objects 120. Objects 120 include a plurality of objects (e.g., files, data, etc.) that make up web application 130. For instance, objects 120 may include servlets, HTML (hypertext markup language) pages (e.g., an “index.html file”, etc.), classes, image files (e.g., .gif files, .jpg files, etc.), XML (extensible markup language) files (e.g., .xml files), PHP files (e.g., .php files), a database such as a MySQL database (e.g., .sql files), and/or further types of objects. Objects 120 may include web application-specific objects.
A user may develop web application 130, generating objects 120, using webapp development application 110, which may or may not be provided by web development tool 108. Web development tool 108 may be invoked to open folder 118 to enable the user to further develop web application 130 and/or to publish web application 130 to a remote server (e.g., as published web application 126 published to publication server 104). For instance, web development tool 108 may generate a user interface. The user interface may include one or more default user interface elements that enable a user to develop and/or otherwise interact with web application 130.
As shown in
Customization file 114 may have various forms in embodiments, including being another type of object such as table, a list, another type of data structure, etc., and may include content that is arranged in any manner. For instance,
As shown in
In an embodiment, when web development tool 108 of
Furthermore, as shown in
Although four custom UI elements 304a-304d are shown in
Example embodiments are further described in the following subsections. For instance, the next subsection describes example embodiments for customization file 200 of
As described above, customization file 200 of
The above example contents of customization file 200 may be provided in an XML document (e.g., XML version 1.0) for customization file 200. Furthermore, the above example of customization file 200 is configured to be loaded by a web development tool indicated as “WebDevelopmentTool”.
In the above example, several GUI customizations are provided by corresponding custom UI element definitions in a section indicated for customizations as “Configure”. The GUI customizations include a first custom UI element definition indicated as “AddDashboardItem”, a second custom UI element definition indicated as “AddRibbonGroup”, and a third custom UI element definition indicated as “FileProtection”.
The first custom UI element definition for “AddDashboardItem” is a definition for a UI element to be added to a dashboard space of the web development tool GUI. As indicated above, the first custom UI element definition for “AddDashboardItem” has a name or title of “Product help” and a description of “Click this button to go to the product help page” that are displayed in the GUI. The title and description are selectable as a link in the GUI, and a URI (uniform resource indicator) is provided in the first custom UI element definition of “http://www.mywebapp.com/producthelp” that is traversed as an action if the title/description are interacted with (e.g., clicked on) by a user in the GUI.
The second custom UI element definition for “AddRibbonGroup” is a definition for a UI ribbon group element that is to be added to a ribbon space of the web development tool GUI. As indicated above, the second custom UI element definition for “AddRibbonGroup” has a name or label of “MyApplication Links” and includes first and second added buttons. The first button has a label of “Click this button for help setting up MyApplication” and a URI of “http://www.mywebapp.com/appsetup/” that is traversed as an action if the first button is interacted with by a user. The second button has a label of “Click this button for help customizing MyApplication” and a URI of “http://www.mywebapp.com/appsetup/” that is traversed as an action if the second button is interacted with by a user.
The third custom UI element definition for “FileProtection” is a definition for protections to be provided to directories and/or individual files displayed in a file navigation UI element in the GUI of the web development tool. For instance, the file navigation UI element may show one or more folders in a directory structure, and the files contained therein, and the folders may be expandable and/or collapsible. The “FileProtection” custom UI element definition may enable protections to be provided and displayed for the folders and files. For instance, as indicated above, the third custom UI element definition indicates that protection is to be applied to folder/files of a “Core” directory, as indicated by the “ProtectPath” protection indication. The third custom UI element definition indicates that protection is to be applied to folder/files of an “AppData” directory, as indicated by the “ProtectPath” protection indication. Furthermore, the third custom UI element definition indicates that protection is not to be applied to folder/files of a “UserData” directory, as indicated by the “UnprotectPath” protection indication.
Note that this example of customization file 200 is provided for purposes of illustration, and is not intended to be limiting. Any number and type of custom UI element definitions may be provided in various embodiments of customization file 200, as would be apparent to persons skilled in the relevant art(s) from the teachings herein. Further types of custom UI element definitions may be provided for any type of custom UI element, such as windows (e.g., AddWindow), menus (e.g., AddPulldownMenu), check boxes (e.g., AddCheckBox), text entry boxes (e.g., AddTextBox), menu entries (e.g., AddMenuEntry), a new ribbon (e.g., AddNewRibbon), tabs (e.g., AddTab), etc. Each custom UI element definition may include any number of features described above or otherwise known, such as names/labels, descriptions, actions, etc.
Web development tool 108 (
Ribbon 404 is a user interface element that includes a set of toolbars places on tabs in a tab bar. Any number of tabs may be present. As shown in
Directory pane 406 includes a hierarchical tree of folders, where each folder may store respective files and/or additional folders. Each folder displayed in directory pane 406 may be selected to display any files/folders stored therein, and each file may be selected to open the file. In the example of
Dashboard region 408 indicates a URL for a website being developed (e.g., URL: http/localhost:8080) and a path to the website files (e.g., C:\users\smith\documents\Website1). Furthermore, dashboard region 408 includes one or more interactive items. For instance, dashboard region 408 includes a dashboard item 412, which functions similarly to a button. Dashboard item 412 includes a title “Manage databases” and a description “Create a new database or add an existing one to your website.” If dashboard item 412 is interacted with (e.g., clicked on), the web development tool may navigate to a link associated with dashboard item 412. For instance, the web development tool may open a web page in a browser corresponding to the link.
In embodiments, a customization file may be read by the web development tool when opening a web application to cause customizations to be provided to the web development tool GUI.
For instance, web development tool 108 of
As shown in
Dashboard region 408 includes a new dashboard item element 504 generated according to the above-described custom UI element definition “AddDashboardItem” with title “Product help” and description “Click this button to go to the product help page.” If dashboard item element 504 is interacted with (e.g., clicked on), the web development tool may navigate according to the link “http://www.mywebapp.com/producthelp” that is associated with element 504 as an action.
Directory pane 406 includes new protections provided to directories and/or individual files generated according to the above-described UI element definition “FileProtection.” As shown in the example of
As such, customizations to a web development tool GUI may be provided by a customization file read by the web development tool when opening a particular web application. Note that the number and type of customizations described in the examples above are provided for purposes of illustration, and are not intended to be limiting. Any number and type of customizations may be provided to a GUI by definitions in a customization file.
For example, a customization file may include definitions configured to delete default UI elements. The customization file may include deletion definitions, such as “DeleteRibbonGroup” to delete a specified default ribbon group, “DeleteDashboardItem” to delete a specified default dashboard item, and/or other deletion definitions for UI elements described herein or otherwise known. Furthermore, a customization file may include definitions configured to modify default UI elements. The customization file may include modification definitions, such as “ModifyRibbonGroup” to modify a specified default ribbon group (e.g., adding, renaming, and/or removing buttons, etc.), “ModifyDashboardItem” to modify a specified default dashboard item (e.g., providing a new title, revising a description, changing a link, etc.), and/or other modification definitions for UI elements described herein or otherwise known.
In embodiments, customization files (e.g., customization file 114 of
For instance,
Flowchart 600 begins with step 602. In step 602, a user is enabled to generate a file that includes a definition of at least one user interface element. For example, in an embodiment, editor 702 of
For instance,
In step 604, the user is enabled to include the generated file in a stored plurality of objects. For example, as shown in
In embodiments, customized GUIs, such as GUI 500 of
Flowchart 1000 begins with step 1002. In step 1002, a plurality of objects is received that define a web application, the objects including a customization file. For example, as shown in
As described above, objects 120 define a web application. Furthermore, as described above, customization file 114 may be present in objects 120. For example, customization file 114 may have been placed in folder 118 as described above with respect to
In step 1004, the customization file is parsed to receive the at least one user interface element definition. As shown in
In step 1006, a graphical user interface is generated to include the at least one user interface element based on the at least one user interface element definition as a customization to the graphical user interface. For example, as shown in
For instance, in an embodiment, GUI generator 1106 may receive default UI information 1122, which includes information to enable GUI 1108 to be displayed without customization. GUI generator 1106 may process default UI information 1122 with each custom user interface element definition indicated in custom user interface element(s) 1110 (e.g., in a serial or parallel fashion) to modify the default GUI with the corresponding customizations. For instance, GUI generator 1106 may perform a custom UI element definition/task (e.g., execute the definition code, etc.) to modify the default GUI accordingly. In this manner, custom user interface element(s) 1110 may be displayed in GUI 1108. Examples of custom user interface element(s) 1110 are described above, including first-fourth custom UI elements 304a-304d, ribbon group element 502, dashboard item element 504, graphical UI protection elements 510, etc.
In this manner, web development tool 1120 may customize GUI 1108 with custom user interface element(s) 1110. Furthermore, each time that web development tool 1120 is used to operate on the web application corresponding to objects 120, web development tool 1120 (e.g., customization file loader 1114) may determine whether customization file 114 is present, and if so, may perform the indicated customizations. Customization file 114 may be modified (e.g., by editor 702 of
Web development tool 108, editor 702, text editor 802, GUI editor 902, web development tool 1120, web application loader 1102, file parser 1104, GUI generator 1106, flowchart 600, and flowchart 1000 may be implemented in hardware, software, firmware, or any combination thereof. For example, web development tool 108, editor 702, text editor 802, GUI editor 902, web development tool 1120, web application loader 1102, file parser 1104, GUI generator 1106, flowchart 600, and/or flowchart 1000 may be implemented as computer program code configured to be executed in one or more processors. Alternatively, web development tool 108, editor 702, text editor 802, GUI editor 902, web development tool 1120, web application loader 1102, file parser 1104, GUI generator 1106, flowchart 600, and/or flowchart 1000 may be implemented as hardware logic/electrical circuitry. For instance, in an embodiment, one or more of web development tool 108, editor 702, text editor 802, GUI editor 902, web development tool 1120, web application loader 1102, file parser 1104, GUI generator 1106, flowchart 600, and/or flowchart 1000 may be implemented in a system-on-chip (SoC). The SoC may include an integrated circuit chip that includes one or more of a processor (e.g., a microcontroller, microprocessor, digital signal processor (DSP), etc.), memory, one or more communication interfaces, and/or further circuits and/or embedded firmware to perform its functions.
As described above, web development tool 108 may generate one or more user interfaces. For instance, web development tool 108 may enable user input to be provided from one or more of any type of user interface elements provided by computing device 102, including a keyboard, a thumb wheel, a pointing device, a roller ball, a stick pointer, a touch sensitive display, any number of virtual interface elements, a voice recognition system, etc.
As shown in
Computer 1200 also has one or more of the following drives: a hard disk drive 1214 for reading from and writing to a hard disk, a magnetic disk drive 1216 for reading from or writing to a removable magnetic disk 1218, and an optical disk drive 1220 for reading from or writing to a removable optical disk 1222 such as a CD ROM, DVD ROM, or other optical media. Hard disk drive 1214, magnetic disk drive 1216, and optical disk drive 1220 are connected to bus 1206 by a hard disk drive interface 1224, a magnetic disk drive interface 1226, and an optical drive interface 1228, respectively. The drives and their associated computer-readable media provide nonvolatile storage of computer-readable instructions, data structures, program modules and other data for the computer. Although a hard disk, a removable magnetic disk and a removable optical disk are described, other types of computer-readable storage media can be used to store data, such as flash memory cards, digital video disks, random access memories (RAMs), read only memories (ROM), and the like.
A number of program modules may be stored on the hard disk, magnetic disk, optical disk, ROM, or RAM. These programs include an operating system 1230, one or more application programs 1232, other program modules 1234, and program data 1236. Application programs 1232 or program modules 1234 may include, for example, computer program logic for implementing web development tool 108, editor 702, text editor 802, GUI editor 902, web development tool 1120, web application loader 1102, file parser 1104, GUI generator 1106, flowchart 600, and/or flowchart 1000 (including any step of flowcharts 600 and 1000), and/or further embodiments described herein.
A user may enter commands and information into the computer 1200 through input devices such as keyboard 1238 and pointing device 1240. Other input devices (not shown) may include a microphone, joystick, game pad, satellite dish, scanner, or the like. These and other input devices are often connected to processor 1202 through a serial port interface 1242 that is coupled to bus 1206, but may be connected by other interfaces, such as a parallel port, game port, or a universal serial bus (USB).
A display device 1244 is also connected to bus 1206 via an interface, such as a video adapter 1246. In addition to the monitor, computer 1200 may include other peripheral output devices (not shown) such as speakers and printers.
Computer 1200 is connected to a network 1248 (e.g., the Internet) through an adaptor or network interface 1250, a modem 1252, or other means for establishing communications over the network. Modem 1252, which may be internal or external, is connected to bus 1206 via serial port interface 1242.
As used herein, the terms “computer program medium,” “computer-readable medium,” and “computer-readable storage medium” are used to generally refer to media such as the hard disk associated with hard disk drive 1214, removable magnetic disk 1218, removable optical disk 1222, as well as other media such as flash memory cards, digital video disks, random access memories (RAMs), read only memories (ROM), and the like. Such computer-readable storage media are distinguished from and non-overlapping with communication media (do not include communication media). Communication media typically embodies computer-readable instructions, data structures, program modules or other data in a modulated data signal such as a carrier wave. The term “modulated data signal” means a signal that has one or more of its characteristics set or changed in such a manner as to encode information in the signal. By way of example, and not limitation, communication media includes wireless media such as acoustic, RF, infrared and other wireless media. Embodiments are also directed to such communication media.
As noted above, computer programs and modules (including application programs 1232 and other program modules 1234) may be stored on the hard disk, magnetic disk, optical disk, ROM, or RAM. Such computer programs may also be received via network interface 1250 or serial port interface 1242. Such computer programs, when executed or loaded by an application, enable computer 1200 to implement features of embodiments of the present invention discussed herein. Accordingly, such computer programs represent controllers of the computer 1200.
The invention is also directed to computer program products comprising software stored on any computer useable medium. Such software, when executed in one or more data processing devices, causes a data processing device(s) to operate as described herein. Embodiments of the present invention employ any computer-useable or computer-readable medium, known now or in the future. Examples of computer-readable mediums include, but are not limited to storage devices such as RAM, hard drives, floppy disks, CD ROMs, DVD ROMs, zip disks, tapes, magnetic storage devices, optical storage devices, MEMs, nanotechnology-based storage devices, and the like.
While various embodiments of the present invention have been described above, it should be understood that they have been presented by way of example only, and not limitation. It will be understood by those skilled in the relevant art(s) that various changes in form and details may be made therein without departing from the spirit and scope of the invention as defined in the appended claims. Accordingly, the breadth and scope of the present invention should not be limited by any of the above-described exemplary embodiments, but should be defined only in accordance with the following claims and their equivalents.
