AutoMapper กับขัอมูลชนิด Collection

การใช้งาน AutoMapper กับ object type array หรือ list ไม่จำเป็นต้องกำหนดค่า config การ map ของ array หรือ list เพียงแค่ config การ map ของ member ของ array หรือ list ที่ใช้งานเท่านั้น ตัวอย่างเช่น object ง่ายๆสองชนิดดังต่อไปนี้ public class Person { public string name { get; set; } } public class Employee { public string name { get; set; } } กำหนดค่า config ของ AutoMapper สำหรับการ map ข้อมูลจาก Person ไปยัง Employee Mapper.Initialize(cfg => cfg.CreateMap<Person, Employee>()); var persons = new[] { new Person { Name = “A” }, new Person { Name = “B” }, new Person { Name = “C” } }; AutoMapper สามารถใช้งานได้กับ generic collection type ดังนี้ IEnumerable IEnumerable<T> ICollection ICollection<T> IList IList<T> List<T> Arrays ในการทำ mapping ของ AutoMapper ถ้า collection ของ object ปลายทางที่ถูก map มี member อยู่แล้ว AutoMapper จะทำการ remove member ของ collection ปลายทางออกก่อน ที่จะทำการ mapping ข้อมูลจาก Object ต้นทาง var enumEmployee = Mapper.Map<Person[], IEnumerable<Employee>>(persons); var colEmployee = Mapper.Map<Person[], ICollection<Employee>>(persons); var ilistEmployee = Mapper.Map<Person[], IList<Employee>>(persons); var listEmployee = Mapper.Map<Person[], List<Employee>>(persons); var arrayEmployee = Mapper.Map<Person[], Employee[]>(persons); กรณีที่ collection ต้นทางที่ทำการ mapping มีค่าเป็น null, AutoMapper จะทำกำหนดค่าให้กับ collection ปลายทางเป็น empty collection ไม่ใช่ null collection เราสามารถเปลี่ยนค่า default โดยการกำหนดค่า AllowNullCollections = true ในตอน config mapper Mapper.Initialize(cfg => { cfg.AllowNullCollections = true; cfg.CreateMap<Person, Employee>(); }); ในกรณีที่ collection ที่ต้องการ mapping มี member ที่มีลักษณะ hierarachy

Read More »

AutoMapper

AutoMapper คือ component ที่ใช้ในการ map ข้อมูลระหว่าง object ต่างชนิดกัน โดยทำการแปลงข้อมูลจาก object ชนิดหนึ่ง ไปกำหนดค่าให้กับ object อีกชนิดหนึ่ง ซึ่งถ้า object ปลายทางตรงตามข้อกำหนดของ AutoMapper ก็ไม่จำเป็นต้อง config ค่าใดๆเลย การแปลงข้อมูลจาก object ชนิดหนึ่งไปยัง object อีกชนิดหนึ่ง เกิดขึ้นได้บ่อยในการพัฒนา application โดยเฉพาะ application ที่อยู่ในลักษณะ multi tiers ที่ต้องมีการส่งผ่าน object ระหว่างกัน เช่น UI layer กับ Service layer หรือ Data access layer กับ Service layer การใช้งาน AutoMapper เมื่อต้องการแปลงข้อมูลจาก object ต้นทางไปยัง object ปลายทางอีกชนิดหนึ่ง ถ้า object ปลายทางมี property name ชื่อเดียวกับ object ต้นทาง AutoMapper จะทำการกำหนดค่าให้กับ property ของ object ปลายทางโดยอัตโนมัติ การกำหนดค่า config การแปลงข้อมูลระหว่าง object ทำได้โดยใช้ MapperConfiguration ซึ่งจะมีเพียงหนึ่งเดียว และสร้างขึ้นตอนเริ่ม application หรือ ใช้ Mapper.Initialize static method //static method Mapper.Initialize(cfg => cfg.CreateMap<Person, PersonPoco>()); //instance method var config = new MapperConfiguration(cfg => cfg.CreateMap<Person, PersonPoco>()); type ที่อยู่ทางซ้ายของ cfg.CreateMap<>() คือ type ต้นทาง ส่วนทางด้านขวาคือ type ปลายทาง ซึ่งเราจะทำการ mapping โดยใช้ static Mapper method หรือจะใช้ instance method ก็ได้ var mapper = config.CreateMapper(); //instance method var mapper = new Mapper(config); PersonPoco poco = mapper.Map<PersonPoco>(person); //static method PersonPoco poco = Mapper.Map<PersonPoco>(person); ในกรณีที่เรามี object ที่มีโครงสร้างซับซ้อน ซึ่งการใช้งานในบางโอกาสที่ต้องการดูข้อมูลเพี่ยงบางส่วน เราสามารถใช้งาน AutoMapper mapping ข้อมูล มาสู่ object ที่มีโครงสร้างเรียบง่ายใช้งานได้สะดวก ตัวอย่างเช่น object Order ที่มีโครงสร้างค่อนข้างซับซ้อนด้านล่างนี้ public class Order { public Customer Customer { get; set; } public OrderLineItem[] OrderLineItems() public decimal GetTotal() { return OrderLineItems.Sum(li => li.GetTotal()); } } public class Product { public decimal Price { get; set; } public string Name { get; set; } } public class

Read More »

Stencil : Styling

Shadow DOM Shadow DOM เป็น API ที่อยู่ใน browser ที่ให้ความสามารถในทำ DOM encapsulation และ style encapsulation โดย Shadow DOM จะแยก component ออกจากภายนอก ทำให้ไม่ต้องกังวลกับ scope ของ css หรือผลกระทบกับ component ภายนอก หรือ component ภายนอกจะกระทบกับ component ภายใน ใน Stencil ค่า default การใช้งาน Shadow DOM ใน web component ที่สร้างด้วย Stencil จะถูกปิดอยู่  หากต้องการเปิดใช้งาน Shadow DOM ใน web component ต้องกำหนดค่า shadow param ใน component decorator ดังตัวอย่างด้านล่างนี้ @Component({ tag: ‘shadow-component’, styleUrl: ‘shadow-component.scss’, shadow: true }) export class ShadowComponent { } สิ่งจำเป็นเมื่อเปิดใช้งาน Shadow DOM QuerySelector เมื่อต้องการ query element ที่อยู่ภายใน web component จะต้องใช้ this.el.shadowRoot.querySelector() เนื่องจาก DOM ภายใน web component อยู่ภายใน shadowRoot Global Styles จะต้องใช้ CSS custom properties css selector สำหรับ web component element คือ “:host”  selector โดยทั่วไป จะเก็บ styles ไว้ภายไต้ ชื่อ tag ของ component นั้น my-element { div { background: blue; } } ในกรณีของ Shadow DOM  อยู่ภายใต้ tag :host :host { div { background: blue; } } Scoped CSS สำหรับ browser ที่ไม่สนับสนุน Shadow DOM, web component ที่สร้างโดย Stencil จะกลับไปใช้ scoped CSS แทนที่จะ load Shadow DOM polyfill ที่มีขนาดใหญ่  Scoped CSS จะทำการกำหนดขอบเขต CSS ให้กับ element โดยอัตโนมัตตอน runtime CSS Variables CSS Variables เหมือนกับ Sass Variables แต่ต่างกันตรงที่ CSS Variables รวมอยู่ใน browser โดยที่ CSS Variables ให้ความสามารถในการกำหนด CSS properties ที่ใช้ได้ภายใน app  ตัวอย่างการใช้งานที่พบบ่อยคือ การกำหนดสี (color) ถ้ามีสีหลักที่ต้องการใช้ร่วมกันทั้ง app แทนที่จะกำหนดสีนั้นๆในแต่ละที่ที่ใช้งาน ก็จะสร้าง variable ขึ้นมาและใช้ variable นั้นในทุกๆที่ที่ต้องการ ซึ่งถ้าต้องการเปลี่ยนสี ก็สามารถเปลี่ยนที่ variable ที่เดียว การใช้งาน CSS Variables ใน Stencil สร้าง

Read More »

Stencil : JSX

Stencil component ใช้ JSX template syntax ในการกำหนดรูปแบบการแสดงผลที่จะถูก render ของ component  ซึ่งแต่ละ component จะมี render function ที่จะทำหน้าที่ return โครงสร้างของ component ที่จะเปลี่ยนเป็น DOM ตอน runtime เพื่อแสดงผลบนหน้าจอ class MyComponent { render() { return ( <div> <h1>Hello World</h1> <p>This is JSX!</p> </div> ); } } จาก class Mycomponent ด้านบน render function จะ return div element ที่ภายในประกอบไปด้วย h1 และ p Data Binding เมื่อ component ต้องการที่จะ render ข้อมูลที่มีการเปลี่ยนแปลง dynamic data ทำได้โดยการ bindind ข้อมูลนั้นๆ โดยใช้ {variable}  (ซึ่งจะใกล้เคียงกับ ES6 template ที่ใช้ ${variable}) render() { return ( <div>Hello {this.name}</div> ) } Conditionals เมื่อ component มีการแสดงผลที่ขึ้นอยู่กับเงื่อนไข สามารถใช้ JavaScript if/else statements ใน render function ดังเช่นตัวอย่างด้านล่างนี้ ถ้า this.name ไม่มีการกำหนดค่า จะแสดงผล “Hello, World” render() { if (this.name) { return ( <div>Hello {this.name}</div> ) } else { return ( <div>Hello, World</div> ) } } หรือ จะเขียนในรูปแบบ inline conditionals ก็ได้เช่นกัน render() { return ( <div> {this.name ? <p>Hello {this.name}</p> : <p>Hello World</p> } </div> ); } Loops ใน JSX สามารถใช้ array operators : map ในการทำงานแบบ loop  จากตัวอย่างด้านล่าง มี lists ของ todo object ใน this.Objects ซึ่ง map function ทำหน้าที่ loop ในแต่ละ todo object ใน this.Objects แล้วสร้าง new JSX sub tree และ add เข้าไปใน array ที่จะ return ออกจาก map function ซึ่งจะเพิ่มเข้าไปใน JSX tree ด้านนอกนั่นคือ div element render() { return ( <div> {this.todos.map((todo) => <div> <div>{todo.taskName}</div> <div>{todo.isCompleted}</div> </div> )}

Read More »

Stencil : Decorators

Component Decorator แต่ละ Stencil component จะต้องขึ้นต้นด้วย @Component() decorator เสมอ โดย import มาจาก @stencil.core package ซึ่งภายใต้ @Component() decorator สามารถกำหนด tag name และ styleUrl ของ component import { Component } from ‘@stencil/core’; @Component({ tag: ‘todo-list’, styleUrl: ‘todo-list.scss’ }) export class TodoList { … } @Component() decorator ให้ความสามารถในการกำหนด CSS classes และ attributes บน componnet ที่สร้างโดยใช้ host option ดังนี้ import { Component } from ‘@stencil/core’; @Component({ tag: ‘todo-list’, styleUrl: ‘todo-list.scss’, host: { theme: ‘todo’, role: ‘list’ } }) เมื่อใช้งาน component ตัวนี้ ก็จะมีการกำหนดค่า class เป็น todo และกำหนด role attribute ให้อัตโนมัติ <todo-list class=’todo’ role=’list’></todo-list>   Prop Decorator @Prop() decorator ใช้ระบุ attribute หรือ properties สำหรับ element ที่ผู้พัฒนาสามารถกำหนดค่าให้กับ component นั้นได้  เนื่องจาก Children component จะไม่สามารถเข้าถึง properties หรือ reference ของ parent component ได้จึงใช้ Props ในการผ่านข้อมูลจาก parent มาสู่ child และเมื่อใดก็ตามที่ค่าของ Props เปลี่ยนแปลงจะทำให้ component ทำการ re-render type ของ Props ที่รองรับมีหลากหลาย ไม่ว่าจะเป็น number, string, boolean หรือแม้กระทั่ง Object หรือ Array import { Prop } from ‘@stencil/core’; … export class TodoList { @Prop() color: string; @Prop() favoriteNumber: number; @Prop() isSelected: boolean; @Prop() myHttpService: MyHttpService; } ภายใน function ใน TodoList class สามารถเรียกใช้งาน Props ผ่าน this operator logColor() { console.log(this.color) } สำหรับการใช้ภายนอก ใน HTML การกำหนดค่าทำได้โดย set ค่าให้ attributes ของ component tag โดยใช้ dash-case  เช่น Prop favoriteNumber ใช้ attribute favorite-number <todo-list color=”blue” favorite-number=”24″ is-selected=”true”></todo-list> สำหรับการใช้ใน JSX การกำหนดค่าทำได้โดย set ค่าให้ attributes ของ component tag โดยใช้

Read More »