flex osgi实现-potomac 个人翻译资料2

 

Potomac Ui 有5个高级别的抽象方式：Templates, Pages, Folders, Parts, and Actions。

Templates：定义了应用程序的frame和navigation，框架和导航。

 

template 是一个template 扩展点上的一个简单的扩展，创建一个ui组件，添加[Template] tag，模板的职责是为整个应用程序提供一个整体的frame和navigation结构，它被作为一个顶级的flex 应用对象的子项。

模板的主要职责是管理和显示pages，没有强制的要求模板如何选择去显示pages，有些模板可能在navigator中使用tabs去显示pages，（例如默认的potomac_dark），有些模板可以使用ViewStack选择一次展现一个模板，也可以使用Accordion去显示pages，高级模板可以使用一些高级特效和动画在pages转换过程中，最终限制模板样式的是作者想象力。

 模板和potomac通讯是使用事件处理，模板需要编写事件的事件处理模板。

TemplateEvents：

templateInitialize：在模板加载properties和actions时触发

templateInitialize：当页面UI 选择器（例如：tab）创建时分发。模板事件包括所有的页面被打的必须的属性，打开页面并不意味着页面的UI组件应该被创建，只是当展示给用户时才创            建（i.e.calling the page#create()method）。延迟加载是必须的，如果设置时间的focus 属性   为true， 页面将被opened和created。

templateShowPage：编程实现去改变当前可视化的page时分发该事件，模板将改变可视化的   page(ex. change the selected tab in a tab navigator).。

templateClosePage：编程实现去close页面时分发该事件。模板将remove关联的UI.(remove the   tab from the tab navigator)

templatePageDirtyChange：在page改变时，page内的多个part出现脏状态时分发该事件。这样 给与模板机会去使用“*”注释改page UI，去标识这个page没有被保存。

 

模板参数：

模板的一个重要功能是支持配置参数。因为模板会被多个应用重用，它必须允许不同的应用选择模板时去改变参数。模板参数通过[Template] tag 的“properties”属性去声明模板参数。模板属性可以在appManifest 编辑器中创建，最后配置参数进入到模板的templateInitialize 事件。

Demon：

[Template(id="myTemplate",properties="logo:image,title:string,showMenu:boolean")]

Actions：

 模板的另一个重要的职责是显示Actions，Actions使用[Action] tag 声明，它决定模板以何种方式展示给用户。

 

Potomac darkTemplate.mxml:

 

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvasxmlns:test="potomac.ui.restricted.*"xmlns="potomac.ui.templates.dark.*"xmlns:mx="http://www.adobe.com/2006/mxml"
width="100%"height="100%"resize="onResize(event)"backgroundColor="0x000000">
<mx:Metadata>
[Template(id="potomac_dark",properties="logo:image")]
</mx:Metadata>


<mx:Stylesource="tabs.css"/>
<mx:Script>
<![CDATA[
import potomac.ui.TemplateEvent;
import mx.managers.CursorManager;
import potomac.inject.InjectionEvent;
import potomac.inject.Injector;
import potomac.bundle.Extension;
import potomac.bundle.IBundleService;
import mx.events.ResizeEvent;
import mx.events.IndexChangedEvent;
import mx.core.Container;
import potomac.ui.Page;
import potomac.ui.PotomacUI;
import mx.events.ItemClickEvent;
import mx.events.FlexEvent;
[Inject]
public var _potomacUI:PotomacUI;
[Inject]
public var _bundleService:IBundleService;
[Inject]
public var _injector:Injector;

private var _busyCursors:int = 0;
[Handles(event="templateInitialize")]
public function onTemplateInitialize(e:TemplateEvent):void
{
logo.source = e.parameters.logo;
//load actions
var exts:Array = _bundleService.getExtensions("Action");
linkBar.dataProvider = exts;
linkBar.labelField = "label";
linkBar.iconField = "icon";
tabNav.validateNow();
}
[Handles(event="templateOpenPage")]
public function openPage(e:TemplateEvent):void
{
var kid:DynCanvas = new DynCanvas();
kid.label = e.descriptor.title;
kid.icon = e.descriptor.icon;
if (e.input != null)
{
if (e.input.title != null)
kid.label = e.input.title;
if (e.input.icon != null)
kid.icon = e.input.icon;
}
kid.pageDesc = e.descriptor;
kid.page = e.page;
kid.populated = false;
kid.input = e.input;
kid.options = e.options;
kid.dirty = false;
tabNav.addChild(kid);

if (e.setFocus)
tabNav.selectedChild = kid;

if (tabNav.selectedChild == kid)
loadPage(kid);
}
private function onTabChange(e:IndexChangedEvent):void
{
loadPage(e.relatedObject as DynCanvas);
}
private function loadPage(parent:DynCanvas):void
{
if (parent.populated == true)
return;
var pageUI:Container = parent.page.getContainer();
pageUI.percentHeight = 100;
pageUI.percentWidth = 100;
parent.addChild(pageUI);

tabNav.validateNow();
parent.page.create(parent.options);
parent.populated = true;
}

[Handles(event="templateShowPage")]
public function onShowPage(e:TemplateEvent):void
{
var tab:DynCanvas = getPageTab(e.page);
tabNav.selectedChild = tab;
}

[Handles(event="templateClosePage")]
public function onClosePage(e:TemplateEvent):void
{
var tab:DynCanvas = getPageTab(e.page);
tabNav.removeChild(tab);
if (tabNav.selectedChild != null)
{
loadPage(tabNav.selectedChild as DynCanvas);
}
}
[Handles(event="templatePageDirtyChange")]
public function onPageDirtyChange(e:TemplateEvent):void
{
var tab:DynCanvas = getPageTab(e.page);
if (tab == null)
return;
var dirty:Boolean = e.page.containsDirty();
if (dirty != tab.dirty)
{
if (dirty)
{
tab.label = "*" + tab.label;
}
else
{
tab.label = tab.label.substr(1);
}
}
tab.dirty = dirty;
}
private function getPageTab(page:Page):DynCanvas
{
var kids:Array = tabNav.getChildren();
for (var i:int = 0; i < kids.length; i++)
{
if (kids[i].page == page)
{
return kids[i] as DynCanvas;
}
}
return null;
}

private function onResize(e:ResizeEvent):void
{
tabNav.width = e.currentTarget.width - 20;
tabNav.height = e.currentTarget.height - 38;
linkBar.width = e.currentTarget.width - 62;
}
private function onLinkActivate(e:ItemClickEvent):void
{
var ext:Extension = e.item as Extension;
_busyCursors ++;
CursorManager.setBusyCursor();
_injector.getInstanceOfExtension(ext,onInstanceReady);
}
private function onInstanceReady(e:InjectionEvent):void
{
_busyCursors --;
if (_busyCursors == 0)
{
CursorManager.removeBusyCursor();
}
e.instance.run();
}
]]>
</mx:Script>
<BackgroundPatternwidth="100%"height ="100%"/>
<mx:Imageid="logo"x="10"y="10"width="565"height="50"scaleContent="false"/>
<mx:LinkBarstyleName="potomacLinkBar"x="62"y="35"width="375"height="25"id="linkBar"itemClick="onLinkActivate(event)">
</mx:LinkBar>
<mx:TabNavigatorid="tabNav"styleName="potomacTabNavigator"historyManagementEnabled="false"x="10"y="28"change="onTabChange(event)"width="351"height="113">
</mx:TabNavigator>
</mx:Canvas>