พงศพัฒน์ หังสพฤกษ์

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

by

การใช้งาน 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; } } กำหนดค่า … Read more

AutoMapper

by

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 … Read more

Stencil : Styling

by

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 ใน … Read more

Stencil : JSX

by

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 … Read more

Stencil : Decorators

by

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 … Read more