Windows Phone

#Windows Phone:安裝Windows Phone SDK 8.0流程

為了開發Windows Phone APP,除了需要安裝Visual Studio 2012外,還必須安裝Windows Phone SDK 8.0,底下利用圖文的方式來說明整個流程。

首先選擇開啟新專案:
圖片 1.png

選擇C#類別中的Windows Phone,選擇安裝Windows Phone SDK 8.0:
圖片 2.png

點下確認後,就會看到下載Windows Phone SDK 8.0的連結:
圖片 3.png
圖片 4.png

接著選擇要下載的項目:
圖片 5.png

然後會推薦你使用下載器:
圖片 6.png

下載好後,使用下載器下載主安裝程式:
圖片 7.png
圖片 8.png
圖片 9.png
圖片 10.png

下載好後,開始進行安裝吧!
圖片 11.png
圖片 12.png
圖片 13.png
圖片 14.png

完成後就可以開始開發Windows Phone 8的程式了!

#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:[隨身單字卡]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 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