Sencha Architect is a software tool that allows us to work with Sencha Touch and Ext JS frameworks. It is a What You See Is What You Get (WYSIWYG) IDE that provides capabilities to implement an application using the visual editor and the built-in code editor. It also uses a drag-and-drop visual interface for rapid application development that targets both the desktop (Ext JS) and mobile devices (Sencha Touch). In this chapter, we will cover the basics of Sencha Architect. We will cover the following points:
Presenting Sencha Architect and its interface features
The config panel
The design canvas
Sencha Architect is a great learning tool of the Sencha Touch and Ext JS framework libraries. Also, Sencha Architect is a great tool for rapid prototyping of applications, as well as rapid code-free starter and full application development. Sencha Architect works on two levels: as a prototyping tool as well as a code generation tool. Particularly for complex UIs, it saves hours of development time that are normally spent tweaking layouts and making sure that nested elements play well together. Best of all (and unlike most prototyping tools), it produces clean, object-oriented code that looks like the code you would have written yourself; and it was written completely in Ext JS.
Sencha Architect was released in 2010. Back in 2010, it was called Ext Designer, and it only had support for Ext JS applications (supported only Ext JS 3). Then, when Sencha released Ext JS 4.2, Ext Designer got an upgrade, and it was called Ext Designer 1.2, with support to develop Ext JS 3 and Ext JS 4 applications. In January 2012, Sencha announced Sencha Designer 2 beta, another upgrade from Ext Designer, but now, the tool also supported Sencha Touch 2 application development. In April 2012, Sencha decided to rename the tool as Sencha Architect 2, a complete tool to develop desktop applications with Ext JS 4 (it lost its support to Ext JS 3) and mobile applications with Sencha Touch 2.
So, this is why there is no Sencha Architect 1, because it was known as Ext Designer before becoming Sencha Architect! The most current version is 2.2.2 (as this book is being written).
Ext JS examples at https://github.com/loiane/sencha-extjs4-examples-architect
Sencha Touch examples at https://github.com/loiane/sencha-touch2-examples-architect
Sencha examples at https://github.com/SenchaArchitect
Before we start, you need to have Sencha Architect installed on your computer. As Sencha Architect is a paid tool, you can download the 30-day trial at http://www.sencha.com/products/architect/download/ or you can buy a license at http://www.sencha.com/store/architect/. Sencha Architect is available for Windows (
.exe), Linux (
.run), and Mac OS (
.dmg) users. The installation process is very simple. You simply need to run the executable file and follow the wizard steps (administrator access is also required).
When you execute Sencha Architect for the first time, you can either enter your username and password (the same you used on the Sencha Forum for the 30-day trial) or activate the software with the license key that was sent to your e-mail when you completed the purchase on the Sencha website. Next, the Welcome to Sencha Architect screen will be displayed as shown in the following screenshot:
On the left-hand side of the screen, we can find links to its documentation, Changelog and Sencha Architect Forum. Under Open Recent Project, we can find the lists of the four most recent projects we have worked on and also a link to open an existing project. Below the list of existing projects, we can create a new blank project choosing one of the available frameworks.
Once we open Sencha Architect, a screen will be displayed as shown in the following screenshot:
As you can see in the preceding screenshot, Sencha Architect has seven major items that compose its interface:
Let's dive into each one of the major items of the Sencha Architect interface.
The toolbar contains shortcuts to the most used functionalities of Sencha Architect, such as the creating a new project, open an existing project, save a project, build, publish (deploy), preview (opens the browser automatically to preview the application), and edit project settings.
On the Application settings, it is also possible to enable or disable the tabs (the classes that are opened on the visual/code editor); change the Project Inspector to the Left or Right position (we will talk about this in the project inspector topic as well), and also change the Code Editor theme of Sencha Architect, the size of the code font by using Code Editor font size, and also enable the JSHint in code editor validation in the code editor.
In the toolbox, you can find all the native components that are available to use while implementing an application, including the ones used on Models, Views, Controllers, and Stores. They are organized according to their functional area (Views, Forms, Data, Charts, and so on). You can also see all available components by selecting Everything. If you need to find a particular component, you can also use the search field to filter the components.
By default, the toolbox is located on the left-hand side of Sencha Architect, and on the right-hand side we have the project inspector and the config panel. It is possible to switch the toolbox to the right-hand side, and this way on the left-hand side we will have the project inspector (this can be interesting if we work on a big project), and the toolbox and config panel will be on the right-hand side. To do it, go back to the project Settings and select the side you prefer.
Throughout this book, you will notice that with Sencha Architect, the amount of code you will have to write yourself is very little. Basically, we will only code functions or a brand new class. All the rest will be done using Sencha Architect capabilities. For this reason, the config panel is very important. The main use of the config panel is that we can see the attributes values for the classes we create so we can set a value or change an existing value.
In the config panel, there are a few things that can help us to improve our development tasks. For example, depending on the class you selected from the project inspector, the config panel displays the configuration properties for the selected class or component. This is very helpful, because we have access to all the attributes of that class, and we do not need to refer to the documentation all the time to see if the attribute we are looking for is there. Also, Sencha Architect displays only the attributes that are recommended by Sencha for best practices; for example, use
dockedItems instead of
buttons for the
Form class (the config
buttons is not displayed on Sencha Architect).
If you are not in the mood to scroll to see all the configurations of a particular class, you can easily use the filter to search for a particular configuration (3). By clicking on the lock icon (4), you can lock the filter, and when you select another class from the project inspector, the filter will be automatically applied. In case you want to remove the filter, just close the panel.
See the question mark icon (2)? When you hover your cursor over the question mark icon, you can read a brief description of the class, and if we want to read more about it, we can click on the link in the description box and go to the documentation. The same happens when we hover our cursor over a configuration of the class; the question mark icon will also be displayed with a brief description of the configuration, and we can also go to the online documentation to read more about it.
We can also see two icons on the side of the Config label (1). The first one (selected on the screenshot), will display the common configurations of the selected class. The second one will display advanced configurations, such as
alternateClassName (used to maintain compatibility with older versions). Usually, we will only use the common configurations, but in case you need to use some advanced configurations, Sencha Architect also provides this option.
Now, let's say you want to use a configuration that is not listed on the config panel. Can we add it? The answer is yes. We can add configurations that do not exist in the config panel. To do it, go to the filter, type the name of the config, and click on the Add button (5). This new configuration will be listed under (Custom Properties). By clicking on …, we can choose the type of the new config (6—Array, Boolean, Number, Object, or String), and then set its value according to the selected type.
Another nice feature from Sencha Architect: as this tool provides and generates the code according to Sencha best practices, when you try to set the value of a particular property, Sencha Architect will let you set the value according to the property's type. For example, if you need to set the store property for a grid or a list, Sencha Architect will list the current stores already created (7), so you can choose one from the list. And, in case you change the name of the store, it will be changed automatically in the classes that use that store. This helps us to make fewer mistakes on the code. Some editors that can be used depending on the configuration's type are boolean, array, Class, string, Template, or options, as demonstrated in the following screenshot:
In case a configuration is already in use by the class, it will be displayed in blue; (1) in the previous screenshot. To remove this property from the class, we simply need to click on the Property pane.
Some classes can be used as configurations by other classes. For example, an
Ext.panel.Grid class can have one or more
Ext.grid.column.Column classes (or its subclasses). We can navigate from a particular column of the grid to its configurations by clicking on the arrow icon as displayed in the following screenshot:
You can also drag-and-drop toolbox components into the design canvas as well as the project inspector, which is especially useful when the design canvas gets busy with many components.
The visual editor provides a visual representation of the application. Right here, you can see how your application or a particular component will look without having to execute the application on the browser. There is also the Refresh button, in case you have made a change and want to refresh the visual editor to see how it looks. You can also navigate between the Design and Code editor tabs.
At the bottom, you can resize the visual editor (2). This can be useful to see how the application will look in screens with different resolutions.
In the next screenshot, we can see the visual editor for a Sencha Touch project:
We can also edit the canvas size (1), and as Sencha Touch is for mobile applications, we can choose a different device (iPhone (320 x 480), iPad (786 x 1023), Nexus S (480 x 800), and PlayBook/Kindle Fire (600 x…)) to see how the application will look on different devices. It is also possible to set a custom size. If we would like to see how the application looks on the device in different positions, we can set to see it horizontally (default option) or vertically (2). It is also possible to set the zoom of the canvas (3), and we can also ask Sencha Architect to fit the canvas (4) according to the space we have available on our computer screen.
Switching to the Code tab, we can see the code generated for a particular component (1 in the following screenshot). If we try to directly change a particular property inside the code editor, we will notice that it is not possible unless it is a function. This is because most of the configuration will be done using the config panel. This can be a good thing, or it can be a bad thing as well. It is good because it maintains the code safe from unnecessary changes and it generates the code according to Sencha best practices. It can be bad, however, because it limits our power to edit the code; we need to get used to using the config panel. Overall, it is good that Sencha Architect has this behaviour. For developers that are used to writing all the code by themselves, it is simply a matter of getting used to this new way of coding:
In the previous screenshot, at the top, you can easily navigate through different classes you have opened or created (2), and you can also open a particular tab from the list of tabs that are currently open (6).
If you don't want to persist the tabs of classes you are working on, you can easily disable this option by going back to Settings | Applications and selecting Disable for the Persist tabs currently open with each project save option.
We can also navigate through the code of a particular component (3). The available items we can navigate through are:
Generated Class, which is a read only version of the generated code
Generated JSON, which is also a read only version of the JSON code generated of the class (it is the configuration we can pass to the class if we use
Ext.createto instantiate it)
The overrides class in case we override the current class (4—we will learn more about overrides later in the book)
The editable code item such as event bindings, controller actions, functions, and templates
Sencha Architect also allows us to save the current code displayed on the code editor on a separate file using the export to disk icon (5); it is also possible to copy the code to the clipboard.
If we hover the mouse over certain parts of the code (7—the editable ones such as functions and templates), we will see that an edit icon will appear. If we click on it, the code will be available for editing, as demonstrated in the following screenshot:
If the JSHint validation is enabled (Settings | Application to enable or disable it), we will be able to see warnings or errors if there are any in our code (Missing semicolon on line
20 in the previous screenshot).
Sencha Architect also provides the Find and Replace features. By clicking Ctrl + F (or cmd + F on Mac OS), we can search for a particular string on the code. By clicking Ctrl + H (cmd + Alt + F on Mac OS), we can enable the Replace feature as demonstrated in the preceding screenshot.
Although Sencha Architect generates most of the code for us, on the editable pieces, there is no autocomplete feature available yet (Sencha Architect 2.2), so we must code without the assistance of intelli-sense (or code completion).
On the project inspector, we can see the structure of our project, including all the Controllers, Stores, Views, Models, and Resources we created for a particular project. If we expand a class, we will be able to see its inner components and functions. For big projects, it is easy to find a particular class by using the Quick Open… feature. By clicking on the plus icon, we can quickly create a new Controller, Store, Model, Resource, or a brand new Class:
Sencha Architect also provides some options once we have created a class. For example, let's say we created a viewport, but that was not what we really needed; we need to create a panel instead of a viewport. By right-clicking on the class we created, we can transform it into something else; this way, there is no need to delete the current class and do all the existing code again. Let's use another example: if we need to create a grid panel and we instead set a store, by right-clicking on it, we can automatically generate all the columns based on the model or fields from the store by choosing the Auto columns option. On the store, if we have a URL set for the proxy to load the data, we can chose the option Load Data and look at what the server has sent back as data. Other options are available: Export to File…, where we can export the current class to an external file, and another developer can import to Sencha Architect; Mark as Initial View or Unmark as Initial View, where we can set which component will be the initial view of our application; and Duplicate, Delete or Save to Toolbox (saves the component on the toolbox for reuse):
By clicking on the online documentation icon in the upper-right corner, Sencha Architect will open its online documentation on your default browser. On the online documentation, we can read more about Sencha Architect using its guides: http://docs.sencha.com/architect/2/.
Before we go to the next chapter, let's have our environment ready so we can create our first project with Sencha Architect.
We will need a web server to execute our projects. In this book, we will use XAMPP (http://www.apachefriends.org/en/xampp.html) as the default web server. You can use any web server you already have installed on your computer as well (IIS, Apache HTTP, and so on).
Inside the XAMPP
htdocs directory (or the
public directory of your web server), create a new folder called
sencha-architect. This is where we will save all the Sencha Architect projects we will create throughout this book.
In this chapter, we learned about the basics of Sencha Architect and some of its interface features, such as the toolbar, toolbox, config panel, visual editor, code editor, online documentation, and project inspector. As this was our first contact with Sencha Architect, this chapter was an introduction. We will learn more about these items throughout this book.
We have also learned how to prepare our environment, so we can start creating our first Ext JS project in the next chapter.