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的說明文件,如果有不懂的地方,官網上還有論壇可以詢問,不過人氣很低迷,並且最好是到英文論壇發問,比較會有人回覆。

Samsung Smart TV 開發 – 0 初探

要在Samsung Smart TV上開發軟體應用,首先須要先來了解一下這個產品。

首先先來看一段影片:

 

從上面這個影片可以看到目前最新電視的操作,包括手勢操作、聲控、體感應用以及透過手機來操作電視。

不過,其實這些功能都必須在2012以後的電視上才有,如果想要開發軟體應用,建議是不要想太多… 並且其實不是很完善,像是Flash中無法取得攝影鏡頭的資訊,所以就不能用Flash做AR的開發,並且電視上也只有一顆鏡頭,所以也無法像Kinect一樣做出有趣的體感應用。

再來看一段影片:

 

從影片中可以看到許多的電是操作,這是2011年的電視,裡面的操作都是比較基本一點,相信看過這兩個影片後,應該會對Samsung Smart TV上的軟體應用會有個模糊的概念。

那到底我們在Samsung Smart TV上可以做哪些應用呢?其實就是web-based的應用程式,最簡單的說法就是把他想像成一個用鍵盤操作的網站,不過不同於一般的網頁的就是,Smart TV可以允許應用程式使用特定的電視功能,像是攝影鏡頭、存取檔案、音量控制等等。

就如同下圖所示,電視上的應用程式,其實跟一般電腦上看到的網頁是沒多大的區別。

不過要注意的地方就是電視的效能問題,以目前的電視來說,效能上還是差強人意。

並且也因為不是PC,不能像自己電腦那樣自行安裝各種Browser上的Plugin,所以在開發上會有所限制,以目前來說,可以開發的類型有下面幾種:

1. JavaScript Application

   就像一般的網頁一樣,不過JavaScript APIs還提供了許多平台的功能可使用。

2. Flash Application
    Flash又分為三種模式:Embed on web page(無法直接使用電視的功能,需透過JavaScript API)、    Stand-alone(無法使用JavaScript API)、AIR

3. Native (C/C++)

    目前官網上沒有此種開發方式的文件,須透過Samsung總公司才行,所以一切不明。

 


 

由於自己本身是使用Flash來做開發,所以之後的文章內容大部分也都會是Flash的相關內容。

 

還有就是在開發上需要注意電視版本的差異,以Flash來說,在2011以前的電視上如果要使用到電視的功能就只能使用Actionscript 2.0 開發,如下圖所示:

 

這點到了2012之後才有改進:

 

並且聽說之後Flash Player會提升到11版,並且也可以使用硬體加速。