ラベル AIR の投稿を表示しています。 すべての投稿を表示
ラベル AIR の投稿を表示しています。 すべての投稿を表示

2009年6月16日火曜日

QRコードを表示してみた


QRcodeG.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
showStatusBar="false" paddingBottom="3" paddingLeft="3" paddingRight="3" paddingTop="3"
width="174" height="188"
minWidth="174" minHeight="188">
<mx:Script>
<![CDATA[
private const GOOGLE_CHART:String
= 'http://chart.apis.google.com/chart?chs=150x150&cht=qr&chl=';
private function create():void
{
var url:String = GOOGLE_CHART + encodeURIComponent(txt_.text);
qrImage_.scaleContent = true;
qrImage_.source = url;
}
]]>
</mx:Script>
<mx:HBox width="100%">
<mx:TextInput id="txt_" width="100%"/>
<mx:Button label="QR" click="create()"/>
</mx:HBox>
<mx:HBox width="100%" height="100%" horizontalAlign="center" verticalAlign="middle">
<mx:Image id="qrImage_" width="100%" height="100%"
source="icons/icon_128.png" scaleContent="false"
autoLoad="true" verticalAlign="middle" horizontalAlign="center"/>
</mx:HBox>
</mx:WindowedApplication>

2009年6月3日水曜日

AIRでタスクバーに表示されないアプリケーションを作る


ウィジェットをAIRで作ってみたくなった。

ウィジェットがタスクバーに表示されていたら邪魔だから、タスクバーに表示されないようにしたい。
そのためにはウィンドウのtypeをlightweightにすればよい。

  1. ベースを<mx:Window>にしたカスタムコンポーネントを作りtype="lightweight"にする。
  2. (1)が閉じられたらアプリケーションを終了させるコードを書く
  3. アプリケーションファイルを<mx:Application>にして(1)を表示する

ウィンドウの位置を動かすためにnativeWindow.startMove()をmouseDownイベントのハンドラで呼び出す。このときmouseDownをカスタムコンポーネントで拾うと、イベントバブリングがあるので、全ての子コンポーネントのmouseDownを拾ってしまう。解決方法は、イベントバブリングを中断するという方法もあるのだろうけれど(...調べてないからやり方は分からない)、mouseDownを受け取るコンポーネントを配置する方法のほうが簡単だと思う(...知識は少なくても解決できたから^^)。

ちなみに、<mx:Application>を使う理由は、Flex Builder 3でAIRアプリのプロジェクトを作ると、アプリケーションファイルは<mx:WindowedApplication>になるのだが、このときウィンドウのtypeをlightweightにする方法を見つけられなかったから。

WidgetWindow.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Window xmlns:mx="http://www.adobe.com/2006/mxml"
maximizable="false"
minimizable="false"
resizable="false"
systemChrome="none"
showFlexChrome="false"
transparent="true"
type="lightweight"
layout="absolute"
width="100"
height="100"
close="exit()">
<mx:Script>
<![CDATA[
private function exit():void
{
NativeApplication.nativeApplication.exit(0);
}
]]>
</mx:Script>
<mx:Canvas width="100%" height="100%"
cornerRadius="8" borderStyle="solid" backgroundColor="#F3F3D1"
mouseDown="nativeWindow.startMove()" backgroundAlpha="0.7"/>
<mx:VBox horizontalCenter="0" verticalCenter="0" horizontalAlign="center">
<mx:Label text="Hello world"/>
<mx:Button label="close" click="exit()"/>
</mx:VBox>
</mx:Window>

Widget.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
initialize="init()">
<mx:Script>
<![CDATA[
private function init():void
{
new WidgetWindow().open();
}
]]>
</mx:Script>
</mx:Application>

2009年5月1日金曜日

as3cryptoを使ってみた


ようやくas3cryptoを試してみた。
ドキュメント少ないなぁ・・・と思っていたけれど、始めてみたらDemoソースコードを読めるので難しいことはなかった。
StudyCrypto.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
showStatusBar="false"
width="320" height="300"
styleName="study"
borderThickness="1">
<mx:Style>
.study {
paddingBottom: 3;
paddingLeft: 3;
paddingRight: 3;
paddingTop: 3;
}
</mx:Style>
<mx:Script>
<![CDATA[
import com.hurlant.crypto.Crypto;
import com.hurlant.crypto.symmetric.ICipher;
import com.hurlant.crypto.symmetric.IPad;
import com.hurlant.crypto.symmetric.IVMode;
import com.hurlant.crypto.symmetric.PKCS5;
import com.hurlant.util.Base64;
import com.hurlant.util.Hex;

public static function encrypt(name:String, k:String, s:String):ByteArray {
var e:ByteArray = new ByteArray();
var key:ByteArray = Hex.toArray(Hex.fromString(k));
var data:ByteArray = Hex.toArray(Hex.fromString(s));
var pad:IPad = new PKCS5();
var cipher:ICipher = Crypto.getCipher(name, key, pad);
pad.setBlockSize(cipher.getBlockSize());
cipher.encrypt(data);
e.writeObject(data);
if(cipher is IVMode){
var ivmode:IVMode = cipher as IVMode;
e.writeObject(ivmode.IV);
}
e.position = 0;
return e;
}

public static function decrypt(name:String, k:String, e:ByteArray):String {
var data:ByteArray = e.readObject();
var kdata:ByteArray = Hex.toArray(Hex.fromString(k));
var pad:IPad = new PKCS5();
var cipher:ICipher = Crypto.getCipher(name, kdata, pad);
if(cipher is IVMode){
var ivmode:IVMode = cipher as IVMode;
ivmode.IV = e.readObject();
}
cipher.decrypt(data);
return Hex.toString(Hex.fromArray(data));
}

private function run():void {
const name:String = 'aes-cbc';
var e:ByteArray = encrypt(name, key.text, src.text);
o0.text = Base64.encode(Hex.fromArray(e));
o1.text = decrypt(name, key.text, Hex.toArray(Base64.decode(o0.text)));
}
]]>
</mx:Script>
<mx:Form styleName="study" width="100%" cornerRadius="6" borderColor="#218BD5" borderStyle="solid">
<mx:FormItem label="Password" width="100%">
<mx:TextInput width="100%" id="key" change="btn.enabled = (4 &lt;= key.text.length)"/>
</mx:FormItem>
<mx:FormItem label="Input" width="100%">
<mx:TextInput width="100%" id="src"/>
</mx:FormItem>
<mx:FormItem width="100%">
<mx:Button id="btn" label="run" click="run()" enabled="false"/>
</mx:FormItem>
</mx:Form>
<mx:Form styleName="study" width="100%" height="100%" cornerRadius="6" borderColor="#218BD5" borderStyle="solid">
<mx:FormItem label="Encrypt" width="100%" height="100%">
<mx:TextArea width="100%" height="100%" id="o0"/>
</mx:FormItem>
<mx:FormItem label="Decrypt" width="100%" height="100%">
<mx:TextArea width="100%" height="100%" id="o1"/>
</mx:FormItem>
</mx:Form>
</mx:WindowedApplication>

2009年4月21日火曜日

AIRで非矩形ウィンドウ

OvalWindow.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication
xmlns:mx="http://www.adobe.com/2006/mxml"
showFlexChrome="false"
width="800" height="600"
paddingTop="0" paddingLeft="0" paddingRight="0" paddingBottom="0"
creationComplete="adjustSize()">
<mx:Script><![CDATA[]]>
private function adjustSize():void {
width = bg.width; height = bg.height;
}
</mx:Script>
<mx:Image id="bg" data="@Embed(source='./Oval.png')" mouseDown="nativeWindow.startMove()"/>
</mx:WindowedApplication>
OvalWindow-app.xml
<?xml version="1.0" encoding="utf-8"?>
<application xmlns="http://ns.adobe.com/air/application/1.5">
<id>com.blogspot.takumakei.OvalWindow</id>
<version>0.1</version>
<filename>OvalWindow</filename>
<initialWindow>
<systemChrome>none</systemChrome>
<transparent>true</transparent>
<maximizable>false</maximizable>
<resizable>false</resizable>
<content>OvalWindow.swf</content>
</initialWindow>
</application>
元のウィンドウサイズが画像のサイズより小さいと、AIRアプリを起動したときに一瞬スクロールバーが見える気がする。

2009年4月20日月曜日

Flexのコーディング規則

Flexのコーディング規則を見つけた。

これまで書いたコードが規則に則していないところもあった。

このページはかなり長い。具体例も示していて読みやすくは書いてあると思う。
それでもすべてをカバーできているわけでもないだろうな。

それにしても、こんなにたくさんひとつひとつ覚えるのは面倒だ。これまでの習慣と違うので、身体が覚えて自然に書けるようになるまでに時間もかかるだろう。

いろんな言語のソースを書いていていつも思うことだけど、自動的に整形する機能をコンパイラが持っていたらいいのに。
Warningで知らせてくれるとか、もっと過激にソースコードを修正してくれるとか。

歴史のある言語だと、宗教論争が燃え上がる可能性が高いから難しいだろうけれどね。

2009年4月19日日曜日

Adobe Flex 3 での Adobe AIR 1.5 アプリケーションの開発へのリンク

ブラウザのブックマークはマシン毎の同期がめんどうなのでできるだけ使わないようにしている。

ローカルがだめならオンライン。
Google bookmarksはメインのブラウザをchromeにしてからは使用頻度が減っている。
IEFirefoxGoogleツールバーを使っていたときはとても重宝していた。

最近はキーワードを頼りに検索エンジンに頼っている毎日。

そんななか、すぐに見失っちゃうリンク。

ついでにこっちもメモっておくかな・・

Adobe AIRアプリを配布する

Deploying Adobe AIR applications seamlessly with badge install

この記事はちゃんと読んで理解しておいたほうがよさそうだな。

2009年4月18日土曜日

Flexのswfの逆アセンブル

Flashのswfは逆アセンブルできるので、なんらかの理由でアルゴリズムが第三者に知られたくない場合に問題になる。と、どこかで聞いて知っていた。

AIRもswfなので、同じなのだろう。

確かめるために、自分で作ったAIRアプリを逆アセンブルしてみることにした。

まず、swfと逆アセンブルでぐぐったらFlareが引っかかったので試してみた。

結果は惨敗。クラス名と思われる名前は抽出されるが、肝心の中身は全く出力されていない。

同じswfなのに。

C++で作ったバイナリと、Cで作ったバイナリは、逆アセンブルすればそれぞれ特徴的なパターンを持っているのかもしれないと考えれば、Flashで作ったswfとFlexで作ったswfのパターンが異なっていてFlareで逆アセンブルできないことも不思議じゃない。

さて、ということは逆アセンブルできないのかというと、そうでもない。

Flex SDKにはswfdumpというツールがあったとか。(Flex SDK 3.3では見つけられない)
Flasmというものもある。(試してないけど)

それに、Nemo 440というAIRアプリを見つけた。

試してみたところ、バイトコードレベルだけれど、比較的読みやすいように思う。

FlashのVMのバイトコードを勉強する気にはまだなれないけれどね。

2009年4月17日金曜日

Event propagation

Eventの伝搬の中の最後のフェーズなのね。
Bubbling。
読んでおこうっと。

Flex3でカスタムイベント


任意のActionScriptクラスで任意のイベントクラスをイベントとして送出するサンプル。

clone()をオーバーライドしないとイベントバブリングが発生した場合に問題になるそうだ。
これまで見て見ぬふりをしてきた「イベントバブリング」ってなんだろ?

それから、
[Event(name="alert", type="MyEvent")]
という属性(なのかな?)を書くと、Adobe Flex Builder 3 のコードエディタでaddEventListenerの引数の補完候補に表示されるようになる。これは便利。

カスタムイベントの作成(Flex2だけど日本語)とか

com.blogspot.takumakei.MyEventDispatcher.as
package com.blogspot.takumakei
{
import flash.events.EventDispatcher;
import flash.events.IEventDispatcher;

[Event(name="alert", type="MyEvent")]
[Event(name="notify", type="MyEvent")]
public class MyEventDispatcher extends EventDispatcher
{
public function MyEventDispatcher(target:IEventDispatcher=null)
{
super(target);
}

public function dispatchAlert(customProperty:String):void {
dispatchEvent(new MyEvent(MyEvent.ALERT, customProperty));
}

public function dispatchNotify(customProperty:String):void {
dispatchEvent(new MyEvent(MyEvent.NOTIFY, customProperty));
}
}
}
com.blogspot.takumakei.MyEvent.as
package com.blogspot.takumakei
{
import flash.events.Event;

public class MyEvent extends Event
{
public static const NOTIFY:String = 'notify';
public static const ALERT:String = 'alert';

public var customProperty:String = null;

public function MyEvent(type:String, customProperty:String, bubbles:Boolean=false, cancelable:Boolean=false)
{
super(type, bubbles, cancelable);
this.customProperty = customProperty;
}

override public function clone():Event {
return new MyEvent(type, customProperty);
}
}
}
StudyCustomEvent.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" initialize="init()">
<mx:Script>
<![CDATA[
import mx.controls.Alert;

import com.blogspot.takumakei.MyEvent;
import com.blogspot.takumakei.MyEventDispatcher;

private var myEventDispatcher:MyEventDispatcher = new MyEventDispatcher();

private function init():void {
myEventDispatcher.addEventListener(
MyEvent.NOTIFY,
function(event:MyEvent):void {
Alert.show(event.customProperty, 'MyEvent(notify) received');
});
myEventDispatcher.addEventListener(
MyEvent.ALERT,
function(event:MyEvent):void {
Alert.show(event.customProperty, "MyEvent(alert) received");
});
}

private function dispatchAlert():void {
myEventDispatcher.dispatchAlert('hello world');
}

private function dispatchNotify():void {
myEventDispatcher.dispatchNotify('hello world');
}
]]>
</mx:Script>
<mx:Button label="alert" click="dispatchAlert()"/>
<mx:Button label="notify" click="dispatchNotify()"/>
</mx:WindowedApplication>

2009年4月16日木曜日

知らないと損する便利なAIRアプリ60こ以上

60+ Useful Adobe AIR Applications You Should Know

知らないのもあったけど
便利そうなのもあったけど
知らなくてもいいものあったような・・・

2009年4月15日水曜日

Flex 3 beta 3でRESTfulの記事みつけた


Flexのインストールからアプリの作成まで、図入りで丁寧に説明してくれている。
読みやすそう。

記事の内容だけでなく、ソースコードの表示に使っているdp.SyntaxHighlighterが気になった。

いいな~

2009年4月10日金曜日

BloggerStyle.mxml不具合修正


前のバージョンでは「コードをコピー→clearをクリック→コードをペースト」ができなかった。
BloggerStyle.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
width="164" height="164"
minWidth="164" minHeight="164"
showFlexChrome="true"
paddingBottom="2" paddingLeft="2" paddingRight="2" paddingTop="2"
showStatusBar="false"
title="BloggerStyle"
>
<mx:Script>
<![CDATA[
import mx.controls.CheckBox;
private static var TEMPLATE_TEXT_A:String
= '<pre class="mycodeT" onclick="toggleMyCode(this)">%name%</pre>'
+ '<pre class="mycodeB">%body%</pre>';
private static var TEMPLATE_TEXT_B:String
= '<pre class="mycodeT">%name%</pre>'
+ '<pre class="mycodeB">%body%</pre>';

private function escape(x:String):String {
x = x.replace(/&/g, '&amp;');
x = x.replace(/</g, '&lt;');
x = x.replace(/>/g, '&gt;');
x = x.replace(/"/g, '&quot;'); // "
return x;
}
private function format():String {
var name:String = escape(src_name.text);
var body:String = escape(src_body.text);
if(src_clickable.selected)
{
return TEMPLATE_TEXT_A.replace(/%name%/, name).replace(/%body%/, body);
}
return TEMPLATE_TEXT_B.replace(/%name%/, name).replace(/%body%/, body);
}
private function updateResult():void {
var text:String;
if(src_name.text != '' || src_body.text != ''){
text = format();
var cb:Clipboard = Clipboard.generalClipboard;
cb.setData(ClipboardFormats.TEXT_FORMAT, text);
}
else{
text = '';
}

if(dst != null){
dst.text = text;
}

}
private function clear():void {
src_name.text = '';
src_body.text = '';
}
]]>
</mx:Script>
<mx:TabNavigator width="100%" height="100%">
<mx:VBox label="I" width="100%" height="100%">
<mx:TextInput id="src_name" change="updateResult()"
width="100%" />
<mx:TextArea id="src_body" change="updateResult()"
width="100%" height="100%"
horizontalScrollPolicy="on" verticalScrollPolicy="on"/>
<mx:ControlBar
width="100%"
paddingBottom="2" paddingLeft="2" paddingRight="2" paddingTop="2">
<mx:CheckBox id="src_clickable" label="clickable?" click="updateResult()"/>
<mx:Spacer width="100%"/>
<mx:Button label="clear" click="clear()"/>
</mx:ControlBar>
</mx:VBox>
<mx:Canvas label="O" show="updateResult()"
width="100%" height="100%" >
<mx:TextArea id="dst"
editable="false"
width="100%" height="100%"
horizontalScrollPolicy="on" verticalScrollPolicy="on"/>
</mx:Canvas>
</mx:TabNavigator>
</mx:WindowedApplication>

2009年4月7日火曜日

AIRが持つHTMLレンダリングエンジンを遊ぶ



記事を書いた頃のAIRのバージョンは古いみたいでAPIが変わっていた。

それをさらに更新してくれているFlex3でAIRブラウザという記事にたどり着き、

ようやくサンプルを手元で動かすことができました。


しかし、日本語が文字化けするのは何でだろう?

全てが文字化けするわけではないところが微妙~

FlexHTML.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="init()"
showStatusBar="false"
paddingBottom="2" paddingLeft="2" paddingRight="2" paddingTop="2">
<mx:Script>
<![CDATA[
private const DEFAULT_HOME:String = "http://www.google.com";

private const THUMBNAIL_WIDTH:uint = 800;
private const THUMBNAIL_HEIGHT:uint = 600;

private function init():void {
var initialBounds:Rectangle
= new Rectangle(
(Screen.mainScreen.bounds.width / 2 - 500),
(Screen.mainScreen.bounds.height / 2 - 400), 1000, 800);
this.nativeWindow.bounds = initialBounds;
htmlPage.addEventListener(Event.LOCATION_CHANGE, onLocationChange);
htmlPage.addEventListener(Event.COMPLETE, onHTMLComplete);
locationInput.text = DEFAULT_HOME;
changeLocation();
}
private function onLocationChange(event:Event):void {
locationInput.text = event.target.location;
}
private function changeLocation():void {
var url:String = locationInput.text;
htmlPage.location = url;
}

private var thumbnailCache:Object;

private function onHTMLComplete(event:Event):void {
thumbnailCache = {};
var links:Object = htmlPage.htmlLoader.window.document.links;
for(var i:uint = 0; i < links.length; ++i){
links[i].addEventListener("mouseover", thumbnailLoadFunc(links[i]));
links[i].addEventListener("mouseout", thumbnailHideFunc(links[i]));
links[i].addEventListener("click", thumbnailHideFunc(links[i]));
}
}
private function thumbnailHideFunc(link:Object):Function {
return function(mouseEvent:Object):void {
var thumbnail:Object = thumbnailCache[link.href];
if(!thumbnail){
return;
}
htmlPage.removeChild(thumbnail);
};
}
private function thumbnailLoadFunc(link:Object):Function {
return function(mouseEvent:Object):void {
var thumbnail:Object = thumbnailCache[link.href];
if(!thumbnail){
thumbnail = new Sprite();
var html:HTMLLoader = new HTMLLoader();
html.load(new URLRequest(link.href));
html.scaleX = .5;
html.scaleY = .5;
html.width = THUMBNAIL_WIDTH;
html.height = THUMBNAIL_HEIGHT;
thumbnail.addChild(html);
thumbnailCache[link.href] = thumbnail;
}
thumbnail.x = mouseEvent.x;
thumbnail.y = mouseEvent.y;
htmlPage.addChild(thumbnail);
};
}
]]>
</mx:Script>
<mx:VBox height="100%" width="100%">
<mx:HBox height="20" width="100%">
<mx:TextInput id="locationInput" width="100%"/>
<mx:Button label="Go"/>
</mx:HBox>
<mx:HTML id="htmlPage" width="100%" height="100%"/>
</mx:VBox>
</mx:WindowedApplication>

Flex Builder 3 で AIR アプリを作った


toggleMyCode()を呼び出すコードを埋め込んだ。

休む暇もなくクリップボードにコピーするコードになってて美しくない。周期的に入力を検査して、変化があったらコピーする。それに加えて、アプリケーションがフォーカスを失う時にコピーすれば十分かな?
またいつか・・・。
BloggerStyle.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
width="164" height="164"
minWidth="164" minHeight="164"
showFlexChrome="true"
paddingBottom="2" paddingLeft="2" paddingRight="2" paddingTop="2"
showStatusBar="false"
title="BloggerStyle"
>
<mx:Script>
<![CDATA[
import mx.controls.CheckBox;
private static var TEMPLATE_TEXT_A:String
= '<pre class="mycodeT" onclick="toggleMyCode(this)">%name%</pre>'
+ '<pre class="mycodeB">%body%</pre>';
private static var TEMPLATE_TEXT_B:String
= '<pre class="mycodeT">%name%</pre>'
+ '<pre class="mycodeB">%body%</pre>';

private function escape(x:String):String {
x = x.replace(/&/g, '&amp;');
x = x.replace(/</g, '&lt;');
x = x.replace(/>/g, '&gt;');
x = x.replace(/"/g, '&quot;'); // "
return x;
}
private function format():String {
var name:String = escape(src_name.text);
var body:String = escape(src_body.text);
if(src_clickable.selected)
{
return TEMPLATE_TEXT_A.replace(/%name%/, name).replace(/%body%/, body);
}
return TEMPLATE_TEXT_B.replace(/%name%/, name).replace(/%body%/, body);
}
private function updateResult():void {
var text:String = format();
if(dst != null){
dst.text = text;
}
var cb:Clipboard = Clipboard.generalClipboard;
cb.setData(ClipboardFormats.TEXT_FORMAT, text);
}
private function clear():void {
src_name.text = '';
src_body.text = '';
updateResult();
}
]]>
</mx:Script>
<mx:TabNavigator width="100%" height="100%">
<mx:VBox label="I" width="100%" height="100%">
<mx:TextInput id="src_name" change="updateResult()"
width="100%" />
<mx:TextArea id="src_body" change="updateResult()"
width="100%" height="100%"
horizontalScrollPolicy="on" verticalScrollPolicy="on"/>
<mx:ControlBar click="updateResult()"
width="100%"
paddingBottom="2" paddingLeft="2" paddingRight="2" paddingTop="2">
<mx:CheckBox id="src_clickable" label="clickable?"/>
<mx:Spacer width="100%"/>
<mx:Button label="clear" click="clear()"/>
</mx:ControlBar>
</mx:VBox>
<mx:Canvas label="O" show="updateResult()"
width="100%" height="100%" >
<mx:TextArea id="dst"
editable="false"
width="100%" height="100%"
horizontalScrollPolicy="on" verticalScrollPolicy="on"/>
</mx:Canvas>
</mx:TabNavigator>
</mx:WindowedApplication>

2009年3月30日月曜日

Tour de Flex

Tour de Flexも気になる~。時間つくらなくちゃ~。
もとねたはadakoda

Flex Core ComponentsやサードパーティのComponentsや、FlickrなどのCloud APIsも収録されていて、ソースコードも閲覧できるらしい。

2009年3月23日月曜日

Bloggerにコードを載せる

以前のものを改良してみた。
CSS
/* MyCode
----------------------------------------------- */
.mycodeT, .mycodeB {
font-family: consolas, "Courier New", courier, monospace;
padding: 3px 3px 3px;
}
.mycodeT {
margin: 1em 1em 0;
color: #e04000;
background: #ffc080;
font-weight: bold;
}
.mycodeB {
margin: 0 1em 1em;
color: black;
background: papayawhip;
border-width: 1px;
border-style: dashed;
border-color: maroon;
overflow: scroll;
word-wrap: normal;
}
ついでにAIRで成型用のツールを作ってみた。
BloggerStyle
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
title="Sample"
invoke="invokeHandler()">
<mx:Style>
WindowedApplication
{
background-color:"0xffffff";
font-size:"12";
}
</mx:Style>
<mx:Script>
<![CDATA[
private static var TEMPLATE_TEXT:String = '<pre class="mycodeT">%name%</pre><pre class="mycodeB">%text%</pre>';

private function invokeHandler():void {
_srcName.setFocus();
}
private function changeHandler(event:Event):void
{
_dstText.text = format();
}
private function format():String
{
var name:String = escape(_srcName.text);
var text:String = escape(_srcText.text);
return TEMPLATE_TEXT.replace(/%name%/, name).replace(/%text%/, text);
}
private function escape(x:String):String
{
x = x.replace(/&/g, '&amp;');
x = x.replace(/</g, '&lt;');
x = x.replace(/>/g, '&gt;');
x = x.replace(/"/g, '&quot;');
return x;
}
]]>
</mx:Script>
<mx:HDividedBox width="100%" height="100%">
<mx:VBox width="50%" height="100%">
<mx:TextInput id="_srcName" width="100%" change="changeHandler(event)"/>
<mx:TextArea id="_srcText" width="100%" height="100%" change="changeHandler(event)"/>
</mx:VBox>
<mx:TextArea id="_dstText" width="50%" height="100%" editable="false"/>
</mx:HDividedBox>
</mx:WindowedApplication>

2009年3月19日木曜日

Flex_SDKでAIRアプリを作る

AIRアプリは無料で作れる。
手順は次の通り。

1. Javaをダウンロード&インストールする。
2. Adobe® Flex® 3 SDKをダウンロード&インストールする。
3. Sample.mxmlを書いてコンパイルする。
$ amxmlc Sample.mxml
4. Sample-app.xmlを書いて実行してみる。
$ adl Sample-app.xml
5. パッケージングする。
$ adt -certificate -cn SelfSigned 1024-RSA Sample.pfx password
※自己署名証明書は1回作れば使い回せる
$ adt -package -storetype pkcs12 -keystore Sample.pfx -storepass password Sample.air Sample-app.xml Sample.swf icons
※この例ではアプリケーションにアイコンを設定しているのでパッケージにiconsディレクトリを含めている。

Sample.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
title="Sample"
invoke="invokeHandler()">
<mx:Style>
WindowedApplication
{
background-color:"0xffffff";
font-size:"12";
}
</mx:Style>
<mx:Script>
<![CDATA[
private static var PROLOGUE:String = '<div class="mycode1"><pre class="mycode2">';
private static var EPILOGUE:String = '</pre></div>';

private function invokeHandler():void {
_srcText.setFocus();
}
private function changeHandler(event:Event):void
{
_dstText.text = toMyCode(_srcText.text);
}
private function toMyCode(x:String):String
{
x = x.replace(/&/g, '&amp;');
x = x.replace(/</g, '&lt;');
x = x.replace(/>/g, '&gt;');
x = x.replace(/"/g, '&quot;');
return PROLOGUE + x + EPILOGUE;
}
]]>
</mx:Script>
<mx:HDividedBox width="100%" height="100%">
<mx:TextArea id="_srcText" width="50%" height="100%" change="changeHandler(event)"/>
<mx:TextArea id="_dstText" width="50%" height="100%" editable="false"/>
</mx:HDividedBox>
</mx:WindowedApplication>

Sample-app.xml
<?xml version="1.0" encoding="utf-8"?>
<application xmlns="http://ns.adobe.com/air/application/1.5">
<id>com.blogspot.takumakei.Sample</id>
<version>0.1</version>
<filename>Sample</filename>
<initialWindow>
<content>Sample.swf</content>
<visible>true</visible>
<!--<systemChrome>none</systemChrome>-->
<!--<transparent>true</transparent>-->
<width>320</width>
<height>240</height>
</initialWindow>
<icon>
<image16x16>icons/icon_016.png</image16x16>
<image32x32>icons/icon_032.png</image32x32>
<image48x48>icons/icon_048.png</image48x48>
<image128x128>icons/icon_128.png</image128x128>
</icon>
</application>


Adobe Developer Box

気になる。あ~気になる。でも今は時間がないから試せない。気になるぅ~。

Adobe Developer Box

2009年1月28日水曜日

AIRアプリのウィンドウを動かす方法+ウィンドウをリサイズする方法

systemChromeをnoneにして、半透明ウィンドウを作り、タイトルバーを自作するようなときに、ウィンドウを自力で動かす必要があるのだけれど・・・どうすればよい?

わかってみれば時間がもったいなかったなと思えるほど簡単。ウィンドウを動かすのは、
nativeWindow.startMove();
これだけ。

同様に必要になるであろうウィンドウのリサイズは
nativeWindow.startResize(NativeWindowResize.TOP);
これでできる。