TDDC73 Lecture 3 1 Agenda Questions Complex components - PowerPoint PPT Presentation

TDDC73 Lecture 3 � 1

Agenda • Questions • Complex components • Network • REST and/or GraphQL • Screen navigation � 2

Organisation of code • Biggest challenge of UI development (Ok one of ) • Maintaining the correct and same state between the UI and the system/model/backend • Separation of concerns • Architecture Presentation Patterns • MVC • MVP • MVVM � 3

� 4 Model-View-Presenter MVP

Demo • Android Adapter � 5

Network • REST � 6

DEMO old school � 7

Network • GraphQL • Putting REST to rest � 8

GraphQL • A query language for back-ends • Front-end driven • You decide what you want • Subway vs Pressbyrån • Singel endpoint • Typed � 9

Navigation � 10

Flutter • Routes • Pages/Screens • Navigation • To move between Routes • Push and Pop • Hero • Animation between Routes � 11

Routes class SecondRoute extends StatelessWidget { class FirstRoute extends StatelessWidget { @override @override Widget build(BuildContext context) { Widget build(BuildContext context) { return Scaffold( return Scaffold( appBar: AppBar( appBar: AppBar( title: Text("Second Route"), title: Text('First Route'), ), ), body: Center( body: Center( child: RaisedButton(¨ child: RaisedButton( child: Text('Go back!'), child: Text('Open route'), ), }, ), ), ); ), } ); } } } � 12

Navigation child: RaisedButton( child: Text('Open route'), onPressed: () { child: RaisedButton( Navigator.push( onPressed: () { context, Navigator.pop(context); MaterialPageRoute(builder: (context) }, => SecondRoute()), child: Text('Go back!'), ); ), }, ), routes: { '/': (context) => FirstScreen(), '/info': (context) => SecondRoute(), }, Navigator.pushNamed(context, ‘/info'); � 13

Hero Hero( tag: 'imageHero', child: Image.network( 'https://picsum.photos/250?image=9', ), ); � 14

React-Native • Screens • Routes describes Screens • Offers a few options • StackNaviagator (Similar to Flutter) const MainNavigator = createStackNavigator({ Home: {screen: HomeScreen}, Profile: {screen: ProfileScreen}, }); � 15

Screen (Just a component) class HomeScreen extends React.Component { static navigationOptions = { title: 'Welcome', }; render() { const {navigate} = this.props.navigation; return ( <Button title="Go to Anders's profile" onPress={() => navigate('Profile', {name: ‘Anders'})} /> ); } createStackNavigator( { Home: HomeScreen, Profile: DetailsScreen, }, { initialRouteName: 'Home', } ); � 16

Push,navigate,Back <Button title="Go to Details... again" onPress={() => this.props.navigation.push('Details')} /> <Button title="Go to Home" onPress={() => this.props.navigation.navigate('Home')} /> <Button title="Go back" onPress={() => this.props.navigation.goBack()} /> � 17

Standard Android • Basic • Activities • Fragments (deprecated) • Navigator (like flutter and react) in googles Architecture pattern/ solution � 18