-
Notifications
You must be signed in to change notification settings - Fork 0
/
MainView.ux
72 lines (61 loc) · 1.77 KB
/
MainView.ux
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<App>
<UserEvent ux:Name="onBigPicture" />
<OnUserEvent EventName="onBigPicture" Handler="{goBig}" />
<JavaScript>
var Observable = require("FuseJS/Observable");
var result = Observable();
var big = Observable();
fetch('https://api.randomuser.me/?results=20&inc=name,picture,id').then(function(response) {
return response.json();
}).then(function(resultado) {
result.value = resultado;
});
function goBig(args) {
big.value = args.big;
router.push("picture");
}
function volver() {
router.goBack();
}
module.exports = {
result: result,
goBig: goBig,
volver: volver,
big: big
}
</JavaScript>
<Router ux:Name="router" />
<Navigator DefaultTemplate="main">
<Page ux:Template="main">
<Panel Alignment="TopCenter" Background="#000080" Width="100%" Height="55" Padding="10">
<Text Color="#fff" FontSize="28" Alignment="Center" Value="Usuarios" />
</Panel>
<ScrollView Margin="0,55,0,0">
<Grid ColumnCount="2">
<Each Items="{result.results}">
<Panel>
<Image Url="{picture.medium}" Alignment="Left" />
<Text Value="{name.first}" Alignment="CenterRight" Margin="5" />
<Clicked>
<RaiseUserEvent EventName="onBigPicture">
<UserEventArg Name="big" Value="{picture.large}" />
</RaiseUserEvent>
</Clicked>
</Panel>
</Each>
</Grid>
</ScrollView>
</Page>
<Page ux:Template="picture">
<Panel Alignment="TopCenter" Background="#000080" Width="100%" Height="55" Padding="10">
<Text Color="#fff" FontSize="28" Alignment="Center" Value="Usuario" />
<Text FontSize="16" Value="< Volver">
<Clicked>
<Callback Handler="{volver}" />
</Clicked>
</Text>
</Panel>
<Image Url="{big}" />
</Page>
</Navigator>
</App>