1 // ========================================================================== 2 // Project: SproutCore Test Runner 3 // Copyright: ©2006-2011 Strobe Inc. and contributors. 4 // Portions ©2008-2011 Apple Inc. All rights reserved. 5 // License: Licensed under MIT license (see license.js) 6 // ========================================================================== 7 /*global TestRunner */ 8 9 sc_require('views/offset_checkbox'); 10 11 // This page describes the main user interface for your application. 12 TestRunner.mainPage = SC.Page.design({ 13 14 /** 15 This is the main pane that is displayed when the application loads. The 16 main views are configured here including the sidebar, toolbar at the 17 bottom and the iframe. 18 */ 19 mainPane: SC.MainPane.design({ 20 21 defaultResponder: TestRunner.statechart, 22 23 // when defining a generic view, just name the properties holding your 24 // child views here. the w() helper is like calling split(' ') 25 childViews: ['splitView', 'toolbarView'], 26 27 // This is the main split view on the top of the screen. Note that 28 // since SC.SplitView defines a few special types of views you don't need 29 // to define a childViews array. 30 splitView: SC.SplitView.design({ 31 32 layout: { bottom: 36 }, 33 34 topLeftView: SC.ScrollView.design(SC.SplitChild, { 35 36 size: 200, 37 38 hasHorizontalScroller: NO, // disable horizontal scrolling 39 contentView: SC.SourceListView.design({ 40 action: 'selectTarget', 41 actOnSelect: true, 42 contentBinding: SC.Binding.oneWay('TestRunner.sourceController.arrangedObjects'), 43 selectionBinding: 'TestRunner.targetsController.selection', 44 contentValueKey: 'displayName', 45 hasContentIcon: true, 46 contentIconKey: 'targetIcon' 47 }) 48 }), 49 50 bottomRightView: SC.ContainerView.design(SC.SplitChild, { 51 autoResizeStyle: SC.RESIZE_AUTOMATIC, 52 nowShowingBinding: SC.Binding.oneWay("TestRunner.currentScene") 53 }) 54 }), 55 56 // This is the toolbar view that appears at the bottom. We include two 57 // child views that alight right and left so that we can add buttons to 58 // them and let them layout themselves. 59 toolbarView: SC.ToolbarView.design({ 60 61 layout: { bottom: 0, borderTop: 1, height: 36, zIndex: 2 }, 62 63 childViews: ['logo', 'runTestsButton'], // , 'continuousIntegrationCheckbox' 64 65 logo: SC.View.design({ 66 layout: { width: 200 }, 67 classNames: ['app-title'], 68 tagName: 'h1', 69 render: function (context) { 70 var img_url = sc_static('images/sproutcore-32.png'); 71 context.push('<img src="%@" />'.fmt(img_url)); 72 context.push('<span>', "_Test Runner".loc(), "</span>"); 73 } 74 }), 75 76 // Disabled 77 continuousIntegrationCheckbox: TestRunner.OffsetCheckboxView.design({ 78 title: "Continuous Integration", 79 offsetBinding: SC.Binding.oneWay("TestRunner.sourceController.sidebarThickness"), 80 valueBinding: "TestRunner.testsController.useContinuousIntegration", 81 isEnabledBinding: SC.Binding.oneWay("TestRunner.testsController.length").bool(), 82 layout: { height: 18, centerY: 1, width: 170, left: 206 } 83 }), 84 85 runTestsButton: SC.ButtonView.design({ 86 action: 'runTests', 87 title: "Reload", 88 // isEnabledBinding: SC.Binding.oneWay("TestRunner.testsController.length").bool(), 89 isVisibleBinding: SC.Binding.oneWay('TestRunner.testController.content').bool(), 90 layout: { height: 24, centerY: 0, width: 90, right: 12 } 91 }) 92 93 }) 94 }), 95 96 targetsLoading: SC.View.design({ 97 childViews: "labelView".w(), 98 99 labelView: SC.LabelView.design({ 100 layout: { centerX: 0, centerY: 0, height: 24, width: 200, opacity: 0.8 }, 101 controlSize: SC.LARGE_CONTROL_SIZE, 102 classNames: ['center-label'], 103 value: "_Loading Targets".loc() 104 }) 105 }), 106 107 noTargets: SC.View.design({ 108 childViews: "labelView".w(), 109 110 labelView: SC.LabelView.design({ 111 layout: { centerX: 0, centerY: 0, height: 24, width: 200, opacity: 0.8 }, 112 classNames: ['center-label'], 113 controlSize: SC.LARGE_CONTROL_SIZE, 114 value: "_No Targets".loc() 115 }) 116 }), 117 118 noTests: SC.View.design({ 119 childViews: "labelView".w(), 120 121 labelView: SC.LabelView.design({ 122 layout: { centerX: 0, centerY: 0, height: 24, width: 200, opacity: 0.8 }, 123 classNames: ['center-label'], 124 controlSize: SC.LARGE_CONTROL_SIZE, 125 value: "_No Tests".loc() 126 }) 127 }), 128 129 testsLoading: SC.View.design({ 130 childViews: "labelView".w(), 131 132 labelView: SC.LabelView.design({ 133 layout: { centerX: 0, centerY: 0, height: 24, width: 200, opacity: 0.8 }, 134 classNames: ['center-label'], 135 controlSize: SC.LARGE_CONTROL_SIZE, 136 value: "_Loading Tests".loc() 137 }) 138 }), 139 140 testsNone: SC.View.design({ 141 childViews: ['labelView'], 142 143 labelView: SC.LabelView.design({ 144 layout: { centerX: 0, centerY: 0, height: 24, width: 200, opacity: 0.8 }, 145 classNames: ['center-label'], 146 controlSize: SC.LARGE_CONTROL_SIZE, 147 value: "_No Target Selected".loc() 148 }) 149 }), 150 151 /* list view: displayed when you are in the READY_LIST state, this view 152 shows all of the unit tests for the selected target. 153 */ 154 testsMaster: SC.ScrollView.design({ 155 156 // configure scroll view do hide horizontal scroller 157 hasHorizontalScroller: NO, 158 159 // this is the list view that actually shows the content 160 contentView: SC.ListView.design({ 161 162 // bind to the testsController, which is an ArrayController managing the 163 // tests for the currently selected target. 164 contentBinding: SC.Binding.oneWay('TestRunner.testsController.arrangedObjects'), 165 selectionBinding: 'TestRunner.testsController.selection', 166 167 // configure the display options for the item itself. The row height is 168 // larger to make this look more like a menu. Also by default show 169 // the title. 170 classNames: ['test-list'], // used by CSS 171 rowHeight: 32, 172 173 hasContentIcon: YES, 174 contentIconKey: "icon", 175 176 hasContentBranch: YES, 177 contentIsBranchKey: 'isRunnable', 178 179 contentValueKey: "displayName", 180 181 // the following two options will make the collection view act like a 182 // menu. It will send the action down the responder chain whenever you 183 // click on an item. When in the READY state, this action will show the 184 // detail view. 185 actOnSelect: YES, 186 action: "selectTest" 187 188 }) 189 }), 190 191 testsDetail: SC.View.design({ 192 childViews: ['navigationView', 'webView'], 193 194 navigationView: SC.ToolbarView.design({ 195 classNames: 'navigation-bar', 196 197 layout: { borderBottom: 1, top: 0, left: 0, right: 0, height: 34, zIndex: 2 }, 198 childViews: ['backButton', 'locationLabel'], 199 200 backButton: SC.ButtonView.design({ 201 layout: { left: 8, centerY: 0, width: 80, height: 24 }, 202 title: "« Tests", 203 action: "back" 204 }), 205 206 locationLabel: SC.LabelView.design({ 207 classNames: ['location-label'], 208 escapeHTML: false, 209 layout: { right: 10, centerY: 0, height: 16, left: 100 }, 210 contentBinding: SC.Binding.oneWay("TestRunner.testController.content"), 211 value: function () { 212 var content = this.get('content'); 213 214 if (content) { 215 return '<a href="%@" target="_blank">%@</a>'.fmt(content.get('url'), content.get('displayName')); 216 } else { 217 return ''; 218 } 219 }.property('content') 220 }) 221 222 }), 223 224 webView: SC.WebView.design({ 225 layout: { top: 34, left: 2, right: 0, bottom: 0 }, 226 valueBinding: SC.Binding.oneWay("TestRunner.testController.uncachedUrl") 227 }) 228 }) 229 230 }); 231 232 233