Skip to content

Latest commit

 

History

History
136 lines (85 loc) · 4.68 KB

Overview.md

File metadata and controls

136 lines (85 loc) · 4.68 KB

Component Overview

UserControl

Neutronium exposes two WPF UserControls: HTMLViewControl and HTMLWindow both are embedding a WebBrowser and share main implementation.

Common API:

  • IsDebug property allows use of debug tools, use false in production mode.

  • HTMLEngine: The name of the WebBrowser to be used in this view. If only one WebBrowser is registered (which should be the case normally), you don´t need to set-up this value. See HTMLEngineFactory section for more details. Current Options: Awesomium, Cef.Glue, ChromiumFx

  • JavascriptUIEngine: The name of the javascript framework to be used in this view. If only one JavascriptUIEngine is registered, you don´t need to set-up this value. See HTMLEngineFactory section for more details. Current Options: VueInjector, KnockoutInjector

  • IDisposable You should call IDisposable Dispose method on both component when closing the window to prevent leaks due to event listening.

HTMLViewControl

Use HTMLViewControl if you have one HTML view and a DataContext.

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:wpf="clr-namespace:Neutronium.WPF;assembly=Neutronium.WPF"
        x:Class="Example.Awesomium.Vue.UI.MainWindow"
        Height="350" Width="525">
    <Grid>
       <wpf:HTMLViewControl  HTMLEngine="Awesomium"  IsDebug="True" RelativeSource="src\index.html"/>
    </Grid>
</Window>
  • RelativeSource:

Reference the location of the HTML file (properties should be Content, Copy Always )

  • DataContext:

As any WPF component, DataContext is used to create the binding with the ViewModel. Note that DataContext is not set, the HTML will not be displayed.

HTMLWindow

Use HTMLWindow if you have various HTML files and DataContext. This control implements navigation APIs;

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:wpf="clr-namespace:Neutronium.WPF;assembly=Neutronium.WPF"
        x:Class="Example.ChromiumFx.Vue.Navigation.MainWindow"
        Title="HTML5 vs WPF" Height="350" Width="525">
    <Grid>
        <wpf:HTMLWindow  UseINavigable="True" IsDebug="True" x:Name="HTMLWindow"/>

    </Grid>
</Window>
  • UseINavigable If true, Neutronium calls set INavigable property Navigation with corresponding INavigationSolver

See Navigation API to complete description of how to use this component.

Important Note

When using templates HTMLEngineFactory API are done by boilerplate file. So in this case, you can pull next section.

HTMLEngineFactory

At its core Neutronium is abstracted from javascript library and WebBrowser implementation: this is why you can plug Knockout or Vue engine or use different WebBrowsers.

You need to register these abstractions in the static HTMLEngineFactory.Engine in order to be able to use them.

Ex:

 var engine = HTMLEngineFactory.Engine;
 engine.RegisterHTMLEngine(new ChromiumFXWPFWebWindowFactory());
 engine.RegisterJavaScriptFramework(new VueSessionInjector());

Available HTMLEngines:

ChromiumFXWPFWebWindowFactory, CefGlueWPFWebWindowFactory, AwesomiumWPFWebWindowFactory

Note that Recomended engine is ChromiumFXWPFWebWindowFactory. AwesomiumWPFWebWindowFactory is present for legacy reason and CefGlueWPFWebWindowFactory is used for test purposes.

Available JavaScriptFrameworks:

VueSessionInjector, KnockoutFrameworkManager

You need to dispose the engine when closing the session:

HTMLEngineFactory.Engine.Dispose();

Built-in WPF Application

Each WebBrowser implementation makes available an abstract implementation of an WPF application that register the corresponding WebBrowser and dispose the HTMLEngineFactory when application ended. The only thinks you need is to register the javascript engine.

Ex: using ChromiumFx and corresponding ChromiumFxWebBrowserApp :

public class WebBrowserApp : ChromiumFxWebBrowserApp 
{
    protected override IJavascriptFrameworkManager GetJavascriptUIFrameworkManager() 
    {
        return new VueSessionInjector();
    }
}

See Next:

Vue Binding

knockout Binding

How to set up a project - Debug Tools - Architecture - F.A.Q