Dispatches From The Edge: Dropping In A SproutCore 2.0 Application

written by Greg Moeck

7 Comments

UPDATE:

The following post refers to SproutCore 2.0, which has split off as a separate project, Ember.js. SproutCore continues with the latest release, SproutCore 1.8.

So this last week we released a SproutCore 2.0 Developer Preview, a version of SproutCore that is built to use HTML and CSS to lay out content. Although the release is still very alpha, I’m going to demonstrate one of the cool new features: dropping a SproutCore app into an existing page.

So, for example I might want to take a page like this:

And add the SproutCore todos demo to it, so that it looks like this:

Because SproutCore 1.x takes over the entire page, you would not have been able to do something like this before. However, since SproutCore 2.0 is built to be HTML/CSS oriented, now you can. But how?

Step 1: Insert Links To Your JavaScript and CSS into the application header

The first thing that you need to do in order to load a SproutCore 2.0 application into the page is to include links to jQuery (if it isn’t already on your page), SproutCore, and your application code within the header of your page. This would look something like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<html>
...
<head>
...
<!-- Insert Your Code Here -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="js/sproutcore-2.0.a.2.min.js">
</script>
<!-- SproutCore 2.0 Code -->
<script src="js/app.js">
</script>
<!-- Your SproutCore 2.0 Application Code -->
</head>
...

Step 2: Insert Template into HTML

Next, you need to insert the root template for your application directly into the spot in the HTML that you want it to appear. In our case, this would look something like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

</div> 
  <!-- End of the Projects Div -->
    <div class="Right">
      <div class="col">
        <script type="text/html">
          <div id="todos-view">
            <div class="SectionHeader">
              <h1>Your Todos</h1>
            </div>
            {{view Todos.CreateTodoView id="new-todo" placeholder="What needs to be done?"}}
            {{#view SC.Button classBinding="isActive"
              target="Todos.todosController"
              action="clearCompletedTodos"}}
              Clear Completed Todos
            {{/view}}
 
            {{#view Todos.StatsView id="stats"}}
              {{remainingString}} remaining
            {{/view}}
 
            {{view SC.Checkbox class="mark-all-done"
              title="Mark All as Done"
              valueBinding="Todos.todosController.allAreDone"}}
 
            {{#collection contentBinding="Todos.todosController" tagName="ul" itemClassBinding="content.isDone"}}
              {{view SC.Checkbox titleBinding="parentView.content.title"
                  valueBinding="parentView.content.isDone"}}
            {{/collection}}
          </div>
        </script>
      </div>
    </div>

Having done that, when the page is actually loaded, SproutCore 2.0 will automatically insert a view for the template at the DOM location specified by where you placed the template. And that’s all there is to it. Two steps, and you’ve got your SproutCore application running in your existing app.

The following video shows the whole process from start to finish:

Announcements:

We have a two Meetups scheduled so far in June:

Still haven’t registered for the 2011 SproutCore WWDC Bash? There’s still time! Register here for drink tickets and the chance to win some cool giveaways, including an iPad2!

Hope to see you around! And, as always, let us know if there’s something you feel should be up here.