DigiTechLog Dot Com » HTML 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 as3cannonball: DOM+HTML+CSS+BrowserのActionScript 3ライブラリ http://digitechlog.com/2009/04/10/as3cannonball-dom-html-css-browser-library-for-actionscript-3.html http://digitechlog.com/2009/04/10/as3cannonball-dom-html-css-browser-library-for-actionscript-3.html#comments Fri, 10 Apr 2009 10:52:11 +0000 admin http://digitechlog.com/2009/04/10/as3cannonball-dom-html-css-browser-library-for-actionscript-3.html 「as3cannonball」というものは、DOM+HTML+CSS+Browserなどを簡単で操作できるActionScript 3オープンソースのライブラリです。公式サイトの紹介を見るとそのライブラリのソースはまだ全部テストされてないです。サンプルを参照しなら実装してみました、使いやすいですよね。ちょっとJavaScriptのExtライブラリ風があるじゃないかぁ。

※CSS解説：Cascading Style Sheets（CSS、段階スタイルシート、カスケーディング・スタイル・シート、カスケード・スタイル・シート）とは、HTML や XML の要素をどのように修飾（表示）するかを指示する仕様であり、W3Cによる勧告の一つ。文書の構造と体裁を分離させるという理念を実現する為に提唱されたスタイルシートの、具体的な仕様の一つ。CSS は HTML で表現可能と考えられるデザインの大部分を実現できる要素を取り入れつつ、新たなデザイン機能を備える。

ActionScriptには、以下のようでHTMLLoader オブジェクトが complete イベントを送出すると、ページ内の CSS スタイルを調べたり操作したりできます。

  1. <html>
  2. <style>
  3.     .style1A { font-family:Arial; font-size:12px }
  4.     .style1B { font-family:Arial; font-size:24px }
  5. </style>
  6. <style>
  7.     .style2 { font-family:Arial; font-size:12px }
  8. </style>
  9. <body>
  10.     <p class="style1A">
  11.         Style 1A
  12.     </p>
  13.     <p class="style1B">
  14.         Style 1B
  15.     </p>
  16.     <p class="style2">
  17.         Style 2
  18.     </p>
  19. </body>
  20. </html>
as3cannonballライブラリを使うと、

CSSソース:

  1. a
  2. {
  3.         color: #00FF00;
  4. }
  5.  
  6. #content a[href$=".pdf"]
  7. {
  8.         color: #FF0000;
  9. }

XMLソース:

  1. <div id=”content”>
  2.   <ul>
  3.     <li><a href=”somedoc.pdf”>Some PDF</a></li>
  4.   </ul>
  5. </div>

ActionScript ソース

  1. import com.newgonzo.cannonball.css.CSSDocument;
  2. import com.newgonzo.cannonball.css.CSSStyleDeclaration;
  3.  
  4. var document:CSSDocument = new CSSDocument();
  5. document.parseCSS(css);
  6.  
  7. var style:CSSStyleDeclaration = document.getCascadedStyle(xml);
  8.  
  9. trace(style.color); // #FF0000

関連リンク

http://code.google.com/p/as3cannonball/　公式サイト

Related Posts

]]> http://digitechlog.com/2009/04/10/as3cannonball-dom-html-css-browser-library-for-actionscript-3.html/feed 1 ５行ソースコードでHTML, CSS, AJAXの解析能力があるブラウザを作ろう http://digitechlog.com/2009/01/04/5-link-source-code-to-build-your-browse-support-html-css-ajax-in-adobe-air.html http://digitechlog.com/2009/01/04/5-link-source-code-to-build-your-browse-support-html-css-ajax-in-adobe-air.html#comments Sun, 04 Jan 2009 09:07:25 +0000 admin http://digitechlog.com/2009/01/04/5-link-source-code-to-build-your-browse-support-html-css-ajax-in-adobe-air.html 昔の昔の昔…、VBの時代、Windows　OS環境だったら、VBでIEのようなブラウザを作成するのは、すっごく簡単ですよね。同じのような、Adobe　AIRがブラウザエンジンにWebKitを採用したことを気が付いたので、Googleで検索してサンプルやドキュメントを見ながら作ってみました。

注意しなければいけないものは、ブラウザスクリプトの設定は何もしていないので、文字化けを発生している可能性があります。

具体的な環境設定とか、アイコンファイルの配置とか、AIRファイルの作成とかは本文最後の「参考リソース」のURLを参照してください。以下は簡単なswfファイルを作成するソースコードだけをメモします。

下記のような「browser.mxml」というソースファイルを作ります。

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
  3.     <mx:Label text="Please enter your URL and hit &quot;enter&quot;"/>
  4.     <mx:TextInput id="URLtext" width="100%" enter="HTML.location=URLtext.text"/>
  5.     <mx:HTML id="HTML" location="http://www.google.com/ig" width="100%" />  
  6. </mx:WindowedApplication>
フルプロジェクトはここをクリックしてダウンロード出来ます。

参考リソース：

http://blog.codezine.jp/editor/2007/06/adobe_air_1.php

Related Posts

]]> http://digitechlog.com/2009/01/04/5-link-source-code-to-build-your-browse-support-html-css-ajax-in-adobe-air.html/feed 0 Adobe AIRアプリケーション中にPDFをプレビューする http://digitechlog.com/2008/11/03/preview-a-pdf-file-in-adobe-air-application.html http://digitechlog.com/2008/11/03/preview-a-pdf-file-in-adobe-air-application.html#comments Mon, 03 Nov 2008 02:15:28 +0000 admin http://digitechlog.com/2008/11/03/preview-a-pdf-file-in-adobe-air-application.html Portable Document Format (ポータブル・ドキュメント・フォーマット、略称PDF) は、アドビシステムズが開発および提唱する、電子上の文書に関するファイルフォーマットである。「作成したドキュメントを異なる環境のコンピュータで元のレイアウトどおりに表示・印刷できる 」、「ドキュメントのセキュリティを設定できる」、「圧縮してデータを格納し、ファイルサイズを小さくできる」、「しおり・リンク・コメント・注釈といった、ドキュメントを画面に表示するときに便利な機能を設定できる」、「フォーム機能を使って、利用者の入力欄を受け取るような書式設定済み文書を作成できる」、「音声化などアクセシビリティに配慮したドキュメントを作成できる」、「マルチメディアに対応している」などいろいろな特長があるので、いろいろな領域中に、PDFがよく使われてます。

しかし、ずっと理解できないのは、同じアドビの製品AIR中に、PDFファイルを表示するコンポーネントをインクルードされてません。直接PDFを表示できるコンポーネットがないのですが、mx:HTMLコンポーネットを利用するとAdobe AIRアプリケーション中にもPDFをプレビューすることができます。

１、プレビューウィンドウを作るため、CPDFPreviewのインスタンスを生成とする

  1. var aPreview:CPDFPreview = new CPDFPreview();
  2. aPreview.open( true );

２、loadFile()でPDFファイルの参照を渡す

  1. aPreview.loadFile( fp );

もしくは下記のようなファイルURL形式で渡す

  1. aPreview.loadFile( “file://” + fp.nativePath  );

３、下記のサンプルソースコード

  1. <?xml version=”1.0″ encoding=”utf-8″?>
  2. <mx:Window xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” width=”912″ height=”636″
  3.     creationComplete=”init();”
  4.     >
  5.     <mx:HTML id=”htMainView” right=”0″ left=”0″ top=”0″ bottom=”0″/>
  6.     <mx:Script>
  7.         <![CDATA[
  8.             private const  DEFAULT_TITLE:String    = "PDF Preview";
  9.             private function init():void {
  10.             }
  11.             public function loadURL( anURL:String = "http://your.url.default/", showStatusLocation:Boolean = false ):void {
  12.                 title = DEFAULT_TITLE;
  13.                 if ( true == showStatusLocation ) {
  14.                     status = ' Preview of: ' + anURL;
  15.                 }
  16.                 htMainView.location = anURL;
  17.             }
  18.             public function loadFile( anURL:File, showStatusLocation:Boolean = false  ):void {
  19.                 if ( null != anURL ) {
  20.                     loadURL( "file://" + anURL.nativePath, showStatusLocation );
  21.                 }
  22.             }
  23.         ]]>
  24.     </mx:Script>
  25. </mx:Window>

Related Posts

]]> http://digitechlog.com/2008/11/03/preview-a-pdf-file-in-adobe-air-application.html/feed 2