Форум Flasher.ru

Форум Flasher.ru (http://www.flasher.ru/forum/index.php)
-   Flex (http://www.flasher.ru/forum/forumdisplay.php?f=84)
-   -   Перевод Flex Cookbook (http://www.flasher.ru/forum/showthread.php?t=89881)

Nirth 26.12.2006 05:55

Перевод Flex Cookbook
 
Оглавление

Web Services и вызов Документо Ориентированные (Document Оriented) операции
Компонент TextInput с поддержкой AutoComplete
HtmlToolTip
Cмена фона ячеек в DataGrid
CheckBox с тремя состояниями

Правила
В данном топике должны быть только переводы, обсуждение будет вестись в отдельном топике.

Если вы хотите откомментировать статью, нажмите на "Оригинал", и оставьте комментарии на сайте Adobe.

Если вы хотите перевести статью, просьба по возможности переводить те что с рейтингом 4 и выше, все что ниже прошу проверять.

Источник - http://www.adobe.com/cfusion/communi...ge&productId=2

Nirth 26.12.2006 07:12

Web Services и вызов Документо Ориентированные (Document Оriented) операции
 
Автор Оригинала: rdgrimes
Оригинал: Web Services and Document-oriented Operations

Проблема
В документации не хватает главы о том, как использовать Document Oriented WSDL файлы.

Решение
Вот простой пример "login" веб сервиса, который вызывает документо ориентированный метод.

Объяснение

Код:

import mx.rpc.soap.WebService;
import mx.rpc.events.ResultEvent;
import mx.rpc.events.FaultEvent;

private var sessionID:String = new String('');
// Login user
public function login(event:flash.events.Event):void
{
    // create login object with 'UserID' and 'Password' properties.
    var login:Object = new Object();
    login.UserID = userID_txt.text.toUpperCase();
    login.Password = password_txt.text.toUpperCase(); 
    // define the loginWS web service, load the wsdl
    // and then execute the operation, passing to it
    // the above defined login object. 
    loginWS.useProxy = false;
    loginWS.LoginOperation.addEventListener("result", loginResultHandler);
    loginWS.LoginOperation.resultFormat = 'e4x';
    loginWS.addEventListener("fault", loginFaultHandler);
    loginWS.loadWSDL('https://www.mydomain.com/Login.wsdl');         
    loginWS.LoginOperation(login);
}
// Handle results from login web service
private function loginResultHandler(event:ResultEvent):void
{
    // retrieve web service results
    var xmlDoc:XML = new XML(loginWS.LoginOperation.lastResult);
    sessionID = xmlDoc.*::User.@Session;
}
// Handle faults from login web service
private function loginFaultHandler(event:FaultEvent):void
{
    Alert.show("Some error message here.");
}

Главное различие между RPC и Документо Ориентированными операциями состоит в том, как операции вызываются. RPC операции вызываются следующим образом:

Код:

loginWS.LoginOperation(userID_txt.text, password_txt.text);
В то время, как в Документо Ориентированных операциях, вы должны сначала создать объект (чаще всего используется паттерн проектирования - DTO/VO), добавить параметры, которые вы хотите отправить операции, и уже потом передать его как аргумент, как показанно в примере ниже:

Код:

// create login object with 'UserID' and 'Password' properties.
var login:Object = new Object();
login.UserID = userID_txt.text.toUpperCase();
login.Password = password_txt.text.toUpperCase();
...
loginWS.LoginOperation(login);


Nirth 26.12.2006 07:32

Компонент TextInput с поддержкой AutoComplete
 
Автор Оригинала: Krxtopher
Оригинал: Remembering TextInput values for returning users

Проблема

В Flex приложениях в отличии от стандартных (DHTML)\AJAX текстовые поля ввода не "запоминают" значения, которые пользователь ввел в них.

Решение

Создадим наследуемый от mx.controls.TextInput класс, который будет сохранять вводимые пользователем значения в SharedObject. В запусках приложения пользователем, компонент будет "забирать" значения ранее введеные пользователем.

Описание

Современные браузеры имеют запоминать введеную пользователем информацию, в текстовые поля, чтобы пользователь не перепечатывал, их каждый раз. Обычно это заметно при вводе адресса почты или пользовательского имени, по умолчанию Flex приложения не подерживают такой функционал, что в резутате может оставить не благоприятные ощущения у пользователя, который ожидает подержки данного функционала.

Приведеный ниже компонент решает эту проблему в рамках одного приложения.

Компонент наследует класс TextInput, он добавляет свойство и статический метод к API TextInput'а.

persistenceId - идентификатор хранилища с которым вы бы хотели "связать" компонент (например "login" или "email").

clearStoredValues() - очищает SharedObject.

Код:

package custom
{
    import flash.events.Event;
    import flash.net.SharedObject;
    import mx.controls.TextInput;
   
    public class PersistentTextInput extends TextInput
    {
        /**
        * The ID this component will use to save and later look up its
        * associated value.
        */
        public var persistenceId:String = null;
       
        /**
        * The SharedObject name to use for storing values.
        */
        private static const LOCAL_STORAGE_NAME:String = "persistentTextInputStorage";
       
        /**
        * Clears previously stored values for all PersistentTextInput instances.
        */
        public static function clearStoredValues() :void
        {
            var so:SharedObject = SharedObject.getLocal(LOCAL_STORAGE_NAME);
            so.clear();
        }
       
        /**
        * Handles initialization of this component.
        */
        override public function initialize() :void
        {
            super.initialize();
            addEventListener(Event.CHANGE, handleChange);
            restoreSavedValue();
        }
       
        /**
        * Event handler function for CHANGE events from this instance.
        */
        protected function handleChange(event:Event) :void
        {
            saveCurrentValue();
        }
       
        /**
        * Restores the previously saved value associated with the
        * persistenceID of with this instance.
        */
        protected function restoreSavedValue() :void
        {
            if (persistenceId != null)
            {
                var so:SharedObject = SharedObject.getLocal(LOCAL_STORAGE_NAME);
                var value:String = so.data[persistenceId];
                if (value != null)
                {
                    text = value;
                }
            }
        }
       
        /**
        * Saves the text value of this instance. Associates the value with
        * the persistenceId of this instance.
        */
        protected function saveCurrentValue() :void
        {
            if (persistenceId != null)
            {
                var so:SharedObject = SharedObject.getLocal(LOCAL_STORAGE_NAME);
                so.data[persistenceId] = text;
                so.flush();
            }
        }
    }
}

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

Код:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:custom="custom.*" layout="vertical">
   
    <mx:Script>
        <![CDATA[
            import custom.PersistentTextInput;
           
            public function clearValues() :void
            {
                PersistentTextInput.clearStoredValues();
                message.text = "A page refresh will reveal that the values have not persisted.";
            }
        ]]>
    </mx:Script>
   
    <custom:PersistentTextInput id="firstNameInput"
        persistenceId="firstName" />
    <custom:PersistentTextInput id="lastNameInput" persistenceId="lastName" />
    <mx:Button label="Clear Persistent Values" click="clearValues()" />
    <mx:Label id="message" />
   
</mx:Application>

Исходник

Nirth 26.12.2006 07:39

HtmlToolTip
 
Вложений: 1
Автор Оригинала: Jove.Shi
Оригинал: HtmlToolTip

Проблема

Подсказки (ToolTip) в флексе не подерживают HTML.

Решение

Нам нужно переопределить (override) защищеный (protected) метод commitProperties.

Объяснение

Код:

package sjd.controls
{
    import mx.controls.ToolTip;

    public class HtmlToolTip extends ToolTip
    {
        override protected function commitProperties():void
        {
            super.commitProperties();
   
            textField.htmlText = text
        }
    }
}

Вложение 16066

Nirth 28.12.2006 04:40

Cмена фона ячеек в DataGrid
 
Автор Оригинала: joan_lafferty
Оригинал: How do you change the background cell color in a DataGrid?

Проблема
Смена фонового цвета у ячейки DataGrid, не такая простая задача, так как у ячейки по умолчанию нету свойства отвечающего за это. Так что нужно создать свой ItemRenderer, где мы сможем нарисовать свой фон в методе updateDisplayList.

Решение
В данном примере, был создан простой DataGrid с двумя колонками X и Y значений. Если какое либо значение превышает 100, то фон окрашивается в красный цвет, для обоих колонок используется один и тот же ItemRenderer.

Подробнее
Листинг ItemRenderer'а:
Код:

package {
    import mx.controls.Label;
    import mx.controls.DataGrid;
    import mx.controls.dataGridClasses.*;
    import flash.display.Graphics;

    public class CustomBackgroundComp extends Label
    {
        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
        {
                super.updateDisplayList(unscaledWidth, unscaledHeight);
                var g:Graphics = graphics;
                g.clear();
                var grid1:DataGrid = DataGrid(DataGridListData(listData).owner);
                if (grid1.isItemSelected(data) || grid1.isItemHighlighted(data))
                    return;
                if (data[DataGridListData(listData).dataField] > 100)
                {
                    g.beginFill(0xFF0033);
                    g.drawRect(0, 0, unscaledWidth, unscaledHeight);
                    g.endFill();
                }
            }
        }
    }
}

Исходник

Nirth 03.01.2007 08:32

CheckBox с тремя состояниями
 
Автор: Sephiroth
Оригинал: Checkbox 3 state

Проблема
Вам нужен CheckBox, который бы подерживал переключения между тремя состояниями, вместо стандартных двух, например это может пригодится в дрвевовидных списах.

Решение
Создайте компонент!

Подробнее
Сначала создайте новый компонент в Flex 2 наследник mx.controls.CheckBox, вы можете ознакомится с исходниками

Как только компонент создан, можете его протестировать в приложении вроде этого:

Код:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="org.sepy.ui.*" backgroundColor="#FFFFFF" backgroundGradientColors="[#EEEEEE]" clipContent="false">
    <mx:Script>
        <![CDATA[                       
            import org.sepy.ui.CheckBoxExtended;
            /**                       
              * click event on the checkbox extended component
            */
            private function onclick(e:Event):void
            {
                var o:CheckBoxExtended = CheckBoxExtended(e.target);
                debug.htmlText = "[clicked]<br>selected: " + o.selected.toString() + "<br>middle:  " + o.middle;
                // if user is not allowed to select the 3rd state
                // set the 3rd state by coding it
                if(!o.allow3StateForUser)
                {                                       
                    // if current status is "middle"
                    // then toggle it
                    if(o.middle)
                    {
                        o.middle = false;
                    } else {
                        if(!o.selected)
                        {
                            o.middle = true;
                        }
                    }
                }
            }
        ]]>       
    </mx:Script>       
    <ns1:CheckBoxExtended x="10" y="40" id="my_checkbox" label="click me!"
            click="onclick(event);"
            selected="true"
            allow3StateForUser="true"/>       
    <mx:Label x="10" y="10" text="CheckBox with 3state" fontSize="20"/>
    <mx:Text x="10" y="79" width="224" height="139" id="debug"/>
</mx:Application>

Если все было сделано правильно, то вы должны увидеть нечто вроде этого.

Теперь вы можете откомпилировать ваш компонент, и положить его в папку "\Flex SDK2\frameworks\libs". Для этого напишите в коммандной строке:

Код:

compc -source-path+=. -output "C:\Program Files\Adobe\Flex Builder 2\Flex SDK 2\frameworks\libs\sephiroth_CheckBoxExtended.swc" -namespace http://www.sephiroth.it/2006/mxml mxml-manifest.xml -include-namespaces http://www.sephiroth.it/2006/mxml -include-classes org.sepy.skins.CheckBoxExtendedIcon
Исходник
Пример



Once created the component you need to compile it into an .swc component and place it into the "\Flex SDK 2\frameworks\libs" folder.
To do that use this command line

__i 08.03.2007 21:06

Цитата:

Сообщение от Nirth
Автор Оригинала: Jove.Shi
Оригинал: HtmlToolTip

Проблема

Подсказки (ToolTip) в флексе не подерживают HTML.

Решение

Нам нужно переопределить (override) защищеный (protected) метод commitProperties.

Объяснение

Код:

package sjd.controls
{
    import mx.controls.ToolTip;

    public class HtmlToolTip extends ToolTip
    {
        override protected function commitProperties():void
        {
            super.commitProperties();
   
            textField.htmlText = text
        }
    }
}

Вложение 16066

Данный пример неработет для метода
Код:

ToolTipManager.createToolTip(text:String, x:Number, y:Number, errorTipBorderStyle:String = null, context:IUIComponent = null):IToolTip
потому что добрые Адобовцы сделали ход конем в ToolTipManagerImpl:
Код:

    public function createToolTip(text:String, x:Number, y:Number,
                                        errorTipBorderStyle:String = null,
                                        context:IUIComponent = null):IToolTip
    {
        var toolTip:ToolTip = new ToolTip();

Хотелось бы видеть исходный код примера этого чувака. Как он добился этой красоты.

ЗЫ. Nirth может сделать отдельную тему для обсуждения CookBook?

7thsky™ 09.03.2007 02:16

Приблизительно так, у UIComponent'а есть стандартный евент ToolTipEvent.CREATE,
там можно переопределить инстанс тултипа для специфичного объекта, на
ToolTipEvent.SHOW - задать анимацию движение к курсору мыши и т.д.

Код:

var ui:UIComponent = new UIComponent ();
ui.toolTip = '<b>blablabla</b>';
ui.addEventListener (ToolTipEvent.CREATE, toolTipCreateHandler);
root.addChild (ui);

protected function toolTipCreateHandler (event:ToolTipEvent):void {
event.tooltip = new MySuperDuperTooltip ();
}

З.Ы. код может быть левый так как писал на коленке, если что могу сделать работающий вариант

__i 09.08.2007 21:46

не перевод - мой рецепт

Проблема
при прокрутке колесика мыши компонеты унаследованые от ListBase скроллятся на число позиций кратное 3, что вполне неудобно если высота листа кратная 1 или 2.

Решение
Сделайте свой компонент наследуя его от соответствующего листового, добавьте свойство и переопределите метод mouseWheelHandler
Пример для TileList
Код:

package com.the33cows.components
{
        import mx.controls.TileList;
        import flash.events.MouseEvent;

        public class TileListWheelFix extends TileList
        {
                // переменна отвечает за шаг на который будет происходить прокрутка при использовании
                public var mouseWheelStep : int = 1;
               
                override protected function mouseWheelHandler(event:MouseEvent):void
                {
                        event.delta = int(event.delta/3)*mouseWheelStep;
                        //делим на 3 потому что по у молчанию шаг мыши равен 3 м
                        super.mouseWheelHandler( event );
                }
        }
}

усе


Часовой пояс GMT +4, время: 03:02.

Copyright © 1999-2008 Flasher.ru. All rights reserved.
Работает на vBulletin®. Copyright ©2000 - 2024, Jelsoft Enterprises Ltd. Перевод: zCarot
Администрация сайта не несёт ответственности за любую предоставленную посетителями информацию. Подробнее см. Правила.