Metin Mizanpajı Çerçevesini Kullanma

TLF karmaşık alfabe desteği sağlar. Karmaşık alfabe desteği sağdan sola komut dosyalarını görüntüleme ve düzenleme özelliğini içerir. TLF ayrıca Arapça ve İbranice gibi soldan sağa ve sağdan sola alfabelerin bir karışımını görüntüleme ve düzenleme özelliğini de sağlar. Çerçeve yalnızca Çince, Japonca ve Kore dili için dikey metin mizanpajını desteklemekle kalmaz, aynı zamanda tate-chu-yoko (TCY öğeleri) özelliğini de destekler. TCY öğeleri dikey metin öbeklerine gömülü yatay metin bloklarıdır. Aşağıdaki komut dosyaları desteklenir:

Flash'ta özel bileşenler oluşturmak için doğrudan TLF sınıflarını kullanabilirsiniz. Ek olarak, Flash Professional CS5, TLF işlevselliğini kapsayan yeni bir sınıf sağlar: fl.text.TLFTextField ActionScript'te TLF'nin gelişmiş metin görüntüleme özelliklerini kullanan metin alanları oluşturmak için TLFTextField sınıfını kullanın. TextField sınıfıyla bir metin alanı oluşturduğunuz şekilde bir TLFTextField nesnesi oluşturun. Sonra, TLF sınıflarından gelişmiş biçimlendirme atamak için textFlow özelliğini kullanın.

Ayrıca metin aracını kullanarak sahne alanında TLFTextField örneği oluşturmak için de Flash Professional'ı kullanabilirsiniz. Ardından TLF sınıflarını kullanarak metin alanı içeriğinin biçimlendirmesini ve mizanpajını kontrol etmek için ActionScript'i kullanabilirsiniz. Daha fazla bilgi için Adobe Flash Platformu için ActionScript 3.0 Başvurusu'ndaki TLFTextField sınıfına bakın.

Flex'te çalışıyorsanız TLF sınıflarını kullanın. Daha fazla bilgi için bkz. Metin Mizanpajı Çerçevesini Kullanma .

Aşağıdaki adımlar Metin Mizanpajı Çerçevesi ile metin oluşturmanın genel sürecini açıklar:

Aşağıdaki örnek basit bir gazete sayfası düzenlemek için TLF kullanımını gösterir: Bu sayfa, büyük bir başlık, bir alt başlık ve birden çok sütun içeren bir gövde bölümü içerir:

package 
{ 
    import flash.display.Sprite; 
    import flash.display.StageAlign; 
    import flash.display.StageScaleMode; 
    import flash.events.Event; 
    import flash.geom.Rectangle; 
     
    import flashx.textLayout.compose.StandardFlowComposer; 
    import flashx.textLayout.container.ContainerController; 
    import flashx.textLayout.container.ScrollPolicy; 
    import flashx.textLayout.conversion.TextConverter; 
    import flashx.textLayout.elements.TextFlow; 
    import flashx.textLayout.formats.TextLayoutFormat; 
     
    public class TLFNewsLayout extends Sprite 
    { 
        private var hTextFlow:TextFlow; 
        private var headContainer:Sprite; 
        private var headlineController:ContainerController; 
        private var hContainerFormat:TextLayoutFormat; 
         
        private var bTextFlow:TextFlow; 
        private var bodyTextContainer:Sprite; 
        private var bodyController:ContainerController; 
        private var bodyTextContainerFormat:TextLayoutFormat; 
         
        private const headlineMarkup:String = "<flow:TextFlow xmlns:flow='http://ns.adobe.com/textLayout/2008'><flow:p textAlign='center'><flow:span fontFamily='Helvetica' fontSize='18'>TLF News Layout Example</flow:span><flow:br/><flow:span fontFamily='Helvetica' fontSize='14'>This example formats text like a newspaper page with a headline, a subtitle, and multiple columns</flow:span></flow:p></flow:TextFlow>"; 
         
        private const bodyMarkup:String = "<flow:TextFlow xmlns:flow='http://ns.adobe.com/textLayout/2008' fontSize='12' textIndent='10' marginBottom='15' paddingTop='4' paddingLeft='4'><flow:p marginBottom='inherit'><flow:span>There are many </flow:span><flow:span fontStyle='italic'>such</flow:span><flow:span> lime-kilns in that tract of country, for the purpose of burning the white marble which composes a large part of the substance of the hills. Some of them, built years ago, and long deserted, with weeds growing in the vacant round of the interior, which is open to the sky, and grass and wild-flowers rooting themselves into the chinks of the stones, look already like relics of antiquity, and may yet be overspread with the lichens of centuries to come. Others, where the lime-burner still feeds his daily and nightlong fire, afford points of interest to the wanderer among the hills, who seats himself on a log of wood or a fragment of marble, to hold a chat with the solitary man. It is a lonesome, and, when the character is inclined to thought, may be an intensely thoughtful occupation; as it proved in the case of Ethan Brand, who had mused to such strange purpose, in days gone by, while the fire in this very kiln was burning.</flow:span></flow:p><flow:p marginBottom='inherit'><flow:span>The man who now watched the fire was of a different order, and troubled himself with no thoughts save the very few that were requisite to his business. At frequent intervals, he flung back the clashing weight of the iron door, and, turning his face from the insufferable glare, thrust in huge logs of oak, or stirred the immense brands with a long pole. Within the furnace were seen the curling and riotous flames, and the burning marble, almost molten with the intensity of heat; while without, the reflection of the fire quivered on the dark intricacy of the surrounding forest, and showed in the foreground a bright and ruddy little picture of the hut, the spring beside its door, the athletic and coal-begrimed figure of the lime-burner, and the half-frightened child, shrinking into the protection of his father's shadow. And when again the iron door was closed, then reappeared the tender light of the half-full moon, which vainly strove to trace out the indistinct shapes of the neighboring mountains; and, in the upper sky, there was a flitting congregation of clouds, still faintly tinged with the rosy sunset, though thus far down into the valley the sunshine had vanished long and long ago.</flow:span></flow:p></flow:TextFlow>"; 
         
        public function TLFNewsLayout() 
        {      
            //wait for stage to exist 
            addEventListener(Event.ADDED_TO_STAGE, onAddedToStage);     
        } 
         
        private function onAddedToStage(evtObj:Event):void 
        { 
            removeEventListener(Event.ADDED_TO_STAGE, onAddedToStage); 
            stage.scaleMode = StageScaleMode.NO_SCALE; 
            stage.align = StageAlign.TOP_LEFT; 
             
            // Headline text flow and flow composer 
            hTextFlow = TextConverter.importToFlow(headlineMarkup, TextConverter.TEXT_LAYOUT_FORMAT); 
             
            // initialize the headline container and controller objects 
            headContainer = new Sprite(); 
            headlineController = new ContainerController(headContainer); 
            headlineController.verticalScrollPolicy = ScrollPolicy.OFF; 
            hContainerFormat = new TextLayoutFormat(); 
            hContainerFormat.paddingTop = 4; 
            hContainerFormat.paddingRight = 4; 
            hContainerFormat.paddingBottom = 4; 
            hContainerFormat.paddingLeft = 4; 
             
            headlineController.format = hContainerFormat; 
            hTextFlow.flowComposer.addController(headlineController); 
            addChild(headContainer); 
            stage.addEventListener(flash.events.Event.RESIZE, resizeHandler); 
             
            // Body text TextFlow and flow composer 
            bTextFlow = TextConverter.importToFlow(bodyMarkup, TextConverter.TEXT_LAYOUT_FORMAT); 
             
            // The body text container is below, and has three columns 
            bodyTextContainer = new Sprite(); 
            bodyController = new ContainerController(bodyTextContainer); 
            bodyTextContainerFormat = new TextLayoutFormat(); 
            bodyTextContainerFormat.columnCount = 3; 
            bodyTextContainerFormat.columnGap = 30; 
             
            bodyController.format = bodyTextContainerFormat; 
            bTextFlow.flowComposer.addController(bodyController); 
            addChild(bodyTextContainer); 
            resizeHandler(null); 
        } 
         
        private function resizeHandler(event:Event):void 
        { 
            const verticalGap:Number = 25; 
            const stagePadding:Number = 16; 
            var stageWidth:Number = stage.stageWidth - stagePadding; 
            var stageHeight:Number = stage.stageHeight - stagePadding; 
            var headlineWidth:Number = stageWidth; 
            var headlineContainerHeight:Number = stageHeight; 
             
            // Initial compose to get height of headline after resize 
            headlineController.setCompositionSize(headlineWidth, 
headlineContainerHeight); 
            hTextFlow.flowComposer.compose(); 
            var rect:Rectangle = headlineController.getContentBounds(); 
            headlineContainerHeight = rect.height; 
             
            // Resize and place headline text container 
            // Call setCompositionSize() again with updated headline height 
            headlineController.setCompositionSize(headlineWidth, headlineContainerHeight ); 
            headlineController.container.x = stagePadding / 2; 
            headlineController.container.y = stagePadding / 2; 
            hTextFlow.flowComposer.updateAllControllers(); 
             
            // Resize and place body text container 
            var bodyContainerHeight:Number = (stageHeight - verticalGap - headlineContainerHeight); 
            bodyController.format = bodyTextContainerFormat; 
            bodyController.setCompositionSize(stageWidth, bodyContainerHeight ); 
            bodyController.container.x = (stagePadding/2); 
            bodyController.container.y = (stagePadding/2) + headlineContainerHeight + verticalGap; 
            bTextFlow.flowComposer.updateAllControllers(); 
        } 
    } 
} 

TLFNewsLayout sınıfı iki metin kabı kullanır. Bir kap başlığı ve alt başlığı ve diğeri üç sütunlu gövde metnini görüntüler. Kolaylık için metin örneğin içine TLF Biçimlendirmesi metni olarak sabit bir şekilde kodlanmıştır. headlineMarkup değişkeni hem başlık hem de alt başlığı içerir ve bodyMarkup değişkeni gövde metnini içerir. TLF Biçimlendirmesi ile ilgili daha fazla bilgi için bkz. TLF ile metin yapılandırma .

hTextFlow = TextConverter.importToFlow(headlineMarkup, TextConverter.TEXT_LAYOUT_FORMAT); 

headContainer = new Sprite(); 
headlineController = new ContainerController(headContainer);

hContainerFormat = new TextLayoutFormat();

Denetleyici akış oluşturucusuna atanır ve işlev kabı görüntüleme listesine ekler. Gerçek kompozisyon ve kapların görüntülenmesi resizeHandler() yöntemine ertelenir. Aynı adım sıralaması gövde TextFlow nesnesini başlatmak için gerçekleştirilir.

resizeHandler() yöntemi kapları oluşturmak için uygun olan alanı ölçer ve buna göre kapları boyutlandırır. compose() yöntemine yapılan ilk çağrı başlık kabının uygun yüksekliğinin hesaplanmasına olanak verir. resizeHandler() yöntemi o zaman başlık kabını updateAllControllers() yöntemiyle yerleştirip görüntüleyebilir. Son olarak, resizeHandler() yöntemi, başlık kabının boyutunu gövde metni kabının yerleşimini ayarlamak için kullanır.

TLF Biçimlendirmesi ile ilgili işlem yaparken TLF'nin yapısını anlamak faydalıdır. TLF Biçimlendirmesi TLF'nin bir parçası olan metnin XML temsilidir. Çerçeve diğer XML biçimlerini desteklese de, TLF Biçimlendirmesi özellikle TextFlow hiyerarşisinin yapısına bağlı olması açısından benzersizdir. Bu işaretleme biçimini kullanarak dışa XML aktarırsanız, XML bu hiyerarşi korunarak dışa aktarılır.

TLF Biçimlendirmesi, bir TextFlow hiyerarşisinde metnin en uygun temsilini sağlar. Biçimlendirme dili TextFlow hiyerarşisinin her bir temel öğesi için etiket sağlar ve ayrıca TextLayoutFormat sınıfı içinde mevcut olan tüm biçimlendirme sınıfları için nitelik sağlar.

Aşağıdaki tablo TLF İşaretleyicisi’nde kullanılabilen etiketleri içerir.

Metin denetimlerinize madde işaretli listeler eklemek için ListElement ve ListItemElement sınıflarını kullanabilirsiniz. Madde işaretli listeler yuvalanabilir ve farklı madde işaretleri (veya işaretçiler) ve otomatik numaralandırmanın yanı sıra ana hat stili numaralandırma kullanmak için özelleştirilebilir.

Metin akışlarınızda listeler oluşturmak için <list> etiketini kullanın. Daha sonra listedeki her liste öğesi için <list> etiketi içindeki <li> etiketlerini kullanın. ListMarkerFormat sınıfını kullanarak madde işaretlerinin görünümünü özelleştirebilirsiniz.

<flow:list paddingRight="24" paddingLeft="24"> 
    <flow:li>Item 1</flow:li> 
    <flow:li>Item 2</flow:li> 
    <flow:li>Item 3</flow:li> 
</flow:list>

<flow:list paddingRight="24" paddingLeft="24"> 
    <flow:li>Item 1</flow:li> 
    <flow:list paddingRight="24" paddingLeft="24"> 
        <flow:li>Item 1a</flow:li> 
        <flow:li>Item 1b</flow:li> 
        <flow:li>Item 1c</flow:li> 
    </flow:list> 
    <flow:li>Item 2</flow:li> 
    <flow:li>Item 3</flow:li> 
</flow:list>

<flow:list paddingRight="24" paddingLeft="24" listStyleType="upperAlpha">     <flow:li>upperAlpha item</flow:li>     <flow:li>another</flow:li> </flow:list> <flow:list paddingRight="24" paddingLeft="24" listStyleType="lowerAlpha">     <flow:li>lowerAlpha item</flow:li>     <flow:li>another</flow:li> </flow:list> <flow:list paddingRight="24" paddingLeft="24" listStyleType="upperRoman">     <flow:li>upperRoman item</flow:li>     <flow:li>another</flow:li> </flow:list> <flow:list paddingRight="24" paddingLeft="24" listStyleType="lowerRoman">     <flow:listMarkerFormat>         <!-- Increments the list by 2s rather than 1s. -->         <flow:ListMarkerFormat counterIncrement="ordered 2"/>     </flow:listMarkerFormat>     <flow:li>lowerRoman item</flow:li>     <flow:li>another</flow:li> </flow:list>

Sayacı tanımlamak için ListMarkerFormat sınıfını kullanırsınız. Sayacın artışını tanımlamanın yanı sıra, ayrıca counterReset özelliğiyle sıfırlayarak sayacı özelleştirebilirsiniz.

Listelerinizdeki işaretçilerin görünümünü ListMarkerFormat öğesinin beforeContent ve afterContent özelliklerini kullanarak daha fazla özelleştirebilirsiniz. Bu özellikler, işaretçinin içeriğinden önce ve sonra görüntülenen içeriğe uygulanır.

<flow:list listStyleType="upperRoman" paddingLeft="36" paddingRight="24"> 
    <flow:listMarkerFormat> 
        <flow:ListMarkerFormat fontSize="16" 
            beforeContent="XX" 
            afterContent="YY" 
            counterIncrement="ordered -1"/> 
        </flow:listMarkerFormat> 
    <flow:li>Item 1</flow:li> 
    <flow:li>Item 2</flow:li> 
    <flow:li>Item 3</flow:li> 
</flow:list>

<flow:list listStyleType="disc"  paddingLeft="96" paddingRight="24"> 
    <flow:listMarkerFormat> 
        <flow:ListMarkerFormat fontSize="16" 
            beforeContent="Section " 
            content="counters(ordered,&quot;*&quot;,upperRoman)" 
            afterContent=": "/> 
    </flow:listMarkerFormat> 
    <flow:li>Item 1</li> 
    <flow:li>Item 2</li> 
    <flow:li>Item 3</li> 
</flow:list>

Önceki örnekte gösterildiği gibi content özelliği ayrıca bir sonek ekleyebilir: işaretçiden sonra ancak afterContent öğesinden önce görüntülenen bir dize. Akışa XML içeriği sağlarken bu dizeyi eklemek için dizeyi tırnak işaretleri ( "< string >" ) yerine &quote; HTML varlıklarının içine sarın.

Her FlowElement öğesi, her öğenin içerik alanının konumunu ve içerik alanları arasındaki boşluğu denetlemek için kullandığınız dolgu özelliklerini destekler.

Bir öğenin toplam genişliği içeriğinin genişliği artı paddingLeft ve paddingRight özelliklerinin toplamıdır. Bir öğenin toplam yüksekliği içeriğinin yüksekliği artı paddingTop ve paddingBottom özelliklerinin toplamıdır.

Dolgu özellikleri span öğelerine uygulanamaz.

<flow:TextFlow version="2.0.0" xmlns:flow="http://ns.adobe.com/textLayout/2008" fontSize="14" textIndent="15" paddingTop="4" paddingLeft="4" fontFamily="Times New Roman">

Dolgu özellikleri için geçerli değerler sayı (piksel olarak), “auto” veya “inherit” değerleridir. Varsayılan değer “auto” değeridir. Bu ListElement dışındaki tüm öğeler için otomatik olarak hesaplandığı ve 0 olarak ayarlandığı anlamına gelir. ListElements için listAutoPadding özelliğinin değerinin kullanıldığı listenin başlangıç tarafı dışında “auto” değeri 0'dır. listAutoPadding öğesinin varsayılan değeri 40'tır. Bu, listelere varsayılan bir girinti verir.

Dolgu özellikleri varsayılan olarak devralmaz. “auto” ve “inherit” değerleri FormatValue sınıfı tarafından tanımlanan sabitlerdir.

Doldurma özellikleri negatif değerler olabilir.

Doğrudan atama ile herhangi bir FlowElement öğesinde biçimleri ayarlayabilirsiniz. FlowElement sınıfı ITextLayoutFormat arabirimini uygular, bu nedenle FlowElement sınıfının herhangi bir alt sınıfı da o arabirimi uygulamalıdır.

Örneğin, aşağıdaki kod bir ParagraphElement örneğine bağımsız biçimlerin nasıl atanacağını gösterir:

var p:ParagraphElement = new ParagraphElement(); 
p.fontSize = 18; 
p.fontFamily = "Arial";

TextLayoutFormat sınıfıyla bir FlowElement öğesine biçimler uygulayabilirsiniz. Bu sınıfı istediğiniz tüm biçimlendirme değerlerini içeren özel bir biçimlendirme nesnesi oluşturarak kullanabilirsiniz. Daha sonra bu nesneyi herhangi bir FlowElement nesnesinin format özelliğine atayabilirsiniz. TextLayoutFormat ve FlowElement öğelerinin ikisi de ITextLayoutFormat arabirimini uygular. Bu düzenleme iki sınıfın da kesin olarak aynı biçim özelliklerini içermesini sağlar.

Daha fazla bilgi için Adobe Flash Platformu için ActionScript 3.0 Başvurusu'ndaki TextLayoutFormat sınıfına bakın.

Biçimler metin akışı hiyerarşisi aracılığıyla devralınır. Bir TextLayoutFormat örneğini alt öğelere sahip bir FlowElement örneğine atarsanız, çerçeve basamaklama adı verilen bir işlem başlatır. Bir basamaklama sırasında, çerçeve FlowElement öğenizden miras alan hiyerarşideki her düğümü tekrarlı bir şekilde inceler. Sonra, miras alınan değerlerin her biçimlendirme özelliğine atanıp atanmayacağına karar verir. Basamaklama sırasında şu kurallar geçerlidir:

Örneğin TextFlow düzeyinde fontSize değerini ayarlarsanız, ayar TextFlow içindeki tüm öğelere uygulanır. Başka bir deyişle, değerler metin akışı hiyerarşisine basamaklı olarak uygulanır. Ancak, doğrudan öğeye yeni bir değer atayarak belirli bir öğedeki değeri geçersiz kılabilirsiniz. Buna aykırı bir örnek olarak, TextFlow düzeyi için backgroundColor değerini ayarlarsanız, TextFlow öğesinin alt öğeleri o değeri miras almaz. backgroundColor özelliği bir basamaklama sırasında üst özelliklerinden miras almayan bir özelliktir. Her bir alt öğedeki backgroundColor özelliğini flashx.textLayout.formats.FormatValue.INHERIT olarak ayarlayarak bu davranışı geçersiz kılabilirsiniz..

Daha fazla bilgi için Adobe Flash Platformu için ActionScript 3.0 Başvurusu'ndaki TextLayoutFormat sınıfına bakın.

Basit yaklaşım, flashx.textLayout.factory paketinde bulunabilen TextFlowTextLineFactory sınıfını kullanır. Bu yaklaşımın avantajı, basit olmasının yanı sıra, FlowComposer yaklaşımından daha küçük bir bellek izine sahip olmasıdır. Bu yaklaşım kullanıcının düzenlemesi, seçmesi veya kaydırması gerekmeyen statik metin için önerilebilir.

Daha fazla bilgi için Adobe Flash Platformu için ActionScript 3.0 Başvurusu'ndaki TextFlowTextLineFactory sınıfına bakın.

Metnin görüntüsü üzerinde TexFlowTextLineFactory tarafından sağlanandan daha fazla kontrol istiyorsanız akış oluşturucu kullanın. Örneğin, akış oluşturucusuyla kullanıcılarınız metni seçebilir ve düzenleyebilir. Daha fazla bilgi için bkz. TLF ile metin seçimini, düzenlemeyi ve geri almayı etkinleştirme .

Akış oluşturucusu, flashx.textLayout.compose paketindeki StandardFlowComposer sınıfının bir örneğidir. Akış oluşturucusu TextFlow öğesinin TextLine örneklerine dönüşümünü ve bu TextLine örneklerinin bir veya daha fazla kaba yerleştirilmesini yönetir.

Grafiği tam boyut görüntüle

Bir IFlowComposer, sıfır veya daha fazla ContainerController öğesine sahiptir.

Her TextFlow nesnesi, IFlowComposer arabirimini uygulayan bir karşılık gelen nesneye sahiptir. IFlowComposer nesnesine TextFlow.flowComposer özelliğinden erişilebilir. Bu özellik ile IFlowComposer arabirimi tarafından tanımlanan yöntemleri çağırabilirsiniz. Bu yöntemler metni bir veya daha fazla kapla ilişkilendirmenize ve metni bir kapta görüntülemeye hazırlamanıza izin verir.

Kap, DisplayObjectContainer sınıfının bir alt sınıfı olan Sprite sınıfının bir örneğidir. Bu sınıfların her ikisi de Flash Player görüntüleme listesi API'sinin parçasıdır. Bir kap, TextLineFactory sınıfı ile kullanılan daha gelişmiş bir sınırlama dikdörtgeni formudur. Sınırlama Rectangle öğesi gibi, kap da TextLine örneklerinin göründüğü alanı tanımlar. Sınırlama dikdörtgeninin aksine, bir kabın karşılık gelen “denetleyici” nesnesi vardır. Denetleyici bir kap veya kap grubu için kaydırmayı, kompozisyonu, bağlamayı, biçimlendirmeyi ve olay işlemeyi yönetir. Her kapta flashx.textLayout.container paketinde ContainerController sınıfının bir örneği olan karşılık gelen bir denetleyici nesnesi vardır.

Metin görüntülemek için kabı yönetmek ve kabı bir akış oluşturucusuyla ilişkilendirmek için controller nesnesi oluşturun. Kabı ilişkilendirdikten sonra, görüntülenebilmesi için metni oluşturun. Buna bağlı olarak, kaplar iki duruma sahiptir: kompozisyon ve görüntüleme. Metin oluşturma, metin akışı hiyerarşisindeki metni TextLine örneklerine dönüştürme ve bu örneklerin kaba sığıp sığmayacağını hesaplama işlemidir. Görüntüleme, Flash Player görüntüleme listesini güncelleme işlemidir.

Daha fazla bilgi için Adobe Flash Platformu için ActionScript 3.0 Başvurusu'nda IFlowComposer , StandardFlowComposer ve ContainerController öğelerine bakın.