スプラッシュ スクリーン

概要

スプラッシュ スクリーンAPIでは、アプレットがロード中または、高負荷のタスクを実行している時に、ディスプレイの画面に、イメージを表示するスプラッシュ スクリーンを作成することが出来ます。Curl RTEが提供する既定のイメージまたは、独自のイメージを使用したスプラッシュ スクリーンを使用することが出来ます。また、プログレス バーやヘッダー、フッター テキストを指定することも出来ます。
スプラッシュ スクリーンはこれらのコンポーネントから構成されます。
以下のサンプルでは、簡単なスプラッシュ スクリーンを示しています。それは、プログレスバーや追加のテキストはなく、既定のイメージを表示しています。SplashScreen.setup を使用して、スプラッシュ スクリーンを作成し、アプレットのロード時間をシミュレートする為にループ処理を行っています。そして最後に、SplashScreen.destroy でスプラッシュ スクリーンを破棄しています。スプラッシュ スクリーンは、既定の遅延時間、0.5秒後に現れ、破棄されるまで表示されたままになります。
実際のアプレットでは、スプラッシュ スクリーンをセットアップ、管理そして破棄するコードは、アプレットの一部になります。このセクションでのサンプルでは、コマンドボタンのイベント ハンドラでスプラッシュ スクリーンを作成しており、このページをロードする度にスプラッシュ スクリーンが表示されることを防いでいます。

例: 簡単なスプラッシュ スクリーン
{import * from CURL.ENGINE.BROWSER}

{CommandButton
    label = "View Splash Screen",
    {on Action do
        {SplashScreen.setup}

        || We will now be in a loop and sleep in the loop to fake
        || some work..
        {for i = 0 below 5 do
            {sleep 1s}
        }
        || We are done. Destroy the Splash Screen.
        {SplashScreen.destroy}
    }
}

スプラッシュ スクリーンの作成

SplashScreen.setup の使用

クラス プロシージャ SplashScreen.setup は幾つかの引数を取ります。
以下のサンプルは、これらの引数の幾つかを説明しています。スプラッシュ スクリーンにヘッダーとフッターを加え、既定と異なるイメージを使用しています。イメージは、指定された高さと幅に合うように伸張され、スプラッシュ スクリーンが表示されるまでの delay は、2秒に増やされています。

例: スプラッシュ スクリーンの設定
{import * from CURL.ENGINE.BROWSER}

   {CommandButton
       label = "View Splash Screen",
       {on Action do
           {SplashScreen.setup
               title = "Splash Screen Example",
               footer = "Setting up a splash screen...",
               image-url = {url "../../default/images/curl-splash.png"},
               width = 15cm,
               height = 9cm,
               delay = 2s
           }
           {for i = 0 below 5 do
               {sleep 1s}
           }
           {SplashScreen.destroy}
       }
   }

プログレスバーの追加

スプラッシュ スクリーンにプログレスバーを追加することが出来ます。クラス プロシージャ SplashScreen.set-progress-bar は、確定状態のプログレスバーを追加し、SplashScreen.set-progress-bar-indeterminate は不確定状態のプログレスバーを追加します。確定状態のプログレスバーを追加した場合、SplashScreen.set-progress-bar-value を使用して、アプレットがロードされるに従い、プログレスバーの値を更新しなければなりません。
以下の例は、確定状態及び不確定状態のプログレスバーの両方を使用しています。スプラッシュ スクリーンが、不確定状態のプログレスバーを表示している間に、アプレットが、ロードするのにどのくらいの時間がかかるのかを決定する状況をシミュレートしています。その後、アプレットは確定状態のプログレスバーを追加し、アプレットのロードに伴い、その値を更新しています。

例: プログレス バーの追加
{import * from CURL.ENGINE.BROWSER}

{CommandButton
    label = "View Splash Screen",
    {on Action do
        {SplashScreen.setup
            title = "Splash Screen Example",
            footer = "Adding a progress bar...",
            image-url = {url "../../default/images/curl-splash.png"}
        }
        || Show indeterminate progress bar.
        {SplashScreen.set-progress-bar-indeterminate}
        || Assume we take 2s to find how much time we will need to
        || finish the work.
        {sleep 2s}
        {SplashScreen.set-progress-bar  max = 10.0}
        let val:double = 0
        {for i = 0 below 5 do
            set val = val + 1.0
            {sleep 0.5s}
            {SplashScreen.set-progress-bar-value val}    
        }
        {sleep 1s}
        {SplashScreen.destroy}
    }
}

スプラッシュ スクリーンのコンポーネントの変更

クラス プロシージャ set-titleset-imageset-footer を使って、スプラッシュ スクリーンのタイトル、イメージ、フッターを変更することが出来ます。以下の例は、フッターに関連する一連のイメージを切り替えて表示しています。

例: 一つ以上のイメージの使用
{import * from CURL.ENGINE.BROWSER}

{let image-array:StringArray =
    {StringArray
        "../../default/images/curl-1.png",
        "../../default/images/curl-2.png",
        "../../default/images/curl-3.png",
        "../../default/images/curl-4.png",
        "../../default/images/curl-5.png"
    }
}
{let footer-array:StringArray =
    {StringArray
        "Lower distribution costs ...",
        "Enterprise RIA ...",
        "Data Visualization ...",        
        "RIA Technologies ...",        
        "RIA for Desktop..."        
    }
}
{CommandButton
    label = "View Splash Screen",
    {on Action do
        {SplashScreen.setup
            title = "Loading Curl Applet",
            image-url = {url "../../default/images/curl-5.png"}
        }
        {SplashScreen.set-progress-bar-indeterminate}
        {for i = 0 below image-array.size do
            {SplashScreen.set-footer
                footer-array[i],
                halign = "left",
                font-family = "tahoma"
            }
            {SplashScreen.set-image
                image-url = {url image-array[i]}
            }            
            {sleep 2s}
        }
        {SplashScreen.destroy}
    }
}
set-title プロシージャと set-footer プロシージャでは、setup を利用しては出来ないヘッダーとフッターのテキストの属性を修正することが出来ます。以下のサンプルは、ヘッダーとフッターのテキストのプロパティを設定しています。

例: テキスト属性の変更
{import * from CURL.ENGINE.BROWSER}

{CommandButton
    label = "View Splash Screen",
    {on Action do
        {SplashScreen.setup}
        {SplashScreen.set-title
            "Loading Curl Applet",
            font-family = "tahoma",
            font-size = 14pt,
            font-weight = "bold",
            color = "#006968"
        }
        {SplashScreen.set-footer
            "Documentation Example",
            halign = "center",
            font-family = "tahoma",
            font-size = 14pt,
            font-weight = "bold",
            color = "#006968"
        }
        {for i = 0 below 5 do
            {sleep 1s}
        }
        {SplashScreen.destroy}
    }
}

SplashScreenSubApplet の作成

前のセクションのスプラッシュ スクリーンのサンプルの全ては、アプレット内でのスプラッシュ スクリーンの作成の仕方を示しています。このアプローチは、既定のスプラッシュ スクリーン サブアプレットによって提供されるコンポーネントの配置を使用しています。明示的にスプラッシュ スクリーン サブアプレットを作成することも出来ます。それは、コンポーネントの配置が自由に行え、追加のグラフィック要素を加えることが出来ます。
スプラッシュ スクリーン サブアプレットを作成する為には、SplashScreenSubApplet のサブクラスを作成し、SplashScreenSubApplet.create-main-body メソッドをオーバーライドします。このメソッドは、スプラッシュ スクリーンのコンポーネントの配置を行い、結果を Graphic として返します。これらのコンポーネントは、アプレット内でのスプラッシュ スクリーンの作成で知られているものです。SplashScreenSubApplet では、以下のフィールドによって現されます。
これらのフレームを使って、スプラッシュ スクリーンを構成することが出来ます。SplashScreenSubApplet は、以下のメソッドで、これらのフレームにコンテンツを配置します。
必要に応じて、サブアプレットとアプレットの間で、スプラッシュ スクリーンの生成作業を分担することが出来ます。最小限のサブアプレットは、スプラッシュ スクリーン コンポーネントだけを配置し、アプレットにコンテンツの追加をさせることです。それとは反対に、サブアプレットがスプラッシュ スクリーンの外観と挙動の全てを処理し、アプレットは、単にスプラッシュ スクリーンを設定し、破棄するだけにすることも出来ます。
以下のサンプルは、SplashScreenSubApplet のサブクラスを作成し、create-main-body メソッドをオーバーライドしています。このメソッドは、タイトル、プログレスバー、イメージ、フッターの各コンポーネントを設定し、これらのコンポーネントを他のグラフィック要素と共に配置したグラフィックを返します。実際のアプリケーションでは、サブアプレットのコードは、分離した .curl ファイルになることが多いでしょうが、これらのサンプルでは、サンプルコードの中に含んでいます。ですから、それらを確認し、操作することが出来ます。

例: サブアプレットの作成
{import * from CURL.ENGINE.BROWSER}


{def applet-source:String =
    {stringify
        {curl 8.0 applet}
        {import * from CURL.ENGINE.BROWSER}

        {define-class public CustomSplashScreenSubApplet
          {inherits SplashScreenSubApplet}
          
          {constructor public {default}
            {construct-super}
          }
          
          {method public open {create-main-body}:Graphic
            {self.set-title
                "Loading applet...",
                "center",
                "",
                12pt,
                "bold",
                "#330033"
            }
            {self.set-progress-bar
                0,
                10,
                0
            }
            {self.set-footer
                "Documentation Example",
                "center",
                "",
                12pt,
                "bold",
                "#330033"        
            }
            {self.set-image
                {parse-url "curl://install/docs/default/images/curl_logo.png"},
                0m,
                0m
            }
            {return
                {VBox
                    halign = "center",
                    width = 5in, 
                    background = 
                        {RadialGradientFillPattern
                            {Spectrum.from-envelope
                                "white", 0,
                                "#6685a3", 0.85
                            },
                            center = {Fraction2d 0.35, 0.5},
                            radius = 1.0
                        },
                    border-width = 1px,
                    border-color = "#330033",
                    hstretch? = true,
                    framelike-stretch? = true,
                    self.title-frame,
                    {Fill height = 1cm},
                    {hrule color = "#330033"},
                    {Fill height = 1cm},
                    {HBox
                        {Fill},
                        self.image-frame,
                        {Fill}
                    },
                    {Fill height = 1cm},
                    {hrule color = "#330033"},
                    {Fill height = 1cm},
                    self.footer-frame,
                    {hrule color = "#330033"},
                    self.progress-bar-frame
                }
            }
          }
        }
        {after 0s do
            {CustomSplashScreenSubApplet}
        }
    }
}
{CommandButton
    label = "View Splash Screen",
    {on Action do
        {SplashScreen.setup
            splash-applet-url = {string-url applet-source}
        }
        {SplashScreen.set-progress-bar-indeterminate}
        {sleep 1s}
        let val:double = 0
        {for i = 0 below 5 do
            set val = val + 2.0
            {SplashScreen.set-progress-bar-value val}    
            {sleep 1s}
        }
        {SplashScreen.destroy}
    }
}
独自のサブアプレットを作成した場合、Curl によって提供される全てのグラフィック機能を利用することが出来ます。以下のサンプルに示すように、どのスプラッシュ スクリーン コンポーネントにも追加したり、交換したりすることが出来ます。

例: アニメーションのスプラッシュ スクリーン
{import * from CURL.ENGINE.BROWSER}

{def applet-source:String =
    {stringify
        {curl 8.0 applet}
        {import * from CURL.ENGINE.BROWSER}
        {import * from CURL.GUI.SHAPES}

        {define-class public CustomSplashScreenSubApplet
          {inherits SplashScreenSubApplet}
          
          {constructor public {default}
            {construct-super}
          }
          
          {method public open {create-main-body}:Graphic
            {self.set-progress-bar
                0,
                10,
                0
            }
            let company:TextShape = 
                {TextShape
                    font-size = 20pt,
                    color = "#330033",
                    halign = "center",
                    valign = "center",
                    translation = {Distance2d 4cm, 3cm},
                    "Curl Inc."
                }
            let tmr:Timer =
                {company.animate
                    frequency=20fps,
                    repeat = 18,
                    delay = 1s,
                    {on TimerEvent do
                        {company.apply-rotation (20deg)}
                        {company.apply-scale 1.05, 1.05}
                    }
                }
            {return
                {VBox
                    halign = "center",
                    width = 8cm, 
                    background =
                        {LinearGradientFillPattern
                            {Fraction2d 0, 0},
                            {Fraction2d 1, 1},
                            {Spectrum.from-endpoints
                                "white",
                                "#66afa4"
                            }
                        },
                    border-width = 1px,
                    border-color = "#330033",
                    hstretch? = true,
                    framelike-stretch? = true,
                    {Fill height = 1cm},
                    {hrule color = "#330033"},
                    {Canvas
                        width = 8cm,
                        height = 6cm,
                        company
                    },
                    {hrule color = "#330033"},
                    {Fill height = 1cm},
                    {hrule color = "#330033"},
                    self.progress-bar-frame
                }
            }
          }
        }
        {after 0s do
            {CustomSplashScreenSubApplet}
        }
    }
}

{CommandButton
    label = "View Splash Screen",
    {on Action do
        {SplashScreen.setup
            splash-applet-url = {string-url applet-source}
        }
        {sleep 2s}
        let val:double = 0
        {for i = 0 below 5 do
            set val = val + 2.0
            {SplashScreen.set-progress-bar-value val}    
            {sleep 1s}
        }
        {SplashScreen.destroy}
    }
}