Merge pull request #6 from MicrosoftEdge/user/peiche/1209-sdk

Update sample app as part of 12/09 SDK release

Author: pagoe-msft

WebView2APISample/AppWindow.cpp

@@ -17,6 +17,7 @@
 #include "Resource.h"
 #include "ScenarioAddRemoteObject.h"
 #include "ScenarioWebMessage.h"
+#include "ScenarioWebViewEventMonitor.h"
 #include "ScriptComponent.h"
 #include "SettingsComponent.h"
 #include "ViewComponent.h"
@@ -29,7 +30,8 @@ static constexpr UINT s_runAsyncWindowMessage = WM_APP;
 static thread_local size_t s_appInstances = 0;
 
 // Creates a new window which is a copy of the entire app, but on the same thread.
-AppWindow::AppWindow(std::wstring initialUri) : m_initialUri(initialUri)
+AppWindow::AppWindow(std::wstring initialUri, std::function<void()> webviewCreatedCallback)
+    : m_initialUri(initialUri), m_onWebViewFirstInitialized(webviewCreatedCallback)
 {
     ++s_appInstances;
 
@@ -222,6 +224,11 @@ bool AppWindow::ExecuteWebViewCommands(WPARAM wParam, LPARAM lParam)
         NewComponent<ScenarioAddRemoteObject>(this);
         return true;
     }
+    case IDM_SCENARIO_WEB_VIEW_EVENT_MONITOR:
+    {
+        NewComponent<ScenarioWebViewEventMonitor>(this);
+        return true;
+    }
     }
     return false;
 }
@@ -250,6 +257,19 @@ bool AppWindow::ExecuteAppCommands(WPARAM wParam, LPARAM lParam)
     case IDM_REINIT_INSTALLED:
         InitializeWebView(kUseInstalledBrowser);
         return true;
+    case IDM_REINIT_WINDOWED:
+        InitializeWebView(kDefaultOption);
+        return true;
+    case IDM_TOGGLE_FULLSCREEN_ALLOWED:
+    {
+        m_fullScreenAllowed = !m_fullScreenAllowed;
+        MessageBox(nullptr,
+                   (std::wstring(L"Fullscreen is now ") +
+                       (m_fullScreenAllowed ? L"allowed" : L"disallowed"))
+                       .c_str(),
+                   L"", MB_OK);
+        return true;
+    }
     case IDM_NEW_WINDOW:
         new AppWindow();
         return true;
@@ -407,8 +427,7 @@ void AppWindow::ReinitializeWebView()
     // Save the settings component from being deleted when the WebView is closed, so we can
     // copy its properties to the next settings component.
     m_oldSettingsComponent = MoveComponent<SettingsComponent>();
-    // Workaround for Edge Bug 23006983
-    RunAsync([this] { InitializeWebView(m_lastUsedInitFlags); });
+    InitializeWebView(m_lastUsedInitFlags);
 }
 
 void AppWindow::ReinitializeWebViewWithNewBrowser()
@@ -470,6 +489,29 @@ void AppWindow::RestartApp()
 
 void AppWindow::RegisterEventHandlers()
 {
+    //! [ContainsFullScreenElementChanged]
+    // Register a handler for the ContainsFullScreenChanged event.
+    CHECK_FAILURE(m_webView->add_ContainsFullScreenElementChanged(
+        Callback<IWebView2ContainsFullScreenElementChangedEventHandler>(
+            [this](IWebView2WebView5* sender, IUnknown* args) -> HRESULT {
+                if (m_fullScreenAllowed)
+                {
+                    CHECK_FAILURE(sender->get_ContainsFullScreenElement(&m_containsFullscreenElement));
+                    if (m_containsFullscreenElement)
+                    {
+                        EnterFullScreen();
+                    }
+                    else
+                    {
+                        ExitFullScreen();
+                    }
+                }
+                return S_OK;
+            })
+            .Get(),
+        nullptr));
+    //! [ContainsFullScreenElementChanged]
+
     //! [NewWindowRequested]
     // Register a handler for the NewWindowRequested event.
     // This handler will defer the event, create a new app window, and then once the
@@ -491,7 +533,7 @@ void AppWindow::RegisterEventHandlers()
                 return S_OK;
             })
             .Get(),
-        &m_newWindowRequestedToken));
+        nullptr));
     //! [NewWindowRequested]
 
     //! [NewVersionAvailable]
@@ -509,12 +551,15 @@ void AppWindow::RegisterEventHandlers()
                 message += L"\n\nVersion number: ";
                 message += newVersion.get();
                 message += L"\n\n";
-                message += L"Do you want to restart the app? \n\n";
-                message += L"Click No if you only want to re-create the webviews. \n";
-                message += L"Click Cancel for no action. \n";
-
+                if (m_webView)
+                {
+                    message += L"Do you want to restart the app? \n\n";
+                    message += L"Click No if you only want to re-create the webviews. \n";
+                    message += L"Click Cancel for no action. \n";
+                }
                 int response = MessageBox(
-                    m_mainWindow, message.c_str(), L"New available version", MB_YESNOCANCEL);
+                    m_mainWindow, message.c_str(), L"New available version",
+                    m_webView ? MB_YESNOCANCEL : MB_OK);
 
                 if (response == IDYES)
                 {
@@ -532,7 +577,7 @@ void AppWindow::RegisterEventHandlers()
                 return S_OK;
             })
             .Get(),
-        &m_newVersionAvailableToken));
+        nullptr));
     //! [NewVersionAvailable]
 }
 
@@ -541,7 +586,12 @@ void AppWindow::ResizeEverything()
 {
     RECT availableBounds = {0};
     GetClientRect(m_mainWindow, &availableBounds);
+
+    if (!m_containsFullscreenElement)
+    {
         availableBounds = m_toolbar.Resize(availableBounds);
+    }
+
     if (auto view = GetComponent<ViewComponent>())
     {
         view->SetBounds(availableBounds);
@@ -643,3 +693,33 @@ void AppWindow::RunAsync(std::function<void()> callback)
     auto* task = new std::function<void()>(callback);
     PostMessage(m_mainWindow, s_runAsyncWindowMessage, reinterpret_cast<WPARAM>(task), 0);
 }
+
+void AppWindow::EnterFullScreen()
+{
+    DWORD style = GetWindowLong(m_mainWindow, GWL_STYLE);
+    MONITORINFO monitor_info = {sizeof(monitor_info)};
+    m_hMenu = ::GetMenu(m_mainWindow);
+    ::SetMenu(m_mainWindow, nullptr);
+    if (GetWindowPlacement(m_mainWindow, &m_previousPlacement) &&
+        GetMonitorInfo(
+            MonitorFromWindow(m_mainWindow, MONITOR_DEFAULTTOPRIMARY), &monitor_info))
+    {
+        SetWindowLong(m_mainWindow, GWL_STYLE, style & ~WS_OVERLAPPEDWINDOW);
+        SetWindowPos(
+            m_mainWindow, HWND_TOP, monitor_info.rcMonitor.left, monitor_info.rcMonitor.top,
+            monitor_info.rcMonitor.right - monitor_info.rcMonitor.left,
+            monitor_info.rcMonitor.bottom - monitor_info.rcMonitor.top,
+            SWP_NOOWNERZORDER | SWP_FRAMECHANGED);
+    }
+}
+
+void AppWindow::ExitFullScreen()
+{
+    DWORD style = GetWindowLong(m_mainWindow, GWL_STYLE);
+    ::SetMenu(m_mainWindow, m_hMenu);
+    SetWindowLong(m_mainWindow, GWL_STYLE, style | WS_OVERLAPPEDWINDOW);
+    SetWindowPlacement(m_mainWindow, &m_previousPlacement);
+    SetWindowPos(
+        m_mainWindow, NULL, 0, 0, 0, 0,
+        SWP_NOMOVE | SWP_NOSIZE | SWP_NOZORDER | SWP_NOOWNERZORDER | SWP_FRAMECHANGED);
+}

WebView2APISample/AppWindow.h

@@ -20,9 +20,10 @@ class SettingsComponent;
 class AppWindow
 {
 public:
-    AppWindow(std::wstring initialUri = L"https://www.bing.com/");
+    AppWindow(std::wstring initialUri = L"https://www.bing.com/",
+              std::function<void()> webviewCreatedCallback = nullptr);
 
-    IWebView2WebView4* GetWebView()
+    IWebView2WebView5* GetWebView()
     {
         return m_webView.get();
     }
@@ -89,9 +90,7 @@ class AppWindow
     // be reinitialized along with it.  Everything here is undefined when
     // m_webView is null.
     wil::com_ptr<IWebView2Environment3> m_webViewEnvironment;
-    wil::com_ptr<IWebView2WebView4> m_webView;
-    EventRegistrationToken m_newWindowRequestedToken = {};
-    EventRegistrationToken m_newVersionAvailableToken = {};
+    wil::com_ptr<IWebView2WebView5> m_webView;
 
     // All components are deleted when the WebView is closed.
     std::vector<std::unique_ptr<ComponentBase>> m_components;
@@ -100,6 +99,14 @@ class AppWindow
     // a new WebView based on the settings of the old one.
     InitializeWebViewFlags m_lastUsedInitFlags;
     std::unique_ptr<SettingsComponent> m_oldSettingsComponent;
+
+    // Fullscreen related code
+    WINDOWPLACEMENT m_previousPlacement;
+    HMENU m_hMenu;
+    BOOL m_containsFullscreenElement;
+    bool m_fullScreenAllowed = true;
+    void EnterFullScreen();
+    void ExitFullScreen();
 };
 
 template <class ComponentType, class... Args> void AppWindow::NewComponent(Args&&... args)

WebView2APISample/ControlComponent.h

@@ -36,7 +36,7 @@ class ControlComponent : public ComponentBase
 
 private:
     AppWindow* m_appWindow;
-    wil::com_ptr<IWebView2WebView4> m_webView;
+    wil::com_ptr<IWebView2WebView5> m_webView;
     Toolbar* m_toolbar;
 
     std::vector<std::pair<HWND, WNDPROC>> m_tabbableWindows;

WebView2APISample/README.md

@@ -2,7 +2,7 @@
 
 This is a hybrid application built with the [Microsoft Edge WebView2](https://docs.microsoft.com/en-us/microsoft-edge/hosting/webview2) control.
 
-![alt text](documentation/Screenshots/Sample-App-Screenshot.png)
+![alt text](documentation/Screenshots/Sample-App-Screenshot.PNG)
 
 
 The WebView2APISample is an example of an application that embeds a WebView within a Win32 native application. It is built as a Win32 [Visual Studio 2019](https://visualstudio.microsoft.com/vs/) project and makes use of both C++ and HTML/CSS/JavaScript in the WebView2 environment.
@@ -41,7 +41,7 @@ This hybrid approach allows you to create and iterate faster using web technolog
 
 Both of these parts of the Sample App are displayed in the image below:
 
-![alt text](documentation/Screenshots/Sample-App-Layout-Diagram.png)
+![alt text](documentation/Screenshots/Sample-App-Layout-Diagram.PNG)
 1. Section One: The top part of the Sample App is a Win32 component written in C++. This part of the application takes in UI inputs from the user and uses them to control the WebView.
 
 2. Section Two: The main part of the Sample App is a WebView that can be repurposed using standard web technologies (HTML/CSS/JavaScript). It can be navigated to websites or local content.
@@ -74,7 +74,7 @@ This component handles commands from the View menu, and any functionality relate
 #### 8. ScenarioWebMessage.cpp and ScenarioWebMessage.html
 This component is created when you select the Scenario/Web Messaging menu item. It implements an example application with a C++ part and an HTML+JavaScript part, which communicate with each other by asynchronously posting and recieving messages.
 
-![alt text](documentation/Screenshots/Sample-App-WebMessaging-Screenshot.png)
+![alt text](documentation/Screenshots/Sample-App-WebMessaging-Screenshot.PNG)
 
 #### 9. ScenarioAddRemoteObject.cpp and ScenarioAddRemoteObject.html
 This component is created when you select the Scenario/Remote Objects menu item. It demonstrates communication between the native app and the HTML webpage by means of remote object injection.  The interface of the remote object is declared in RemoteObjectSample.idl, and the object itself is implemented in RemoteObjectSampleImpl.cpp.
@@ -180,7 +180,7 @@ First, navigate to the ScenarioWebMessage application within the Sample App, usi
 
 The WebView should display a simple webpage titled: "WebMessage sample page". The code for this page can be found in the ScenarioWebMessage.html file.
 
-![alt text](documentation/Screenshots/Sample-App-WebMessaging-Screenshot.png)
+![alt text](documentation/Screenshots/Sample-App-WebMessaging-Screenshot.PNG)
 
 To better understand ScenarioWebMessage functionality, you can either follow the instructions on the page or the steps detailed below.
 

WebView2APISample/ScenarioAddRemoteObject.h

@@ -20,7 +20,7 @@ class ScenarioAddRemoteObject : public ComponentBase
 
 private:
     AppWindow* m_appWindow = nullptr;
-    wil::com_ptr<IWebView2WebView4> m_webView;
+    wil::com_ptr<IWebView2WebView5> m_webView;
     wil::com_ptr<RemoteObjectSample> m_remoteObject;
 
     EventRegistrationToken m_navigationStartingToken = {};