Archives

#Windows Phone:在HTML5專案中,如何從Javascript傳送字串到C#的APP端

在開發Windows Phone APP的HTML5專案中,究竟該如何從Javascript傳給APP的C#程式碼中呢?現在就讓我來介紹一下吧!

使Javascript能與APP的C#程式碼溝通

首先先對嵌入至HTML5專案中的瀏覽器加上當觸發ScriptNotify事件時處理的函式,Javascript可藉此觸發ScriptNotify事件將字串傳給APP使用。在此範例裡,設定當Javascript傳字串過來時,就使用MessageBox.Show將字串顯示出來。

MainPage.cs
1
2
3
4
5
6
7
8
9
10
11
12
private void Browser_Loaded(object sender, RoutedEventArgs e)
{
  Browser.IsScriptEnabled = true;
  Browser.ScriptNotify += HTML_Script_Launched;
  // 在此加入您的 URL
  Browser.Navigate(new Uri(MainUri, UriKind.Relative));
}

private void HTML_Script_Launched(object sender, NotifyEventArgs e)
{
  MessageBox.Show(e.Value); 
}

註:亦可直接從xaml中增加。<phone:WebBrowser x:Name="Browser" ScriptNotify="HTML_Script_Launched" />

接著只要在Javascript端,呼叫window.external.notify函式並傳值即可。

index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
  <!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" href="/html/css/phone.css" />
    <title>Windows Phone</title>
    <script>
      window.external.notify("Hello World!");
    </script>
  </head>
  <body>
    <div>
      <p>我的應用程式</p>
    </div>
    <div id="page-title">
      <p>頁面標題</p>
    </div>
  </body>
</html>

這樣就可以了!底下是結果:
csjs03.png

參考資料

  1. Getting Started With Windows Phone 8 HTML5 Apps:http://blogs.msdn.com/b/matthiasshapiro/archive/2013/02/15/getting-started-with-windows-phone-8-html5-apps.aspx

#Windows Phone:在HTML5專案中,如何從C#執行網頁的Javascript程式

在開發Windows Phone APP的HTML5專案中,究竟該如何從C#執行網頁的Javascript程式呢?現在就讓我來介紹一下吧!

C#呼叫Javascript端的函式

首先在網頁中定義一個changeTitle的function,讓C#端可以利用這個function更改id為page-title的標籤內的第一個p標籤內的值。

index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" href="/html/css/phone.css" />
    <title>Windows Phone</title>
    <script>
      var changeTitle = function (text) {
          document.querySelectorAll("#page-title p")[0].innerHTML = text;
      }
    </script>
  </head>
  <body>
    <div>
      <p>我的應用程式</p>
    </div>
    <div id="page-title">
      <p>頁面標題</p>
    </div>
  </body>
</html>

為了示範,在這裡更改按下[上一頁]的按鈕的行為為呼叫Javascript端的changeTitle的function,並且傳入"Hello World!"這個字串,底下是程式碼:

MainPage.cs
1
2
3
4
5
private void BackApplicationBar_Click(object sender, EventArgs e)
{
  Browser.InvokeScript("changeTitle", new string[] { "Hello World!" });
  //Browser.GoBack();
}

註:如果不需傳參數,直接使用Browser.InvokeScript("changeTitle")即可。

尚未按上一頁按鈕之前:
csjs01.png

按下上一頁按鈕之後:
csjs02.png

C#直接執行Javascript端的程式碼

依照上面的道理,其實可以利用eval()函式來執行Javascript端的程式碼。所以上述範例其實可以改成:

MainPage.cs
1
2
Browser.InvokeScript("eval", 
  new string[] { "document.querySelectorAll("#page-title p")[0].innerHTML = "Hello World!";" });

參考資料

  1. Getting Started With Windows Phone 8 HTML5 Apps:http://blogs.msdn.com/b/matthiasshapiro/archive/2013/02/15/getting-started-with-windows-phone-8-html5-apps.aspx

#APP:[龜兔賽跑棋]於Windows Store上架

各位大家好,敝人在昨日總算又在Windows Store上架了APP-[龜兔賽跑棋],稍微來簡介一下其功能吧!

APP連結:http://apps.microsoft.com/windows/zh-tw/app/0a3a14aa-3100-4323-ac92-2b3b417e95d5

龜兔賽跑棋是一個簡單的棋類遊戲,其目的為想盡辦法將自身的三顆棋移至對面並且離開棋盤,若使用的是烏龜棋得往上面離開,而使用兔子棋則得往右邊離開。

規則為烏龜棋只能往上、左、右三個方向行走,兔子棋只能往右、上、下三個方向行走。當一方完全不能移動時,就直接跳過換成另外一方移動。

支援本機2P模式,歡迎各位可以跟親朋好友對戰看看喔!

Screenshot.269984.100000.jpg

Screenshot.269984.1000000.jpg

Screenshot.269984.1000001.jpg

#APP:[隨身單字卡]1.8版更新

隨身單字卡歷經了眾多更新,到了今日的模樣花了不少時間呀!

APP連結:http://www.windowsphone.com/zh-tw/store/app/%E9%9A%A8%E8%BA%AB%E5%96%AE%E5%AD%97%E5%8D%A1/b83bc17f-53a3-49d5-bae0-b41ef5a57cf7

新增功能部分

  1. 新增編輯分類、單字功能。
  2. 可使用拖曳方式更換分類與單字順序。
  3. 可切換單字清單之單字顯示方式(以單字或是其解釋做顯示)。
  4. 新增標音功能,可使用 (單字)[上標音] 來為單字標上標音,詳情請進入APP點選上面標題可看見範例。
  5. 新增匯入、匯出檔案。
  6. 可展開單字列表成串列單字卡。

更動部分

  1. 背景更換。
  2. UI更動:隱藏按鈕、返回按鈕、編輯與刪除按鈕。
  3. 轉場動畫變快。

APP截圖

Vocabulary01.png

Vocabulary02.png

Vocabulary03.png

Vocabulary04.png

Vocabulary05.png

Vocabulary06.png

#Windows Phone:如何在Windows Phone App使用HTML5專案開發

這篇主要來介紹一下Windows Phone App的HTML5專案,打開Visual Studio並選擇Visual C#類別中的Windows Phone,即可找到Windows Phone HTML5應用程式的專案,如下圖所示:
WP8HTML01.png

新增專案後,你就會看到如下的畫面:
WP8HTML02.png

可以很明顯地發現到其實Windows Phone的HTML5專案其實只是放個瀏覽器在裡面,並且去瀏覽專案中Html資料夾中的網頁而已,藉此你可以透過HTML+CSS+Javascript去撰寫APP。

在首頁的地方寫了簡單的程式碼:

index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" href="/html/css/phone.css" />
    <title>Windows Phone</title>
    <script>
      window.addEventListener("load", function () {
          document.querySelectorAll("#page-title p")[0].innerHTML = "Hello World!";
      });
    </script>
  </head>
  <body>
    <div>
        <p>我的應用程式</p>
    </div>
    <div id="page-title">
        <p>頁面標題</p>
    </div>
  </body>
</html>

簡單來說,就是在網頁載入後,將id為page-title裡的第一個p標籤裡的內容換成Hello World!。結果如下圖所示:
WP8HTML03.png

接著下來你就可以依照做網站的方式來開發APP了!

如果Javascript沒有作用…

我剛開始使用HTML5專案時,發現Javascript怎樣都沒有作用。如果遇到相同情形,可以在MainPage.xaml.cs中的Browser_Loaded函式內加上Browser.IsScriptEnabled = true;這行程式碼即可。

MainPage.xaml.cs
1
2
3
4
5
6
7
private void Browser_Loaded(object sender, RoutedEventArgs e)
{
  Browser.IsScriptEnabled = true;
  
  // 在此加入您的 URL
  Browser.Navigate(new Uri(MainUri, UriKind.Relative));
}

參考資料

  1. Getting Started With Windows Phone 8 HTML5 Apps:http://blogs.msdn.com/b/matthiasshapiro/archive/2013/02/15/getting-started-with-windows-phone-8-html5-apps.aspx

#APP:[索尼克資訊收集所]於Windows Store上架

各位大家好,敝人在昨日總算是在Windows Store上架了APP-[索尼克資訊收集所],稍微來簡介一下其功能吧!

APP連結:http://apps.microsoft.com/windows/zh-tw/app/13c70cc4-0316-4a99-8d07-05bbe80c6253

基本上來說,這就只是一個RSS閱讀器而已,只是我把平常大家常逛的Sonic Retro、Sonic Stadium和Sega Blog的RSS放進去,再加上以前有的Sonic Hub聯播(現在掛了QAQ)的部落格的RSS放進去這樣,是個要追蹤索尼克資訊還蠻便利的APP就是了。

screenshot_11032013_180452.png

screenshot_11032013_180522.png

screenshot_11032013_180536.png

底下是目前有的RSS列表:
1. Sonic Hub (有時會出現、有時會不見,Sonic Hub的RSS檔案有點問題= =…)
2. Gnaw your fur! (冰翼)
3. 亂寫亂畫亂貼 (曉翊)
4. 小田的部落 (花狐)
5. Sectumsempra (U7L)
6. 鴨子.楊的網路日記 (Tikal)
7. jerry的Blog (jerrytown)
8. 音速無雙的個人記事錄(音速無雙)
9. PARK LANE 閃電藍刺蝟★藍藍的很開心(新哀王子)
10. 某S的小說發佈(忍蛋)
11. Dash thru the Barrier - Life of SBC(Sound Barrier Crusher)
12. Indulge in this Fantastic World(Tako)
13. Sonic Retro
14. Sonic Stadium
15. SEGA Blog
16. ソニックチャンネル スタッフコラム

#HTML(HTML5):字詞分行

在HTML裡面,如果打了太長的一連串的英文字,瀏覽器會把它當作一個詞彙,並且不會在空間狹小的時候做分行(除非中間有-,?……等等之類的分隔符,會在分隔符處分行)。不過我們平常打中文沒有這個問題,中文一個一個字,中間就算沒空白也會以字為單位去做分行。但是就算打英文文章,好似也很少遇過會有一個單字長到完全裝不下的情形。其實是真有這情況會需要,那就是網址,網址中間通常都不會有分隔符,而偏偏又得連在一起,就會導致以下的結果:
wbr.png

那該怎麼做去解決這個問題呢?就利用wbr標籤吧!

wbr:字詞方行

wbr.html
1
2
3
...
  http://this<wbr />.is<wbr />.a<wbr />.really<wbr />.long<wbr />.example<wbr />.com/With<wbr />/deeper<wbr />/level<wbr />/pages
...

以上是個例子,我們在我們認定可以斷行的地方去加上wbr標籤,瀏覽器就會在裝該文字的容器塞不下的時候選擇適當的wbr標籤去斷行。若文字能夠完美得塞進容器內那就不會進行斷行。

可完美放入的時候:
wbr1.png

無法完美放入的時候:
wbr2.png

(此範例對於網址的分段方法是依照DevDocs上所言The Yahoo Style Guide的分行方法。)

參考資料

  1. DevDocs:http://devdocs.io/html/
  2. w3schools.com > HTML <wbr> Tag:http://www.w3schools.com/tags/tag_wbr.asp

#HTML(HTML5):多媒體嵌入

今天終於要來提HTML5的新功能之一-放置多媒體的部分,底下一樣就用範例來解說。

embed:外部嵌入播放器播放音樂與影片

media.html
1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>多媒體</title>
  </head>
  <body>
    <embed src="Sonic Generations [OST] - Rooftop Run (Modern).mp3" />
    <embed src="[灆洢]Sonic Generations - Sky Sanctuary Act2 - 0225.13-087-Rank S.mp4" />
  </body>
</html>

media01.png

這個embed標籤從很早以前就有了,不過直至HTML5才將之納為標準。

embed主要是用外部的播放程式鑲嵌在網頁上來播放音樂或影片,利用src屬性去放置音樂或影片的連結。如果該瀏覽器找不到可播放此音樂或影片的播放程式,那麼就沒辦法播放了。

不過在HTML5的標準裡,已經支援讓瀏覽器去播放音樂或影片了!底下就來看看直接讓瀏覽器播放音樂或影片的標籤吧!

audio:播放音樂

media02.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>多媒體</title>
  </head>
  <body>
    <p>
      <audio src="Sonic Generations [OST] - Rooftop Run (Modern).mp3" controls autoplay loop>
      對不起,您的瀏覽器不支援HTML5。
      </audio>
    </p>
  </body>
</html>

media02.png

audio標籤用於放置音樂,屬性有很多,在此列舉常用的controls、autoplay、loop,這些屬性跟以前看到的屬性有點不同,以前的屬性都要代值,但是HTML5中很多標籤是具有布林屬性:有出現就有功能,沒出現就沒功能。controls表示是否要出現控制面板,autoplay表示是否要自動播放,loop表示是否要循環。

audio裡面的內容可放置文字,來讓不支援HTML5的瀏覽器可以顯示。

video:播放影片

media03.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>多媒體</title>
  </head>
  <body>
    <p>
      <video src="[灆洢]Sonic Generations - Sky Sanctuary Act2 - 0225.13-087-Rank S.mp4" controls autoplay loop>
      對不起,您的瀏覽器不支援HTML5。
      </video>
    </p>
  </body>
</html>

media03.png

video標籤用於放置音樂,屬性跟audio一樣有很多,範例中一樣列舉常用的controls、autoplay、loop,這些屬性跟audio的同名屬性類似,就不多提了。

video裡面的內容一樣可放置文字,來讓不支援HTML5的瀏覽器可以顯示。

瀏覽器支援音樂、影片列表

由於audio與video是使用瀏覽器自身來播放音樂與影片,故就要來稍微注意一下每個瀏覽器支援的音樂與影片格式有哪些了,底下是列表:

音樂格式支援

Browser mp3 wav ogg
Internet Explorer YES NO NO
Chrome YES YES YES
Firefox YES YES YES
Safari YES YES NO
Opera NO YES YES

影片格式支援

Browser MP4 WebM Ogg
Internet Explorer YES NO NO
Chrome YES YES YES
Firefox YES YES YES
Safari YES NO NO
Opera NO YES YES

看完上面的表,不知道各位有沒有發現,上面沒有一種格式可以在每個瀏覽器上皆可執行,那該怎麼辦呢?這時候就要來使用source標籤了!

source:設定音樂與影片的來源

media04.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>多媒體</title>
  </head>
  <body>
    <p>
      <audio controls autoplay loop>
        <source src="music.ogg" type="audio/ogg">
        <source src="music.mp3" type="audio/mpeg">
        對不起,您的瀏覽器不支援HTML5。
      </audio>
    </p>
    <p>
      <video controls autoplay loop>
        <source src="movie.mp4" type="video/mp4">
        <source src="movie.ogg" type="video/ogg">
        對不起,您的瀏覽器不支援HTML5。
      </video>
    </p>
  </body>
</html>

將audio或video內的src屬性拿掉,換成在audio或video內容內加入來source標籤,每個source標籤就代表一個音樂或是影片的來源,瀏覽器在讀的時候會照順序找尋可播放的來源,若找到有可以播放的來源時,就會播放。

最後給各位一個不錯的支援多瀏覽器的方法如下:

media05.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
...
<p>
  <audio controls autoplay loop>
    <source src="music.ogg" type="audio/ogg">
    <source src="music.mp3" type="audio/mpeg">
    <embed src="music.ogg" />
  </audio>
</p>
<p>
  <video controls autoplay loop>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    <embed src="movie.mp4" />
  </video>
</p>
...

除了原本加source的版本外,在給不支援HTML5的瀏覽器就用embed來取代,這樣就又可以支援更多的瀏覽器了!

參考資料

  1. DevDocs:http://devdocs.io/html/
  2. w3schools.com > HTML5 Audio:http://www.w3schools.com/html/html5_audio.asp
  3. w3schools.com > HTML5 Video:http://www.w3schools.com/html/html5_video.asp

#APP:[隨身單字卡]於Windows Phone Store上架

各位大家好,敝人在昨日總算是在Windows Phone Store上架了人生第一支APP-[隨身單字卡],稍微來簡介一下其功能吧!

APP連結:http://www.windowsphone.com/zh-tw/store/app/%E9%9A%A8%E8%BA%AB%E5%96%AE%E5%AD%97%E5%8D%A1/b83bc17f-53a3-49d5-bae0-b41ef5a57cf7

APP01.png

首頁剛點入,會看到目前單字卡所有的分類項目。
vocabulary01.png

可以透過上方的新增分類按鈕增加分類。
vocabulary02.png

點入分類內可以看到該分類有哪些單字,透過單字總表可以確認那些單字還不懂其意義。
vocabulary03.png

點分類上方的新增單字可在分類內增加單字。
vocabulary04.png

如果有已經不要的分類或是單字,可以透過刪除功能將之刪除。
vocabulary05.png

如果有不懂的單字,可以點入單字內,即可看到單字卡上的解釋。
vocabulary06.png

功能理論上應該還會再做更新,如果有什麼問題或是希望有什麼功能也歡迎跟我說!XD

#生活趣事:[13.10.22]-微軟校園巡迴講座之嘉義一日遊

由於翊筑的請託,我接下了禮拜二在嘉義的兩場微軟校園巡迴講座的工作,一場在吳鳳科大,一場在南華大學,兩場分別是當機動組兼負責人以及技術講師。由於原本這禮拜我只有禮拜三的師大場而已,應著這樣出去玩的機會,南華場將成為我第一場演講的場次,心裡不免有點緊張,原本想說第一場在自己學校裡演講應該不會出什麼包,但沒想到現在卻變成是在別的學校,真的是讓我有點擔心。

前一天晚上,我將鬧鐘設在了5:30、5:40、5:50、6:00、6:30,以避免我會沒聽到鬧鐘而睡遲了,設完鬧鐘準備完東西,我就早早就寢了。隔日早上醒來後,洗了個澡就背著大包小包的道具前往了台北車站,買了高鐵票搭上了7:30前往嘉義的高鐵。

到了嘉義大概已經9點左右了,在高鐵站的一樓買了個摩斯漢堡當早餐,就坐上了計程車前往吳鳳科大,路上司機還以為我是吳鳳科大的學生,跟我聊天,他還說他台北住20年了,他很熟台北。他愷愷而談地講了很多台北的路名之分布與今昔之地標後,我個人就認為司機真的是蠻厲害的,說熟台北真的不是隨口說說的而已。

到了吳鳳科大門口,就與Rick和Annping會合,中途換了MSP的衣服,之後到了教室準備準備就開始了早上的演講。由於我是機動組的,所以就拿著Rick的相機到處狂拍,感覺好似有點妨礙到他們演講了呢,真不好意思!XD

中午品妤開車來接我們,先送了Annping去民雄車站坐火車後,我們就往一家叫做噴水雞肉飯的餐廳去,這家的雞片飯真的爆好吃!!推薦大家可以去吃,真的很棒!!(這麼好吃的雞肉飯,要是下次吃不到該怎麼辦Q_Q)

吃完飯後,就往南華大學去。到了以後,品妤就先帶著我和Rick在南華大學繞繞,讓我印象最深刻的大概就是教授們住的小木屋吧!真的超特別,居然是蓋小木屋,而不只是蓋個普通的民房給教授們住,這小木屋給人的感覺會讓人有一種來到度假村的錯覺。繞完後,我們就到了教室外等,一直等到了3點進了教室開始演講。

演講過程說順利也算順利,說不順利倒是真的有出了一點狀況。記得在進教室前,我說:演講最怕遇到的狀況有PowerPoint當掉、Visual Studio當掉……等等,結果這句話就這樣一語成讖,在我用Visual Studio去示範開發Windows 8 App的時候,Visual Studio當掉了,一時也真的是慌了,幸好趕緊叫出工作管理員把它強制關掉,又再度重開Visual Studio,早知道進去前就不要說這種不吉利的話了Q_Q…

結束完後,我們在校門口拍了照、打了卡,就離開南華大學前往了民雄火車站,並各自分道揚鑣回家去了。在火車上,我閒來無事就拿出了《Javascript:優良部分》來看,結果看著看著就在火車上將它看完了,這大概也是我第一次看完O'relly的書吧!XD"