Android
Een FuseView toevoegen aan een Android-project

Invoering

hikr-app, gewoon een android.view.View

voorwaarden

• u zou fuse moeten hebben geïnstalleerd ( https://www.fusetools.com/downloads)
• je had de introductiehandleiding moeten doen
• in terminal: fuse install android
• in terminal: verwijder uno install Fuse.Views

Stap 1

git clone https://github.com/fusetools/hikr

Stap 2 : Voeg pakketreferentie toe aan Fuse.Views

Zoek het hikr.unoproj bestand in de hoofdmap van het project en voeg "Fuse.Views" aan de array "Packages" .

{
  "RootNamespace":"",
  "Packages": [
    "Fuse",
    "FuseJS",
    "Fuse.Views"
  ],
  "Includes": [
    "*",
    "Modules/*.js:Bundle"
  ]
}

Stap 3 : Maak een HikrApp component om de hele app te houden

3.1 Maak in de hoofdmap van het project een nieuw bestand met de naam HikrApp.ux en plak de inhoud van MainView.ux .

HikrApp.ux

<App Background="#022328">
    <iOS.StatusBarConfig Style="Light" />
    <Android.StatusBarConfig Color="#022328" />

    <Router ux:Name="router" />

    <ClientPanel>
        <Navigator DefaultPath="splash">
            <SplashPage ux:Template="splash" router="router" />
            <HomePage ux:Template="home" router="router" />
            <EditHikePage ux:Template="editHike" router="router" />
        </Navigator>
    </ClientPanel>
</App>

3.2 In HikrApp.ux

• vervang de <App> -tags door <Page>
• voeg ux:Class="HikrApp" aan de opening <Page>
• verwijder <ClientPanel> , we hoeven ons geen zorgen meer te maken over de statusbalk of de onderste navigatieknoppen

HikrApp.ux

<Page ux:Class="HikrApp" Background="#022328">
    <iOS.StatusBarConfig Style="Light" />
    <Android.StatusBarConfig Color="#022328" />

    <Router ux:Name="router" />

    <Navigator DefaultPath="splash">
        <SplashPage ux:Template="splash" router="router" />
        <HomePage ux:Template="home" router="router" />
        <EditHikePage ux:Template="editHike" router="router" />
    </Navigator>
</Page>

3.3 Gebruik de nieuw gemaakte HikrApp component in MainView.ux

Vervang de inhoud van het MainView.ux bestand door:

<App>
    <HikrApp/>
</App>

Onze app keert terug naar zijn normale gedrag, maar we hebben hem nu uitgepakt naar een afzonderlijke component genaamd HikrApp

Stap 4 Binnen MainView.ux vervangt u de <App> -tags door <ExportedViews> en voegt ux:Template="HikrAppView" aan <HikrApp />

<ExportedViews>
    <HikrApp ux:Template="HikrAppView" />
</ExportedViews>

Onthoud de sjabloon HikrAppView , omdat we deze nodig hebben om een verwijzing naar onze weergave van Java te krijgen.

Opmerking Uit de lontdocumenten:

ExportedViews fuse preview gedragen zich als een App bij het uitvoeren van een normaal fuse preview en het opnieuw uno build

Niet waar. U krijgt deze foutmelding wanneer u een voorbeeld van Fuse Studio bekijkt:

Fout: kon geen app-tag vinden in de meegeleverde UX-bestanden. Bent u vergeten het UX-bestand met de app-tag op te nemen?

Stap 5 Wikkel het <DockPanel> SplashPage.ux in een <GraphicsView>

<Page ux:Class="SplashPage">
    <Router ux:Dependency="router" />

    <JavaScript File="SplashPage.js" />

    <GraphicsView>
        <DockPanel ClipToBounds="true">
            <Video Layer="Background" File="../Assets/nature.mp4" IsLooping="true" AutoPlay="true" StretchMode="UniformToFill" Opacity="0.5">
            <Blur Radius="4.75" />
        </Video>

            <hikr.Text Dock="Bottom" Margin="10" Opacity=".5" TextAlignment="Center" FontSize="12">original video by Graham Uhelski</hikr.Text>

            <Grid RowCount="2">
                <StackPanel Alignment="VerticalCenter">
                    <hikr.Text Alignment="HorizontalCenter" FontSize="70">hikr</hikr.Text>
                    <hikr.Text Alignment="HorizontalCenter" Opacity=".5">get out there</hikr.Text>
                </StackPanel>

                <hikr.Button Text="Get Started" FontSize="18" Margin="50,0" Alignment="VerticalCenter" Clicked="{goToHomePage}" />
            </Grid>
        </DockPanel>
    </GraphicsView>
</Page>

Stap 6 Exporteer het fuse-project als een aar-bibliotheek

• in terminal, in root projectmap: uno clean
• in terminal, in root projectmap: uno build -t=android -DLIBRARY

Stap 7 Bereid uw Android-project voor

• kopieer de aar van .../rootHikeProject/build/Android/Debug/app/build/outputs/aar/app-debug.aar naar .../androidRootProject/app/libs
• voeg flatDir { dirs 'libs' } aan het root build.gradle bestand

// Top-level build file where you can add configuration options common to all sub-projects/modules.

buildscript { ... }

...

allprojects {
    repositories {
        jcenter()
        flatDir {
            dirs 'libs'
        }
    }
}

...

• compile(name: 'app-debug', ext: 'aar') aan afhankelijkheden in app/build.gradle

apply plugin: 'com.android.application'

android {
    compileSdkVersion 25
    buildToolsVersion "25.0.2"
    defaultConfig {
        applicationId "com.shiftstudio.fuseviewtest"
        minSdkVersion 16
        targetSdkVersion 25
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    compile(name: 'app-debug', ext: 'aar')
    compile fileTree(dir: 'libs', include: ['*.jar'])
    androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
        exclude group: 'com.android.support', module: 'support-annotations'
    })
    compile 'com.android.support:appcompat-v7:25.3.1'
    testCompile 'junit:junit:4.12'
}

• voeg de volgende eigenschappen toe aan de activiteit in AndroidManifest.xml

android:launchMode="singleTask"
android:taskAffinity=""
android:configChanges="orientation|keyboardHidden|screenSize|smallestScreenSize"

Uw AndroidManifest.xml ziet er zo uit:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.shiftstudio.fuseviewtest">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity
            android:name=".MainActivity"
            android:launchMode="singleTask"
            android:taskAffinity=""
            android:configChanges="orientation|keyboardHidden|screenSize|smallestScreenSize">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

Stap 8 : Toon de Fuse.View HikrAppView in uw Activity

• merk op dat uw Activity FuseViewsActivity moet erven

public class MainActivity extends FuseViewsActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        final ViewHandle fuseHandle = ExportedViews.instantiate("HikrAppView");

        final FrameLayout root = (FrameLayout) findViewById(R.id.fuse_root);
        final View fuseApp = fuseHandle.getView();
        root.addView(fuseApp);
    }
}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.shiftstudio.fuseviewtest.MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_gravity="center_horizontal"
        android:textSize="24sp"
        android:textStyle="bold"
        android:layout_height="wrap_content"
        android:text="Hello World, from Kotlin" />

    <FrameLayout
        android:id="@+id/fuse_root"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:layout_width="wrap_content"
            android:text="THIS IS FROM NATIVE.\nBEHIND FUSE VIEW"
            android:layout_gravity="center"
            android:textStyle="bold"
            android:textSize="30sp"
            android:background="@color/colorAccent"
            android:textAlignment="center"
            android:layout_height="wrap_content" />

    </FrameLayout>

</LinearLayout>

Notitie
Wanneer u op de Android-knop drukt, crasht de app. U kunt het probleem volgen op het lontforum .

A/libc: Fatal signal 11 (SIGSEGV), code 1, fault addr 0xdeadcab1 in tid 18026 (io.fuseviewtest)
                                                                    
        [ 05-25 11:52:33.658 16567:16567 W/ ]
                                                                
        debuggerd: handling request: pid=18026 uid=10236 gid=10236 tid=18026

En het eindresultaat is zoiets als dit. Je kunt ook een kort fragment vinden op github .