PushSharp – Push Notifications to all Platforms

http://forums.xamarin.com/discussion/16/pushsharp-push-notifications-to-all-platforms (PushSharp – Push Notifications to all Platforms)
https://github.com/Redth/PushSharp (Source code + Ví dụ)
http://stackoverflow.com/questions/22350118/sending-messages-to-iphone-pushsharp-or-signalr (Phân tích trường hợp nào dùng SignalR, trường hợp nào dùng PushSharp)
– SignalR là một cách tốt để gửi thông tin thời gian thực tới một web client, về cơ bản server đẩy thông tin tới client và gọi code phía client (javascritp) ở thời gian thực.
– PushSharp là một cách tốt để đẩy thông báo tới các ứng dụng navtive cho mobile (không phải ứng dụng web), trong iOS nó sử dụng cơ sở hạ tầng của Apple, điều đó có nghĩa là
thông báo sẽ được hiển thị như một thông báo trong iPhone/iPad và không chỉ ở bên trong trình duyệt.
-> Nếu cần 1 ứng dụng native (gốc) trong iOS bạn nên dùng PushSharp, nếu cần một ứng dụng web chạy trong trình duyệt, bạn nên sử dụng SignalR

Create Your First MVC Application Using Sencha Touch

Before reading this article please goes through the following articles.

  1. Introduction to Sencha Touch 2
  2. Hello World App using Sencha Touch 2
  3. Sample form application using Sencha Touch 2
  4. Dealing with containers in Sencha Touch 2
  5. Working with DataBound Controls
  6. Introduction to MVC in Sencha Touch 2


In the last article we saw what MVC is and how it works with Sencha Touch. In this article we will create our first MVC application using Sencha Touch. As in the last article I already said that MVC here in Sencha Touch is in the client end of the MVC architecture.

In this article we will learn how to create a MVC application by creating a MVC structure and how the Sencha Touch framework fits into MVC. Sencha has built-in support for MVC and Sencha supports the entire application life cycle from generating applications to deploying it to production. In this article we will not use any tools or anything to generate or to build the application. In our forthcoming articles we will make this task easy. So here we will start our application development in a traditional way.

Step 1:

Launch your Visual Studio and create a blank website without any page. Just add a web.config file for some configuration setting. Add a system.webServer tag to the config file to respond the JSON MIME type as in the following:

<mimeMap fileExtension=”.json” mimeType=”application/json” />

Step 2:

Create a directory structure like the following image.

Here in this article our purpose is to create one main list and to open the detail page upon clicking of the list item. From this you will get a clear idea of how Sencha works with MVC. Here you will get the idea of loading a Store binding to the Model, how the Controller works between the flow, and so on.

One more benefit of Sencha is that it places the classes in the namespaces hierarchy. Hence we create the main app folder and inside it create four different folders to place our Controllers, Views, Models and Stores. Except add CSS and src folders that contain the CSS and framework script files taken from Sencha.com.

As in our first article we saw that Sencha Touch applications are single page applications so we need to add only one HTML page and one entry point js file named app.js.

Proposed Flow:

As we already know, Sencha Touch is a client end framework hence what it will do is the following. First the user makes a request to index.html and index.html is loaded into the user’s browser with all other files (Models, Views, Controllers, Stores, entry point file and framework file). From here our actual MVC starts.

Here first we are loading data from a JSON file located in the server with the name “users.json”. What we will do is we will load the data from this JSON file into the Model using the Store so you will get the idea of how to load a Store and how to make a server request. As we saw in the last article the Store is responsible for talking with the back-end server.

Step 3:

Next you need to add our js classes so add one Controller, one Model, one Store and three different Views. So now you have the question, why should we add three Views, so here is the reason. Because one View will be our Main View and will never be removed from the viewport, we will simply replace the inner content of this View with other Views. This View will be a type of Master View to provide a consistent look to the application. Other two Views will be used, one for displaying the list and one for displaying the details page. Hence add three Views with the name Main, UsingListView and UserDetailView.

Step 4:

Create an entry point file named app.js and write the following code.

name: ‘SenchaApp’,
requires: [
views: [
‘UserListView’, ‘UserDetailView’
models: [
stores: [
launch: function() {
// Initialize the main view
Ext.Viewport.add(Ext.create(‘SenchaApp.view.Main’, { fullscreen: true }));
In the snippet above you can see it starts with Ext.application that extends to the main application class of the Sencha Touch framework. Next you can see the name where we can specify any name or the name of the application. This name is useful for organizing your other classes in the namespace hierarchy. This app.js is the core file and contains information about all Views, Models, Stores and Controllers. When we specify this attribute here then we need not to refer our other classes on the HTML page, this attribute automatically downloads all the classes in the client browser. If you have a other script file and need to download them then you can specify those files in the requires attribute that will do rest of the work for you.

Next here we have a launch function with the entry point for our application. Here we are creating an instance of our Main View and adding it to the view-port. Next we will create our Main View. Here you can see how we have instantiated the Main View using the proper namespace. This specifies that in our View folder we have a file name called Main.js. From now onward we will use this for our Store, View, Models and Controllers.

Create Main View

Our next step is to create a Main View. As I already explained, this Main View is like a Master View that will provide a consistent look to our application. Add the following code to your Main.js file.

Ext.define(‘SenchaApp.view.Main’, {
extend: ‘Ext.NavigationView’,
xtype: ‘main’,
fullscreen: true,
config: {
items: [
xtype: ‘userList’,
title:’User List’,

In the snippet above you can see we have created our Main View. In Sencha Touch whenever you need to create your custom class then user Ext.define with the namespace but make sure when you are defining a class with certain namespace then the file must be available at the location. Here I’m defining the “SenchaApp.view.Main” class and I have this file located in the view folder. Next here you can see we are extending this class from Ext.NavigationView that is the class defined in the Sencha framework from the above statement that is clear that Sencha has a strong inheritance feature of Object Oriented Programming. You can create your own class and can extend other classes from that. Once you have created the class that extends to the navigation view then this will add a default title bar that is sharable with other Views that we will add in this Main View. Here we added a userList type of control as an item in the Main View.

When you create a class and specify xtype for the class then this is your own custom xtype and you can use it whenever you need by simply specifying xtype:’to xtype specified in your classes.

Create User List xtype

In the previous step we created a Main View and added a userList to it as an item so we will create the xtype that is our custom control so add the following code to the UserListView.js file.

Ext.define(‘SenchaApp.view.UserListView’, {
extend: ‘Ext.List’,
xtype: ‘userList’,
config: {
itemId: ‘userList’,
store: ‘UserStore’,
itemTpl: ‘{Name}’

Here we are creating a list control that extends to the Ext.List control of Sencha framework. You can see in the above snippet that again we are following namespace conventions since well we have a given xtype attribute that we can directly instantiate as we did in our Main View. Since we already know that a List is a data-bound control and requires a data-source hence we have specified the Store property so next we will create a Store.

Create Store

Here we will create a Store that will load the data from the user.json file from the server. So add the following code to the UserStore.js file:

Ext.define(“SenchaApp.store.UserStore”, {
extend: ‘Ext.data.Store’,
storeId: “usersStore”,
config: {
model: “SenchaApp.model.UserModel”,
autoLoad: true,
header: {
“Content-Type”: “application/json”
proxy: {
type: ‘ajax’,
url: ‘/users.json’,
reader: {
type: ‘json’,
rootProperty: ‘users’

The code above you can understand, it is nothing but creating an ajax proxy specifying an URL and reading the data and filling in the data into the Model. Here we specified the Model also for the Store. We need to tell the Store where to fill the loaded data. So next we will create a simple Model class.

Create Model

Here we will create our data-model class that is extended from the Ext.data.Model framework class. The Model contains only the field’s information.

Ext.define(“SenchaApp.model.UserModel”, {
extend: “Ext.data.Model”,
config: {
fields: [
{ name: “Name”, type: “string” },
{ name: “City”, type: “string” },
{ name: “Points”, type: “int” }

Create Detail View

As per our flow we are opening the detail page when the user clicks on a list item therefore add a Detail View first.

Ext.define(‘SenchaApp.view.UserDetailView’, {
extend: ‘Ext.form.Panel’,
xtype: ‘userDetail’,
config: {
itemId: ‘userDetail’,
title: ‘User Details’,
fullscreen: true,
items: [
xtype: ‘textfield’,
name: ‘Name’,
label: ‘Name’
xtype: ‘textfield’,
name: ‘City’,
label: ‘City’
xtype: ‘textfield’,
name: ‘Points’,
label: ‘Points’

Here the Detail View is nothing but an extension of the from.Panel class of the framework and contains controls like TextBox to hold field information of the Model. While creating your Detail View keep in mind that whenever you want to load Model data into the form the form controls like textboxes and so on must have the same name property as the field in the Model.

Create Controller

Our last step is to create the Controller that is responsible for handling user actions, load Store, binding data to the View and returning the View.

extend: ‘Ext.app.Controller’,
views: [‘SenchaApp.view.UserListView’, ‘SenchaApp.view.UserDetailView’],
config: {
control: {
userList: {//add event for the component
itemtap: ‘onUserTap’
refs: {//this section automatically generates getter and setter method for the component
userList: ‘list[itemId=userList]’,//getUserList() gives user list
mainView: ‘#mainView’,//getMainView() gives main view
onUserTap: function(list, index, target, record, e, eOpts) {
var me = this;
var nav = me.getMainView();//getter method
//create model add data here we get the record from list’s tap event. you can load store seperatly
var model = Ext.create(‘SenchaApp.model.UserModel’, {
Name: record.data.Name,
City: record.data.City,
//create new detail view
var userdetailsView = Ext.create(‘SenchaApp.view.UserDetailView’);
//set created model with data to newly create view
//push this new view to main view

In the above snippet we defined our own Controller class by extending the app.controller of the framework. The Controller contains the information about the Views and Stores. Next in the config section of the Controller class you can see we have given control and refs attributes that are useful to identify the control in the View or the View itself. As you can see we have given a ref to “list[itemId=userList]” that is nothing but our list view that we defined earlier. As you know the list has a data-bound control and has multiple events so in the control section we used the same selector name to specify what action needs to fire when the list item has been tapped. Here when we define the selector it automatically creates getter and setter methods for you. For example here we have used a userList as the selector so we can use the “this.getUserList()” method that will return the list control.

Next you can see we have specified an itemTap event for the list and we specified the function as onUserTap. Now whenever the list item is tapped by the user this function will be fired. This function contains code to create a Model with a record, creates a new Detail View to set this Model to the Detail View and adds a Detail View to the Main View. Here we did not use a Store because we already have data bound to it and in Sencha on any data event in databound controls gives the specific record as the parameter.


In this way we have completed our simple MVC application suing Sencha Touch 2. In the next article we will see how to perform CRUD operations using MVC so stay tuned.

Link gốc: http://www.c-sharpcorner.com/UploadFile/krishnasarala/create-your-first-mvc-application-using-sencha-touch/

Tổng quan về thư viện sencha touch

Với sự phát triển của công nghệ hiện tại. Các ứng dụng trên các điện thoại smartphone đang trở thành tiêu điểm cho các nhà phát triển hướng đến. Và nếu như để phát triển ứng dụng trên hệ máy androi thì người dùng phải học lập trình android hay với ios người dùng phải học về ios. Thì nay, với sự trợ giúp của thư viện sencha touch. Người dùng hoàn toàn chỉ phải học duy nhất sencha touch là đã có thể triển khai ứng dụng được trên các hệ máy android, ios, ipad,…..

Sencha Touch sử dụng thư viện js viết trên môi trường web app. Nghĩa là biến 1 trang web trở thành 1 app trong điện thoại di động. Điều này sẽ giúp cho ích rất nhiều cho việc lập trình trên điện thoại di động. Vì hầu hết các hệ máy hiện nay đều đã hỗ trợ người dùng lướt web.

Nếu như 1 ứng dụng bạn phải tồn khá nhiều thời gian để xây dựng trên androi. Thì với sencha touch điều đó sẽ được rút gọn lại rất nhiều. Sencha Touch sở hữu 1 thư viên hữu dụng với: panel, tab panel, dataview list, form, Carousel,….Những thư viện này sẽ góp phần giúp người lập trình dễ dàng thao tác và xử lý các ứng dụng phức tạp một cách dễ dàng.

Sencha Touch mặc dù là thư viện js, nhưng để xây dựng web app. Sencha hỗ trợ mô hình lập trình m-v-c (model-view-controller). Từ đó làm cho mã nguồn trở nên trong sáng và dễ phát triển, nâng cấp hơn rất nhiều so với các mô hình lập trình thông thường.

Không giống như Model của các ngôn ngữ web (model của web thường sử dụng các câu truy vấn để lấy thông tin từ CSDL) sencha touch sử dụng model kết hợp với 1 khái niệm nữa là store để lấy dữ liệu. Store được sử dụng như 1 kênh thông tin lấy dữ liệu thông qua proxy dựa trên ajax hoặc giao thức REST trong web service để trả về định dạng dữ liệu là Json. Từ đó mới thao tác đổ dữ liệu ra view và controller.

Các sự kiện và cách gọi lớp sencha touch cũng giống với quy trình xử lý của zend framework. Chẳng hạn:


Nó giống với:

PHP Code:
class QHOController extends Zend_Controller_Action{


Ngay cả quy trình làm việc với lớp, Sencha cũng cho ta thao tác giống với zend. Chẳng hạn Khi gọi lớp Zend_Controller_Action trong zend thì nghĩa là gọi file theo đường dẫn: Zend/Controller/Action.php. Thì với sencha Touch cũng thế: Khi gọi Ext.tab.Panel. Thì nghĩa là trong thư viện src/tab/panel.js.

Với sự hỗ trợ mạnh mẽ và của sencha touch. Thì với một tương lai gần chúng ta hoàn toàn có thể kỳ vọng vào sự phát triển của môi trường web app trên di động.

Hiện tại, phát triển song song với sencha là thư viện jquery mobile. Cả hai đều là những thư viện js phát triển riêng cho dòng điện thoại di động. Sắp tới QHOnline sẽ gởi đến các bạn những bài tutorial về sencha touch, jquery mobile. Hy vọng sẽ nhận được nhiều sự ủng hộ của các bạn nhiều hơn nữa.

Link gốc:  http://www.qhonline.info/forum/showthread.php/4531-tong-quan-ve-thu-vien-sencha-touch