09.10.2011

Как да използвате Рамковата Оформление на текста в Flex 3.2 или AIR 1.5

Original on http://corlan.org/2009/01/19/how-to-use-text-layout-framework-in-flex-32-or-air-15/

Целта на тази статия е да обясни какво рамка за оформлението на текста и как можете да го използвате за показване богати текст вътрешността на Flash Player 10. Макар че аз няма да покрие всички възможности на тази рамка, аз се надявам, че ще ви даде достатъчно на тласък, за да получите до крейсерска скорост.

Както обикновено, можете да намерите демо и сорс кода за примерите в тази статия, опаковани като Flex 3.2 проект ZIP файл. Така че, ако предпочитате да видите кода, преди да е прочел теорията, вижте раздела “Time Code: Пример Framweork оформлението на текста в Flex 3.2″.

Какво е рамка за оформлението на текста

Текст Flash Engine (FTE) в Flash Player 10 и Adobe AIR 1.5 носи подкрепа за много нови възможности текст. Има API, която осигурява ниско ниво на достъп за този двигател, но ако искате да използвате API, което трябва да напишат много код. По този начин, на пълно работно време, е предназначен да осигури основата за библиотеки, които се възползват от тези възможности и да направи живота по-лесно за разработчик.

И това е точно това, което рамка за оформлението на текста е. Това е библиотека, написани в чист ActionScript, и по този начин могат да бъдат използвани в Flash CS4, Flex 3.2 или бамя, или AIR 1.5.

Рамката за оформлението на текста предоставя подкрепа за:

Двупосочен текст, вертикален текст и над 30 писмени системи, включително арабски, иврит, китайски, японски, корейски, тайландски, Lao, основните писмени системи на Индия, и др.
Избор, редактиране и течаща текст в няколко колони и свързани с контейнери, както и около инлайн изображения
Вертикален текст, Тейт-Чу-Йоко (хоризонтална в рамките на вертикален текст) и оправдава за Източна азиатски типография
Rich типографски контрол, включително kerning, лигатури, типографски случай, цифра случай, цифра ширина и дискреционна тиретата
Cut, копие, паста, връщане и стандартни клавиатура и мишка жестове за редактиране
Rich разработчик APIs да манипулира съдържание на текст, оформление, маркиране и създаване на потребителски компоненти текст.

Показани са някои екранни снимки от пробите, които можете да намерите на http://labs.adobe.com/technologies/textlayout/:

Разбирането Текст Оформление Рамковата компоненти

Рамковата Text Layout (TLF) се състои от три компонента и десет пакети. Всички пакети са subpackages на flashx.textlayout пакет. Както казах, тази рамка се осъществява чрез използване на чист ActionScript 3, и по този начин могат да бъдат използвани в Flash CS4, Flex 3.2, бамя (на Рамката за оформлението на текста е част от бамя), или AIR 1.5. И разбира се трябва да се насочите Flash Player 10. Ето и кратко описание на трите компонента в TLF:

textLayout_core.swc е основният компонент и дръжки за съхранение на данни, развиващ се текст в контейнери, както и оказване на на контейнерите
textLayout_conversion.swc се използва за внос на текст в рамка, и да го изнесе
textLayout_edit.swc улеснява текст подбор и редактиране на текст

Един от начините да се погледне в TLF, като я сравнява с модел MVC. Ако приложите този модел, а след това ще имате:

Моделът се определя главно от flashx.textlayout.elements пакет, който включва класове / интерфейси, които определят структурата на данните, който държи текста. Друг пакет, flashx.textlayout.formats, се използва за съхранение на формата информация. Пакет flashx.textlayout.conversion може да се счита за част от модела, като той е олицетворение на правилата за внос / износ на данни
Гледката включва три пакета, които се справят с оказване на текста за показване. Можете да изберете да покажете на текст с помощта на един от два различни метода: използване flashx.textlayout.factory пакет можете да покажете статичен текст, и използването на flashx.textlayout.container можете да покажете контейнери за динамичен текст. Flashx.textlayout.compose пакет определя методи за позициониране и показване на динамичен текст в контейнери
Контролерът е представена от два пакета, които определят начина, по който потребителят може да взаимодейства с текст (подбор, редактиране, копиране / паста, връщане и т.н.): flashx.textlayout.edit и flashx.textlayout.operations

Модел и йерархия Текст поток

Моделът използва йерархично дърво, за да представлява текст. Всеки елемент на дървото е клас от пакета flashx.textlayout.elements. Коренът елемент винаги е инстанция на TextFlow класа, и концептуално представлява цялата история на текст (терминът история идва от ПДО, и означава съвкупност от текст, който трябва да бъдат третирани като една единица). Например, статията, която четете сега може да бъде една история.

Останалата част от елементите са:

DIV – разделяне на текста, може да съдържа само DIV или P елементи
п – параграф, може да съдържа всеки елемент, но DIV
– връзка, може да съдържа tcy, педя, IMG, раздела, BR
tcy – серия от хоризонтален текст, използван в вертикален текст, например в японски, можете да получите този тип елемент, може да съдържа, педя, IMG, раздела, BR
педя – план на текста в абзаца; може да съдържа само текст
IMG – един образ, в параграф
раздела – раздел характер
BR – почивка характер. Текстът ще продължи на следващия ред, но тя не започне нов параграф

TextFlow могат да имат само тези два елемента, като деца: DIV и п. Ето как моделът може да се търси една история:

Тази йерархия Текст поток се превежда като XML документ, като се използват TLF Markup. Основно възлите могат да бъдат: TextFlow, DIV, P, A, IMG, педя, tcy, BR и раздела. В същото време, всеки възел е с класа ActionScript и BreakElement. Всички тези класове наследяват пряко или косвено от класа FlowElement.

Сега, нека видим как можете да създадете елемент TextFlow. По принцип, има два начина, можете да създадете елемент TextFlow: с помощта на XML обект, или чрез създаване на възли и събирането им заедно в едно дърво (подобно на създаването на XML, използва DOM).

Създаване TextFlow елемент, с помощта на XML :

private static const textInput:XML = <TextFlow xmlns="http://ns.adobe.com/textLayout/2008">
<div>
    <p>
        <img source="air.png"/>
        <span>Flex is a highly productive, free open source framework for building and maintaining expressive web applications...</span>
        <br/>
    </p>
      </div>
</TextFlow>;

private var textFlow:TextFlow = TextFilter.importToFlow(textInput, TextFilter.TEXT_LAYOUT_FORMAT);

Както можете да видите TextFilter клас се използва за импортиране на XML и създава инстанция на TextFlow. Вторият параметър на метода на вноса разказва какъв формат XML е писано. В този случай аз използвам TLF Markup.

Създаване на TextFlow FlowElement класове:

var textFlow:TextFlow = new TextFlow();
var p:ParagraphElement = new ParagraphElement();
var span:SpanElement = new SpanElement();
span.text = "Hello, World!";
p.addChild(span);
textFlow.addChild(p);

Модел и информация за форматирането

Както беше отбелязано по-рано, моделът съхранява информация за форматирането. Ако решите да създадете TextFlow елемент, който използва XML, след това можете да добавите свойства като атрибути на възел, който искате:

var text:XML = <TextFlow xmlns="http://ns.adobe.com/textLayout/2008" fontSize="14" textIndent="15" marginBottom="15" paddingTop="4" paddingLeft="4">"
       <p>
        <span>There are many </span>
        <span fontStyle="italic">such</span>
    </p>
</TextFlow>;

Или, ако сте го създадете от FlowElement класове, можете да го направите като този:

var cf:CharacterFormat = new CharacterFormat();
cf.fontSize = 14;
textFlow.characterFormat = cf;

Всички свойства, които могат да бъдат настроени за всички възли са групирани в три вида: контейнер, параграф, и характер свойства. Можете да видите API за пакет flashx.textlayout.formats тук.

Контейнер формати се прилагат върху целия контейнер на текст, например за имоти колона и подплата стойности. Контейнер формати могат да бъдат прилагани само върху една TextFlow, DivElement или друг клас, който реализира IContainerController. Можете да прилагате тези свойства чрез използване на инстанция на ContainerFormat класа.

Параграф формати се прилагат към целия абзац от текст: обосновка, маржове, табулатори. Те могат да се прилагат на TextFlow, DivElement и ParagraphElement прилагат тези формати, с помощта на инстанция на клас ParagraphFormat.

Character формати се прилагат само за един символ или план на героите: размер на шрифта, цвета, проследяване, kerning, горен. Можете да ги възлага на всеки FlowElement, като по този начин можете да зададете размера на шрифта за цялата история от създаването на собственост върху TextFlow, или SpanElement. Можете да използвате CharacterFormat клас да се прилагат свойствата.

Когато приложите даден формат на FlowElement, имате две възможности: да презапишете съществуващите формати, или да запази съществуващите, и да добавите нов формат. По-долу е код, илюстриращи двата варианта. За да запазите съществуващия формат, когато създавате нов формат преминават една инстанция на този формат на строителя.

//overwrite the characterFormat for the TextFlow
var cf:CharacterFormat = new CharacterFormat();
cf.fontSize = 14;
textFlow.characterFormat = cf;

//keeps the existent characterFormat, and change only the font size
var cf:CharacterFormat = new CharacterFormat(textFlow.characterFormat);
cf.fontSize = 14;
textFlow.characterFormat = cf;

И накрая, ако се прилагат промяна на шрифт, размер TextFlow елемент, тогава тази промяна ще се прилага за всички деца, които нямат шрифт, размер изрично е върху тях.

Важно: всеки път, когато се прилагат промени в TextFlow обект, който е изложен, трябва да се обадите метод updateAllContainers () flowComposer собственост на TextFlow обект, за да доведе до актуализация на дисплея:

   1: textFlow.flowComposer.updateAllContainers();

Изглед: показване на текст

Вие сте се научили как да се създаде модел за съхранение на текст с помощта на TextFlow клас. Сега е време да видите как можете да покажете този текст. По принцип, имате два варианта в зависимост от това какво ниво на контрол трябва да имате по текста. И двата метода конвертирате TextFlow в TextLine случаи, които са част от новия текст на Flash Engine. С цел да се покаже TextLine, вие трябва да я добавите към контрол, който е подклас на DisplayObjectContainer, като Sprite.

TextLineFactory

Ако просто искате да покажете текста и не искате да си взаимодействат с него (например, чрез избиране на части от него), тогава можете да използвате TextLineFactory. Този клас има две статични методи, createTextLineFromTextFlow и createTextLinesFromString, които създават TextLine обекти на TextFlow или низ. Ето един пример за това как да го използвате:

var sprite:Sprite = new Sprite();
//this serves as the bound for the text
var bounds:Rectangle = new Rectangle(0,0,300,100);
var txtStr:String = "This is sample text showing lines created by TextLineFactory.";
var characterFormat:CharacterFormat = new CharacterFormat();
characterFormat.fontSize = 48;

TextLineFactory.createTextLinesFromString(callback, txtStr, bounds, characterFormat);

//this is the callback function that will be called by createTextLinesFromString() 
//method for each TextLine
function callback(tl:TextLine):void{
    sprite.addChild(tl);
}

Flow Composer

Ако искате да бъдете в състояние да изберете или редактирате, тогава вие трябва да използвате Composer Flow. Всеки TextFlow инстанция е обект, който изпълнява IFlowComposer интерфейс. Можете да използвате собственост flowComposer на TextFlow за достъп до този обект. Този обект има методи да се сдружават на текста с един или повече контейнери и да се подготви текст за показване.

За контейнер можете да използвате всеки един случай, на DisplayObjectContainer, като Sprite например. За да се направи връзка между контейнер до друг, когато направите това, ако текстът прелива след първия резервоар, а след това тя ще се влее в втория контейнер, за да подкрепят превъртане или форматиране на контейнери, DisplayObjectContainer е обвита в една инстанция на DisplayObjectContainerController.

Това е, как можете да добавите контейнер на TextFlow обект и да доведе до форматирането и показването на текста :

var sprite:Sprite = new Sprite();
canvas.rawChildren.addChild(sprite);
var controller:IContainerController = new DisplayObjectContainerController(sprite, 600, 400);
textFlow.flowComposer.addController(controller);
textFlow.flowComposer.updateAllContainers();

Добавяне на възможности за взаимодействие на TextFlow

Ако искате да направите по избор на текст, трябва да използвате мениджър, SelectionManager, и го свързват с interactionManager собственост на TextFlow. Можете да настроите мениджър като този:

   1: textFlow.interactionManager = new SelectionManager();

След мениджър е назначен за interactionManager TextFlow “, TextFlow има достъп до събитие хендлери на мениджъра. Например, тя знае кога клавиш е натиснат, когато контейнерът губи или печалби фокуса, и, когато е избран текст.

Ако искате да разрешите редактиране на характеристики на върха на избор на функции, тогава ще използвате EditManager вместо на SelectionManager :

   1: textFlow.interactionManager = new EditManager();

И накрая, ако искате да разрешите на Undo / Redo команди, да използвате UndoManager, подобно на това :

   1: textFlow.interactionManager = new EditManager(new UndoManager());

Внос и износ на текст

За внос / износ използвате TextFilter обект от flashx.textlayout.conversion пакет. Вие вече сте видели един начин да импортирате XML на TextFlow. Това, което трябва да направите, е това:

   1: var textInput:XML = <TextFlow><div><span>Some text here.</span></div></TextFlow>;
   2: var textFlow:TextFlow = TextFilter.importToFlow(textInput, TextFilter.TEXT_LAYOUT_FORMAT);

Можете също да импортирате обикновен текст (конвертора, за да се направи разбор на низ, чрез създаването на втория аргумент, за да TextFilter.PLAIN_TEXT_FORMAT):

   1: var textInput:String = "Hello World, this is plain text";
   2: var textFlow:TextFlow = TextFilter.importToFlow(textInput, TextFilter.PLAIN_TEXT_FORMAT);

Рамковата Оформление на текста да експортирате текст във всеки един от три формата: обикновен текст, FXG или Format Оформление на текста. За пример, това е как да експортирате XML текст от съществуващ например TextFlow Формат на оформлението на текста:

   1: var out:XML = TextFilter.export(textFlow, TextFilter.TEXT_LAYOUT_FORMAT, ConversionType.XML_TYPE );

Код време: пример за използване на рамка за оформлението на текста в Flex 3.2

Ако искате да стартирате например, кликнете тук, можете да изтеглите проекта от тук. Този пример използва flowComposer. Аз използвам един контейнер, и textFlow е създаден с помощта на XML файл. В този XML имам четири параграфа на четири езика, две от тях са rleft-надясно, и двете са отдясно-наляво.

Също така добавя някои контроли за промяна на размера на шрифта, за промяна на броя на колоните, както и за промяна на посоката на текста за първите два параграфа.

Можете да кликнете върху текста, превъртете, редактирате, изтриете, вмъкнете, връщане, копие / паста и така нататък.

Без по-нататъшно забавяне, тук е изходния код (не забравяйте, че имате нужда Flex SDK 3.2, както и трите SWC библиотеки на Рамковата, ако решите да изтеглите проекта, тогава вие ще имате тези библиотеки):

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:local="*" layout="absolute" creationComplete="init()" horizontalScrollPolicy="off" viewSourceURL="srcview/index.html">
<mx:Script>
    <![CDATA[
        import mx.controls.CheckBox;
        import mx.collections.ArrayCollection;
        import flashx.textLayout.formats.Direction;
        import flashx.textLayout.elements.InlineGraphicElement;
        import flashx.textLayout.events.StatusChangeEvent;
        import flashx.textLayout.formats.ContainerFormat;
        import flashx.textLayout.formats.ICharacterFormat;
        import flashx.textLayout.formats.CharacterFormat;
        import mx.events.SliderEvent;
        import flashx.textLayout.edit.UndoManager;
        import flashx.textLayout.edit.EditManager;
        import flashx.textLayout.container.DisplayObjectContainerController;
        import flashx.textLayout.conversion.TextFilter;
        import flashx.textLayout.elements.TextFlow;


        public var directions:ArrayCollection = new ArrayCollection(
                            [
                                {label:"Left-to-Right", data:Direction.LTR},
                                {label:"Right-to-Left", data:Direction.RTL}
                            ]
                        );

        [Embed(source="air.png")]
        [Bindable]
        static public var imgClass:Class;

        private var _textContainer:Sprite = null;

        private static const textInput:XML = <TextFlow xmlns="http://ns.adobe.com/textLayout/2008">
<div>
 <span>And the text come here...</span>
</div>
</TextFlow>;

        private var _textFlow:TextFlow;

        private function init():void {
            _textContainer = new Sprite();
            canvas.rawChildren.addChild(_textContainer);

            _textFlow = TextFilter.importToFlow(textInput, TextFilter.TEXT_LAYOUT_FORMAT);
            _textFlow.flowComposer.addController(new DisplayObjectContainerController(_textContainer, canvas.width-40, canvas.height));
            _textFlow.addEventListener(StatusChangeEvent.INLINE_GRAPHIC_STATUS_CHANGED, picLoaded);
            //adding Select/Edit/Copy/Paste/Undo features
            _textFlow.interactionManager = new EditManager(new UndoManager());
            // initialize with a selection before the first character
            _textFlow.interactionManager.setSelection(0,0);

            _textFlow.flowComposer.updateAllContainers();
        }

        private function picLoaded(event:StatusChangeEvent):void {
            var image:InlineGraphicElement = event.element as InlineGraphicElement;
            _textFlow.flowComposer.updateAllContainers();
        }

        private function changeFontSize(event:SliderEvent):void {
            var cf:CharacterFormat = new CharacterFormat(_textFlow.characterFormat);
            cf.fontSize = event.value;
            _textFlow.characterFormat = cf;
            _textFlow.flowComposer.updateAllContainers();
        }

        private function changeNoColumns(event:SliderEvent):void {
            var cf:ContainerFormat = new ContainerFormat(_textFlow.containerFormat);
            cf.columnCount = event.value;
            cf.columnGap = 15;
            _textFlow.containerFormat = cf;
            _textFlow.flowComposer.updateAllContainers();
        }

        private function changeTextDirection(event:Event):void {
            _textFlow.direction = (event.target as ComboBox).selectedItem.data;
            _textFlow.flowComposer.updateAllContainers();
        }

    ]]>
</mx:Script>
    <mx:VBox x="20" y="20">
        <mx:Canvas id="canvas" width="600" height="400"  backgroundColor="#ffffff" verticalScrollPolicy="auto"/>
        <mx:HBox width="100%">
            <mx:HSlider labels="Font size:" minimum="10" maximum="22" snapInterval="1" change="changeFontSize(event)" enabled="true" />
            <mx:HSlider labels="No of Columns:" minimum="1" maximum="2" snapInterval="1" change="changeNoColumns(event)" enabled="true" />
            <mx:Label text="Text Direction:"/>
            <mx:ComboBox change="changeTextDirection(event)" dataProvider="{directions}"/>
        </mx:HBox>
    </mx:VBox>

</mx:Application>

Заключение

Така че, това е въвеждането на рамка за оформлението на текста. Ако искате да научите повече, първата стъпка е да отидете до лабораториите, където можете да погледнете в демо приложение (този, от който съм се трудил екранни снимки в началото на тази статия). Ако кликнете върху малката стрелка в горния десен ъгъл на това приложение, можете да изтеглите изходния код за текущата панел и вижте сами как да го направят. Можете да проверите това демо, което ви позволява да проучи много от типографските и възможности за оформлението на текста на TLF.

Можете да намерите APIs тук, и можете да изтеглите проби за Flash CS4, Flex 3.2, и бамя от лабораториите страница.

ПО-КЪСНО UPDATE: Ако се чудите как да добавите плъзгач за контрол на текста, прочетете този пост.

Comments are closed.