Abstract:
The instant application discloses, among other things, techniques to allow simplified user interface element-based development, allowing users unskilled in conventional programming languages to produce applications by setting attributes, layout, and behaviors for user interface element.

Description:
FIELD 
       [0001]    This disclosure relates to User Interface Element-Based Development. 
       BACKGROUND 
       [0002]    As computers become more powerful and user interfaces evolve, consistency becomes more and more important. For example, Microsoft Windows 8 (™ Microsoft) uses User Interface (UI) Elements on screen called “tiles” to provide a common way to access functionality from different applications. 
         [0003]    UI Element-based applications are general written in C#, C++, Visual Basic, or other conventional programming languages. 
       SUMMARY 
       [0004]    The instant application discloses, among other things, techniques to allow simplified UI Element-Based Development, allowing users unskilled in conventional programming languages to produce applications, optionally using a touch interface. 
         [0005]    A set known as a template may consist of UI Elements, which may have display attributes, behaviors, and links to other UI Elements or templates. Web pages, web parts, mobile applications, scorecards, such as Balanced Scorecard (BSC), dashboards such as key performance indicators (KPI), PowerPoint®, blueprints, prototypes, or other types of applications or devices may be targeted. 
         [0006]    Standards for layout may also help provide consistency for end users, and templates may be designed to enforce UI design standards or best practices. 
     
    
     
       BRIEF DESCRIPTION OF THE DRAWINGS 
         [0007]      FIG. 1  is an example of a system on which UI Element-Based Development may be implemented according to one embodiment. 
           [0008]      FIG. 2  is an example of a scorecard developed using UI Element-Based Development according to one embodiment. 
           [0009]      FIG. 3  illustrates an example of inputs that may be used for a UI Element. 
           [0010]      FIG. 4  illustrates an example of a set of UI Elements with various inputs and display attributes. 
           [0011]      FIG. 5  illustrates a Property Window according to one embodiment. 
           [0012]      FIG. 6  is an example of a system on which UI Element-Based Development may be implemented according to another embodiment. 
           [0013]      FIG. 7  is an example of a scorecard developed using UI Element-Based Development according to another embodiment. 
           [0014]      FIG. 8  is an example of a scorecard developed using UI Element-Based Development according to yet another embodiment. 
           [0015]      FIG. 9  is an example of a scorecard developed using UI Element-Based Development according to yet another embodiment. 
           [0016]      FIG. 10  illustrates a component diagram of a computing device according to one embodiment. 
       
    
    
     DETAILED DESCRIPTION 
       [0017]    A more particular description of certain embodiments of UI Element-Based Development may be had by references to the embodiments shown in the drawings that form a part of this specification, in which like numerals represent like objects. 
         [0018]      FIG. 1  is an example of a system on which UI Element-Based Development may be implemented. A user may design UI Element-Based Application on User Device  110 . Software supporting UI Element-Based Development may be local to User Device  110 , or may be hosted on Server  130 . Various types of software may be used for UI Element-Based Development, including but not limited to native software running on User Device  110 , client-server server software running on User Device  110  and Server  130 , or software running on Server  130  and serving web pages to User Device  110 . In this example, User Device  110  may be used to originate a request for UI Element-Based Development to be performed and send it via Network  120  to Server  130 . Network  120  may be a local area network, or it may include the Internet. Any type of communication link may be used, or all processing may occur on one device. Other types of data transfer may also be used, such as loading information from User Device  110  onto a portable drive and loading the information onto Server  130 . 
         [0019]    Server  130  may include one or more computers, and may serve a number of roles, including, but not limited to, storing content and attributes, manipulating content and attributes, and serving content. For example, in one embodiment, Server  130  may include a database with tables to store information about users, user devices, projects, articles, content elements, layouts, layout definitions, and other data that may be relevant to User Interface Element-Based Development. 
         [0020]    One skilled in the art will recognize that User Device  110  and Server  130  may be of different designs and capabilities. 
         [0021]      FIG. 2  is an example of a scorecard developed using UI Element-Based Development according to one embodiment. In this example, UI Elements are illustrated for Safety, Quality, Productivity, Human Development, Cost, Sales, and Net Revenue. The UI Elements may indicate a percentage of a goal for each metric displayed. In this example, Safety is 100% of goal, Quality 85%, Productivity 70%, Human Development 80%, Cost 105%, Sales 90%, and Net Revenue 85%. 
         [0022]    A one or more UI Elements may be combined in a template. A template for a scorecard, for example, may be reused for any number of scorecards with different data sources. Other templates may include UI Elements for other topics, or may be a set of UI Elements a user wants to use. Templates may store any attributes about each of the UI Elements, including height, width, shape, style, content, data source, position, behaviors, or any other attributes the UI Element supports. 
         [0023]    A template may be run, where the UI Elements will respond to events and run behaviors, during design. A runtime environment may include an interpreter to execute various behaviors when UI Elements are selected. 
         [0024]    Standards may be enforced to provide a consistent appearance for templates. Standards may apply to any attributes UI Elements support, as well as attributes of templates such as the distance between UI Elements, which types of UI Elements may be displayed, or any other attributes relevant to a template. Standards may be developed by a user who designed a template, by administrators of a server hosting the template, by software hosting the template (such as Microsoft Windows®), by a stakeholder of the template, or by any other interested party. 
         [0025]    In one embodiment, a UI Element may be selected and placed by selecting it from a list, selecting a template containing one or more UI Elements, or dragging and dropping from a source. One having skill in the art will recognize that any way of designing layouts maybe used in other embodiments. 
         [0026]    UI Elements may have different shapes and sizes. In this example, UI Elements are rectangular tiles, but in other embodiments, they may be square, rectangular, round, oval, triangular, or other shapes. Shapes may also be mixed within an application. 
         [0027]      FIG. 3  illustrates an example of inputs that may be used for a UI Element. In this example, a Cost UI Element  310  may obtain data from a Data Store  320 , and use these data to determine what to display. Cost of Goods  330 , Labor Cost  340 , and Shipping Costs  350  may contribute to the overall cost of an item. In view of these and a Target Total Cost  360 , Cost UI Element  310  may calculate and display a percentage of the target cost (in this example 105%), it may display a color such as red, yellow, or green, depending on preset limits and the calculated percentage, or it may provide other indicators. 
         [0028]    UI Elements may respond to actions, which may include touching, clicking, dragging, selecting, double clicking, stretching, zooming, grouping, or any other ways to interact with UI Elements. 
         [0029]    In this example, Cost UI Element  310  is square, but in another embodiment, a UI Element could be a different shape. In yet another embodiment, a UI Element may also be dynamic, with what is displayed changing over time. 
         [0030]    In one embodiment, the attributes of a UI Element may be data driven. In this embodiment, attributes related to data may include size, shape, color, image, video, connections to other UI elements, actions, behaviors, or any other attributes. As an example, data may include information about an organizational structure. UI Elements may be displayed reflecting the information, with connections illustrating the organizational structure. Other related data items may also have connectors automatically included on corresponding UI Elements. 
         [0031]    UI Elements may also host other UI Elements. For example, a scorecard UI Element may display several bars displaying various data which are included in an aspect of the scorecard. 
         [0032]      FIG. 4  illustrates an example of a set of UI Elements with various inputs and display attributes. Display  410  may display UI Elements for email  420 , Calendar  430 , Finance  440 , Shopping  450 , Weather  460 , and Pictures  470 . 
         [0033]    Email UI Element  420  may display a static image of a latest email. It may also have a dynamic display with scrolling email. Email UI Element  420  may change colors depending on attributes of email it is displaying; for example, it may change colors based on who sent the email, or based on an urgent flag for the email. One having skill in the art will recognize that many different behaviors may be performed by a UI Element to indicate attributes of its content. 
         [0034]    Calendar UI Element  430  may show meetings, appointments, or other time-based events, again with various attributes based on the content displayed. For example, the color of Calendar UI Element  430  may change as a meeting time draws near, or a birthday reminder may get a colorful pattern, or a sound may be played. 
         [0035]    Finance UI Element  440  may show the biggest movers of a user&#39;s portfolio. Increases and decreases may have different colors. Again, many different attributes may be used to indicate information about content. 
         [0036]    Pictures UI Element  470  may display a static picture, or may display a slide show of a selection of pictures. 
         [0037]    One having skill in the art will recognize that a UI Element may provide information using many different attributes, actions, or features, including, but not limited to, text, images, videos, colors, patterns, movement, and sounds. 
         [0038]      FIG. 5  illustrates a Property Window  510  according to one embodiment. Property Window  510  may have multiple tabs; in this example there are three tabs: Basic, Advanced, and Data. 
         [0039]    The Basic tab is shown, having prompts and text boxes to allow the setting of various properties (attributes) of a UI Element. In this example, the UI Element has a title with the value of RGen, a title color of red, and a title icon named “Person,” which is a symbol of a person. The ability to browse to select an icon is available. There is also a behavior with a URL which will open in a new window when the UI Element is clicked. 
         [0040]    Once a property is set, a user may click the Apply, Reset, or Close buttons, which applies a property change to the UI Element, resets the properties to previous values, or close the Property Window  510  respectively. 
         [0041]    Other tabs may provide different properties, which may be typed, selected form a list, browsed to, or any other way of selecting them. 
         [0042]    One having skill in the art will recognize that properties may have many different ways of being set and tested, and that there may be different UI designs to allow setting properties. 
         [0043]      FIG. 6  is an example of a system on which UI Element-Based Development may be implemented according to another embodiment. User Device  610  may be used to view an output from UI Element-Based Development. A user may design UI Element-Based Application on User Device  110 . The developed application may be stored on Server  130 . In one embodiment, User Device  610  may run software allowing it to view UI Element-Based Applications natively. User Device  610  or Server  130  may allow searching for 
         [0044]    In another embodiment, User Device  110  or Server  130  may export UI Element layouts and attributes as HTML, which User Device  610  may use a web browser to view. In other embodiments, User Device  110  or Server  130  may export UI Element layouts and attributes as SharePoint® web parts, or PowerPoint® or other presentation software slides. One having skill in the art will recognize that there are many formats to which UI Element layouts and attributes may be exported. Some formats may allow interactivity, while others may provide a static image. 
         [0045]      FIG. 7  is an example of a scorecard developed using UI Element-Based Development according to another embodiment. In this example, a progress bar may be used to illustrate a difference between an actual result and a target. Risk Management Tile  710  illustrates an Actual value of 50 and a Target value of 75, with a progress bar approximately two-thirds filled. Similarly, Identity Program Tile  720  shows an Actual value of 60 and a Target of 120, with a progress bar halfway filled. 
         [0046]      FIG. 8  is an example of a scorecard filter, using UI Element-Based Development according to yet another embodiment. In this example, a property window may be used to provide filtering and formatting for a scorecard. Various properties, including an objective, a status color, a period the scorecard is for, a range of values, and the upper and lower limit desired within the range may be set. These properties may then apply to other UI Elements making up a scorecard. 
         [0047]      FIG. 9  is an example of a scorecard developed using UI Element-Based Development according to yet another embodiment. In this example, user interface elements for Risk Management  910 , Identity Program  920 , Delivery  930 , and Strategy  940  illustrate respective values with percentages and arrows. 
         [0048]    One having skill in the art will recognize that there are many different formats of scorecards, with many different possible values, which may be designed, displayed, and executed using User Interface Element-Based Development. 
         [0049]      FIG. 10  illustrates a component diagram of a computing device according to one embodiment. The Computing Device ( 1300 ) can be utilized to implement one or more computing devices, computer processes, or software modules described herein, including, for example, but not limited to User Device  110 ,  610 , or a Server  130 . In one example, the Computing Device ( 1300 ) can be utilized to process calculations, execute instructions, receive and transmit digital signals. In another example, the Computing Device ( 1300 ) can be utilized to process calculations, execute instructions, receive and transmit digital signals, receive and transmit search queries, and hypertext, compile computer code as required by a User Device  110 ,  610  or a Server  130 . The Computing Device ( 1300 ) can be any general or special purpose computer now known or to become known capable of performing the steps and/or performing the functions described herein, either in software, hardware, firmware, or a combination thereof. 
         [0050]    In its most basic configuration, Computing Device ( 1300 ) typically includes at least one Central Processing Unit (CPU) ( 1302 ) and Memory ( 1304 ). Depending on the exact configuration and type of Computing Device ( 1300 ), Memory ( 1304 ) may be volatile (such as RAM), non-volatile (such as ROM, flash memory, etc.) or some combination of the two. Additionally, Computing Device ( 1300 ) may also have additional features/functionality. For example, Computing Device ( 1300 ) may include multiple CPU&#39;s. The described methods may be executed in any manner by any processing unit in computing device ( 1300 ). For example, the described process may be executed by both multiple CPU&#39;s in parallel. 
         [0051]    Computing Device ( 1300 ) may also include additional storage (removable and/or non-removable) including, but not limited to, magnetic or optical disks or tape. Such additional storage is illustrated in  FIG. 5  by Storage ( 1306 ). Computer storage media includes volatile and nonvolatile, removable and non-removable media implemented in any method or technology for storage of information such as computer readable instructions, data structures, program modules or other data. Memory ( 1304 ) and Storage ( 1306 ) are all examples of computer storage media. Computer storage media includes, but is not limited to, RAM, ROM, EEPROM, flash memory or other memory technology, CD-ROM, digital versatile disks (DVD) or other optical storage, magnetic cassettes, magnetic tape, magnetic disk storage or other magnetic storage devices, or any other medium which can be used to store the desired information and which can accessed by computing device ( 1300 ). Any such computer storage media may be part of computing device ( 1300 ). 
         [0052]    Computing Device ( 1300 ) may also contain Communications Device(s) ( 1312 ) that allow the device to communicate with other devices. Communications Device(s) ( 1312 ) is an example of 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 or other transport mechanism and includes any information delivery media. 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 wired media such as a wired network or direct-wired connection, and wireless media such as acoustic, radio frequency (RF), infrared and other wireless media. The term computer-readable media as used herein includes both computer storage media and communication media. The described methods may be encoded in any computer-readable media in any form, such as data, computer-executable instructions, and the like. 
         [0053]    Computing Device ( 1300 ) may also have Input Device(s) ( 1310 ) such as keyboard, mouse, pen, voice input device, touch input device, etc. Output Device(s) ( 1308 ) such as a display, speakers, printer, etc. may also be included. All these devices are well known in the art and need not be discussed at length. 
         [0054]    Those skilled in the art will realize that storage devices utilized to store program instructions can be distributed across a network. For example, a remote computer may store an example of the process described as software. A local or terminal computer may access the remote computer and download a part or all of the software to run the program. Alternatively, the local computer may download pieces of the software as needed, or execute some software instructions at the local terminal and some at the remote computer (or computer network). Those skilled in the art will also realize that by utilizing conventional techniques known to those skilled in the art that all, or a portion of the software instructions may be carried out by a dedicated circuit, such as a digital signal processor (DSP), programmable logic array, or the like. 
         [0055]    While the detailed description above has been expressed in terms of specific examples, those skilled in the art will appreciate that many other configurations could be used. Accordingly, it will be appreciated that various equivalent modifications of the above-described embodiments may be made without departing from the spirit and scope of the invention. 
         [0056]    Additionally, the illustrated operations in the description show certain events occurring in a certain order. In alternative embodiments, certain operations may be performed in a different order, modified or removed. Moreover, steps may be added to the above described logic and still conform to the described embodiments. Further, operations described herein may occur sequentially or certain operations may be processed in parallel. Yet further, operations may be performed by a single processing unit or by distributed processing units. 
         [0057]    The foregoing description of various embodiments of the invention has been presented for the purposes of illustration and description. It is not intended to be exhaustive or to limit the invention to the precise form disclosed. It is intended that the scope of the invention be limited not by this detailed description, but rather by the claims appended hereto. The above specification, examples and data provide a complete description of the manufacture and use of the invention. Since many embodiments of the invention can be made without departing from the spirit and scope of the invention, the invention resides in the claims hereinafter appended.