Date post: | 27-Nov-2014 |
Category: |
Technology |
Upload: | electhoeng |
View: | 267 times |
Download: | 0 times |
P a g e | 0
คมอเขยน Windows 8 Apps ดวย VB 2012 และ VC# 2012 ส ำหรบผเรมตน
คมอเขยน Windows 8 Apps ดวย VB 2012 และ VC# 2012 ส ำหรบผเรมตน
ผแตง : นายศภชย สมพานช เนอหำ : 18 บท (618 หนา) ฟอนต : www.f0nt.com/
วนทพมพ : กนยายน 2555 ครงทพมพ : 1st Edition
ลขสทธ : สงวนลขสทธตาม พ.ร.บ. ลขสทธ พ.ศ. 2537 หามลอกเลยนแบบ, ดดแปลง, ทาซ า, เผยแพร ไมวาสวนหนงสวนใดของหนงสอเลมน หรอดวยวธการใดๆ กตาม นอกจากจะไดรบอนญาตเปนลายลกษณอกษรจากผเขยนเทาน น
คณผอานสามารถสอบถามปญหา-ตชมเน อหาของหนงสอเลมน ไดท https://www.facebook.com/thaivb.net
Visual Studio เปนเครองหมายทางการคาของบรษท Microsoft Coporation จ ากด โปรแกรมตางๆ ตามทอางในหนงสอเลมน เปนเครองหมายการคาของบรษทนนๆ
ค ำน ำ การพฒนา Windows 8 Apps ใน Visual Studio 2012 ดวย VB 2012 & VC# 2012 ถอวาเปนเรองใหมมากสาหรบโปรแกรมเมอรสาย .NET มาพรอมกบการเปดตวของระบบปฏบตการ Windows 8 และอปกรณแทบเลตของไมโครซอฟททเรยกวา Surface เน อหาทนาเสนอในหนงสอเลมน เหมาะสาหรบคณผอานทเปนมอใหมในโลกของ .NET และโปรแกรมเมอรสาย .NET เดมทตองการพฒนา Windows 8 Apps ดวย VB 2012 & VC# 2012 โดยทผเขยนนาเสนอเน อหาครบถวนท ง 2 ภาษา กลาวคอ
เน อหาเรมต งแตปพ นฐานระดบเบ องตน, ทาความรจกกบโครงสรางของ Windows 8 Apps ไปจนกระทงถงการสราง Windows 8 Apps ไดจรง โดยการยกตวอยางประกอบทกหวขอ เพอใหเหนผลการทางานชดเจน งายตอการทาความเขาใจ
สดทายน ผเขยนขอขอบคณสวนชวยเหลอใน MSDN ของไมโครซอฟททชวยแกไขปญหาในระหวางการแตงหนงสอเลมน หากคณผอานทานใด ตองการสอบถามปญหาเน อหาของหนงสอเลมน สามารถโพสถามปญหาไดทแฟนเพจของผเขยนท https://www.facebook.com/thaivb.net โดยทผเขยนขอยกเลกการถาม-ตอบปญหาผานระบบ e-mail ของผเขยนท งหมด
ศภชย สมพานช กนยายน 2555
ตวอยำงทนำสนใจในหนงสอเลมน
กำรสรำงปมควบคมแสดงคลปวดโอระดบ FullHD ในสวนแสดงผลของ Windows 8 Apps
กำรแกไขสวนแสดงผลในคอนโทรล ComboBox แบบท 1
กำรแกไขสวนแสดงผลในคอนโทรล ComboBox แบบท 2
กำรท ำงำนกบคอนโทรล GridView
กำรสรำงไดอะลอกแจงผใชงำน
สวนแสดงผลแบบ Windows Store
กำรคนหำขอมลจำก Bing, Yahoo และ Google ดวย Windows 8 Apps
กำรแสดงขอควำมและรปภำพในคอนโทรล GridView
สำรบญ บทท 1 กำวแรกเขำสโลกของ Windows 8 Apps 1
บทนา 1
ทาความรจกกบ Windows 8 ในข นตน 2
รปแบบของ App ในยคปจจบน 4
แนวทางของโปรแกรมเมอรในยค .NET Framework 4.5 5
การพฒนา Windows 8 Apps ดวย Visual Studio 2012 Express for Windows 8 17
การขอสทธชวคราวในการพฒนา Windows 8 Apps 23
การขอหรอตออาย Developer license 27
โครงสรางของ Windows 8 Apps 28
รปแบบการนาเสนอตวอยางในหนงสอเลมน 31
รปแบบการลงโคด (VB 2012 & VC# 2012) และสครปต XAML ในหนงสอเลมน 32
การจดระเบยบโคดหรอสครปตใน VS 2012 33
สรปทายบท 34
บทท 2 พนฐำนกำรพฒนำ Windows 8 Apps 35
บทนา 35
Windows 8 Apps แรกของคณ 36
การสรางเหตการณในสครปต XAML 46
การทดสอบรน Windows 8 Apps 53
ทาความรจกกบ Simulator ในข นตน 54
การกาหนดเพจเรมตน 61
วธการปด Windows 8 Apps ทถกตอง 62
การคนหาคณสมบตตางๆ 65
การอางองคอนโทรลหรออลเมนต 65
การเลอกโฟกสคอนโทรลทสนใจอย 69
การยกเลกแกไขคณสมบต 71
การ Copy คอนโทรลดวยปม Alt บนคยบอรด 72
การจดตาแหนงคอนโทรลดวยคณสมบตดาน Alignment 73
การจดระยะหางดวยคณสมบต Margin 76
สรปทายบท 78
บทท 3 กำรจดสวนแสดงผลดวยคอนโทรลประเภท Layout 79
บทนา 79
พ นฐานการใชงานคอนโทรล Grid 80
การรวมคอลมนหรอรวมแถวในคอนโทรล Grid 85
การปรบแตง Layout ของคอนโทรล Grid 87
การเปลยนสพ นหลงใหกบตวบรรจ 89
การจดเรยงคอนโทรลตามแนวนอนหรอแนวต งดวยคอนโทรล StackPanel 96
การเปลยนตวบรรจดวยคาสงใน VS 2012 99
การจดกลมคอนโทรลดวยคาสงใน VS 2012 100
การควบคมตวบรรจ 102
การสรางสวนแสดงผลแบบพ นทอสระดวยคอนโทรล Canvas 106
การซอนกนของวตถในสวนแสดงผลแบบ Canvas 108
การแสดงขอมลแบบมแถบเลอนดวยคอนโทรล ScrollViewer 110
สรปทายบท 112
บทท 4 กำรใชงำนคอนโทรลพนฐำน 113
บทนา 113
การสรางชองปอนขอความดวยคอนโทรล TextBox 114
การแสดงขอความหลายบรรทดในคอนโทรล TextBox 116
การสรางปมทมรปและขอความ 118
พ นฐานการแสดงขอความแบบหรหราดวยคอนโทรล RichTextBlock 119
การสรางเน อหาแบบหรหราในคอนโทรล RichTextBlock 121
การสรางตวเลอกดวยคอนโทรล RadioButton 123
การตรวจสอบ Content ของคอนโทรล RadioButton กรณทมการปรบแตง 124
การสรางตวเลอกดวยคอนโทรล CheckBox 129
การสรางปมกดคางดวยคอนโทรล RepeatButton 133
การสรางบราวเซอรขนาดเลกดวยคอนโทรล WebView 137
พ นฐานการเลนคลปวดโอดวยคอนโทรล MediaElement 143
การสรางเครองเลนคลปวดโอดวยคอนโทรล MediaElement 145
สรปทายบท 153
บทท 5 กำรใชงำนคอนโทรลประเภท list 154
บทนา 154
การใชงานคอนโทรล ComboBox 155
พ นฐานการใชงานคอนโทรล ListBox 160
การแสดงรปภาพในรายการของคอนโทรล ListBox 168
การเพมและลบรายการในคอนโทรล ListBox 175
สรปทายบท 179
บทท 6 กำรปรบแตงคอนโทรลดวย Style 180
บทนา 180
การใชงาน Style 181
การกาหนดขอบเขตการใชงานของ Resources 184
การกาหนดขอบเขตการใชงาน Resources ระดบ Local 185
การกาหนดขอบเขตการใชงาน Resources ระดบ Container 186
การใชงาน Resources ทมขอบเขตระดบ Application 186
การเรยกใชแบบภายใน 187
การเรยกใชแบบภายนอก 188
การกาหนดธมใน Windows 8 Apps ตามทเราตองการ 190
การควบคมธมโดยการเขยนโคด 192
สรปทายบท 198
บทท 7 กำรผกตดขอมล (Data Binding) ใน Windows 8 Apps 199
บทนา 199
การผกตดขอมลระหวางคอนโทรลของ Windows 8 Apps 200
รปแบบการผกตดขอมล 201
การสรางถาดผสมส 205
การผกตดขอมลจากคลาสแบบปกต 210
การผกตดขอมลโดยการเขยนโคด 217
สรปทายบท 222
บทท 8 กำรแกไขสวนแสดงผลในคอนโทรลผำนระบบ Template 223
บทนา 223
การผกตดขอมลกบคลาสโดยการแกไข Template 224
การแกไข Template ในขณะออกแบบ 236
การปรบแตงรายการในคอนโทรล ComboBox 248
พ นฐานการแสดงขอมลในคอนโทรล ListView แบบแกไข Template 255
สรปทายบท 266
บทท 9 ระบบไฟลใน Windows 8 Apps 267
บทนา 267
การเรยกระบบจดเกบขอมลใน Windows 8 268
แนวความคดของการเขยนโปรแกรมแบบขดจงหวะได (Asynchronous Programming) 268
พ นฐานการสราง, เขยนและอานไฟลใน Windows 8 Apps 269
ทาความรจกกบโฟลเดอรระบบในข นตนของ Windows 8 283
การเปดไฟล pdf หรอไฟลประเภทอนๆ ดวย Windows 8 Apps 286
การอานพาธของโฟลเดอร Assets และ Common 292
การคนหาไฟล 295
การเพมประสทธภาพคนหาไฟลดวย Advanced Query Syntax 304
ทางานกบระบบจดเกบขอมลดวยคอนโทรล FileOpenPicker 309
สรปทายบท 316
บทท 10 ท ำงำนกบรปภำพ 317
บทนา 317
การแสดงรปภาพดวยคอนโทรล Image 318
การลงสขอความดวยรปภาพ 319
การกาหนดความเขม-จางดวยคณสมบต Opacity 320
การเปลยนรปภาพโดยการเขยนโคด 322
สรปทายบท 325
บทท 11 กำรออกแบบสวนแสดงผลใน Windows 8 Apps 326
บทนา 326
การตรวจสอบความละเอยดของสวนแสดงผล 327
การสรางสวนแสดงผลแบบชองเปลยนเน อหาไดดวยคอนโทรล FlipView 330
การสรางอลบ มรปดวยคอนโทรล FlipView 336
การสรางสวนแสดงผลหลายแบบ (Multiple View) ดวยคอนโทรล FlipView 339
การสรางสวนแสดงผลแบบเปลยนหลายหนาได 355
การรบ-สงขอมลระหวางเพจ 359
การรกษาสถานะขอมลดวยระบบแคช (Cache) 367
การสรางสวนแสดงผลแบบตารางสเหลยมดวยคอนโทรล GridView 371
การเพมรายการในคอนโทรล GridView โดยการเขยนโคด 381
สรปทายบท 390
บทท 12 ระบบเมนและไดอะลอก 391
บทนา 391
การแสดงขอมลแบบ Popup ดวยคอนโทรล Popup 392
การสรางเมนจากการคลกขวา (ContextMenu) 395
พ นฐานการใชงาน AppBar 398
การปรบแตงแถบ AppBar โดยใช Style สาเรจรป 403
การสรางเมนใหกบแถบ AppBar 408
การสรางกรอบขอความดวยคลาส MessageDialog 413
การใช MessageDialog แบบมการตรวจสอบปมทถกเลอก 415
การสราง MessageDialog กอนออกจาก App 419
สรปทายบท 421
บทท 13 ท ำควำมรจกกบ Blend for Visual Studio 2012 422
บทนา 422
การใชงาน VS 2012 รวมกบ Blend 424
การปรบแตงสภาพแวดลอมของ Blend 429
ทาความรจกกบ Artboard 430
การซม Artboard 434
โหมดการทางานใน Blend 434
วธการรนโปรเจกตใน Blend 436
การกาหนดคณสมบตตางๆ ของคอนโทรล 436
การปรบคาใหกบคณสมบตทเปนตวเลข 437
คณสมบตทเกยวของกบระบบส 437
วธการเลอกส 440
การใชงาน Style ใน Blend 443
การเรยกใช Style เดมทมอย 449
การเปลยนขอบเขตเรยกใชงานของ Style 451
สรปทายบท 454
บทท 14 กำรใชงำนแหลงขอมล XML ใน Windows 8 Apps 455
บทนา 455
โครงสรางของภาษา XML 456
ความหมายของคาวาแทก (Tag) กบอลเมนต (Element) 456
กฎ กตกาเบ องตนสาหรบการสรางแหลงขอมล XML 457
พ นฐานการใชงานแหลงขอมล XML ดวยคลาส XElement 460
ขอความทมรปแบบ XML 463
การแสดงขอมลจากไฟล XML ดวยคลาส XDocument 465
การสรางแหลงขอมล XML โดยอาศยคลาส XDocument 474
การทางานกบโครงสรางของแหลงขอมล XML 479
การจดการแหลงขอมล XML ทเกบอยในคลาส XElement 483
สรปทายบท 487
บทท 15 กำรใชประโยชนจำกแหลงขอมล XML ดวย LINQ to XML 488
บทนา 488
พ นฐานการใชงาน LINQ to XML 489
การควรขอมลจากไฟล XML ภายนอก (*.xml) 489
การควรขอมลทอยในรปแบบ XML 496
การแสดงขอมล XML รวมกน 498
คา Null ใน XML 503
การควรขอมลจากแหลงขอมล XML แบบระบลาดบอลเมนต 509
การควรขอมลจาก XMLแบบแอตทรบวต 519
การสรางแหลงขอมล XML จากอารเรย 525
การสรางแหลงขอมล XML จากคลาส 526
การแสดงแหลงขอมล XML ดวย HTML 534
สรปทายบท 540
บทท 16 กำรแสดงขอมลใน XML ดวย XSLT 541
บทนา 541
การแสดงผลแหลงขอมล XML ดวยภาษา XSLT แบบไมมเงอนไข 542
สรปทายบท 555
Workshop 1 : กำรสรำงหนำ Login 556
การสรางหนา Login 556
Workshop 2 : กำรสรำง Windows 8 Apps แบบเปลยนสพนหลงได 560
การสราง Windows 8 Apps แบบเปลยนสพ นหลงได 560
Workshop 3 : กำรสรำงสวนแสดงผลแบบ Windows Store 565
การสรางสวนแสดงผลแบบ Windows Store 565
Workshop 4 : กำรคนหำขอมลผำน Bing, Yahoo และ Google 574
การคนหาขอมลผาน Bing, Yahoo และ Google 574
Workshop 5 : กำรแสดงขอมลและรปภำพในคอนโทรล GridView 582
การแสดงขอมลและรปภาพในคอนโทรล GridView 582
บทท 17 กำรปรบแตงโปรเจกต Windows 8 Apps 600
บทนา 600
การปรบแตง Windows 8 Apps ในไฟล Package.appxmanifest 601
การกาหนดหนาจอ Splash screen 603
การกาหนดไฟลรปภาพโลโก 604
การกาหนดขอความกากบโลโก 609
การกาหนดรปแบบสวนแสดงผล 611
การสราง App Package 612
สรปทายเลม 618
บทท 1 กำวแรกเขำสโลกของ Windows 8 Apps
บทน ำ ในปจจบน ไมโครซอฟทเปดตวระบบปฎบตการตวใหม มชอเรยกวา “Windows 8” ความพเศษของระบบปฏบตการรนใหมน กคอ เปนระบบปฏบตการ Windows รนแรกทถกสรางข นมาใหทางานไดท งบนคอมพวเตอร (PC), Notebook และอปกรณแทบเลต (Tablet) โดยทไมโครซอฟทเรยกอปกรณแทบเลตของตวเองวา เซอรเฟส (Surface) หนงสอ “คมอเขยน Windows 8 Apps ดวย VB 2012 และ VC# 2012 สาหรบผเรมตน” เลมน เปนการนาเสนอพ นฐานการพฒนา Windows 8 Apps โดยการใชภาษา VB 2012 & VC# 2012 ซงเปนภาษาทไดรบนยมอยในปจจบน เน อหาทนาเสนอในหนงสอเลมน เรมตนต งแตระดบพ นฐาน ไลไปจนกระทงถงการกาหนดรายละเอยดตางๆ เพอให Windows 8 Apps ของคณ ตรงกบมาตรฐานทไมโครซอฟทกาหนดไว ซงถอเปนรากฐานทมความสาคญเปนอยางมาก กอนทจะพฒนาเขาสระดบการสราง Windows 8 Apps เพอขายจรงใน Windows Store ในลาดบตอไป
ท ำควำมรจกกบ Windows 8 ในขนตน เราสามารถแยก Windows 8 ออกเปน 2 แพลตฟอรม คอ
1.บนคอมพวเตอร เรยกวา Windows 8 Pro รนบนสถาปตยกรรมซพยแบบ x86 (32 บต) และ x64 (64 บต) ทคนเคยกนเปนอยางด คอ ซพยของอนเทล (Intel) และเอเอมด (AMD) โดยท Windows 8 Pro ทรนบนซพยตระกล x86/x64 น สามารถใชงาน Windoows 8 ไดทงแบบ Desktop Mode กบ Modern UI Style Mode
รปท 1-1 แสดง Windows 8 แบบ Modern UI Style Mode จากรปท 1-1 แอพพลเคชนทตดต งบน Windows 8 แบบน ผเขยนขอเรยกวา Windows 8 Apps
รปท 1-2 แสดง Windows 8 แบบ Desktop Mode จากรปท 1-2 เปนสภาพแวดลอมของ Windows ทเราคนเคยกนเปนอยางดมาต งแต Windows 7 และเวอรชนกอนหนาน 2.บนอปกรณแทบเลต สาหรบ Windows 8 ทรนอยบนแทบเลต ยงสามารถแยกออกเปน 2 แบบ คอ
รนบนสถำปตยกรรมซพยแบบ x86/x64 สงผลใหคณสามารถใช Windows 8 ไดท งแบบ Desktop Mode กบ Modern UI Style Mode ยงคงเรยกวา Windows 8 Pro เชนเดม
รนบนสถำปตยกรรมซพยแบบ ARM เรยกวา Windows RT สาหรบแทบเลตทใชซพยแบบ ARM สามารถรน Windows RT ไดเพยงอยางเดยวเทาน น โดยท Windows RT กคอ Windows 8 ทม Modern UI Style Mode เปนแกนหลก ถกสรางข นมาใหทางานกบอปกรณแทบเลตเทาน น สงผลใหโปรแกรมสาย .NET จงมพ นทใหมทไมเคยมมากอน นนคอ การเขยนโปรแกรมทเรยกวา
Windows 8 Apps ทสามารถรนไดท งบน PC, Notebook และอปกรณแทบเลตทตดต ง Windows 8 หรอ Windows RT นนเอง
รปแบบของ App ในยคปจจบน เพอใหคณมองเหนภาพในยคปจจบนชดเจนข นวา เรากาลงทาอะไรกนอย ผเขยนขอแยกรปแบบ App ออกเปน 5 แบบ ดงน 1.Command App หรอแอพพลเคชนทผใชตองมการปอนคาสงดวยการปอนคาสง command เราคนเคยกนดในชอ Console Application ในยคของ DOS รวมไปถงแอพพลเคชนบางประเภท ทรนอยบนระบบปฎบตการ Server ทยงคงอาศยการปอนคาสงแบบขอความโดยตรง 2.Click App เราคนเคยกบแอพพลเคชนประเภทน มากทสด ใชเมาสเคอรเซอรคลกไอคอนตางๆ สงงานใหแอพพลเคชนทางาน 3.Touch App เราเขามาสยคทโทรศพทมอถอ และแทบเลตกมแอพพลเคชนตางๆ อยดวยเชนกน เรยกส นๆ วา App คณสงการให App เหลาน ทางาน โดยการสมผสหนาจอ เพราะความทน วมอของคณ มขนาดใหญกวาเคอรเซอรของเมาส จงทาใหผทตองการเขามาพฒนา App ในสวนน ตองแกไขสวนแสดงผลใหม ใหรองรบกบการสมผสดวยน วมอของผใชแทนเคอรเซอรของระบบคลก 4.Motion App หรอ App ทจบการเคลอนไหวของผใช แลวแปลงการเคลอนไหวดงกลาว ไปเปนคาสงใน App เพอสงการตางๆ ตามทไดกาหนดไว สาหรบคณผอานทชอบเลนเกม Console ของ Xbox คนเคยกนเปนอยางด กบ App กลมน 5.Voice App หรอ App ทสงการดวยคาพดของมนษย เรากาลงเรมตนเขาสยคของการสง App ใหทางานดวยคาพดของเรา โดยทเราไมจาเปนตองเขาไปแตะตอง หรอสมผสใดๆ เลยกบอปกรณ Hardware ทเราลงสนใจอย คนเคยกนเปนอยางดกบคณผอานทชอบดหนงประเภทไซไฟตางๆ ทตวละครมกจะพดสงใหซอฟทแวรตางๆ ทางาน
แนวทำงของโปรแกรมเมอรในยค .NET Framework 4.5 การอพเดตของไมโครซอฟทในยคของ .NET 4.5 และการมาของ Windows 8 ถอเปนการปรบปรงคร งใหญอกคร งหนง ใหคณดรปท 1-3 ประกอบคาอธบาย
รปท 1-3 แสดงประเภทแอพพลเคชนของ .NET 4.5 ในขนตน การพฒนาแอพพลเคชนกอนหนาน (เวอรชน 4.0 และเวอรชนเกากวา) โปรแกรมเมอรสาย .NET มพ นทใหคณทางาน 2 สวนใหญๆ คอ 1. Desktop Application
2. Web Application การพฒนาแอพพลเคชนท ง 2 สาย เปนพ นทเดมทเราคนเคยกนเปนอยางด ข นอยกบความสนใจ
ของคณวา จะเลอกเดนไปในเสนทางใด กแลวแตความชอบ ความถนดของแตละบคคล แตในยคปจจบน .NET Framework ถกพฒนามาถงเวอรชน 4.5 และเขาสยคของ Windows 8
โปรแกรมเมอรสาย .NET มพ นใหมข นมาอก 1 แหง ทางานบนอปกรณ Tablet เปนททราบกนดวา ในยคปจจบน ผคนโดยทวไปตางคนเคยกบการใชแทบเลต (Tablet) และสมารทโฟน (Smart Phone) หลายคนเปลยนพฤตกรรมจากทเคยทาบนเครองคอมพวเตอร มาทาบนอปกรณเหลาน แทน เชน การเลนอนเตอรเนต, การเลนเกมส, การใชแอพพลชนตางๆ ฯลฯ เปนตน
ในโลกของ .NET เราเรยกแอพพลเคชนตางๆ ทรนบนอปกรณเหลาน วา Windows 8 Apps และเรยกอปกรณเหลาน โดยรวมวา Smart Devices
กลาวไดอกนยหนงวา ถาคณตองการพฒนาแอพพลเคชนบน Smart Devices เหลาน ดวย .NET คณตองพฒนาแอพพลเคชนแบบ Windows 8 Apps นนเอง
รปท 1-4 แสดงโปรเจกตแบบ Windows 8 Apps ใน Visual Studio 2012 บน Windows 8 ไมโครซอฟทออกแบบให Windows 8 ทางานไดท ง PC (คอมพวเตอร) และ Tablet ซงเปนพ นทแหงใหมของโปรแกรมเมอรสาย .NET ทางานรวมกบ .NET Framework 4.5 ความสาคญอกประการหนง กคอ คณตองทราบใหไดกอนวา คณกาลงอยสวนไหนในโลกของ .NET 4.5 บน Windows 8 กลาวคอ
1.Desktop Application คณมทางเลอก 3 ทาง คอ Windows Forms Application พ นทเดมทหลายคนคนเคยกนเปนอยางดกบการพฒนาแอพ
พลเคชนทมสวนแสดงผลแบบมาตรฐาน สามารถพฒนาดวยภาษา Visual Basic หรอ Visual C#
รปท 1-5 แสดงโปรเจกตแบบ Windows Forms Application ใน Visual Studio 2012 บน Windows 8
WPF Application ในกรณทคณตองการพฒนาแอพพลเคชนทสามารถแกไขสวนแสดงผลใหตรงตามความตองการของคณ โปรเจกตประเภทน คอ คาตอบของคณ โดยการแบงสวนแสดงผล (อยในความรบผดชอบของสครปต XAML) กบสวนการทางาน (โคดภาษา Visual Basic หรอ Visual C#) ออกจากกนอยางชดเจน
รปท 1-6 แสดงโปรเจกตแบบ WPF Application ใน Visual Studio 2012 บน Windows 8
LightSwitch พฒนาแอพพลเคชนบนแนวความคดทวา เขยนโคดใหนอยทสด หรอไมตองเขยนโคดเลย โดยใชระยะเวลาพฒนาไมนาน เรยกแนวความคดน วา Rapid Application Development (RAD) ผลงานทไดออกมา เพยงพอตอการใชงานจรงอกดวย
รปท 1-7 แสดงโปรเจกตแบบ LightSwitch ใน Visual Studio 2012 บน Windows 8 จากรปท 1-7 โปรเจกตแบบ LightSwitch ของ VS 2012 ครอบคลมท ง Desktop Application (VB 2012 กบ VC# 2012) และ Web Application (ตามมาตรฐาน HTML5) ดงน น จงเปนอก 1 ทางเลอกทสาคญมาก สาหรบโปรแกรมเมอรสาย .NET ทตองเรยนร
2.Web Application คณมทางเลอก 3 ทาง คอ ASP.NET เปนการพฒนาเวบแอพพลเคชนโดยการแยกสวนแสดงผล (*.aspx) กบโคดการ
ทางาน (ภาษา Visual Basic (*.vb) หรอภาษา Visual C# (*.cs)) ออกจากกน
รปท 1-8 แสดงโปรเจกตของ ASP.NET ใน Visual Studio 2012 บน Windows 8
ASP.NET Web Matrix ไมโครซอฟทสรางโครงการทเรยกวา Web Matrix ข นมา เพอเปนอก 1 ทางเลอกสาหรบนกพฒนาเวบแอพพลชนดวย ASP.NET ขอแตกตางทสาคญ กคอ ไมโครซอฟทรวมสวนแสดงผลเขากบโคดการทางาน แยกออกเปน 2 กรณ คอ ภาษา Visual Basic (*.vbhtml) และภาษา Visual C# (*.cshtml)
รปท 1-9 แสดงโครงการ Web Matrix ของไมโครซอฟท เครองมอทใชพฒนา ASP.NET Web Matrix ไมโครซอฟทปลอยใหนกพฒนาสามารถ download ฟรไดท http://www.microsoft.com/web/webmatrix/ เราเรยก ASP.NET Web Matrix อกชอหนงวา ASP.NET ทรนดวย Razor
รปท 1-10 แสดงสภาพแวดลอมของ ASP.NET Web Matrix ความสาคญของโครงการ ASP.NET Web Matrix กคอ เปนพ นฐานของการพฒนาเวบแอพพลเคชนดวย ASP.NET MVC 4.0 โดยมโครงสรางการทางานแบงออกเปน 3 สวน คอ Model – View – Controller
Silverlight เรยกอกอยางหนงวา WPF Application ทรนบนเวบ ในอนาคตไมโครซอฟทจะสนบสนน HTML5 มากกวา Silverlight
รปท 1-11 แสดงโปรเจกตแบบ Silverlight ใน Visual Studio 2012 บน Windows 8
3.Windows 8 Apps คณมทางเลอก 2 ทาง คอ พฒนำดวยสครปต XAML รวมกบภาษา Visual Basic 2012 หรอภาษา Visual C# 2012
รปท 1-12 แสดงโปรเจกตแบบ Windows 8 Apps แบบ XAML ใน Visual Studio 2012 บน Windows 8
พฒนำดวยภำษำ HTML5 รวมกบภาษา JavaScript และ CSS3
รปท 1-13 แสดงโปรเจกตแบบ Windows 8 Apps แบบ HTML 5 ใน Visual Studio 2012 บน Windows 8
ในสวนของ Smart Phone ทรนดวยระบบปฏบตการ Windows Phone 8 ผเขยนไมไดจดเขามาในกลม เพราะวา มแนวโนมไมนอยเชนกนวา มโอกาสรวมเขากบ Windows 8 Apps
รปท 1-14 แสดงโปรเจกตแบบ Windows Phone ใน Visual Studio 2012 บน Windows 8
การแขงขนในตลาด Smart Devices (Tablet และ Smart Phone) ในยคปจจบน มการเปลยนแปลงอยตลอดเวลา ผเขยนไมสามารถคาดเดาไดวา สถานะของโปรเจกตแบบ Windows Phone จะเปนอยางไรในอนาคต ขอใหคณผอานตดตามขาวสาร ความคบหนาอยางใกลชด โดยทผเขยนจะมการอพเดตขาวสารอยตลอดเวลาทแฟนเพจของผเขยนท https://www.facebook.com/thaivb.net
รปท 1-15 แสดงแฟนเพจของผเขยน จากโครงสรางขางตน พบวา สครปต XAML มบทบาททงใน WPF Application,
Silverlight, Windows Phone 8 และ Windows 8 Apps ดงนน ในปจจบน สงทโปรแกรมเมอรสาย .NET ควรจะศกษามากทสด นนคอ สครปตภาษา XAML นนเอง ผเขยนคดวาคาถามแรกทคณอยากรคาตอบมากทสด กคอ โปรแกรมเมอรสาย .NET จะเดนไปในทศทางใดตอไป ในอดตทผานมา สภาพแวดลอมของเรามแตเพยงบน PC กบ Notebook เทาน น แตในปจจบน คณไมจาเปนตองเลนอนเตอรเนต เลนแอพพลเคชนบน PC หรอ Notebook อกตอไป คณสามารถใชงานอปกรณจาพวก Tablet และ Smart Phone เขามาทาหนาทบางอยางแทน PC หรอ Notebook ไดอกดวย แอพพลเคชนทคณเลนบนอปกรณ Smart Devices เหลาน กมาจากโปรแกรมเมอรในสายตางๆ นนเอง คาตอบทผเขยนมใหกบคณผอาน กคอ การเพมทกษะใหกบตวเอง เปนผลดกบคณผอานอยางแนนอน การพฒนาตวเองในยคปจจบน ตองเกดท งทางกวาง (เรยนรหลายเรอง) และท งทางลก (ศกษารายละเอยดใหมากทสด) ในเวลาเดยวกน
ในวนทคณตองลงสนามจรง คณไมมทางลวงรไดเลยวา ในระหวางการทางานของคณ คณจะตองประสบปญหาอะไรบาง ตองใชเทคโนโลยอะไรบาง สงเดยวทคณรตอนน กคอ คณตองเตรยมตวเองใหพรอมกบสภาพแวดลอมในปจจบนทกทางเทาทจะทาได กำรพฒนำ Windows 8 Apps ดวย Visual Studio 2012 Express for Windows 8 คณยงมอก 1 ทางเลอกในการพฒนา Windows 8 Apps นนคอ อาศย Visual Studio 2012 Express for Windows 8 ซงเปนเครองมอทไมโครซอฟทเปดใหนกพฒนาทวไป สามารถดาวนโหลดมาใชงานไดฟรแบบมเงอนไขท http://www.microsoft.com/visualstudio/11/en-us/downloads มขนาด 403 MB ดงรปท 1-16
รปท 1-16 แสดงเวบไซดทใหดาวนโหลด Visual Studio 2012 Express for Windows 8 หลงจากทคณดาวนโหลด Visual Studio 2012 Express for Windows 8 (ไฟล vs2012_winexp_enu.iso) มาแลว ขอใหคณตดต งบน Windows 8 ตามข นตอนทปรากฎข นมา มข นตอนดงน 1.เรมตน ใหคณดบเบ ลคลกไฟล win8express_full.exe เพอเรมตนตดต ง Visual Studio 2012 Express for Windows 8
รปท 1-17 แสดงหนาจอเรมตนตดตง Visual Studio 2012 Express for Windows 8
รปท 1-18 หลงจากตดตงเสรจแลว 2.ในข นตอนสดทายของการตดต ง จะมการแสดงไดอะลอกซใหคณปอน Product key ดงรปท 1-19
รปท 1-19 แสดงขนตอนสดทายของการตดตง
3.คณสามารถขอ Product key ไดฟร โดยการคลกท Register online กจะเขาสข นตอนการ sign in เขาสระบบของไมโครซอฟทโดยใช e-mail ของคณ แยกออกเปน 2 กรณ
กรณใช e-mail อนๆ ทไมอยในเครอของไมโครซอฟท คณตองลงทะเบยน e-mail ของคณ กบ Microsoft account กอน ไดท https://login.live.com
รปท 1-20 แสดงการลงทะเบยน e-mail อนกบ Microsoft account กรณใช e-mail ในเครอของไมโครซอฟท (www.live.com/ , www.hotmail.com/ ,
www.outlook.com/ ) คณสามารถใช e-mail ของคณ sign in เขาสระบบ Microsoft account ดงรปท 1-21
รปท 1-21 แสดงการ sign in เพอขอ Product key 4.ตอมา จะเขาสข นตอนการแกไขขอมลสวนตวของคณใน Microsoft account จากน นคลกทปม
ดานลางสด เพอเขาสข นตอนตอไป ดงรปท 1-22
รปท 1-22 แสดงขนตอนการปอนขอมลสวนตวใน Microsoft account
5.ทายทสด คณกจะได Product key ตามทคณตองการ ดงรปท 1-23
รปท 1-23 แสดง Product Key ทได 6.ทายทสด ใหคณนา Product key ทได มาใชใน Visual Studio 2012 Express for Windows 8 กจะทาใหคณสามารถใชงานโปรแกรมไดตามทคณตองการแลว ดงรปท 1 -24
รปท 1-24 แสดงการน า Product key ทได มาใชใน Visual Studio 2012 Express for Windows 8
กำรขอสทธชวครำวในกำรพฒนำ Windows 8 Apps การพฒนา Windows 8 Apps ดวยโปรเจกตแบบ Windows Store ในคร งแรก ตองมการขอสทธทเรยกวา Developer license โดยทผเขยนขอเรยกวา เปนการขอสทธชวคราว (เพราะวามวนหมดอาย) เพอใหคณสามารถสราง Windows 8 Apps ดวย VS 2012 ไดนนเอง
รปท 1-25 แสดงไดอะลอกยนยนสทธ ทปรากฎขนมาในครงแรก จากรปท 1-25 VS 2012 (ทก Edition) จะแสดงไดอะลอกน ข นมาในคร งแรก เพอใหคณยนยนสทธในการพฒนา Windows 8 Apps ดวยโปรเจกตแบบ Windows Store
คณตองขอสทธชวคราวกอน แยกออกเปน 2 กรณ คอ 1.ใหคณ Sign in ดวย e-mail ทคณลงทะเบยนกบ Microsoft account ดงรปท 1-26
รปท 1-26 แสดงการ Sign in เขาสระบบ Microsoft account ตอมา จะมไดอะลอก Developer License แจงใหคณทราบวา สทธชวคราวแบบ Developer license ทคณไดรบ จะหมดอายเมอใด ดงรปท 1-27
รปท 1-27 แสดงสทธชวคราวแบบ Developer license ทผเขยนไดรบ จากรปท 1-27 สทธทคณไดรบ สงผลใหคณสามารถพฒนา Windows 8 Apps ไดแลว
รปท 1-28 แสดงสภาพแวดลอมของ Visual Studio 2012 Express for Windows 8 ในครงแรก
รปท 1-29 แสดงการสรางโปรเจกตแบบ Windows Store ใน Visual Studio 2012 Express for Windows 8
รปท 1-30 แสดงโปรเจกตแบบ Windows Store ของ VS 2012 ตงแตเวอรชน Professional ขนไป
กำรขอหรอตออำย Developer license แยกออกเปน 2 กรณ คอ 1.กรณ Visual Studio 2012 ตงแตเวอรชน Professional ขนไป คณสามารถเลอกเมน PROJECT > Store > Acquire Developer License… เพอขอหรอตออายสทธชวคราว
รปท 1-31 กรณ Visual Studio 2012 ตงแตเวอรชน Professional ขนไป 2.กรณ Visual Studio 2012 Express for Windows 8 ใหคณเลอกเมน STORE > Acquire Developer License…
รปท 1-32 กรณ Visual Studio 2012 Express for Windows 8
โครงสรำงของ Windows 8 Apps คณสามารถพฒนา Windows 8 Apps ได 2 แบบ คอ 1. อาศยสครปต XAML รวมกบภาษา VB 2012, VC# 2012 และ C++ 2012 2. อาศยสครปต HTML5 รวมกบ CSS3 & JavaScript
1.อำศยสครปต XAML รวมกบภำษำ VB 2012, VC# 2012 และ C++ แตเน อหาทผเขยนนาเสนอ ครอบคลม 2 ภาษาเทาน น คอ VB 2012 & VC# 2012
สาหรบโคด VB 2012 & VC# 2012 ทนามาใชในการพฒนา Windows 8 Apps เกดจาก 2 สวนดวยกน คอ
ควำมรเดมจำก .NET เวอรชนเกำ โดยสวนใหญ ยงคงใชใน Windows 8 Apps ไดเชนเดม อยในฐานะเปนกลมคลาสทอยภายใตเนมสเปซ System.* อาจจะมขอแตกตาง หรอขอจากดไปจากเดมบาง ข นอยกบรายละเอยด ซงจะเปนเน อหาในลาดบถดไป
สงทตองศกษำเพมเตม อยภายใตเนมสเปซทข นตนดวย Windows.* รนภายใต WinRT นคอ สงทเราตองเรยนรวา ในการพฒนา Windows 8 Apps ข นมา ประกอบดวยอะไรบาง
รปท 1-33 แสดงเนมสเปซในโปรเจกต Windows 8 Apps ดวย VC# 2012
จากรปท 1-33 มาจากโปรเจกต Windows 8 Apps ดวย VC# 2012 แสดงใหคณเหนชดเจนทสด กลาวคอ เมอคณสรางโปรเจกต Windows 8 Apps วางๆ ข นมา มการอางองเนมสเปซพ นฐานเทาทจาเปนในการพฒนา Windows 8 Apps ข นตนใหคณโดยอตโนมต ประกอบดวยเนมสเปซ 2 กลม คอ
กลม .NET เดม (System.*) กลม WinRT (Windows.*)
สวนคณผอานทเคยพฒนา WPF Application มากอน การยายมาพฒนา Windows 8 Apps ถอวา คณอยในฐานะครอบครวเดยวกน คดแบบงายๆ วา บานของคณใหญข น ถาคณผอานเลอกสายน สงทคณได คอ คณสามารถพฒนาไดท ง WPF Application และ Windows 8 Apps
สวนแสดงผลของ Windows 8 Apps ในข นตน เกบอยในไฟลทชอวา MainPage.xaml ดงสครปต XAML ตอไปน XAML
<Page x:Class="App1.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:App1" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"> </Grid> </Page>
ทกๆ คร งทคณสราง Windows 8 Apps ดวยโปรเจกตชนด Blank Application สงผลให VS 2012 จะสรางสครปต XAML ขางตนใหคณโดยอตโนมต เปนสวนแสดงผลแบบวางๆ มสงทนาสนใจ ในข นตน คอ 1.เราถอวา อลเมนต <Page>…</Page> ทาหนาทเปนตวบรรจ (Container Control) คอนโทรลอนๆ ในระดบบนสด และยงทาหนาทเปนสภาพแวดลอมใน Windows 8 Apps อกดวย 2.VS 2012 กาหนดใหอลเมนต <Grid>…</Grid> ทาหนาทเปนตวบรรจคอนโทรลอนๆ ในสวนแสดงผล อยในระดบรองลงมาจากอลเมนต <Page>…</Page> มสวนแสดงผลเปนแบบเปนตาราง คณสามารถเปลยนเปนคอนโทรลบรรจตวอนไดเชนกน ผเขยนจะกลาวถงในเน อหาลาดบตอๆ ไป
2.อำศยสครปต HTML5 รวมกบ CSS3 & JavaScript สงทสาคญทสด กคอ HTML5 ทนามาใชในการพฒนา Windows 8 Apps มท งสวนทเปนมาตรฐานเดมของ HTML5 และสวนทเพมเตมข นมาโดยไมโครซอฟท เพอเพมประสทธภาพในการทางานและสรางสวนแสดงผลใน Windows 8 Apps นนเอง เชน กลมแอตทรบวตทข นตนดวยคาวา data- ฯลฯ เปนตน ถาคณผอานเลอกสายน สงทคณได คอ การสรางเวบไซดดวยมาตรฐาน HTML5, การจดสวนแสดงผลดวย CSS3 และ Windows 8 Apps อยในไฟลทชอวา default.html
HTML5
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>App1</title> <!-- WinJS references --> <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" /> <script src="//Microsoft.WinJS.1.0/js/base.js"></script> <script src="//Microsoft.WinJS.1.0/js/ui.js"></script> <!-- App1 references --> <link href="/css/default.css" rel="stylesheet" /> <script src="/js/default.js"></script> </head> <body> <p>Content goes here</p> </body> </html>
สาหรบคณผอานทเปนมอใหมจรงๆ การเรมตนศกษา เขามาสโลกของ Windows 8 Apps ไมใชเรองยากเยนอกตอไป เพราะวา ไมโครซอฟทเตรยมเครองมอ และจดโครงสรางของ Windows 8 Apps ใหงายและสะดวกตอการเรยนรเปนอยางมาก นคอ โจทยของผเขยนในการนาเสนอหนงสอในซรยของ Windows 8 Apps
รปแบบกำรน ำเสนอตวอยำงในหนงสอเลมน รปแบบการนาเสนอสครปต XAML และโคดการทางาน (VB 2012 และ VC# 2012) ผเขยนแยก
ออกเปน 2 กรณ 1.กรณสครปต XAML ผเขยนลงเฉพาะสครปตทเปนเน อหาเทาน น เพอใหสะดวกตอการนาเสนอ สวนสครปต XAML ทเกดจาก VS 2012 สรางใหคณอตโนมต ผเขยนขอละไวในฐานทเขาใจวา เปนสครปต XAML ทไมมความเกยวของใดๆ ตอเน อหาในหวขอน นๆ เพอใหคณผอานทราบวา นคอ สครปต XAML ทคณตองเขยนเอง หรอเปนเน อหาทกาลงนาเสนออย
แตถาเน อหามความเกยวของ หรอเชอมโยงกน ผเขยนจะลงสครปต XAML ดงกลาวท งหมด เพอใหคณผอานเหนความสมพนธระหวางสครปตท VS 2012 สรางใหคณโดยอตโนมต กบสครปตทคณตองเขาไปแกไข หรอเขยนเอง 2.กรณโคดท ำงำน (VB 2012 และ VC# 2012) สาหรบโคดการทางานทกตวอยาง ทกหวขอทนาเสนอในหนงสอเลมน ผเขยนลงโคดครบถวนท งหมด
สาหรบตวอยางโคดและสครปตของหนงสอเลมน จะใชตารางแตละสทาหนาทกากบโคดไว สาหรบกรอบสแดง หมายถง โคดหรอสครปตทมขอผดพลาด ผเขยนยกตวอยางข นมาเพอเปรยบเทยบเน อหาในหวขอน นๆ XAML
VB 2012
VC# 2012
Error
XML
XSLT
รปแบบกำรลงโคด (VB 2012 & VC# 2012) และสครปต XAML ในหนงสอเลมน เพอใหคณผอานและผเขยนเขาใจตรงกน รปแบบการลงโคด (VB 2012 & VC# 2012) และสครปต XAML ของหนงสอเลมน มรายละเอยดดงน 1.สครปต XAML สาหรบสครปต XAML ทเกดจาก VS 2012 สรางใหคณโดยอตโนมต ผเขยนไมลงในหนงสอเลมน ดงสครปต XAML ตอไปน XAML
<Page x:Class="App1.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:App1" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"> </Grid> </Page>
สครปต XAML ขางตน เปนโครงสรางของสวนแสดงผลท VS 2012 สรางใหคณโดยอตโนมต เปนสวนทผเขยนไมลงในหนงสอเลมน ผเขยนลงเฉพาะสครปต XAML ทคณตองเขยนเอง ซงเปนเน อหาของหวขอน นๆ แตถาเน อหาดงกลาว เกยวของกบสครปต XAML ท VS 2012 สรางใหคณโดยอตโนมต ผเขยนจะลงสครปต XAML เตมรปแบบ เพอใหคณเหนรายละเอยดอยางชดเจน โดยทจะระบชอไฟล *.xaml กากบสครปตไวดวย เพอใหคณทราบวา เปนสครปต XAML ของไฟลใด โดยทผเขยนจะแยกสครปตออกเปน 2 สวน คอ
สครปตทเกดจาก VS 2012 สรางใหคณโดยอตโนมต จะแสดงสครปตเปนตวสเทา สครปตทคณตองเขยนเอง จะลงดวยสตามปกตทไดจาก VS 2012
2.โคด VB 2012 & VC# 2012 ผเขยนถอวา เปนโคดการทางานทคณตองเขยนเองท งหมด ดงน น โคดสวนน ผเขยนลงครบทง 2 ภาษา ทกตวอยาง มชอไฟล *.vb หรอ *.cs กากบไวชดเจนวา โคดดงกลาว อยในไฟลใดเชนกน
3.กรณเขยนสครปตหรอโคดใหมเพมเขำไปในสครปตหรอโคดทถกสรำงขนมำโดย VS 2012 สาหรบกรณน เกดจากการทางานรวมกนระหวางสครปตหรอโคด ทเราตองเขยนข นมาเอง กบสครปตหรอโคดทมาจาก VS 2012 โดยอตโนมต ผเขยนแยกแยะโดยการกาหนดใหสครปตหรอโคดทคณตองเขยนข นมาเองเปนส สวนสครปตหรอโคดทมาจาก VS 2012 โดยอตโนมต ผเขยนเลอกใชสเทา เพอใหเกดความแตกตาง กำรจดระเบยบโคดหรอสครปตใน VS 2012 มคาสงใน VS 2012 ทนาสนใจ ทาหนาทจดระเบยบโคดหรอสครปตใหดงายยงข น โดยการเลอกเมน EDIT > Advanced > Format Document
รปท 1-34 แสดงการเลอกค าสง Format Document
รปท 1-35 ผลการจดระเบยบโคดหรอสครปตดวย VS 2012 สรปทำยบท เน อหาในบทน เปนการกลาวถงในภาพรวมของความสมพนธระหวาง Windows 8 กบ Visual Studio 2012 รวมไปถงทศทางในอนาคตของโปรแกรมสาย .NET