hdolder.com srl  

Software R&D
 

   hdc Home    |    Content    |    Blog    |    Director    |    Contact    |    mail us   

 


M&P BXaml in .NET, Part 1

Posted on July 29, 2013 by Herman Dolder
Updated on May 27, 2014

The BXaml processor of M&P H5J is now also available in the .NET platform.

The XAML processor provided by the .NET platform, although it allows the instantiation of all kinds of "XAML-friendly" objects, is aimed to support the WPF, Silverlight, WF and WinRT platforms of Microsoft.

As each of these platforms use a different XAML dialect (oriented to bear the idiosyncrasies of the platform) in practice there are several different versions of the XAML processor.

BXaml was developed in TypeScript to operate in Javascript environments both clients and servers. BXaml lets you instantiate all kinds of 'XAML-friendly' objects and is optimized to operate with M&P BLOCKS.

The .NET version of BXaml (BXaml.NET) is functionally identical to the TypeScript version and, as we will see in this series of 3 short articles, lets you instantiate Windows Forms, WPF and Silverlight windows and operate in WinRT.

From the point of view of the WPF, Silverlight, WF and WinRT platforms, BXaml.NET is a subset of XAML that, however, allows to handle more than 80% of the use-cases handled by XAML.

From the point of view of M&P, BXaml.NET is a superset of XAML which allows you to integrate more easily the fuctionality of the M&P BLOCKS in .NET applications.

BXaml.NET is applications neutral, is lightweight, can be easily extended and has a very high performance. It is based on BXml.NET.

In this article (Part 1) we'll show you the instantiation of a Windows Form (WinForm) application. In Part 2 we'll look at the instantiation of a WPF windows application and in Part 3 we will see a pipeline dataflow ported from TypeScript and in addition we will include some omportant comments.

instantiation of a Windows Forms application

We will take a look at the code that creates the following "Color Mixer" WinForm application, in two variants

  • With code-behind, using an events handler.
  • No code-behind, using an M&P BLOCK.

In both cases we use the " BGreenTheme" BLOCK to apply styles to the Forms. It is important to notice that in Windows Forms there are not facilities for Styling and Theming aplications.

1. With code-behind, using an events handler:

using System;
using System.Windows.Forms;
using blkx;
using obx;

namespace mpx
{
    class Program
    {
        [STAThread]
        static void Main(string[] args)
        {
            OB.Setup("Demo");
            DemoApp x = new DemoApp();
            x.BStart();
        }
    }

    public class DemoApp : BLOCKBase
    {
        public DemoApp()
            : base()
        {
            CreateInnerBlocks();
        }

        void CreateInnerBlocks()
        {
           form = (Form)OB.XA.LoadAndStart(this, XamlCode);
           form.ShowDialog();

        }

        public void BStart()
        {
        }

        Form form;

        // Initialized automatically by the 
        // BXaml Processor
        public TrackBar RedScroll;
        public TrackBar GreenScroll;
        public TrackBar BlueScroll;
        public PictureBox ColorPanel;

        // Handles events
        public void OnScrolled(object sender, EventArgs e)
        {
            ColorPanel.BackColor = System.Drawing.Color.FromArgb((byte)RedScroll.Value, (byte)GreenScroll.Value, (byte)BlueScroll.Value);
        }

        private string XamlCode =    
"<mpXaml  " +
"  xmlns:wf='System.Windows.Forms'    " +
"  xmlns:mpx='mpx'    " +
"  xmlns:blkx='blkx'    " +
"  >  " +
" <blkx:BRegion> " +
" <mpx:BGreenTheme /> " +
" <wf:Form id='AppMainForm' " +
"         Text='WinForms Color Mixer' " +
"         ClientSize='420, 190' > " +
"    <blkx:BStyle id='trkb1'   " +
"                Style='{Orientation:`Vertical`, TickFrequency:`16`, TickStyle:`BottomRight` }'   " +
"        />   " +
"    <blkx:BStyle id='trkb2'   " +
"                Style='{basedOn:`trkb1`, Minimum:`0`, Maximum:`255`, Value:`128`, Size:`22, 128` }'  " +
"        />   " +
"    <blkx:BStyle id='lbl1'    " +
"                Style='{Size:`60,15`, TextAlign:`TopCenter`, Font:`Microsoft Sans Serif, 8.25pt, style=Bold`, ForeColor:`White`  }'  " +
"        />   " +
"    <Form.Controls>  " +
"      <wf:TrackBar id='RedScroll'    " +
"                   BStyle='trkb2'    " +
"                   Scroll='OnScrolled'   " +
"                   Location='0, 30' />   " +
"      <wf:TrackBar id='GreenScroll'  " +
"                   BStyle='trkb2'    " +
"                   Scroll='OnScrolled'   " +
"                   Location='70, 30' />  " +
"      <wf:TrackBar id='BlueScroll'   " +
"                   BStyle='trkb2'    " +
"                   Scroll='OnScrolled'   " +
"                   Location='140, 30' /> " +
"      <wf:Label  BStyle='lbl1'   " +
"                 Location='0, 10'    " +
"                 ForeColor='White'   " +
"                 Text='Red'  />  " +
"      <wf:Label  BStyle='lbl1'   " +
"                 Location='70, 10'   " +
"                 ForeColor='White'   " +
"                 Text='Green'  />    " +
"      <wf:Label  BStyle='lbl1'   " +
"                 Location='140, 10'  " +
"                 ForeColor='White'   " +
"                 Text='Blue'  /> " +
"      <wf:Label id='RedValue'    " +
"                BStyle='lbl1'    " +
"                Text='{cls:`Binding`, SourcePath:`RedScroll.Value`,  Converter:`BToStringValConv` }' " +
"                Location='0, 160' /> " +
"      <wf:Label id='GreenValue'  " +
"                BStyle='lbl1'    " +
"                Text='{cls:`Binding`, SourcePath:`GreenScroll.Value`,  Converter:`BToStringValConv` }'   " +
"                Location='70, 160' />    " +
"      <wf:Label id='BlueValue'   " +
"                BStyle='lbl1'    " +
"                Text='{cls:`Binding`, SourcePath:`BlueScroll.Value`,  Converter:`BToStringValConv` }'    " +
"                Location='140, 160' />   " +
"      <wf:PictureBox id='ColorPanel' " +
"                     Location='210, 0'   " +
"                     Size='200, 100' " +
"                     Dock='Right'    " +
"                     BorderStyle='Fixed3D' />    " +
"    </Form.Controls> " +
"  </wf:Form> " +
" </blkx:BRegion> " +
"</mpXaml>    ";
    } // class
}  // namespace    

2. No code-behind, using an M&P BLOCK.

The "BColorMixer" BLOCK replaces the events handler

using blkx;

namespace mpx
{
    public class BColorMixer : BLOCKBase
    {
        public BColorMixer()
            : base()
        {
        }

        private int _InRed = 128;  // <<<<<
        public int InRed
        {
            set
            {
                if (_InRed == value)
                    return;
                _InRed = value;
                MixColors();
            }
        }

        private int _InGreen = 128;  // <<<<< 
        public int InGreen
        {
            set
            {
                if (_InGreen == value)
                    return;
                _InGreen = value;
                MixColors();
            }
        }

        private int _InBlue = 128;  /<<<<<< 
        public int InBlue
        {
            set
            {
                if (_InBlue == value)
                    return;
                _InBlue = value;
                MixColors();
            }
        }

        private System.Drawing.Color _OutputColor; 
        public System.Drawing.Color OutputColor
        {
            get
            {
                return _OutputColor;
            }
            set
            {
                _OutputColor = value;
                OnPropertyChanged("OutputColor");
            }
        }

        void MixColors()
        {
            OutputColor = System.Drawing.Color.FromArgb((byte)_InRed, (byte)_InGreen, (byte)_InBlue);
        }

    }  // class
} // namespace    

and the code for the Form is now

using System;
using System.Windows.Forms;
using blkx;
using obx;

namespace mpx
{
    class Program
    {
        [STAThread]
        static void Main(string[] args)
        {
            OB.Setup("Demo");
            DemoApp x = new DemoApp();
            x.BStart();
        }
    }

    public class DemoApp : BLOCKBase
    {
        public DemoApp()
            : base()
        {
            CreateInnerBlocks();
        }

        void CreateInnerBlocks()
        {
            form = (Form)OB.XA.LoadAndStart(this, XamlCode);
            form.ShowDialog();
        }

        public void BStart()
        {
        }

        Form form;

        private string XamlCode =    
"<mpXaml  " +
"  xmlns:wf='System.Windows.Forms'    " +
"  xmlns:mpx='mpx'    " +
"  xmlns:bkkx='blkx'    " +
"  >  " +
" <blkx:BBoard> " +
" <mpx:BGreenTheme /> " +
" <wf:Form id='AppMainForm' " +
"           Text='WinForms Color Mixer' " +
"           ClientSize='420, 190' > " +
"    <blkx:BStyle id='trkb1'   " +
"                Style='{Orientation:`Vertical`, TickFrequency:`16`, TickStyle:`BottomRight` }'   " +
"        />   " +
"    <blkx:BStyle id='trkb2'   " +
"                Style='{basedOn:`trkb1`, Minimum:`0`, Maximum:`255`, Value:`128`, Size:`22, 128` }'  " +
"        />   " +
"    <blkx:BStyle id='lbl1'    " +
"                Style='{Size:`60,15`, TextAlign:`TopCenter`, Font:`Microsoft Sans Serif, 8.25pt, style=Bold`, ForeColor:`White`  }'  " +
"        />   " +
"    <Form.Controls>  " +
"      <mpx:BColorMixer id='ColorMixer1'  " +
"                       InRed='{cls:`Binding`, SourcePath:`RedScroll.Value`}' " +
"                       InGreen='{cls:`Binding`, SourcePath:`GreenScroll.Value`}' " +
"                       InBlue='{cls:`Binding`, SourcePath:`BlueScroll.Value`}'   " +
"         />  " +
"      <wf:TrackBar id='RedScroll'    " +
"                   BStyle='trkb2'    " +
"                   Location='0, 30' />   " +
"      <wf:TrackBar id='GreenScroll'  " +
"                   BStyle='trkb2'    " +
"                   Location='70, 30' />  " +
"      <wf:TrackBar id='BlueScroll'   " +
"                   BStyle='trkb2'    " +
"                   Location='140, 30' /> " +
"      <wf:Label  BStyle='lbl1'   " +
"                 Location='0, 10'    " +
"                 ForeColor='White'   " +
"                 Text='Red'  />  " +
"      <wf:Label  BStyle='lbl1'   " +
"                 Location='70, 10'   " +
"                 ForeColor='White'   " +
"                 Text='Green'  />    " +
"      <wf:Label  BStyle='lbl1'   " +
"                 Location='140, 10'  " +
"                 ForeColor='White'   " +
"                 Text='Blue'  /> " +
"      <wf:Label id='RedValue'    " +
"                BStyle='lbl1'    " +
"                Text='{cls:`Binding`, SourcePath:`RedScroll.Value`,  Converter:`BToStringValConv` }' " +
"                Location='0, 160' /> " +
"      <wf:Label id='GreenValue'  " +
"                BStyle='lbl1'    " +
"                Text='{cls:`Binding`, SourcePath:`GreenScroll.Value`,  Converter:`BToStringValConv` }'   " +
"                Location='70, 160' /> " +
"      <wf:Label id='BlueValue'   " +
"                BStyle='lbl1'    " +
"                Text='{cls:`Binding`, SourcePath:`BlueScroll.Value`,  Converter:`BToStringValConv` }'    " +
"                Location='140, 160' /> " +
"      <wf:PictureBox id='ColorPanel' " +
"                     Location='210, 0'   " +
"                     Size='200, 100' " +
"                     BackColor='{cls:`Binding`, SourcePath:`ColorMixer1.OutputColor` }'  " +
"                     Dock='Right'    " +
"                     BorderStyle='Fixed3D' />    " +
"    </Form.Controls> " +
"  </wf:Form> " +
" </blkx:BBoard> " +
"</mpXaml>    ";

    }  //class 
}    

The code of the " BGreenTheme" BLOCK is


using System;
using System.Windows.Forms;
using blkx;
using obx;

namespace mpx
{
    public class BGreenTheme : BLOCKBase
    {
        public BGreenTheme()
            : base()
        {
            CreateInnerBlocks();
        }

        void CreateInnerBlocks()
        {
          object xx = OB.LoadAndStart(this, XamlCode);
        }

        public void BStart()
        {
        }

        private string XamlCode =
"<mpXaml  " +
"  xmlns:mpx='mpx'    " +
"  xmlns:blkx='blkx'  " +
"  >  " +
"  <blkx:BBoard> " +
"<blkx:BStyle id='frml1'  " +
"  TargetType='System.Windows.Forms.Form' " +
"  Style='{BackColor:`DarkGreen`, FormBorderStyle:`FixedSingle`, Font:`Microsoft Sans Serif, 8.25pt, style=Bold`, StartPosition:`CenterScreen` }' />  " +
"<blkx:BStyle id='common1'    " +
"  Style='{BackColor:`Black`, Font:`Microsoft Sans Serif, 8.25pt, style=Bold`, ForeColor:`White` }' />    " +
"<blkx:BStyle id='lbl1'   " +
"  TargetType='System.Windows.Forms.Label'    " +
"  Style='{basedOn:`common1`, BackColor:`Transparent`, Size:`70,20`, TextAlign:`BottomLeft`}' />  " +
"<blkx:BStyle id='btn1'   " +
"  TargetType='System.Windows.Forms.Button'   " +
"  Style='{basedOn:`common1`,Margin:`4, 5, 4, 5`, Size:`80,20`, TextAlign:`MiddleCenter`}' /> " +
"<blkx:BStyle id='tbx1'   " +
"  TargetType='System.Windows.Forms.TextBox'  " +
"  Style='{basedOn:`common1`, Size:`100,20`, AcceptsReturn:`True`, BorderStyle:`FixedSingle`, Margin:`4, 5, 4, 5`, TextAlign:`BottomLeft`}' />    " +
"<blkx:BStyle id='tbxml1' " +
"  Description='TextBox Multiline'    " +
"  TargetType='System.Windows.Forms.TextBox:ML'   " +
"  Style='{basedOn:`common1`, Size:`100,50`, AcceptsReturn:`True`, BorderStyle:`FixedSingle`, MaxLength:`0`, Multiline:`True`, ScrollBars:`Vertical`, Margin:`4, 5, 4, 5`}' />    " +
"<blkx:BStyle id='gbx1'   " +
"  TargetType='System.Windows.Forms.GroupBox' " +
"  Style='{basedOn:`common1` }' />    " +
"<blkx:BStyle id='cbx1'   " +
"  TargetType='System.Windows.Forms.CheckBox' " +
"  Style='{basedOn:`common1` }' />    " +
"<blkx:BStyle id='combbx1'    " +
"  TargetType='System.Windows.Forms.ComboBox' " +
"  Style='{basedOn:`common1` }' />    " +
"<blkx:BStyle id='radiob1'    " +
"  TargetType='System.Windows.Forms.RadioButton'  " +
"  Style='{basedOn:`common1` }' />    " +
"  </blkx:BBoaard>    " +
"</mpXaml>    ";

    }  // class
}				    

See also

 

 

TBW The BLOCKS World 2015  hdolder.com srl
C30729
2015-06-26