After I saw a demo using knockoutjs for jquery mobile, I realized that it is not as clean as when it is used in a javascript application. Reading this book, I took the initiative to redo the last chapter’s example and apply MVC instead. I bumped several times with a few issues but overall it was very clean and easy to implement.

Complains:

• I dislike the fact that having all pages in a single file do not support url parameters passed from one page to another. This is not the case when creating pages in separate files. Visit this gallery and you will notice stores go this route giving customers a way to reference the url for a given shopping item.

Discoveries:

• Initially I was setting each page control to listen to its view’s page events. I realized the main page was being created earlier for its control to catch the pageshow event. I switched to read from document and using the observer pattern each control is called for its page event notifications. (app/control/PageWatcher.js)
• I created a few utilities such as a method to return reference of header/content/footer for a given page. This helped in order to reference each time inside controls.(app/utils/PageUtils.js)
• I used my own namespace object “app” and in this way my application is sealed from global variables and the dom.
• Having my namespace object i used it as the target event for one control to listen another one. ( ex: app/control/TweetDetail.js line 29 )
• This was the first time I set event names as constants which took me back to PureMVC’s approach. (app/Ev.js)

Good practices:

• Turn on and off when listening to changes within each page content comes to be shown and then hidden
• Best is for data such as tweets from this demo to be stored in javascript objects rather than saving them as data in html elements.

This demo source code can be found at github and you can see the application in here 

This post finally saw the light today. As it was writtern a while ago and I left it as a draft for a while.

i am learning knockoutjs and previously i have used binding from a dialog to update a view. Then I realized that i couldn’t reset the previous values in the view. Fortunately, I learned about the utility written by Ryan Niemeyer. Which can be found here.

I liked it and wanted to continue the feature of having to modify from the window and see the current changes taking effect in the view but using his utility. Here is my update, now i can confirm or cancel new changes as I still see the view changes.

Here is the utility updated.

i wrote this simple getter/setter configuration for a javascript object. The utility was based on Object.defineProperty. Please feel free to give your feedback if you find an improvement or know of another utility out there.

http://jsfiddle.net/juanmendez/uxQa4/

SASS mixin to write less when making an attribute specific to different browsers.
This solution allows you to apply an attribute value made of a compound list as
in this example. You can also just go for a single value.

SASS:

//include plain attribute name
#{$prop}:$args;
}

/*
this mixin has a full list of browsers.
you can modify the list, skip it and pass your own to vib,
or generate more than one according to your needs.
*/
@mixin vib_all( $prop, $args…)
{
$browsers: ‘moz’,'webkit’, ‘ms’, ‘o’;
@include vib( $browsers, $prop, $args );
}

#pagecontent{
@include vib_all( ‘box-shadow’, 0px 4px 5px #666, 2px 6px 10px #999 );
}

CSS:

A simple example, b and c want to take part of a
SASS:

.b{
@extend .a;
color: red;
}

.c {
@extend .a;
font-family: Arial;
}

CSS:

.b {
color: red; }

.c {
font-family: Arial; }

Order is not important
SASS:

.b{
color: red;
}

.c {
@extend .b;
font-family: Arial;
}

CSS:

.b, .a, .c {
color: red; }

.c {
font-family: Arial; }

CHAINING can occur, so be aware in case you want to prevent it
SASS:

.b{
@extend .a;
color: red;
}

.c {
@extend .b;
font-family: Arial;
}

CSS:

.b, .c {
color: red; }

.c {
font-family: Arial; }

do you want a style to be available for others but not appear in css? sure you can
SASS:

.b{
@extend %a;
color: red;
}

.c {
@extend %a;
font-family: Arial;
}

CSS:

.b {
color: red; }

.c {
font-family: Arial; }

I created this knockoutjs extension the moment I need to have a single control of updating a ko observable.
The rest of your subscribers and binding elements read as usual, but the attempt to update is translated by the extension as a request sent to the single writer.

This example has been of great help when the single writer faces requesting data from a proxy, or in my last case when an html5 videoplayer had the timeline requesting the single writer to make a video function call to jump to another time. After the single writer handled the time update event, it was able to update its timing value back to the video timeline, and another time-playing html element.

Here is the javascript code for the extension having instructions how to use.

Two examples done in jsFiddle requiring jquery, knockoutjs, and the single writer extension:

Simple example.

Making the simple example have a few conditions to update.

in my case i used wordpress object $wpd to get records from a mysql table. this is how i got to convert “2012-11-16 11:33:23″ to javascript’s new Date( 2012, 11, 16, 11, 33, 23, 0 );

Note. I leave this post available yet there are other posts with same solution

During the last couple weeks, I have been targeting the proxy features of ExtJS. I find this a very important aspect of the framework. And I believe I will move beyond once I feel pretty comfortable.

Here is an update of the same last ExtJS direct proxy demo. A few things were modified, particularly, the Store, and a new PHP page taken care of request calls.

What has changed from Direct communication?

the store’s proxy is now set to “rest”. I dealt with having its url to “php” only, boy that caused a 405 error. This might not be your case

You can count everything in the ExtJS application is the same as the mentioned direct demo. But this is the fun part of the project. In order to work with Rest method, I need to get the type of crud operation intended using $_SERVER['REQUEST_METHOD'], the following code was added to the direct demo’s php, by including rest.php file, and counting on with the rest of that work.

Here is our request to get the records

Here is our request to update a record

Here is our request to delete a record

Here is our request to create a new record

You can test the demo here: http://blog.flexnroses.com/source/tutorial/extjs/rest_proxy/index.php

Last but not the least, play with this demo, download the source code

As far as now, I have made several communication demos using ajax, direct, a flex version, and now in rest mode. Hope this helps you in your growth as well.

Last blog was a retro of ExtJS app in Flex. This time is a retro of the old Flash button as Easel Button. EaselJS is a great html5 framework having the ActionScript developer in mind, and therefore I made this button in honor to that Flash legacy.

I want to first include the Flash Button, and how the Easel Button mimics it, and what it can’t do. Then the differences between using screen mode vs device mode. And last how this remake of the flash button is declared, and how to handle mouse actions. But the last very part of this demo is the source code

The FLASH experience

Here are the three main states of a Flash button. We will call this button Smarty

The HIT state refers to the button’s territory which ignores the previous states. The HIT state in Flash appears invisible to the user, and having said so, the previous states could also be ignored. In this way the button can also be a ghost. Unfortunately, in HTML5, such fully transparent state omits button actions. I made the Easel button rely on the first three states.

The Flash can skip one state, and the previous state could take its place. The Easel Button will do exactly the same.

The button below skips the DOWN state, and therefore, the OVER state takes its place. We will call this button Cheezy.

The button below only carries the UP state, and for the OVER and DOWN state, it takes place. We will call this button Lazy.

The HandCursor and Device interference

I realized that there was not a big option using EaselJS to enable my button to have the handcursor, or as we say in ActionScript the buttonMode set to true. Fortunately there is a way and that way requires Jquery to be present in the application. So I strongly recommend you load up the jquery library. EaselJS allows you to have mouseOver, and mouseOut events for your button, if you only allow it to be by doing the following stage.enableMouseOver();

Now going into the Device, you might notice your Ipad has no handcursor, and if you allow your application to have the mouse over enabled, your application can get messy reading when the cursor has moused over and out. In this case the best thing is not to enable the previous code. But you must definetely allow your application to go full speed in touch mode. Here is more to read about this feature from EaselJS.

So here is what you can use to determine how to go about making a difference in screen vs device mode

The Easel way

lets declare the smarty button, having its three states. the button accepts a displayObject for each state. In my case I used the Bitmap type which is a descendant of DisplayObject.

I’m overriding the common mouse events found in the DisplayObject, so I can handle that for the button and override the state I want to make visible instead. That’s the only drawback, relying on these handlers. I made the naming just as it was in the buttons for ActionScript 2.0

Here is the demo of the three buttons smarty, cheezy and lazy

Here is the source code, and the Flash demo was included just for reference.

Last saturday night, I thought what would my extjs direct demo be like if it were written in Flex. I did it and it was a very interesting experiment. I realized that the logic from the ExtJS application was easy to make it into Flex. There were times I noticed I had to write less code in ExtJS, and I had more to declare in ActionScript. ExtJS in comparison felt more like a flex mvc framework like RobotLegs, not having to instantiate each of the actors, and relying more on the framework to instantiate and connect the mvc architecture.

The drawback for me in ExtJS was that I couldn’t use code hints. I looked at this video which uses IntelliJ but requires a version i would have to purchase. Sencha Architect is very good at creating the shells of your application but it is not code hint friendly as well. ExtJS documentation has been my best friend. Also ExtJS is very intuitive coming from Flex. Firebug has been also great at debugging issues.

This is the flex application, it communicates with the same PHP code written for ExtJS in the last demo. I used HTTPRequest and passed the data in Json format, and also decoded the json generated response.

Click any row in order to update, delete. To view the code and download it, right click and select view-source.

You can trace the logging for each request by either this flex app or the previous ExtJS