Android
Ajout d'un FuseView à un projet Android

Introduction

hikr app, juste un autre android.view.View

Conditions préalables

• vous devriez avoir un fusible installé ( https://www.fusetools.com/downloads)
• vous devriez avoir fait le tutoriel d'introduction
• dans le terminal: fuse install android
• dans le terminal: uno install Fuse.Views

Étape 1

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

Étape 2 : Ajouter une référence de package à Fuse.Views

Recherchez le fichier hikr.unoproj dans le dossier racine du projet et ajoutez "Fuse.Views" au tableau "Packages" .

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

Étape 3 : Créer le composant HikrApp pour conserver l'application entière

3.1 Dans le dossier racine du projet, créez un nouveau fichier appelé HikrApp.ux et collez le contenu de 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 Dans HikrApp.ux

• remplacer les balises <App> par <Page>
• add ux:Class="HikrApp" à l'ouverture <Page>
• remove <ClientPanel> , nous n'avons plus à nous soucier de la barre d'état ou des boutons de navigation du bas

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 Utilisez le nouveau HikrApp composant à l' intérieur MainView.ux

Remplacez le contenu du fichier MainView.ux par:

<App>
    <HikrApp/>
</App>

Notre application est de retour à son comportement normal, mais nous l'avons maintenant extrait d'un composant distinct appelé HikrApp

Étape 4 Dans MainView.ux remplacez les balises <App> par <ExportedViews> et ajoutez ux:Template="HikrAppView" à <HikrApp />

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

Rappelez-vous le modèle HikrAppView , car nous en aurons besoin pour obtenir une référence à notre vue depuis Java.

Note À partir des documents de fusibles:

ExportedViews se comportera comme une App lors de la fuse preview normale des fuse preview et lors de la uno build

Pas vrai. Vous obtiendrez cette erreur lors de la prévisualisation depuis Fuse Studio:

Erreur: Impossible de trouver une balise App dans l'un des fichiers UX inclus. Avez-vous oublié d'inclure le fichier UX contenant la balise d'application?

Étape 5 SplashPage.ux le <DockPanel> dans un <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>

Étape 6 Exportez le projet de fusible en tant que bibliothèque aar

• dans le terminal, dans le dossier du projet racine: uno clean
• dans le terminal, dans le dossier du projet racine: uno build -t=android -DLIBRARY

Étape 7 Préparez votre projet Android

• copier l'arar de .../rootHikeProject/build/Android/Debug/app/build/outputs/aar/app-debug.aar vers .../androidRootProject/app/libs
• Ajouter flatDir { dirs 'libs' } au fichier racine build.gradle

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

buildscript { ... }

...

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

...

• ajouter compile(name: 'app-debug', ext: 'aar') aux dépendances dans 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'
}

• Ajoutez les propriétés suivantes à l'activité dans AndroidManifest.xml

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

Votre AndroidManifest.xml ressemblera à ceci:

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

Étape 8 : Afficher le Fuse.View HikrAppView dans votre Activity

• Notez que votre Activity doit hériter de 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>

Remarque
Lorsque vous appuyez sur le bouton de retour, sur Android, l'application se bloque. Vous pouvez suivre le problème sur le forum des fusibles .

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

Et le résultat final est quelque chose comme ça. Vous pouvez également trouver un court clip sur github .