Systems, methods, and devices for hybrid implementation of native and web components

1. An electronic device comprising one or more processors configured to:

identify at least one native component and a plurality of web components that includes a first web component and a second web component, wherein the at least one native component and the plurality of web components are configured to be displayed on a user interface screen, and wherein position information identifying a position and boundary of each component included in the user interface screen is stored in a first mapping;

generate an image of the first web component and an image of the second web component, wherein the images are generated from a screen shot of the user interface screen by masking or cropping based on the first mapping; and

display the at least one native component at a location on the user interface screen that is between the image of the first web component and the image of the second web component such that the image of the first web component and the image of the second web component are separated, at least in part, by the at least one native component, and are arranged in the user interface of the application based on a second mapping which is generated based on one or more received inputs that indicate changed position information for the images of the first and second web components as well as the at least one native component.

2. The electronic device of claim 1 , wherein the one or more processors are further configured to:

detect a touch input on the image of the first web component; and

replace the image with the first web component.

3. The electronic device of claim 2 , wherein the one or more processors are further configured to:

generate a mask to mask a display of the first web component.

4. The electronic device of claim 3 , wherein the position information further identifies a size of each of the at least one native component and the plurality of web components.

5. The electronic device of claim 3 , wherein the second mapping is generated based, at least in part, on the touch input.

6. The electronic device of claim 1 , wherein the first web component and the second web component are included in a WebView browser.

7. The electronic device of claim 1 , wherein the image of the first web component and the image of the second web component are generated from screen shots of a mobile device.

8. The electronic device of claim 1 , wherein the first web component and the second web component are configured to display web content retrieved from an on-demand database service provider.

9. The electronic device of claim 8 , wherein the web content comprises one or more data values retrieved from a user profile maintained by the on-demand database service provider.

10. A method comprising:

identifying at least one native component and a plurality of web components that includes a first web component and a second web component, wherein the at least one native component and the plurality of web components are configured to be displayed on a user interface screen, and wherein position information identifying a position and boundary of each component included in the user interface screen is stored in a first mapping;

generating an image of the first web component and an image of the second web component, wherein the images are generated from a screen shot of the user interface screen by masking or cropping based on the first mapping; and

displaying the at least one native component at a location on the user interface screen that is between the image of the first web component and the image of the second web component such that the image of the first web component and the image of the second web component are separated, at least in part, by the at least one native component, and are arranged in the user interface of the application based on a second mapping which is generated based on one or more received inputs that indicate changed position information for the images of the first and second web components as well as the at least one native component.

11. The method of claim 10 further comprising:

detecting a touch input on the image of the first web component; and

replacing the image with the first web component.

12. The method of claim 11 further comprising:

generating a mask to mask a display of the first web component.

13. The method of claim 12 , wherein the position information further identifies a size of each of the at least one native component and the plurality of web components.

14. The method of claim 12 , wherein the second mapping is generated based, at least in part, on the touch input.

15. The method of claim 10 , wherein the first web component and the second web component are included in a WebView browser.

16. The method of claim 10 , wherein the image of the first web component and the image of the second web component are generated from screen shots of a mobile device.

17. The method of claim 10 , wherein the first web component and the second web component are configured to display web content retrieved from an on-demand database service provider.

18. A computer program product comprising non-transitory computer-readable program code capable of being executed by one or more processors when retrieved from a non-transitory computer-readable medium, the program code comprising instructions configurable to cause the one or more processors to perform a method comprising:

identifying at least one native component and a plurality of web components that includes a first web component and a second web component, wherein the at least one native component and the plurality of web components are configured to be displayed on a user interface screen, and wherein position information identifying a position and boundary of each component included in the user interface screen is stored in a first mapping;

generating an image of the first web component and an image of the second web component, wherein the images are generated from a screen shot of the user interface screen by masking or cropping based on the first mapping; and

displaying the at least one native component at a location on the user interface screen that is between the image of the first web component and the image of the second web component such that the image of the first web component and the image of the second web component are separated, at least in part, by the at least one native component, and are arranged in the user interface of the application based on a second mapping which is generated based on one or more received inputs that indicate changed position information for the images of the first and second web components as well as the at least one native component.

19. The computer program product recited in claim 18 , wherein the method further comprises:

detecting a touch input on the image of the first web component; and

replacing the image with the first web component.

20. The computer program product recited in claim 19 , wherein the method further comprises:

generating a mask to mask a display of the first web component,

wherein the position information further identifies a size of each of the at least one native component and the plurality of web components, wherein the second, mapping is generated based, at least in part, on the touch input, and wherein the first web component and the second web component are included in a WebView browser.