TEdgeBrowser에서 스크립트 실행하기와 소스 보기

10.4.2 시드니에서 델파이, C++빌더, RAD스튜디오에 있는 TEdgeBrowser는 마이크로소프트 Edge와 해당 Edge WebView2 런타임의 정식 릴리즈 버전에서 작동한다. 이 VCL 컴포넌트 즉 TEdgeBrowser는 기존의 TWebBrowser를 능가하는 향상된 기능을 제공하는데 그 중에서 일부를 소개하고자 한다. 임의의 HTML 구문 렌더링, 임의의 자바스크립트 실행, 웹페이지에서 HTML 소스 잡아오기이다.

먼저, TEdgeBrowser를 설치해야한다. 다음 3단계로 진행한다:

GetIt에서 EdgeView2 SDK를 찾아 설치하기

1. GetIt에서 EdgeView2 SDK를 찾아 설치한다.

  • IDE에서 GetIt창을 이용한다.
  • 또는, GetItCmd와 RAD스튜디오 명령 프롬프트를 이용한다(AutoGetIt도 이용 가능).
    getitcmd -ae -i=EdgeView2SDK-1.0.664.37

2. 환경에 맞는 Microsoft EdgeView2 런타임을 다운로드하고 설치한다. 

  • 3가지 방법 중 1가지를 선택할 수 있다.
    1. Evergreen Bootstraper – 현재 아키텍처에 맞는 최신 런타입을 다운로드하고 설치한다. 배포할 애플리케이션과 함께 설치할 때 사용한다.
    2. Evergreen 독립 설치기 – 윈32 또는 윈64용을 오프라인에서 설치한다.
    3. 버전 고정 – Evergreen 독립 설치기 방식이며, 최신 버전 대신 원하는 이전 버전을 다운로드하고 설치할 수 있다. 
  • 윈32 애플리케이션을 구축하고 있다면 x86버전을, 윈64 애플리케이션이라면 x64 버전을 설치한다. 둘 다 설치해도 된다.

3. 당신의 프로그램은 실행 중에 WebView2Loader.dll에 접근할 수 있어야 한다. 가장 쉬운 방법은 해당 dll을 실행 파일과 같은 위치에 두거나, 또는 Post Build 이벤트를 사용하는 것이다.

  • Win32 용: copy /y “$(BDS)Redistwin64WebView2Loader.dll” “$(OUTPUTDIR)”
  • Win64 용: copy /y “$(BDS)Redistwin32WebView2Loader.dll” “$(OUTPUTDIR)”
IDE에서 프로젝트 옵션 > Build Events 명령 사용하기

애플리케이션을 배포할 때 올바른 WebView2Loader.dll 를 포함해야 한다. 그리고, 사용자 컴퓨터에 Microsoft EdgeView2 런타임이 설치되어 있는 지를 확인해야 한다. 언젠간 기본 설치가 될 수도 있겠으나, 가장 쉬운 방식은 Evergreen Bootstrapper를 사용하는 것이다.

임의의 HTML 표현하기

임의의 HTML을 TEdgeView 안에 올리려면, NavigateToString 메소드를 호출하여 해당 HTML을 문자열로 전달한다.

그러면, 코드가 브라우저 안에서 바로 렌더링 된다. HTML을 별도의 파일에 저장하고  불러오는 과정이 필요 없다.

임의의 자바스크립트 실행하기

TEdgeBrowser의 ExecuteScript 메소드를 사용하면 자바스크립트를 실행할 수 있다.

이 스크립트는 현재 페이지 안에서 실행된다, 마치 브라우저에서 자바스크립트 콘솔을 열어서 하는 것과 같다. 따라서 DOM을 다룰 수도 있다.

소스 보기

웹페이지의 소스 보기를 하려면 ExecuteScript 메소드에서부터 시작한다. 하지만, 조금 더 해야 할 것이 있다. 스크립트는 비동기로 실행되기 때문에 당신의 스크립트 실행이 끝날 때를 다루는 이벤트 핸들러가 있다. 이 이벤트 시 JSON 오브젝트를 반환할 수 있는데, 반환되는 JSON 오브젝트로 해당 HTML소스를 반환할 수 있다.

아래와 같이 DOM (Document Object Model)을 사용하여 Document Element(루트 엘리먼트, 즉 <HTML> )을 잡고 해당 outerHTML를 요청한다. outerHTML는 해당 Document Element에 들어 있는 모든 HTML이다. 그리고 나서 우리는 encodeURL을 사용하여 HTML을 인코딩한다. 해당 [OnExecuteScript] 이벤트 핸들러 코드는 다음과 같다.

이 이벤트는 [ExecuteScript] 메소드가 호출되고 난 후에 항상 실행된다. 하지만, 반환되는 결과값이 없는 경우에는 [AResultObjectAsJson] 파라미터에 [‘null’]이 들어 있을 것이다. 따라서 우리는 해당 ‘null’ 값은 무시해야 한다. ‘null’이 아닌 값이 전달되었을 때에는 [TNetEncoding.URL.Decode]를 사용하여 해당 인코딩을 제거하고, [DeQuotedString(‘ ” ‘)]를 사용하여 쌍따옴표를 제거한다.

그 결과를 받아서 NavigateToString() 안에 넣어서 바로 보낼 수도 있다.

요약

깃허브에 있는 해당 데모 코드: RAD Studio-Demo Kit/10.4.2-demos/EdgeView

TEdgeBrowser는 업그레이드 하지 않았다면 놓치고 있을 10.4.2 시드니에서 향상된 기능 중 하나이다. 

10.4.2에서 업데이트된 기능들:

AI api C++ c++빌더 code database Delphi fmx IDE ideas interbase ios migration modernization news python RAD스튜디오 tips UI UIUX vcl 개발 개발사례 개발팁 교육 기술레터 기술백서 데이터 데이터베이스 델파이 마이그레이션 모바일 안드로이드 윈도우 윈도우10 인공지능 인터베이스 출시 코드 파이썬 파이어몽키 프로그래밍 프로젝트 현대화