Working on Atomic UIWebView example

AtomicWebView/Resources/Components/WebView.js

@@ -1,61 +1,108 @@
 "atomic component";
 
-var WIDTH = 1080;
-var HEIGHT = 600;
+// TODO: expose to inspector
+
+var WIDTH = Atomic.graphics.width - 100;
+var HEIGHT = Atomic.graphics.height - 100;
+
+var home = "http://www.atomicgameengine.com";
+
+var bookmarks = {
+    "Atomic Game Engine" : "http://www.atomicgameengine.com",
+    "Google" : "http://www.google.com",
+    "YouTube" : "https://www.youtube.com"
+};
 
 // Create the UI view
 var view = new Atomic.UIView();
 
-//UI component
-exports.component = function(self) {
-
-  var views = [];
+var newTabButton;
+var newTabContent;
 
-  function createTab(url) {
+// WebBrowser example component
+exports.component = function(self) {
 
-    var button = new Atomic.UIButton();
-    button.text = url;
-    button.urlEnabled = false;
-    tabLayout.addChild(button);
+  var window = new Atomic.UIWindow();
+  window.text = "UIWebView Example Browser";
+  window.setSize(WIDTH, HEIGHT);
 
-    var webView = new WebView.UIWebView(url);
+  var mainLayout = new Atomic.UILayout();
+  mainLayout.axis = Atomic.UI_AXIS_Y;
+  mainLayout.layoutDistribution = Atomic.UI_LAYOUT_DISTRIBUTION_GRAVITY;
+  mainLayout.gravity = Atomic.UI_GRAVITY_ALL;
 
-    self.subscribeToEvent(webView.webClient, "WebViewLoadStart", function(data) {
+  var tabContainer = new Atomic.UITabContainer();
+  tabContainer.gravity = Atomic.UI_GRAVITY_ALL;
 
-      addressEdit.text = data.url;
+  newTabButton = new Atomic.UIButton();
+  newTabButton.text = " ";
+  newTabButton.onClick = function() {
+    createBrowserTab(tabContainer, home);
+    return true;
+  }
 
-      console.log("WebViewLoadStart: " + data.url);
+  newTabContent = new Atomic.UIWidget();
 
-    });
+  tabContainer.tabLayout.addChild(newTabButton);
+  tabContainer.contentRoot.addChild(newTabContent);
 
-    self.subscribeToEvent(webView.webClient, "WebViewLoadEnd", function(data) {
+  // change id, so we don't initiate a page change when clicked
+  newTabButton.id = "NewTabButton";
 
-      addressEdit.text = data.url;
+  // create a startup with our home address
+  createBrowserTab(tabContainer, home);
 
-      console.log("WebViewLoadEnd: " + data.url);
+  // Add to main UI view and center
+  mainLayout.addChild(tabContainer);
+  window.addChild(mainLayout);
+  view.addChild(window);
+  window.center();
 
-    });
+}
 
-    contentRoot.addChild(webView);
+function createBookmarks(webView, layout,  bookmarks) {
 
-    views.push(webView);
+  for (var text in bookmarks) {
 
+    var button = new Atomic.UIButton();
+    button.text = text;
+    button.skinBg = "TBButton.flat";
+    layout.addChild(button);
+
+    var webClient = webView.webClient;
+    (function() {
+      var url = bookmarks[text];
+      button.onClick = function() { webClient.loadURL(url); }
+    })();
   }
+}
 
-  var window = new Atomic.UIWindow();
-  window.text = "UIWebView Example Browser";
-  window.setSize(WIDTH, HEIGHT);
+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_GRAVITY;
   layout.gravity = Atomic.UI_GRAVITY_ALL;
+  layout.spacing = 16;
+
+  var tabButton = new Atomic.UIButton();
+  tabButton.text = "...";
+  tabButton.squeezable = true;
+  tabButton.skinBg = "TBButton.flat";
+  // 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_ALL;
   addressLayout.layoutDistribution = Atomic.UI_LAYOUT_DISTRIBUTION_GRAVITY;
 
+  // navigation buttons
   var backButton = new Atomic.UIButton();
   backButton.text = "Back";
   addressLayout.addChild(backButton);
@@ -78,51 +125,79 @@ exports.component = function(self) {
 
   layout.addChild(addressLayout);
 
+  var webView = new WebView.UIWebView(url);
+  var webClient = webView.webClient;
+
   // bookmark bar
   var bookmarkLayout = new Atomic.UILayout();
   bookmarkLayout.gravity = Atomic.UI_GRAVITY_ALL;
 
-  var atomicButton = new Atomic.UIButton();
-  atomicButton.text = "Atomic Game Engine";
-  atomicButton.skinBg = "TBButton.flat";
-  bookmarkLayout.addChild(atomicButton);
+  createBookmarks( webView, bookmarkLayout, bookmarks);
 
-  atomicButton.onClick = function() {
-      views[0].webClient.loadURL("http://www.atomicgameengine.com");
-  }
+  layout.addChild(bookmarkLayout);
+  layout.addChild(webView);
+  contentRoot.addChildBefore(layout, newTabContent);
 
-  var youtubeButton = new Atomic.UIButton();
-  youtubeButton.text = "YouTube";
-  youtubeButton.skinBg = "TBButton.flat";
+  // initial state
+  reloadButton.disable();
+  backButton.disable();
+  fwdButton.disable();
 
-  youtubeButton.onClick = function() {
-      views[0].webClient.loadURL("https://www.youtube.com");
-  }
+  // go home
+  homeButton.onClick = function() { webClient.loadURL(home)};
 
-  bookmarkLayout.addChild(youtubeButton);
+  // reload
+  reloadButton.onClick = function() { webClient.reload(); };
 
-  layout.addChild(bookmarkLayout);
+  // Forward/Back
+  fwdButton.onClick = function() { webClient.goForward(); }
+  backButton.onClick = function() { webClient.goBack(); }
 
-  var tabContainer = new Atomic.UITabContainer();
-  tabContainer.gravity = Atomic.UI_GRAVITY_ALL;
+  // events
 
-  var contentRoot = tabContainer.contentRoot;
-  var tabLayout = tabContainer.tabLayout;
+  // update the addressEdit at start and stop of url load
+  webView.subscribeToEvent(webClient, "WebViewLoadStateChange", function(ev) {
 
-  createTab("http://atomicgameengine.com/blog/development-digest-4/");
-  //createTab("https://store.steampowered.com/");
-  //createTab("https://github.com/AtomicGameEngine/AtomicGameEngine");
+    ev.canGoBack ? backButton.enable() : backButton.disable();
+    ev.canGoForward ? fwdButton.enable() : fwdButton.disable();
 
-  // Add to main UI view and center
-  layout.addChild(tabContainer);
-  window.addChild(layout);
-  view.addChild(window);
-  window.center();
+  });
+
+  // update the addressEdit at start and stop of url load
+  webView.subscribeToEvent(webClient, "WebViewAddressChange", function(ev) {
+
+    // we can now reload
+    reloadButton.enable();
+
+    addressEdit.text = ev.url;
+
+  });
+
+  webView.subscribeToEvent(webClient, "WebViewTitleChange", function(ev) {
+
+    tabButton.text = ev.title;
+
+  });
 
-  tabContainer.currentPage = 0;
 
 }
 
+/*
+button_ = new UIButton(context_);
+button_->SetText(filename.CString());
+button_->SetSqueezable(true);
+button_->SetSkinBg("TBButton.flat");
+button_->SetValue(1);
+editorTabLayout_->AddChild(button_->GetInternalWidget());
+
+TBButton* closebutton = new TBButton();
+editorTabLayout_->AddChild(closebutton);
+closebutton->SetSkinBg(TBIDC("TBWindow.close"));
+closebutton->SetIsFocusable(false);
+closebutton->SetID(TBIDC("tabclose"));
+
+*/
+
 // The Web View
 //var webView = new WebView.UIWebView("https://ace.c9.io/build/kitchen-sink.html");
 //var webView = new WebView.UIWebView("https://store.steampowered.com");