WebView.js 1.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  1. 'atomic component';
  2. var WIDTH = Atomic.graphics.width - 100;
  3. var HEIGHT = Atomic.graphics.height - 100;
  4. // Setup some global JS properties that will be available on every page loaded
  5. // into the WebView
  6. WebView.browserHost.setGlobalBoolProperty("WebViewExample", "boolValue", true);
  7. WebView.browserHost.setGlobalNumberProperty("WebViewExample", "numberValue", 42);
  8. WebView.browserHost.setGlobalStringProperty("WebViewExample", "stringValue", "Hello World!");
  9. //UI component
  10. exports.component = function(self) {
  11. //create a new UIView
  12. var view = new Atomic.UIView();
  13. // Create a UIWindow
  14. var window = new Atomic.UIWindow();
  15. // It will only have a title bar and won't be resizeable or have a close button
  16. window.settings = Atomic.UI_WINDOW_SETTINGS.UI_WINDOW_SETTINGS_TITLEBAR;
  17. window.text = "WebView Properties";
  18. window.setSize(WIDTH, HEIGHT);
  19. var webView = new WebView.UIWebView("");
  20. webView.webClient.loadString(getHTML());
  21. webView.gravity = Atomic.UI_GRAVITY.UI_GRAVITY_ALL;
  22. window.addChild(webView);
  23. // Add to main UI view and center
  24. view.addChild(window);
  25. window.center();
  26. };
  27. // Simple example of access global properties
  28. function getHTML() {
  29. return "<!DOCTYPE html>\
  30. <html>\
  31. <body>\
  32. \
  33. <h1>WebView Properties!</h1>\
  34. \
  35. <p id=\"boolValue\"></p>\
  36. <p id=\"numberValue\"></p>\
  37. <p id=\"stringValue\"></p>\
  38. \
  39. <script>\
  40. document.getElementById(\"boolValue\").innerHTML = \"WebViewExample.boolValue = \" + WebViewExample.boolValue; \
  41. document.getElementById(\"numberValue\").innerHTML = \"WebViewExample.numberValue = \" + WebViewExample.numberValue; \
  42. document.getElementById(\"stringValue\").innerHTML = \"WebViewExample.stringValue = \" + WebViewExample.stringValue; \
  43. </script>\
  44. \
  45. </body>\
  46. </html>";
  47. }