Sublime Text 2 使用筆記

最近聽說Sublime Text2很紅,試用之後驚為天人,真的是很好用的文字編輯器,尤其是拿來寫JavaScript跟CSS的時候,有程式碼提示的功能,真是太好用的,可以減少打錯字的機會。

官網:http://www.sublimetext.com/2

官網裡面還有購買的選項,如果沒有購買的話,會時不時的跳出是否要購買的訊息,選擇不購買的話也是可以正常使用,作者真的是佛心來的,如果行有餘力的話還是可以購買支持一下。

這套軟體已經很多人幫他寫過教學及心得分享了,這邊就列一下找到的一些資料,就不用再跟別人打重複的東西。

mrkt的程式筆記:

        Sublime Text 2

        裡面有很多教學文,可以讓初學者很快的上手,並且也講的很詳細,圖文並茂。

Sublime Text 手冊:

        http://docs.sublimetext.tw/

        許多Sublime Text 2 的基本操作方式,講得非常仔細,也是很好的參考網站。

 

==================================================

 

已安裝的Plugin:

為了怕自己忘記,做個筆記。

Package Control:http://wbond.net/sublime_packages/package_control

第一個安裝的plugin,沒有他就沒有後續的plugin,可以用來管理其他的套件。

 

Alignment(Ctrl + Alt + A):http://wbond.net/sublime_packages

程式碼對齊工具,好像滿多人在用的,不過好像只能針對變數宣告做對齊。

 

BracketHighlighter:http://wbond.net/sublime_packages/community

程式碼括弧高亮提示,可以很明顯的知道括弧的範圍。

 

ColorPicker(Ctrl + Shift + C):http://weslly.github.io/ColorPicker/

可跳出選擇顏色的視窗,選完後直接出現在程式碼中,編CSS不可多得的利器。

 

KeymapManager(Ctrl + Alt + K):https://github.com/welefen/KeymapManager

找到目前安裝的套件的熱鍵,避免輸入錯誤或想不起來。

 

SublimePrettyJson(Ctrl + Alt + J):https://github.com/dzhibas/SublimePrettyJson

讓JSON檔案看起來好看,容易閱讀。

 

IMESupport:https://github.com/chikatoike/IMESupport

讓 Sublime Text 2 在中文輸入法下不會再怪怪的。

 

==================================================

 

常用熱鍵:

同樣也是怕自己忘記

1. 開啟命令面板 – Ctrl + Shift + P

2. 快速切換開啟文件 – Ctrl + PageDown、Ctrl + PageUp、Ctrl + P

3. 快速在文件中搜尋Function – Ctrl + R

4. 移動到指定的行數 – Ctrl + G

Aptana Studio 使用教學 – 下載、中文化、jQuery提示

Aptana是一個專門用來開發網頁的IDE,以Eclipse為基礎,所以在使用上應該會符合大部分程式人員的習慣,可以編輯HTML、JavaScript、PHP、CSS等程式,並且還有著程式碼提示!這真是太方便了,不用一直去翻JavaScript及jQuery文件看有沒有把function name拼錯…

下載:

    官網:http://www.aptana.com/

    下載頁面:http://www.aptana.com/products/studio3/download

 

值得一提的就是Aptana提供了兩種安裝方式,一種是Stand-Alone,獨立安裝軟體,另一種就是為Eclipse的plugin,須先安裝Eclipse,可以依個人喜好選擇安裝方式,如果不想要管理太多套工具的話可以選擇plugin的方式安裝,不過依我試過的結果來說,還是比較推薦Stand-Alone的方式,Eclipse的plugin的話,在啟動Eclipse的時候會異常的慢,都要等一段時間,後來就移掉,改用Stand-Alone就順暢多了。

 

安裝:

安裝的步驟就不多講了,跟一般的軟體沒兩樣。

 

中文化:

其實一般在使用Eclipse的時候還是習慣用英文,不過還是放一下Aptana Studio的中文化步驟,翻譯的沒有很詳盡,不過應該堪用了。

Help –> Install New Software… –> Add:

aptana05

鍵入:

Name : Language

Location: http://download.eclipse.org/technology/babel/update-site/R0.10.0/juno

接著過一陣子,可能需要一分鐘,會看到如下的畫面:

aptana06

選擇 Babel Language Packs in Chinese (Traditional)

接著按下Next,等待安裝完成後,重開Aptana,就會看到熟悉的中文化面啦!

 

jQuery提示:

在Aptana中有原生提示JavaScript的程式碼,那如果要加入jQuery的話該怎麼辦呢?

Commands –> Bundle Development –> Install Bundle:

aptana01

 

然後把右邊選軸拉到下方,選擇jQuery然後等候安裝就好了

aptana02

 

隨邊開一個js檔案,在裡面打$之後可以看到跳出很多jQuery的相關程式碼可以選擇,如下圖所示,選了each,則會自動加入一小段程式,這樣是不是很方便呢?不用再全部靠自己手打了!

aptana03

aptana04

Samsung Smart TV 開發 – 2 範例

安裝完開發工具之後,最好是可以有個範例程式可以下載來讓我們看看是怎麼去開始整個專案的麻,遠本在官網上可以下載這個範例,不過後來好像因為官網改版,所以連結被移除或是改路徑了,可以到這邊下載:Flash_SWF_Sample_1.04

解壓縮之後可以看到目錄結構如下:

tv08

檔案說明:

檔案/資料夾 內容
Javascript 包含 Javascript 檔案, 在頁面中初始化及設定程式使用(Main.js)
thumbnail 包含在 Samsung TV 中使用到的縮圖, 這些檔案及路徑都設定在 config.xml 中
config.xml 包含 Application 的資訊以及設定
index.html 應用程式主頁面, 當開啟Application時就相當於開啟此頁面
sample.fla 範例檔案的原始碼, 可產出sample.swf
sample.swf Flash 檔案, 嵌在 index.html 上

 

config.xml可以說是最重要的設定檔案,一個不小心設定錯了,就會讓程式運作不正常,下面這個就是Flash專案的設定檔:

<?xml version="1.0" encoding = "UTF-8" ?>
<widget>
    <widgetname>Flash Widget Sample1.04</widgetname>
    <type>user</type>
    <fullwidget>y</fullwidget>
    <srcctl>y</srcctl>
    <dcont>y</dcont>
    <flashplayer>y</flashplayer>
    <category>others</category>
    <ver>1.04</ver>
    <ThumbIcon>./thumbnail/CL_kids_106.png</ThumbIcon>
    <BigThumbIcon>./thumbnail/CL_kids_115.png</BigThumbIcon>
    <ListIcon>./thumbnail/CL_kids_85.png</ListIcon>
    <BigListIcon>./thumbnail/CL_kids_95.png</BigListIcon>
    <description>
        Contents for Flash Widget Sample
    </description>
    <width>960</width>
    <height>540</height>
    <author>
        <name></name>
        <email></email>
        <link></link>
        <organization></organization>
    </author>
</widget>

其中要注意的tag說明如下:

<!--讓 Application 開啟時就是全螢幕模式-->
<fullApplication>y</fullApplication>

<!--Application 在 Samsung TV Apps 中的分類-->
<category>others</category>

<!--tag for automatic transition of source ( From TV, media and so on to Application)-->
<srcctl>y</srcctl>

<!--註明此 Application 的類型為 Adobe Flash-->
<flashplayer>y</flashplayer>

<!--縮圖, 另外還有<BigThumbIcon>,<ListIcon>,<BigListIcon>這些tag在Samsung TV中都需要被設定-->
<ThumbIcon>./thumbnail/CL_kids_106.png</ThumbIcon>

在 index.html 中,預設的版面如下,其中有一些說明,因為建立的專案為Flash,所以其中只會有一個Flash Object,其他的版面元素皆為空的:

<html>
    <head>
        <title>Flash Sample Widget</title>
    </head>
    <body onload="Main.onLoad();" marginwidth="0" marginheight="0"
          topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0">
        <!-- Flash -->
        <object type="application/x-shockwave-flash" id="sample" width="960" height="540">
            <param name="movie" value="./sample.swf">

            <!--這個參數一定要設置, 設定 Flash 的 render 類型-->
            <param name="wmode" value="transparent">
        </object>

        <!-- Plugins -->
        <!-- Smart TV的Plugin, 可使用電視機的功能 -->
        <object id="pluginObjectNNavi" border="0" classid="clsid:SAMSUNG-INFOLINK-NNAVI"></object>
        <object id="pluginObjectTVMW" border=0 classid="clsid:SAMSUNG-INFOLINK-TVMW"></object>

        <!-- Common widget API -->
        <!-- Samsung TV 的 Javascript API, 用以獲取遙控器輸入的按鍵及其他功能 -->
        <script type='text/javascript' language='javascript' src='$MANAGER_WIDGET/Common/API/Plugin.js'></script>
        <script type='text/javascript' language='javascript' src='$MANAGER_WIDGET/Common/API/Widget.js'></script>
        <script type='text/javascript' language='javascript' src='$MANAGER_WIDGET/Common/API/TVKeyValue.js'></script>

        <!-- Widget code -->
        <script language="javascript" type="text/javascript" src="Javascript/Main.js"></script>
    </body>
</html>

Main.js,為Javascript主程式:

var widgetAPI = new Common.API.Widget();
var pluginAPI = new Common.API.Plugin();

var Main =
{
}

Main.onLoad = function()
{
    widgetAPI.sendReadyEvent();
    // onShow時才去做一些初始化的動作
    window.onShow = Main.initKeys;
}

Main.initKeys = function()
{
    //get Nav plugin
    var NNaviPlugin = document.getElementById("pluginObjectNNavi");

    pluginAPI.SetBannerState(1);
    NNaviPlugin.SetBannerState(2);
    pluginAPI.unregistKey(7);  //unregister volume up button
    pluginAPI.unregistKey(11); //unregister volume down button
    pluginAPI.unregistKey(27); //unregister mute button 
    pluginAPI.unregistKey(262); //unregister MENU key
    pluginAPI.unregistKey(147); //unregister INFO.L key
    pluginAPI.unregistKey(45);  //unregister EXIT key    
}

在Flash中,只是單純的去偵聽KeyboardEvent,然後讓圖像去做移動:

import flash.external.ExternalInterface;

var loop = 0;

//set focus to this flash content
ExternalInterface.call("document.getElementById(\"sample\").focus");

Selection.setFocus("playBtn");

var eventListener = new Object();
eventListener.onKeyDown = function() {
    switch(Key.getCode())
    {
        case Key.END:
            TXT.text = "Return";
            _root.moving_circle.stop();
            ExternalInterface.call("document.getElementById(\"sample\").Exit");
            break;
        case Key.ENTER:
            checkPressedButtom();
            break;
    }
}

Key.addListener(eventListener);

checkPressedButtom = function() {
    if(Selection.getFocus() == "_level0.playBtn")
    {
        TXT.text = "Play";
        _root.moving_circle.play();
    }else if(Selection.getFocus() == "_level0.stopBtn")
    {
        TXT.text = "Stop";
        _root.moving_circle.stop();
    }else if(Selection.getFocus() == "_level0.returnBtn")
    {
        TXT.text = "Return";
        _root.moving_circle.stop();
        ExternalInterface.call("document.getElementById(\"sample\").Exit");
    }else{
        TXT.text = "Press Buttom";
    }
}

這個範例的程式碼是由 actionscript 2.0 寫成, 2.0與3.0的轉換可以參考 [http://www.actionscript.com.cn/help/migration.html Adobe官網]

由此範例可看出有兩種操作模式:
1. 使用focus, 將焦點移動至選取的按鈕上, Enter
2. 直接點選遙控器上的數字鍵或其他功能鍵去 trigger 按鈕

這邊要注意的地方就是:

ExternalInterface.call("document.getElementById(\"sample\").focus");

在ActionScript中呼叫了JavaScript的方法,叫頁面把focus放在這個swf上面,這段是一定要加,不然的話會無法真聽到KeyboardEvent,這段程式放在JavaScript中也可以。

範例執行結果:

tv10    tv11

tv12    tv13

Samsung Smart TV 開發 – 1 如何開始

看完上一篇之後,對Samsung Smart TV應該有個大略的認識了,接下來來談談要如何開始進行開發呢?首先先到 http://www.samsungdforum.com 註冊一個開發人員帳號,註冊的流程就不詳述了,照步驟一步一步來就可以了。

註冊好之後,到上方工具列的 DEV TOOLS -> SDK Download,去下載新版的SDK,本文撰寫時最新版是4.0 Beta,是建議最好不要下載Beta版,下載最新的穩定版本較好,所以就下載SDK 3.5.2,如下圖所示,可以看到兩個下載連結:

tv05

 

經試用過後的結果,最好還是下載Samsung IDE,不要下載Eclipse的版本,用起來有很多奇怪的問題,另外注意也要下載DirectX與JRE(或JDK),如下圖:

tv06

 

安裝順序為:

1. 安裝DirectX End-User Runtime Web
2. 安裝Apache Server => 可安裝SDK附載的版本或是自行下載安裝
3. 安裝Samsung TV SDK 3.5.2
4. 安裝字型:
    [SDK_INSTALL_DIR]/Emulator/Emulator2012_v3.5/bin
    shadow_us.ttf
    shadow_eu.ttf
    shadow_ko.ttf
    shadow_s_cn.ttf
    shadow_t_cn.ttf
    shadow_jp.ttf

 

安裝完之後,在桌面上會看到IDE與模擬器的啟動捷徑,可以試著點開進去摸摸看。

tv07

tv04

 

接著可以到官網上 http://www.samsungdforum.com ,找到一些教學文件以及API的說明文件,如果有不懂的地方,官網上還有論壇可以詢問,不過人氣很低迷,並且最好是到英文論壇發問,比較會有人回覆。

Flash Builder Ant Compiler Error:”Java heap space”

有時候在 Flash Build 中用 Ant 的時候會出現這個錯誤

Error:Java heap space

要解決這個問題需要在 Flash Builder 中做一些設定。

1. 選單中選擇 Window -> Preferences –> Java –> Installed JREs –> Edit:

ant05

 

2. 在 Default VM Arguments 欄位中輸入 “-Xmx512m“:

ant06

接著再使用 Ant 就不會有問題了。