Create Browser with Webview

How-to Discussions
1

Hi, I’m looking for some basic hints and tips to re-create a basic browser with Webview.

I’d like to include a loading bar, but somehow I can not get it to disappear/reset after the page is loaded.

Thanks,

2

Hi!

If you share your code I can help out :slight_smile:

3

I’ve tried to play around with <PageLoaded> and <PageBeginLoading> but where ever I reset the progress bar it stays “fixed” and doesn’t show progress when a link is pressed.

Forward and back buttons are the next step :wink: What I basically want to do is first great an app that just runs our shop in webview and from there step-by-step start making more and more features native.

<App Background="#FF4718">
    <JavaScript>
            module.exports = {
                onPageLoaded : function(res) {
                    console.log("WebView arrived at "+ JSON.parse(res.json).url);
            }
        };
    </JavaScript>
    <Panel ux:Class="LoadingBar" Width="0%" Height="2" Color="#004cf0" Alignment="Left" />
    <DockPanel>
        <iOS.StatusBarConfig Style="Light" IsVisible="true" />
        <StatusBarBackground Dock="Top" />
        <LoadingBar Dock="Top" ux:Name="_loadingBar" />
        <NativeViewHost>
            <WebView Dock="Fill" Url="http://fusetools.com">
                <ProgressAnimation>
                    <Change _loadingBar.Width="100%" />
                </ProgressAnimation>
                <PageLoaded>
                    <Set _loadingBar.Width="10%" />
                    <EvaluateJS Handler="{onPageLoaded}">
                        var result = {
                          url : document.location.href
                          };
                        return result;
                    </EvaluateJS>  
                </PageLoaded>
            </WebView>
        </NativeViewHost>
    </DockPanel>
</App>

I’m new at all this, apologies for any stupid mistakes / questions up front.

Thx.

4

Vegard Strand Lende wrote:

Hi!

If you share your code I can help out :slight_smile:

Any news?