<?xml version="1.0" encoding="UTF-8"?> <xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xe="http://www.ibm.com/xsp/coreex"> <xe:singlePageApp id="singlePageApp1" selectedPageName="page1"> <xe:appPage id="appPage1" pageName="page1"> <xp:scriptBlock id="scriptBlock1" defer="true" type="text/javascript"> <xp:this.value> <![CDATA[ function mediaQueryListener(mediaQuery){ if(mediaQuery.matches){ XSP.showContent( "#{id:dynamicContent}", "content_0", {orientation: "P"} ); }else{ XSP.showContent( "#{id:dynamicContent}", "content_0", {orientation: "L"} ); } } XSP.addOnLoad( function(){ var mediaQuery = window.matchMedia("screen and (orientation: portrait)"); mediaQuery.addListener(mediaQueryListener); mediaQueryListener(mediaQuery); } ); ]]> </xp:this.value> </xp:scriptBlock> <xe:dynamicContent id="dynamicContent" useHash="false" defaultFacet="content_0"> <xp:this.facets> <xp:panel id="container" xp:key="content_0"> <xp:panel id="leftColumn"> Left Column </xp:panel> <xp:panel id="rightColumn" loaded="${param.orientation == 'L'}"> Right Column </xp:panel> </xp:panel> </xp:this.facets> </xe:dynamicContent> </xe:appPage> </xe:singlePageApp> </xp:view>