Скроллинг во flex/flash-приложениях - помощь новичку , прокрутка содержимого мобильных приложений

Как раньше. Ты хотя бы документацию по языку почитай, прежде чем карго-кодить.

Прошу извинить меня, если что-то не так или я Вас чем-то обидел.
(с)"Ты хотя бы документацию по языку почитай"... (с) - Обязательно!.. Именно этим и занимаюсь, иначе я бы не смог задать ни одного вопроса. К сожалению, мне не все понятно, поэтому я здесь. Дело в том , что , скажем у Коула в " Изучаем Flex " (изначально это приложение делалось как флекс) в руководстве по разработке рассматривается достаточно простой пример, добавляющий полосу прокрутки - и больше ничего. Все, что там я нарыл - больше подходит для кнопок/ссылок - нажал/отпустил. В книге "Flex 3. Сборник рецептов", то , что касается моей проблемы,- рассматривается масса примеров для событий клавиатура/мышь и ничего для обработки событий от сенсорных экранов... Все, что работает на обычных настольных "писюках" успешно не работает на планшетах... Кроме того чать примеров не работает из-за ошибок в коде.примеров, о чем успешно сообщает билдер. Лирическое отступление:

Скрытый текст

Естественно, что я их испытывал с нулевым результатом... Скажем, для меня стало неожиданностью то, что приложение не скроллится на планшете в win7, у знакомого на win8 оно пошло без проблем и без добавления каких-либо дополнительных процедур. Но, к сожалению, есть 2 планшета и есть win7, а поскольку я их (планшеты) купил, то я во всем и виноват ... - проблема стала моей. И мало кого волнует, что я админ, а не программист. Я прекрасно отдаю отчет в том, что на данном этапе и с таким уровнем познания я данную проблему решить не могу.. Но не смотря на все вышеизложенные "сопли" данная тема меня очень заинтересовала, поэтому я здесь и очень Вам благодарен за помощь.

Скрытый текст

я, собственно, тоже админ, а не программист, не сложилось немного, и actionscript учил точно так же, читая документацию и просматривая примеры кода. То, что приложение работает на вин8, но не работает на вин7, довольно любопытно - может быть, вин8 сама скроллит окно, вместо Flash?

Просто присваивать переменной типа Sprite элемент типа Rectangle это все равно, что назвать крокодила лошадью, после чего ездить на нём. Интересно, у вас вообще было какое-то программирование в школе, где было понятие совместимости типов? Иначе то, что для меня настолько очевидно, что я его не упоминаю потому, что оно сидит у меня в ядре, может оказаться неизвестным вам, со всеми вытекающими последствиями.

Как, кстати, у вас изначально реализована прокрутка мышью? И как реализован скроллбар? Трюк в том, что я не знаю именно Flex, там компонентов прорва, и кое-какая функциональность там встроена. А вообще, работать с мышью и тачпэдом это примерно одно и то же, просто мышь генерирует события MouseEvent.MOUSE_DOWN, MOUSE_UP, а тачпэд TouchEvent.TOUCH_BEGIN, TOUCH_END, с единственной (ИМХО) разницей в доступе к координатам, в TouchEvent есть touchPointID, а в MouseEvent его нет. Остальные координатные переменные одинаковы.

Скрытый текст

Из полученных за последнюю неделю сведений меня это тоже удивляет , но как есть... - либо винду допилили, добавив методы , что она идентифицирует объекты, с которыми работает...

Во Flexe все проще, - horizontalScrollPolicy и verticalScrollPolicy. Они определяют, есть ли нужда в появлении горизонтальных и вертикальных полос поведения, переходы, фильтры прокрутки соответственно. По умолчанию принимается значение auto,что означает появление прокрутки по мере необходимости... Тут даже добавлять ничего не надо. Если полосы не нужны им просто присваивается значение "off". В данный момент я попробую переварить, то что Вы мне ранее, попробую привязать обработчик для Canvas. Пока , к сожалению, ничего...

Добавлено 01.02.13, 13:10
Вся беда в том, что это нужно (с) вчера! "вынь и полошь" (с) Отсюда сумбур и непонимание...

Доброго времени суток... Промучился в выходные так нужного результата не получил... Сказывается нулевой опыт работы с AS, но тем не менее да плюс народ еще подрасстроил относительно созданного класса

Цитата

запуск к.-л. команд осуществляется внутри методов. Так что ваш класс должен вызывать ошибку не заивисимо от типа проекта.

.... Бред какой-то... непорадовало еще и то, что используя чисто флексовские методы не удалось добиться обычного перемещения Canvas хотя ошибок в коде нет:

Скрытый текст

<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
                       xmlns:s="library://ns.adobe.com/flex/spark"
                       xmlns:mx="library://ns.adobe.com/flex/mx"
                       creationComplete="init()" width="1020" height="520" preloaderChromeColor="#CEF6F3" xmlns:local="*">
    <fx:Style source="newpr.css"/>
    <fx:Declarations>
        <!-- Разместить невизуальные элементы (например, службы или объекты значений) -->
    </fx:Declarations>
    
                
        <s:Window id="map">
        <s:systemChrome>none</s:systemChrome>
        <s:transparent>true</s:transparent>
        <s:x>0</s:x>
        <s:y>0</s:y>
        <s:height>520</s:height>
        <s:width>1020</s:width>
        </s:Window>
    
            
    <mx:TabNavigator x="0" y="16" width="1018" height="480" backgroundColor="#DAF1F5"
                     chromeColor="#A5D0EE" contentBackgroundColor="#D8F6F1" focusColor="#1C63A5" >  
        <fx:Script>
            <![CDATA[
                import flash.geom.Rectangle;
                private function init():void{
                                c1.addEventListener(MouseEvent.MIDDLE_MOUSE_DOWN, oMD);
                }
                
                private function oMD(e:MouseEvent):void
                {
                    c1.startDrag(false, new Rectangle(0,0,520,1020))
                }
            ]]>
        </fx:Script>    
        <mx:Canvas id="c1" width="100%" height="100%" label="Новинки" chromeColor="#B3D4EB"
                   fontFamily="Arial" fontSize="12" fontStyle="normal" fontWeight="normal"
                   textDecoration="none">
            <mx:Image x="10" y="10" width="330" height="440" source="jpg/17.jpg"/>
            <s:Label x="352" y="10" width="378" height="439" chromeColor="#B3D4EB" fontFamily="Arial"
                     fontSize="12" fontWeight="normal"

а процедура прокрутки (handleScroll и для Canvas я его , вроде, определил ... - определяет направления движения -скроллинга- в зависимости от данных 2 метода...
второй - это , собственно, scrollChildren - который определяет объекты на Canvas, считает их размеры и передает в метод 1 ...) объектов внутри Canvas вызывает ошибку

Цитата

1020: Метод, который помечен на переопределение, должен переопределять другой метод. newpr.mxml

Ошибка в строке 15 ....код ниже:
[

Скрытый текст

CODE=cpp]

<mx:Canvas id="c1" scroll="handleScroll(event)" width="100%" height="100%" label="Новинки" chromeColor="#B3D4EB"
fontFamily="Arial" fontSize="12" fontStyle="normal" fontWeight="normal"
textDecoration="none">
<fx:Script>
<![CDATA[

import mx.core.Container;
import mx.events.ScrollEvent;

private var dir:String;
private function handleScroll(event:ScrollEvent):void
{
dir = event.direction;
}
override protected function scrollChildren():void
{
var i:int = 0;
do
{
var comp:DisplayObject = getChildAt(i);
if (comp is Container)
{
trace (Container(comp).maxVerticalScrollPosition);
dir == "horizontal" ?
Container(comp).horizontalScrollPosition = c1.horizontalScrollPosition *
(Container(comp).maxHorizontalScrollPosition)/c1.maxHorizontalScrollPosition:
(Container(comp).verticalScrollPosition) = c1.verticalScrollPosition *
(Container(comp).maxVerticalScrollPosition) / c1.maxVerticalScrollPosition;
}
i++;
}
while (i < numChildren)

}
]]>
</fx:Script>
<mx:Image x="10" y="10" width="330" height="440" source="jpg/17.jpg"/>
<s:Label x="352" y="10" width="378" height="439" chromeColor="#B3D4EB" fontFamily="Arial"
fontSize="12" fontWeight="normal"
text=" №17 ЭКИПАЖ.

[/CODE]

В общем как-то так пока .
Что качается Вашего предложения, то полного понимания у меня нет, поэтому давайте постепенно, а Вы, если Вам не сложно, поправьте, что не так... И может быть, если не затруднит, посмотрите выложенный выше код, скорее всего я что-то сделал не так.
Давайте так : 1) Вы писали:

Цитата

ебе нужно получать наличие и перемещение объектов из массива id_Canvas.dots,

значит мне необходимо на первом этапе не в классе , а в MXML создать массив dots и заполнить его элементами Canvas . Так?

Цитата atis @ 04.02.13, 08:02

override protected function scrollChildren():void

Слово override означает "для этого класса использовать этот метод, если при обращении к предыдущему в иерархии классу указан вызов такого же метода", и в случае, если такого метода нет, override не нужен - удали. А если есть, то нужно правильно написать сигнатуру перекрывающего метода - все параметры и результат должны совпадать по типу.

Цитата atis @ 04.02.13, 08:02

непорадовало еще и то, что используя чисто флексовские методы не удалось добиться обычного перемещения Canvas хотя ошибок в коде нет:

Мало сделать startDrag, нужно на отпускание кнопки вызывать stopDrag() тоже. Кстати, когда освоишь, можешь позже использовать startTouchDrag() вместо startDrag().

Цитата atis @ 04.02.13, 08:02

значит мне необходимо на первом этапе не в классе , а в MXML создать массив dots и заполнить его элементами Canvas . Так?

Нет, твой класс его сам должен создать и поддерживать. Это достигается внутри кода функции onTouchBegin() где создается пустой объект типа Sprite и пихается в dots и список показа (через addChild()) Вторая функция убирает ненужный объект из массива.

Цитата atis @ 04.02.13, 08:02

dir == "horizontal" ?
Container(comp).horizontalScrollPosition = c1.horizontalScrollPosition *
(Container(comp).maxHorizontalScrollPosition)/c1.maxHorizontalScrollPosition:
(Container(comp).verticalScrollPosition) = c1.verticalScrollPosition *
(Container(comp).maxVerticalScrollPosition) / c1.maxVerticalScrollPosition;

if (dir=="horizontal") Container(comp).horizontalScrollPosition = c1.horizontalScrollPosition *
(Container(comp).maxHorizontalScrollPosition)/c1.maxHorizontalScrollPosition;
else Container(comp).verticalScrollPosition = c1.verticalScrollPosition *
(Container(comp).maxVerticalScrollPosition) / c1.maxVerticalScrollPosition;

Все-таки, пока есть синтаксические ошибки, их надо убирать самому. Тернарный оператор лучше заменять на if..else, тем более, если он болтается сам по себе, и его результат не используется.
Там же - использовать do..while цикл имеет смысл только тогда, когда в numChildren заведомо не ноль, иначе получишь null pointer exception. Может быть и так, что у тебя он не будет нулем в принципе.

Цитата

else Container(comp).verticalScrollPosition

Ошибка 1120 Обращение несуществующего свойства verticalScrollPosition


Странно, тогда почему компилятор не ругался на horizontalScrollPosition?

Добавлено 04.02.13, 10:07
Может как то здесь надо еще добавить if (dir == "VERTICAL") ? только не пойму как ...

ссылка:

Скрытый текст

Здравствуйте.
Пример 1. Я вытащил ранее исправленную Вами структуру из класса положил ее в mxml-файл. были ошибки я их исправил. Сейчас в компиляторе ошибок нет. Тем не менее, пока проект с тачскрином не работает. Видимо я не смог завязать скрипт с содержимым, а может есть еще какие-то неточности. Очень прошу Вас посмотреть и поправить если что не так.
Спасибо. Код во вложении + картинка за спойлером. В принципе, там ничего особенного, несколько канвасов ->внутри которых картинки и текст.

Скрытый текст

код

Скрытый текст

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
                       xmlns:s="library://ns.adobe.com/flex/spark"
                       xmlns:mx="library://ns.adobe.com/flex/mx"
                       width="1020" height="520" preloaderChromeColor="#CEF6F3">
    <fx:Style source="newpr.css"/>
        
    <fx:Script>
        <![CDATA[
            import flash.display.Sprite;
            import flash.events.*;
            import flash.events.TouchEvent;
            import flash.ui.Multitouch;
            import flash.ui.MultitouchInputMode;
                        
            private var dots:Array;
            
            public function ne1wpr():void
            {
                dots=new Array();
                if (stage) addedToStage();
                else addEventListener(Event.ADDED_TO_STAGE, addedToStage);
            }
            private function addedToStage (e:Event=null):void
            {
                removeEventListener(Event.ADDED_TO_STAGE, addedToStage);
                
                Multitouch.inputMode = MultitouchInputMode.TOUCH_POINT;
                stage.addEventListener(TouchEvent.TOUCH_BEGIN, onTouchBegin);
                stage.addEventListener(TouchEvent.TOUCH_END, onTouchEnd);
            }
            public function onTouchBegin(e:TouchEvent):void
            {
                var dot:Sprite = new Sprite;
                dot.x = e.stageX;
                dot.y = e.stageY;
                stage.addChild(dot);
                dot.startTouchDrag(e.touchPointID, true);
                dots[e.touchPointID] = dot;
            }
            public function onTouchEnd(e:TouchEvent):void
            {
                var dot:Sprite = this.dots[e.touchPointID];
                stage.removeChild(dot);
            }
            
        ]]>
    </fx:Script>
    
        <mx:TabNavigator x="0" y="16" width="1018" height="480" backgroundColor="#DAF1F5"
                     chromeColor="#A5D0EE" contentBackgroundColor="#D8F6F1" focusColor="#1C63A5" >      
        <mx:Canvas width="100%" height="100%" label="Новинки" chromeColor="#B3D4EB"
                   fontFamily="Arial" fontSize="12" fontStyle="normal" fontWeight="normal"
                   textDecoration="none">
            <mx:Image x="10" y="10" width="330" height="440" source="jpg/17.jpg"/>
            <s:Label x="352" y="10" width="378" height="439" chromeColor="#B3D4EB" fontFamily="Arial"
                     fontSize="12" fontWeight="normal"
                     text=" №17 ЭКИПАЖ. Опытный пилот  Бео "
                     textAlign="left" verticalAlign="middle"/>
            <s:Image x="10" y="466" width="330" height="440" source="jpg/18.jpg"/>
            <s:Label x="352" y="466" width="378" height="439" fontFamily="Arial" fontSize="12"
                     fontWeight="normal"

Пример2 Единственное , что пока получилось и работает , но не так , как хотелось бы , - это перемещение объекта... Единственное никак не могу получить нормальную работу по оси Y . Т.е. необходимо чтобы по оси Y канвас не улетал за пределы бордера, чтобы его можно было зацепить. Что нужно тут поправить?
Спасибо.

Скрытый текст

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
                       xmlns:s="library://ns.adobe.com/flex/spark"
                       xmlns:mx="library://ns.adobe.com/flex/mx">
    <fx:Declarations>
        <!-- Разместить невизуальные элементы (например, службы или объекты значений) -->
    </fx:Declarations>
    
    
    <fx:Script>
        <![CDATA[
            import mx.events.DragEvent;
            
            protected var shiftX:Number;
            protected var shiftY:Number;
            
            protected function onBox1MouseDown(event:MouseEvent):void
            {
                shiftX = event.localX;
                shiftY = event.localY;
                stage.addEventListener(MouseEvent.MOUSE_UP,onMouseClick);
                stage.addEventListener(MouseEvent.MOUSE_MOVE,onMoveInParentBox1);
            }
            
            protected function onMoveInParentBox1(event:MouseEvent):void
            {
                box1.x = parentBox.mouseX - shiftX < 0 ? 0 : parentBox.mouseX - shiftX + box1.width > parentBox.width ? parentBox.width - box1.width : parentBox.mouseX - shiftX;
                box1.y = parentBox.mouseY - shiftY ;
            }
            
            protected function onMouseClick(event:MouseEvent):void
            {
                stage.removeEventListener(MouseEvent.MOUSE_UP,onMouseClick);
                stage.removeEventListener(MouseEvent.MOUSE_MOVE,onMoveInParentBox1);
            }
        ]]>
    </fx:Script>
    <s:BorderContainer backgroundColor="#E7E9EB"  width="100%" height="100%" >
        <mx:Canvas  width="100%" height="100%" label="Новинки" chromeColor="#B3D4EB"
                    fontFamily="Arial" fontSize="12" fontStyle="normal" fontWeight="normal"
                    textDecoration="none">
            <s:Group id="parentBox" width="100%" height="100%">
                <s:BorderContainer id="box1" borderWeight="2" width="1008" height="1000" backgroundColor="0xCCCCCC" mouseDown="onBox1MouseDown(event)" >
                    <s:Image x="10" y="33" width="191" height="199"/>
                    <s:Image x="10" y="261" width="191" height="162"/>
                    <s:Label x="333" y="80" width="246" height="152" text="wefewfewfewfewfewfwfw"/>
                </s:BorderContainer>
            </s:Group>
        </mx:Canvas>      
    </s:BorderContainer>
</s:WindowedApplication>

Цитата atis @ 05.02.13, 07:58

box1.x = parentBox.mouseX - shiftX < 0 ? 0 : parentBox.mouseX - shiftX + box1.width > parentBox.width ? parentBox.width - box1.width : parentBox.mouseX - shiftX;
box1.y = parentBox.mouseY - shiftY ;

Смотри: в строке вверху присутствуют оба ограничителя, в строке внизу - ни одного. Поэтому и не лимитируется смещение по Y.

Цитата atis @ 05.02.13, 07:58

. Видимо я не смог завязать скрипт с содержимым, а может есть еще какие-то неточности.

Объект класса newpr присутствует на сцене?

Цитата

Объект класса newpr присутствует на сцене?

Не понял, что Вы хотели спросить. Дело в том, что все перенес из класса в тело MXMl, т.е в основной файл, чтобы к классу не обращаться, так сказать не импортировать его.

Тогда надо piksel'a звать, потому как если код в MXML, это уже Document class получается. Кстати, если в обе функции воткнуть по trace(), будут они вызываться? Если да, значит, тебе нужна ещё одна функция - слушатель Event.ENTER_FRAME, которая и будет заниматься скроллингом.

самое обидное, что в книгах по флексу ничего этого не! Там чистой воды AS/// порой авторы пишут классы в пакете , не удосуживаясь объяснять что это и куда вставлять и как ни методов не процедур. Получается я бы действительно созданный класс не смог бы вызвать, поскольку синтаксис был не тот, а билдер ошибок не давал (сначала давал пришлось немного синтаксис поправить,)... Лазая по вражеским сайтам обнаружил процедуру создания класса в- в классе package Classes {} ....
Но тем не менее Вы мне очень помогаете, прошу Вас не оставлять тему. В данный момент то что раньше было в классе, как я писал , теперь mxml... Я просто самостоятельно не могу разобраться, трудно мне на нулевом уровне, как созданный метод привязать к объектам - детям , что в данном случае будет объектом Child - по идее Canvas, мне же нужно чтобы их содержимое прокручивалось - картинки и текст или, все-таки картинки и текс, входящие в Canvas?

Добавлено 05.02.13, 16:31

Цитата

Тогда надо piksel'a звать

А как его позвать? Вы с ним общаетесь хоть как-то? Если да, то можете его попросить помочь?
спасибо.

Добавлено 05.02.13, 16:34
в данный момент я сделал , и пока работает с бордерами перемещение одного относительно другого ... на втором разместил картинки и текст - работает ужасно, но по крайней мере пока не пристрелили но , обещали припомнить все и вычесть стоимость планшетников

Кстати - странно как-то ты пример скопировал. Для интереса глянул, в примере есть событие TOUCH_MOVE и обработчик на нем, который собственно и двигает спрайты по экрану, чтобы можно было отследить, куда потащили палец и куда нужно скроллить, а у тебя он напрочь отсутствует. Поэтому, наверно, и не можешь понять, что дальше делать и почему вообще оно не фурычит.

Что тебе надо прокручивать, определяешь ты сам, и именно то и прокручиваешь. Проще всего это сделать, меняя координаты у одного выделенного объекта, пусть Canvas, который содержит ровно то, что требуется двигать. Для этого, правда, итебе придется узнать, попробовать и использовать такую штуку, как иерархия видимых объектов.

Вот как , может я как раз урезанный пример нашел? можно ссылку, если не трудно.

Цитата

попробовать и использовать такую штуку, как иерархия видимых объектов.

Так на Canvas они все видимые, поскольку размещены на нем , другое дело что мне нужно прокручивать содержимое этого канваса или сам Canvas не мышкой, а на тачскирине пальцем. Причем в первоначальной версии на компьютере с этим проблем нет , съедается и скроллер и полоса прокрутки справа и я не могу понять это Canvas прокручивается или же содержимое на нем?