中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

Flex界面，第一部分

如果你想讓Flex播放視頻，你必須向Flex程序提供視頻列表。最簡便的方法就是通過XML。所以，現(xiàn)在我們要返回PHP的部分，編寫一個(gè)可以將數(shù)據(jù)庫中的視頻列表抽取到XML文件的頁面。movies.php就實(shí)現(xiàn)了這個(gè)功能，代碼如下：

movies.php

<?php
require "DB.php";
 
$moviebase = 'http://localhost:8080/movies/';
 
header( 'content-type: text/xml' );
 
$dsn = 'mysql://root@localhost/movies';
$db =& DB::connect( $dsn );
if ( PEAR::isError( $db ) ) { die($db->getMessage()); }
?>
<movies>
<?php
$res = $db->query( 'SELECT title, source, thumb, width, height FROM movies' );
while( $row = $res->fetchrow( ) ) {
?>
  <movie title="<?php echo( $row[0] ) ?>" source="<?php echo( $moviebase.$row[1] ) ?>"
   thumb="<?php echo( $moviebase.$row[2] ) ?>" width="<?php echo( $row[3] ) ?>"
   height="<?php echo( $row[4] ) ?>" />
<?php
}
?>
</movies>

你可以通過命令行運(yùn)行它然后查看生成的XML，也可以在瀏覽器中打開這個(gè)頁面然后你就可以看到以樹形方式顯示的XML，見圖3：

圖3.視頻的XML列表

有了這個(gè)XML列表，我們就可以創(chuàng)建一個(gè)擴(kuò)展自simplemovie.mxml的Flex程序，代碼如下：

mytube1.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="movieXmlData.send()">
 
<mx:HTTPService method="get" url="http://localhost:8080/movies.php" id="movieXmlData" result="onGetMovies( event )" />
 
<mx:Script>
import mx.rpc.events.ResultEvent;
import mx.controls.VideoDisplay;
import mx.controls.List;
import mx.rpc.http.HTTPService;
import mx.collections.ArrayCollection;
 
[Bindable]
private var movies : ArrayCollection = new ArrayCollection();
 
public function onGetMovies( event : ResultEvent ) : void
{
  var firstMovie : String = event.result.movies.movie[0].source.toString();
  videoPlayer.source = firstMovie;
 
  movies = event.result.movies.movie;
  movieList.selectedIndex = 0;
}
 
public function onPrevious() : void
{
  if ( movieList.selectedIndex == 0 )
    movieList.selectedIndex = movies.length - 1;
  else
    movieList.selectedIndex -= 1;
  videoPlayer.source = this.movieList.selectedItem.source.toString();
}
 
public function onPlay() : void
{
  videoPlayer.source = this.movieList.selectedItem.source.toString();
  videoPlayer.play();
}
 
public function onNext() : void
{
  if ( movieList.selectedIndex >= ( movies.length - 1 ) )
    movieList.selectedIndex = 0;
  else
    movieList.selectedIndex += 1;
  videoPlayer.source = this.movieList.selectedItem.source.toString();
}
 
public function onChange() : void
{
  videoPlayer.source = this.movieList.selectedItem.source.toString();
}
</mx:Script>
 
<mx:HBox width="100%" paddingLeft="10" paddingTop="10" paddingRight="10">
  <mx:VBox>
    <mx:VideoDisplay width="400" height="300" id="videoPlayer" complete="onNext()" />
    <mx:HBox width="100%" horizontalAlign="center">
       <mx:Button label="<<" click="onPrevious()" />
       <mx:Button label="Play" click="onPlay()" />
       <mx:Button label=">>" click="onNext()" />
    </mx:HBox>
    </mx:VBox>
    <mx:List width="100%" height="340" id="movieList"
      dataProvider="{movies}"
      change="onChange()"
      labelField="title"></mx:List>
</mx:HBox>
</mx:Application>

明顯的變化就是頁面上半部分添加了很多ActionScript代碼，它們用來管理界面。這些代碼首先在onGetMovies()使用HTTPService從movies.php中讀取XML。當(dāng)HTTPService類檢測到XML時(shí)會(huì)立刻返回一個(gè)XML文檔對(duì)象模型（DOM），然后我們就可以使用這個(gè)DOM來讀取第一個(gè)視頻并播放它。函數(shù)onGetMovies()還設(shè)定了一個(gè)movies變量來存儲(chǔ)列表框中要顯示的視頻。ActionScript代碼中的其它方法處理界面可能觸發(fā)的不同事件，例如用戶點(diǎn)擊了視頻列表、點(diǎn)擊了“上一個(gè)”或“下一個(gè)”按鈕等等。

最下面的代碼是一些組成用戶界面的Flex組件。其中有一些按鈕——左箭頭和右箭頭——來切換到下一個(gè)或上一個(gè)視頻。在VideoDisplay的右邊有一個(gè)視頻列表，在這里該列表只是列出了視頻的名字。

使用Flex編譯并運(yùn)行程序，結(jié)果如圖4：

圖4.Flex用戶界面的第一個(gè)版本

現(xiàn)在我們可以使用右邊的列表來選擇視頻，或者通過按下左/右按鈕在視頻之間切換。這個(gè)程序已經(jīng)相當(dāng)不錯(cuò)了，不過我們的縮略圖在哪里使用了呢？

出處：藍(lán)色理想
責(zé)任編輯：moby

上一頁 使用Flex和PHP創(chuàng)建自己的視頻應(yīng)用 [3] 下一頁 使用Flex和PHP創(chuàng)建自己的視頻應(yīng)用 [5]

◎進(jìn)入論壇RIA設(shè)計(jì)與應(yīng)用版塊參加討論