Custom Component Parsing Engine for Dynamic Native Layout on WebView
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Current mobile APP development technologies, such as ReactNative, struggle to achieve dynamic layout of Native components on HTML pages using WebView, as they do not conform to W3C standards, are incompatible with existing WebKit kernels, and require higher learning costs for developers, limiting the ability to use original HTML technology for Native component layout.
Innovation Solution
A method and apparatus that initiate a page content request from a client terminal to a server, determine if a custom component tag is present, and if so, load a custom component parsing engine to render the Native component on the HTML page, allowing dynamic layout of Native components on WebView without intruding on the original HTML technology.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Adaptability or versatility
If ReactNative technology is used to achieve dynamic layout, then page dynamic layout capability is improved, but compatibility with existing WebKit kernel and W3C standards deteriorates
Solution Approach 1:
The patent introduces a bridge mechanism between the HTML page and Native components. The server acts as an intermediary that receives HTML pages, identifies custom component tags, and replaces them with corresponding Native components. This allows the HTML page to maintain W3C standard compliance while enabling Native component rendering through the server-side mediation process.
Solution Approach 2:
The patent segments the rendering process into distinct phases: HTML parsing phase (maintaining W3C standards), component tag identification phase, and Native component rendering phase. This segmentation allows each phase to operate with appropriate standards and technologies, resolving the conflict between HTML standard compliance and Native component integration.
2Adaptability or versatility
If ReactNative technology is used, then dynamic layout functionality is improved, but learning cost for developers increases
Solution Approach 1:
The patent allows developers to use familiar HTML syntax to define custom components, which are then copied/translated to corresponding Native components on the server side. This copying mechanism enables developers to leverage existing HTML knowledge without needing to learn ReactNative-specific syntax, reducing the learning curve while maintaining dynamic layout capabilities.
3Adaptability or versatility
If custom component parsing engine is loaded dynamically, then rendering capability for Native components is improved, but system complexity increases
Solution Approach 1:
The patent implements dynamic loading of the custom component parsing engine based on the presence of custom component tags in the HTML page. The system remains simple by default and only loads the additional parsing functionality when needed, reducing overall system complexity while maintaining enhanced rendering capability when required.
Solution Approach 2:
The server performs preliminary processing by identifying custom component tags in the HTML page before rendering. This preliminary action allows the system to prepare the appropriate parsing engine and component mappings in advance, reducing the complexity of real-time processing during page rendering.
Data Source
AI summary
A page component dynamic layout method includes: initiating, by a client terminal, a page content request to a server based on a triggered request page; querying, by the client terminal, whether there is a preset identifier in a page response content; if there is a preset identifier in the page response content, loading a set custom component parsing engine to parse a tag of a custom component; selecting, by the client terminal, a corresponding custom component according to tag information obtained by parsing the tag of the custom component, and calling a set custom component rendering engine to render the custom component; and adding the rendered custom component to a corresponding position of the request page. Dynamic layout of a Native component on a WebView is achieved on an HTML page, thereby improving the convenience of laying out pages by an operator.