2016年9月21日 星期三

Xamarin入門的第一個範例

Xamarin入門的第一個範例

https://dotblogs.com.tw/mis2000lab/2016/09/21/xamarin_first_sample_for_beginner


只會寫 Windows Form或是 ASP.NET Web Form,有機會快速轉移、快速開發手機程式(Mobile App)嗎?
Xamarin「免費」與 Visual Studio 2015整合,給您一個新選擇

對於寫過 Windows Form or ASP.NET Web Form的朋友、或是使用 C#的朋友
使用 Xamarin來撰寫手機 Mobile App應該覺得似曾相似,甚至熟悉度很高

Xamarin號稱可以  (詳見:https://www.thinkpower.info/xamarin/ )
  • 以C# 開發,編譯成iOS與Android原生執行碼,非HTML5解決方案
  • 任何Objective-C(iOS)與Java(Android)可以做的,Xamarin都可以做到
  • 執行效能100%與原平台程式(Objective-C,Java)所開發的一樣
  • 結合Microsoft Visual Studio開發工具,讓開發更方便、快速


Xamarin售價不便宜,幸好2016年二月微軟買下,並免費整合在 Visual Studio裡面
      微軟2月才剛買下跨平台開發工具Xamarin,宣佈將整合到Visual Studio所有版本,包括免費的社群版(Community Edition)、專業版及企業版。
      Xamarin Studio for OS X除了整合Visual Studio 各版本及MSDN訂閱服務內,也將包含在社群版內免費提供。

==== 以下是採用 VS 2015 Update 3的操作畫面 =================


專案建立好之後,先測試一下環境能否運作?不要寫任何程式,我們直接建置專案(如下圖)並且執行這個空專案。
提醒您,
1.  建置時間很長,因為要啟動手機模擬器(類似VM或是啟動另一套OS),所以請您耐心等候。就算您的電腦CPU很強,也需要一段時間。
2.  如果您使用  Win 10家用版,或是沒有 Hyper-V,就會採用以下的手機模擬器 (AVD_Galaxy_ToolsForApacheCordova ...... 如下圖)
3.  如果您安裝的OS是專業版(含更高階版本)就可以安裝 Hyper-V,使用其他 手機模擬器。

第一個看見的檔名是 MainActivity.cs 
您可以看見 OnCreate事件,可以把他想成 ASP.NET Web Form的 Page_Load事件(請放心,這裡不會有 PostBack  :-p  )

 MainActivity.cs個檔案的內容其實跟其他檔案有密切關係。如下圖,「主畫面」可以對應 \Resources\layout\main.axml檔案。

簡單的說,畫面上的控制項弄好以後,可以寫程式,是不是跟  Windows Form or Web Form很類似呢?

如果您自己新增一個 Button按鈕,
以下圖的 ID為例,他會在另一個檔案 (Resource.Designer.cs) 產生這個ID的編號(獨一無二的編號)
Resource.Designer.cd 千萬不要自己動手去改,請讓程式自己產生這些編號

撰寫主畫面(Main.axml)時,也可以接換到設計模式
      從左邊的「工具箱」把控制項拉到畫面來用......是不是跟  Windows Form or Web Form很類似呢?

接下來就要撰寫「後置程式碼」了
不好意思,ASP.NET Web Form寫久了,有些名詞用習慣,暫時改不過來

以前寫ASP.NET Web Form,按下 Button按鈕以後,程式要寫在 Button_Click事件內
現在改成 Xamarin其實大同小異。

檔案MainActivity.cs
 protected override void OnCreate(Bundle bundle)
 {
      base.OnCreate(bundle);
      // Set our view from the "main" layout resource
      SetContentView(Resource.Layout.Main);
      // Get our button from the layout resource, and attach an event to it  畫面上的第一個按鈕
      Button button = FindViewById
      // 畫面上的第二個按鈕。其實是模仿上一個按鈕改寫的
      Button button2 = FindViewById(Resource.Id.MyButton2);
      // 按下按鈕,就會觸發這個動作(事件)
      button2.Click += delegate { button2.Text = string.Format("今天是 {0}", DateTime.Now.ToLongDateString()); };

  }
回憶一下,您在 ASP.NET Web Form有沒有用過 .FindControl()方法?用來抓取畫面上的控制項?或是大型控制項「樣版裡面」的子控制項?

回憶一下,按下 Button按鈕的 Click事件,也能寫成這樣
  • VB語法  -- AddHandler Button1.Click, AddressOf myEventHandler
  • C#語法  -- Button1.Click += new System.EventHandler(this.myEventHandler);
(詳見Youtube教學影片 https://youtu.be/GtI8P0Onods 


下圖是執行結果:

補充資料:
  • 台灣微軟 Xamarin研討會    http://www.microsoft.com/taiwan/vstudio/Xamarin/ 
  • (中文) 投影片 & 影片下載    https://onedrive.live.com/?id=FB49C7CED61BD893%212016&cid=FB49C7CED61BD893

  • 台灣微軟範例(中文)    https://msdn.microsoft.com/zh-tw/library/dn879698.aspx
  • .NET 標準函式庫支援 Xamarin 囉!    https://blogs.msdn.microsoft.com/msdntaiwan/2016/09/02/net-standard-library-support-for-xamarin/


我將思想傳授他人, 他人之所得,亦無損於我之所有;
猶如一人以我的燭火點燭,光亮與他同在,我卻不因此身處黑暗。----Thomas Jefferson
......... 寫信給我,mis2000lab (at) yahoo.com.台灣  .............................................................
................   facebook社團   https://www.facebook.com/mis2000lab   ......................
................   Google+   https://plus.google.com/100202398389206570368/posts ........
................  YouTube (ASP.NET) 線上教學影片  http://goo.gl/rGLocQ

[遠距教學、教學影片] ASP.NET (Web Form) 課程 上線了!微軟MVP --MIS2000Lab.主講

事先錄製好的影片,並非上課時側錄!   觀看影片時,有如我「一對一」跟您面對面講課


ASP.NET Core & ADO.NET 入門 #2 -- 讀取appsettings.json設定檔與參數的寫法(SqlCommand)


ASP.NET Core & ADO.NET 入門 #2 -- 讀取appsettings.json設定檔與參數的寫法(SqlCommand)
https://dotblogs.com.tw/mis2000lab/2016/08/30/aspnet_core_adonet_begin_02_appsettings


ASP.NET Core & ADO.NET 入門 #2 --
1. 讀取appsettings.json設定檔
2. 參數的寫法(SqlCommand)
3. 解決中文亂碼問題

==========================================================================
YouTube教學影片 -- https://youtu.be/1UaO8C2MnJQ

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

我們通常把資料庫的連結字串,統一存放在一個設定檔裡面
例如 Windows Form的 App.Config設定檔
或是 Web Form的 Web.Config設定檔
在ASP.NET Core(網頁)專案裡面就是 appsettings.json設定檔
為了讀取這個設定檔,您需要加入的 Microsoft.Extensions.Configuration命名空間
別忘了在 project.json 也要這加入這些套件
我本來想說「加入參考」,
但想想這是 ASP.NET Web Form的詞彙,用在ASP.NET Core不知道適當否?
不過,希望您大概知道是類似的動作
............................................................................................................................
如同上一篇文章的操作說明,透過 Visula Studio「新增封裝....」讓系統自動幫您加進去,最簡便了
***  命名空間(NameSpace) ***
using System.Data.SqlClient;
using Microsoft.Extensions.Configuration;

***  程式碼如下 ***
                //== 方法一 ==  上一篇文章介紹過了
                //string connectionString = @"server=.\sqlexpress;integrated security=SSPI;database=test";
                //== 方法二 == 改成appsettings.json
                var configurationBuilder = new ConfigurationBuilder().AddJsonFile("appsettings.json");
                //  讀取設定檔的內容
                IConfiguration config = configurationBuilder.Build();
                string connectionString = config["ConnectionStrings:DefaultConnection"];
                var Conn = new SqlConnection(connectionString);
                Conn.Open();
                
重點!!!!!!!!!  
請在project.json裡面加上這一句話,才能讀取 appsettings.json設定檔
  "version": "1.0.0-*",
  "buildOptions": {
    "emitEntryPoint": true,
    "copyToOutput": "appsettings.json"
  },
  .... The rest of the file goes here .... 詳見 https://colinmackay.scot/2016/07/03/application-configuration-in-net-core-part-1/


             
您也可以在原廠說明網站上看見,搜尋「ASP.NET Core appsettings.json」關鍵字就能找到              
https://docs.asp.net/en/latest/fundamentals/configuration.html#getting-and-setting-configuration-settings
不過,說真的,我看不懂   @_@

之前參考 Wrox出版的那本書,他是用 Windows Form來解說 .NET Core
但改成 ASP.NET Core,在讀取設定檔的時候,似乎有點差異
這裡我卡住比較久的時間,希望對您有幫助
............................................................................................................................

接下來,可以繼續做 DataReader + SqlCommand的工作了
程式碼大致如下:
這裡有兩大問題:
第一,「參數」的寫法與防範資料隱碼(SQL Injection)攻擊
寫法跟以前 ADO.NET大同小異,相信您一看就會了
                var Conn = new SqlConnection(connectionString);
                Conn.Open();
             
                //重點!參數的寫法!
                var Com = new SqlCommand("Select title from test Where id = @ID", Conn);
                Com.Parameters.AddWithValue("ID", 3);   // 您要分開寫成 .Add()方法與 Value屬性,也是可以運作的,跟以前的寫法雷同
                             
                using (SqlDataReader dr = Com.ExecuteReader())
                {
                    while (dr.Read())
                    {    // (1). 中文亂碼的解決 -- 瀏覽器的編碼,請改成 UTF-8
                        var title = dr["title"];
                        await context.Response.WriteAsync("
" + title + "

");
                    }
                }
                Conn.Close();

第二,讀出的數據,在瀏覽器上面變成亂碼 (啥!? 中文亂碼問題)
這裡也很傷腦筋。
有兩種方法可以解決。
***  一個是在 User (Client端)的瀏覽器上,重新設定「編碼」,例如改成UTF-8就能解決。
      這種解法不好,User一定會吵。而且大部分的 User不會設定瀏覽器的編碼.....相信我! User不是那麼厲害

***   另一個則是寫程式去處理亂碼問題
                using (SqlDataReader dr = Com.ExecuteReader())
                {
                    while (dr.Read())
                    {   // (2). 中文亂碼的解決 -- 不用修改瀏覽器的編碼。請加入 System.Text.Encodings.Web 命名空間
                        var title2 = HtmlEncoder.Default.Encode(dr["title"].ToString());
                        await context.Response.WriteAsync("
" + title2 + "

");
                    }
                }
                Conn.Close();
不過,您要使用 HtmlEncoder來處理,當然也得先加入 System.Text.Encodings.Web命名空間與相關套件

這裡卡住我比較多的時間,希望分享出來,對您有幫助
謝謝  :-)

昨天(2016/8/29) 晚上,我把這兩篇文章的完整內容寫好了,並轉成PDF檔(電子書)與讀者分享
只要您有購買下面這本書,就能免費獲得這一章。

或是加入我的臉書 https://www.facebook.com/mis2000lab/   可以看到這一章(PDF檔)如何下載
希望對您有幫助。

[團購] 深入探索 .NET資料存取:ADO.NET + SqlDataSource+ LINQ (松崗)



我將思想傳授他人, 他人之所得,亦無損於我之所有;
猶如一人以我的燭火點燭,光亮與他同在,我卻不因此身處黑暗。----Thomas Jefferson
......... 寫信給我,mis2000lab (at) yahoo.com.台灣  .............................................................
................   facebook社團   https://www.facebook.com/mis2000lab   ......................
................   Google+   https://plus.google.com/100202398389206570368/posts ........
................  YouTube (ASP.NET) 線上教學影片  http://goo.gl/rGLocQ

[遠距教學、教學影片] ASP.NET (Web Form) 課程 上線了!微軟MVP --MIS2000Lab.主講

事先錄製好的影片,並非上課時側錄!   觀看影片時,有如我「一對一」跟您面對面講課



ASP.NET Core & ADO.NET 入門 #1 -- 資料庫連結(SqlConnection)

ASP.NET Core & ADO.NET 入門 #1 -- 資料庫連結(SqlConnection)

https://dotblogs.com.tw/mis2000lab/2016/08/29/aspnet_core_adonet_begin_01

ASP.NET Core & ADO.NET 入門 #1,最簡單的操作步驟
(1).  SqlConnection連結字串
本範例提供YouTube教學影片

***  行前準備  ***
首先,您可以先瞭解 開放原始碼(開源)的 ASP.NET Core(以前名為 ASP.NET 5
      [中文翻譯] ASP.NET 5 概觀 (ASP.NET 5 Overview,原作 Tom FitzMacken 2014/11/12)
      https://dotblogs.com.tw/mis2000lab/2014/12/03/aspnet_5_overview_webform_46      
      [中文翻譯] ASP.NET 5 簡介(Introducing ASP.NET 5,原作ScottGu 2015/2/23)
      https://dotblogs.com.tw/mis2000lab/2015/03/11/aspnet_5_introduce_scottgu_20150223

接著,當您打開 VS 2015 (Update 3)的時候,可能要先安裝這個套件 for VS 2015。這個 Tool 還是 Preview版
      系統會自動偵測,並詢問您是否安裝?

以下的範例,是從 Wrox出版的這本書而來,您可以參閱此書的 第三十七章(原廠網站有範例下載)

Professional C# 6 and .NET Core 1.0



Christian Nagel
ISBN: 978-1-119-09660-3
1536 pages
April 2016......註解:提醒您,這本書以為 Windows Form 主軸,並非 網頁範例為主
==========================================================================
YouTube教學影片 -- https://youtu.be/1UaO8C2MnJQ


==========================================================================
*** 開始動作 ***
(1). VS 2015 新建一個 ASP.NET Core 的 Web專案。
      下一步,我選擇了「」專案

(2). 這是ASP.NET Core 「」專案的架構
很抱歉,關於這個架構的檔案、目錄,我暫時沒有研究。如果您想進一步瞭解,請參與網路上的其他文章

(3). 預設的狀態下,您就可以編譯這個專案,而且看見結果(執行後,網頁出現 Hello World 字樣)
對照起來,原來是在 Startup.cs這個檔案的最後下方,就有 Hello World 字樣

(4). 我們加入熟悉的 ADO.NET程式碼(以 DataReader + SqlConnection / SqlCommand為例)
    如果您不熟悉,可以參閱以前的文章與範例 -- 

這裡的變化比較大。
以前撰寫程式時,如果缺乏 NameSpace,您可能要在程式碼「最上方」自己動手寫進來
甚至.....您要使用「加入參考」把這個DLL檔(二進位檔案)加入您的網站或專案

但是在 ASP.NET Core,我們可以有下面兩種作法。任選其一即可。
4-1.    透過 Visual Studio來幫忙,自己會幫您完成。詳見下面圖解。
Visual Studio會自動幫您加上 NameSpace,也會在 project.json設定檔裡面,加入必要的元件。

4-2.    當然,如果您是死硬派!硬漢!堅持要動手寫!
          在 project.json設定檔裡面,也可以透過智慧選字(IntelliSense),會自動跳字讓您填寫。

(5). 程式碼大致如下:

                //== 方法一 ==   
                string connectionString = @"server=.\sqlexpress;integrated security=SSPI;database=我的資料庫名稱";
                var conn = new SqlConnection(connectionString);
                conn.Open();
                // Do something useful
                await context.Response.WriteAsync("
資料庫連結成功");
                conn.Close();
               //== 當然,我們可以把資料庫的連結字串,寫在設定檔裡面。例如 appsettings.json設定檔,下一篇文章 為您解說。
              //{
              //  "ConnectionStrings": {
              //    "DefaultConnection": "Server=.\\sqlexpress;Database=我的資料庫名稱;Trusted_Connection=True;MultipleActiveResultSets=true"
              //  }
              //}

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

Q :  ADO.NET怎麼只剩下 DataReader了?以前慣用的 DataSet呢?

詳見這篇文章的說明 (2016/2/10發表)  https://blogs.msdn.microsoft.com/dotnet/2016/02/10/porting-to-net-core/
System.Data. While the base layer is already part of .NET Core, i.e. the provider model and SQL client, some features are currently not available, such as schema support and DataTable/DataSet.

System.Transactions. While ADO.NET supports transactions, there is no support for distributed transactions, which includes the notion of ambient transactions and enlistment. (您可以參閱我這本書 -- 深入探索 .NET資料存取:ADO.NET + SqlDataSource+ LINQ (松崗),有討論 System.Transaction)

System.Net.Mail. There is currently no support for sending emails from .NET Core using these APIs.
目前 Core 1.0 不支援,不代表以後不支援。所以也不用太絕望....等等看吧......

下一篇文章:

ASP.NET Core & ADO.NET 入門 #2 -- 讀取appsettings.json設定檔與參數的寫法(SqlCommand)
http://mis2000lab.blogspot.tw/2016/12/aspnet-core-adonet-2.html



我將思想傳授他人, 他人之所得,亦無損於我之所有;
猶如一人以我的燭火點燭,光亮與他同在,我卻不因此身處黑暗。----Thomas Jefferson
......... 寫信給我,mis2000lab (at) yahoo.com.台灣  .............................................................
................   facebook社團   https://www.facebook.com/mis2000lab   ......................
................   Google+   https://plus.google.com/100202398389206570368/posts ........
................  YouTube (ASP.NET) 線上教學影片  http://goo.gl/rGLocQ

[遠距教學、教學影片] ASP.NET (Web Form) 課程 上線了!微軟MVP --MIS2000Lab.主講

事先錄製好的影片,並非上課時側錄!   觀看影片時,有如我「一對一」跟您面對面講課