Archive for the ‘デザイン(CSS等)’ Category
flexでは、ResourceManagerという機能を使って文言を別のファイルにして管理が行えます。
したがって、マルチランゲージ対応などもこれを使って行えます。
では、Flex Builderを使ってこのResourceManagerを使って文言を別のファイルにします。
1)Flex Builderのpropertiesファイルに日本語を記述できるようにする。
この設定を忘れると、文字コードがおかしいといわれ保存ができません。
はじめ、Flex Builder日本語版で、propertiesファイルがJavaなどのpropertiesファイルと同じようにしなければ、
日本語を記述できないと勘違いしてしまいましたが、単なるFlex Builderの設定のようです。
(せっかく日本語版なのですから、このあたりのデフォルトもきちんと設定されているとうれしいのですが・・・・)
ウィンドウ>設定 から、一般>コンテンツ・タイプ
で
「テキスト」を開くと、「Javaプロパティー・ファイル」がありますので、そこのデフォルト・エンコーディングを”UTF-8″に変更してください。
2)ソースディレクトリの下に
locale/ja_JP
ディレクトリを作成し、ここに文言ファイルを置きます。
別のディレクトリに配置し、そこをソースディレクトリとして追加してもかまいません。
3)コンパイル時に、ja_JPを使うようにします。
プロジェクトのプロパティで、「Flexコンパイラ」の「追加コンパイラ引数」に以下のように設定します。
-locale ja_JP -allow-source-path-overlap=true -source-path=locale/{locale}
4)実際に文言ファイルを作成します。
ここではファイル名はLBL0001.propertiesにします。
title=これはタイトルです。 desc=ここには説明が入ります。
5)文言ファイルで定義した文言をMXMLで使用する
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
label="{resourceManager.getString('LBL0001','title')}"
>
<mx:Metadata>
[ResourceBundle("LBL0001")]
</mx:Metadata>
</mx>
という感じで利用可能です。
文言だけじゃなく、ちょっとしたシステム設定などにも使えるのではないでしょうか?
CSSのファイルを使わずにプログラムだけでスタイルを指定したくなった。特に、フォント関連ではインストールされているフォントが指定どおりとも限らないし、また、利用者が好きなフォントを選べたほうがいいと思い、その方法を調べた。
まず、準備としてはコンボボックスにフォント一覧を表示する。
こんな感じで、表示します。
var ar:Array = Font.enumerateFonts(true);
list.dataProvider = ar;
list.labelFunction = function(data:Object):String{
return data.fontName;
};
さて、以下が指定されたフォント名を設定する方法です。
これで、全体のフォントが変わります。
var css:CSSStyleDeclaration = StyleManager.getStyleDeclaration("global");
css.setStyle("fontFamily",list.selectedLabel);
ここで、フォント関連では日本語フォントではないものを除きたいとおもい、
hasGlyphs(str:String):Boolean
で、
font.hasGlyphs(”あいうえお”);
とやってみましたが、すべてがfalseに・・・・
何か使い方があるのでしょうか・・・・しらべてみます。
そのPCで使えるフォント一覧を表示するプログラムです。
private var fontList:Array = Font.enumerateFonts(true);
上記、fontListをdataProviderにしてDataGridを表示したものが以下のようになります。
ここをクリックで全画面表示になります。
Flex( Windows )でアプリケーションを作っているとデフォルトのフォントが小さいことと、汚い。
でも、
global{
fontFamily: "メイリオ";
fontSize: 12;
}
のように指定すれば、全体のフォントが変わります。
ちなみに、globalについての説明はここにあります。
flexでは、CSSでデザインができるのだがこれをswfにして動的に読むことができるらしい。
Flex Builderでは、cssファイルで右クリックをすると左のようなメニューが表示されるので、
そこで、「CSSからSWFにコンパイルする」をチェックすればよい。
こうすることで、CSSファイルが変わるたびにswfファイルが出来上がる。
(これでFlex Builderでのビルド時間が短くなりました。これもうれしい誤算です。)
また、
StyleManager.loadStyleDeclarations("css/font.swf");
のようにすれば、作成したCSSを適用できます。
これを応用すれば、簡単にスキンとか、テーマ別のデザインが作成できるようになりますね。


