Hugo Habor

Tag: Callback

  • WPF-好用的Dependency Property And Callback相依性屬性

    WPF-好用的Dependency Property And Callback相依性屬性

    WPF之所以後續越來越多人使用，就是因為它的Dependency Property And Callback，甚至拉動Flex Windows的時候也不會讓圖片與元Dpi跑掉，以前的經驗表示… 在Ａ端IDE跑得好好的外觀屬性，換到Ｂ端時…外觀屬性跑掉是家常便飯，一時之間會不知道是內層還是外部的設定屬性造成的(這個就會與WPF-Dependency Property有很大的關係)。

    以前的NetFramework 沒有Dpi適應以及元件外觀沒有相依性可以跟著整個Solutioni走，所以開發WPF（Windows Presentation Foundation）的大神也肯定有察覺到這個超級不方便的地方。

    今天我們就是要講這其中的一個重要元素 – Dependency Property。

    資料來源:

    [WPF] Data Binding – Dependency Property

    https://skychang.github.io/2011/12/15/WPF-Dependency-Property-%E6%B7%B1%E5%85%A5%E6%8E%A2%E8%A8%8E/

    表單資料架構

    以前的 Property寫法

    在看Dependency Property之前，先來看看，以前的Property是什麼格式。

    private double fntsize;
public double FontSize
{
    get { return fntsize; }
    set { fntsize = value; }
}

    你如果使用這種動態的方式，還得去定義FontChangedEvent 再去RaiseEvent … 真的很痛苦!

    WPF不需要這樣子搞了!

    在Visual Studio中添加Dependency Property

    在Visual Studio中的Dependency Class中加入一個靜態Dependency Property。

    DependencyProperty只能被封裝在繼承DependencyObject的物件中，幾乎在WPF或是Silverlight中看得到的控制項都繼承了DependencyObject，這跟我們之前用的 CLR屬性相差非常地多。

    Dependency Property Callback 示範

    
        // 建立靜態DependencyProperty
        // 相依屬性的元資料。這裡設定了初始值為 false，以及屬性值改變時要呼叫的方法 

        public static DependencyProperty IsBrownBkgrdProperty = 
DependencyProperty.Register("IsBrownBkgrd", typeof(bool), typeof(MLStackPanel), new PropertyMetadata(false, OnIsBrownBkgrdChanged, CoerceIsBrownBkgrdChanged));

    當我們必須操控Form 裡面的原件屬性，需按照我們定義的方式做變化時，我們可以在Dependency Property 註冊的地方新增一個…

    內部可以多載的實體 PropertyMetadata ( Boolean,PropertyChangedCallBack, CoreceValueCallBack)

    *可以想像它是被包裹在Dependency Property裡面的實體物件

    Boolean

    預先設定布林值

    PropertyChangedCallBack

    可改變實體元件的屬性值

    CoreceValueCallBack

    讀取目前元件底下的屬性值

    建立靜態DependencyProperty

    namespace CustomDependencyProperty
{
    class MLStackPanel : StackPanel
    {
        // 建立靜態DependencyProperty
        // 相依屬性的元資料。這裡設定了初始值為 false，以及屬性值改變時要呼叫的方法 

        public static DependencyProperty IsBrownBkgrdProperty = 
DependencyProperty.Register("IsBrownBkgrd", typeof(bool), typeof(MLStackPanel), new PropertyMetadata(false, OnIsBrownBkgrdChanged, CoerceIsBrownBkgrdChanged));

}

    Dependency Property 宣告與新增其CLR屬性

    namespace CustomDependencyProperty
{
    class MLStackPanel : StackPanel
    {
        // 建立靜態DependencyProperty
        // 相依屬性的元資料。這裡設定了初始值為 false，以及屬性值改變時要呼叫的方法 
        public static DependencyProperty IsBrownBkgrdProperty = 
DependencyProperty.Register("IsBrownBkgrd", typeof(bool), typeof(MLStackPanel), new PropertyMetadata(false, OnIsBrownBkgrdChanged, CoerceIsBrownBkgrdChanged));


        // 建立靜態物件  判斷StackPanel 控制項背景顏色
      private static object CoerceIsBrownBkgrdChanged(DependencyObject d, object baseValue)
      {
          MLStackPanel m = d as MLStackPanel;
          if (m.IsBrownBkgrd == false)
          {
              MessageBox.Show("The IsBrownBkgrd depdendency property is being changed to true");
              return true;
          }
          else
          {
              MessageBox.Show("The IsBrownBkgrd depdendency property is being changed to false");
              return false;
          }
      }

 //CLR 屬性包裹
 public bool IsBrownBkgrd
 {
     get { return (bool)GetValue(IsBrownBkgrdProperty); }
     set { SetValue(IsBrownBkgrdProperty, value); }
 }

    當你建立完了MLStackPanel Class之後，我們會將這個Property加到我們的自訂控制項中(MainForm的XAML碼)，讓我們更容易理解。

    我們需要一個偵測背景顏色的副程式

    namespace CustomDependencyProperty
{
        //繼承 控制項 StackPanel
    class MLStackPanel : StackPanel
    {
        // 建立靜態DependencyProperty
        // 相依屬性的元資料。這裡設定了初始值為 false，以及屬性值改變時要呼叫的方法 
        public static DependencyProperty IsBrownBkgrdProperty = 
DependencyProperty.Register("IsBrownBkgrd", typeof(bool), typeof(MLStackPanel), new PropertyMetadata(false, OnIsBrownBkgrdChanged, CoerceIsBrownBkgrdChanged));


 // 建立靜態物件  判斷StackPanel 控制項背景顏色
      private static object CoerceIsBrownBkgrdChanged(DependencyObject d, object baseValue)
      {
          MLStackPanel m = d as MLStackPanel;
          if (m.IsBrownBkgrd == false)
          {
              MessageBox.Show("The IsBrownBkgrd depdendency property is being changed to true");
              return true;
          }
          else
          {
              MessageBox.Show("The IsBrownBkgrd depdendency property is being changed to false");
              return false;
          }
      }

 //CLR 屬性包裹
 public bool IsBrownBkgrd
 {
     get { return (bool)GetValue(IsBrownBkgrdProperty); }
     set { SetValue(IsBrownBkgrdProperty, value); }
 }


 // 靜態判斷物件
  private static object CoerceIsBrownBkgrdChanged(DependencyObject d, object baseValue)
  {
      MLStackPanel m = d as MLStackPanel;
      if (m.IsBrownBkgrd == false)
      {
          MessageBox.Show("The IsBrownBkgrd depdendency property is being changed to true");
          return true;
      }
      else
      {
          MessageBox.Show("The IsBrownBkgrd depdendency property is being changed to false");
          return false;
      }

  }


 // OnIsBrownBkgrdChanged 方法
 private static void OnIsBrownBkgrdChanged(DependencyObject source, DependencyPropertyChangedEventArgs e)
 {
     MLStackPanel msp = source as MLStackPanel;

     if (msp.IsBrownBkgrd == true)
     {
         msp.Background = System.Windows.Media.Brushes.BurlyWood;
     }
     else
     {
         msp.Background = System.Windows.Media.Brushes.LightGray;
     }

 }

}

    WPF頁面

    該專案目的:

    我們得把專案挪用到任何VS的環境，它都能幫助我且準確的保留上一個開發者的外觀樣式。

    設定控制項內部的 裝飾屬性

    <local:ClassName>：將已經繼承控制項類別的Class 引入

    XAML 

     <Grid>
     <local:MLStackPanel x:Name="mlStack" IsBrownBkgrd="true" >
         <CheckBox x:Name="chkBkgColor" Content="Brown Background" IsChecked="True" Margin="77,117,0,0"  Click="bkgColor_Click" />
     </local:MLStackPanel>
 </Grid>

    當你一開啟表單頁面時

    當你一開啟表單頁面，試驗你新增的CheckBox

  • JS-Callback : 等一會再來叫你

    Home » Callback

    < 參考相關文章 >

    請給予小肝肝工程師支持喔 'v' ETH/ERC20

    JavaScript Callbacks :

    “I will call back later!”

    A callback is a function passed as an argument to another function

    This technique allows a function to call another function

    A callback function can run after another function has finished

    以上為W3C 裡面所小結的敘述。

    < 你還是說中文吧! >

    W3C所說的….

    A callback is a function passed as an argument to another function.

    callback function 藉由當作函式參數帶入另一個功能陳述式.

    中文翻譯字詞會用“回呼””、”回叫”、”回調”

    我的話都習慣叫 “回扣” ( 疑?

    回扣函式, 通常用於在目前的函式呼叫執行最後移交控制權，而不使用函式回傳值的方式。

    直接風格的控制權移交是不明確的，它是用回傳值的方式，然後進行到下一行程式碼或呼叫接下來其他函式。

    前幾篇提到的同步的話要函式甲 > 函式乙 > 函式丙 > 函式丁, 你要等前面做完很麻煩 !

    Callback function 的用途就在於可以讓我們的程式在不論同步或是非同步執行的狀況下都還是可以依照你要的順序執行函式。

    < 基本的參數帶入函式 >

    我們這裡用直接風格帶入常數來解釋一下~ 

    function fruitProcessor(apples, oranges) {
// 陳述式內的處裡方式  = 算式
 const juice = `Juice with ${apples} apples and ${oranges} oranges.`;
 return juice;
}

//代入參數
const appleJuice = fruitProcessor(5, 0);

console.log(appleJuice);

//代入參數
const appleOrangeJuice = fruitProcessor(2, 4);

console.log(appleOrangeJuice);

    < 如何處理函式 >

    我們範例的結構:

    1. 處理總函式
    2. 蘋果汁處理函式
    3. 柳橙汁處裡函式
    
let apples;
let oranges;

function fruitProcessor(callback)
{
    callback(apples,oranges);
}

function fruitAppleJuice (apples,oranges){
    apples= 5;
    oranges =0;
    const juice = `Juice with ${apples} apples and ${oranges} oranges.`;
    console.log(juice);
}

function fruitOrangeJuice (apples,oranges){
    apples= 2;
    oranges =4;
    const juice = `Juice with ${apples} apples and ${oranges} oranges.`;
    console.log(juice);
}

fruitProcessor( fruitAppleJuice );

fruitProcessor( fruitOrangeJuice );

    將你想要處裡的不同參數輸入不同的函式, 爾後只要呼叫過來做處理即可。

    < Callback簡單函式參數帶入＋呼叫>

    let juice;

function fruitProcessor(apples,oranges,callback)
{
    const juice = `Juice with ${apples} apples and ${oranges} oranges.`;
    callback( juice);
}

function fruitAppleJuice (callback)
{    
    console.log(juice);
 }

 fruitProcessor(5,1, fruitProcessor);


／／執行結果
Juice with 5 apples and 1 oranges.

    * 可以自己comment : callback( juice ), 試著自己想想看其中差異!

    < Callback用多函式呼叫＿控制執行順序 >

    
let apples;
let oranges;

function fruitProcessor(callback)
{
    callback(apples,oranges);
}

function fruitAppleJuice (Fn){

   apples= 5;
   oranges =0;
   const juice = `Juice with ${apples} apples and ${oranges} oranges.`;
   console.log(juice);
   Fn()
}

function fruitOrangeJuice (apples,oranges){
    
    apples= 2;
    oranges =4;
    const juice = `Juice with ${apples} apples and ${oranges} oranges.`;
    console.log(juice);
}

fruitProcessor(fruitAppleJuice(fruitOrangeJuice));

    結論: fruitAppleJuice 去呼叫執行 fruitOrangeJuice

    那你會問…. 既然是A函式去呼叫B函式, 這個有甚麼特別的呢??

    有時候阿~ 我們會遇到延遲以及函式需要等待一段時間後執行, 主函式要是遇到錯誤不執行…. 那就是掛點在那了….

    在本處我就不講解延遲執行這個方法了, 可以回去看一下我寫的 SetTimeout 的文章

    < Callback Settimeout執行時間點 >

    我們在主函式裡, 加入 SetTimeout 方式做控制執行.

    
let apples;
let oranges;

function fruitProcessor(callback)
{
    setTimeout(function(){ 
        console.log("這個是最先還是最後?");
         },0)

    callback(apples,oranges);
}

function fruitAppleJuice (Fn){
   apples= 5;
   oranges =0;
   const juice = `Juice with ${apples} apples and ${oranges} oranges.`;
   console.log(juice);
   Fn()
}

function fruitOrangeJuice (apples,oranges){
    apples= 2;
    oranges =4;
    const juice = `Juice with ${apples} apples and ${oranges} oranges.`;
    console.log(juice);
}

fruitProcessor(fruitAppleJuice (fruitOrangeJuice));


／／執行結果

Juice with５apples and ０ oranges.
Juice with２apples and ４ oranges.
這個是最先還是最後?

    Settimeout不管延遲時間設定多少，它都會最後一個執行！　

    結論
    這章節最主要是給你知道, callback的執行過程