Как я создаю своё первое мобильное приложение

Процесс шел с 24 октября по 19 ноября 2017 года, суть приложения — создание заметок, инструмент — Fuse, мой уровень знаний — базовое знание HTML/CSS

Меню

08.11.2017


8. Навигационный косячок

Случайно заметил следующий косячок: действие кнопок на первом и втором экране происходит вне зависимости от места клика, хотя по логике за это должна отвечать только область кнопки 🙂

Все дело оказалось в неуказанном размере объекта button на 35 и 53 строках, поэтому эти кнопки и воспринимали клик со всего экрана:

<App>
<JavaScript>
    var storage = ["Мой первый стикер", "Второй", "Третий", "Четвертый"];
    var goto_newsticker = function() { router.goto("NewSticker"); };
    var goto_flow = function() { router.goto("Flow"); };
    module.exports = {
        sticker_text: storage,
        goto_newsticker: goto_newsticker,
        goto_flow: goto_flow
    }
</JavaScript>
<!-- Шаблоны (компоненты) -->
<Image ux:Class="icon" Width="30" Margin="10" Color="#C4C4C4" />
<Panel ux:Class="sticker" Width="220" Height="50" Margin="0,0,0,10" Padding="5,5,5,10" Color="#fff">  
    <string ux:Property="sticker_text" />
    <Text FontSize="16" Value="{ReadProperty sticker_text}" Color="#000" />
</Panel>
<Panel ux:Class="button_new" Alignment="BottomCenter" Color="#fff" Width="220" Height="78" >
    <string ux:Property="button_name" />
    <Text ux:Name="link" Value="{ReadProperty button_name}" FontSize="24" Color="#157EFB" Alignment="Center" />
    <WhilePressed>
        <Change this.Color="#157EFB" Duration="0.1" DurationBack="0.3" />
        <Change link.Color="#fff" Duration="0.4" DurationBack="0.3" />
    </WhilePressed>
</Panel>
<!-- Палитра слоёв (экземпляры) -->
<Router ux:Name="router" />
    <Navigator DefaultPath="Flow">
        <Page Name="Flow">
        <Transition>
            <Change Flow.Opacity="0.3" Duration="0.7" />
        </Transition>
            <icon File="assets/flows.png" Alignment="TopLeft" />
            <icon File="assets/package.png" Alignment="TopRight" />
            <Button Clicked="{goto_newsticker}">
                <button_new button_name="New sticker" />
            </Button>            
            <ScrollView>
                <StackPanel>
                    <Each Items="{sticker_text}">
                        <sticker sticker_text="{}"/>
                    </Each>
                </StackPanel>
            </ScrollView>
            <Rectangle Color="#EAEAEA" />
        </Page>
        <Page Name="NewSticker" Color="#fff">
        <Transition>
            <Scale Factor="0.7" Easing="ElasticIn" />
            <Move Y="1" RelativeTo="Size" Duration="0.4" Easing="ElasticOut" />
        </Transition>
            <Text Alignment="TopLeft" Margin="10" FontSize="24">New sticker</Text>
            <Button Clicked="{goto_flow}">
                <Text Alignment="TopRight" Margin="10" FontSize="24">Cancel</Text>
            </Button>
            <Button Alignment="Right" Width="120" Height="50" Margin="10" Color="#157EFB" Clicked="{goto_flow}">
                <Text Alignment="Center" Color="#fff" FontSize="24">Save</Text>
            </Button>
        </Page>
    </Navigator>
</App>

Для наглядности перекрашу эти объекты в красный цвет и станет понятно какую площадь они занимают:

Косячок оказался ещё и в том, что в прошлый раз я сделал неправильный вывод о том, что свойство Clicked применимо только к объекту Button, хотя его спокойно можно «повесить» и на Panel, и на Text. Я вроде бы проверял этот момент, но видимо уже начинал тупить после нескольких часов просиживания в Fuse, что и сыграло такую роль 🙂

Итак, решение этой проблемы оказалось очень простым: достаточно перекинуть свойство Clicked на объекты, у которых указаны конкретная ширина и высота, т.е. я убираю «обёртку» Button, и передаю Clicked объектам button_new и Text:

<App>
<JavaScript>
    var storage = ["Мой первый стикер", "Второй", "Третий", "Четвертый"];
    var goto_newsticker = function() { router.goto("NewSticker"); };
    var goto_flow = function() { router.goto("Flow"); };
    module.exports = {
        sticker_text: storage,
        goto_newsticker: goto_newsticker,
        goto_flow: goto_flow
    }
</JavaScript>
<!-- Шаблоны (компоненты) -->
<Image ux:Class="icon" Width="30" Margin="10" Color="#C4C4C4" />
<Panel ux:Class="sticker" Width="220" Height="50" Margin="0,0,0,10" Padding="5,5,5,10" Color="#fff">  
    <string ux:Property="sticker_text" />
    <Text FontSize="16" Value="{ReadProperty sticker_text}" Color="#000" />
</Panel>
<Panel ux:Class="button_new" Alignment="BottomCenter" Color="#fff" Width="220" Height="78">
    <string ux:Property="button_name" />
    <Text ux:Name="link" Value="{ReadProperty button_name}" FontSize="24" Color="#157EFB" Alignment="Center" />
    <WhilePressed>
        <Change this.Color="#157EFB" Duration="0.1" DurationBack="0.3" />
        <Change link.Color="#fff" Duration="0.4" DurationBack="0.3" />
    </WhilePressed>
</Panel>
<!-- Палитра слоёв (экземпляры) -->
<Router ux:Name="router" />
    <Navigator DefaultPath="Flow">
        <Page Name="Flow">
        <Transition>
            <Change Flow.Opacity="0.3" Duration="0.7" />
        </Transition>
            <icon File="assets/flows.png" Alignment="TopLeft" />
            <icon File="assets/package.png" Alignment="TopRight" />
            <button_new button_name="New sticker" Clicked="{goto_newsticker}"/>
            <ScrollView>
                <StackPanel>
                    <Each Items="{sticker_text}">
                        <sticker sticker_text="{}"/>
                    </Each>
                </StackPanel>
            </ScrollView>
            <Rectangle Color="#EAEAEA" />
        </Page>
        <Page Name="NewSticker" Color="#fff">
        <Transition>
            <Scale Factor="0.7" Easing="ElasticIn" />
            <Move Y="1" RelativeTo="Size" Duration="0.4" Easing="ElasticOut" />
        </Transition>
            <Text Alignment="TopLeft" Margin="10" FontSize="24">New sticker</Text>
            <Text Alignment="TopRight" Margin="10" FontSize="24" Clicked="{goto_flow}">Cancel</Text>
            <Button Alignment="Right" Width="120" Height="50" Margin="10" Color="#157EFB" Clicked="{goto_flow}">
                <Text Alignment="Center" Color="#fff" FontSize="24">Save</Text>
            </Button>
        </Page>
    </Navigator>
</App>

Теперь клик считывает только область кнопок, а не весь экран:


Скачать архив проекта

Итак, новые выводы сделаны, правки внесены, можно двинуться дальше!