プログラミングノート

一からものを作ることが好きなエンジニアの開発ブログです。

JavaScriptでCustom Cromeを利用する方法

JavaScript AIR

AIRのデフォルトになっているSystem CromeはExtなどのデザインと合わないので、なんとかしたいと色々試していたところ、Extのサイトでそれなりの方法を見つけたのでご紹介。


Extブログでは過去にCustom Cromeが使えるようになったと記載されていた(ココ)のですが、これがAIRのバージョンアップで使えなくなったようで、フォーラムの方に対応策がありました。

<script type="text/javascript">
Ext.onReady(function(){
  var win = new Ext.air.NativeWindow({
    id: 'mainWindow',
    instance: window.nativeWindow,
    width: screen.width,
    height: screen.height
  });
  win.moveTo( 0, 0 );
  var xwin = new Ext.Window({
    title: 'AIR test',
    width: 400,
    height: 200,
    autoHeight: false,
    resizable: true,
    collapsible: true,
    maximizable: true,
    minimizable: true,
    constrain: true,
    listeners: {
      close: function() { win.close(); },
      minimize: function(){ win.getNative().minimize() }
    }
  });
  xwin.show();
});
</script>


こちらがそのスクリプトで、デフォルトのウィンドウを画面一杯に広げてその中でExtのウィンドウを生成しています。フルスクリーンモードにして同じようなことをしてたので方向性は間違ってなかったんだなと納得（デュアルディスプレイでは隣の画面に移動できないけど）。ただ、IFRAMEを利用する形である程度アプリを作っているので、ちょっと修正。

  • main.html
<script type="text/javascript">  
  window.moveTo(0, 0);
  window.resizeTo(screen.width, screen.height);

  var parentInterface = {    
    nativeClose : function(){
      window.nativeWindow.close();
    },
    nativeMinimize : function(){
      window.nativeWindow.minimize();
    }    
  };
  
  window.onload = function(){    
    //frame(application sandbox)のオブジェクトを公開
    document.getElementById("sandbox").contentWindow.parentSandboxBridge = parentInterface;
  };  
</script>
</head>
<body>
  <iframe id="sandbox"
    src="http://ex/iframe.html"
    sandboxRoot="http://ex/"
    documentRoot="app:/"
    style="width:100%; height:100%;border:none"
    >
  </iframe>
</body>
  • iframe.html
<script type="text/javascript">  
Ext.onReady(function(){
  var xwin = new Ext.Window({
    title: 'AIR test',
    width: 400,
    height: 200,
    autoHeight: false,
    resizable: true,
    collapsible: true,
    maximizable: true,
    minimizable: true,
    constrain: true,
    listeners: {
      close: function() { parentSandboxBridge.nativeClose(); },
      minimize: function(){ parentSandboxBridge.nativeMinimize(); }
    }
  }).show();
});
</script>


2つに分けただけで基本は同じです。あとは、application.xmlファイルで、systemChromeをnoneに、transparentをtrueに、maxSizeを無効にすればOKです。ググってもFlexの情報ばかり出てきてJavascriptではだめなのかなと思ってましたが、意外と綺麗に出来たのですっきりしました。

参考