ローテーター

動作

フレームが、ニュース・テロップやスライドショー、マーキー(marguee)のようにローテートされるコンポーネントです。

 

バージョン

Curl Advanced UI 0.5

API説明

RotatorDirection列挙型

  Rotatorのスクロール方向の列挙型

パッケージ

  COM.CURLAP.ADVANCED-UI.CONTAINERS

プロパティ

  up  上
  down 
  left 左
  right 

RotatorEventクラス

  ローテートのイベント

パッケージ

  COM.CURLAP.ADVANCED-UI.CONTAINERS

プロパティ

  index:int  現在のフレーム番号
  frame 現在のフレーム

RotatorCanvasクラス

  RotatorのCanvasクラスです。 

パッケージ

  COM.CURLAP.ADVANCED-UI.CONTAINERS

スーパークラス

  Canvas

プロパティ

    rotating-direction:RotatorDirection ローテートする方向
    rotating-interval:Time ローテート間隔
    rotating-repeat:int ローテート回数(-1は無制限)
    rotating-scroll-distance:Distance ローテートする間の幅
    rotating-scroll-interval:Time ローテートする間の感覚
    rotating-enabled?:bool ローテートするか否か

コンストラクタ

  default
    引数1(frames:{Array-of Frame}):ローテートするフレーム群
    キーワード引数(rotating-direction:RotatorDirection = RotatorDirection.up):ローテートする方向
    キーワード引数(rotating-interval:Time = 1s):ローテート間隔
    キーワード引数(rotating-repeat:int = -1):ローテート回数(-1は無制限)
    キーワード引数(rotating-scroll-distance:Distance = .05cm):ローテートする間の幅
    キーワード引数(rotating-scroll-interval:Time = .01s):ローテートする間の感覚
    キーワード引数(rotating-enabled?:bool = true):初期状態でローテートするか否か
     

メソッド

  enable-rotating ローテート開始
    戻り値: void

  disable-rotating ローテート終了
    戻り値: void
 

利用方法

RotateCanvasにローテートするフレームを渡して、フレームをローテートさせます。ローテートしますとRotateEventが発生します。

{curl 6.0 applet}
{curl-file-attributes character-encoding = “shift-jis”}
{applet manifest = “manifest.mcurl”}

{import * from COM.CURLAP.ADVANCED-UI.CONTAINERS}
{import * from COM.CURL.GUI.STYLED-CONTROLS}
{install-style-sheet
    {manifest-url “file”, “DEFAULT-STYLE-SHEET”}
}

{define-proc {make-RotateFrames
                 height:any = 0cm,
                 width:any = 0cm,
                 valign:any = “top”, || NOTE: important
                 …
             }:{Array-of Frame}
   
    def frames = {{Array-of Frame}}
    {for v in … do
        {if v isa Graphic then
            {frames.append
                {Frame v, height = height, width = width, valign = valign}
            }
        }
    }
    {return frames}
}

{value

    def frames1 =
        {make-RotateFrames height = 2cm, width = 2cm,
            {image source = {url “images/1.png”}},
            {image source = {url “images/2.png”}},
            {image source = {url “images/3.png”}}
        }

    def frames2 =
        {make-RotateFrames height = 3cm, width = 8cm,
            {TextFlowBox
                {paragraph {bold Android} An Open Handset Alliance ProjectHome
                    Docs FAQ Blog Group Terms Getting Started Learn about
                    Android Download the SDK Join the community.
                    Participate in our discussion group through
                    {text color = “blue”, email or the web.}
                }
            },
           
            {TextFlowBox
                {paragraph Top 50 apps announced From more than
                    {text color = “green”, 1,700 contest}
                    entries, these 50 entries will continue into the second
                    and final round of {text color = “blue”, font-size = 18pt,
                                           Android Developer Challenge.}
                }
            },

            {TextFlowBox
                {paragraph Featured Videos Sergey Brin and Steve Horowitz
                    discuss the availability of the SDK, that it will be
                    {text color = “red”, open source} in the future, and
                    demo some applications.
                }
            },
           
            {TextFlowBox
                {paragraph Three part overview of the Android architecture
                    and APIs First look at building an
                    {text color = “blue”, Android Application}
                    more videos The Open Handset Alliance, a group of more
                    than 30 technology and mobile companies, is developing
                }
            }
        }

    def frames3 =
        {make-RotateFrames
            height = 2cm, width = 2cm,
            {image source = {url “images/1.png”}},
            {image source = {url “images/2.png”}},
            {image source = {url “images/3.png”}},
            {image source = {url “images/4.png”}},
            {image source = {url “images/5.png”}},
            {image source = {url “images/6.png”}}
        }

    def frames4 =
        {{Array-of Frame}
            {Frame valign = “top”, width = 3cm, height = 3cm, background = “green”},
            {Frame valign = “top”, width = 3cm, height = 3cm, background = “yellow”},
            {Frame valign = “top”, width = 3cm, height = 3cm, background = “red”},
            {Frame valign = “top”, width = 3cm, height = 3cm, background = “blue”},
            {Frame valign = “top”, width = 3cm, height = 3cm, background = “pink”}}

    def frames5 =
        {{Array-of Frame}
            {Frame valign = “top”, width = 1cm, height = 2cm, background = “green”},
            {Frame valign = “top”, width = 1cm, height = 2cm, background = “yellow”},
            {Frame valign = “top”, width = 1cm, height = 2cm, background = “red”},
            {Frame valign = “top”, width = 1cm, height = 2cm, background = “blue”},
            {Frame valign = “top”, width = 1cm, height = 2cm, background = “pink”}}

    def canvas =
        {RotatorCanvas
            frames4,
            height = 3cm,
            width = 3cm,
            border-color = “pink”,
            border-width = 2pt
        }

    {spaced-vbox

        || images rotator
        {text font-size = 14pt, color = “blue”, Images rotator},
        {RotatorCanvas
            frames1,
            height = 2cm,
            width = 4cm,
            rotating-interval = 0s,
            rotating-scroll-interval = .02s,
            rotating-direction = RotatorDirection.left,
            background = “black”,
            border-color = “black”,
            border-width = 5pt
        },

        || news rotator
        {text font-size = 14pt, color = “blue”, News rotator},
        {RotatorCanvas
            frames2,
            height = 3cm,
            width = 8cm,
            rotating-interval = 3s,
            rotating-direction = RotatorDirection.down,
            rotating-scroll-interval = .01s,
            border-color = “grey”,
            border-width = 3pt
        },

        || slideshow rotator
        {text font-size = 14pt, color = “blue”, Slideshow rotator},
        {RotatorCanvas
            frames3,
            height = 2cm,
            width = 2cm,
            rotating-interval = 2s,
            rotating-direction = RotatorDirection.right,
            rotating-scroll-interval = .01s,
            border-color = “silver”,
            border-width = 2pt,
            || RotatorEvent
            {on e:RotatorEvent do
                {dump e.index, e.frame}
            }
        },

        || test rotator
        {text font-size = 14pt, color = “blue”, Test rotator},
        canvas,
       
        {spaced-hbox
            {CommandButton label = “stop”,
                    {on Action do
                        {canvas.disable-rotating}
                    }
            },
            {CommandButton label = “start”,
                {on Action do
                    {canvas.enable-rotating}
                }
            }
        },
   
        {RotatorCanvas
            frames5,
            height = 2cm,
            width = 1cm,
            rotating-interval = 1.5s,
            rotating-direction = RotatorDirection.down,
            rotating-scroll-interval = 0.001s
        }
    }

各種フレームがローテートします。

サンプル

ローテータサンプル

関連Curl標準API

Canvas
Frame