Continued from Creating Mobile Apps with Sencha Touch 2 – Part 2

Now that we have most of the things ready, just need to modify something to let the store sync (CRUD operation) back to server.

Uncomment the proxy in the Note store, and remove the dummy data.

app/store/Note.js

Ext.define("SenchaNote.store.Note", {  
  extend: "Ext.data.Store",
  requires: ["SenchaNote.model.Note"],
  config: {  
    model: "SenchaNote.model.Note", //need full name
    proxy: {  
      type: "ajax",
      api: {  
        create: "http://192.168.168.10:8888/SenchaNote/Note.php?action=create",
        read: "http://192.168.168.10:8888/SenchaNote/Note.php",  
        update: "http://192.168.168.10:8888/SenchaNote/Note.php?action=update",  
        destroy: "http://192.168.168.10:8888/SenchaNote/Note.php?action=delete"  
      },  
      reader: {  
        type: "json",  
        rootProperty: "notes",  
        totalProperty: "total"  
      }  
    },  
    autoLoad: true  
  }  
});

Continued from Creating Mobile Apps with Sencha Touch 2 – Part 1

Since the editing and creating note screen going to be same, so we can share the same screen.

app/view/NoteEditor.js

Ext.define("SenchaNote.view.NoteEditor", {
  extend: "Ext.form.Panel",
  xtype: "noteeditor",
  requires: ["Ext.form.FieldSet", "Ext.field.Select"],  
  initialize: function() {
    var toolbar = {  
      xtype: "toolbar",  
      docked: "top",
      title: "Add Note",
      items: [  
        {
          xtype: "button",
          ui: "back",
          text: "Back",
          handler: this.onBackTap,  
          scope: this  
        },  
        { xtype: "spacer" },  
        {  
          xtype: "button",  
          ui: "confirm",
          text: "Save",
          handler: this.onSaveTap,  
          scope: this  
        }  
      ]  
    };

    this.add([
      toolbar,  
      {  
        xtype: "fieldset",
        defaults: { //this set default value to every items added  
          xtype: "textfield"
        },  
        items: [
          { 
            name: "content", 
            label: "Content" 
          },  
          { 
            name: "categoryid", 
            label: "Category", 
            xtype: "selectfield", 
            store: "Category", 
            displayField: "name", 
            valueField: "id"
          }  
        ]  
      }  
    ]);  
  },
  config: {  
    listeners: {  
      show: function() { this.onShow(); }  
    }
  },  
  onShow: function() {  
  if (this.getRecord().phantom) {
    this.items.get(0).setTitle("Add Note");
  } else {
    this.items.get(0).setTitle("Edit Note");
  }
  },  
  onSaveTap: function() {  
  //fire event to controller  
  },  
  onBackTap: function() {  
  //fire event to controller  
  }  
});

Here we need to use the Ext.form.Panel, and import the Ext.form.FieldSet and Ext.form.Select. Then the usual stuff, create a toolbar, docked it on the top, give it a title “Add Note”, and add a back button and a save button on it, and assign handler to both buttons.

After creating the object of toolbar, add it to the screen using this.add just like the search bar (do it in initialize because we need to add the handler to the buttons.

In the this.add, we add another item on the fly (I mean without creating using the var ), use the built in xtype fieldset, note that there is a new thing, defaults, it simply means what ever item we configure later on will using the setting in defaults, unless specified otherwise.

So here I set default type to xtype:textfield, so that all item will default to a textbox. In the items, I need the content textbox. Note the { name: “price”, label :”Price”, xtype: “numberfield” } I commented is to show that we can override the defaults by specifying the xtype, and the numberfield here will allow the mobile browser display numeric keyboard, which made data entry easier.

Remember when I started to Googling around to search for Sencha Touch 2 tutorial, all I found was pieces of here and there, so I write this very simple example (probably not even close to best practice, but it get job done), from creating Sencha Touch front end, to storing data in server.

Required pieces: – Sencha Touch 2 SDK – Web server – Webkit based web browser

The reason web server is needed, beside to run some server script, is that Sencha Touch does not work properly (some part) using file:// protocol.

I’m using MVC style here. In Sencha Touch, Model is use to describe the data structure, thing of it as the table in database, it has column and datatype. Model handle validation, and proxy thingy (which URL to point to, what datatype is the response).

View just simply displaying the GUI. Controller is probably best describe as the brain, it glue the View and Model together. And there’s a Store, which responsible to store the the records/data get from server.

The is how’s the main screen of the apps will looks like:

The main screen will show the list of notes, a search bar to searching notes, an add button on top to add new note, and bottom I still don’t have idea what to add in, just leave it as it is at the moment. Note that the list is showing arrow at the side, it means that when you tap on it, it should show the edit screen.

I’ve started to look into JavaScript to be use in web project as much as possible ever since I last built a web game with jQuery. During my service in previous company, my team was assigned an assignment to research on mobile apps development, we’ve focusing on technology other than native, as we don’t have the skills for Java and Objective-C.

We’ve came out with few option, Appcelerator, Rhomobile, OpenPlug (Discontinued), and PhoneGap. Rhomobile was out of the picture very quickly, as it uses MVC style to code, and the team is not proficient in the style at that time. I’ve taken the rest to test drive.

OpenPlug then removed from our option, as it uses ActionScript, MXML to build and design the apps, which is then again, the team don’t have the skills on these technology. Even though it claim to compile the code into native code (which is appealing to me) and it has iOS simulator (a plus as well, as the team only have one MacBook).

Not a fans of iframe in any way, but there are times when we need to use iframe, and to the extend we need to use session to store some value to use in other pages in the iframe page.

Yes, IE did it again, screwing developer, while every other browser is doing just fine, but in IE, the session inside the iframe page itself lost on each post.

The solution is to add the following header:

P3P: CP="CAO PSA OUR"

Check the detailed solutions

Recently been using jQuery a lots for effect and for the awesome DOM manipulation. I found there is a small problem with this code:

$("#myButton").hover(function() {  
  // my hover function  
}

The function get executed when mouse over the button, but when mouse is leaving the button, it get executed again, quick fix:

$("#myButton").hover(function() {  
  // my hover function  
, function() {});

Just adding in the an empty function after that seems to fix the problem.

Facebook had deprecated the support for static FBML on fan page, which now it has to be done in iframe apps method, and add the apps to the fan page tab.

Today is the first time I put create an apps and pointed it to our server, to a simple html file, when the apps was added to the fan page tab, it shows HTTP 405 error, previously had setup a page and hosted on a same server, same directory, and the apps settings were same as the new one, and both were added to the same fan page, but existing apps work just fine.

I’m surprised how easy it is to fix it, I’m not sure what’s the reason behind it, but simply changing the .html to .php, it works like charm.

Excited to see http://www.ro.me/film, music video created using WebGL, is a music video for Norah Jones’ song, throughout the music video, we can look around, lots of great things is happening in the surrounding, and it got Mario, and Megaman inside! WebGL apps, great music.

In order to load WebGL using Chrome in Windows XP, one have to run Chrome using some parameter, chrome.exe –ignore-gpu-blacklist.

Having fun with Linq to SQL for a little while now, it speed up my development time dramatically, because I can write C# code better than SQL statement, so I let Linq to SQL handle the SQL for me.

Came across a need to read Excel, I knew I can read it using ADO.NET , but when try to make use of Linq to SQL in the project, try not to create a function that using the normal querying using the ADO.NET, so I came across Linq to Excel , now I can read the Excel files like normal Linq to SQL, and it works with Excel files created in Excel 2010, thumbs up!

I’ve WiMax that acting weird, sometimes when Windows is reporting I’m unable to connect to the Internet, the WiMax modem is showing strong signal strength, even the status page of the modem is showing operational as well, when this happen, I reboot it, I don’t go to the modem to reboot, I login via browser and reboot it using the web interface.

Even though I saved my login name and password, but clicking login button and clicking reboot button, and then clicking “yes” from the popup is too many steps for me, so I figured, I could just learn how to write code to automate a web page.

Using C#, it came with handle WebBrowser control, which rendering the passed in URL parameter using IE (I think, since all the context menu is identical with my IE one) on our Windows form. I tried to do this without UI interference, but not yet manage to get WebBrowser object to work in console application yet, so I ended up with a simple Windows application.