KR20180134927A - 혼합된 뷰 표시 방법 및 장치 - Google Patents

혼합된 뷰 표시 방법 및 장치 Download PDF

Info

Publication number
KR20180134927A
KR20180134927A KR1020187030825A KR20187030825A KR20180134927A KR 20180134927 A KR20180134927 A KR 20180134927A KR 1020187030825 A KR1020187030825 A KR 1020187030825A KR 20187030825 A KR20187030825 A KR 20187030825A KR 20180134927 A KR20180134927 A KR 20180134927A
Authority
KR
South Korea
Prior art keywords
view
web page
client
loading
page view
Prior art date
Application number
KR1020187030825A
Other languages
English (en)
Other versions
KR102293685B1 (ko
Inventor
치앙 모우
Original Assignee
알리바바 그룹 홀딩 리미티드
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by 알리바바 그룹 홀딩 리미티드 filed Critical 알리바바 그룹 홀딩 리미티드
Publication of KR20180134927A publication Critical patent/KR20180134927A/ko
Application granted granted Critical
Publication of KR102293685B1 publication Critical patent/KR102293685B1/ko

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/166—Editing, e.g. inserting or deleting
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/957—Browsing optimisation, e.g. caching or content distillation
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/957—Browsing optimisation, e.g. caching or content distillation
    • G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • G06F16/986—Document structures and storage, e.g. HTML extensions
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/14—Digital output to display device ; Cooperation and interconnection of the display device with other functional units
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/103—Formatting, i.e. changing of presentation of documents
    • G06F40/106—Display of layout of documents; Previewing
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/38—Creation or generation of source code for implementing user interfaces
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/445—Program loading or initiating
    • G06F9/44521—Dynamic linking or loading; Link editing at or after load time, e.g. Java class loading
    • G06F9/44526—Plug-ins; Add-ons
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/451—Execution arrangements for user interfaces
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/451—Execution arrangements for user interfaces
    • G06F9/452—Remote windowing, e.g. X-Window System, desktop virtualisation
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/455—Emulation; Interpretation; Software simulation, e.g. virtualisation or emulation of application or operating system execution engines
    • G06F9/45504—Abstract machines for programme code execution, e.g. Java virtual machine [JVM], interpreters, emulators
    • G06F9/45529—Embedded in an application, e.g. JavaScript in a Web browser

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Databases & Information Systems (AREA)
  • Human Computer Interaction (AREA)
  • Data Mining & Analysis (AREA)
  • Health & Medical Sciences (AREA)
  • Artificial Intelligence (AREA)
  • Audiology, Speech & Language Pathology (AREA)
  • Computational Linguistics (AREA)
  • General Health & Medical Sciences (AREA)
  • Information Transfer Between Computers (AREA)
  • User Interface Of Digital Computer (AREA)
  • Digital Computer Display Output (AREA)

Abstract

본 발명은 웹페이지 프로세싱 기술 분야에 관한 것으로, 혼합된 뷰를 표시하는 낮은 정확성 비일관성 문제를 해결하기 위한 혼합된 뷰 표시 방법 및 장치를 개시한다. 본 발명의 주요 기술적 해결책은: 웹페이지 뷰(webpage view) 로딩 명령어가 수신될 때, 클라이언트 뷰를 추가하는 데 사용되는 플레이스홀더(placeholder) 요소를 포함하는 웹페이지 뷰를 로딩하는 단계; 웹페이지 뷰를 로딩한 결과로부터 플레이스홀더 요소의 위치 정보를 얻는 단계; 클라이언트 뷰를 위치 정보에 추가하는 단계; 및 추가된 클라이언트 뷰를 포함하는 웹페이지 뷰를 표시하는 단계를 포함한다. 본 발명은 주로 혼합된 뷰를 표시하는 데 사용된다.

Description

혼합된 뷰 표시 방법 및 장치
본 출원은 2016년 3월 24일자로 출원되고 발명의 명칭이 "혼합된 뷰 표시 방법 및 장치"인 중국 특허 출원 제201610172774.1호의 우선권을 주장하며, 그 전체 내용이 본 명세서에 참조로 통합된다.
본 발명은 웹페이지 프로세싱 기술 분야에 관한 것으로, 구체적으로 혼합된 표시 방법 및 장치에 관한 것이다.
정보 기술의 급속한 발전에 따라, 사람들은 모바일 장치 상의 어플리케이션(앱(App))에 대해 점점 더 높은 요구를 갖는다. 모바일 장치의 한계로 인해, 모바일 장치 상의 앱은 기술 업데이트 및 시장 요구에 응답하여, 네이티브(native) 앱으로부터 하이브리드 앱으로, 그 후 웹-기반 앱(웹 앱)으로 변한다. 하이브리드 앱은 웹 앱과 네이티브 앱 사이의 앱을 의미한다. 하이브리드 앱을 사용하여 웹페이지 뷰와 특정 앱의 클라이언트 뷰가 모두 표시될 수 있다. 웹페이지 뷰는 브라우저 상에 실행되는 하이퍼텍스트 마크업 언어 버전 5(HTML5) 페이지이다. 클라이언트 뷰는 iOS/안드로이드(Android) 개발 언어를 사용하여 작성된 표시용 페이지 또는 컨트롤이다. 예를 들어, 웹페이지 뷰와 앱 타오바오(Taobao)의 클라이언트 뷰는 하이브리드 앱을 사용하여 혼합된 방식으로 표시될 수 있다.
현재, 하이브리드 앱을 구현하기 위해 모바일 장치의 웹뷰(WebView)(클라이언트 웹페이지 컨테이너)에 서브뷰(subview)가 추가될 수 있다. 구체적으로, 웹뷰에 클라이언트 뷰를 추가하여 웹페이지 뷰와 앱의 클라이언트 뷰가 혼합된 방식으로 표시된다. 예를 들어, 클라이언트 뷰가 iOS 시스템의 webView.scrollView에 추가되거나, 클라이언트 뷰가 안드로이드 시스템의 webview.addView에 추가되어, 클라이언트 뷰를 웹뷰에 직접 추가한다. 그러나, 웹페이지 뷰는 렌더링을 위해 브라우저 엔진을 필요로 하며, 클라이언트 뷰는 실행을 위해 운영 체제의 컴파일을 필요로 한다. 2개의 상이한 환경 때문에, 웹페이지 뷰에 스크롤 변화가 이루어질 때, 혼합된 뷰가 일관성 없이 표시된다.
상술한 문제점의 관점에서, 본 발명은 이러한 문제점을 해결하거나 이러한 문제점을 적어도 부분적으로 해결하기 위한 혼합된 뷰 표시 방법 및 장치를 제공하기 위해 제안된다.
목적을 달성하기 위해, 본 발명은 이하의 기술적 해결책을 제공한다:
일 양태에 따르면, 본 발명의 구현은 혼합된 뷰 표시 방법을 제공하며, 본 방법은: 웹페이지 뷰(webpage view) 로딩 명령어가 수신될 때, 클라이언트 뷰를 추가하는 데 사용되는 플레이스홀더(placeholder) 요소를 포함하는 웹페이지 뷰를 로딩하는 단계; 웹페이지 뷰를 로딩한 결과로부터 플레이스홀더 요소의 위치 정보를 얻는 단계; 클라이언트 뷰를 위치 정보에 추가하는 단계; 및 추가된 클라이언트 뷰를 포함하는 웹페이지 뷰를 표시하는 단계를 포함한다.
본 발명의 다른 양태에 따르면, 본 발명의 구현은 혼합된 뷰 표시 장치를 추가로 제공하며, 본 장치는: 웹페이지 뷰 로딩 명령어가 수신될 때, 클라이언트 뷰를 추가하는 데 사용되는 플레이스홀더 요소를 포함하는 웹페이지 뷰를 로딩하도록 구성되는 로딩 유닛; 웹페이지 뷰를 로딩한 결과로부터 플레이스홀더 요소의 위치 정보를 얻도록 구성된 획득 유닛; 클라이언트 뷰를 위치 정보에 추가하도록 구성된 추가 유닛; 및 추가된 클라이언트 뷰를 포함하는 웹페이지 뷰를 표시하도록 구성된 표시 유닛을 포함한다.
본 발명의 구현에서 제공되는 기술적 해결책은 적어도 이하의 이점을 갖는다:
본 발명의 구현은 혼합된 뷰 표시 방법 및 장치를 제공한다. 우선, 웹페이지 뷰는 웹페이지 뷰 로딩 명령어가 수신될 때 로딩되며, 웹페이지 뷰는 클라이언트 뷰를 추가하는 데 사용되는 플레이스홀더 요소를 포함한다. 그 후, 웹페이지 뷰를 로딩한 결과로부터 플레이스홀더 요소의 위치 정보가 얻어지고, 클라이언트 뷰가 위치 정보에 추가된다. 궁극적으로, 추가된 클라이언트 뷰를 포함하는 웹페이지 뷰가 표시된다. 혼합된 뷰를 표시하기 위해 웹뷰에 직접 추가되는 서브뷰와 비교하여, 본 발명의 구현에서는, 웹페이지 뷰 로딩 명령어가 수신될 때, 플레이스홀더 요소의 위치 정보가 우선 웹페이지를 로딩한 결과로부터 얻어진다. 그 후, 클라이언트 뷰가 플레이스홀더 요소의 위치에 추가되어, 웹페이지 뷰와 클라이언트 뷰를 혼합된 방식으로 표시한다. 본 발명의 구현에서 플레이스홀더 요소는 브라우저 엔진을 사용하여 렌더링될 수 있다. 따라서, 클라이언트 뷰는 로딩 후 플레이스홀더 요소에 대응하는 위치에 클라이언트 뷰를 추가하여 웹페이지 뷰와 함께 스크롤할 수 있으며, 혼합된 뷰를 표시하는 정확성과 일관성을 향상시킬 수 있다.
다양한 다른 장점들 및 이점들은 이하의 구현들의 상세한 설명을 읽음으로써 본 기술 분야의 통상의 기술자에 의해 명확하게 이해된다. 첨부 도면은 단지 구현을 예시하기 위해 사용된 것이며, 본 발명을 제한하는 데 사용되지 않는다. 또한, 도면에서 동일한 구성 요소를 나타내기 위해 동일한 참조 부호가 사용된다. 첨부 도면에서:
도 1은 본 발명의 구현에 따른 혼합된 뷰 표시 방법을 예시하는 흐름도이다.
도 2는 본 발명의 구현에 따른 다른 혼합된 뷰 표시 방법을 예시하는 흐름도이다.
도 3은 본 발명의 구현에 따른 혼합된 뷰 표시 장치를 예시하는 구성 블록도이다.
도 4는 본 발명의 구현에 따른 다른 혼합된 뷰 표시 장치를 예시하는 구성 블록도이다.
도 5는 본 발명의 구현에 따른, 혼합된 뷰의 인터페이스를 예시하는 개략도이다.
이하, 첨부 도면을 참조하여 본 발명의 예시적인 구현을 상세하게 설명한다. 첨부 도면이 본 발명의 예시적인 구현을 나타내지만, 본 발명은 다양한 형태로 구현될 수 있으며 본 명세서에 설명된 구현에 의해 제한되지 않아야 함을 이해해야 한다. 대신, 이러한 구현은 본 발명의 보다 완전한 이해를 제공하고 본 발명의 범위를 본 기술 분야의 통상의 기술자에게 포괄적으로 전달하기 위해 사용된다.
본 발명은 본 발명의 기술적 해결책의 장점을 보다 명확하게 하기 위해, 첨부 도면 및 구현을 참조하여 이하에서 상세하게 설명된다.
본 발명의 구현은 혼합된 뷰 표시 방법을 제공한다. 도 1에 나타낸 바와 같이, 본 방법은 이하의 단계를 포함한다:
101. 웹페이지 뷰 로딩 명령어가 수신될 때 웹페이지 뷰를 로딩한다.
웹페이지 뷰는 클라이언트 뷰를 추가하는데 사용되는 플레이스홀더 요소를 포함한다. 본 발명의 본 구현에서, 웹페이지 뷰 로딩 명령어는 예를 들어, Alipay에서 Credit Pay의 상환 버튼 또는 ZhaoCaiBao의 구매 예약 버튼을 선택하는 것과 같이, 앱의 특정 페이지를 열어 트리거될 수 있다. 이는 본 발명의 본 구현에 한정되지 않는다.
웹페이지 뷰에 포함된 플레이스홀더 요소는 객체의 크기 또는 폭/높이를 변경할 수 있는 요소라는 점에 유의할 가치가 있다. 본 발명의 본 구현에서, 플레이스홀더 요소는 블록-레벨 요소일 수 있거나, 플레이스홀더 요소는 블록-레벨 요소의 행(row)-레벨 요소로서 표현될 수 있다. 이는 본 발명의 본 구현에 한정되지 않는다. 예를 들어, 플레이스홀더 요소는 블록-레벨 요소 <div id="native-view"></div>를 사용하여 표현되거나, 플레이스홀더 요소는 블록-레벨 요소의 행-레벨 요소 <span id="native-view" style="display:block"></span>를 사용하여 표현된다. 행 레벨 요소에 설정된 style="display:block"은 객체를 블록-레벨 요소로 변경한다는 의미이므로, 행-레벨 요소는 실제로 블록-레벨 요소로서 표현되고, 행-레벨 요소는 대응 크기 또는 폭를 변경하는 데 사용된다.
102. 웹페이지 뷰를 로딩한 결과로부터 플레이스홀더 요소의 위치 정보를 얻는다.
본 발명의 본 구현에서, 웹페이지 뷰는 HTML 페이지이기 때문에, 표시될 웹페이지 뷰는 브라우저 렌더링 엔진을 사용하여 표시하기 위해 로딩된다. 상이한 웹페이지 뷰의 로딩은 본 발명에서 상이한 단말 시스템의 운영 체제에 의해 내부적으로 모니터링된다는 점에 유의할 가치가 있다. 예를 들어, 웹페이지 뷰가 로딩되었는지 여부는 iOS(Apple 모바일 장치의 운영 체제)에서 인터페이스 webViewDidFinishLoad(iOS)를 사용하여 모니터링되며; 웹페이지 뷰가 로딩되었는지 여부는 Android(Android 운영 체제)에서 인터페이스 onPageFinished(Android)를 사용하여 모니터링된다.
본 발명의 본 구현에서, 웹뷰(클라이언트 웹페이지 뷰 컨테이너)는 표시될 웹페이지 뷰를 로딩한 결과로부터 플레이스홀더 요소의 위치 정보를 얻기 위해 JavaScript(스크립팅 언어)를 실행한다. 플레이스홀더 요소를 마킹하기 위한 상이한 방법에 기초하여 플레이스홀더 요소를 얻기 위한 상이한 방법들이 있다. 예를 들어, 플레이스홀더 요소의 위치 정보를 얻기 위한 스크립트 코드는 다음과 같다:
(function(){
var ele = document.getElementById('native-view');
var xPoint = ele.getBoundingClientRect().left;
var yPoint = ele.getBoundingClientRect().top + document.body.scrollTop;
return JSON.stringify({x: xPoint, y: yPoint});
})();
코드에서, 'native-view'는 플레이스홀더 요소의 식별자를 나타내고, xPoint는 브라우저 윈도우에 대한 플레이스홀더 요소의 좌측 위치 거리 정보를 나타내고, yPoint는 페이지 상의 브라우저 윈도우에 대한 플레이스홀더 요소의 상부 위치를 얻는데 사용된다. 플레이스홀더 요소의 위치는 좌표 축에서 x 및 y를 기반으로 웹페이지 뷰를 로딩한 결과에서 결정될 수 있다.
103. 위치 정보에 클라이언트 뷰를 추가한다.
클라이언트 뷰는 예를 들어, iOS UISwitch(스위치 컨트롤), Android TextView(텍스트 표시) 또는 사용자에 의해 작성된 맞춤형 뷰 컨트롤과 같은 모바일 폰의 대응 운영 체제 언어를 사용하여 작성 및 컴파일되는 네이티브 뷰이다.
104. 추가된 클라이언트 뷰를 포함하는 웹페이지 뷰를 표시한다.
본 발명의 본 구현에서, 우선, 웹페이지 뷰 로딩 명령어가 수신될 때, 웹페이지 뷰를 로딩한 결과로부터 플레이스홀더 요소의 위치 정보가 얻어지고; 그 후 클라이언트 뷰가 대응하여 플레이스홀더 요소의 위치에 추가되어, 웹페이지 뷰와 클라이언트 뷰를 혼합된 방식으로 표시한다. 본 발명의 본 구현의 플레이스홀더 요소는 브라우저 엔진을 사용함으로써 렌더링될 수 있다. 따라서, 클라이언트 뷰는 로딩 후 플레이스홀더 요소에 대응하는 위치에 클라이언트 뷰를 추가하여 웹페이지 뷰와 함께 스크롤할 수 있다. 본 발명은 혼합된 뷰를 표시하는 정확성 및 일관성을 향상시킬 수 있다.
본 발명의 본 구현은 혼합된 뷰 표시 방법을 제공한다. 우선, 웹페이지 뷰는, 웹페이지 뷰 로딩 명령어가 수신될 때 로딩되며, 웹페이지 뷰는 클라이언트 뷰를 추가하는 데 사용되는 플레이스홀더 요소를 포함한다. 그 후, 웹페이지 뷰를 로딩한 결과로부터 플레이스홀더 요소의 위치 정보가 얻어지고, 클라이언트 뷰가 위치 정보에 추가된다. 궁극적으로, 추가된 클라이언트 뷰를 포함하는 웹페이지 뷰가 표시된다. 혼합된 뷰를 표시하기 위해 웹뷰에 직접 추가되는 서브뷰와 비교하여, 본 발명의 구현에서는, 웹페이지 뷰 로딩 명령어가 수신될 때, 웹페이지 뷰를 로딩한 결과로부터 플레이스홀더 요소의 위치 정보가 우선 얻어진다. 그 후, 클라이언트 뷰가 플레이스홀더 요소의 위치에 추가되어 웹페이지 뷰와 클라이언트 뷰를 혼합된 방식으로 표시한다. 본 발명의 구현에서 플레이스홀더 요소는 브라우저 엔진을 사용하여 렌더링될 수 있다. 따라서, 클라이언트 뷰는 로딩 후에 플레이스홀더 요소에 대응하는 위치에 클라이언트 뷰를 추가하여 웹페이지 뷰와 함께 스크롤할 수 있다. 본 발명은 혼합된 뷰를 표시하는 정확성 및 일관성을 향상시킬 수 있다.
본 발명의 구현은 다른 혼합된 뷰 표시 방법을 제공한다. 도 2에 나타낸 바와 같이, 본 방법은 이하의 단계들을 포함한다:
201. 웹페이지 뷰에 플레이스홀더 요소를 추가한다.
대응 식별 정보가 각각의 플레이스홀더 요소에 대해 설정되고, 식별 정보는 플레이스홀더 요소를 고유하게 식별하는 데 사용된다. 각 플레이스홀더 요소에 대응하는 식별 정보는 클래스 또는 id를 사용하여 설정될 수 있다. 예를 들어, 블록-레벨 요소 <div class="native-view1"></div>를 사용하여 표현된 플레이스홀더 요소에서, 플레이스홀더 요소의 식별 정보는 클래스를 사용하여 설정되며, 즉 플레이스홀더 요소의 식별 정보는 native-view1이다. 블록-레벨 요소의 행-레벨 요소 <span id="native-view2" style="display:block"></span>를 사용하여 표현된 플레이스홀더 요소에서, 플레이스홀더 요소의 식별 정보는 id를 사용하여 설정되며, 즉 플레이스홀더 요소의 식별 정보는 native-view2이다.
웹페이지 뷰에 포함된 플레이스홀더 요소는 객체의 크기 또는 폭/높이를 변경할 수 있는 요소라는 점에 유의할 가치가 있다. 본 발명의 본 구현에서, 플레이스홀더 요소는 블록-레벨 요소일 수 있거나, 플레이스홀더 요소는 블록-레벨 요소의 행-레벨 요소로서 표현될 수 있다. 이는 본 발명의 본 구현에 한정되지 않는다. 본 발명의 본 구현에서, 플레이스홀더 요소는 블록-레벨 요소로 설정되거나, 플레이스홀더 요소는 블록-레벨 요소의 행-레벨 요소로서 표현된다. 플레이스홀더 요소의 폭/높이는 추후 단계에서 설정될 수 있다. 구체적으로, 클라이언트 뷰의 크기는 플레이스홀더 요소를 사용하여 조정될 수 있다. 따라서, 본 발명의 본 구현은 클라이언트 뷰를 표시하는 정확성 및 일관성을 향상시킬 수 있다.
202. 각 플레이스홀더 요소에 대응하는 클라이언트 뷰를 설정한다.
클라이언트 뷰는 예를 들어, iOS UISwitch(스위치 컨트롤), Android TextView(텍스트 표시) 또는 사용자에 의해 작성된 맞춤형 뷰 컨트롤과 같은 모바일 폰의 대응 운영 체제 언어를 사용하여 작성 및 컴파일되는 네이티브 뷰이다. 이는 본 발명의 본 구현에 한정되지 않는다. 웹페이지 뷰는 복수의 클라이언트 뷰를 포함할 수 있고 하나의 클라이언트 뷰가 각 플레이스홀더 요소에 추가될 수 있으므로, 플레이스홀더 요소에 대응하는 클라이언트 뷰는, 복수의 플레이스홀더 요소가 웹페이지 뷰에 추가된 후에 추가로 설정될 필요가 있다. 본 발명의 본 구현에서, 플레이스홀더 요소에 대응하는 클라이언트 뷰는, 이후의 단계에서 플레이스홀더 요소에 대응하는 위치 정보에 복수의 클라이언트 뷰가 추가될 수 있도록 설정된다.
203. 웹페이지 뷰 로딩 명령어가 수신될 때 웹페이지 뷰를 로딩한다.
웹페이지 뷰는 클라이언트 뷰를 추가하는 데 사용되는 플레이스홀더 요소를 포함한다. 본 발명의 본 구현에서, 웹페이지 뷰 로딩 명령어는 예를 들어, Alipay의 Credit Pay의 상환 버튼 또는 ZhaoCaiBao의 구매 예약 버튼을 선택하는 것과 같이, 앱의 특정 페이지를 열어 트리거될 수 있다. 이는 본 발명의 본 구현에 한정되지 않는다.
204. 웹페이지 뷰를 로딩한 결과로부터 플레이스홀더 요소의 위치 정보가 얻어질 수 있는지 여부를 결정한다.
웹페이지 뷰 로딩은 본 발명에서 단말 장치의 상이한 운영 체제에서 내부적으로 청취됨에 유의할 가치가 있다. 예를 들어, 웹페이지 뷰가 로딩되었는지 여부는 iOS(Apple 모바일 장치의 운영 체제)에서 인터페이스 webViewDidFinishLoad(iOS)를 사용하여 알게 되며; 웹페이지 뷰가 로딩되었는지 여부는 Android(Android 운영 체제)의 인터페이스 onPageFinished(Android)를 사용하여 알게 된다. 플레이스홀더 요소의 위치 정보는 가시 영역 내의 페이지 요소의 위치이고, 플레이스홀더 요소의 좌측 및 상부 위치는 브라우저 윈도우에 대해 위치된다.
205a. 만일 그렇다면, 플레이스홀더 요소의 위치 정보를 얻는다.
본 발명의 본 구현에서, 표시될 웹페이지 뷰를 로딩한 결과로부터 플레이스홀더 요소의 위치 정보가 얻어질 수 있다면, 플레이스홀더 요소의 위치 정보가 얻어진다.
206a. 플레이스홀더 요소에 대응하는 클라이언트 뷰를 위치 정보에 추가한다.
본 발명의 본 구현에서, 플레이스홀더 요소는 블록-레벨 요소로서 표현된다. 단계 206a 이후에, 본 방법은: 플레이스홀더 요소의 상태 정보를 클라이언트 뷰에 대응하는 상태 정보로서 구성하는 단계를 더 포함한다. 플레이스홀더 요소의 상태 정보는 상태 요소의 폭/높이 정보, 해상도 정보 등일 수 있다. 이는 본 발명의 본 구현에 한정되지 않는다. 플레이스홀더 요소는 다음과 같을 수 있는 블록-레벨 요소로서 표현된다는 점에 유의할 가치가 있으며: 플레이스홀더 요소는 블록-레벨 요소이거나, 플레이스홀더 요소는 블록-레벨 요소의 행-레벨 요소, 즉 플레이스홀더의 상태 정보를 변경할 수 있는 모든 요소로서 표현된다. 이는 본 발명의 본 구현에 한정되지 않는다.
본 발명의 본 구현에서, 클라이언트 뷰에 대응하는 상태 정보로서 플레이스홀더 요소의 상태 정보를 구성하는 단계는: 플레이스홀더 요소의 폭/높이 정보를 클라이언트 뷰에 대응하는 폭/높이 정보로 설정하는 단계를 포함한다. 예를 들어, 이하의 코드를 사용하여 요소의 폭/높이 정보가 설정될 수 있다:
document.getElementById('native-view').style.height='400px';
document.getElementById('native-view').style.width='100px';
400은 클라이언트 뷰의 실제 높이이고, 100은 클라이언트 뷰의 실제 폭이다. 본 발명의 본 구현에서, 플레이스홀더 요소의 폭/높이 정보는 클라이언트 뷰에 대응하는 폭/높이 정보로 설정되어, 추가된 클라이언트 뷰가 표시될 웹페이지 뷰에 완전히 표시된다. 또한, 플레이스홀더 요소의 폭/높이 정보는 클라이언트 뷰에 대응하는 폭/높이 정보로 설정되어, 클라이언트 뷰를 표시하는 정확성을 향상시키고 혼합된 뷰를 표시하는 정확성 및 일관성을 더욱 향상시킨다.
본 발명의 본 구현에서, 클라이언트 뷰를 위치 정보에 추가하는 단계는: 웹페이지 뷰를 로딩한 결과로부터 각 플레이스홀더 요소에 대응하는 위치 정보를 얻는 단계; 및 위치 정보에 플레이스홀더 요소에 대응하는 클라이언트 뷰를 추가하는 단계를 포함한다. 본 발명의 본 구현에서, 웹페이지 뷰에 복수의 플레이스홀더 요소가 존재하는 경우, 웹페이지 뷰가 로딩된 후 로딩 결과로부터 각각의 플레이스홀더 요소에 대응하는 위치 정보가 얻어지고, 그 후, 플레이스홀더 요소에 대응하는 클라이언트 뷰가 각 플레이스홀더 요소의 위치 정보에 추가되어, 웹페이지 뷰에 복수의 클라이언트 뷰를 추가한다.
207a. 추가된 클라이언트 뷰를 포함하는 웹페이지 뷰를 표시한다.
205b. 그렇지 않은 경우, 웹페이지 뷰 로딩의 오류 프롬프트 정보를 출력한다.
단계 205b는 단계 205a와 병렬이다. 웹페이지 뷰를 로딩하는 오류 프롬프트 정보는, 웹페이지 뷰를 로딩한 결과로부터 플레이스홀더 요소의 위치 정보가 얻어질 수 없는 경우 출력되어 웹페이지 뷰를 다시 로딩하도록 지시한다. 단말 장치가 네트워크로부터 접속해제되거나, 웹페이지 뷰 로딩 프로세스에서 오류가 발생하는 등의 경우에, 웹페이지 뷰를 로딩한 결과로부터 플레이스홀더 요소의 위치 정보가 얻질 수 없다는 점에 유의할 가치가 있다.
본 발명의 구현은 도 5에 나타낸 시나리오에 적용될 수 있지만, 이에 한정되는 것은 아니다. 이 시나리오는 이하의 내용을 포함한다: 우선, 웹페이지 뷰 로딩 명령어가 수신될 때, 즉 도 5의 웹페이지 뷰의 점선 박스 내의 웹페이지 요소가 로딩될 때 웹페이지 뷰가 로딩된다. 그 후, 웹페이지 뷰를 로딩한 결과로부터 플레이스홀더 요소의 위치 정보가 얻어질 수 있는지 여부가 결정되며, 즉 웹페이지 뷰를 로딩한 결과로부터 플레이스홀더 요소 "연락처(Contact us)"의 위치 정보가 얻어질 수 있는지 여부가 결정된다. 얻어질 수 있는 경우, 플레이스홀더 요소 "연락처"의 위치 정보가 얻어지고, 웹뷰로부터 얻어진 위치 정보에 클라이언트 뷰가 추가되며, 즉 클라이언트 뷰가 도 5의 "연락처" 점선 박스의 대응 위치에서 웹뷰에 추가되어, 웹페이지 뷰와 클라이언트 뷰를 혼합된 방식으로 표시한다. 그렇지 않은 경우, 웹페이지 뷰를 다시 로딩하라는 웹페이지 뷰를 로딩하는 오류 프롬프트 정보가 출력된다. 본 발명의 본 구현의 플레이스홀더 요소는 브라우저 엔진을 사용하여 렌더링될 수 있다. 따라서, 클라이언트 뷰는 로딩 후에 플레이스홀더 요소에 대응하는 위치에 추가되어, 클라이언트 뷰가 웹페이지 뷰와 함께 스크롤할 수 있으며, 즉 도 5의 "연락처" 점선 박스에서 클라이언트 뷰가 웹페이지 뷰 점선 박스의 웹페이지 뷰와 함께 스크롤할 수 있다. 본 발명이 혼합된 뷰를 표시하는 정확성 및 일관성을 향상시킬 수 있도록, 플레이스홀더 요소가 웹페이지 뷰에 추가되어 플로우 레이아웃에 혼합된 뷰를 표시한다.
본 발명의 본 구현은 다른 혼합된 뷰 표시 방법을 제공한다. 우선, 웹페이지 뷰는, 웹페이지 뷰 로딩 명령어가 수신될 때 로딩되며, 웹페이지 뷰는 클라이언트 뷰를 추가하는 데 사용되는 플레이스홀더 요소를 포함한다. 그 후, 웹페이지 뷰를 로딩한 결과로부터 플레이스홀더 요소의 위치 정보가 얻어지고, 클라이언트 뷰가 위치 정보에 추가된다. 궁극적으로, 추가된 클라이언트 뷰를 포함하는 웹페이지 뷰가 표시된다. 본 방법에서는, 서브뷰가 웹뷰에 직접 추가되어 혼합된 뷰를 표시한다. 상술한 본 방법과 비교하여, 본 발명의 구현에서, 우선, 웹페이지 뷰 로딩 명령어가 수신될 때, 웹페이지 뷰를 로딩한 결과로부터 플레이스홀더 요소의 위치 정보가 얻어지고; 그 후 클라이언트 뷰가 플레이스홀더 요소의 위치에 추가되어 웹페이지 뷰와 클라이언트 뷰를 혼합된 방식으로 표시한다. 본 발명의 구현에서 플레이스홀더 요소는 브라우저 엔진을 사용하여 렌더링될 수 있다. 따라서, 클라이언트 뷰는 로딩된 후, 플레이스홀더 요소에 해당하는 위치에 클라이언트 뷰를 추가하여 웹페이지 뷰와 함께 스크롤할 수 있다. 본 발명은 혼합된 뷰를 표시하는 정확성 및 일관성을 향상시킬 수 있다.
또한, 본 발명의 구현은 혼합된 뷰 표시 장치를 제공한다. 도 3에 나타낸 바와 같이, 장치는 로딩 유닛(31), 획득 유닛(32), 추가 유닛(33) 및 표시 유닛(34)을 포함한다.
로딩 유닛(31)은, 웹페이지 뷰 로딩 명령어가 수신될 때 웹페이지 뷰를 로딩하며, 웹페이지 뷰는 클라이언트 뷰를 추가하는 데 사용되는 플레이스홀더 요소를 포함한다.
획득 유닛(32)은 웹페이지 뷰를 로딩한 결과로부터 플레이스홀더 요소의 위치 정보를 얻는다.
추가 유닛(33)은 위치 정보에 클라이언트 뷰를 추가한다.
표시 유닛(34)은 추가된 클라이언트 뷰를 포함하는 웹페이지 뷰를 표시한다.
본 발명의 본 구현에서 제공되는 혼합된 뷰 표시 장치에 포함된 기능적 유닛의 다른 대응 설명에 대해서는 도 1에 나타낸 방법의 대응 설명에 대해 참조가 이루어질 수 있다는 점에 유의할 가치가 있다. 여기서는 간략화를 위해 상세한 설명을 생략한다. 그러나, 본 구현의 장치는 이전 방법의 구현의 모든 내용을 대응적으로 구현할 수 있다는 점에 유의할 가치가 있다.
본 발명의 본 구현은 혼합된 뷰 표시 장치를 제공한다. 우선, 웹페이지 뷰는, 웹페이지 뷰 로딩 명령어가 수신될 때 로딩되며, 웹페이지 뷰는 클라이언트 뷰를 추가하는 데 사용되는 플레이스홀더 요소를 포함한다. 그 후, 웹페이지 뷰를 로딩한 결과로부터 플레이스홀더 요소의 위치 정보가 얻어지고, 클라이언트 뷰가 위치 정보에 추가된다. 궁극적으로, 추가된 클라이언트 뷰를 포함하는 웹페이지 뷰가 표시된다. 본 방법에서는, 서브뷰가 웹뷰에 직접 추가되어 혼합된 뷰를 표시한다. 상술한 본 방법과 비교하여, 본 발명의 구현에서는, 우선, 웹페이지 뷰 로딩 명령어가 수신될 때 웹페이지 뷰를 로딩한 결과로부터 플레이스홀더 요소의 위치 정보가 얻어지고; 그 후, 클라이언트 뷰가 플레이스홀더 요소의 위치에 추가되어 웹페이지 뷰와 클라이언트 뷰를 혼합된 방식으로 표시한다. 본 발명의 구현에서 플레이스홀더 요소는 브라우저 엔진을 사용하여 렌더링될 수 있다. 따라서, 클라이언트 뷰는 로딩 후에 플레이스홀더 요소에 대응하는 위치에 클라이언트 뷰를 추가하여 웹페이지 뷰와 함께 스크롤할 수 있다. 본 발명은 혼합된 뷰를 표시하는 정확성 및 일관성을 향상시킬 수 있다.
또한, 본 발명의 구현은 다른 혼합된 뷰 표시 장치를 제공한다. 도 4에 나타낸 바와 같이, 장치는 로딩 유닛(41), 획득 유닛(42), 추가 유닛(43) 및 표시 유닛(44)을 포함한다.
로딩 유닛(41)은 웹페이지 뷰 로딩 명령어가 수신될 때 웹페이지 뷰를 로딩하며, 웹페이지 뷰는 클라이언트 뷰를 추가하는 데 사용되는 플레이스홀더 요소를 포함한다.
획득 유닛(42)은 웹페이지 뷰를 로딩한 결과로부터 플레이스홀더 요소의 위치 정보를 얻는다.
추가 유닛(43)은 위치 정보에 클라이언트 뷰를 추가한다.
표시 유닛(44)은 추가된 클라이언트 뷰를 포함하는 웹페이지 뷰를 표시한다.
본 발명의 본 구현에서, 장치는 설정 유닛(45)을 더 포함한다.
추가 유닛(43)은 플레이스홀더 요소를 웹페이지 뷰에 추가하고, 대응 식별 정보가 각 플레이스홀더 요소에 설정된다.
설정 유닛(45)은 각 플레이스홀더 요소에 대응하는 클라이언트 뷰를 설정한다.
본 발명의 본 구현에서, 플레이스홀더 요소는 블록-레벨 요소로서 표현된다. 본 장치는: 클라이언트 뷰에 대응하는 상태 정보로서 플레이스홀더 요소의 상태 정보를 구성하도록 구성된 구성 유닛(46)을 더 포함한다.
구성 유닛(46)은 플레이스홀더 요소의 폭/높이 정보를 클라이언트 뷰에 대응하는 폭/높이 정보로 설정한다.
본 발명의 본 구현에서, 추가 유닛(43)은: 웹페이지 뷰를 로딩한 결과로부터 각 플레이스홀더 요소에 대응하는 위치 정보를 얻도록 구성된 획득 모듈(431); 및 위치 정보에 플레이스홀더 요소에 대응하는 클라이언트 뷰를 추가하도록 구성된 추가 모듈(432)을 포함한다.
본 발명의 본 구현에서, 본 장치는: 웹페이지 뷰를 로딩한 결과로부터 플레이스홀더 요소의 위치 정보가 얻어지지 않으면, 웹페이지 뷰를 로딩하는 오류 프롬프트 정보를 출력하도록 구성된 출력 유닛(47)을 더 포함한다.
본 발명의 본 구현에서 제공되는 혼합된 뷰 표시 장치에 포함된 기능적 유닛의 다른 대응 설명에 대해서는 도 2에 나타낸 방법의 대응 설명에 대해 참조가 이루어질 수 있다는 점에 유의할 가치가 있다. 여기서는 간략화를 위해 상세한 설명을 생략한다. 그러나, 본 구현의 장치는 이전 방법의 구현의 모든 내용을 대응적으로 구현할 수 있다는 점에 유의할 가치가 있다.
본 발명의 본 구현은 다른 혼합된 뷰 표시 장치를 제공한다. 우선, 웹페이지 뷰는, 웹페이지 뷰 로딩 명령어가 수신될 때 로딩되며, 웹페이지 뷰는 클라이언트 뷰를 추가하는 데 사용되는 플레이스홀더 요소를 포함한다. 그 후, 웹페이지 뷰를 로딩한 결과로부터 플레이스홀더 요소의 위치 정보가 얻어지며, 클라이언트 뷰가 위치 정보에 추가된다. 궁극적으로, 추가된 클라이언트 뷰를 포함하는 웹페이지 뷰가 표시된다. 본 방법에서는, 서브뷰가 웹뷰에 직접 추가되어 혼합된 뷰를 표시한다. 상술한 본 방법과 비교하여, 본 발명의 구현에서는, 우선, 웹페이지 뷰 로딩 명령어가 수신될 때, 웹페이지 뷰를 로딩한 결과로부터 플레이스홀더 요소의 위치 정보가 얻어지고; 그 후, 클라이언트 뷰가 플레이스홀더 요소의 위치에 추가되어 웹페이지 뷰와 클라이언트 뷰를 혼합된 방식으로 표시한다. 본 발명의 구현에서 플레이스홀더 요소는 브라우저 엔진을 사용하여 렌더링될 수 있다. 따라서, 클라이언트 뷰는 로딩 후에 플레이스홀더 요소에 대응하는 위치에 클라이언트 뷰를 추가하여 웹페이지 뷰와 함께 스크롤할 수 있다. 본 발명은 혼합된 뷰를 표시하는 정확성 및 일관성을 향상시킬 수 있다.
혼합된 뷰 표시 장치는 프로세서 및 메모리를 포함한다. 로딩 유닛, 획득 유닛, 추가 유닛, 표시 유닛, 설정 유닛, 구성 유닛, 출력 유닛 등은 프로그램 유닛으로서 메모리에 저장된다. 프로세서는 메모리에 저장된 프로그램 유닛을 실행하여 대응하는 기능을 구현한다.
프로세서는 커널을 포함한다. 커널은 메모리로부터 대응 프로그램 유닛을 호출한다. 하나 이상의 커널이 있을 수 있다. 커널 파라미터를 조정하여 혼합된 뷰를 표시하는 정확성이 향상된다.
메모리는 컴퓨터 판독 가능 매체, 예를 들어 판독 전용 메모리(ROM) 또는 플래시 메모리(플래시 RAM)에서 비영구적 메모리, 랜덤 액세스 메모리(RAM), 비휘발성 메모리 등을 포함할 수 있다. 메모리는 적어도 하나의 저장 칩을 포함한다.
본 출원은 컴퓨터 프로그램 제품을 추가로 제공한다. 데이터 프로세싱 장치가 컴퓨터 프로그램 제품을 실행할 때, 초기화를 위한 프로그램 코드는: 웹페이지 뷰 표시 위치 스위치 명령어가 수신될 때 표시될 웹페이지 뷰를 로딩하는 단계 - 표시될 웹페이지 뷰는 클라이언트 뷰를 추가하는 데 사용되는 플레이스홀더 요소를 포함함 - ; 표시될 웹페이지 뷰를 로딩한 결과로부터 플레이스홀더 요소의 위치 정보를 얻는 단계; 위치 정보에 클라이언트 뷰를 추가하는 단계; 및 추가된 클라이언트 뷰를 포함하는 웹페이지 뷰를 표시하는 방법의 단계를 포함한다.
본 기술 분야의 통상의 기술자는, 본 출원의 구현이 방법, 시스템 또는 컴퓨터 프로그램 제품으로서 제공될 수 있음을 이해해야 한다. 따라서, 본 출원은 하드웨어만의 구현, 소프트웨어만의 구현, 또는 소프트웨어 및 하드웨어의 조합을 갖는 구현을 사용할 수 있다. 또한, 본 출원은 컴퓨터-사용 가능한 프로그램 코드를 포함하는 하나 이상의 컴퓨터-사용 가능한 저장 매체(자기 디스크 저장 장치, CD-ROM 및 광학 메모리를 포함하지만 이에 한정되지는 않음) 상에 구현되는 컴퓨터 프로그램 제품의 형태를 사용할 수 있다.
본 출원은 본 출원의 구현에 기초한 방법, 장치 및 컴퓨터 프로그램 제품의 흐름도 및/또는 블록도를 참조하여 설명된다. 흐름도 및/또는 블록도에서의 각 프로세스 및/또는 각 블록, 및 흐름도 및/또는 블록도에서의 프로세스 및/또는 블록의 조합을 구현하기 위해 컴퓨터 프로그램 명령어가 사용될 수 있다는 것을 이해해야 한다. 이들 컴퓨터 프로그램 명령어는 머신을 생성하기 위해 범용 컴퓨터, 전용 컴퓨터, 매립형 프로세서 또는 다른 프로그램 가능한 데이터 프로세싱 장치의 프로세서에 대해 제공될 수 있어, 컴퓨터 또는 다른 프로그램 가능한 데이터 프로세싱 장치의 프로세서에 의해 실행되는 명령어가 흐름도의 하나 이상의 프로세스 및/또는 블록도의 하나 이상의 블록의 특정 기능을 구현하기 위한 장치를 생성한다.
컴퓨터 또는 다른 프로그램 가능한 데이터 프로세싱 장치를 특정 방식으로 작동하도록 명령할 수 있는 이들 컴퓨터 프로그램 명령어들은 컴퓨터 판독 가능 메모리에 저장될 수 있어, 컴퓨터 판독 가능 메모리에 저장된 명령어들이 명령 장치를 포함하는 아티팩트를 생성한다. 명령 장치는 흐름도의 하나 이상의 프로세스 및/또는 블록도의 하나 이상의 블록에서 특정 기능을 구현한다.
이들 컴퓨터 프로그램 명령어들은 컴퓨터 또는 다른 프로그램 가능한 데이터 프로세싱 장치에 로딩될 수 있어, 일련의 동작 단계가 컴퓨터 구현 프로세싱을 위해 컴퓨터 또는 다른 프로그램 가능한 장치 상에서 수행될 수 있다. 따라서, 컴퓨터 또는 다른 프로그램 가능한 장치 상에서 실행되는 명령어들은 흐름도의 하나 이상의 프로세스 및/또는 블록도의 하나 이상의 블록에서 특정 기능을 구현하기 위한 단계를 제공한다.
통상적인 구성에서, 컴퓨팅 장치는 하나 이상의 중앙 처리 장치(CPU), 입력/출력 인터페이스, 네트워크 인터페이스 및 메모리를 포함한다.
메모리는 예를 들어, 판독 전용 메모리(ROM) 또는 플래시 메모리(플래시 RAM)와 같은 컴퓨터 판독 가능 매체에서 비영구적 메모리, 랜덤 액세스 메모리(RAM), 비휘발성 메모리 등을 포함할 수 있다. 메모리는 컴퓨터 판독 가능 매체의 예이다.
컴퓨터 판독 가능 매체는 임의의 방법 또는 기술을 사용함으로써 정보 저장을 구현할 수 있는 영구적, 비영구적, 이동 가능 및 비이동식 매체를 포함한다. 정보는 컴퓨터 판독 가능 명령어들, 데이터 구조, 프로그램 모듈 또는 다른 데이터일 수 있다. 컴퓨터 저장 매체는 상-변화 랜덤 액세스 머신(PRAM), 정적 랜덤 액세스 메모리(SRAM), 동적 랜덤 액세스 메모리(DRAM), 다른 유형의 랜덤 액세스 메모리(RAM), 판독 전용 메모리(ROM), 전기적으로 소거 가능하고 프로그램 가능한 판독 전용 메모리(EEPROM), 플래시 메모리 또는 다른 메모리 기술, 컴팩트 디스크 판독 전용 메모리(CD-ROM), 디지털 버서타일 디스크(DVD), 또는 다른 광학 저장 장치, 카세트, 카세트 자기 디스크 저장 장치, 또는 다른 자기 저장 장치 또는 임의의 다른 비전송 매체를 포함하지만, 이에 한정되는 것은 아니다. 컴퓨터 저장 매체는 컴퓨팅 장치에 의해 액세스될 수 있는 정보를 저장하도록 구성될 수 있다. 본 명세서의 정의에 기초하여, 컴퓨터 판독 가능 매체는 일시적 컴퓨터 판독 가능 매체(일시적 매체), 예를 들어, 변조된 데이터 신호 및 캐리어를 포함하지 않는다.
상술한 설명은 단지 본 출원의 구현일 뿐이며, 본 출원을 한정하려고 의도된 것은 아니다. 본 기술 분야의 통상의 기술자에게 있어서, 본 출원은 다양한 수정 및 변형을 가질 수 있다. 본 출원의 사상 및 원리를 벗어나지 않고 이루어진 임의의 수정, 등가의 치환, 개선 등은 본 출원의 청구항의 범위 내에 속할 것이다.

Claims (10)

  1. 혼합된 뷰 표시 방법에 있어서,
    웹페이지 뷰(webpage view) 로딩 명령어가 수신될 때, 클라이언트 뷰를 추가하는 데 사용되는 플레이스홀더 요소(placeholder element)를 포함하는 웹페이지 뷰를 로딩하는 단계;
    상기 웹페이지 뷰를 로딩한 결과로부터 상기 플레이스홀더 요소의 위치 정보를 얻는 단계;
    상기 클라이언트 뷰를 상기 위치 정보에 추가하는 단계; 및
    추가된 클라이언트 뷰를 포함하는 웹페이지 뷰를 표시하는 단계를 포함하는, 혼합된 뷰 표시 방법.
  2. 제1항에 있어서,
    상기 웹페이지 뷰를 로딩하는 단계 전에,
    상기 플레이스홀더 요소를 상기 웹페이지 뷰에 추가하는 단계 - 각 플레이스홀더 요소에 대해 대응하는 식별 정보가 설정됨 - ; 및
    각 플레이스홀더 요소에 대응하는 클라이언트 뷰를 설정하는 단계를 더 포함하는, 혼합된 뷰 표시 방법.
  3. 제2항에 있어서,
    상기 플레이스홀더 요소는 블록-레벨 요소로서 표현되고, 상기 클라이언트 뷰를 상기 위치 정보에 추가하는 단계 후에,
    상기 플레이스홀더 요소의 상태 정보를 상기 클라이언트 뷰에 대응하는 상태 정보로서 구성하는 단계를 더 포함하는, 혼합된 뷰 표시 방법.
  4. 제3항에 있어서,
    상기 플레이스홀더 요소의 상태 정보를 상기 클라이언트 뷰에 대응하는 상태 정보로서 구성하는 단계는,
    상기 플레이스홀더 요소의 폭/높이 정보를 상기 클라이언트 뷰에 대응하는 폭/높이 정보로 설정하는 단계를 포함하는 것인, 혼합된 뷰 표시 방법.
  5. 제2항에 있어서,
    상기 클라이언트 뷰를 상기 위치 정보에 추가하는 단계는,
    상기 웹페이지 뷰를 로딩한 결과로부터 각 플레이스홀더 요소에 대응하는 위치 정보를 얻는 단계; 및
    상기 위치 정보에, 상기 플레이스홀더 요소에 대응하는 클라이언트 뷰를 추가하는 단계를 포함하는 것인, 혼합된 뷰 표시 방법.
  6. 제1항에 있어서,
    상기 웹페이지 뷰를 로딩한 결과로부터 상기 플레이스홀더 요소의 상기 위치 정보가 얻어지지 않는 경우, 상기 웹페이지 뷰를 로딩하는 오류 프롬프트 정보를 출력하는 단계를 더 포함하는, 혼합된 뷰 표시 방법.
  7. 혼합된 뷰 표시 장치에 있어서,
    웹페이지 뷰 로딩 명령어가 수신될 때, 클라이언트 뷰를 추가하는 데 사용되는 플레이스홀더 요소를 포함하는 웹페이지 뷰를 로딩하도록 구성되는 로딩 유닛;
    상기 웹페이지 뷰를 로딩한 결과로부터 상기 플레이스홀더 요소의 위치 정보를 얻도록 구성된 획득 유닛;
    상기 클라이언트 뷰를 상기 위치 정보에 추가하도록 구성된 추가 유닛; 및
    추가된 클라이언트 뷰를 포함하는 웹페이지 뷰를 표시하도록 구성된 표시 유닛을 포함하는, 혼합된 뷰 표시 장치.
  8. 제7항에 있어서,
    설정 유닛을 더 포함하고,
    상기 추가 유닛은 상기 플레이스홀더 요소를 상기 웹페이지 뷰에 추가하며, 각 플레이스홀더 요소에 대해 대응 식별 정보가 설정되고; 및
    상기 설정 유닛은 각 플레이스홀더 요소에 대응하는 클라이언트 뷰를 설정하는 것인, 혼합된 뷰 표시 장치.
  9. 제8항에 있어서,
    상기 플레이스홀더 요소는 블록-레벨 요소로서 표현되고, 상기 혼합된 뷰 표시 장치는,
    상기 플레이스홀더 요소의 상태 정보를 상기 클라이언트 뷰에 대응하는 상태 정보로서 구성하도록 구성된 구성 유닛을 더 포함하는, 혼합된 뷰 표시 장치.
  10. 제9항에 있어서,
    상기 구성 유닛은 상기 플레이스홀더 요소의 폭/높이 정보를 상기 클라이언트 뷰에 대응하는 폭/높이 정보로 설정하는 것인, 혼합된 뷰 표시 장치.
KR1020187030825A 2016-03-24 2017-03-13 혼합된 뷰 표시 방법 및 장치 KR102293685B1 (ko)

Applications Claiming Priority (3)

Application Number Priority Date Filing Date Title
CN201610172774.1 2016-03-24
CN201610172774.1A CN107229454B (zh) 2016-03-24 2016-03-24 混合视图的显示方法及装置
PCT/CN2017/076421 WO2017162061A1 (zh) 2016-03-24 2017-03-13 混合视图的显示方法及装置

Publications (2)

Publication Number Publication Date
KR20180134927A true KR20180134927A (ko) 2018-12-19
KR102293685B1 KR102293685B1 (ko) 2021-08-27

Family

ID=59899212

Family Applications (1)

Application Number Title Priority Date Filing Date
KR1020187030825A KR102293685B1 (ko) 2016-03-24 2017-03-13 혼합된 뷰 표시 방법 및 장치

Country Status (10)

Country Link
US (1) US10789420B2 (ko)
EP (1) EP3435225A4 (ko)
JP (1) JP2019513268A (ko)
KR (1) KR102293685B1 (ko)
CN (1) CN107229454B (ko)
MY (1) MY197000A (ko)
PH (1) PH12018502001A1 (ko)
SG (1) SG11201808002YA (ko)
TW (1) TWI700638B (ko)
WO (1) WO2017162061A1 (ko)

Families Citing this family (14)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN107818008B (zh) * 2017-11-21 2021-02-02 武汉斗鱼网络科技有限公司 页面加载方法及装置
CN108052548A (zh) * 2017-11-27 2018-05-18 深圳市前海圆舟网络科技股份有限公司 一种网页创建的方法、系统及终端设备
EP3496404A1 (en) * 2017-12-06 2019-06-12 V-Nova International Limited Image processing
CN109947424A (zh) * 2017-12-21 2019-06-28 天津数观科技有限公司 一种iOS App嵌入HTML5界面的数据处理方法
CN108875085B (zh) * 2018-07-18 2023-04-07 平安科技（深圳）有限公司 混合应用的图片处理方法、装置、计算机设备及存储介质
CN111552525A (zh) * 2019-01-24 2020-08-18 北京京东尚科信息技术有限公司 骨架屏生成方法及装置
CN111177635B (zh) * 2020-01-06 2024-01-02 北京字节跳动网络技术有限公司 网页显示高度确定方法、装置、存储介质及设备
CN111324834B (zh) * 2020-01-20 2024-01-16 北京有竹居网络技术有限公司 图文混排的方法、装置、电子设备及计算机可读介质
US11210106B2 (en) * 2020-01-28 2021-12-28 Microsoft Technology Licensing, Llc Simulated visual hierarchy while facilitating cross-extension communication
CN111522599B (zh) * 2020-04-13 2023-06-30 百度在线网络技术（北京）有限公司 用于发送信息的方法和装置
CN111782214B (zh) * 2020-07-03 2024-04-23 携程商旅信息服务（上海）有限公司 客户端系统、运行方法、电子设备和存储介质
CN113343151A (zh) * 2021-06-25 2021-09-03 上海渠杰信息科技有限公司 一种网页视图的处理方法及设备
DE102022202941A1 (de) 2022-03-25 2023-09-28 Robert Bosch Gesellschaft mit beschränkter Haftung Überwachungsanordnung, Verfahren zur Überwachung, Computerprogramm und Datenträger
DE102022202943A1 (de) 2022-03-25 2023-09-28 Robert Bosch Gesellschaft mit beschränkter Haftung Überwachungsanordnung mit Zugriffsberechtigung, Verfahren, Computerprogramm und Speichermedium

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR20020039646A (ko) * 2002-02-20 2002-05-27 (주) 퍼슨넷 에러페이지를 이용한 부가정보 관리방법
JP2011516943A (ja) * 2008-03-21 2011-05-26 コーニンクレッカ フィリップス エレクトロニクス エヌ ヴィ クライアントによって生成された情報を表示する方法
US20120284632A1 (en) * 2011-05-06 2012-11-08 Cisco Technology, Inc. Integrated Rendering of Streaming Media in Virtualized Desktop Environment
US20130132820A1 (en) * 2012-06-07 2013-05-23 Eric Poindessault Web browsing tool delivering relevant content

Family Cites Families (21)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
EP1256070A2 (en) * 2000-02-04 2002-11-13 America Online, Inc. System and process for delivering and rendering scalable web pages
US20020184337A1 (en) * 2001-05-21 2002-12-05 Anders Hyldahl Method and computer system for constructing references to virtual data
US8001477B2 (en) * 2005-11-11 2011-08-16 International Business Machines Corporation Method for exchanging portlet configuration data
US20090043777A1 (en) * 2006-03-01 2009-02-12 Eran Shmuel Wyler Methods and apparatus for enabling use of web content on various types of devices
US20080127133A1 (en) * 2006-11-28 2008-05-29 International Business Machines Corporation Aggregating portlets for use within a client environment without relying upon server resources
US20090119607A1 (en) * 2007-11-02 2009-05-07 Microsoft Corporation Integration of disparate rendering platforms
US9483449B1 (en) * 2010-07-30 2016-11-01 Amazon Technologies, Inc. Optimizing page output through run-time reordering of page content
US8667090B2 (en) * 2010-12-07 2014-03-04 Cisco Technology, Inc. Delivering a webpage to a client
CN102073502B (zh) * 2011-01-11 2013-02-20 百度在线网络技术（北京）有限公司 一种利用web原生布局进行页面渲染的方法及装置
US9058401B2 (en) * 2011-08-16 2015-06-16 Fabebook, Inc. Aggregating plug-in requests for improved client performance
US10498889B2 (en) * 2011-09-16 2019-12-03 Skype Advertisement funded telephone calls
US20140325343A1 (en) * 2011-12-07 2014-10-30 Adinfinity Holdings Pty Ltd As Trustee For Adinfinity Ip Trust Systems and methods for processing web page data
US9037914B1 (en) * 2012-06-28 2015-05-19 Google Inc. Error handling for widgets
US9910833B2 (en) * 2012-11-13 2018-03-06 International Business Machines Corporation Automatically rendering web and/or hybrid applications natively in parallel
CN102999613B (zh) * 2012-11-28 2016-03-30 北京奇虎科技有限公司 一种在浏览器中加载工具类窗口的方法及其装置
US9754245B1 (en) * 2013-02-15 2017-09-05 Amazon Technologies, Inc. Payments portal
US9374446B2 (en) * 2013-05-15 2016-06-21 Microsoft Technology Licensing, Llc Web platform with select-to-call functionality
US9451005B2 (en) * 2013-07-15 2016-09-20 Microsoft Technology Licensing, Llc Delegation of rendering between a web application and a native application
CN104657118A (zh) * 2013-11-18 2015-05-27 中国移动通信集团公司 Native+Web混合移动应用的实现方法及装置
US20150234930A1 (en) * 2014-02-19 2015-08-20 Google Inc. Methods and systems for providing functional extensions with a landing page of a creative
US9858494B2 (en) * 2015-12-28 2018-01-02 Facebook, Inc. Systems and methods for analyzing rendered content

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR20020039646A (ko) * 2002-02-20 2002-05-27 (주) 퍼슨넷 에러페이지를 이용한 부가정보 관리방법
JP2011516943A (ja) * 2008-03-21 2011-05-26 コーニンクレッカ フィリップス エレクトロニクス エヌ ヴィ クライアントによって生成された情報を表示する方法
US20120284632A1 (en) * 2011-05-06 2012-11-08 Cisco Technology, Inc. Integrated Rendering of Streaming Media in Virtualized Desktop Environment
US20130132820A1 (en) * 2012-06-07 2013-05-23 Eric Poindessault Web browsing tool delivering relevant content

Also Published As

Publication number Publication date
CN107229454B (zh) 2019-11-12
EP3435225A4 (en) 2019-12-11
TW201734773A (zh) 2017-10-01
KR102293685B1 (ko) 2021-08-27
WO2017162061A1 (zh) 2017-09-28
US10789420B2 (en) 2020-09-29
PH12018502001A1 (en) 2019-07-01
CN107229454A (zh) 2017-10-03
EP3435225A1 (en) 2019-01-30
US20190018830A1 (en) 2019-01-17
TWI700638B (zh) 2020-08-01
JP2019513268A (ja) 2019-05-23
MY197000A (en) 2023-05-17
SG11201808002YA (en) 2018-10-30

Similar Documents

Publication Publication Date Title
KR20180134927A (ko) 혼합된 뷰 표시 방법 및 장치
CN108345535B (zh) mock测试方法、装置及设备
US10303748B2 (en) Method and device for providing webpage browsing based on web browser engine kernel
CN111835864B (zh) 一种启动应用的方法和系统
CN107526592B (zh) 一种页面适配方法和装置
CN104820589B (zh) 一种动态适配网页的方法及其装置
CN108647076B (zh) 一种页面处理方法、装置及设备
CN107038219B (zh) iOS中加载GIF动画的方法及装置
CN111767002B (zh) 页面展示方法、装置、设备及存储介质
KR20180105159A (ko) 부정확하게 입력된 정보에 관한 페이지를 위치 지정하기 위한 방법 및 디바이스
CN112068911B (zh) 电子表单的生成方法、装置、系统、设备以及介质
CN112433726A (zh) 一种Echarts图表组件的封装方法及设备
CN109460540A (zh) 一种表格分页显示方法及装置
CN107943490A (zh) 应用安装方法、设备、计算机可读存储介质及计算机装置
CN105404574B (zh) 一种智能卡与移动终端一致性测试方法及装置
CN104572431A (zh) 一种测试方法及装置
CN111158673A (zh) 一种配置转盘活动页面的方法及装置
CN108664310A (zh) 显示框处理方法、装置、计算机设备和存储介质
CN110968385A (zh) 比例显示方法和装置
CN108427525B (zh) 应用的识别码的展示方法及装置
CN110968811A (zh) 显示控制方法和装置
WO2019019757A1 (zh) 视图展示方法及装置、存储器及用户终端
CN109766157A (zh) 用户界面显示方法、装置、计算机设备和存储介质
CN103324743A (zh) 一种电子设备上网页缩放和对齐的方法和装置
CN107688636B (zh) 一种页面适配方法和装置

Legal Events

Date Code Title Description
N231 Notification of change of applicant
E902 Notification of reason for refusal
E701 Decision to grant or registration of patent right