Implementing WebViews within non-Native apps

How-to Discussions
1

Hi there, I love the control over the look of my app afforded to me by not using the Native theme, but I need to use a WebView at one point within my app, is it at all possible to implement a WebView while having the rest of the app not use the Native theme? Thanks!

2

Hi!

This is totally doable :slight_smile: We just havent gotten around to expose WebView properly in other themes than Native. Other usesr has also requested this feature so I am bumping priority.

In the meantime there is an UX hack you can use:

<App Theme="Native">
    <!-- GraphicsView lets us use OpenGL in Native theme -->
    <GraphicsView>
        <!-- Setting basic theme inside GraphicsView -->
        <Fuse.BasicTheme.BasicStyle />

        <DockPanel>
            <StatusBarBackground Dock="Top" />
            <Panel Dock="Fill">

                <WebView Url="http://www.fusetools.com">
                    <!-- NativeViewHost lets us host Native controls in GraphicsView -->
                    <NativeViewHost>
                        <Android.WebView  />
                        <iOS.WebView />
                    </NativeViewHost>

                </WebView>

            </Panel>
            <BottomBarBackground Dock="Bottom" />
        </DockPanel>
    </GraphicsView>
</App>

Will update this thread when the actual feature is in :slight_smile:

3

That’s great to hear! Now I’m just wondering; is it possible to load local HTML files with JS embedded in them within a Webview? If so, is there any way I can pass that page data from the app? My app needs the ability to make changes to a user’s Google Calendar and the JS API is browser-based so I can’t just load it in Fuse as a regular module, which is why I was thinking it might be possible to have a local HTML file packaged within the app assets which contains the API and performs all related functions and is just passed the data it needs to change by the app when it’s loaded.

EDIT: It seems the example you gave doesn’t work sadly. It throws this error:

D:\My Documents\PC Accessories\Programming\Javascript\Fuse Projects\NativeTesting.cache\GeneratedCode\MainView.g.uno(19,25): E3111: Fuse.Android does not contain type or namespace 'WebView'. Could you be missing a package reference?

I’ve added references to Android, Experimental.iOS and ObjC to the .unoproj file just in case.

4

You can load HTML from a file with <WebView File="some.html" />

As of now you can only go to Url, load files, go back/forward. More features like JS hooks are in the works. More news will follow :slight_smile:

Try adding a package ref to Fuse.Android.Views

5

Thanks!