Working on new ui example

UIExample/Resources/Components/UI.js

@@ -1,85 +1,95 @@
 
-var game = Atomic.game;
-var ui = game.ui;
-var root = ui.getRoot();
+var view = new Atomic.UIView();
 
-var uiStyle = game.cache.getResource("XMLFile", "UI/DefaultStyle.xml");
-root.defaultStyle = uiStyle;
+var window = new Atomic.UIWindow();
+window.load("UI/Test.ui.txt");
+window.text = "Turbo Badger";
+window.setSize(250, 630);
+window.setPosition(10, 50);
+view.addChild(window);
 
-var window = new Atomic.Window();
-root.addChild(window);
+var edit = new Atomic.UIWindow();
+edit.load("UI/EditWindow.ui.txt");
+edit.text = "Edit Window";
+edit.setSize(450, 630);
+edit.setPosition(280, 50);
+view.addChild(edit);
 
-window.setMinSize(384, 192);
+window.getWidget("test-image").onClick = function() {
 
-window.setAlignment(Atomic.HA_CENTER, Atomic.VA_CENTER);
+  var testImage = new Atomic.UIWindow();
+  testImage.load("UI/TestImageWidget.ui.txt");
+  testImage.text = "Image Widget";
 
-window.setLayout(Atomic.LM_VERTICAL, 6, [6, 6, 6, 6]);
-window.setName("Window");
+  testImage.setSize(350, 500);
 
-var titleBar = new Atomic.UIElement();
-titleBar.setMinSize(0, 24);
-titleBar.setVerticalAlignment(Atomic.VA_TOP);
-titleBar.setLayoutMode(Atomic.LM_HORIZONTAL);
+  view.addChild(testImage);
 
-// Create the Window title Text
-var windowTitle = new Atomic.Text();
-windowTitle.setName("WindowTitle");
-windowTitle.setText("Star Maker!");
-titleBar.addChild(windowTitle);
+  testImage.center();
 
-window.addChild(titleBar);
+}
+
+window.getWidget("test-layout").onClick = function() {
 
-var button = new Atomic.Button();
-button.setName ("Star Button");
-button.setMinHeight(24);
+  var testLayout = new Atomic.UIWindow();
+  testLayout.load("UI/TestRadioCheckbox.ui.txt");
+  testLayout.text = "Radio & Checkbox";
 
-var buttonText = new Atomic.Text();
+  var rect = testLayout.getResizeToFitContentRect();
 
-buttonText.text = "Add Star";
-var font = game.cache.getResource("Font", "Fonts/Anonymous Pro.ttf");
+  testLayout.setSize(rect.width, rect.height);
 
-buttonText.setFont(font, 12);
-buttonText.color = [0, 1, 0, 1];
+  view.addChild(testLayout);
 
-buttonText.horizontalAlignment = Atomic.HA_CENTER;
-buttonText.verticalAlignment = Atomic.VA_CENTER;
-button.addChild(buttonText);
+  testLayout.center();
+}
 
-window.addChild(button);
+var editfield = edit.getWidget("editfield");
+var menubutton = edit.getWidget("menu");
 
-window.movable = true;
-window.resizeable = true;
+edit.getWidget("clear").onClick = function() {
 
-window.setStyleAuto();
-titleBar.setStyleAuto();
-windowTitle.setStyleAuto();
-button.setStyleAuto();
+  editfield.text = "";
 
-self.onMouseClick = function(element) {
+}
 
-    var width = game.graphics.width * Atomic.PIXEL_SIZE * 0.5;
-    var height = game.graphics.height * Atomic.PIXEL_SIZE * 0.5;
-    
-    var x = -width/2 + width * Math.random();
-    var y = -height/2 + height * Math.random();
+menubutton.onClick = function() {
+
+  menubutton.popup({
+    "Toggle wrapping" : "toggle wrapping",
+    "-" : "",
+    "Align selected left" : "align left",
+    "Align selected center" : "align center",
+    "Align selected right" : "align right"
+  }, function(id) {
+
+    switch(id) {
+      case "align right":
+        editfield.textAlign = Atomic.TEXT_ALIGN_RIGHT;
+        break;
+      case "align center":
+        editfield.textAlign = Atomic.TEXT_ALIGN_CENTER;
+        break;
+      case "align left":
+        editfield.textAlign = Atomic.TEXT_ALIGN_LEFT;
+        break;
+      case "toggle wrapping":
+        editfield.wrapping = !editfield.wrapping;
+        break;
+    }
+
+  });
 
-   if (element.name == "Star Button") {
-        var starNode = game.scene.createChild("Star");
-        starNode.createJSComponent("Star");
-        starNode.position2D = [x, y];
-   }
-    
 }
 
+
 function start() {
 
-    self.listenToEvent(null, "UIMouseClick", self.onMouseClick );
 
 }
 
 function update(timeStep) {
 
-    
-    
-}
 
+
+}

UIExample/Resources/Scripts/main.js

@@ -11,7 +11,7 @@ function start() {
 
     // create a 2D scene
     game.createScene2D();
-    
+
     var uiNode = game.scene.createChild("UI");
     uiNode.createJSComponent("UI");
 
@@ -21,4 +21,4 @@ function start() {
 function update(timeStep) {
 
 
-}
+}

UIExample/Resources/Skin/skin.tb.txt

@@ -0,0 +1,74 @@
+# Demo skin override (contains some additions for the demo)
+elements
+	Icon16
+		bitmap icon16.png
+		min-width 16
+		min-height 16
+	Icon48
+		bitmap icon48.png
+			cut 4
+		min-width 20
+		min-height 20
+	Icon128
+		bitmap icon128.png
+	background
+		bitmap bg_tile.png
+		type Tile
+	background_solid
+		background-color #3b3b3b
+		padding 10
+	SpecialButton
+		bitmap special_button.png
+		cut 17
+		expand 7
+		padding 6 8
+		overrides
+			element SpecialButton.pressed
+				state pressed
+		overlays
+			element generic_focus_r8
+				state focused
+			element Star
+				condition: target: ancestors, property: skin, value: "Starry buttons"
+	SpecialButton.pressed
+		bitmap special_button_pressed.png
+		cut 17
+		expand 7
+		content-ofs-x 1
+		content-ofs-y 1
+	ImageCaption
+		background-color #00000066
+	ImageFrame
+		overlays
+			element ImageFrame.overlay
+				state all
+	ImageFrame.overlay
+		bitmap image_frame.png
+		cut 22
+		expand 15
+	Remove
+		bitmap remove.png
+		type Image
+		padding 5
+	Star
+		bitmap star_gray.png
+		type Image
+		img-position-x 0
+		img-position-y 0
+		img-ofs-x -8
+		img-ofs-y -12
+		overrides
+			element Star.active
+				condition: target: this, property: "window active"
+				condition: target: parent, property: hover
+	Star.active
+		bitmap star_gold.png
+		type Image
+		img-position-x 0
+		img-position-y 0
+		img-ofs-x -10
+		img-ofs-y -14
+	generic_focus_r8
+		bitmap focus_r8.png
+		cut 14
+		expand 4

UIExample/Resources/UI/EditWindow.ui.txt

@@ -0,0 +1,35 @@
+WindowInfo
+	title Text editing
+	position 280 50
+	size 450 630
+TBLayout: axis: y, distribution: available
+	TBLayout: distribution: gravity
+		TBButton: id: undo
+			TBSkinImage: skin: arrow.left
+		TBButton: id: redo
+			TBSkinImage: skin: arrow.right
+		TBButton: text: Clear, id: clear
+		TBLayout
+			gravity left right
+			distribution-position right bottom
+			TBTextField: id: info
+			TBButton: id: menu
+				TBSkinImage: skin: arrow.down
+				TBTextField: text: Menu
+				skin TBButton.flat
+	TBEditField: multiline: 1, styling: 1, gravity: all, id: editfield, autofocus: 1
+		text: "Turbo Badger - Fast UI toolkit\n\n" \
+				"<color #0794f8>Test zone</color>\n" \
+				"The menu to the left spawns some examples of features in turbo badger.\n\n" \
+				"The code in Demo/* is more like a developers test zone than organized tutorial-like samples. " \
+				"This would be good to fix of course (help is welcome! ;)\n\n" \
+				"<color #0794f8>Some things to try out</color>\n" \
+				" • All layouts provide panning of content automatically when squashed below the minimal size, so try resizing windows and pan.\n" \
+				" • Lines starting with a bullet sequence (like this one) should wrap in a smart way.\n" \
+				" • Message windows whose target is removed, are automatically removed. Close the menu window with open messages.\n" \
+				" • Keyboard navigation using tab.\n" \
+				" • <u>Underline</u>, <color #f44>Red</color>, <color #6f6>Green</color>, <color #aaf>Blue</color>\n\n" \
+				"<color #0794f8>Good to know</color>\n" \
+				" • The text widget handles styling and embedded content (Example: <widget TBSkinImage: skin: 'Icon16'> <widget TBButton: text: 'Nice!'>), but does not handle editing of those fully. Those features are only ment for read-only text widgets for now.\n" \
+				" • You can emulate touch input by holding down shift, ctrl or alt. Touch input behaves differently in some widgets (f.ex long click to open context menu in textfields), and only invoke movement when down.\n" \
+				" • All resources are UTF-8.\n"

UIExample/Resources/UI/Test.ui.txt

@@ -0,0 +1,58 @@
+WindowInfo
+	title Turbo Badger
+	position 10 50
+	size 250 630
+
+TBLayout: axis: y, distribution-position: "left top", distribution: "available"
+
+	TBSection: value: 1, text: "Misc features"
+		TBLayout: axis: y, spacing: 0, size: available
+			TBButton: skin: "TBButton.flat", text: "Radiobutton & Checkbox"
+				id: "test-layout"
+				data: "test_radio_checkbox.tb.txt"
+			TBButton: skin: "TBButton.flat", text: "TBSelectList", id: "test-list"
+			TBButton: skin: "TBButton.flat", text: "ScrollContainer & misc.", id: "test-scroll-container"
+			TBButton: skin: "TBButton.flat", text: "TBWidgetValue connections", id: "test-connections"
+			TBButton: skin: "TBButton.flat", text: "TBImage", id: "test-image"
+			TBButton: skin: "TBButton.flat", text: "TBScrollerSnapListener", id: "test-page"
+			TBButton: skin: "TBButton.flat", text: "Animations", id: "test-animations"
+			TBButton: skin: "TBButton.flat", text: "Skin conditions", id: "test-skin-conditions"
+			TBButton: skin: "TBButton.flat", text: "TBToggleContainer"
+				id: "test-layout"
+				data: "test_toggle_containers.tb.txt"
+			TBButton: skin: "TBButton.flat", text: "Close with dim & alert", id: "TBWindow.close"
+			TBButton: skin: "TBButton.flat", text: "ResourceEditWindow", id: "test-resource-edit"
+
+	TBSection: value: 0, text: "Layout tests"
+		TBLayout: axis: y, spacing: 0, size: available
+			TBButton: skin: "TBButton.flat", text: "Size, gravity, position"
+				id: "test-layout"
+				data: "test_layout01.tb.txt"
+			TBButton: skin: "TBButton.flat", text: "Distribution"
+				id: "test-layout"
+				data: "test_layout02.tb.txt"
+			TBButton: skin: "TBButton.flat", text: "TBWidget default"
+				id: "test-layout"
+				data: "test_layout03.tb.txt"
+
+	TBSection: value: 0, text: "Graphics tests"
+		TBLayout: axis: y, spacing: 0, size: available
+			TBClickLabel: text: "Continous repaint"
+				lp: max-width: 0
+				TBCheckBox: connection: continous-repaint
+			TBButton: skin: "TBButton.flat", text: "Reload skin bitmaps", id: "reload skin bitmaps"
+			TBButton: skin: "TBButton.flat", text: "Context lost & restore", id: "test context lost"
+
+	TBSection: value: 0, text: "Message tests"
+		TBLayout: axis: y, spacing: 0, size: available
+			TBButton: skin: "TBButton.flat", text: "PostMessage", id: "msg"
+			TBButton: skin: "TBButton.flat", text: "PostMessageDelayed", id: "delayedmsg"
+			TBClickLabel: text: "Busy message loop"
+				lp: max-width: 0
+				TBCheckBox: id: "busymsg"
+
+	# We want the debug button at the bottom if there is space over,
+	# so use an trailing layout which may expand a lot.
+	TBLayout: axis: y, distribution-position: bottom
+		lp: max-height: 10000
+		TBButton: id: "debug settings", text: "Runtime debug settings..."

UIExample/Resources/UI/TestImageWidget.ui.txt

@@ -0,0 +1,30 @@
+TBScrollContainer
+	adapt-content 1
+	TBLayout
+		axis y
+		spacing 20
+		TBEditField: gravity: all, skin: 0, multiline: 1, readonly: 1, adapt-to-content: 1
+			text: "Some images shown by TBImageWidget. This test requires enabling TB_IMAGE (see tb_config.h).\n" \
+					"Images are unloaded when all references are removed (this window is closed)."
+		TBImageWidget: filename: "Images/image_1.png", skin: ImageFrame
+			TBButton: skin: "Remove", id: "remove", gravity: right
+		TBImageWidget: filename: "Images/image_2.png", skin: ImageFrame
+			TBButton: skin: "Remove", id: "remove", gravity: right
+		TBImageWidget: filename: "Images/image_3.png", skin: ImageFrame
+			TBButton: skin: "Remove", id: "remove", gravity: right
+		TBImageWidget: filename: "Images/image_4.png", skin: ImageFrame
+			TBButton: skin: "Remove", id: "remove", gravity: right
+		TBImageWidget: filename: "Images/image_5.png", skin: ImageFrame
+			TBButton: skin: "Remove", id: "remove", gravity: right
+		TBImageWidget: filename: "Images/image_6.png", skin: ImageFrame
+			TBButton: skin: "Remove", id: "remove", gravity: right
+			TBTextField: skin: "ImageCaption", text: "Öland", gravity: bottom left right
+		TBImageWidget: filename: "Images/image_7.png", skin: ImageFrame
+			TBButton: skin: "Remove", id: "remove", gravity: right
+			TBTextField: skin: "ImageCaption", text: "Öland", gravity: bottom left right
+		TBImageWidget: filename: "Images/image_8.png", skin: ImageFrame
+			TBButton: skin: "Remove", id: "remove", gravity: right
+			TBTextField: skin: "ImageCaption", text: "Örebro", gravity: bottom left right
+		TBImageWidget: filename: "Images/image_9.png", skin: ImageFrame
+			TBButton: skin: "Remove", id: "remove", gravity: right
+			TBTextField: skin: "ImageCaption", text: "Stockholm", gravity: bottom left right

UIExample/Resources/UI/TestRadioCheckbox.ui.txt

@@ -0,0 +1,33 @@
+WindowInfo
+	title Radiobutton & checkbox
+TBLayout: position: left top, axis: y
+	TBTextField: text: "Radiobuttons, anonymous group:"
+	TBLayout: distribution: preferred
+		TBRadioButton
+		TBRadioButton
+		TBRadioButton: state: disabled
+	TBTextField: text: "Radiobuttons, group-id: 'R1'":
+	TBLayout: distribution: preferred
+		TBRadioButton: group-id: R1
+		TBRadioButton: group-id: R1
+		TBRadioButton: group-id: R1, state: disabled
+	TBTextField: text: "Radiobuttons, group-id: 'R2' value set":
+	TBLayout: distribution: preferred
+		TBRadioButton: group-id: R2, value: 1
+		TBRadioButton: group-id: R2
+		TBRadioButton: group-id: R2, state: disabled
+	TBTextField: text: "Checkboxes"
+	TBLayout: distribution: preferred
+		TBCheckBox
+		TBCheckBox: value: 1
+		TBCheckBox: state: disabled
+		TBCheckBox: state: disabled, value: 1
+	TBTextField: text: "TBClickLabel with radio & check"
+	TBClickLabel: text: Some text to click
+		TBCheckBox
+	TBClickLabel: text: Some text to click
+		TBRadioButton
+	TBClickLabel: text: Some text to click, state: disabled
+		TBCheckBox
+	TBClickLabel: text: Some text to click, state: disabled
+		TBRadioButton