Browse Source

Adding mobile WebView example

Josh Engebretson 8 years ago
parent
commit
14fcc80de2

+ 4 - 0
MobileWebView/AtomicExample.json

@@ -0,0 +1,4 @@
+{
+    "name": "Mobile WebView",
+    "desc" : "Mobile WebView Example"
+}

+ 9 - 0
MobileWebView/JavaScript/MobileWebView.atomic

@@ -0,0 +1,9 @@
+{
+   "version": 1,
+   "project": {
+      "version": "1.0.0"
+   },
+   "platforms": [
+      "mac", "windows"
+   ]
+}

+ 5 - 0
MobileWebView/JavaScript/Resources.asset

@@ -0,0 +1,5 @@
+{
+	"version": 1,
+	"guid": "c30fca8d3b3e85c575deeed03c1a08a8",
+	"FolderImporter": {}
+}

+ 5 - 0
MobileWebView/JavaScript/Resources/Components.asset

@@ -0,0 +1,5 @@
+{
+	"version": 1,
+	"guid": "166a4bebb84862dcdec818864ec78e0b",
+	"FolderImporter": {}
+}

+ 206 - 0
MobileWebView/JavaScript/Resources/Components/UI.js

@@ -0,0 +1,206 @@
+"atomic component";
+
+var WIDTH = Atomic.graphics.width - 100;
+var HEIGHT = Atomic.graphics.height - 100;
+
+var home = "https://www.atomicgameengine.com";
+
+var bookmarks = {
+  "Atomic": "https://www.atomicgameengine.com",
+  "Google": "https://www.google.com",
+  "YouTube": "https://www.youtube.com",
+  "Steam": "https://store.steampowered.com",
+  "Reddit": "https://www.reddit.com/r/gamedev",
+  "Penny Arcade": "https://www.penny-arcade.com/"
+};
+
+// Create the UI view
+var view = new Atomic.UIView();
+
+var newTabButton;
+var newTabContent;
+
+// WebBrowser example component
+exports.component = function(self) {
+
+  var window = new Atomic.UIWindow();
+  window.text = "UIPlatformWebView Example";
+  window.setSize(WIDTH, HEIGHT);
+
+  var mainLayout = new Atomic.UILayout();
+  mainLayout.axis = Atomic.UI_AXIS.UI_AXIS_Y;
+  mainLayout.layoutDistribution = Atomic.UI_LAYOUT_DISTRIBUTION.UI_LAYOUT_DISTRIBUTION_GRAVITY;
+  mainLayout.gravity = Atomic.UI_GRAVITY.UI_GRAVITY_ALL;
+
+  var tabContainer = new Atomic.UITabContainer();
+  tabContainer.gravity = Atomic.UI_GRAVITY.UI_GRAVITY_ALL;
+
+  newTabButton = new Atomic.UIButton();
+  newTabButton.text = " ";
+  newTabButton.onClick = function() {
+    createBrowserTab(tabContainer, home);
+    // set the current page to the created page (ignoring the new tab dummy page)
+    tabContainer.currentPage = tabContainer.numPages - 2;
+    return true;
+  };
+
+  newTabContent = new Atomic.UIWidget();
+
+  tabContainer.tabLayout.addChild(newTabButton);
+  tabContainer.contentRoot.addChild(newTabContent);
+
+  // change id, so we don't initiate a page change when clicked
+  newTabButton.id = "NewTabButton";
+
+  // create a startup with our home address
+  createBrowserTab(tabContainer, home);
+  tabContainer.currentPage = 0;
+
+  // Add to main UI view and center
+  mainLayout.addChild(tabContainer);
+  window.addChild(mainLayout);
+  view.addChild(window);
+  window.center();
+
+};
+
+function createBookmarks(webView, layout,  bookmarks) {
+
+  for (var text in bookmarks) {
+
+    var button = new Atomic.UIButton();
+    button.text = text;
+    button.skinBg = "TBButton.flat";
+
+    // button layout and font desc
+    var buttonLP = new Atomic.UILayoutParams();
+    buttonLP.width = 120,
+    buttonLP.height = 18;
+    button.layoutParams = buttonLP;
+
+    var fontDesc = new Atomic.UIFontDescription();
+    fontDesc.size = 11;
+    fontDesc.id = "Vera";
+    button.fontDescription = fontDesc;
+
+    layout.addChild(button);
+
+    (function() {
+      var url = bookmarks[text];
+      button.onClick = function() { webView.loadURL(url); };
+    })();
+  }
+}
+
+function createBrowserTab(tabContainer, url) {
+
+  var contentRoot = tabContainer.contentRoot;
+  var tabLayout = tabContainer.tabLayout;
+
+  var layout = new Atomic.UILayout();
+  layout.axis = Atomic.UI_AXIS_Y;
+  layout.layoutDistribution = Atomic.UI_LAYOUT_DISTRIBUTION.UI_LAYOUT_DISTRIBUTION_GRAVITY;
+  layout.gravity = Atomic.UI_GRAVITY.UI_GRAVITY_ALL;
+  layout.spacing = 8;
+
+  var tabButton = new Atomic.UIButton();
+  tabButton.text = "Atomic Game Engine";
+
+  // button layout and font desc
+  var buttonLP = new Atomic.UILayoutParams();
+  buttonLP.width = 160,
+  buttonLP.height = 32;
+  tabButton.layoutParams = buttonLP;
+
+  var fontDesc = new Atomic.UIFontDescription();
+  fontDesc.size = 11;
+  fontDesc.id = "Vera";
+  tabButton.fontDescription = fontDesc;
+
+  // tabButtons with URL text by default open the URL upon clicking them
+  // we don't want this behaviour
+  tabButton.urlEnabled = false;
+  tabLayout.addChildBefore(tabButton, newTabButton);
+
+  // address bar
+  var addressLayout = new Atomic.UILayout();
+  addressLayout.gravity = Atomic.UI_GRAVITY.UI_GRAVITY_ALL;
+  addressLayout.layoutDistribution = Atomic.UI_LAYOUT_DISTRIBUTION.UI_LAYOUT_DISTRIBUTION_GRAVITY;
+
+  // navigation buttons
+  var backButton = new Atomic.UIButton();
+  backButton.text = "Back";
+  addressLayout.addChild(backButton);
+
+  var fwdButton = new Atomic.UIButton();
+  fwdButton.text = "Forward";
+  addressLayout.addChild(fwdButton);
+
+  var reloadButton = new Atomic.UIButton();
+  reloadButton.text = "Reload";
+  addressLayout.addChild(reloadButton);
+
+  var homeButton = new Atomic.UIButton();
+  homeButton.text = "Home";
+  addressLayout.addChild(homeButton);
+
+  var addressEdit = new Atomic.UIEditField();
+  addressEdit.text = "https://www.atomicgameengine.com";
+  addressEdit.gravity = Atomic.UI_GRAVITY.UI_GRAVITY_ALL;
+  addressLayout.addChild(addressEdit);
+
+  layout.addChild(addressLayout);
+
+  var webView = new Atomic.UIPlatformWebView();
+  webView.gravity = Atomic.UI_GRAVITY.UI_GRAVITY_ALL;
+
+  webView.setFocus(true);
+  webView.loadURL(home);
+
+  // bookmark bar
+  var bookmarkLayout = new Atomic.UILayout();
+  bookmarkLayout.gravity = Atomic.UI_GRAVITY.UI_GRAVITY_ALL;
+
+  createBookmarks( webView, bookmarkLayout, bookmarks);
+
+  layout.addChild(bookmarkLayout);
+  layout.addChild(webView);
+  contentRoot.addChildBefore(layout, newTabContent);
+
+  // initial state
+  // reloadButton.disable();
+  // backButton.disable();
+  // fwdButton.disable();
+
+  // go home
+  homeButton.onClick = function() { webView.loadURL(home); }
+
+  // reload
+  reloadButton.onClick = function() { webView.reload(); };
+
+  // Forward/Back
+  fwdButton.onClick = function() { webView.goForward(); };
+
+  backButton.onClick = function() { webView.goBack(); };
+
+  webView.subscribeToEvent(addressEdit, Atomic.UIWidgetEditCompleteEvent(function(ev) {
+
+      var url = addressEdit.text;
+
+      url = url.replace(" ", "%20");
+
+      if (url.indexOf(".") == -1) {
+        url = "http://www.google.com/search?q=" + url;
+      }
+
+      if (url.indexOf("://") == -1) {
+          url = "https://" + url;
+      }
+
+      if (!url.length)
+        return;
+
+    webView.request(url);
+
+  }));
+}

+ 7 - 0
MobileWebView/JavaScript/Resources/Components/UI.js.asset

@@ -0,0 +1,7 @@
+{
+	"version": 1,
+	"guid": "d4b61fe6e1aa99d9c536f7ddf4ae4154",
+	"JavascriptImporter": {
+		"IsComponentFile": true
+	}
+}

+ 5 - 0
MobileWebView/JavaScript/Resources/Scenes.asset

@@ -0,0 +1,5 @@
+{
+	"version": 1,
+	"guid": "c836737b808efb7db73d7a9ace4f4c27",
+	"FolderImporter": {}
+}

+ 58 - 0
MobileWebView/JavaScript/Resources/Scenes/Scene.scene

@@ -0,0 +1,58 @@
+<?xml version="1.0"?>
+<scene id="1">
+	<attribute name="Name" value="" />
+	<attribute name="Time Scale" value="1" />
+	<attribute name="Smoothing Constant" value="50" />
+	<attribute name="Snap Threshold" value="5" />
+	<attribute name="Elapsed Time" value="0" />
+	<attribute name="Next Replicated Node ID" value="372" />
+	<attribute name="Next Replicated Component ID" value="1990" />
+	<attribute name="Next Local Node ID" value="16778496" />
+	<attribute name="Next Local Component ID" value="16777216" />
+	<attribute name="Variables" />
+	<attribute name="Variable Names" value="" />
+	<component type="PhysicsWorld" id="1" />
+	<component type="Octree" id="2" />
+	<component type="DebugRenderer" id="3" />
+	<component type="Renderer2D" id="1980" />
+	<node id="2">
+		<attribute name="Is Enabled" value="true" />
+		<attribute name="Name" value="Zone" />
+		<attribute name="Tags" />
+		<attribute name="Position" value="0 0 0" />
+		<attribute name="Rotation" value="1 0 0 0" />
+		<attribute name="Scale" value="1 1 1" />
+		<attribute name="Variables" />
+		<component type="Zone" id="4">
+			<attribute name="Bounding Box Min" value="-10000 -10000 -10000" />
+			<attribute name="Bounding Box Max" value="10000 10000 10000" />
+			<attribute name="Ambient Color" value="0.4 0.4 0.4 1" />
+		</component>
+	</node>
+	<node id="361">
+		<attribute name="Is Enabled" value="true" />
+		<attribute name="Name" value="Camera" />
+		<attribute name="Tags" />
+		<attribute name="Position" value="0 0 -2" />
+		<attribute name="Rotation" value="1 0 0 0" />
+		<attribute name="Scale" value="1 1 1" />
+		<attribute name="Variables" />
+		<component type="Camera" id="1973">
+			<attribute name="Near Clip" value="0" />
+			<attribute name="Orthographic" value="true" />
+			<attribute name="Orthographic Size" value="5" />
+		</component>
+	</node>
+	<node id="363">
+		<attribute name="Is Enabled" value="true" />
+		<attribute name="Name" value="Star" />
+		<attribute name="Tags" />
+		<attribute name="Position" value="0 0 0" />
+		<attribute name="Rotation" value="1 0 0 0" />
+		<attribute name="Scale" value="1 1 1" />
+		<attribute name="Variables" />
+		<component type="JSComponent" id="1989">
+			<attribute name="ComponentFile" value="JSComponentFile;Components/UI.js" />
+		</component>
+	</node>
+</scene>

+ 8 - 0
MobileWebView/JavaScript/Resources/Scenes/Scene.scene.asset

@@ -0,0 +1,8 @@
+{
+	"version": 1,
+	"guid": "39c9c7cef67bb9ec693277c83f4e6ee3",
+	"SceneImporter": {
+		"sceneCamRotation": "1 0 0 0",
+		"sceneCamPosition": "0 0 -3.40579"
+	}
+}

+ 5 - 0
MobileWebView/JavaScript/Resources/Scripts.asset

@@ -0,0 +1,5 @@
+{
+	"version": 1,
+	"guid": "3ad4d274f96f27fb319909c3f17125ea",
+	"FolderImporter": {}
+}

+ 3 - 0
MobileWebView/JavaScript/Resources/Scripts/main.js

@@ -0,0 +1,3 @@
+// This script is the main entry point of the game
+//Load scene
+Atomic.player.loadScene("Scenes/Scene.scene");

+ 7 - 0
MobileWebView/JavaScript/Resources/Scripts/main.js.asset

@@ -0,0 +1,7 @@
+{
+	"version": 1,
+	"guid": "2905553f95abfec2cf04f8416645aee5",
+	"JavascriptImporter": {
+		"IsComponentFile": false
+	}
+}

+ 5 - 0
MobileWebView/JavaScript/Resources/Sprites.asset

@@ -0,0 +1,5 @@
+{
+	"version": 1,
+	"guid": "1b294b20a137749c6f245168eeda492e",
+	"FolderImporter": {}
+}

BIN
MobileWebView/JavaScript/Resources/Sprites/star.png


+ 7 - 0
MobileWebView/JavaScript/Resources/Sprites/star.png.asset

@@ -0,0 +1,7 @@
+{
+	"version": 1,
+	"guid": "1d2933192e71d08a643e5609093a633c",
+	"TextureImporter": {
+		"compressionSize": 0
+	}
+}

BIN
MobileWebView/Screenshot.png