معالجة في CSS في Flex: أزرار في RichTexteditor فقط؟

Question

أريد تغيير خصائص الخط للأزرار في شريط الأدوات الخاص بـ RichTexteditor ، لكنني أريدها أن تكون مختلفة عن الأزرار الأخرى في طلبي. هل هناك أي طريقة للقيام بذلك مع CSS فقط؟ أعلم أنه يمكنني القيام بذلك باستخدام SetStyle إذا لزم الأمر ...

Answer 1

طريقة واحدة للقيام بذلك ، نظرًا لأن المكونات الفرعية لـ RichTexteditor يتم الإعلان عنها في MXML وبالتالي يمكن الوصول إليها من قبل ، هي تعيينهم styleName الخصائص بشكل فردي في وقت التشغيل (بعد الحاوية creationComplete حرائق الحدث ، للتأكد من إنشاء المحرر وجميع أطفاله) ، مثل ذلك:

<mx:Style>

    .myRTECombo
    {
        color: #FF0000;
    }

</mx:Style>

<mx:Script>
    <![CDATA[

        private function creationCompleteHandler(event:Event):void
        {
            rte.fontFamilyCombo.styleName = "myRTECombo";
            rte.fontSizeCombo.styleName = "myRTECombo";
        }

    ]]>
</mx:Script>

<mx:RichTextEditor id="rte" />

لا تستدعي مستندات Flex المستندات الفرعية ("Boldbutton" ، "FontsizeCombo" ، وآخرون) حسب المعرف ، لكن مصدر المكون متاح للعرض ، لذلك يجب أن تكون قادرًا على الحصول على جميع المعلومات التي تحتاجها من الكود المصدري بحد ذاتها. نظرًا لأنني أستخدم FlexBuilder ، عادةً ما أستخدم اختصار Eclipse Ctrl+، على اسم العلامة/الفئة ، للقفز إلى ملف تعريف الفئة المرتبط به ، ولكن يمكنك أيضًا فتح الملف المصدر مباشرة على [installdir]/sdks/[الإصدار ] /frameworks/src/mx/richtexteditor.mxml لإلقاء نظرة على نفسك.

أنا متأكد من أن هناك مناهج أخرى (setStyle كونه واحدًا ، على الرغم من أن استخدامه الصريح يتم تثبيته بشكل عام لأسباب في الأداء) ، ولكن يجب أن ينجح هذا من أجلك. شيء واحد يجب ملاحظته ، كما سترى عند البحث في مصدر المكون ، هو أن العديد من الأزرار الموجودة في مجموعة الأزرار الافتراضية تستخدم بالفعل PNGs (على سبيل المثال ، icon_style_bold.png) ، وليس النص ، وهذا هو السبب في أن مثالي يتضمن إشارة إلى Combobox بدلاً من ذلك ، حتى تتمكن من معرفة كيفية تطبيق تغييرات اللون ؛ إذا كنت ترغب في تغيير مظهر الأزرار ، فكن على دراية بأنهم يستخدمون القابل للتصميم icon الممتلكات ، وليس الإعدادات على غرار الخط ، لمظهرهم ومظهرهم.

أتمنى أن يساعد!

Answer 2

شكرا christian nunciato! هذا هو الكود النهائي الخاص بي ، في مكون الخاص بي وهو عبارة عن RichTexteditor (يمتده). في CreationComplete ، أسمي هذا

private function setUpStyleNames():void {
    setUpStyleNamesInner(toolbar.getChildren());
    setUpStyleNamesInner(toolBar2.getChildren());
}

private function setUpStyleNamesInner(children:Array):void {
    for each (var child:DisplayObject in children) {
        if (child is UIComponent) {
            UIComponent(child).styleName = "rteInnards";
        }
    }
}

ثم في ورقة الأنماط ، لدي هذا

.rteInnards {
    color: #FF0000;
    fontSize: 25px;
}

رائع. شكرًا لك مرة أخرى!