The bottom layer for any mobile application is OS on top of that any
or everything is built upon. then we have the browers on which we will
be running the we applications. It could be Chrome , Safari, IE
anything. the upper layer to all that is a W3 standards which are common
for all.
so sencha touch stands or built on top of w3 standards which is nothing but HTML5. so Sencha Touch is built on html5. which makes a single application to be compatible with diffreent browsers of different devices.
Sencha Touch is the combination of three frameworks ExtJs, JqTouch, Raphael(vactor drawing).It follows MVC architecture.
MVC – Separating our code into more managable chunks. Below image will explain the basics of MVC.
Although the architecture is not mandatory for the program but it is best practice to follow this structure to make your code highly maintainable and organized.
app.js: the main file from where the flow of program will start, which should be included in main HTML file using <script> tag. App calls the controller of application for rest of the functionality.
Controller.js: It is the controller file of Sencha Touch MVC architecture. This contains all the control of application, the events listeners the most functionality of code.It does following tasks: performs routing, intermediate between view and model, execute events.
View.js: It contains the interface part of the application which shows up to user. Sencha Touch uses various UI rich views which can be extended and customized here according to the requirement.
Store.js: It contains the data locally cached which is to be rendered on view with the help of model objects. Store fetches the data using proxies which has the path defined for services to fetch the backend data.
Model.js: It contains the objects which binds the store data to view. It is representation of the real world object which basically deals with database.
Utils.js: It is not included in MVC architecture but a best practice to use to make the code clean, less complex more readable. We can write methods in this file and call them in controller or view renderer where ever required. It is helpful for code reusability purpose as well.
so sencha touch stands or built on top of w3 standards which is nothing but HTML5. so Sencha Touch is built on html5. which makes a single application to be compatible with diffreent browsers of different devices.
Sencha Touch is the combination of three frameworks ExtJs, JqTouch, Raphael(vactor drawing).It follows MVC architecture.
MVC – Separating our code into more managable chunks. Below image will explain the basics of MVC.
Although the architecture is not mandatory for the program but it is best practice to follow this structure to make your code highly maintainable and organized.
Project structure With Sencha Touch App
----------src ----------resources -------------------CSS files -------------------Images ----------JavaScript --------------------App Folder -------------------------------Controller ------------------------------------Contoller.js -------------------------------Model ------------------------------------Model.js -------------------------------Store ------------------------------------Store.js -------------------------------View ------------------------------------View.js -------------------------------Utils ------------------------------------Utils.js --------------------------------app.js -----------HTML filesSencha Touch app folder will reside in JavaScript folder of your project. The App will contain controller, view, model, store, utility files with app.js.
app.js: the main file from where the flow of program will start, which should be included in main HTML file using <script> tag. App calls the controller of application for rest of the functionality.
Controller.js: It is the controller file of Sencha Touch MVC architecture. This contains all the control of application, the events listeners the most functionality of code.It does following tasks: performs routing, intermediate between view and model, execute events.
View.js: It contains the interface part of the application which shows up to user. Sencha Touch uses various UI rich views which can be extended and customized here according to the requirement.
Store.js: It contains the data locally cached which is to be rendered on view with the help of model objects. Store fetches the data using proxies which has the path defined for services to fetch the backend data.
Model.js: It contains the objects which binds the store data to view. It is representation of the real world object which basically deals with database.
Utils.js: It is not included in MVC architecture but a best practice to use to make the code clean, less complex more readable. We can write methods in this file and call them in controller or view renderer where ever required. It is helpful for code reusability purpose as well.
No comments:
Post a Comment