+FUQBDL$PNQPTF TakuSemba CyberAgent.Inc

@takusemba https://github.com/TakuSemba

+FUQBDL$PNQPTF

+FUQBDL$PNQPTF https://www.youtube.com/watch?v=VsStyq4Lzxo

@Composable fun Greeting(name: String) { Text ("Hello $name!") }

@Composable fun Greeting(name: String) { Text ("Hello $name!") }

No content

No content

What’s Composable

What’s Composable ɾA new set of Jetpack UI widgets

What’s Composable ɾA new set of Jetpack UI widgets ɾA kotlin compiler plugin

What’s Composable ɾA new set of Jetpack UI widgets ɾA kotlin compiler plugin ɾFully compatible with your existing app/code

What’s Composable ɾA new set of Jetpack UI widgets ɾA kotlin compiler plugin ɾFully compatible with your existing app/code ɾExperimental

@Composable

Text(“Hello world!”)

@Composable fun Greeting(name: String) { Text("Hello $name!") }

@Composable fun Greeting(name: String) { Text("Hello $name!") } class ComposeSampleActivity : Activity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) } }

@Composable fun Greeting(name: String) { Text("Hello $name!") } class ComposeSampleActivity : Activity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { CraneWrapper { Greeting("takusemba") } } } }

@Composable fun Greeting(name: String) { Text("Hello $name!") } class ComposeSampleActivity : Activity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { CraneWrapper { Greeting("takusemba") } } } }

@Composable fun Greeting(name: String) { Text("Hello $name!") } class ComposeSampleActivity : Activity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { CraneWrapper { Greeting("takusemba") } } } }

@Composable fun Greeting(name: String) { Text("Hello $name!") } class ComposeSampleActivity : Activity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { CraneWrapper { Greeting("takusemba") } } } }

class ComposeSampleActivity : Activity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { CraneWrapper { MaterialTheme { Greeting("takusemba") } } } } } @Composable fun Greeting(name: String) { Text("Hello $name!") }

@Composable fun Greeting(name: String) { Text(text = "Hello $name!", style = +themeTextStyle { h5 }) } class ComposeSampleActivity : Activity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { CraneWrapper { MaterialTheme { Greeting("takusemba") } } } } }

@Composable fun ScrollingList( data: List, body: @Composable()(T) -> Unit ) { // ... body(item) // ... }

@Composable fun ScrollingList( data: List, body: @Composable()(T) -> Unit ) { // ... body(item) // ... } @Composable fun NewsFeed(stories: List) { ScrollingList(stories) { story -> StoryWidget(story) } }

@Composable fun ScrollingList( data: List, body: @Composable()(T) -> Unit ) { // ... body(item) // ... } @Composable fun MenuList(items: List) { ScrollingList(items) { item -> when (item) { is FoodItem -> FoodWidget(item) is DrinkItem -> DrinkWidget(item) } } }

@Model

@Composable fun Greeting(name: String) { Text("Hello $name!") }

@Composable fun Greeting(name: String) { val count = +state { 0 } Column { Button(text = "greet", onClick = { count.value++ }) Text(text = "$name greeted ${count.value} times") } }

@Composable fun Greeting(name: String) { val count = +state { 0 } Column { Button(text = "greet", onClick = { count.value++ }) Text(text = "$name greeted ${count.value} times") } }

@Composable fun Greeting(name: String) { val count = +state { 0 } Column { Button(text = "greet", onClick = { count.value++ }) Text(text = "$name greeted ${count.value} times") } }

@Model class GreetCounter(var count: Int) { fun add() { count++ } fun substract() { count-- } } @Composable fun Greeting(name: String) { val count = +state { 0 } Column { Button(text = "greet", onClick = { count.value++ }) Text(text = "$name greeted ${count.value} times") } }

@Model class GreetCounter(var count: Int) { fun add() { count++ } fun substract() { count-- } } @Composable fun Greeting(name: String) { val counter = +memo { GreetCounter(0) } Column { Button(text = "greet", onClick = { count.add() }) Text(text = "$name greeted ${count.count} times") } }

@Composable fun Greeting(name: String) { val counter = +memo { GreetCounter(0) } Column { Button(text = "greet", onClick = { count.add() }) Text(text = "$name greeted ${count.count} times") } } @Model class GreetCounter(var count: Int) { fun add() { count++ } fun substract() { count-- } }

@Model class LoginState(var username: String, var password: String) { val valid: Boolean get() = username.isNotEmpty() && password.isNotEmpty() }

@Model class LoginState(var username: String, var password: String) { val valid: Boolean get() = username.isNotEmpty() && password.isNotEmpty() } @Composable fun LoginScreen(onClick: () -> Unit) { val model = +memo { LoginState() } EditText( text=model.username, onTextChange={ text -> model.username = text } ) EditText( text=model.password, onTextChange={ text -> model.password = text } ) Button(text="Login", enabled=model.valid, onClick={ onClick() }) }

@Model class LoginState(var username: String, var password: String) { val valid: Boolean get() = username.isNotEmpty() && password.isNotEmpty() } @Composable fun LoginScreen(onClick: () -> Unit) { val model = +memo { LoginState() } EditText( text=model.username, onTextChange={ text -> model.username = text } ) EditText( text=model.password, onTextChange={ text -> model.password = text } ) Button(text="Login", enabled=model.valid, onClick={ onClick() }) }

@GenerateView

@Composable fun Greeting(name: String) { Text ("Hello $name!") }

@Composable
 @GenerateView fun Greeting(name: String) { Text ("Hello $name!") }

@Composable
 @GenerateView fun Greeting(name: String) { Text ("Hello $name!") } // In your existing xml

@Composable
 @GenerateView fun Greeting(name: String) { Text ("Hello $name!") } // In your existing xml // find view by Id val greeting = findViewById(R.id.greeting)

@Discussion

No content

+FUQBDL$PNQPTF https://github.com/takusemba https://twitter.com/takusemba