1) 编译CSS资源
文件浏览器(Navigator)中,在标准的Flex CSS文件上点击右键,点击Compile CSS to SWF即可完成编译CSS的任务。
在程序中可以用StyleManager.loadStyleDeclarations()来读出已编译好的CSS文件中的内容。
具体操作如下:
// 读取Style
private function loadStyle():void
{
var eventDispatcher:IEventDispatcher = StyleManager.loadStyleDeclarations("xxx.swf");
eventDispatcher.addEventListener(StyleEvent.COMPLETE, completeHandler);
}
然后,
// 读取完毕的处理
private function completeHandler(event:StyleEvent):void
{
// 具体的处理内容
………………
super.initialized = true;
}
做好了这两个函数后,在要调用的页面编辑它的preinitialize属性,指向loadStyle(),如:
<mx:Application xmlns:mx=http://www.adobe.com/2006/mxml layout="absolute" preinitialize="loadStyle()">
2) 编译locale文件
为了国际化的需要,我们需要使用locale文件或国际化相关技术。
最简单的方法是本地化编译,即编译不同的语言版本,然后使用Application Server来判定客户使用的是哪种语言,并自动指向对应的swf文件。
具体做法如下:
在项目上点击右键,选择Properties。
然后选择Flex Compiler,在Additional Compiler arguments下面已经配置好语言包了,默认为-locale en_US。
这时我们可以用一个locale目录来简单定制我们额外设置(当然不包括Flex内部控件的语言)的语言设置。
比如改为:-locale=en_US -source-path+=g:\flexproj\locale\{locale}。这样在g盘的flexproj目录下建立一个locale目录。
然后目录下放置包含我们要扩展的语言文件的文件夹就可以了。比如:g:\flexproj\locale\en_US。
注意:locale下面的目录名应该和-locale=设置的名称一致。
那么这样,我们就可以使用额外的语言设置了。
例:
Additional Compiler arguments配置为
-locale+=en_US -source-path+=g:\flexproj\testgoufang\locale\{locale}
然后在对应的locale目录下添加国际化资源文件,如图:
这一部分跟struts相似。
里面的内容为键=值的形式,如:
Title=测试项目
User=用户名
Password=密码
…………
…………
使用的时候可以通过[ResourceBundle]元数据标签来绑定locale文件,如:
<mx:Metadata>
[ResourceBundle("strings")]
</mx:Metadata>
即绑定上文提到的strings.properties文件,然后我们可以通过ResoueceManager来读出其中的内容,比如:
var Title : String = resourceManager.getString("strings", 'Title');
或者绑定到控件:
[Bindable]
private var Title:String;
…………
Title = resourceManager.getString("strings", 'Title');
…………
<mx:Label text="{Title}"/>
上面对针对国际化而使用locale文件的方式做了一个简单的介绍,不过问题还是很多,比如Flex控件的国际化,动态国际化用上面的方法都无法做到。也就是说如果我使用Flex的控件,就必须在程序中指定,或者额外挂在国际化的xxx. Properties文件来进行国际化,并且,只能静态编译多个版本,然后让Application Server根据不同的语言来定位不同版本的SWF文件来进行,这是很不方便的。其实Flex是可以做到的。
下面我们来看比较复杂的定制国际化方案:
首先,了解一些背景,Flex内部的国际化文件/库只支持两个版本,一个是en_US,另一个是ja_JP。也就是说,开发者在编译Flex项目的时候在Additional Compiler arguments下配置locale=zh_CN是一定会报错的。
原因是因为zh_CN库,Flex是没有提供的。
那么应该怎么办呢,答案是:自己来构建一个。
事实上,在Flex的sdk中已经提供了所有国际化文本的源码,我们可以通过这些源码来进行核心的国际化功能。
我们可以在sdk的目录下找到对应的源码文件夹,如:
D:\Program Files\Adobe\Flex Builder 3\sdks\moxie\frameworks\projects\framework\bundles\en_US
这样我们可以根据这个原型的复制品来制作其他语言包。
比如,我们来制作一个中文语言包:
首先,先在bundles下创建en_US的副本,然后将副本更名为zh_CN,然后把zh_CN下面的具体内容翻译成中文。
在sdk下输入
bin\compc -locale=zh_CN -source-path=frameworks/projects/framework/bundles/zh_CN/src -include-resource-bundles=collections,containers,controls,core,effects,formatters,logging,SharedResources,skins,states,styles,validators
-output=frameworks/locale/zh_CN/framework_rb.swc
则会将Flex的collections,containers,controls,core,effects,formatters,logging,SharedResources,skins,states,styles,validators模块的语言源文件编译成frameworks/locale/zh_CN/framework_rb.swc的语言库文件,这样,在Additional Compiler arguments下配置locale=zh_CN就不会报错了。
此外,语言文件也可以像CSS文件一样编译成SWF文件:
mxmlc -locale= zh_CN
-source-path=locale/{locale} -allow-source-path-overlap=true -include-resource-bundles=collections,containers,controls,core,effects,myResources,skins,styles -output=Resources_ zh_CN.swf
编译后的文件更小,效率会更高。
在Flex中动态使用国际化:
之前我们所讲都是通过Application Server跟据不同的语言来定位不用的SWF文件来实现国际化的。现在,我们来讲一下,如何在Flex中,动态指定国际化语言。
首先,我们应通过Additional Compiler arguments的locale选项来指定多个语言:
-locale=zh_CN,en_US,我们也可以这样-locale+=zh_CN,因为en_US为默认语言。
然后,我们可以在程序中指定语言顺序链
resourceManager.localeChain = [ "zh_CN", "en_US" ];
这样我们通过resourceManager.localeChain = [0];就可以选择zh_CN了。
在外部,我们可以通过html-template目录下对index.template.html进行修改,来达到动态更换语言的目的,当然,这也需要Application Server的支持,不过,不再是定位到不同的SWF文件了,比如下面的JS脚本:
AC_FL_RunContent(
"src", "${swf}",
"FlashVars", "localeChain=zh_CN",
"width", "${width}",
"height", "${height}",
"align", "middle",
"id", "${application}",
"quality", "high",
"bgcolor", "${bgcolor}",
"name", "${application}",
"allowScriptAccess","sameDomain",
"type", "application/x-shockwave-flash",
"pluginspage", "http://www.adobe.com/go/getflashplayer"
);
我们可以利用JSP或者ASP.NET动态替换红色的部分,来动态的更换语言
当然,我们也可以引用编译的文件,只需要把红色的部分改为:
"FlashVars", "resourceModuleURLs=Resources_zh_CN.swf&localeChain= zh_CN ",
这样就可以了。
分享到:
相关推荐
使用方法: 引入: add silvergreen-2.1.swc to libs 使用(SWC方案): 在IDE(如:Flash Builder)里面,增加一个编译参数: ... <fx:Style source="com\ksria\flex\silvergreen\spark\style.css" />
6.1 Flex编译过程 6.1.1 开发 6.1.2 编译 6.1.3发布 6.2 关于项目 6.3 创建Flex应用程序 6.3.1 创建一个Flex项目 6.3.2 使用设计模式 6.3.3 使用数据绑定 6.3.4 使用触发器和特效 ...
最近在学习微信小程序,在设计首页布局的时候,新认识了一种布局方式display:flex .container { display: flex; flex-direction: column; align-items: center; background-color: #b3d4db; } 编译之后的效果...
CSS GuideBook 目录 基础概念 属性 布局 基础布局 内联块级布局 文档流布局 定位布局 浮动布局 清除浮动 弹性布局 表格布局 居中布局 水平居中 垂直居中 水平垂直居中 多栏布局 双栏布局 三栏布局 多栏布局 网格布局...
使用正则表达式创建国际化邮政编码Validator 15.4节. 如何创建一个Validator去验证通用商品代码(UPC) 15.5节. 如何去验证多个Combo Box及Radio Button组件 15.6节. 如何在一个表单内通过ToolTips来返映一个错误 ...
Flex:FlexBox For Reason这是CSS Flexbox布局的本机Reason实现。 它是瑜伽项目的一个港口。 也可以将其编译为JavaScript。 生成和安装Install esy Esy是Flex:FlexBox For Reason这是CSS Flexbox布局的本机Reason...
始终与您的tailwind.css文件同步(只需确保重新构建!) (使用PurgeCSS和tailwind-ppx的自定义提取器功能) ,将所有现有的className="..."为className=[%tw "..."] 即将来临 检查冗余的类名(例如同时具有flex-row...
babel-plugin-transform-styles 这自动生成阵营从在编译时CSS文件导入语句秒。例克隆存储库后,您应该能够如下运行。 - cd examples/Vanilla- npm install- npm run simulator 例如,给定以下CSS文件. container { ...
Gridflex gridflex.css是带有Display flex的轻型,响应式Grid布局。 入门 在您的项目中开始使用gridflex。 您可以手动安装或使用NPM。 手动安装 下载已编译并或。 使用CDN安装 ...
Flex 4:开发RIA 应用程序 课程简介 掌握学习法简介 ................................................................................................................................................. 2 ...
相反,它通过npm使用UnderStrap父主题作为依赖项,并从中编译自己CSS文件。 Understrap Child Theme使用Enqueue方法以正确的方式加载和排序CSS文件,而不是使用旧的@import方法。 安装 首先安装父主题UnderStrap:...
webpack4.16.2-配置
毕业设计 课程设计 学习使用 基于 Vue(2.5) + vuex + vue-router + vue-axios +better-...SCSS:CSS 预编译处理器 ES6:ECMAScript 新一代语法,模块化、解构赋值、Promise、Class 等方法非常好用 后端 Node.js:利
8-4 docker样式的编写的docker-item display:flex flex:1 =>平均分配常用文字12px 13px继承主体的字体大小查找图标icon-font iconfont.css文件copy @ font-face .iconfont新建iconfont.scss iconfont生成cdn main
遵循All in js的想法,让CSS样式传递诸如React组件之类的参数,并通过Styled-Components编译前端CSS样式。一个UI现在已经发布了正式版本,但是您仍然可以通过请求请求来解决复杂使用场景中的一些问题。 为什么? 为...
与文档的链接,使您可以更深入地了解所涵盖的工具。 其中,对每个人来说最主要的是Sass。 工具 CSS缓动-贝塞尔曲线 任务自动化器 编译Sass- 生成图像精灵 HTML模板 CSS预处理器 较少的 参考 在我向您展示的参考...
Flex 布局:大量使用flex布局,结合rpx响应式单位,适合移动端全屏幕尺寸Sass(Scss) : css预编译处理器sass --watch a.scss:a.wxss ES6 : ECMAScript新一代语法,重组,解构赋值, Promise , Class等方法非常...
基于使用Sass和BEM命名约定的flex显示属性的网格。 快速安装 打开您的主要Sass文件,导入_grid.sass并进行编译。 用法 它的工作方式类似于flexboxgrid,但是使用BEM命名约定,这使开发人员可以更轻松地跟踪和导入...