CEF, ES6, Angular 2, TypeScript use classes .Net Core

Having problems with building or using the CefGlue .NET/Mono binding? Ask your questions here.

Moderator: fddima

CEF, ES6, Angular 2, TypeScript use classes .Net Core

Postby Serginio1 » Fri Feb 03, 2017 1:49 am

I laid out an article in Russian https://habrahabr.ru/post/320960/
The source here https://yadi.sk/d/0If7C5jZ3CEhmf

Made on the basis of SefSimple.
Please take a look. I'm new and I look forward to any recommendations.

How use
Code: Select all
Code in C#
// Extension Method
    //IConfiguration WithDefaultLoader(this IConfiguration configuration, Action<LoaderSetup> setup = null, IEnumerable<IRequester> requesters = null);
    var config = Configuration.Default.WithDefaultLoader();
    // Set address site
    var address = "https://en.wikipedia.org/wiki/List_of_The_Big_Bang_Theory_episodes";
    // load and parse
 
    //Extension Method
   
    //Task<IDocument> OpenAsync(this IBrowsingContext context, string address);
    var document = BrowsingContext.New(config).OpenAsync(address).Result;
    // Use CSS selector 
    var rowSelector = "tr.vevent";
    var rows= document.QuerySelectorAll<IHtmlTableRowElement>(rowSelector);
    foreach (var str in rows)




This code in TypeScript
Code: Select all
             let Net = NetObject.NetWrapper;
            let $$ = NetObject.FlagDeleteObject; // The symbol for the sign removal at the call of the object as a method

            // Load Assembly AngleSharp
            let AssemblyAngleSharp = Net.Assembly("AngleSharp");
            // Get using types
            let Configuration = AssemblyAngleSharp .GetType("AngleSharp.Configuration");
            let BrowsingContext = AssemblyAngleSharp .GetType("AngleSharp.BrowsingContext");
            let HtmlParser = AssemblyAngleSharp .GetType("AngleSharp.Parser.Html.HtmlParser");
            let IHtmlTableRowElement = AssemblyAngleSharp .GetType("AngleSharp.Dom.Html.IHtmlTableRowElement");
            let ApiExtensions = AssemblyAngleSharp .GetType("AngleSharp.Extensions.ApiExtensions");

            let Default = Configuration._Default;
            var config = Default.WithDefaultLoader();

            var address = "https://en.wikipedia.org/wiki/List_of_The_Big_Bang_Theory_episodes";
            let Context = BrowsingContext.New(config);

            //Method Extencion
            //Task<IDocument> OpenAsync(this IBrowsingContext context, string address);
            let document = await Context.async.OpenAsync(address);
            // I can not install the result of an asynchronous function class Proxy with Target fuction
            // Therefore, the objects need to manually wrap
            document = NetObject.WrapResult(document, true);

            let rowSelector = "tr.vevent";

            // For generics not finde in Extension
            //let rows = document.QuerySelectorAll([IHtmlTableRowElement], rowSelector);
           
            // Use Method Extencion
            //IEnumerable < TElement > QuerySelectorAll<TElement>(this IParentNode parent, string selectors) where TElement : IElement;
             let rows = ApiExtensions.QuerySelectorAll([IHtmlTableRowElement], document, rowSelector);
         
            // and so you can call, but you need to beat all the options
            //let rows = document.QuerySelectorAll(rowSelector);

// Select Rows
            for (let row of rows) {
                let Cells = row._Cells;
                let i = 0;
                let dataSite= new DataSite();
                this.ResultParse.push(dataSite);
// Load value cels in dataSite
                for (let Cell of Cells) {
 // It is necessary to wait for the iterator that would release the reference to the iterator
                    if (i < 8)                        {
                    dataSite[this.Colums[i]] = Cell._TextContent;
                    Cell($$); // Remove the link from the repository objects
                    i++;
                    }
                }
                Cells($$);
                row($$);
            }
            rows($$);

            // Remove all links from the repository objects
            NetObject.DeleteNetObjets(СборкаAngleSharp, Configuration, BrowsingContext, HtmlParser, IHtmlTableRowElement, ApiExtensions, Default, config, Context, document);
            alert("The number of items in the store"+Net.CountItemsInStore());



First of all, we see the main differences between C #. To obtain the properties you want to add "_"

Code: Select all
let Default = Configuration._Default;


To invoke an asynchronous method need to add a keyword async:

Code: Select all
let document = await Context.async.OpenAsync(address);


To call a generic method, if it is impossible to deduce the types of the parameters that specify the arguments in the array:

Code: Select all
let rows = ApiExtensions.QuerySelectorAll([IHtmlTableRowElement], document, rowSelector);


And most importantly, you need to manually delete the reference to the object from .Net

Code: Select all
Cells(NetObject.FlagDeleteObject);

Small
Code: Select all
Cells($$);
Serginio1
Newbie
 
Posts: 8
Joined: Fri Jan 27, 2017 8:26 am

Re: CEF, ES6, Angular 2, TypeScript use classes .Net Core

Postby Serginio1 » Thu Feb 09, 2017 3:58 am

added support for events in Angular 2 objects .Net Core https://habrahabr.ru/post/321452/

For example, consider a class of events.

Code: Select all
 public class EventTest
    {
        public event Action<string, int> EventWithTwoParameter;
        public event Action<string> EventWithOneParameter;
        public event Action EventWithOutParameter;
        public bool IsRun = false;
        public void Test()
        {
            EventWithTwoParameter?.Invoke(DateTime.Now.ToString(), 1);
            EventWithOneParameter?.Invoke(DateTime.UtcNow.ToString());
            EventWithOutParameter?.Invoke();
        }

        public async void Run()
        {
            if (IsRun) return;
            IsRun = true;

            while (IsRun)
            {
                await Task.Delay(2000);
                Test();
            }
        }
    }


In Angular 2 it looks like this

Code: Select all
export class TestEventComponent {
    EventsRes: EventRes[] = [];
    WOWE: WrapperObjectWithEvents;
   test: any;
    EventTest: any;
    constructor(private ngZone: NgZone) {
        let Net = NetObject.NetWrapper;
      //Get Type uses class.
        this.EventTest = Net.GetType("TestDllForCoreClr.EventTest", "TestDllForCoreClr");
    // Create object use Type
        this.test = new this.EventTest();

// Create event wrapper for object with events

        this.CreateWrapperForEvents(this.test);
    }



This code is automatically generated


Code: Select all
    // parameter value:anonymous Type
  // Properties param
    // arg1:System.String
    // arg2:System.Int32

    public EventWithTwoParameter(value: any) {
        this.AddComment("EventWithTwoParameter", NetObject.NetWrapper.toString(value));
        value(NetObject.FlagDeleteObject);
    }
    // параметр value:System.String
    public EventWithOneParameter(value: any) {
        this.AddComment("EventWithOneParameter ",NetObject.NetWrapper.toString(value));
    }

    public EventWithOutParameter(value: any) {
        this.AddComment("EventWithOutParameter", NetObject.NetWrapper.toString(value));
    }

    CreateWrapperForEvents(obj: any): void {
        let wrapForEvents = NetObject.GetWrapperForObjectWithEvents(obj, this.ngZone);

        wrapForEvents.AddEventHandler("EventWithTwoParameter", this.EventWithTwoParameter.bind(this));
        wrapForEvents.AddEventHandler("EventWithOneParameter", this.EventWithOneParameter.bind(this));
        wrapForEvents.AddEventHandler("EventWithOutParameter", this.EventWithOutParameter.bind(this));

        // set variable wrapForEvents variable components
        this.WOWE = wrapForEvents;
    }


And do not forget to clear references to the destruction of the .Net component

Code: Select all
ngOnDestroy() { 
                NetObject.DeleteNetObjets(this.EventTest, this.test);
                this.WOWE.Close();
                alert("Count ref in .Net ="+Net.CountItemsInStore());
    }


Unsubscribe from events in three ways.

Code: Select all
this.AddEventHandlerResult=  wrapForEvents.AddEventHandler("EventWithTwoParameter", this.EventWithTwoParameter.bind(this));



and
Code: Select all
this.AddEventHandlerResult.unsubscribe();



But the events of .Net will be processed on the side of the JS.

The following two options speak for itself.

Code: Select all
this.WOWE.RemoveEventHandler("EventWithTwoParameter");
this.WOWE.RemoveAllEventHandler();
Serginio1
Newbie
 
Posts: 8
Joined: Fri Jan 27, 2017 8:26 am

Re: CEF, ES6, Angular 2, TypeScript use classes .Net Core

Postby Serginio1 » Thu Feb 09, 2017 4:05 am

projects and source code can be downloaded here https://yadi.sk/d/0If7C5jZ3CEhmf

In the catalog cefsimple \ Release \ is an executable file with the libraries and the initial page Test.html. In the catalog cefsimple \ NetObjectToNative \
are all of the files to be exchanged between CEF and .Net Core. ManagedDomainLoader and ClrLoader responsible for loading .Net Core, receipt and transfer of methods for data exchange.

In CefV8HandlersForNet handler implemented for communication between JS and CEF. In NetConverter conversion of data between the Net and Cef.

In NetObjectToCEF are files that implement communication with the CEF. In TestDllForCoreClr are all used for the test examples.

The file TestTypeScript \ TestTypeScript \ app \ ts are files that implement Proxy. NetProxy.ts file implements the Proxy.

home.component.ts test AngleSharp. counter.component.ts different possible tests. TestSpeed.ts execution speed tests


If you want to compile cefsimple. So download away http://opensource.spotify.com/cefbuilds/index.html 32-bit Standard Distribution and replace directory tests \ cefsimple \ ss and h files and copy the directory NetObjectToNative.

To use VS 2015 to enter the root directory of the CEF cmake.exe -G «Visual Studio 14"

For VS 2017 cmake.exe -G «Visual Studio 2017 15".
Serginio1
Newbie
 
Posts: 8
Joined: Fri Jan 27, 2017 8:26 am

Re: CEF, ES6, Angular 2, TypeScript use classes .Net Core

Postby Serginio1 » Thu Feb 16, 2017 2:14 am

Added article to support EC6 in Russian

https://habrahabr.ru/post/321898/
CEF, ES6, Angular 2, WebPack 2 .Net Core desktop application without the server side

There the contents of all the necessary files
Serginio1
Newbie
 
Posts: 8
Joined: Fri Jan 27, 2017 8:26 am


Return to CefGlue Forum

Who is online

Users browsing this forum: No registered users and 19 guests