Перевод Flex Cookbook

[Nirth]

Оглавление

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

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

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

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

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

[Nirth]

Автор Оригинала: 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]

Автор Оригинала: 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]

Автор Оригинала: 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
        }
    }
}

[Nirth]

Автор Оригинала: 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]

Автор: 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]

Сообщение от 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™]

Приблизительно так, у 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]

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

Проблема
при прокрутке колесика мыши компонеты унаследованые от 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 );
		}
	}
}

усе