How to determine the path of sproutcore element?
BrandonK
following the 'hello_world_spec.rb' example, I'm having difficulty
applying it to a real-world example.
In particular, I'm having trouble creating a label that points at a
simple checkbox on a login page.
The Sproutcore details:
I have a main_page.js:
Editor.mainPage = SC.Page.design({
mainPane : SC.MainPane.design({
childViews : [ 'shadow', 'header', 'mainVeiw' ],
....
mainView : SC.View.design({
.....
})
})
});
main.js
function main() {
Foo.set('applicationContext',Editor);
Editor.Statechart.initStatechart();
}
statechart.js
Editor.Statechart = SC.Statechart.create(
{
autoInitStatechart : false,
rootState : Editor.RootState
}
root_state.js
Editor.RootState = SC.State.design(
{
initialSubstate : 'LoggedOutState',
....
}
logged_out_state.js
Editor.LoggedOutState = SC.State.design(
loginView : null
enterState : function() {
var mainView = Editor.getPath('mainPage.mainPane.mainView');
var loginView = Foo.LoginView.create({});
this.set('loginView', loginView);
mainView.appendChild(loginView);
}
......
});
login_view.js under the 'src/frameworks/Foo' directory
Foo.LoginView = SC.FormView.design(
{
......
rememberMe : SC.FormView.row(SC.CheckboxView.design({
valueBinding : 'Bar.sessionController.rememberMe',
isPassword : true }),
layout : ......
fieldKey : 'rememberMe'
fieldLabel : "_rememberMe'
}),
.....
});
When I inspect the checkbox element using the 'Illuminations for
Developers' plug-in for Firebug, it gives a hierachy of:
All > SC.MainPane > SC.View > Foo.LoginView > SC.FormRowView >
SC.CheckboxView
So far, so good.
I now try to create a Lebowski label in my 'editor_spec.rb'. I am
successful at creating labels for higher level elements. For example:
@mainView = App['mainPage.mainPane.mainView', 'SC.View' ]
However, I've tried various paths to checkbox that all end up creating
an error of 'Did not get expected type '<type>' for path '<path>'.
Instead got undefined: undefined
Some things I've tried:
@rememberMe = App["Foo.LoginView.rememberMe', 'SC.CheckboxView']
@rememberMe =
App["mainPage.mainPane.mainView.Foo.LoginView.rememberMe',
'SC.CheckboxView']
etc.
I also have similar problems just trying to create a label that
correctly points to Foo.LoginView.
How do I create a lable for a sproutcore element that is part of a
Sproutcore Framework?
Does the path start at Foo (the top level framework name), or should
it be based off of mainPage still?
What is the appropriate code to create a label for the element?
Any help would be appreciated!
MikeC
This issue is the Foo.LoginView.rememberMe is not a type
SC.CheckboxView, but, rather, it's a SC.FormRowView as the
Illuminations tool points out. The checkbox view you want is actually
a child of the form row view. Looking at the SC.FormRowView logic, the
view contains both a child label view representing the row's visible
label, and the field view representing the view you passed to
SC.FormView.row. You can access the label view via the form view
view's labelView property. The field view appears to be the second
child view. You can get a child view via its index like so:
App['mainPage.mainPane.childViews.1']
Granted having a proxy for SC.FormView and SC.FormRowView would make
accessing the label and field view's easier, but because these are
part of the experimental branch I haven't spent any time looking into
them.
Regarding how you access your Foo.LoginView, this is being dynamically
added to your app's main view in your editor's statechart, so in such
a case you will also have to access the login view via the main view's
child views using an index. However, because you are dynamically
appending the login view this means that the child view index is not
fixed. You therefore need to access the main view and find the login
view.
So to get access to your views you do the following:
main_pane = App['mainPage.mainPane.mainView']
login_view = main_pane.child_views.first('Foo.LoginView')
field_view = login_view.child_views[1, 'SC.CheckboxView'] // Get the
second child
-Mike
BrandonK
--Brandon
MikeC
login view, you can also do the following:
field_view = login_view.child_views.first('SC.CheckboxView')
The above approach means you don't have to know the specific index the
checkbox view is placed within the child views array.
-Mike