例：JSON MenuBuilder データソース

Adobe AIR 1.0 およびそれ以降

次の例では、MenuBuilder フレームワークを使用して JSON 配列をデータソースとするテキスト領域のコンテキストメニューを定義します。同じメニュー構造を XML で指定するアプリケーションについては、例：XML MenuBuilder データソースを参照してください。

アプリケーションは 2 つのファイルで構成されます。

最初のファイルはメニューデータソースで、「textContextMenu.js」というファイルです。

[ 
    {label: "MenuItem A"}, 
    {label: "MenuItem B", type: "check", toggled: "true"}, 
    {label: "MenuItem C", enabled: "false"}, 
    {type: "separator"}, 
    {label: "MenuItem D", items: 
        [ 
            {label: "SubMenuItem D-1"}, 
            {label: "SubMenuItem D-2"}, 
            {label: "SubMenuItem D-3"} 
        ] 
    } 
]

2 番目のファイルは、アプリケーションユーザーインターフェイスのソースコードで、application.xml ファイルに初期ウィンドウとして指定された HTML ファイルです。

<html> 
    <head> 
        <title>JSON-based menu data source example</title> 
        <script type="text/javascript" src="AIRAliases.js"></script> 
        <script type="text/javascript" src="AIRMenuBuilder.js"></script> 
        <style type="text/css"> 
            #contextEnabledText 
            { 
                margin-left: auto; 
                margin-right: auto; 
                margin-top: 100px; 
                width: 50% 
            } 
        </style> 
    </head> 
    <body> 
        <div id="contextEnabledText">This block of text is context menu enabled. Right click or Command-click on the text to view the context menu.</div> 
        <script type="text/javascript"> 
            // Create a NativeMenu from "textContextMenu.js" and set it 
            // as context menu for the "contextEnabledText" DOM element: 
            var textMenu = air.ui.Menu.createFromJSON("textContextMenu.js"); 
            air.ui.Menu.setAsContextMenu(textMenu, "contextEnabledText"); 
             
            // Remove the default context menu from the page: 
            air.ui.Menu.setAsContextMenu(null); 
        </script> 
    </body> 
</html>