不同语言的皮肤答案

【问题标题】：Skinning for different languages不同语言的皮肤
【发布时间】：2013-04-10 08:12:36
【问题描述】：

我有一个当前支持英语的 flex 应用程序，现在我的任务是将它翻译成不同的语言，这需要支持不同的样式参数，例如，一些按钮需要更宽，一些字体大小需要改变.

起初我尝试在运行时添加一个 css 文件，但被忽略了（我猜是因为组件附加了皮肤文件）

我的问题是支持多语言/样式的 flex 应用程序（css 或皮肤）的推荐方法是什么，以及如何使用皮肤？

谢谢！！

【问题讨论】：

w3.org/International/questions/qa-css-lang
@cimmanon 我严重怀疑 Flex 的 CSS 方言是否支持。
我猜你应该能够做类似s|Button.en_US { skinClass: ClassReference("skins.en_US.ButtonSkin") } 的事情，你可以在任何需要这个的按钮上使用选定的语言环境作为 styleName (<s:Button styleName="{resourceManager.getPreferredLocaleChain()[0]}"/>)。

标签： css apache-flex skinning flex-spark

【解决方案1】：

一种方法

支持多语言/样式化的弹性应用程序

是手动的 - 每种语言都有一个 Flex 应用程序项目，每个项目都包含适当的样式和资源文件。您可以将公共代码移动到每个应用程序所依赖的库项目中......但这不会很好地扩展到超过 3 种语言。

更好但更复杂的是只有一个应用程序，它在运行时加载一个语言 ResourceBundle 和一个特定于语言的 CSS 文件。

首先，您的应用程序需要“知道”它所显示的语言。也许您对用户进行身份验证，从服务器了解他们的语言环境，然后为该语言环境加载 ResourceBundle。

第二次加载特定于语言环境的 CSS 以适应加载的语言。我建议您将样式表拆分为“main”（编译到应用程序中，具有所有不会更改的样式）和“locale”（仅包含根据语言更改的样式）。

在您的应用程序启动过程中尽早加载您的语言 .css 文件（例如，从服务器 URL），类似于

var cssLoader:URLLoader = new URLLoader();
var req:URLRequest = new URLRequest("path_to_server_side_css_file");
cssLoader.addEventListener(Event.COMPLETE, cssLoadCompleteHandler);
cssLoader.addEventListener(IOErrorEvent.IO_ERROR, someErrorHandler);
cssLoader.load(req);

在 cssLoadCompleteHandler() 中，魔法发生了。你想去掉任何可能会影响你的解析的东西，比如 cmets、空行，也许是命名空间。然后迭代提取每个样式、选择器等的文件。基本上你在这里是字符串黑客，这从来都不是最有趣的代码：/ 这是一个不平凡的代码块，你会想要最干净、最有纪律的CSS 文件，你必须让它工作。它与尝试解析 HTML 的复杂性没有什么不同，除了希望您可以控制 CSS 输入的质量。（相信我，你会想要对此进行一些测试）

无论如何...一旦您拥有了每种样式，例如.foo{} 或 #bar {} 等，然后调用

FlexGlobals.topLevelApplication.styleManager.setStyleDeclaration(...) ;

依次为每一个。最后调用

FlexGlobals.topLevelApplication.styleManager.styleDeclarationsChanged();

现在您可以在您的 Skin 类中使用样式（通过 styleManager.getStyleDeclaration("")）来获得您需要的样式，无论是从烘焙样式还是动态加载的样式。

希望能有所帮助。它可以做到，但实施起来并非易事。祝你好运。

【讨论】：