WebEngine Widgets WebUI Example

Displays HTML over a custom scheme.
Article lu fois.
L'auteur

The Qt Company Ltd.
L'article

Publié le 27 décembre 2024 - Mis à jour le 27 décembre 2024
Liens sociaux

WebEngine Widgets WebUI Example▲

Sélectionnez
&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;Qt WebEngine WebUI Example&lt;/title&gt;
        &lt;style&gt;
         html {
             background: #f0f0f0;
             color: #303030;
             font: 16px system-ui;
             height: 100%;
         }

         body {
             margin: 0;
             padding: 0;
             height: 100%;
             display: flex;
             flex-direction: column;
             align-items: stretch;
         }

         body &gt; * {
             padding-left: 20px;
             padding-right: 20px;
         }

         header {
             flex: none;
             display: flex;
             align-items: center;
             background: #f0fff0;
             border-bottom: 1px solid #e0e0e0;
             padding-top: 20px;
             padding-bottom: 20px;
         }

         header &gt; h1 {
             font: bold 20px system-ui;
             margin-left: 18px;
         }

         main {
             flex: auto;
         }

         footer {
             flex: none;
             display: flex;
             justify-content: center;
             padding-bottom: 20px;
         }

         button {
             background: #41cd52;
             color: #f0f0f0;
             font: 16px system-ui;
             border: 0;
             box-shadow: 0px 1px 3px rgb(0,0,0,0.5);
             cursor: pointer;
             margin: 0 0 1px;
             padding: 10px 24px;
         }

         button:hover {
             background: #50dc61;
         }

         button:active {
             background: #50dc61;
             box-shadow: 0px 1px 2px rgb(0,0,0,0.5);
             margin: 1px 0 0;
         }

         button:focus {
             outline: 0;
         }

        &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;header&gt;
            &lt;img width="48px" height="48px"
                 src="qrc:/qt-project.org/qmessagebox/images/qtlogo-64.png"&gt;
            &lt;h1&gt;WebEngine Widgets&lt;br&gt;WebUI Example&lt;/h1&gt;
        &lt;/header&gt;
        &lt;main&gt;
            &lt;p&gt;
                Aside from the built-in schemes, such as &lt;code&gt;http&lt;/code&gt; and
                &lt;code&gt;qrc&lt;/code&gt;, Qt WebEngine may be extended with &lt;em&gt;custom
                schemes&lt;/em&gt; by creating &lt;em&gt;custom scheme handlers&lt;/em&gt;.
            &lt;/p&gt;

            &lt;p&gt;
                This is a simple HTML page loaded from a custom scheme and
                displayed by a &lt;code&gt;QWebEngineView&lt;/code&gt;. Even the Quit button
                below is a standard HTML &lt;code&gt;&amp;lt;button&amp;gt;&lt;/code&gt; element.
            &lt;/p&gt;

            &lt;p&gt;
                Read the documentation to find out
            &lt;/p&gt;
            &lt;ul&gt;
                &lt;li&gt;
                    &lt;p&gt;
                        How to create a custom scheme handler which serves HTML
                        and handles HTML form submissions.
                    &lt;/p&gt;
                &lt;/li&gt;
                &lt;li&gt;
                    &lt;p&gt;
                        How to prevent ordinary web content from accessing the
                        custom scheme.
                    &lt;/p&gt;
                &lt;/li&gt;
                &lt;li&gt;
                    &lt;p&gt;
                        How to prevent any other scheme from submitting HTML
                        form data.
                    &lt;/p&gt;
                &lt;/li&gt;
            &lt;/ul&gt;
        &lt;/main&gt;
        &lt;footer&gt;
            &lt;form action="" method="post"&gt;
                &lt;button name="quit"&gt;Quit&lt;/button&gt;
            &lt;/form&gt;
        &lt;/footer&gt;
    &lt;/body&gt;
&lt;/html&gt;
Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants :