DigiTechLog Dot Com » サンプル http://digitechlog.com Adobe AIR、Flex、Flash、Java Tue, 08 Nov 2011 12:46:29 +0000 http://wordpress.org/?v=2.8 ja hourly 1 FlexアプリケーションにYouTubeビデオを埋め込むサンプルソースコード http://digitechlog.com/2009/01/09/the-sample-source-code-of-emb-a-single-youtube-video-inside-your-flex-application.html http://digitechlog.com/2009/01/09/the-sample-source-code-of-emb-a-single-youtube-video-inside-your-flex-application.html#comments Fri, 09 Jan 2009 07:07:08 +0000 admin http://digitechlog.com/2009/01/09/the-sample-source-code-of-emb-a-single-youtube-video-inside-your-flex-application.html YouTubeは２００５年設立してからすっごく人気になるよね。WordPressとかほかのBSP提供されているブログシステムとか、YouTubeビデオの埋め込む機能があります。実はFlex／Flashアプリケーションにも簡単で実現できます。サンプルソースは簡単なビデオのプレイだけですが、それを基づいてYouTubeのビデオを探してプレイするツールも作れます。

※知識点：YouTubeとは、2005年2月に設立された米ネットベンチャーYouTube社が運営する、動画コンテンツ共有サイト。会員登録をすることによって誰でも容量100MB、再生時間10分以内の動画ファイルをアップロードし公開することができる。YouTubeで公開された動画ファイルは会員登録をしていないユーザでも無料で閲覧することができる。閲覧したい動画のキーワード検索も行うことができ、会員登録したユーザはさらに閲覧した動画に対するコメントを投稿したり、動画を5段階で評価したりといったこともできる。

下記はサンプルソースコード：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
  3.     layout="absolute" verticalAlign="top"
  4.     creationComplete="Init();" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#EE3636, #308A3F]" viewSourceURL="srcview/index.html">
  5.     <mx:Script>
  6.         <![CDATA[
  7.             private function Init():void
  8.             {
  9.                 var url:String = "http://www.youtube.com/v/zlfKdbWwruY&hl=en&fs=1";    //url extracted from embed code
  10.                 Security.allowDomain(url);                                             //allow domain
  11.                 youtubevid.load(url);                                                //load video
  12.             }       
  13.         ]]>
  14.     </mx:Script>
  15.     <mx:VBox width="100%" height="100%" horizontalAlign="center" verticalAlign="top" verticalGap="0">
  16.         <mx:Label text="YouTube Video Embedded Inside Flex" width="100%"  color="#060809" textAlign="center" fontSize="16" fontWeight="bold"/>
  17.         <mx:SWFLoader id="youtubevid" verticalAlign="top" horizontalAlign="center"  width="425" height="344"/>
  18.     </mx:VBox>
  19. </mx:Application>
簡単ですよね。

Related Posts

]]> http://digitechlog.com/2009/01/09/the-sample-source-code-of-emb-a-single-youtube-video-inside-your-flex-application.html/feed 1 Flexアプリケーションにマルチ言語対応（サンプルソースコード添付） http://digitechlog.com/2008/11/24/flexible-multilanguage-component-in-flex-application-with-sample-souce-code.html http://digitechlog.com/2008/11/24/flexible-multilanguage-component-in-flex-application-with-sample-souce-code.html#comments Mon, 24 Nov 2008 11:06:54 +0000 admin http://digitechlog.com/2008/11/24/flexible-multilanguage-component-in-flex-application-with-sample-souce-code.html この前紹介した「Flexアプリケーションにバージョンコントロールを実装するライブラリとサンプルソース」のバージョンコントロールと同じ、アプリケーションのマルチ言語対応も重要の一つとなりました。

大きいなソフトWindows OSでも世界中メインな言語バージョンを対応していました。Adobe PhotoShopとか、Flex Builderとか、Flashなども英語版、日本語版、中国版などいろいろ言語を対応していました。ほかの言語バージョンの対応、もちろんゼロから再開発必要ではなくて、言語と関係する部分のリソースだけを多言語となると実現できます。

リソースの多言語化の実現もいろいろやり方があります。言語リソースをデータベースに保存するとか、ファイルに保存するとか、WindowsだったらDLL化となるとか…

以下はサンプルソースでステプｂｙステプでFlexアプリケーションにマルチ言語対応を説明いたします。

この例中には、言語のリソースをデータベースに保存とします。

１）、まず、テーブル構造は下記のようです。

keyword english japanese
HELLOWORLD Hello World ハロー・ワールド

２）、次は、PHPでDBのデータを取得する。ソースは以下のようです。

Download: MultiLanguage.php
  1. <?php
  2. /**
  3. * Class contains methods for creating multilanguage applications. *
  4. */
  5. class MultiLanguage
  6. {   
  7.     function MultiLanguage()
  8.     {
  9.             pg_connect("host=localhost port=5432 dbname=database_name user=username     password=password");
  10.     }
  11.     /**
  12.      * Returns all data of table wordlist
  13.      *
  14.      * @return array
  15.      */
  16.     public function getWordlist()
  17.     {
  18.         $query = pg_query("SELECT * FROM wordlist");
  19.         return $this->pg_fetch_all_fields($query);
  20.     }
  21.     /**
  22.      * Returns query result as array.
  23.      *
  24.      * @param string $query
  25.      * @return array
  26.      */
  27.     private function pg_fetch_all_fields($query)
  28.     {
  29.         $i=0;
  30.         while ($tmp[$i] = pg_fetch_array($query))
  31.         {   
  32.             if($tmp[$i] != false)
  33.             {
  34.                 $all[$i] = $tmp[$i] ;
  35.                 $i++;
  36.             }
  37.         }
  38.         return $all;
  39.     }
  40. }
  41. ?>

３）、ActionScriptでマルチ言語対応ライブラリソース

Download: MultiLanguage.as
  1. package zgFlex
  2.  {
  3.      [Bindable]
  4.      public class MultiLanguage
  5.      {       
  6.          public var wordlist:Array;
  7.          public var lang:uint = 1;    //Default lnguage   
  8.          public var word:Object = new Object();
  9.  
  10.          public function MultiLanguage(_wordlist:Array)
  11.          {
  12.              this.wordlist = _wordlist;
  13.              this.assocArray();
  14.          }       
  15.          /**
  16.           * Converts array to assoc array placing first field of array in our case keyword as assoc field
  17.           * */
  18.          public function assocArray():void
  19.          {
  20.              var depth:uint = wordlist[0].length;
  21.              var assoc:String;       
  22.              for(var i:uint = 0; i < wordlist.length; i++ ){                   
  23.                  var row:Array = new Array;
  24.                  assoc     = wordlist[i][0].toString();               
  25.                  for(var j:uint = 0; j < depth; j++)
  26.                      row.push(wordlist[i][j].toString());               
  27.                  word[assoc] = [row];   
  28.              }       
  29.          }
  30.      }
  31.  }

４）、最後は画面に表示するソース

Download: main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"  creationComplete="onInit();">
  3. <mx:RemoteObject id="remoteMultiLanguage" source="MultiLanguage" destination="amfphp" showBusyCursor="true">
  4.     <mx:method name="getWordlist" result="fetchWordlist(event)" fault="fault(event)"/>
  5. </mx:RemoteObject>
  6.  
  7.     <mx:Script>
  8.         <![CDATA[
  9.             import zgFlex.MultiLanguage;
  10.             import mx.utils.ArrayUtil;
  11.             import mx.controls.Alert;
  12.             import mx.rpc.events.ResultEvent;
  13.             import mx.rpc.events.FaultEvent;               
  14.             [Bindable]
  15.             public var wordlist:MultiLanguage;   
  16.            
  17.             public function onInit():void
  18.             {
  19.                 remoteMultiLanguage.getWordlist();
  20.             }
  21.             public function fetchWordlist(evt:ResultEvent):void{
  22.                 wordlist = new MultiLanguage(ArrayUtil.toArray(evt.result));
  23.             }
  24.             public function fault(evt:FaultEvent):void{
  25.                 Alert.show(evt.fault.toString(),"Error!");
  26.             }
  27.         ]]>
  28.     </mx:Script>
  29.     <mx:Tile>       
  30.         <mx:LinkButton styleName="languageLink" label="hr" click="wordlist.lang = 1"/>
  31.         <mx:LinkButton styleName="languageLink" label="en" click="wordlist.lang = 2"/>
  32.     </mx:Tile>
  33.     <mx:Label text="{wordlist.word.HELLOWORLD[0][wordlist.lang]}" fontSize="20" />
  34. </mx:Application>

必要な言語リソース、例えば、中国語とか追加すると、プログラムのソースの修正はいらなくて、テーブルに１列を追加すれば実現できます。

Related Posts

]]> http://digitechlog.com/2008/11/24/flexible-multilanguage-component-in-flex-application-with-sample-souce-code.html/feed 0 Flexアプリケーションにバージョンコントロールを実装するライブラリとサンプルソース http://digitechlog.com/2008/11/24/add-version-control-in-your-flex-application-with-library-and-sample-souce-code.html http://digitechlog.com/2008/11/24/add-version-control-in-your-flex-application-with-library-and-sample-souce-code.html#comments Sun, 23 Nov 2008 15:04:42 +0000 admin http://digitechlog.com/2008/11/24/add-version-control-in-your-flex-application-with-library-and-sample-souce-code.html 一般的なソフトウェア、デスクトップアプリケーションでもWeb系アプリケーションでも、マイクロソフトのWindowsも同じでバージョンの自動更新機能があります。

ユーザさんたちはわざわざソフトウェアのホームページにアクセス必要がなくて、ソフトウェアを起動するとき、

自動的で新しいバージョンがあるかどうかチェックして、あれば更新するかどうか確認メッセージを出るのはカッコいいですね。

そのような機能、Flex中にはどう実装するはずですか。以下は実装の詳細です。

１）、必要なバージョンなど情報をプロパティファイルに書く


  1. #Each item takes the same params as the ContextMenuItem class
  2. #caption:String = caption Value : String,
  3. #separatorBefore:Boolean = false,
  4. #enabled:Boolean = true,
  5. #visible:Boolean = true
  6. #In addition each item supports a url variable just add
  7. #&YOUR URL GOES HERE;
  8. Version=Version 0.1&false&false&true;
  9. url=Developer : DigiTechlog&false&true&true&http://digitechlog.com
  10. viewSource=View Source&false&true&true&http://digitechlog.com/ext/VersionControl/srcview/

２）、自分のプロジェクトへ以下のソース（VersionControl.as）を追加とする

  1. package VersionControl
  2. {
  3.     import flash.events.ContextMenuEvent;
  4.     import flash.net.URLRequest;
  5.     import flash.net.navigateToURL;
  6.     import flash.ui.ContextMenu;
  7.     import flash.ui.ContextMenuItem;
  8.     import flash.utils.Dictionary;
  9.    
  10.     import mx.core.Application;
  11.     import mx.core.UIComponent;
  12.     import mx.core.mx_internal;
  13.     import mx.resources.ResourceBundle;       
  14.     use namespace mx_internal;
  15.  
  16.     public class VersionController extends Application
  17.     {
  18.  
  19.         [ResourceBundle( 'VersionControl' )]
  20.         private static var _rb     : ResourceBundle;
  21.        
  22.         private static var _rbi : Dictionary;
  23.  
  24.         private static function update(  ) : void
  25.         {
  26.         //    super.updateDisplayList( unscaledWidth, unscaledHeight );
  27.             _rbi = new Dictionary( );
  28.             var rbi : Object = _rb.content;
  29.             var cm : ContextMenu = new ContextMenu( );
  30.             for( var i : String in rbi )
  31.             {
  32.                 var properties     : Array = String( rbi[ i ] ).split( '&' );
  33.                 var value         : String = properties[ 0 ];
  34.                 var separator     : Boolean = properties[ 1 ] ? properties[ 1 ] == 'false' ? false : true : true;
  35.                 var enabled        : Boolean = properties[ 2 ] ? properties[ 2 ] == 'false' ? false : true : true;
  36.                 var visible        : Boolean = properties[ 3 ] ? properties[ 3 ] == 'false' ? false : true : true;
  37.                 var open        : Boolean = properties[ 4 ] ? properties[ 4 ] == 'false' ? false : true : true;
  38.                 var cmi : ContextMenuItem = new ContextMenuItem( value, separator, enabled, visible );
  39.                     cm.customItems.push( cmi );
  40.                     cm.hideBuiltInItems( );           
  41.                 if( open )
  42.                 {
  43.                     cmi.addEventListener( ContextMenuEvent.MENU_ITEM_SELECT, openWindow );
  44.                     _rbi[ value ] = properties[ 4 ] ? properties[ 4 ] : 'http://www.betadesigns.co.uk/Blog';           
  45.                 }
  46.             }
  47.             _application.contextMenu = cm;
  48.         }
  49.        
  50.  
  51.         private static function openWindow( e : ContextMenuEvent ) : void
  52.         {
  53.             navigateToURL( new URLRequest( _rbi[ e.target.caption ] ), "_blank" );
  54.         }
  55.  
  56.  
  57.         /**
  58.         * Forces this class to use the singleton pattern;
  59.         *
  60.         */
  61.         private static var _class         : VersionController;
  62.         private static var _application    : UIComponent;
  63.         public static function getInstance( item :UIComponent  ) :  VersionController
  64.         {
  65.             _application = item;
  66.             if( !_class )
  67.                 _class = new VersionController( new SingletonEnforcer( ) );
  68.                
  69.                 update( );
  70.  
  71.             return _class;
  72.         }
  73.         public function VersionController( se : SingletonEnforcer )
  74.         {
  75.             //can Never get here without calling getInstance( );
  76.         }
  77.     }
  78. }
  79. class SingletonEnforcer{ }

３）、下記のようなMXMLで使う

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
  3.     creationComplete="VersionController.getInstance( this )" 
  4.     xmlns:CustomColorPickerComponent="uk.co.BetaDesigns.components.CustomColorPickerComponent.*" viewSourceURL="srcview/index.html">
  5.     <mx:Script>
  6.         <![CDATA[
  7.             import VersionControl.VersionController;
  8.         ]]>
  9.     </mx:Script>
  10. </mx:Application>

Related Posts

]]> http://digitechlog.com/2008/11/24/add-version-control-in-your-flex-application-with-library-and-sample-souce-code.html/feed 1 JavaFXの「Hello World」サンプル http://digitechlog.com/2008/11/15/a-hello-world-sample-on-javafx.html http://digitechlog.com/2008/11/15/a-hello-world-sample-on-javafx.html#comments Sat, 15 Nov 2008 14:15:37 +0000 admin http://digitechlog.com/2008/11/15/a-hello-world-sample-on-javafx.html JavaのGUIはSwingなどを利用して作成されてきました。このSwingによるGUI作成にはいろいろと問題がありました。まず、「非常に面倒である」という点。Swingは、正直、ちょっとしたものを作るには複雑すぎるのです。JavaFXは、非常にシンプルなスクリプト言語の形をしています。

Swingと同等レベルのGUIを構築できながら、しかも扱いは非常に単純です。また、JavaFXによるGUIの作成は、手続き方式ではなく「宣言」式に行うことができます。GUIを構造的に記述し作成できるのです。これは、非常に分かりやすいです。

では、JavaFXを使って簡単な「Hello World」サンプルを作ってみましょう。

１）、JavaのCanvas/Panelみたいなシーン（Scene）を追加する

  1. import javafx.stage.Stage;
  2. import javafx.scene.Scene;   // added Scene fucntionality
  3. import javafx.scene.paint.Color;   // added colors

２）、Stageを追加する

  1. Stage {
  2. title: “Hello World”    // Changed title to “Hello World”
  3. visible: true
  4. scene: Scene {
  5.         width: 250            // Scene width instead of  Stage width
  6.         height: 80             // Scene height instead of Stage
  7.         fill: Color.BLACK   // Color is Black
  8. }

３）、実行してみよう

HWScene

４）、全部黒だったら見た目は悪いですね。次は文字を表示用長方形を追加する

  1. import javafx.scene.shape.Rectangle;  // For drawing Rectangles

下記のソースも追加する

  1. scene: Scene {
  2. width: 250
  3. height: 80
  4. fill: Color.BLACK
  5. content: Rectangle {     // add an array of contents, here just one element
  6.     x: 10                          // x position for the rectangle
  7.     y: 10                          // y position for the rectangle
  8.     width: 230                 // width of rectangle starting at ‘x’
  9.     height: 60                 // height of rectangle starting at ‘y’
  10.     fill: Color.BLUE         // Fill rectangle with BLUE color
  11. }
  12. }

５）、もう一回動かしてみよう

HWRect

６）、最後は、表示文字ソースを追加する

  1. import javafx.scene.text.Text;
  2. import javafx.scene.text.Font;

下記のソースも追加する

  1. fill: Color.BLACK
  2. content: [                // Note that contents is now an array instead
  3.     Rectangle {        // this code remains the same as above except that the corners are round now
  4.         x: 10 y: 10
  5.         width: 230 height: 60
  6.         arcWidth: 20  arcHeight: 20
  7.         fill: Color.BLUE
  8.     }
  9.     Text {                  // This is the new code I added for adding text lables
  10.         x: 40 y: 50
  11.         font: Font { size: 20 }
  12.         fill: Color.WHITE
  13.         content: "Hello JavaFX World!"
  14.     }
  15. ]

７）、最終の結果：

HWButton

Related Posts

]]> http://digitechlog.com/2008/11/15/a-hello-world-sample-on-javafx.html/feed 0