High fidelity interactive screenshots for mobile applications
The present disclosure relates to mobile application development system providing high fidelity interactive screenshots for mobile applications developed using a cloud-based service. Particular aspects of the present disclosure are directed to a method for showing a sample screenshot of a user interface that closely resembles what users would see on a mobile device. The method may include determining a static layer of the user interface, determining an image representative of the static layer, determining a dynamic layer of the user interface, determining an image representative of the dynamic layer, and rendering the screenshot of the user interface based on a combination of the image representative of the static layer and the one or more images representative of the dynamic layer.
1. A method comprising:
determining, by a computing device, a static layer of a user interface of an application, wherein the static layer comprises one or more static components of the user interface that do not change based on user configuration;
generating, by the computing device, a first container for the static layer using the one or more static components, wherein the first container includes the one or more static components positioned within the user interface;
determining, by the computing device, a first image representative of the static layer for the first container;
determining, by the computing device, a dynamic layer of the user interface, wherein the dynamic layer comprises one or more dynamic components of the user interface that do change based on the user configuration;
generating, by the computing device, a second container for the dynamic layer using the one or more dynamic components, wherein the second container includes the one or more dynamic components positioned within the user interface;
rendering, by the computing device using a runtime application, a second image representative of the dynamic layer for the second container in response to a modification to the dynamic layer; and
generating, by the computing device, an interactive preview of the user interface based on a combination of the first image and the second image, wherein the generating the interactive preview comprises creating a root component that includes the one or more static components and the one or more dynamic components positioned within the user interface based on the positioning of the one or more static components and the one or more dynamic components within the first container and the second contain, respectively.
2. The method of claim 1 , wherein the determining the first image representative of the static layer comprises rendering the first image and storing the first image in a cache.
3. The method of claim 1 , wherein the generating the interactive preview further comprises rendering the root component in response to user configuration changes of the one or more dynamic components.
4. The method of claim 1 , wherein the first container and the second container are a cascading style sheet containers.
5. The method of claim 4 , wherein the first container includes the one or more static components absolutely positioned within the user interface.
6. The method of claim 5 , wherein the second container includes the one or more dynamic components absolutely positioned within the user interface.
7. The method of claim 6 , wherein the root component includes the one or more static components and the one or more dynamic components absolutely positioned within the user interface.
8. A non-transitory computer-readable memory storing a plurality of instructions executable by one or more processors, the plurality of instructions comprising instructions that when executed by the one or more processors cause the one or more processors to perform processing comprising:
determining a static layer of a user interface of an application, wherein the static layer comprises one or more static components of the user interface that do not change based on user configuration;
generating a first container for the static layer using the one or more static components, wherein the first container includes the one or more static components positioned within the user interface;
determining a first image representative of the static layer for the first container;
determining a dynamic layer of the user interface, wherein the dynamic layer comprises one or more dynamic components of the user interface that do change based on the user configuration;
generating a second container for the dynamic layer using the one or more dynamic components, wherein the second container includes the one or more dynamic components positioned within the user interface;
rendering, at runtime, a second image representative of the dynamic layer for the second container in response to a modification to the dynamic layer; and
generating interactive preview of the user interface based on a combination of the first image and the second image, wherein the generating the interactive preview comprises creating a root component that includes the one or more static components and the one or more dynamic components positioned within the user interface based on the positioning of the one or more static components and the one or more dynamic components within the first container and the second contain, respectively.
9. A system comprising:
one or more processors;
a memory coupled to the one or more processors, the memory storing a plurality of instructions executable by the one or more processors, the plurality of instructions comprising instructions that when executed by the one or more processors cause the one or more processors to perform processing comprising:
determining a static layer of a user interface of an application, wherein the static layer comprises one or more static components of the user interface that do not change based on user configuration;
generating a first container for the static layer using the one or more static components, wherein the first container includes the one or more static components positioned within the user interface;
determining a first image representative of the static layer for the first container;
determining a dynamic layer of the user interface, wherein the dynamic layer comprises one or more dynamic components of the user interface that do change based on the user configuration;
generating a second container for the dynamic layer using the one or more dynamic components, wherein the second container includes the one or more dynamic components positioned within the user interface;
rendering, at runtime, a second image representative of the dynamic layer for the second container in response to a modification to the dynamic layer; and
generating interactive preview of the user interface based on a combination of the first image and the second image, wherein the generating the interactive preview comprises creating a root component that includes the one or more static components and the one or more dynamic components positioned within the user interface based on the positioning of the one or more static components and the one or more dynamic components within the first container and the second contain, respectively.