<a:hbox> <a:vbox /> <a:vbox /> <a:vbox /> </a:hbox>
可以用XPath选择器来访问元素:
vbMain.selectSingleNode("a:hbox/a:vbox[2]");
这条查询将定位到hbox中的第二个vbox。这个vbox含有了打开的文件tab和控制台面板。然后你可以像我们在formatjson扩展中对菜单的处理方法一样将你想要的元素添加到该vbox。
MarkupUI 标记然后format json 扩展会弹出个窗口给用户来设置缩进的空格数。我们用aml标记语法来创建这个窗口。我将aml代码放到名为formatjson.xml的xml文件中，并在最外层添加了一个扩展所需的根元素：a:application，看起来像这样:
<a:application xmlns:a="http://ajax.org/2005/aml"> <!-- Your UI markup here --> </a:application>
UI标记可以包含html和 AML元素。我们使用AML的一个下拉列表spinner和两个按钮来描述对json格式化的窗口。
<a:window id = "winFormat" title = "Format JSON" center = "true" modal = "false" buttons = "close" kbclose = "true" width = "200"> <a:vbox> <a:hbox padding="5" edge="10"> <a:label>Indentation</a:label> <a:spinner flex="1" min="1" max="20" /> </a:hbox> <a:divider /> <a:hbox pack="end" padding="5" edge="10 10 5 10"> <a:button default="2" caption="Format" onclick = " require('ext/formatjson/formatjson').format(spIndent.value); "/> <a:button>Done</a:button> </a:hbox> </a:vbox> </a:window>
格式化按钮绑定了onclick事件来调用我们扩展的format方法，它传入了spinner的值。这就是我们在扩展中需要实现的方法，让我们动手吧。
自定义函数格式化函数有一个参数，来指定json中缩进的空格数。首先获取当前选择的代码，如果选中的代码为有效的json，则对其格式化，更新到当前选中的代码，否则给用户一个错误提示。
我们需要加载另一个依赖来完成该功能，就是ace编辑器的Range模块。于是我在顶部将ace/Range添加到依赖列表中，然后调用参数"Range"。格式化函数看起来如下(我给每个部分添加了注解)。
{ ... format : function(indent){ //获取当前编辑器 var editor = editors.currentEditor; //从当前编辑器获取选中的对象 var sel = editor.getSelection(); //获取当前的文档对象引用 var doc = editor.getDocument(); //获取当前选中对象的range对象 var range = sel.getRange(); //从range对象获取选中的文本 var value = doc.getTextRange(range); //尝试将选中的文本转换为JSON，并格式化 //然后再回转为文本字符串，如果出现错误则给用户显示错误. try{ value = JSON.stringify(JSON.parse(value), null, indent); } catch(e){ util.alert( "Invalid JSON", "The selection contains an invalid or incomplete JSON string", "Please correct the JSON and try again"); return; } //如果格式化成功则用格式化后值替换掉range对象 var end = doc.replace(range, value); //用格式化的值更新当前选中的部分
sel.setSelectionRange(Range.fromPoints(range.start, end));
}, ... }我们的扩展现在可以使用了，但让我们再添加点东西。