Skip to content

Commit

Permalink
Tutorial app
Browse files Browse the repository at this point in the history
Summary:
A very basic app with a scrolling list backed by a static data source. It also covers two bases that we hadn't before: Sections and Kotlin; the latter being the better choice for a modern Android tutorial anyway.

Missing right now: BUCK support (likely not going to come anytime soon due to the kapt limitations), the actual Flipper plugin integration (that's up next).

Reviewed By: jknoxville

Differential Revision: D15166195

fbshipit-source-id: 3cfaa1d243548279cabc4f244c13363f1bcaa36c
passy authored and facebook-github-bot committed May 1, 2019
1 parent fca7bc9 commit 3339944
Showing 33 changed files with 708 additions and 1 deletion.
62 changes: 62 additions & 0 deletions android/tutorial/build.gradle
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the LICENSE file
* in the root directory of this source tree.
*/

apply plugin: 'com.android.application'
apply plugin: 'kotlin-android'
apply plugin: 'kotlin-android-extensions'
apply plugin: 'kotlin-kapt'

android {
compileSdkVersion 28


defaultConfig {
applicationId "com.facebook.flipper.sample.tutorial"
minSdkVersion 23
targetSdkVersion 28
versionCode 1
versionName "1.0"
}

compileOptions {
targetCompatibility = JavaVersion.VERSION_1_8
sourceCompatibility = JavaVersion.VERSION_1_8
}

buildTypes {
release {
minifyEnabled false
proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
}
}

}

dependencies {
implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$KOTLIN_VERSION"
implementation 'androidx.appcompat:appcompat:1.0.2'
implementation 'androidx.core:core-ktx:1.0.1'

// Flipper
// For simplicity, we use Flipper for both debug and release builds here.
// Check out the "sample" app to see how to separate your build flavors.
implementation project(':android')
implementation deps.soloader

// Litho
implementation deps.lithoCore
implementation deps.lithoWidget
implementation deps.lithoAnnotations
implementation deps.lithoSectionsAnnotations
implementation deps.lithoFresco
implementation deps.lithoSectionsCore
implementation deps.lithoSectionsDebug
implementation deps.lithoSectionsWidget
implementation deps.fresco
kapt deps.lithoProcessor
kapt deps.lithoSectionsProcessor
}
21 changes: 21 additions & 0 deletions android/tutorial/proguard-rules.pro
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
# Add project specific ProGuard rules here.
# You can control the set of applied configuration files using the
# proguardFiles setting in build.gradle.
#
# For more details, see
# http://developer.android.com/guide/developing/tools/proguard.html

# If your project uses WebView with JS, uncomment the following
# and specify the fully qualified class name to the JavaScript interface
# class:
#-keepclassmembers class fqcn.of.javascript.interface.for.webview {
# public *;
#}

# Uncomment this to preserve the line number information for
# debugging stack traces.
#-keepattributes SourceFile,LineNumberTable

# If you keep the line number information, uncomment this to
# hide the original source file name.
#-renamesourcefileattribute SourceFile
31 changes: 31 additions & 0 deletions android/tutorial/src/main/AndroidManifest.xml
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
<?xml version="1.0" encoding="utf-8"?><!--
~ Copyright (c) Facebook, Inc. and its affiliates.
~
~ This source code is licensed under the MIT license found in the LICENSE file
~ in the root directory of this source tree.
-->

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.facebook.flipper.sample.tutorial">

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />

<application
android:name=".TutorialApplication"
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<activity android:name=".MainActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />

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

</manifest>
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the LICENSE file
* in the root directory of this source tree.
*/

package com.facebook.flipper.sample.tutorial

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import com.facebook.flipper.sample.tutorial.ui.RootComponent
import com.facebook.litho.LithoView
import com.facebook.litho.sections.SectionContext

class MainActivity : AppCompatActivity() {

private val sectionContext: SectionContext by lazy { SectionContext(this) }

override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)

setContentView(
LithoView.create(this, RootComponent.create(sectionContext).build())
)
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the LICENSE file
* in the root directory of this source tree.
*/

package com.facebook.flipper.sample.tutorial

import android.app.Application
import com.facebook.drawee.backends.pipeline.Fresco
import com.facebook.flipper.android.AndroidFlipperClient
import com.facebook.flipper.core.FlipperClient
import com.facebook.flipper.plugins.inspector.DescriptorMapping
import com.facebook.flipper.plugins.inspector.InspectorFlipperPlugin
import com.facebook.flipper.plugins.litho.LithoFlipperDescriptors
import com.facebook.soloader.SoLoader

class TutorialApplication : Application() {
override fun onCreate() {
super.onCreate()

SoLoader.init(this, false)
Fresco.initialize(this)
val flipperClient = AndroidFlipperClient.getInstance(this)
val descriptorMapping = DescriptorMapping.withDefaults()
LithoFlipperDescriptors.addWithSections(descriptorMapping)

flipperClient.addPlugin(InspectorFlipperPlugin(this, descriptorMapping))
flipperClient.start()
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the LICENSE file
* in the root directory of this source tree.
*/

package com.facebook.flipper.sample.tutorial.ui

import com.facebook.litho.Column
import com.facebook.litho.Component
import com.facebook.litho.ComponentContext
import com.facebook.litho.annotations.LayoutSpec
import com.facebook.litho.annotations.OnCreateLayout
import com.facebook.litho.annotations.Prop
import com.facebook.litho.widget.Card

import com.facebook.yoga.YogaEdge.HORIZONTAL
import com.facebook.yoga.YogaEdge.VERTICAL

@LayoutSpec
object FeedItemCardSpec {

@OnCreateLayout
fun onCreateLayout(
c: ComponentContext,
@Prop mammal: MarineMammal): Component =
Column.create(c)
.paddingDip(VERTICAL, 8f)
.paddingDip(HORIZONTAL, 16f)
.child(
Card.create(c)
.content(
MarineMammelComponent.create(c)
.mammal(mammal)))
.build()
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the LICENSE file
* in the root directory of this source tree.
*/

package com.facebook.flipper.sample.tutorial.ui

import com.facebook.litho.annotations.FromEvent
import com.facebook.litho.annotations.OnEvent
import com.facebook.litho.annotations.Prop
import com.facebook.litho.sections.Children
import com.facebook.litho.sections.SectionContext
import com.facebook.litho.sections.annotations.GroupSectionSpec
import com.facebook.litho.sections.annotations.OnCreateChildren
import com.facebook.litho.sections.common.DataDiffSection
import com.facebook.litho.sections.common.RenderEvent
import com.facebook.litho.widget.ComponentRenderInfo
import com.facebook.litho.widget.RenderInfo

@GroupSectionSpec
object FeedSectionSpec {
@OnCreateChildren
fun onCreateChildren(c: SectionContext, @Prop data: List<MarineMammal>): Children =
Children.create()
.child(DataDiffSection.create<MarineMammal>(c)
.data(data)
.renderEventHandler(FeedSection.render(c)))
.build()

@OnEvent(RenderEvent::class)
fun render(
c: SectionContext,
@FromEvent model: MarineMammal): RenderInfo =
ComponentRenderInfo.create()
.component(FeedItemCard.create(c).mammal(model).build())
.build()
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the LICENSE file
* in the root directory of this source tree.
*/

package com.facebook.flipper.sample.tutorial.ui

import android.net.Uri

data class MarineMammal(val title: String, val picture_url: Uri)
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the LICENSE file
* in the root directory of this source tree.
*/

package com.facebook.flipper.sample.tutorial.ui

import androidx.core.net.toUri

object MarineMammals {
val list = listOf(
MarineMammal("Polar Bear", "https://upload.wikimedia.org/wikipedia/commons/thumb/8/84/Ursus_maritimus_4_1996-08-04.jpg/190px-Ursus_maritimus_4_1996-08-04.jpg".toUri()),
MarineMammal("Sea Otter", "https://upload.wikimedia.org/wikipedia/commons/thumb/1/15/Sea_otter_cropped.jpg/220px-Sea_otter_cropped.jpg".toUri()),
MarineMammal("West Indian Manatee", "https://upload.wikimedia.org/wikipedia/commons/thumb/6/6f/FL_fig04.jpg/230px-FL_fig04.jpg".toUri()),
MarineMammal("Bottlenose Dolphin", "https://upload.wikimedia.org/wikipedia/commons/thumb/1/10/Tursiops_truncatus_01.jpg/220px-Tursiops_truncatus_01.jpg".toUri())
)
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the LICENSE file
* in the root directory of this source tree.
*/

package com.facebook.flipper.sample.tutorial.ui

import android.graphics.Typeface
import com.facebook.litho.Column
import com.facebook.litho.Component
import com.facebook.litho.ComponentContext
import com.facebook.litho.annotations.LayoutSpec
import com.facebook.litho.annotations.OnCreateLayout
import com.facebook.litho.annotations.Prop
import com.facebook.litho.widget.Text
import com.facebook.yoga.YogaEdge.BOTTOM
import com.facebook.yoga.YogaEdge.LEFT
import com.facebook.yoga.YogaEdge.HORIZONTAL
import com.facebook.yoga.YogaPositionType.ABSOLUTE

@LayoutSpec
object MarineMammelComponentSpec {
@OnCreateLayout
fun onCreateLayout(
c: ComponentContext,
@Prop mammal: MarineMammal
): Component =
Column.create(c)
.child(SingleImageComponent.create(c)
.image(mammal.picture_url)
.build()
)
.child(
Text.create(c)
.text(mammal.title)
.textStyle(Typeface.BOLD)
.textSizeDip(24f)
.backgroundColor(0xDDFFFFFF.toInt())
.positionType(ABSOLUTE)
.positionDip(BOTTOM, 4f)
.positionDip(LEFT, 4f)
.paddingDip(HORIZONTAL, 6f))
.build()

}
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
/*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the LICENSE file
* in the root directory of this source tree.
*/

package com.facebook.flipper.sample.tutorial.ui

import com.facebook.litho.Component
import com.facebook.litho.ComponentContext
import com.facebook.litho.annotations.LayoutSpec
import com.facebook.litho.annotations.OnCreateLayout
import com.facebook.litho.sections.SectionContext
import com.facebook.litho.sections.widget.RecyclerCollectionComponent
import com.facebook.yoga.YogaEdge

@LayoutSpec
object RootComponentSpec {
@OnCreateLayout
fun onCreateLayout(c: ComponentContext): Component =
RecyclerCollectionComponent.create(c)
.disablePTR(true)
.section(FeedSection.create(SectionContext(c)).data(MarineMammals.list).build())
.paddingDip(YogaEdge.TOP, 8f)
.build()
}
Loading
Oops, something went wrong.

0 comments on commit 3339944

Please sign in to comment.