SproutCore UI - Inventing Wheel Again

Ending Never Staircase

SproutCore 2.0 announced.  Da.  SproutCoreUI available.  For purpose what?  Alexei say they rebuilding controls using handlebar moustaches.  I say they crazy.

Any SproutCore devs comment?

SproutCore Backend Using ASP.NET, MVC3, EF4, Humor Free

These are the key elements to implementing 'step-6' of the SproutCore todo's tutorial for asp.net/mvc.  Use  'Code-First Development with .NET 4 Entity Framework' to create and maintain the database schema.  Let the Entity Framework manage the objects so you don't have to.  To access, the data use ASP.NET MVC3.
Code exerpts follow:

Automatically generates the database schema when class is created:

namespace SproutCoreMVC.Models
{
    public class Task
    {
        [DatabaseGenerated(DatabaseGeneratedOption.Identity)]
        public int id { get; set; }
        public string description { get; set; }
        public int order { get; set; }
        public bool isDone { get; set; }
        public string guid { get {return "/tasks/" + id;} }
    }

    public class SCModels : DbContext
    {
        public DbSet<Task> Tasks { get; set; }
    }

    public class SCModelsInitializer : DropCreateDatabaseIfModelChanges<SCModels>
    {
        protected override void Seed(SCModels context)
        {
            var tasks = new List<Task>
            {
                new Task {
                    order = 1,
                    isDone = false,
                    description = "Some Description"
                }
};

            tasks.ForEach(d => context.Tasks.Add(d));
            context.SaveChanges();
        }
    }
}

This is the REST implementation.  Easy da? 

namespace SproutCoreMVC.Controllers
{
    public class TasksController : Controller
    {
        SCModels db = new SCModels();

        // GET: /tasks        
        [HttpGet]
        [NoCache]
        public ActionResult List()
        {
            return Json(new {content = db.Tasks}, JsonRequestBehavior.AllowGet);
        }
        
        //GET: /tasks/id
        [HttpGet]
        [NoCache]
        public JsonResult Get(int id)
        {
            return Json(db.Tasks.Find(id), JsonRequestBehavior.AllowGet);
        }

        //PUT: /tasks/id
        [HttpPut]
        public ActionResult Update(Task task)
        {
            var taskToUpdate = db.Tasks.Find(task.id);
            UpdateModel(taskToUpdate);
            db.SaveChanges();
            return Json(taskToUpdate);
        }
        
        //POST: /tasks
        [HttpPost]
        public ActionResult Create(Task task)
        {
            db.Tasks.Add(task);
            db.SaveChanges();

            //set location and to redirect headers
            Response.StatusCode = 201;
            Response.RedirectLocation = task.guid;
            return new EmptyResult();
        }

        //DELETE: /tasks/id
        [HttpDelete]
        public ActionResult Delete(int id)
        {
            db.Tasks.Remove(db.Tasks.Find(id));
            db.SaveChanges();
            return new EmptyResult();
        }
    }
} 

I left out the routing information. As you can see the integration between SproutCore and asp.net MVC3 and Entity Framework 4 is quite straightforward and painless. I actually only write about 70 lines of code.  Is much easier than you half of project.

SproutCore TabView ; A View from the trenches, now (mostly) rhetoric free.

Beautiful Anastasia Volochkova

Anastasia Volochkova is much like SproutCore's TabView;  She is a beauty to behold, but do not cross her or she will sue (and win).


SproutCore's SC.TabView is much the same.  You must do things TabView's way, and if you want to do something else then you will have to build it.

TabView will accept a few parameters:
items (or itemsBinding) - an array of items 
nowShowing - the view that will be loaded by default,
itemTitleKey - button label
itemValueKey - the value that the button will hold
You can also pass itemActionKey, and itemTargetKey, but they don't work as I would expect (or want).
 .... more on this later

Under the hood, TabView rely's on SegmentedView, for buttons and a  ContainerView to hold the view elements.  The TabView creates a SegmentView for each item in the passed in 'items' array.  Items can either be pre-defined or else bound as itemsBinding. 

Where things go 'funny' is when you specify the itemActionKey and/or itemTargetKey;  With those specified, the TabView's buttons fire off the action, but the 'value' component is somehow lost in translation and no SegmentView change is displayed.  Perhaps I don't know what I'm doing, but that's my experience.  Also, the SegmentView button is not put into the 'on' state.

I'll illustrate what I mean with a few screenshots:

First a simple TabView rendering:

mainView : SC.TabView.design({
    layout : {top : 36, left : 40, right : 40, bottom : 40},
    nowShowing : 'otherStepsView',
    itemTitleKey : 'title',
    itemValueKey : 'value',
    itemIconKey : 'icon',
    itemActionKey : 'action',
    itemTargetKey : 'target',
    items : [ {
      title : 'Steps',
      value : 'stepsView',
      icon : 'sc-icon-folder-16'
    },
    { title: 'otherSteps',
      value: 'otherStepsView',
      icon: 'sc-icon-folder-16',
      action: 'someAction',
      target: 'MyApp.aController'
    }
    ]
  })

to create....

Looks good right?

Exactly as expected.  Lets click on the "Steps" tab.

Still exactly right.

Lets click on the 'otherSteps' tab.

So, basically this sucks.  We should be able to work around this by setting the 'nowShowing' property in the 'MyApp.aController.someAction' function.

someAction: function(something){
  console.log('You clicked me! I am: '+something);
  console.log('You expect me to have a value of "otherStepsView" but surprise: I am: '
    +something.get('value'));
  var theOtherView = MyApp.mainPage.get('otherStepsView');
  MyApp.mainPage.mainPane.mainView.set('nowShowing', theOtherView);
  return true;
}

which yields:

The right view is shown, but the 'otherSteps' button isn't highlighted.  *sadface*

Sadly, I can't think of a way to easily fix this.  Perhaps its expected behavior.

Code available on github:  git://github.com/MikailCliftov/SC.TabView-Woes.git

SproutCore Todos Tutorial Part 6 - Building a backend with .NET MVC

My son Alexei say: Alexander Ovechkin is crazy Russian Score Machine.

I say without playoff success, who care?

Da.  Is true.  He now 'resting' for playoffs? Law l.  Enough Hockey talk, on with the shaw.

My comrade, Ivan Vandermiev, and I have collaborated to construct back end to the SproutCore Todos tutorial from weekee site.  Is weekee maintained still?  who knows?   He and I collaborate to make great effort at making work with the SproutCore while making very smallest effort at typing.  I suspecting that he have ladies hands and extra typing make his hands hurt.

Alexei say traditional 'enterprisey' level Microsoft solution would include:

• re-emergence of "Microsoft Bob" from 1995 to be AI project architect
• endless meetings of steering committees to ensure compliance with project goals
• three months of building a code generation engine to produce framework code that needs extensive refactoring to begin working
• zune integration

We sidestep these item by creating secret project.  Although BOB AI is great fun and full of great suggestions for oblong wheels we skip.  Steering committe? Nyet.  Code generation engine? Nyet Nyet Nyet.

Zune integration: DA!.  law l.  Nyet.

I let comrade Vandermiev splain how back end work.  He have good english skills.

Ivan sent me email splanation:
-------------------------------------------------------------------------------------------------------------
Comrade Cliftov, I have created the secret back end project you requested.  I used  'Code-First Development with .NET 4 Entity Framework' to create and maintain the database schema.  Why?  Why not? 
 I have written enough boilerplate SQL to last me a lifetime and writing CRUD code for this secret project will add no value.  I let the Entity Framework manage the objects so I don't have to.  To access, the data I used ASP.NET MVC3.  Why MVC3?  Because its better than MVC1 and MVC2.  Everything with higher numbers is better, except for weight of that girl in Vegas. Eh Comrade Cliftov?


Code exerpts follow:

Automatically generates the database schema when class is created:

namespace SproutCoreMVC.Models
{
    public class Task
    {
        [DatabaseGenerated(DatabaseGeneratedOption.Identity)]
        public int id { get; set; }
        public string description { get; set; }
        public int order { get; set; }
        public bool isDone { get; set; }
        public string guid { get {return "/tasks/" + id;} }
    }

    public class SCModels : DbContext
    {
        public DbSet<Task> Tasks { get; set; }
    }

    public class SCModelsInitializer : DropCreateDatabaseIfModelChanges<SCModels>
    {
        protected override void Seed(SCModels context)
        {
            var tasks = new List<Task>
            {
                new Task {
                    order = 1,
                    isDone = false,
                    description = "Some Description"
                }

};

            tasks.ForEach(d => context.Tasks.Add(d));
            context.SaveChanges();
        }
    }
}

This is the REST implementation.  Easy da? 

namespace SproutCoreMVC.Controllers
{
    public class TasksController : Controller
    {
        SCModels db = new SCModels();

        // GET: /tasks        
        [HttpGet]
        [NoCache]
        public ActionResult List()
        {
            return Json(new {content = db.Tasks}, JsonRequestBehavior.AllowGet);
        }
        
        //GET: /tasks/id
        [HttpGet]
        [NoCache]
        public JsonResult Get(int id)
        {
            return Json(db.Tasks.Find(id), JsonRequestBehavior.AllowGet);
        }

        //PUT: /tasks/id
        [HttpPut]
        public ActionResult Update(Task task)
        {
            var taskToUpdate = db.Tasks.Find(task.id);
            UpdateModel(taskToUpdate);
            db.SaveChanges();
            return Json(taskToUpdate);
        }
        
        //POST: /tasks
        [HttpPost]
        public ActionResult Create(Task task)
        {
            db.Tasks.Add(task);
            db.SaveChanges();

            //set location and to redirect headers
            Response.StatusCode = 201;
            Response.RedirectLocation = task.guid;
            return new EmptyResult();
        }

        //DELETE: /tasks/id
        [HttpDelete]
        public ActionResult Delete(int id)
        {
            db.Tasks.Remove(db.Tasks.Find(id));
            db.SaveChanges();
            return new EmptyResult();
        }
    }
} 

I left out the routing information. As you can see the integration between SproutCore and asp.net MVC3 and Entity Framework 4 is quite straightforward and painless. I actually only write about 70 lines of code.  Is much easier than you half of project. 

Sincerely,

Ivan Vandermiev
 -------------------------------------------------------------------------------------------------------------

Da, spasiba Ivan.   Very good.  I may have exagerated my halfs work.
Client is a git clone https://github.com/sproutit/samples-todos.git with change in Buildfile to point proxy to server:

proxy '/tasks', :to => 'http://hahaha.i.has.secretlab.in.kremlin.ru//'

Comments? Questions?

mixin vodka for SproutCore

Some one called me 'commie bastard' yesterday.  For you I said: Chto za hu.  For all otehrs  I have secret to mixin SproutCore.

Da, is secret.  But it 'open secret' like T72's inability to stop frontal penetrations like Odessa street workers.

When you mixin, to SC.Object by calling SomeObject.extend() you are manipulating prototype of SomeObject.  Da, I see dreams of oblong wheels running wild.  Nyet so.  Static values and methods will go through inheritance hierarchy and save you much time and work.

Comrade chamnapchhorn take time to splain it better for oblong wheel fans.

Extra time saved, use to go to store to buy more vodka.

SproutCore: SC.Drag + SC.ArrayController != 'PIE' || 'CAKE'

I nearly use Thermonuclear option.

You would think it easy.  You would be wrong.

Oh so very wrong.  Why you ask?  Well, the first oblong wheel is the data in SC.ArrayController.  Da, it simple right:

var users = MyApp.store.find('MyApp.User'));
 MyApp.usersController.set('content', users);

 Da, easy.  Find all users.  Show into SC.ArrayController.  Go eat borscht.  Drink Vodka.
 Come back to work and make two SC.ListView

....
allUsers: SC.SourceListView.design({
... some stupid layout
contentBinding: 'MyApp.usersController.arrangedObjects'
canEditContent: YES,
canReorderContent: YES,
delegate: MyApp.mustMakeDelegate

}),

 usersILike: SC.SourceListView.desig({
...
delegate: MyApp.mustMakeDelegate,
isDropTarget: YES // what else?

})

 Whooo wheee now I reload page and drag and drop contents right?  Sookin Syn!
Dirty mother: SC.Error:sc599:SC.RecordArray is not editable (-1)!!!!!!!

Problem: store hate me.  Solution:  hide from store by wrapping in blanket initial find like dis:

var users = SC.A(MyApp.store.find('MyApp.User')));
 MyApp.usersController.set('content', users);

Alexei say SC.A is not short for 'SproutCore.Assholes: have a good time figureing this out', but I'm not sure.

Da, I know it should all be on one line, without transient variable initializations, but Alexei say split it for search engine optimization.

If you know better approach let me know.

Sproutcore Border Cleanup

Da, is serious question!

Illegals in Arizona, run fast!  NOT!!! Thanksyou to peterwagenet for pulling border cleanup, but question above is needing of answers.

If border, in layout properties inherits the background color, then is that really border?

Alexei say da, but I not sure.  Thanksyou comrade tomdale for making meme generateur. law l

SproutCore: Composite View Using HandleBars

Real MotoCycle:   Handlebars!

In Russia, we used to ride real motocycles.  Like dat one.  Now in SproutCore, handlebars is the way.  Alexei say it "the govno" but I don't think he say that right.

Note:  no oblong wheels on Russian motocycle! law l

Seriousness time now.  Comrade Topher in irc posted a gist showing how to implement the Handlebars with a CustomView.  He say.  Da, he right.  Works. Vodka time for him.

I say dis is future of SproutCore.  Write your Handlebars template using the hotmetal pro editor from 1996 and then fuse your Handlebars with the rest of your application.   Now you have true V8 motocycle power.



For your convenience here is Comrade Topher's codes.

<h1>Test Handlebars Page</h1>
<p>
  I really like {{ somevar }}!
</p>

MyApp.TestView = SC.ScrollView.extend({
  render: function(context) {
    // Note: Do not use the word 'view' as a key in the following data object,
    //       as SproutCore and/or Handlebars will not display it properly
    //       (probably because it's a helper function)
    var data = { somevar:"SproutCore" };
    var template = SC.TEMPLATES['test'](data);
    context.push( template );
  },
  update: function(jquery) {
    // do whatever you need to for somevar...
  }
});

gem install sproutcore --pre; problem post-install

Da, is right commandline.  But when running sc-server in new project, fails like shalava.  The govno problem is the mutter facking eventmachine.  Version 0.12 is installed by gem.  0.12 was contributed by Elives Prasley. law l

To fix, you must gem install eventmachine --pre. Works? da! Safe? Tebe Pizd'ets!!!!! law l  Good thing is this done times one and never again.

Chance:  what is chance? Propability? nyet. Is CSS preprocessor.  Is a pig in M$ widows environment.  must find patch from peterwagenet (not part of kgb) to fix.  Problem is 'tmp' location in M$ widows.  It contain evil : char.  : is cryptonite to red gems.


I leave you now with a quote from famous russian philosopher:

 Beauty is mysterious as well as terrible. God and devil are fighting there, and the battlefield is the heart of man. Fyodor Dostoevsky

Time for vodka? Da.

Mikail Cliftov

Sproutcore: Amber; Handlebars; Todo tutorial репатриант

Apologies to comrades wycats and tomdale. I unaware that they were merely recreating the govno from the backbone.js sample.

Tovarich wycats and tomdale made good job of oblong wheel just like the boner sample. law l

Alexei says that I not good enough Inglish to write rest blaawg post so he take over.

Mikail

Perhaps the name of the guide "Getting Started With HTML-Based Apps" is misleading.  Really the point of the guide is that writing a web app using the 'Core' from 'SproutCore' is really easy.  What's left unsaid from the guide is the fact that the template based application, can be expanded from the 'core_foundation' to the rest of the SproutCore framework when, and if, required.  I suspect the learning curve will be less steep for web developers this way.

Kudos to the commenters who pointed this out yesterday.

Alexei

Sproutcore: Amber; Handlebars; Todo tutorial

Sometime right way - not easy way.  For sample, http://guides.sproutcore.com/html_based.html. Easy? Da. Right? Nyet.

I let son Alexei splain how comrades wycats and tomdale go wrong.  Not chernobyl wrong, but slightly wrong.

Dad says:
The new "Todos" sample app in the guide, lacks the functionality that makes SproutCore so powerful in an attempt to make it "easier' to use.  The new Todos app is not the in the spirit of SproutCore's,  "How do we build blazingly fast, desktop-class web applications?", a desktop-class web application.  

This is not meant to be a criticism of the handlebars approach.  It is a much more intuitive approach to building a view than the context push/pop approach.  Rather than creating an oblong wheel (doesn't translate literally well), where the handlebars todos app lacks functionality that the regular todos tutorial app has (ie inline editing, cursor navigation), a TemplateView item could be added that enhances the functionality and plugs into the existing app.


Alexei


Da Alexei, Spasiba.  Please constructive criticism only.


Comrade Mikail Cliftov
Secretary General,
Secret Operation Branch

Welcome

Welcome to "blaaawg".  I programmer for many year, and have many experiences and much opinion.

I may have conflicting opinions, just like Brezhnev, but like him I team player.  Unlike Comrade B'nev I avoid stagnation.

My son, Alexei, who much to my sadness has embraced Western Capitalist Pig-Dog Culture will translate many my thoughts into Inglish.  Do not be alarmed.  He say grammar when I say grammer.  He correct.  But I right.  He say I should put law l here.  I not understand, but here go.  law l

Alexei, say I sound like captain from battlecruiser in starcraft 1.  Is that movie?  If not, they should make and star Konstantin Khabenskiy.  He favourite patriot actor of mine.

Comrade Mikail Cliftov
Secretary General,
Secret Operation Branch