使用Ace插件制作iOS/Android TabBar&使用特定于平台的Javascript的TableView? [英] Use Ace Plugin to Make iOS/Android TabBar & TableView using Platform Specific Javascript?
问题描述
我正在使用适用于iOS和Android的VS2015 TACO开发适用于iOS，Android和Windows应用商店的JavaScript应用.我刚刚安装了Ace插件，并且正在通过 Ace Intro YouTube视频显示了
I'm working on a JavaScript App for iOS, Android and the Windows Store, using VS2015 TACO for iOS and Android. I just installed the Ace Plugin and I'm working my way through the Javascript/Ace code samples. For iOS and Android, I want to use native UI for: 1) a bottom tab bar and 2) a scrolling picker list with icons and text (basically, a WinJS.UI ListView). The Ace Intro YouTube Video shows a sample tab bar in XAML markup but I'm not familiar with XAML. Can anyone point me to Ace Plugin Javascript samples for a tab bar UI and Table View UI for iOS and Android? I'd be grateful.
更新#1 :谢谢亚当·内森.使用他的代码，我在Mac iPad Simulator中获得了一个停靠的Tab栏.它在纵向和横向视图中都能很好地捕捉.我正在使用此代码将其打开和关闭:
UPDATE #1 Thank you to Adam Nathan. Using his code, I get a docked Tab Bar in my Mac iPad Simulator. It snaps nicely in both portrait and landscape view. I'm using this code to toggle it on and off:
TEST_ACE.dockTabs = function () {
if (TEST_ACE.pageTabBar == null) {
// Surround the WebView with native UI
TEST_ACE.pageTabBar = TEST_ACE.buildDockedTabsWithoutXaml();
// Replace the WebView with the loaded native page
// (For the title setting in XAML to work on Android, ShowTitle must be
// set to true in the Android section of config.xml.)
ace.getHostPage().setContent(TEST_ACE.pageTabBar);
// Reparent the WebView inside the native page
TEST_ACE.pageTabBar.setContent(ace.getHostWebView());
// Save the native page so we can set its title as tabs are clicked
_nativePage = TEST_ACE.pageTabBar;
}
else {
ace.getHostPage().setContent(ace.getHostWebView());
TEST_ACE.pageTabBar = null;
}
}
当我关闭选项卡栏时，我仍然看到图标以前所在的底部区域-但现在为空.也就是说，当我尝试同时关闭上方的标题栏和底部的选项卡栏时，我只关闭了上方的标题栏，但底部的块(现在为空白)仍然存在.如果我改变方向(人像/风景)，则底部的方块将消失.在将HostPage重置为HostWebView之前，是否有更好的方法用标签栏清除HostPage?
When I toggle the Tab Bar off, I still see the bottom block where the icons used to be - but it's now empty. That is, when I try to toggle off both the upper title bar and the bottom tab bar, I only dismiss the upper title bar but the bottom block, now blank, is still there. If I change orientation (portrait / landscape) then the bottom block will disappear. Is there a better way clear the HostPage with the tab bar before resetting it to the HostWebView?
对于Android，我已经更新了config.xml文件，将ShowTitle设置为true:
For Android, I have updated the config.xml file to set ShowTitle to true:
<name>AcePluginTester</name>
<description>A blank project that uses Apache Cordova to help you build an app that targets multiple mobile platforms: Android, iOS, Windows, and Windows Phone.</description>
<author href="http://cordova.io" email="dev@cordova.apache.org">Apache Cordova Team </author>
<content src="index.html" />
<access origin="*" />
<vs:features />
<preference name="SplashScreen" value="screen" />
<preference name="windows-target-version" value="8.1" />
<!-- Support for Cordova 5.0.0 plugin system -->
<plugin name="cordova-plugin-whitelist" version="1" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<platform name="android">
<allow-intent href="market:*" />
<preference name="ShowTitle" value="true"/>
</platform>
<platform name="ios">
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
<preference name="orientation" value="all" />
</platform>
<!--blah blah blah-->
但是当我在VS Android仿真器中运行该应用程序时，仍然出现此错误:
But when I run the App in the VS Android Emulator, I get still this error:
Uncaught Error: Native error: java.lang.RuntimeException: Error setting FrameLayout's UserControl.Content to Windows.UI.Xaml.Controls.Page{6b1647a V.E...... ......I. 0,0-0,0}
at run.ace.IncomingMessages.set(IncomingMessages.java:206)
at run.ace.NativeHost$2.run(NativeHost.java:239)
at android.os.Handler.handleCallback(Handler.java:739)
at android.os.Handler.dispatchMessage(Handler.java:95)
at android.os.Looper.loop(Looper.java:148)
at android.app.ActivityThread.main(ActivityThread.java:5417)
at java.lang.reflect.Method.invoke(Native Method)
at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:726)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:616)
Caused by: java.lang.RuntimeException: Cannot set title on the main page in Android unless you set <preference name="ShowTitle" value="true"/> in config.xml.
at run.ace.TabBar.setTitle(TabBar.java:39)
at Windows.UI.Xaml.Controls.Page.updateTitle(Page.java:63)
at Windows.UI.Xaml.Controls.Page.processBars(Page.java:71)
at Windows.UI.Xaml.Controls.ViewGroupHelper.setProperty(ViewGroupHelper.java:51)
at run.ace.IncomingMessages.set(IncomingMessages.java:191)
... 8 more
See http://ace.run/docs/errors for help.
cordova.js (314,13)
我想念一些Android版的东西吗?
Did I miss something for Android?
再次感谢您.太好了！
更新#2
我将ShowTitle首选项移至小部件的根目录，但仍然出现错误.我同时出现了value ="True"(大写True)和value ="true"的错误.这是我全部的config.xml文件:
I moved the ShowTitle preference to the widget root and I still get the error. I get the error with both value="True" (upper case True) and with value="true". Here's my config.xml file in the entirety:
<?xml version="1.0" encoding="utf-8"?>
<widget xmlns:cdv="http://cordova.apache.org/ns/1.0" xmlns:vs="http://schemas.microsoft.com/appx/2014/htmlapps" id="io.cordova.myapp740bed" version="1.0.1" xmlns="http://www.w3.org/ns/widgets" defaultlocale="en-US">
<name>AcePluginTester</name>
<description>A blank project that uses Apache Cordova to help you build an app that targets multiple mobile platforms: Android, iOS, Windows, and Windows Phone.</description>
<author href="http://cordova.io" email="dev@cordova.apache.org">Apache Cordova Team </author>
<content src="index.html" />
<access origin="*" />
<vs:features />
<preference name="SplashScreen" value="screen" />
<preference name="windows-target-version" value="8.1" />
<!-- Support for Cordova 5.0.0 plugin system -->
<plugin name="cordova-plugin-whitelist" version="1" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<platform name="android">
<allow-intent href="market:*" />
</platform>
<platform name="ios">
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
<preference name="orientation" value="all" />
</platform>
<platform name="android">
<icon src="res/icons/android/icon-36-ldpi.png" density="ldpi" />
<icon src="res/icons/android/icon-48-mdpi.png" density="mdpi" />
<icon src="res/icons/android/icon-72-hdpi.png" density="hdpi" />
<icon src="res/icons/android/icon-96-xhdpi.png" density="xhdpi" />
</platform>
<platform name="ios">
<!-- iOS 8.0+ -->
<!-- iPhone 6 Plus -->
<icon src="res/icons/ios/icon-60-3x.png" width="180" height="180" />
<!-- iOS 7.0+ -->
<!-- iPhone / iPod Touch -->
<icon src="res/icons/ios/icon-60.png" width="60" height="60" />
<icon src="res/icons/ios/icon-60-2x.png" width="120" height="120" />
<!-- iPad -->
<icon src="res/icons/ios/icon-76.png" width="76" height="76" />
<icon src="res/icons/ios/icon-76-2x.png" width="152" height="152" />
<!-- iOS 6.1 -->
<!-- Spotlight Icon -->
<icon src="res/icons/ios/icon-40.png" width="40" height="40" />
<icon src="res/icons/ios/icon-40-2x.png" width="80" height="80" />
<!-- iPhone / iPod Touch -->
<icon src="res/icons/ios/icon-57.png" width="57" height="57" />
<icon src="res/icons/ios/icon-57-2x.png" width="114" height="114" />
<!-- iPad -->
<icon src="res/icons/ios/icon-72.png" width="72" height="72" />
<icon src="res/icons/ios/icon-72-2x.png" width="144" height="144" />
<!-- iPhone Spotlight and Settings Icon -->
<icon src="res/icons/ios/icon-small.png" width="29" height="29" />
<icon src="res/icons/ios/icon-small-2x.png" width="58" height="58" />
<!-- iPad Spotlight and Settings Icon -->
<icon src="res/icons/ios/icon-50.png" width="50" height="50" />
<icon src="res/icons/ios/icon-50-2x.png" width="100" height="100" />
</platform>
<platform name="windows">
<icon src="res/icons/windows/Square150x150Logo.scale-100.png" width="150" height="150" />
<icon src="res/icons/windows/Square150x150Logo.scale-240.png" width="360" height="360" />
<icon src="res/icons/windows/Square30x30Logo.scale-100.png" width="30" height="30" />
<icon src="res/icons/windows/Square310x310Logo.scale-100.png" width="310" height="310" />
<icon src="res/icons/windows/Square44x44Logo.scale-100.png" width="44" height="44" />
<icon src="res/icons/windows/Square44x44Logo.scale-240.png" width="106" height="106" />
<icon src="res/icons/windows/Square70x70Logo.scale-100.png" width="70" height="70" />
<icon src="res/icons/windows/Square71x71Logo.scale-100.png" width="71" height="71" />
<icon src="res/icons/windows/Square71x71Logo.scale-240.png" width="170" height="170" />
<icon src="res/icons/windows/StoreLogo.scale-100.png" width="50" height="50" />
<icon src="res/icons/windows/StoreLogo.scale-240.png" width="120" height="120" />
<icon src="res/icons/windows/Wide310x150Logo.scale-100.png" width="310" height="150" />
<icon src="res/icons/windows/Wide310x150Logo.scale-240.png" width="744" height="360" />
</platform>
<platform name="wp8">
<icon src="res/icons/wp8/ApplicationIcon.png" width="62" height="62" />
<icon src="res/icons/wp8/Background.png" width="173" height="173" />
</platform>
<platform name="android">
<splash src="res/screens/android/screen-hdpi-landscape.png" density="land-hdpi" />
<splash src="res/screens/android/screen-ldpi-landscape.png" density="land-ldpi" />
<splash src="res/screens/android/screen-mdpi-landscape.png" density="land-mdpi" />
<splash src="res/screens/android/screen-xhdpi-landscape.png" density="land-xhdpi" />
<splash src="res/screens/android/screen-hdpi-portrait.png" density="port-hdpi" />
<splash src="res/screens/android/screen-ldpi-portrait.png" density="port-ldpi" />
<splash src="res/screens/android/screen-mdpi-portrait.png" density="port-mdpi" />
<splash src="res/screens/android/screen-xhdpi-portrait.png" density="port-xhdpi" />
</platform>
<platform name="ios">
<splash src="res/screens/ios/screen-iphone-portrait.png" width="320" height="480" />
<splash src="res/screens/ios/screen-iphone-portrait-2x.png" width="640" height="960" />
<splash src="res/screens/ios/screen-ipad-portrait.png" width="768" height="1024" />
<splash src="res/screens/ios/screen-ipad-portrait-2x.png" width="1536" height="2048" />
<splash src="res/screens/ios/screen-ipad-landscape.png" width="1024" height="768" />
<splash src="res/screens/ios/screen-ipad-landscape-2x.png" width="2048" height="1536" />
<splash src="res/screens/ios/screen-iphone-568h-2x.png" width="640" height="1136" />
<splash src="res/screens/ios/screen-iphone-portrait-667h.png" width="750" height="1334" />
<splash src="res/screens/ios/screen-iphone-portrait-736h.png" width="1242" height="2208" />
<splash src="res/screens/ios/screen-iphone-landscape-736h.png" width="2208" height="1242" />
</platform>
<platform name="windows">
<splash src="res/screens/windows/SplashScreen.scale-100.png" width="620" height="300" />
<splash src="res/screens/windows/SplashScreen.scale-240.png" width="1152" height="1920" />
<splash src="res/screens/windows/SplashScreenPhone.scale-240.png" width="1152" height="1920" />
</platform>
<platform name="wp8">
<splash src="res/screens/wp8/SplashScreenImage.jpg" width="480" height="800" />
</platform>
<plugin name="cordova-plugin-crosswalk-webview" version="1.5.0" src="https://github.com/crosswalk-project/cordova-plugin-crosswalk-webview" />
<plugin name="cordova-plugin-ace" version="0.0.12" src="https://github.com/Microsoft/ace" />
<engine name="ios" spec="~3.9.2" />
<engine name="android" spec="~4.1.1" />
<plugin name="cordova-plugin-ace" spec="https://github.com/microsoft/ace.git" />
<preference name="ShowTitle" value="true" />
</widget>
即使运行清理解决方案"和清除Cordova缓存"，我仍然收到错误消息.
I get the error even after running "Clean Solution" and "Clear Cordova Cache".
我将在单独的更新中发布标签栏代码.
I'll post the tab bar code in a separate update.
更新#3 我的应用程序内容是WebGL画布.当我的Mac iPad2 Simulator(人像)第一次绘制时，窗口大小为768(宽)x 1004(高)，如下面的JavaScript控制台日志输出所示:
UPDATE #3 My App content is a WebGL canvas. When my Mac iPad2 Simulator (portrait) first draws, the window size is 768 (width) x 1004 (height) as shown JavaScript Console log output below:
Window size: 768 x 1004
debug.js (29,24)
Window size: 768 x 960
debug.js (29,24)
Window size: 768 x 960
debug.js (29,24)
当我将选项卡栏切换为打开时，它的大小将调整为960的高度.当我将选项卡栏切换为关闭(保持纵向)时，窗口的高度不会返回到1004.因此，看起来窗口没有调整大小当标签栏被触发关闭.我将设备旋转到横向时，整个窗口都会重新绘制，并且底部的条消失，同样，当我旋转回到纵向时，整个窗口的大小会恢复为768 x 1004，空白的底部条也不在那里.这是我的测试代码(正在进行中):
When I toggle the Tab Bar open, it resizes to a height of 960. When I toggle the tab bar closed (staying in portrait), the window height does not return to 1004. So it looks like the window is not resizing when the tab bar is toggled closed. As soon as I rotate the device to landscape, the full window gets redrawn and the bottom bar disappears, likewise, when I rotate back to portrait, the full window size snaps back to 768 x 1004 and the blank bottom bar is also not there. Here's my testing code (in progress):
在index.js内部，当onDeviceReady触发时，我的代码调用GAME.initialize():
Inside index.js, when onDeviceReady fires, my code calls GAME.initialize():
function onDeviceReady() {
// Handle the Cordova pause and resume events
document.addEventListener( 'pause', onPause.bind( this ), false );
document.addEventListener( 'resume', onResume.bind( this ), false );
// TODO: Cordova has been loaded. Perform any initialization that requires Cordova here.
GAME.initialize();
};
这是game.js中的代码:
Here is the code in game.js:
//game.js
var GAME = { NAME: "hiio", VERMAJOR: 0, VERMINOR: 9, DEBUG: true, BUILD: 1, CLASSNAME: "GAME" };
GAME.initialize = function () {
"use strict";
//log if debug
loginit();
log(GAME.NAME + " " + GAME.VERMAJOR + "." + GAME.VERMINOR + (GAME.DEBUG ? " (Debug)" : " (Release)"));
//renderer
var testcanvas = document.getElementById("idcanvas");
if (!GAME.renderer) GAME.renderer = new THREE.WebGLRenderer( { canvas: testcanvas } );
//scene
if (!GAME.scene) GAME.scene = new THREE.Scene();
//camera
GAME.setcamera();
//orbitcontrols
GAME.orbctls = new THREE.OrbitControls(GAME.camera);
// ambient
var al = new THREE.AmbientLight(0x222222, 0.5);
GAME.scene.add(al);
// light
var dl = new THREE.DirectionalLight(0xffffff, 1.0);
dl.position.set(2000, 2000, 500);
GAME.scene.add(dl);
// axes
GAME.scene.add(new THREE.AxisHelper(4000));
// Sphere
var geometry = new THREE.SphereGeometry(500, 24, 8);
var material = new THREE.MeshPhongMaterial({
color: 0x00ffff,
transparent: true,
opacity: 0.7,
});
var mesh = new THREE.Mesh(geometry, material);
GAME.scene.add(mesh);
//FPS
GAME.stats = initStats();
//events
window.addEventListener("resize", GAME.setcamera, false);
//Ace
TEST_ACE.initialize();
animate(); //run
}
//camera
GAME.setcamera = function () {
"use strict";
var c = document.getElementById("idcanvas");
var h = window.innerHeight;
var w = window.innerWidth;
if (!GAME.camera) { //new
GAME.camera = new THREE.PerspectiveCamera(45, w / h, 1, 16000);
GAME.camera.position.set(50, 100, 3000);
GAME.scene.add(GAME.camera);
}
else { //change
GAME.camera.aspect = (w / h);
}
if (GAME.renderer) { //onsize
GAME.renderer.setSize(w, h); //this sets the height of the canvas.
log("Window size: " + window.innerWidth + " x " + window.innerHeight);
}
if (GAME.orbctls) {
GAME.target = new THREE.Vector3(0, 0, 0);
GAME.orbctls.target0 = GAME.target.clone();
GAME.orbctls.reset();
}
GAME.camera.updateProjectionMatrix();
}
function initStats() {
"use strict";
var stats = new Stats();
stats.setMode(0);
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';
document.getElementById("Stats-output").appendChild(stats.domElement);
return stats;
}
//animate loop
var banimate = false;
function animate() {
"use strict";
requestAnimationFrame(animate);
if (banimate) { loge("animate re-entry."); return; }
banimate = true;
GAME.renderer.render(GAME.scene, GAME.camera);
GAME.stats.update();
banimate = false;
};
//end
这是test_act.js代码(有点混乱):
Here's the test_act.js code (little messy sorry):
//test_ace.js
var TEST_ACE = { CLASSNAME: "TEST_ACE" };
TEST_ACE.popupSegCtrl = null;
TEST_ACE.pageTabBar = null;
TEST_ACE.initialize = function () {
"use strict";
var abutton1 = document.getElementById("idbutton1"); //Tab Bar
abutton1.addEventListener("click", TEST_ACE.dockTabs, false);
return;
}
TEST_ACE.buildDockedTabsWithoutXaml = function () {
var page = new ace.Page();
page.setTitle("Docked");
var tabBar = new ace.TabBar();
var b1 = new ace.AppBarButton();
var b2 = new ace.AppBarButton();
var b3 = new ace.AppBarButton();
var b4 = new ace.AppBarButton();
var b5 = new ace.AppBarButton();
b1.setLabel("Docked");
b1.setIcon("www/images/info-{platform}.png");
b1.addEventListener("click", function () { onTabClick(b1, 0); });
b2.setLabel("Overlay");
b2.setIcon("www/images/info-{platform}.png");
b2.addEventListener("click", function () { onTabClick(b2, 1); });
b3.setLabel("Fullscreen");
b3.setIcon("www/images/info-{platform}.png");
b3.addEventListener("click", function () { onTabClick(b3, 2); });
b4.setLabel("Code");
b4.setIcon("www/images/info-{platform}.png");
b4.addEventListener("click", function () { onTabClick(b4, 3); });
b5.setLabel("Plat-Specific UI");
b5.setIcon("www/images/info-{platform}.png");
b5.addEventListener("click", function () { onTabClick(b5, 4); });
// TabBar's "content property" maps to a PrimaryCommands property.
// Therefore, to add children, we get the PrimaryCommands collection:
tabBar.getPrimaryCommands().add(b1);
tabBar.getPrimaryCommands().add(b2);
tabBar.getPrimaryCommands().add(b3);
tabBar.getPrimaryCommands().add(b4);
tabBar.getPrimaryCommands().add(b5);
page.setBottomAppBar(tabBar);
return page;
}
function onTabClick(a, b) {
return;
}
TEST_ACE.dockTabs = function () {
if (TEST_ACE.pageTabBar == null) {
// Surround the WebView with native UI
TEST_ACE.pageTabBar = TEST_ACE.buildDockedTabsWithoutXaml();
// Replace the WebView with the loaded native page
// (For the title setting in XAML to work on Android, ShowTitle must be
// set to true in the Android section of config.xml.)
ace.getHostPage().setContent(TEST_ACE.pageTabBar);
// Reparent the WebView inside the native page
TEST_ACE.pageTabBar.setContent(ace.getHostWebView());
// Save the native page so we can set its title as tabs are clicked
_nativePage = TEST_ACE.pageTabBar;
}
else {
ace.getHostPage().setContent(ace.getHostWebView());
TEST_ACE.pageTabBar = null;
GAME.setcamera();
}
}
//end
推荐答案
The sample you reference does include a bottom tab bar example (note that it renders on the top in Android). It appears in the sample once you click the first link.
更新:这是使用JavaScript进行标签栏示例的全部操作，没有标记:
UPDATE: Here's how you do the tab bar example all in JavaScript, with no markup:
function buildDockedTabsWithoutXaml() {
var page = new ace.Page();
page.setTitle("Docked");
var tabBar = new ace.TabBar();
var b1 = new ace.AppBarButton();
var b2 = new ace.AppBarButton();
var b3 = new ace.AppBarButton();
var b4 = new ace.AppBarButton();
var b5 = new ace.AppBarButton();
b1.setLabel("Docked");
b1.setIcon("www/images/info-{platform}.png");
b1.addEventListener("click", function() { onTabClick(b1, 0); });
b2.setLabel("Overlay");
b2.setIcon("www/images/info-{platform}.png");
b2.addEventListener("click", function() { onTabClick(b2, 1); });
b3.setLabel("Fullscreen");
b3.setIcon("www/images/info-{platform}.png");
b3.addEventListener("click", function() { onTabClick(b3, 2); });
b4.setLabel("Code");
b4.setIcon("www/images/info-{platform}.png");
b4.addEventListener("click", function() { onTabClick(b4, 3); });
b5.setLabel("Plat-Specific UI");
b5.setIcon("www/images/info-{platform}.png");
b5.addEventListener("click", function () { onTabClick(b5, 4); });
// TabBar's "content property" maps to a PrimaryCommands property.
// Therefore, to add children, we get the PrimaryCommands collection:
tabBar.getPrimaryCommands().add(b1);
tabBar.getPrimaryCommands().add(b2);
tabBar.getPrimaryCommands().add(b3);
tabBar.getPrimaryCommands().add(b4);
tabBar.getPrimaryCommands().add(b5);
page.setBottomAppBar(tabBar);
return page;
}
function dockTabs() {
// Surround the WebView with native UI
var page = buildDockedTabsWithoutXaml();
// Replace the WebView with the loaded native page
// (For the title setting in XAML to work on Android, ShowTitle must be
// set to true in the Android section of config.xml.)
ace.getHostPage().setContent(page);
// Reparent the WebView inside the native page
page.setContent(ace.getHostWebView());
// Save the native page so we can set its title as tabs are clicked
_nativePage = page;
}
但是，Ace中可能需要做更多的工作才能为您带来跨平台的Table View体验.有一个ListBox控件，但目前功能很少.有一次我尝试了跨平台的TableView控件.我会考虑将其添加到Ace中以帮助满足您的需求.让我知道您是否还有其他问题/要求！
More work is probably needed in Ace to give you the Table View experience cross-platform, however. There is a ListBox control, but it has minimal functionality at the moment. At one point I had experimented with a cross-platform TableView control. I'll look into adding that to Ace to help address your needs. Let me know if you have any other issues/requests!
这篇关于使用Ace插件制作iOS/Android TabBar&使用特定于平台的Javascript的TableView?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
