HTMLページを生成し、Vaadin 8アプリから、新しいウィンドウで開きます

その他 2022-04-22 11:42:43 訪問数: 0
バジルボーク：

私Vaadin 8のWebアプリから、私は、ユーザーがボタンをクリックすることで、別のウィンドウでレポートを開くことができるようにしたいです。コンテンツは、プレーンHTML5を使用しなくVaadinウィジェットを使用Vaadinアプリケーションによって生成されます。

Vaadin 8マニュアルページがあるブラウザのWindowsの取り扱いを。その番組の利用BrowserWindowOpener対象は、新しいウィンドウを開きます。しかし、そのウィンドウは、Vaadinの含まれているUI私は自分のHTMLコンテンツを生成するのに対し、サブクラスを。

そのようなデータベース識別子の値などの情報を渡すためのボーナスポイント。

バジルボーク：

ここでVaadin 8.5.1で構築された例全体のアプリは、です。私たちは、内のテキストとしてUUIDを提示TextFieldVaadinウィジェットやレイアウトを使用せずに、当社のVaadinアプリによって生成されたHTMLでWebページを示す第2のウィンドウを開くボタンで、。そのフィールドからidが実際のアプリでデータベース検索を使用することができる新しいウィンドウに渡されます。

ここでは、画像の説明を入力します。

ここでは、画像の説明を入力します。

マニュアルでそのページに示されているように、あなたが使用する必要がありますかBrowserWindowOpener（またはLink）。これは、事前に設定する必要があります前に、ユーザーが原因でブラウザに共通のセキュリティ制限のボタンをクリックします。だからではなく、ボタンのクリックリスナーにコードを書くのは、我々は以前に設定する必要がありますBrowserWindowOpenerボタンを持つオブジェクト、およびアソシエートを。

レポートを生成するためにユーザーがクリックするボタンを定義します。

Button webPageButton = new Button( "Generate Person report" );

Define the destination for the new window to be opened, what URL it should use as its web address. We want to call back into our Vaadin app. So get the URL of this web app at runtime. The technical term for our web app in Java Servlet terminology is “context”. So we ask the current context for its URL (path). 

String servletPath = VaadinServlet.getCurrent().getServletContext().getContextPath(); // URL for this web app at runtime.

We need to narrow that URL to our report, detailing a single Person object to be loaded from the database. So we invent person.html as the resource being requested in our URL.

We want to ask for a dynamically generated HTML page without invoking Vaadin widgets, so we use the ExternalResource class.

Resource resource = new ExternalResource( servletPath + "/person.html" );  // Defining an external resource as a URL that is not really so external -- will call back into this same web app.

With that Resource object in hand, we are ready to define the BrowserWindowOpener.

BrowserWindowOpener webPageOpener = new BrowserWindowOpener( resource );

Let’s configure some of its attributes, such as the title of the window to be opened.

webPageOpener.setWindowName( "Person ID: " + personUuid.getValue() );  // Set title of the new window to be opened.

And we want to pass the ID of the “person” row to be retrieved from the database and then displayed in our generated web page.

One way to pass information such as this as a parameter in a query string on the URL. So the last part of our URL will look something like person.html?person_id= f0e32ddc-18ed-432c-950b-eda3f3e4a80d. This value must be textual, so we use the canonical 36-character hex string representing the 128-bits of a UUID as our database identifier. We give this value an arbitrary key name such as person_id .

String param = "person_id";
webPageOpener.setParameter( param , personUuid.getValue() );

We can set the size of the new window to be opened. We will make it the same size as the user’s current window at runtime. And we will make the window resizable, so the user can stretch it larger or smaller. We want to end up with window features described in a string such as width=800,height=600,resizable. We will plug in that width and height at runtime.

String windowFeaturesString = String.format( "width=%d,height=%d,resizable" , Page.getCurrent().getBrowserWindowWidth() , Page.getCurrent().getBrowserWindowHeight() ) ; // Same size as original window.
webPageOpener.setFeatures( windowFeaturesString );  // Example: "width=800,height=600,resizable".

We are done configuring the new window to be opened. Since window-opening cannot be called as result of the button-click by user in an event listener as might normally do for other behaviors, we must associate the opener with the button ahead of time.

webPageOpener.extend( webPageButton ); // Associate opener with button.

For fun, we can get a preview of the URL to be invoked by the new window. In real work, use a logging framework here such as SLF4J and LogBack. For this demo, we dump to console.

System.out.println( "TRACE BrowserWindowOpener URL: " + webPageOpener.getUrl() );

Good, we now have button with an opener set to ask for a HTML-based report to be generated. Next we must generate that report. To do that, tell our Vaadin app to expect an incoming URL with the person.html URL we specified above. We do that by implementing the RequestHandler interface. See the manual.

In our RequestHandler we do four things:

  1. Retrieve the hex-string of the UUID passed as a parameter in the query string of the URL opened in the new window.
  2. Reconstitute a UUID object from that hex-string.
  3. Pass that UUID object to a routine generating the HTML to be displayed in this new window.
  4. Display that HTML in the new window by passing it to the VaadinResponse object which gets passed along back to the user’s web browser via Java Servlet technology.

そして、私たちはインスタンス化する必要がありますRequestHandler実装を、そして、ユーザのセッションでインスタンスを登録しVaadinSessionたオブジェクトを。

VaadinSession.getCurrent().addRequestHandler(
        new RequestHandler() {
            @Override
            public boolean handleRequest ( VaadinSession session ,
                                           VaadinRequest request ,
                                           VaadinResponse response )
                    throws IOException {
                if ( "/panel.html".equals( request.getPathInfo() ) ) {
                    // Retrieve the hex-string of the UUID from the URL’s query string parameter.
                    String uuidString = request.getParameter( "person_id" );  // In real-work, validate the results here.
                    UUID uuid = UUID.fromString( uuidString ); // Reconstitute a `UUID` object from that hex-string. In real-work, validate the results here.
                    System.out.println( "UUID object reconstituted from string passed as parameter in query string of URL opened in new window: " + uuid );
                    // Build HTML.
                    String html = renderHtml( uuid );
                    // Send out the generated text as HTML, in UTF-8 character encoding.
                    response.setContentType( "text/html; charset=utf-8" );
                    response.getWriter().append( html );
                    return true; // We wrote a response
                } else
                    return false; // No response was written
            }
        } );

HTMLを生成するために、その方法を記入してください。

// Generate the HTML to report on the details of a `person` from the database, given the UUID of that database row.
private String renderHtml ( UUID uuid ) {
    String eol = "\n"; // End-of-line character(s) to use in the HTML.
    StringBuilder html = new StringBuilder();
    html.append( "<!DOCTYPE html>" ).append( eol );
    html.append( "<html>" ).append( eol );
    html.append( "<head>" ).append( eol );
    html.append( "<title>Person</title>" ).append( eol );
    html.append( "</head>" ).append( eol );
    html.append( "<body style='color:DarkSlateGray' >" ).append( eol );
    html.append( "<h1>Demo</h1>" ).append( eol );
    html.append( "<p>This is a drill. This is only a drill.</p>" ).append( eol );
    html.append( "<p>If this had been a real application, you would have seen some data.</p>" ).append( eol );
    html.append( "<p>Person ID: " ).append( uuid.toString() ).append( ".</p>" ).append( eol );
    html.append( "<p style='color:DimGray ; font-family: Pragmata Hack Menlo monospaced' >Report generated " ).append( Instant.now() ).append( ".</p>" ).append( eol );
    html.append( "</body>" ).append( eol );
    html.append( "</html>" ).append( eol );
    String s = html.toString();
    return s;
}

HTMLソースコードを結果として得られる次のようになります。

<!DOCTYPE html>
<html>
<head>
<title>Person</title>
</head>
<body style='color:DarkSlateGray' >
<h1>Demo</h1>
<p>This is a drill. This is only a drill.</p>
<p>If this had been a real application, you would have seen some data.</p>
<p>Person ID: cc5e975b-2632-4c92-a1cb-b25085c60e60.</p>
<p style='color:DimGray ; font-family: Pragmata , Hack , Menlo , monospace' >Report generated 2018-08-05T02:33:13.028594Z.</p>
</body>
</html>

あなたの便宜のために、ここでその全体Vaadin 8アプリの内容であるMyUI.java最初のVaadin株式会社会社が提供する最も簡単なMaven原型によって生成されたファイルは。

package com.basilbourque.example;

import javax.servlet.annotation.WebServlet;

import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.server.*;
import com.vaadin.ui.Button;
import com.vaadin.ui.Label;
import com.vaadin.ui.TextField;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;

import java.io.IOException;
import java.time.Instant;
import java.time.ZonedDateTime;
import java.util.UUID;

/**
 * This UI is the application entry point. A UI may either represent a browser window
 * (or tab) or some part of an HTML page where a Vaadin application is embedded.
 * <p>
 * The UI is initialized using {@link #init(VaadinRequest)}. This method is intended to be
 * overridden to add component to the user interface and initialize non-component functionality.
 */
@Theme ( "mytheme" )
public class MyUI extends UI {

    @Override
    protected void init ( VaadinRequest vaadinRequest ) {
        final VerticalLayout layout = new VerticalLayout();

        TextField personUuid = new TextField( "UUID of Person:" );
        personUuid.setWidth( 22 , Unit.EM );
        personUuid.setValue( UUID.randomUUID().toString() );
        personUuid.setReadOnly( true );

        Button webPageButton = new Button( "Generate Person report" );
        webPageButton.setWidthUndefined();
        webPageButton.addClickListener( e -> {
            System.out.println( "Button clicked. " + ZonedDateTime.now() );
        } );

        // Configure web page opener object. Must be done *before* user clicks on button, not after.
        String servletPath = VaadinServlet.getCurrent().getServletContext().getContextPath(); // URL for this web app at runtime.
        Resource resource = new ExternalResource( servletPath + "/person.html" );  // Defining an external resource as a URL that is not really so external -- will call back into this same web app.
        BrowserWindowOpener webPageOpener = new BrowserWindowOpener( resource );
        webPageOpener.setWindowName( "Person ID: " + personUuid.getValue() );  // Set title of the new window to be opened.
        String param = "person_id";
        webPageOpener.setParameter( param , personUuid.getValue() );
        String windowFeaturesString = String.format( "width=%d,height=%d,resizable" , Page.getCurrent().getBrowserWindowWidth() , Page.getCurrent().getBrowserWindowHeight() ); // Same size as original window.
        webPageOpener.setFeatures( windowFeaturesString );  // Example: "width=800,height=600,resizable".
        webPageOpener.extend( webPageButton ); // Connect opener with button.
        System.out.println( "TRACE BrowserWindowOpener URL: " + webPageOpener.getUrl() );

        layout.addComponents( personUuid , webPageButton );
        setContent( layout );

        // A request handler for generating some content
        VaadinSession.getCurrent().addRequestHandler(
                new RequestHandler() {
                    @Override
                    public boolean handleRequest ( VaadinSession session ,
                                                   VaadinRequest request ,
                                                   VaadinResponse response )
                            throws IOException {
                        if ( "/person.html".equals( request.getPathInfo() ) ) {
                            // Retrieve the hex-string of the UUID from the URL’s query string parameter.
                            String uuidString = request.getParameter( "person_id" );  // In real-work, validate the results here.
                            UUID uuid = UUID.fromString( uuidString ); // Reconstitute a `UUID` object from that hex-string. In real-work, validate the results here.
                            System.out.println( "UUID object reconstituted from string passed as parameter in query string of URL opened in new window: " + uuid );
                            // Build HTML.
                            String html = renderHtml( uuid );
                            // Send out the generated text as HTML, in UTF-8 character encoding.
                            response.setContentType( "text/html; charset=utf-8" );
                            response.getWriter().append( html );
                            return true; // We wrote a response
                        } else
                            return false; // No response was written
                    }
                } );
    }

    // Generate the HTML to report on the details of a `person` from the database, given the UUID of that database row.
    private String renderHtml ( UUID uuid ) {
        String eol = "\n"; // End-of-line character(s) to use in the HTML.
        StringBuilder html = new StringBuilder();
        html.append( "<!DOCTYPE html>" ).append( eol );
        html.append( "<html>" ).append( eol );
        html.append( "<head>" ).append( eol );
        html.append( "<title>Person</title>" ).append( eol );
        html.append( "</head>" ).append( eol );
        html.append( "<body style='color:DarkSlateGray' >" ).append( eol );
        html.append( "<h1>Demo</h1>" ).append( eol );
        html.append( "<p>This is a drill. This is only a drill.</p>" ).append( eol );
        html.append( "<p>If this had been a real application, you would have seen some data.</p>" ).append( eol );
        html.append( "<p>Person ID: " ).append( uuid.toString() ).append( ".</p>" ).append( eol );
        html.append( "<p style='color:DimGray ; font-family: Pragmata , Hack , Menlo , monospace' >Report generated " ).append( Instant.now() ).append( ".</p>" ).append( eol );
        html.append( "</body>" ).append( eol );
        html.append( "</html>" ).append( eol );
        String s = html.toString();
        System.out.println( "\n\n" + s + "\n\n" );
        return s;
    }

    @WebServlet ( urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true )
    @VaadinServletConfiguration ( ui = MyUI.class, productionMode = false )
    public static class MyUIServlet extends VaadinServlet {
    }
}

おすすめ

転載: http://43.154.161.224:23101/article/api/json?id=191446&siteId=1
おすすめ
openKylinコミュニティ生態委員会の第6回会議が無事に開催されました
Alibaba Cloud、Tongyi Qianwen 2.5を正式リリース
Python 3.13 が最初のベータ版をリリース: 実験的なフリー スレッド モードと JIT、改善された対話型インタープリター
Stack Overflow は私のコードを使用して大規模な AI モデルをトレーニングし、私のアカウントを禁止しました。
Pop!_OS の COSMIC デスクトップが App Store のリストに掲載される
レポート: Django は依然として 74% の開発者にとって第一の選択肢です
「2024年第1四半期のインターネット投融資業務」調査レポート
15 年前、彼は「FFmpeg 恥の柱」に立っていたのに、今でも私たちに感謝しなければなりません - Tencent QQPlayer はその恥を晴らしますか?
ランキング
ブルーブリッジカップクロップハイブリッド（再帰的）
java线程、线程池
关于毕业前后的道路
JVMの基本
OpenCV ヒストグラムの原理と表示、マスキング、イコライゼーション、適応イコライゼーション
PHPのAES暗号化と復号化、MCRYPT_ENCRYPTとopenssl_encrypt
スコアボードを回転poj3335
Vueで要求されたデータ：タイムスタンプ変換時間
Javaの合併のpng画像
HttpServletResponseアプリケーションリクエストのリダイレクト
アーカイブ
もっと
2024-05-10(33)
2024-05-09(30)
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)
2024-05-05(0)
2024-05-04(18)
2024-05-03(8)
2024-05-02(0)
2024-05-01(4)

コードワールド

© 2018 codetd.com