<PUBLIC:COMPONENT tagname="DETAILEDVIEW">
<@component name="DetailedView" alias="$DET">
Implements detailed view of object in the model.
<copyright>(c) SAP AG 2003-2006. All rights reserved.</copyright>
</component@>
<PUBLIC:PROPERTY name="descr" value="Details Pane"/>
<PUBLIC:PROPERTY name="hidden" get="getHidden" put="setHidden"/>
<PUBLIC:PROPERTY name="autoHide" get="getAutoHide" put="getAutoHide"/>
<PUBLIC:PROPERTY name="minSize" get="getMinSize"/>
<PUBLIC:PROPERTY name="maxSize" get="getMaxSize"/>
<PUBLIC:PROPERTY name="size" get="getSize" put="setSize"/>
<PUBLIC:METHOD name="execute" />
<PUBLIC:METHOD name="init"/>
<PUBLIC:METHOD name="loadContent"/>
<PUBLIC:METHOD name="getContent"/>
<PUBLIC:METHOD name="showTab"/>
<PUBLIC:METHOD name="signalTab"/>
<PUBLIC:METHOD name="switchTab" />
<PUBLIC:METHOD name="exit"/>
<PUBLIC:METHOD name="isTop"/>
<PUBLIC:METHOD name="isBottom"/>
<PUBLIC:METHOD name="showDetailedConfiguration"/>
<PUBLIC:ATTACH event="oncontentready" onevent="boot()" />
<PUBLIC:DEFAULTS viewLinkContent="true"/>
<HTML xmlns:stb="urn:guimachine-com:storyboard" xmlns:gml="urn:guimachine-com:gml">
<HEAD>
<META HTTP-EQUIV="MSThemeCompatible" CONTENT="no">
#DEPENDENCIES[
lib~skin:styles.Global.css
]
#EXTERN[lib:Xml.js]
#EXTERN[lib:ColorMgr.js]
#EXTERN[lib:EventsMgr.js]
#EXTERN[lib:InputMgr.js]
#EXTERN[lib:PopupMgr.js]
#USING[lib:Button.htc]
#USING[lib:Box.htc]
#USING[lib:Tabstrip.htc]
#USING[main.Console.htc]
#USING[~skin:styles.DetailedView.css]
<SCRIPT language="JavaScript">
/////////////////////////////////////////////////////////////////////
// INITIALIZATION
var _init = false;
var _hidden = false;
var _current = null; // The current page
var _hideTabs = false;
var _autoHide = false;
var _size = 0 ;
var _detailedConfiguration = 'core.gml:CONTROLS_EDITOR';
function iframesOnExit(){
var iframes = document.all.tags("IFRAME");
var len = iframes.length;
for (var i=0; i < len; i++){
try{
iframes[i].contentWindow.__WIN_EXIT();
}catch(e){
WRITE("Error in exiting iframe");
}
}
}
function exit(){
iframesOnExit();
DISABLE_EVENTS(element.document.body);
$ENV.detachEvent('onModelOpen', onModelOpen);
$ENV.detachEvent('onContextSwitch', onContextSwitch);
$ENV.detachEvent('onModelClose', onModelClose);
$ENV.detachEvent('onKitChange', onKitChange)
document.body.onresize = null;
}
function boot() {
document.body.id = element.id;
$CTL.registerModule(element);
_hideTabs = BOOL(document.body.currentStyle.hideTabstrip);
_autoHide = BOOL(document.body.currentStyle.autoHide);
}
function init() {
if (_hideTabs) {
elmTabSelector.style.display = 'none';
elmTabs.style.display = 'none';
elmButtons.style.display = 'none';
}
// initialize events
ENABLE_EVENTS(document.body, getContextMenu);
$ENV.attachEvent('onModelOpen', onModelOpen);
$ENV.attachEvent('onContextSwitch', onContextSwitch);
$ENV.attachEvent('onModelClose', onModelClose);
$ENV.attachEvent('onKitChange', onKitChange)
document.body.onresize = resize;
if (_autoHide) SETVAR('DetailedViewHide', true);
_hidden = GETVAR('DetailedViewHide');
_size = GETVAR('DetailedViewSize');
_init = true;
}
function initTabs(){
setTimeout(function (){
populateAllTabs();
elmTabs.assign(_allTabs.toArray());
hideDetailedConfiguration();
},0);
}
// Show the tab
// if the tab page in not loaded then also load the page.
<@method scope="private" name="showTab">
make a specified tab in focus.
<param> Isd of the tab </param>
<remarks>
The console tab is always availble, the id of the console tab is '$OUT'.
</remarks>
</method@>
function showTab(id){
if (_current) {
_current.style.display = 'none';
if(_current.contentWindow && _current.contentWindow.__WIN_HIDE) _current.contentWindow.__WIN_HIDE();
}
var page = elmContents.children.item(id);
if (page){
page.style.display = 'block';
elmTabs.select(id);
_current= page;
if(_current.contentWindow) _current.contentWindow.__WIN_SHOW();
return;
}
// load the page and update the current page;
loadPage(id);
//Show the current tab
elmTabs.select(id)
}
function onContextSwitch(){
try{
if (ISA($ENV.contextElement,'core.gml:Interactor') && ISA($ENV.contextElement.unit , 'core.gml:Unit')){
showDetailedConfiguration();
}
else{
hideDetailedConfiguration();
}
}catch (e){
WRITE("Exception switching tabs: "+e);
}
}
function showDetailedConfiguration(){
elmTabs.show(_detailedConfiguration);
showTab(_detailedConfiguration);
}
function hideDetailedConfiguration(){
elmTabs.hide(_detailedConfiguration);
if (elmTabs.firstChild) showTab('$OUT');
}
// load the page
// the page is loaded inside a iframe html element
function loadPage(id){
var tab = _allTabs.item(id);
loadFacet();
function loadFacet(){
var url = tab.impl || '#URL[common.blank.htm]';
elmContents.insertAdjacentHTML('BeforeEnd', '<IFRAME id="'+tab.id+'" src="'+url+'" class="WINDOW-FRAME" application="yes" style="display:none" ></IFRAME>');
_current = elmContents.lastChild;
msg.style.display= 'block';
_current.attachEvent('onload',frameOnLoad);
_current.style.display = 'block';
}
}
function frameOnLoad(){
showTab(_current.id);
}
function populateAllTabs(){
_allTabs.returnToDefault();
var tabs = $ENV.getSelectedTabs('DETAILED_VIEW');
if ( !tabs) return ;
for(var i = 0 ; i< tabs.length; i++){
_allTabs.assign( tabs[i]);
}
}
function returnToDefault(){
//if(elmContents.children.length<=1 ) return;
while(elmContents.children.length>1){
var elm = elmContents.lastChild;
//elmTabs.remove(elm.id);
elmContents.removeChild(elm);
}
_allTabs.returnToDefault();
elmTabs.assign(_allTabs.toArray());
_current = elmContents.children.item(0);
showTab(_current.id);
}
// A collection for all the tabs in the detailed view
var _allTabs = {};
_allTabs['$order'] = [] ;
_allTabs['$col'] = {} ;
_allTabs.clear = function(){
this['$col']= {};
this['$order'] = [];
}
_allTabs.item= function(id){
return this.$col[id];
}
_allTabs.toArray = function(){
return this.$order ;
}
_allTabs.returnToDefault= function (){
this.clear();
this.assign({id:'$OUT', name:'Console'});
}
_allTabs.assign = function(tab){
this['$col'][tab.id] = tab;
this['$order'].push(tab);
}
/////////////////////////////////////////////////////////////////////
// PROPERTIES
<@prop name="descr" access="RO">Gets the description of this module</prop@>
<@prop name="hidden:b">Indicates whether the module is hidden</prop@>
function getHidden() { return _hidden; }
function setHidden(flag) {
_hidden = BOOL(flag);
SETVAR('DetailedViewHide', _hidden);
$CTL.resizeStudio();
resize();
}
<@prop name="autoHide:b">Indicates whether automatic hide/expose mode is enabled</prop@>
function getAutoHide() { return _autoHide; }
function setAutoHide(flag) {
_autoHide = BOOL(flag);
}
<@prop name="minSize:n" access="RO">Gets the minimum module size</prop@>
function getMinSize() { return 48; }
<@prop name="maxSize:n" access="RO">Gets the maximum module size</prop@>
function getMaxSize() { return element.document.body.clientHeight*0.4; }
<@prop name="size:n">Gets or sets the module size</prop@>
function getSize() { return GETVAR('DetailedViewSize'); }
function setSize(val) {
if (isNaN(val)) {
var def = $CTL.getVarDef('DetailedViewSize');
val = def && def.dflt || 50;
}
val = MAX(minSize, MIN(maxSize, POS(val)));
SETVAR('DetailedViewSize', val);
_size = val;
}
/////////////////////////////////////////////////////////////////////
// METHODS
<@method scope="private" name="getContent" >
Gets the current page content
</method@>
function getContent(){
return _current && _current.contentWindow || null;
}
<@method name="execute" >
DEPRECATED,Execute a method on a window on the current tab.
<param name="method name">The method name to execute</param>
</method@>
function execute(method){
if(getContent() && typeof getContent()[method]== 'function'){
getContent()[method]();
}
}
/////////////////////////////////////////////////////////////////////
// INTERNAL: EVENT HANDLERS
function onModelOpen(){
setTimeout(function(){
initTabs();
},0);
}
function onModelClose(){
returnToDefault();
}
function onKitChange(){
if ((event.sections+'').search(/TABS|\*/i) >= 0) {
initTabs();
}
}
function getContextMenu(name, source) {
if (source != element && source.getContextMenu){
menu = source.getContextMenu();
}else{
menu = $ENV.defineMenubar();
}
if ( menu && menu.append){
menu.append({signal:'$CTL->toggleDetailedView', text:'#TEXT[XMIT_CMD_HIDE_DETAILED_VIEW]'});
}
return menu;
}
// Internal
function resize() {
if (!_init) return;
var W=document.body.clientWidth, H=document.body.clientHeight, mr=0;
var L=false, R=false, B=false, G='VERTBAR';
if (_hideTabs) {
var st=elmContents.style;
st.left=0; st.top=0; st.width=POS(W); st.height=POS(H);
} else {
elmButtons.style.right = 1;
var hSel = 0; // Tab Selector height
if (elmTabSelector.currentStyle.display != 'none') {
var stSel=elmTabSelector.style;
stSel.left = L ? mr+1 : 0;
stSel.top = 0;
stSel.width = POS(B ? W : W-mr-1);
hSel = elmTabSelector.offsetHeight ;
var st=elmTabs.style;
st.left = stSel.left;
st.top = hSel - elmTabs.offsetHeight;
st.width = stSel.width;
}
var st=elmContents.style;
st.left = L ? mr+1 : 0;
st.top = hSel - 1 ;
st.width = POS(B ? W : W-mr-1);
st.height = POS(B ? H-mr-1-hSel : H-hSel);
}
}
function isTop(){
try {
var win = getContent();
if ( win)
return win.isTop();
} catch(e) {}
}
function isBottom(){
try {
var win = getContent();
if ( win)
return win.isBottom();
} catch(e) {}
}
<@method name="signalTab">
Sends a signal to the current tab
<param name="name:s">Signal name</param>
<param name="args...:Arguments">Variable list of signal arguments.</param>
</method@>
function signalTab() {
try {
var win = getContent();
if ( win)
return win.processSignal.apply(null, arguments); } catch(e) {}
}
<@method name="switchTab">
Switches the current tab
<param name="Form 1" type="group" > Switches from the current tab to the tabId</param>
<param name="boardId:s">The id of the tab to show (see @env:KitTabs!)</param>
<return type="b">Indicates whether the requested tab has already been loaded</return>
</method@>
function switchTab(id){
return showTab(id);
}
</SCRIPT>
<BODY>
<div id="elmTabSelector" class="TABSELECTOR" ></div>
<STB:TABSTRIP id="elmTabs" glyph="TAB2" autoFit="no" onselect="showTab(event.value);" style="z-index:1000;position:absolute;top:2;left:1;height:15;"/>
<div id="elmContents" class="CONTENT" >
<STB:CONSOLE id="$OUT" class='MODULE' style="width:100%;height:100%;padding:0; z-index:1000" />
</div>
<DIV id=elmButtons style="position:absolute; top:1; width:40; z-index:1001; font-size:1; text-align:right">
<STB:BUTTON glyph=SMLBTN onclick="hidden=true" title="#TEXT[XBUT_CLOSE]"><img src="#URL[lib~skin:images.win-close.gif]"></STB:BUTTON>
</DIV>
<STB:BOX id=msg box="0 22 50 30" style="background:blue;display:none; z-index:1001" ></STB:BOX>
</BODY>
<!-- <div id="controlsEditor" box="0 0 W-1 H-2" style="display:none" > kobi</div>-->
</PUBLIC:COMPONENT>