Methods and systems for round-trip editing of component artwork
View Patent ↗A development application can be configured to facilitate editing multiple fragments already associated with an interface design simultaneously using a graphic design application, with the fragments arranged in a logical form supported by the graphic design application. The logical form of the artwork fragments as provided to the graphic design application can correspond to the relationship between different elements of the interface design using the respective fragments. Fragments may correspond to different components, parts of components, and part states, for instance. A method can comprise accessing data defining an interface component and comprising a plurality of logically arranged elements of the component. The method can comprise extracting the artwork and arranging the artwork into a form compatible with a graphic design application. The artwork can be edited in a graphic design application and then re-integrated into the data defining the design elements of the interface after editing is complete.
1. A computer system comprising:
a processor configured to execute instructions stored in a non-transitory computer-readable medium to perform operations comprising:
receiving a structured artwork file in a development environment, wherein the structured artwork file comprises a plurality of artwork fragments organized in a plurality of logical units, wherein the development environment is configured for editing executable code of an application under development,
automatically determining a change to the structured artwork file by an application independent of the development environment, wherein the change to the structured artwork file comprises a change to an organization of at least some of the plurality of logical units, wherein the change to the organization comprises moving one of the plurality of artwork fragments from a first logical unit of the plurality of logical units to a second logical unit of the plurality of logical units,
identifying an interface component code segment corresponding to the at least one of the artwork fragment and the organization, wherein the interface component code segment comprises executable code for providing an interface component of a graphical interface configured for receiving input or providing output of the application under development, and
modifying the interface component code segment in the development environment based on determining the change to the structured artwork file.
2. The computer system set forth in claim 1 , wherein the change to the structured artwork file further comprises an edit to the artwork fragment and wherein modifying the interface component code segment comprises modifying executable code for accessing a component skin based on the artwork fragment as edited.
3. The computer system set forth in claim 1 , wherein the change to the organization comprises an addition or deletion of a logical unit to the plurality of logical units in the structured artwork file.
4. The computer system set forth in claim 1 , wherein the operations further comprise:
providing a development interface in the development environment for viewing the interface component code segment as modified;
rendering a representation of interface component in the development interface, wherein the representation includes an appearance of the interface component caused by executing the executable code of the interface component code segment.
5. A computer-implemented method comprising:
receiving a structured artwork file in a development environment, wherein the structured artwork file comprises a plurality of artwork fragments organized in a plurality of logical units, wherein the development environment is configured for editing executable code of an application under development;
automatically determining a change to the structured artwork file by an application independent of the development environment, wherein the change to the structured artwork file comprises a change to an organization of at least some of the plurality of logical units, wherein the change to the organization comprises moving one of the plurality of artwork fragments from a first logical unit of the plurality of logical units to a second logical unit of the plurality of logical units;
identifying an interface component code segment corresponding to the at least one of the artwork fragment and the organization, wherein the interface component code segment comprises executable code for providing an interface component of a graphical interface configured for receiving input or providing output of the application under development; and
modifying the interface component code segment in the development environment based on determining the change to the structured artwork file.
6. The method of claim 5 , wherein the change to the structured artwork file further comprises an edit to the artwork fragment, wherein the edit to the artwork fragment comprises a change to a color, a position, or text of the artwork fragment, wherein modifying the interface component code segment comprises modifying at least one of a color property, a position property, or a text property specified in the interface component code segment.
7. The method of claim 5 , wherein the plurality of artwork fragments comprises static artwork fragments.
8. The method of claim 5 , wherein the plurality of logical units comprises a plurality of layers in the structured artwork file having a respective plurality of artwork fragments, wherein identifying the interface component code segment comprises correlating the plurality of layers to the interface component code segment.
9. The method of claim 5 , wherein the plurality of logical units comprises a plurality of layers in the structured artwork file.
10. The method of claim 9 , wherein modifying the interface component code segment comprises updating a state of the interface component code segment to use the one of the plurality of artwork fragments in the second layer.
11. The method of claim 5 , wherein identifying the interface component code segment comprises correlating a plurality of parts of the interface component to a first plurality of artwork fragments in a first plurality of respective layers in the structured artwork file and correlating a plurality of states of the interface component to a second plurality of artwork fragments in a second plurality of respective layers in the structured artwork file.
12. The method of claim 5 , wherein the plurality of logical units comprises a plurality of tabs or pages in the structured artwork file having a respective plurality of artwork fragments, wherein identifying the interface component code segment comprises correlating the plurality of tabs or pages to the interface component code segment.
13. The method of claim 5 , wherein the change to the structured artwork file comprises the change to the organization, wherein the change to the organization comprises adding or removing at least one organizational unit of the plurality of logical units and wherein modifying the interface component code segment comprises respectively adding or removing at least one state of the interface component corresponding to the at least one organizational unit being added or removed.
14. The method of claim 5 ,
wherein the change to the structured artwork file further comprises an edit to an artwork fragment of the plurality of artwork fragments;
wherein determining the change to the structured artwork file comprises:
identifying a modification to an absolute position of the artwork fragment, and
determining a change to a relative position of an additional artwork fragment of the plurality of artwork fragments with respect to the position of the artwork fragment;
wherein modifying the interface component code segment comprises:
identifying a correlation between the relative position of the additional artwork fragment with respect to the artwork fragment and a relative position of the interface component with respect to an additional interface component, and
modifying the relative position of the interface component with respect to the additional interface component based on the change to the relative position of the additional artwork fragment with respect to the position of the artwork fragment.
15. The method of claim 5 , further comprising providing a development interface in the development environment for viewing the interface component code segment as modified.
16. A non-transitory computer-readable medium embodying program code executable by a computer system, the computer-readable medium comprising:
program code for receiving a structured artwork file in a development environment, wherein the structured artwork file comprises a plurality of artwork fragments organized in a plurality of logical units, wherein the development environment is configured for editing executable code of an application under development;
program code for automatically determining a change to the structured artwork file by an application independent of the development environment, wherein the change to the structured artwork file comprises a change to an organization of at least some of the plurality of logical units, wherein the change to the organization comprises moving one of the plurality of artwork fragments from a first logical unit of the plurality of logical units to a second logical unit of the plurality of logical units;
program code for identifying an interface component code segment corresponding to the at least one of the artwork fragment and the organization, wherein the interface component code segment comprises executable code for providing an interface component of a graphical interface configured for receiving input or providing output of the application under development; and
program code for modifying the interface component code segment in the development environment based on determining the change to the structured artwork file.
17. The non-transitory computer-readable medium of claim 16 , wherein the plurality of logical units comprises a plurality of layers in the structured artwork file having a respective plurality of artwork fragments, wherein identifying the interface component code segment comprises correlating the plurality of layers to the interface component code segment.
18. The non-transitory computer-readable medium of claim 16 , wherein the plurality of logical units comprises a plurality of layers in the structured artwork file.
19. The non-transitory computer-readable medium of claim 18 , wherein modifying the interface component code segment comprises updating a state of the interface component code segment to use the one of the plurality of artwork fragments in the second layer.
20. The non-transitory computer-readable medium of claim 16 , wherein identifying the interface component code segment comprises correlating a plurality of parts of the interface component to a first plurality of artwork fragments in a first plurality of respective layers in the structured artwork file and correlating a plurality of states of the interface component to a second plurality of artwork fragments in a second plurality of respective layers in the structured artwork file.
21. The non-transitory computer-readable medium of claim 16 , wherein the plurality of logical units comprises a plurality of tabs or pages in the structured artwork file having a respective plurality of artwork fragments, wherein identifying the interface component code segment comprises correlating the plurality of tabs or pages to the interface component code segment.
22. The non-transitory computer-readable medium of claim 16 , wherein the change to the organization comprises adding or removing at least one organizational unit of the plurality of logical units and wherein modifying the interface component code segment comprises respectively adding or removing at least one state of the interface component corresponding to the at least one organizational unit being added or removed.
23. The non-transitory computer-readable medium of claim 16 ,
wherein the change to the structured artwork file further comprises an edit to an artwork fragment of the plurality of artwork fragments;
wherein determining the change to the structured artwork file comprises:
identifying a modification to an absolute position of the artwork fragment, and
determining a change to a relative position of an additional artwork fragment of the plurality of artwork fragments with respect to the position of the artwork fragment;
wherein modifying the interface component code segment comprises:
identifying a correlation between the relative position of the additional artwork fragment with respect to the artwork fragment and a relative position of the interface component with respect to an additional interface component, and
modifying the relative position of the interface component with respect to the additional interface component based on the change to the relative position of the additional artwork fragment with respect to the position of the artwork fragment.