Miracle Studios Digital Agency

10 years Experience, Over 1000+ projects Completed. Do it right, the first time.

Visit Website

Designing a mobile app involves a lot of considerations, such as various devices, platforms and screen sizes it will cater to, along with diverse skillsets required for targeting the most prominent platforms. Take for example: Objective-C is used by Apple iOS, Java, C++ and C used by Android, while Java is used by Blackberry.

Creating, managing and testing different variations of an application is a time consuming and expensive task, even if the developer is proficient in targeting all of them. And in such a case HTML 5 proves helpful. Almost every smart phone and tablet launched by Android, Blackberry and Apple, features web browsers which are able to render rich interfaces with the help of HTML 5. It allows easy development of apps, thus making it easier and simpler for designers to create an app and target every major platform.

Sencha Touch, a mobile web app framework was launched by Sencha some years ago, which allowed developers to develop mobile web apps for various platforms. Another recent launch by Sencha, Sencha Architect makes designing even simpler with its drag and drop option.

This tutorial will guide you about the usage of these tools, with minimum coding required, for creating simple HTML5 mobile applications.

1. Getting Started – for starting a new project, first open the Sencha Architect, select the option of Sencha Touch 2 present in Welcome Screen. it will open the main window, where you can start building your application interface on an empty canvas.

2. Concepts – In Architect the controls can be transferred from Toolbox to Canvas through drag and drop method, thus allowing you to generate the best JavaScript code suitable for application. You can press Code at any development stage to see the code that has been generated.

3. Navigation – Drag and drop Navigation view to Canvas from Toolbox to view start and it will be present in Project Inspector under Views.

4. Configuration – Navigation view allows you to add multiple components, however only one is visible at one time. Go to Config panel and change Navigation view’s userClassName along with id properties to the MainView.

5. Store – This step involves adding a store, which is a type of database record, for keeping the data, which has been hard-coded. Go to Project Inspector, then click Add button, select the Json Store, listed in Store submenu.

6. Model – Store requires a related model, which will help in defining the fields of data that we are dealing with. In Project Inspector, go to add button and select Model. Set Place as userClassName for this Model.

7. Fields – Fields need to be defined for this model. In Config Panel, click Add button, located adjacent to Fields propertyy and add five fields, namely id, name, lat, lng and locations. These can be used to store ID, place name, latitude, longitude and location.

8. Field Types – New files are given default type String that might not be appropriate for some fields which have been added recently. Go to project inspector and select id field, setting int as its type. Make a selection of both lng and lat and set float as their type.

9. Store Config – It is importnant for the Store to know the data type it is dealing with. So select Store, go to Config panel and set Place as Model, Places as userClassName and Places as storeld. New Place Model instances will get created as the data gets loaded in Store.

10. Store data: You need to pre-populate data property in Store with JSON data (hard-coded). A set of sample data is available for download in this tutorial. By opening the attached file in text editor, you can copy contents in Store’s data property.

11. List: As you have populated data within Store, this data should be now shown on screen. Click Design view; drag new List on Navigation View, setting PlaceList as List id, Places to Visit as title and Places as store.

12. Load Data: item Tpl property enables you to render every row included in the list, change it to <div>{name}, {location}</div>. Within parenthesis, filed names should be referenced by inserting their values at their place. Select the Load Data, by right clicking the Store.

13. Detail: You should make it possible for the users to get more information about a place by tapping on a name in the List, such as a map along with the place. A Form Panel needs to be dragged to your project’s root and select PlaceDetail as both, id and userClassName.

14. Fields: Dragging another FieldSet to Form and check Details as the title. In FieldSet, two text fields have been included by default. Change first field’s label to Place, while second ones to Location. Along with that two Hidden Fields should also be dragged on the Form.

15. Field Names: A Place’s instance will be loaded in the Form later on. to enable it to populate fields with the values automatically, you should set name property of the four fields matching with fields in Model (location, lng, lat, name)

16. Map: Drag new Map on your project’s root, while setting both id and userClassName to PlaceMap. It will help to show a particular place’s location. Map component will open a view of Google Maps, which can be easily controlled through Google Maps API.

17. Map Button: Open PlaceDetail form and drag a button on it. Set View on Map as text by double clicking the button. Set forward as ui property. Add action:”ViewMap” in Quick Value Set box or Filter and then click on Add.

18. Controller: Once the data definitions and interfaces are complete, a Controlled needs to be added to bring together the functionality. Go to Project Inspector and click Add button. Select Controller option and set Place as userClassName.

19. References: Now is the time to add a few Controller References, enabling View components to be referenced by the Controller. Click Add by selecting Controller, which is placed in Config panel alongside References. Enter mainView as name, click Next, enter #MainView as selector.

20. References: Controller Reference will create a getter in Controller, making selector as control query. Two references need to be added, one   for placeDetail (with #PlaceDetail as selector) and one more for placeList (with #PlaceList as selector).

21. Actions: Two Controller Actions need to be added. First Action is for itemtap event of the List. Click Add button located nearby Config panel’s Actions to add another action and select Controller Action.

22. Actions: When a new Action is added, combo box emerges: select Ext.dataview.List, and then itemtap. This will create an Action in project. By selecting itemtap Action, set #PlaceList as control query. This will set which control will be associated with an Action.

23. Actions: Final action need to be added for View on Map button. Select Controller to add another Action. Go to target type combo box and select Ext.Button. After this go to event combo box and select tap. Now select the same in Project Inspector, while setting [action=ViewMap] as controlQuery.

24. Code: Now the code needs to be added to two Controller Actions. Double clicking on itemtap Controller Action in Project Inspector for showing code view. Now you need to copy and then paste content included in Step24.txt file which is provided with tutorial for download.

25. More Code: Now you need copy and paste from Step25.txt present along with tutorial, to add code for another Controller Action. This code will make a map visible when View on Map button will be clicked by a user.

26. Save Project: the project can be saved anywhere on the local system with Save button. You need to enter Save Path, like C:\Sencha   Architect Apps\Places\, along with Project Name, such as Places TouchApp.

In the next tutorial you will be taught how to create .NET Web API application in this folder’s root.


Miracle Studios Digital Agency

10 years Experience, Over 1000+ projects Completed. Do it right, the first time.

Visit Website
There are no comments.

Leave a Reply