Android
Lägga till en FuseView i ett Android-projekt

Introduktion

hikr-app, bara en annan android.view.View

förutsättningar

• du bör ha säkring installerad ( https://www.fusetools.com/downloads)
• du borde ha gjort introduktionshandledningen
• i terminal: fuse install android
• i terminal: uno install Fuse.Views

Steg 1

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

Steg 2 : Lägg till Fuse.Views till Fuse.Views

Hitta hikr.unoproj filen i projektets rotmapp och lägg till "Fuse.Views" "Packages" .

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

Steg 3 : Gör HikrApp komponenten för att hålla hela appen

3.1 Skapa en ny fil som heter HikrApp.ux och klistra in innehållet i 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 I HikrApp.ux

• ersätt taggarna <App> med <Page>
• lägg till ux:Class="HikrApp" till öppningen <Page>
• ta bort <ClientPanel> , vi behöver inte oroa dig mer för statusfältet eller de nedre nav-knapparna

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 Använd den nyligen skapade HikrApp komponenten i MainView.ux

Byt ut innehållet i filen MainView.ux med:

<App>
    <HikrApp/>
</App>

Vår app är tillbaka till sitt normala beteende, men vi har nu extraherat den till en separat komponent som heter HikrApp

Steg 4 Inuti MainView.ux ersätt <App> -taggarna med <ExportedViews> och lägg till ux:Template="HikrAppView" till <HikrApp />

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

Kom ihåg mallen HikrAppView , eftersom vi behöver den för att få en referens till vår vy från Java.

Obs . Från säkringsdokumenten:

ExportedViews kommer att uppträda som App när man gör normal fuse preview och gör om att uno build

Inte sant. Det här felet får du när du förhandsgranskar från Fuse Studio:

Fel: Det gick inte att hitta en app-tagg i någon av de inkluderade UX-filerna. Har du glömt att ta med UX-filen som innehåller app-taggen?

Steg 5 Wrap SplashPage.ux <DockPanel> i en <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>

Steg 6 Exportera säkringsprojektet som ett aar-bibliotek

• i terminal, i rotprojektmapp: uno clean
• i terminal, i rotprojektmapp: uno build -t=android -DLIBRARY

Steg 7 Förbered ditt Android-projekt

• kopiera aar från .../rootHikeProject/build/Android/Debug/app/build/outputs/aar/app-debug.aar till .../androidRootProject/app/libs
• lägg till flatDir { dirs 'libs' } till root build.gradle filen

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

buildscript { ... }

...

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

...

• lägg till compile(name: 'app-debug', ext: 'aar') till beroenden i 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'
}

• lägg till följande egenskaper till aktiviteten i AndroidManifest.xml

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

Din AndroidManifest.xml ser så här ut:

<?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>

Steg 8 : Visa Fuse.View HikrAppView i din Activity

• Observera att din Activity måste ärva FuseViewsActivity

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>

Notera
När du trycker på bakåtknappen på Android kraschar appen. Du kan följa problemet på säkringsforumet .

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

Och det slutliga resultatet är något liknande. Du kan också hitta ett kort klipp på github .