Flex+Lucene+s2sh开发订餐系统开发第六步:后台主界面设计

jk2345 — Mon, 21 Jun 2010 13:24:28 +0000

后台界面将模拟Windows系统的桌面。
1.首先发现使用LinkButton有这个类似与桌面图标的选取效果。所以在图标上面使用LinkButton来充当。
2.在桌面有网格对齐，这时就可以选择Flex里面的Grid来充当。

一、添加桌面图标
步骤1：创建Grid。

步骤2：添加LinkButton。

二、弹出窗口
给大家的建议：对于这种弹出窗口，它本身的代码会非常的多，所以尽量不要写在application代码里面。而是应该尽量通过自定义的方式来创建组件。

用Flex+Lucene+s2sh开发订餐系统开发第五步:前台皮肤替换功能实现(续)

jk2345 — Sat, 19 Jun 2010 14:37:44 +0000

一、皮肤替换。
思路：
如果将中的样式替换掉，那么这个时候就可以实现皮肤的替换。
注意：默认的样式，大家可以通过新建一个default.css样式来完成。
这个时候要实现皮肤替换，那就需要动态的替换掉CSS。
步骤1：添加下拉列表框，用来选择皮肤。
然后为下拉列表框添加更改事件处理。

步骤2：添加皮肤替换函数。
private var _skin:String; private function changeSkin(skinUrl:String):void{ //判断以前有没有使用过皮肤，如果有就需要将其卸载掉 if(_skin != null) { StyleManager.unloadStyleDeclarations(_skin,true); } //然后设置_skin变量为现在的新皮肤，并且对其进行加载 _skin = skinUrl; StyleManager.loadStyleDeclarations(_skin,true); }

步骤3：将CSS文件编译成swf文件。
二、添加多套皮肤。
对于多套皮肤，通常会有多个images文件夹，而且这些文件有可能是相同文件名。
这个时候，可以在images文件夹下面不同皮肤的图片文件夹。

当使用不同皮肤的时候，在显示上面会有很大的不同，所以这个时候大家一定注意去修改它们。直到看不出明显的显示差距。Panel { borderStyle: solid; borderColor: #d5610d; borderAlpha: 1; roundedBottomCorners: true; cornerRadius: 10; headerHeight: 55; backgroundAlpha: 1; highlightAlphas: 0.44, 0.08; headerColors: #d5610d, #d5610d; backgroundColor: #73715c; dropShadowEnabled: true; shadowDistance: 0; shadowDirection: right; titleStyleName: "panelTitle"; titleBackgroundSkin:Embed(source='images_carbon/panel_bg.png', scaleGridLeft=12, scaleGridRight=13, scaleGridTop=30,scaleGridBottom=31); } /* Panel titleStyleName*/ .panelTitle { color: #ffffff; fontSize: 20; fontFamily: "Handwriting - Dakota"; }
做皮肤替换功能，主要注意三点。
第一点：要将图片文件分开存储，不要混乱。
第二点：要将CSS文件编译成SWF二进制文件。
第三点：由于不同皮肤在显示上面区别很大，所以大家要尽量将影响外观的差异最小化。尽量只要看到一些不同的颜色，样式，布局不能有太大的变化。

北风技术专栏 » jk2345

Flex+Lucene+s2sh开发订餐系统开发第六步:后台主界面设计

用Flex+Lucene+s2sh开发订餐系统开发第五步:前台皮肤替换功能实现(续)