SparkコンポーネントのデザインTips10

Q1.日本語文字全般がきたない
A1.こちらを参考にしました。
forked from: forked from: forked from: Flex 4 Sparkスキンの日本語フォントが残念な件について | wonderfl build flash online http://wonderfl.net/c/gYjs

Q2.太字の場合、文字間がつまりすぎている
A2.CSSでtracking-right:”10%”;を設定します。値はお好みで。

Q3.日本語入力が変になる。
A3.Flex SDK4.1でビルドします。コンパイラー設定は10.1.35にしました。
こちらを参考にしました。>フォーラム – Flex User Group http://www.fxug.net/modules/xhnewbb/viewtopic.php?topic_id=3785&post_id=15064

Q4.文字データ(プレーンテキスト)を表示したい
A4.以下のとおり。文字の大きさを返る場合はLabelにスタイルを当てましょう。

<s:Label>
        <s:text><![CDATA[
		もじもじ
		]]>
        </s:text>
    </s:Label>

Q5.BorderContainerを角丸にしたい
A5.CSSでcornerRadius: 5;とかでできます。ドロップシャドウをつけたい場合はdropShadowVisible: true;でできます。
だけどボーダーをつけてドロップシャドウをつけるとボーダーとドロップシャドウの間にバリのようなものが出るので困ります。対応方法が分かったので書きました。

Q6.リストの色をCSSでいじれる?
A6.以下のようなものがいじれました。
上からボーダーの色、1行ごとの色(奇数行、偶数行)、ロールオーバーの色、選択色
border-color:#ffcc00;
alternating-item-colors:#ffffff,#ffcc00;
roll-over-color:#ffff00;
selection-color:#ffff66;

Q7.CSSでタイトルウィンドウの色を変えたらボタンの色も変わってしまった
A7.色の設定を上書きします。
s|TitleWindow s|Button,s|TitleWindow s|TextInput{
chrome-color:#cccccc;
}

Q8.アプリケーションのコントロールバーのデザインを変えたい
A8.デザインビューでs:Applicationを選択時に右クリックしてスキンを作成を選択。名前を決めてOKを押します。73行目からがコントロールバーの定義が書いてありますのでごにょごにょします。変更が終わったらs:ApplicationタグにskinClass=”skin名”で設定は終了です。
またアプリケーションに背景を入れるにはこちらが参考になるかも。
Setting a background image on a Spark Application in Flex 4 | Flex Examples http://blog.flexexamples.com/2009/03/22/setting-a-background-image-on-an-fxapplication-in-flex-gumbo/

Q9.ブラウザの画面領域内に入っていない部分が印刷されない、印刷がずれる
A9.以下のようにしました。

//印刷ボタンを押したら
 public function printBtnFunc(e:MouseEvent = null):void{
 var printJob:FlexPrintJob = new FlexPrintJob();
 if (printJob.start()){
    //アプリケーションの一番上に印刷エレメントを追加
      FlexGlobals.topLevelApplication.addElement(printArea)
      printJob.addObject(printArea,FlexPrintJobScaleType.SHOW_ALL);
      printJob.send();
     //このままだとprintAreaが消えてしまうのでprintAreaのラップしているprintWapにもどす
      printWap.addElement(printArea)
     }
}

アプリケーションの一番上に印刷対象をおくと大丈夫なようです。

Q10.アプリケーションの背景画像を印刷にいれたくない
A10.印刷対象をmx:Canvasにして backgroundColor=”#FFFFFF”にしました。これでいいのか分かりませんが、Sparkコンポーネントでできる方法があれば知りたいです。

関連する記事:

カテゴリー: flex

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

名前 *