Abstract:
Some aspects include display, in a first region of a first graphical interface, of a graphical representation of a first page of a website, the graphical representation of the first page of the website including a graphical representation of a first page component, display, in a second region of the first graphical interface, of a graphical representation of a second page of the website, the graphical representation of the second page of the website including a graphical representation of a second page component, and display of a graphical indication of a navigation link between the first page component and the second page component.

Description:
BACKGROUND 
       [0001]    Web-based applications provide Web clients with a point of entry to backend applications, servers and/or services. These applications provide Web pages to Web clients based on Web technologies and protocols (e.g., HyperText Transfer Protocol, Java, etc.). User interface (UI) frameworks have been developed to facilitate development of such Web-based applications. These frameworks provide code libraries and messaging protocols which a developer may leverage to develop Web applications. 
         [0002]    Using conventional development tools, it is difficult to manage the layout of Web pages and of the pages&#39; constituent components (e.g., widgets, etc.). Moreover, systems are desired for improved visualization and management of the relationships, connections, usage data, rankings and/or other metadata of the pages and components. 
     
    
     
       BRIEF DESCRIPTION OF THE DRAWINGS 
         [0003]      FIG. 1  is a block diagram of a system according to some embodiments. 
           [0004]      FIG. 2  is a graphical representation of a portion of a database table according to some embodiments. 
           [0005]      FIG. 3  is a view of a user interface of an authoring application according to some embodiments. 
           [0006]      FIG. 4  is a view of a user interface of an authoring application according to some embodiments. 
           [0007]      FIG. 5  is a view of a user interface of an authoring application according to some embodiments. 
           [0008]      FIG. 6  is a view of a user interface of an authoring application according to some embodiments. 
           [0009]      FIG. 7  is a view of a user interface of an authoring application according to some embodiments. 
           [0010]      FIG. 8  is a view of a user interface of an authoring application according to some embodiments. 
           [0011]      FIG. 9  is a view of a user interface of an authoring application according to some embodiments. 
           [0012]      FIG. 10  illustrates a computing environment according to some embodiments. 
           [0013]      FIG. 11  is a block diagram of a computing system according to some embodiments. 
       
    
    
     DETAILED DESCRIPTION 
       [0014]      FIG. 1  is a block diagram of development system architecture  100  according to some embodiments.  FIG. 1  represents a logical architecture for describing processes according to some embodiments, and actual implementations may include more or different components arranged in other manners. 
         [0015]    Any of the depicted elements of architecture  100  may be implemented by one or more hardware devices coupled via any number of public and/or private networks. Two or more of such devices may be located remote from one another, and all devices may communicate with one another via any known manner of network(s) and/or via a dedicated connection. 
         [0016]    Architecture  100  includes development system  110  and developer device  120 . Generally, development system  110  provides functionality which allows a developer operating developer device to create and/or manage a website consisting of multiple web pages using a single page application. Development system  110  comprises processor-executable program code of authoring application  112 , which may be executed by one or more processors of development system  110  to perform the functions described herein. 
         [0017]    Authoring application  112  may comprise a single-page Web application, but embodiments are not limited thereto. In this regard, development system  110  may also comprise a Web server to serve a Web page of authoring application  112  to developer device  120  via a Web browser executed by developer device  120 . Development server  110  may also provide server applications accessible by client devices (not shown) which provide data to the client devices from a backend system, such as an enterprise database (not shown). Such an architecture according to some embodiments is described below with respect to  FIG. 10 . 
         [0018]    Development system  110  also includes layouts  114 , components  116  and metadata  118 . Layouts  114  may include data describing the physical appearance of Web pages of a website. Layouts  114  may specify, for each of several Web pages, locations, sizes and colors of graphical elements, text formatting and location, locations and formatting of constituent components (e.g., widgets, menus, tabs) and other layout-related information. 
         [0019]    Components  116  comprise code and or code snippets which provide Web page functionality. Components  116  may comprise reusable entities which may be used by one or more Web pages of a website and/or in multiple websites authored by authoring application  112 . A component  116  may, for example, comprise code of a widget to display a list of contacts, code of a widget to display stock prices, code of a tabbed selection window, and/or any other UI element that is or becomes known. 
         [0020]    Metadata  118  may comprise data describing relationships, connections, usage data, rankings and/or other metadata of Web pages and components. The usage data and rankings may be provided as usage data  130  by run-time systems or any other source. The data of metadata  118  may facilitate development and management of multi-page websites as will be described below. Generally, metadata  118  may facilitate filtering and/or sorting of pages and components, and may also or alternatively facilitate management of navigation and subscriptions between Web page components. 
         [0021]      FIG. 2  is a tabular representation of metadata  118  according to some embodiments. Metadata  118 , as shown, associates a component (e.g., via the Component field) with a timestamp, a ranking, a usage count, navigation links and subscriptions. Embodiments are not limited to the information and structure illustrated in  FIG. 2 . 
         [0022]    Returning to  FIG. 1 , developer device  120  may comprise a desktop computer, a laptop computer, a netbook computer, a tablet computer, a smartphone, and/or any other computing system that is or becomes known. Developer device  120  may include a memory storing program code of a client application such as a Web browser and a processor to execute the code in order to interact with authoring application  112  and present user interfaces as described herein. 
         [0023]      FIG. 3  illustrates user interface  300  according to some embodiments. Developer device  120  may execute program code of a Web browser to display user interface  300  on a display device according to some embodiments. More specifically, developer device  120  executes program code of a Web browser and enters a Uniform Resource Locator (URL) corresponding to authoring application  112  of system  110 . In response, system  110  provides a Web document to developer device  120 . Developer device  120  parses the Web document and executes any code (e.g., Java) therein to generate and display interface  300 . 
         [0024]    Interface  300  illustrates a single-page application which facilitates the development and management of multiple pages of a website simultaneously. According to the illustrated embodiment, interface  300  presents representations of four Web pages P 1 -P 4 . The representations indicate the layout and components of each page as well as the navigation links and data dependencies therebetween. 
         [0025]    Interface  300  includes Sort management area  310  and Pages management area  320 . Sort management area  310  includes icons/text which are selectable to sort the depicted pages P 1 -P 4  based on the characteristic denoted by the selected icon/text. In this regard, star icon  325  indicates a ranking, which may apply to a page or a component within a page. 
         [0026]    Interface  300  illustrates a subscription established between widget w 1  of page P 1  and widget w 5  of page P 4 . Widget w 1  and widget w 5  need not be identical; they may each operate on some common set of data. The subscription may be uni- or bi-directional, and details thereof may be stored among metadata  118 . 
         [0027]      FIG. 4  illustrates creation of navigation link  311  between tab  312  of page P 1  and page P 4 . For example, a developer may use an input device such as a mouse to drag an on-screen pointer from tab  312  to page P 4 . Such action may create a navigation link in rows of metadata  118  which correspond to tab  312  and to page P 4 . Accordingly, upon deployment of the finalized website, selection of tab  312  will result in navigation to page P 4 . 
         [0028]      FIG. 5  illustrates copying of widget w 5  from page P 4  to page P 3 . According to some embodiments, a user copies a widget by selecting the widget and dragging the widget from one page to a desired location of a second page. The dragging may be accompanied by a keypress to distinguish the copy operation from a “move” operation. Copying may create a subscription between the two instantiations of the copied widget, which is reflected in metadata  118 , but embodiments are not limited thereto. 
         [0029]    In another example,  FIG. 6  illustrates addition of page P 5  to the website of interface  300 . Specifically, selection of Add icon  330  results in creation of page P 5 . Once page P 5  is created, components may be added thereto as described above, including associated navigation links and/or subscriptions. 
         [0030]      FIG. 7  illustrates interface  700  according to some embodiments. Interface  700  may also be presented by the Web page received from authoring application  112  and rendered by development device  120 . As shown, interface  700  includes two containers, each representing a Web page and sub-pages thereof 
         [0031]    The Page  1  container includes a representation of Page  1 , including a tabbed component, and representations of subpages  1 . 1  and  1 . 2 . The Page  2  container of  FIG. 7  includes a represenatation of Page  2 . According to some embodiments, the components and pages of the Page  1  and Page  2  containers may be manipulated as described above with respect to  FIGS. 3-6 , with such manipilations reflected in corresponding metadata. 
         [0032]      FIG. 8  depicts possible manipulations of interface  700  according to some embodiments. As shown, a navigation link is established between one tab of the Page  1  component and subpage  1 . 1 , and another navigation link is established betweeen the second tab of the Page  1  component and Page  2 . Additionally, the component of subpage  1 . 2  is moved to Page  2 . As described with respect to  FIG. 5 , some embodiments allow copying of components between pages. Again, all of the manipulations depicted in  FIG. 8  may be represented by subsequently-generated metadata  118 . 
         [0033]      FIG. 9  illustrates interface  900  according to some embodiments. Interface  900  includes two containers, each representing a Web page and sub-pages thereof. As illustrated, a developer may input a gesture or command to move or copy a page or a subpage from one page to another. According to some embodiments, such moving/copying results in moving/copying both the page/sub-page and all of its components. This action creates metadata associated with each page and involved component. Any previously-created metadata for each involved component (e.g., navigation links, subscriptions) may be moved/copied as well. As a result, the moved/copied components may maintain their previously-established characteristics. 
         [0034]      FIG. 10  illustrates architecture  1000  according to some embodiments. Architecture  1000  includes cloud  1015  comprising server  1010  and HTTP destination  1017 . Developer device  1020  may operate as described herein to access authoring application  1012  through HTTP destination  1017 . 
         [0035]    Client device  1030  may comprise a desktop computer, a laptop computer, a netbook computer, a tablet computer, a smartphone, and/or any other computing system that is or becomes known. Client device  1030  may use a URL of HTTP destination  1017  to access a website created as described herein. Such a website may consist of Web pages generated using the data of layouts  1014 , components  1016  and metadata  1018 . 
         [0036]    The website may comprise a portal to access functionality of application server  1040 . Application server  1040  may provide data of data source  1050  to client system  1030  via the portal. For example, application server  1040  may execute an application to receive a request from server  1010  based on an HTTP request from client device  1030 , to query data source  1050  for data required by the request, to receive the data from data source  1050 , perform any necessarily calculations on the data, and provide the report to client system  1030  via a Web page. 
         [0037]    The data of data source  1050  may reside in a physical database or stored in-memory (e.g., in Random Access Memory). The data may comprise a relational database, an in-memory database, a multi-dimensional database, an eXtendable Markup Language (XML) document, and/or any other structured data storage system. The physical tables of data source  1050  may be distributed among several relational databases, dimensional databases, and/or other data sources. To provide economies of scale, data source  1050  may include data of more than one enterprise. Moreover, the data of data source  1050  may be indexed and/or selectively replicated in an index to allow fast retrieval thereof 
         [0038]      FIG. 11  is a block diagram of apparatus  1100  according to some embodiments. Apparatus  1100  may comprise a general-purpose computing apparatus and may execute program code to perform any of the functions described herein. Apparatus  1100  may comprise an implementation of server  110  and/or server  1010 . Apparatus  1100  may include other unshown elements according to some embodiments. 
         [0039]    Apparatus  1100  includes processor  1110  operatively coupled to communication device  1120 , data storage device  1130 , one or more input devices  1140 , one or more output devices  1150  and memory  1160 . Communication device  1120  may facilitate communication with external devices, such as application server  110 . Input device(s)  1140  may comprise, for example, a keyboard, a keypad, a mouse or other pointing device, a microphone, knob or a switch, an infra-red (IR) port, a docking station, and/or a touch screen. Input device(s)  1140  may be used, for example, to manipulate graphical user interfaces and to input information into apparatus  1100 . Output device(s)  1150  may comprise, for example, a display (e.g., a display screen) a speaker, and/or a printer. 
         [0040]    Data storage device  1130  may comprise any device, including combinations of magnetic storage devices (e.g., magnetic tape, hard disk drives and flash memory), optical storage devices, Read Only Memory (ROM) devices, etc., while memory  1160  may comprise Random Access Memory (RAM). 
         [0041]    Authoring application  1132  of data storage device  1130  may comprise program code executable by processor  1110  to provide any of the functions described herein. Embodiments are not limited to execution of these functions by a single application. Layouts  1124 , components  1126  and metadata  1128  may store information as described herein in any suitable format. Some or all of this information may also or alternatively be stored in memory  1160 . Data storage device  1130  may also store data and other program code for providing additional functionality and/or which are necessary for operation thereof, such as device drivers, operating system files, etc. 
         [0042]    Other topologies may be used in conjunction with other embodiments. Moreover, each system described herein may be implemented by any number of computing devices in communication with one another via any number of other public and/or private networks. Two or more of such computing devices of may be located remote from one another and may communicate with one another via any known manner of network(s) and/or a dedicated connection. Each computing device may comprise any number of hardware and/or software elements suitable to provide the functions described herein as well as any other functions. For example, any computing device used in an implementation of systems  100  or  1000  may include a processor to execute program code such that the computing device operates as described herein. 
         [0043]    All systems and processes discussed herein may be embodied in program code stored on one or more computer-readable non-transitory media. Such media non-transitory media may include, for example, a fixed disk, a floppy disk, a CD-ROM, a DVD-ROM, a Flash drive, magnetic tape, and solid state RAM or ROM storage units. Embodiments are therefore not limited to any specific combination of hardware and software. 
         [0044]    Embodiments have been described herein solely for the purpose of illustration. Persons in the art will recognize from this description that embodiments are not limited to those described, but may be practiced with modifications and alterations.