發表文章

目前顯示的是 2月, 2013的文章

在 Blogger 文章中使用 Google Code Prettify 顯示範例程式碼

圖片
作為一個以程式技術為主的分享網誌,當然會貼上幾段程式碼,後來發現當分享大型架構作品時,會貼上許許多多的程式碼範例與構造,想也知道貼到最後會亂七八糟,搞到最後連自己也會看不懂,這時在網路上找到   Google Code Prettify 這個方法,也讓我日後不用為此煩惱,趕緊介紹如何使用吧! 介紹如何使用 Google Code Prettify : 1.首先在 " 我的網誌 " 底下點選 " 範本 " 再點選旁邊的 " 編輯HTML " 2.開啟之後 " Ctrl+F " 出現搜尋視窗,在搜尋視窗輸入" </head> " 在 </head>的 上方貼上 <link href="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css" rel="stylesheet" type="text/css"></link> <script src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js" type="text/javascript"> </script> 3.接著繼續  " Ctrl+F " 出現搜尋視窗,在搜尋視窗輸入" <body " 在 <body的 上方覆蓋貼上 <body expr:class = '&quot;loading&quot; + data:blog.mobileClass' onload = ' prettyPrint (); ' > 修改 CSS 樣式表 美化程式碼 : 1 . 繼續  " Ctrl+F " 出現搜尋視窗,在搜尋視

Flex4.6_建立一個簡易留言板範例使用AS3與MXML溝通範例

圖片
首先建立一個新的Package 名為 com.pomodo.model 之後在底下建立 Task.as 作為 mxml的溝通管道 package com.pomodo.model { public class Task { [Bindable] public var name:String; public function Task(name:String=""){ this.name=name; } } } 資料結構如下: 新增一個 mxml 名為 guestbook <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"    xmlns:s="library://ns.adobe.com/flex/spark"    xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"> <fx:Declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> </fx:Declarations> <fx:Script> <![CDATA[ import com.pomodo.model.Task; import mx.collections.ArrayCollection; [Bindable] private var tasks:ArrayCollection=new ArrayCollection(); private function createTask(

Flex4.6_使用AS3與MXML進行數據綁定溝通範例

圖片
建立.as檔案名為 Task_03 package { public class Task_03 { [Bindable] public var name:String; public function Task_03(name:String="") { this.name=name; } } } name 變數的Bindable確保該變數可以做為數據綁定的來源!! 建立MXML 檔案 <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"    xmlns:s="library://ns.adobe.com/flex/spark"    xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"> <fx:Declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> </fx:Declarations> <fx:Script> <![CDATA[ [Bindalbe] private var _task:Task_03=new Task_03("Learn Binding"); ]]> </fx:Script> <s:layout> <s:VerticalLayout paddingLeft="5" paddingTop="5"/> </s:layout> <s:TextInput id="te

Flex4.6_單向與雙向數據綁定使用Label與TextInput範例

圖片
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"    xmlns:s="library://ns.adobe.com/flex/spark"    xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"> <fx:Declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> </fx:Declarations> <s:layout> <s:VerticalLayout paddingLeft="5" paddingTop="5"/> </s:layout> <s:TextInput id="textInput1" text="{textInput2.text}" x="191" y="174"/> <s:TextInput id="textInput2" text="{textInput1.text}" x="191" y="248"/> <s:Label x="190" y="341" text="# chars:{textInput1.text.length}"/> </s:Application> 每個TextInput組件的text屬性都被綁定使用 ({}語法) 到另一個TextInput 組件的text屬性上

FLEX4_Label與Button建立Click 事件判斷範例

圖片
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"    xmlns:s="library://ns.adobe.com/flex/spark"    xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"   initialize="init()"> <fx:Declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> </fx:Declarations> <fx:Script> <![CDATA[ private function init():void{ button3.addEventListener(MouseEvent.CLICK , handleClick); } private function handleClick(event:MouseEvent):void{ if(event.target==button2){ label.text+='Button 2 clicked\n'; } else if(event.target==button3){ label.text+='Button 3 clicked\n'; } } ]]> </fx:Script> <s:VGroup x="0" y="0" width="100%"> <s:Button id="but

FLEX4_在Design上方新增controlBarContent專屬區域範例

圖片
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"    xmlns:s="library://ns.adobe.com/flex/spark"    xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"> <fx:Declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> </fx:Declarations> <s:controlBarLayout> <s:BasicLayout/> </s:controlBarLayout> <s:controlBarContent> <s:Button label="Menu"/> </s:controlBarContent> </s:Application> 執行結果:

FLEX4_group容器底下新增垂直button可捲軸範例

圖片
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"    xmlns:s="library://ns.adobe.com/flex/spark"    xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"> <fx:Declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> </fx:Declarations> <s:Scroller x="463" y="102" width="105" height="113">//新增捲軸 <s:Group  x="512" y="298" width="105" height="102"> <s:layout> <s:VerticalLayout/>//垂直顯示 </s:layout> <s:Button x="116" y="47" label="1號"/> <s:Button x="216" y="47" label="2號"/> <s:Button x="316" y="47" label="3號"/> <s:Button x="416" y