Architect 2 Sencha Docs

Introduction and Guided Tour

Sencha Architect is a drag-and-drop developer tool used to create robust, high-performant, portable graphical applications that use HTML5 and JavaScript. Architect creates robust, modular applications based on the MVC (Model-View-Controller) paradigm, using either or both of the Sencha frameworks:

  • Sencha Ext JS -- Framework for developing desktop applications that run in a browser
  • Sencha Touch -- Framework for developing applications that run on mobile touch-screen devices

This guide takes you on a tour of Architect by describing the main interface elements and feature groupings. It concludes with some additional information about developing applications using Sencha Architect and pointers to other places you can go for more information.

If you would like to follow along with Architect as you read this guide, you can install Architect on your system following the instructions in Installation and Set-Up. When you launch Architect, select Ext JS as your project as you read this guide.

After you read through this guide, you can get a more hands-on introduction to Sencha Architect by working through either or both of the following guides:

A brief introduction to MVC

Architect builds applications that conform to the MVC (Model-View-Controller) architectural paradigm. Within Architect and the Sencha frameworks, MVC is defined as follows:

  • Models connect data to application functionality and UI components. They define application data along with their associations and validations.

  • A View is any type of UI component. In Architect, containers, grids, trees, and panels are all Views.

  • Controllers include the code that make an app work, whether that's rendering Views, instantiating models, or performing other app logic, usually by responding to events. Controllers wire models and Views together.

The Sencha MVC package lets you easily bind data and display components, helping you create features that depend on interaction with data. It also helps you organize your application code and reduce the amount of code you have to write, making your team more efficient and productive.

You do not need to know a lot about MVC to develop an app using Architect, just as you don't need to have a deep knowledge of Ext JS or Sencha Touch. But the more you understand MVC, the more success you will have. You can also create more sophisticated functionality with Architect if you know more about how to work with the Sencha MVC package.

With Architect, building MVC-based applications is as easy as dragging View components to the Inspector from the Toolbox -- or creating stores, models, and controllers from within the Inspector -- and configuring them. Models, Views, and Controllers all have visual representations in Architect: Graphical representations of View components appear in the Canvas, while icons representing all types of components appear in the Inspector. You select the kind of component you want to use, put it in the right place in the Inspector, and define its properties.

Architect's MVC package frees developers to concentrate on their area of expertise:

  • data architects can focus on defining data models, storage, and access with Models
  • UI/UX Architects can focus on presentation and user experience with Views
  • coders can implement the business rules and application logic through controllers.

If you want to learn more about Sencha's approach to MVC, see the blog series Architecting Your App in Ext JS and MVC Application Architecture

Elements of the Architect Display

The following illustration shows a partially completed Ext JS 4.1.x project opened in Design view.

Let us look at the main Architect interface elements.

Menu Bar

The Architect Menu bar spans the top of the display. Use it to open, save/build, and preview projects as well as to import, export, add, and delete components from your project. You can also use the Menu bar to switch between Design and Code views, preview your project in a browser, and deploy your project.

The Menu bar also contains an Action menu that is populated only after you begin a project. The Action menu contains actions that you use frequently during a project, including the following:

  • export a component to a file
  • move a component up or down in the application hierarchy
  • duplicate a component
  • transform a component from one type to another
  • promote a child component to make it its own class
  • save a component to the toolbox for reuse in another project

The Help menu provides links to Architect 2 documentation, Ext JS and Sencha Touch downloads and API documentation, and other resources to help you use Architect.

Toolbar

The Toolbar is located on the left of the screen, under the Menu Bar. It contains commonly used Architect project commands. From the Toolbar you can start a new project or open an existing one; save, preview, and deploy a project; or edit project settings. Hide the Toolbar by going to Settings in the Toolbar, selecting the Application tab, and unchecking Show Toolbar. You can accomplish the same thing in the Project Settings item in the Edit menu.

Toolbox

The Toolbox is on the left of the screen, immediately under the Toolbar. Browse the Toolbox to see all the components -- including components used to build Views, Models, and Controllers -- that you can use and control in an Architect project. Components are organized according to functional area.

Use the Filter box at the top of the Toolbox to search for a specific component. You can limit your search by clicking on the component group in the Toolbox before entering the filter. For example, click on "Everything" then search for "view". Now click on "Grids" and search for "view".

The Architect for Ext JS illustration above also shows the Custom Groups feature, which you can use to organize components in Architect the way you want to. To add a custom group, click the Plus sign (+) next to the Custom header in the Toolbox left-hand column, name the group, and drag components into the group from the right-hand column of the Toolbox. Rename a custom group by double-clicking its name. Delete a custom group by right-clicking it and selecting Delete.

When you first open Architect, the Toolbox appears on the left side of the Architect window. To move it to the right side of Architect, switching its place in Architect with the Inspector, do the following:

  • select Settings in the Toolbar
  • go to Application tab-->Project Inspector, and select Left
  • click Save

The Inspector moves to the left of the Architect window, the Toolbox to the right.

To see the Toolbox for Sencha Touch projects, click New Project in the Menu Panel and select Sencha Touch. The Toolbox for Sencha Touch projects is organized slightly differently than the Ext JS Toolbox. Note especially the differences in the Behaviors and Containers categories. Once you're done looking at Sencha Touch Toolbox, switch back to Ext JS for the next part of the tour.

Inspector

The Inspector is the main View into an Architect project. It provides a hierarchical view of all the components in the project, organized by nodes for controllers, Views, Stores, and Models. When a disclosure triangle appears next to any node or component, open it to see everything inside it. Open disclosure triangles for nodes to see all the components in the node, and open top-level component disclosure triangles to see all child components. Select components to edit them in either the Canvas or Config panel. Components that have not yet been loaded have the loading indicator next to them.

It is recommended that you build projects using the Inspector. It lets you add any kind of component needed, while the Canvas only lets you add and work with View components. Additionally, when you add a component using the Inspector, the component is placed exactly where it is intended in your project hierarchy.

By default, the Inspector appears on the left side of the Architect window. To move it to the right side of Architect, switching its place in Architect with the Toolbox, select Settings in the Toolbar, then go to the Application-->Inspector alignment, and select Right.

For more information, see see The Inspector guide.

Config panel

Configure components by editing their properties in the Config panel. Select the component you want to configure in the Inspector or the Canvas, and the Config panel displays the properties appropriate to that component, grouped according to subclass or function. Click the name of the grouping to open or close the list of available properties or events. Scroll through the panel to see all available subclasses and functions.

You can add events to components in Config using the Event Binding configuration. Add functions using the Functions configuration.

The Filter or Quick Value Set field near the top of the panel makes it easy to find the configuration you want to set: type the setting you want to edit and the panel displays only the ones that match what you type.

For more information, see see the Config Panel guide.

Canvas

The Canvas provides a visual representation of a project's Views. You can select visual representations from inside the View or in the Inspector and then work on them either through the Flyout Config in the Canvas (see below) or in the Config panel at the bottom right of the Architect window.

To create the visual components of your project in the Canvas, start by dragging components from the Toolbox to the Canvas. Dropping a component on an unoccupied area of the Canvas creates a new top-level component, which becomes a separate class in the project code. Dropping components on top of each other nests them -- a component becomes a child of the component on which it is dropped.

Only some components can be nested inside other components. When you start to drag a component from the Toolbox, Architect displays an icon indicating that the component cannot be dropped in the current location. Once you drag the component to a location where it can be dropped, the icon goes away and the drop target is highlighted in green; you can drop the component there.

The Canvas in the Architect 2 for Ext JS illustration (above) shows several components: a Panel (the top-level component); a Grid Panel (with columns for Manufacturer, Model, and Price); and two additional Panels. The second Panel contains code, and the third Panel contains a Column Chart. Note that the Project Inspector displays the top-level Panel (called 'CarListings') as the top-level component, and all the other components as children of CarListings.

Architect Canvas for Ext JS canvas

When you open a project that targets the Ext JS framework, the Architect Canvas simulates standard desktop browser window sizes and lets you set your own browser window size. To adjust the browser window size, click the arrow next to Auto Expand to see the list of window sizes you can select and the option to set a unique size.

Architect Canvas for Touch canvas

When you open a project that targets the Sencha Touch framework, the Architect Canvas simulates mobile device screens. See the following illustration, Architect 2 for Sencha Touch: Canvas. The Touch version of the Canvas adds additional controls, along the right side, just below the Design/Code toggle:

  • A control at the bottom of the Canvas lets you choose from among a number of popular mobile device types, including Phone, Pad, Nexus S, and Playbook. The Canvas changes size depending on the device selected. You can edit the device screen sizes and add custom devices and screen sizes using the Edit Sizes... option.
  • The control to the right of that toggles the device screen between vertical and horizontal orientations.
  • The slider bar to the right of that control lets you zoom in and out on the simulated device screens in the Canvas, especially useful when working on projects for large screens like iPad and Xoom.
  • The magnifying glass lets you shrink the screen size to fit the Architect Canvas. Click it to shrink to fit, then click it again to use the slider bar to zoom in and out.

Flyout config button

A useful feature of the Canvas is the Flyout Config button, the wheel to the right of the Car Listings component shown in the image below. Click it to view and edit component layouts and other commonly used properties that affect the appearance of the component.

Code view

By default, the Canvas opens in Design view, as shown in the Architect 2 for Ext JS illustration, above. Switching to Code view opens the Architect Code editor, which you can use to view, insert and edit the code for all the parts of your application. See the following illustration.

When you hover your cursor over the code displayed in the Code view, code that can be edited is highlighted and a small edit icon appears to the left of that code section. Most of the manual code editing that is required is one of the following:

  • tpl statements that define the template that controls the look of View elements (color, font, size, and so forth)
  • the controller code that defines the computing to be done in response to some event and tends to be unique for each application.

The Design/Code view toggle lets you switch back and forth between the two views. The View menu also provides Switch to Design View and Switch to Code View options. The Create Override feature is for advanced users only; it lets you override any Architect component functionality with your own code.

For more information about the Code View, see the Working With the Code Editor guide.

Log

Click the log count button at the bottom left corner of the Architect window to view the latest messages and to clear the log. The number inside the log count button is the number of log entries that have been put there. You can also access the log through the View menu. The log count button looks like this:

The log window looks like this:

Logs can optionally be written to a file through Settings in the Toolbar. Select the Application tab, then scroll down and check Log to File. Architect creates a log file called architect.log and places it in your application data directory, as follows:

  • OSX - [User Home]/Library/Application Support/Sencha/Sencha Architect 2.2
  • Windows (7/Vista/8) - [User Home]\AppData\Local/Sencha\Sencha Architect 2.2
  • Windows XP - C:\Documents and Settings[Username]\Local Settings\Application Data\Sencha\Sencha Architect 2.2
  • Linux - [User Home]/.local/share/data/Sencha/Sencha Architect 2.2

The format of each log entry is as follows:

[id] - [timestamp] - [level] - [category] - [extra] - [message]

By default, logging to a file is turned off.

Architect workflow

The typical process for building an application using Architect is the same whether you target the desktop with Ext JS or mobile devices with Sencha Touch:

  1. Name the Application by clicking "Application" in the Inspector window then clicking on the Config panel and adding the name of the application.
  2. Drag, drop, and configure View components to create a UI. (See Introduction to Views.)
  3. Add and configure Models. (See Stores and Models).
  4. Add and configure Stores. (See Stores and Models).
  5. Link Models to Stores and bind Stores to Views.
  6. Add events to Views for simple interactivity. (See Events and Controllers: Adding Interactivity.)
  7. Add and configure controllers for more advanced interactivity involving multiple components and bind them to the other parts of your application. (See Controllers).

Create View components

When you start building an application in Architect, it is typical to start with its visible parts -- the user interface components, or Views, that users see and interact with when they use the application. Adding and configuring Views is an important first step to building an application, since it lets you quickly sketch out the app’s UI.

See Introduction to Using Views for a hands-on example of the first steps of building an Architect project.

Create other components

A completed application includes interactivity, data, and other kinds of functionality, such as what the app does in response to events triggered by JavaScript classes in your project. In Architect, this means adding events, controllers, stores, and models to the UI components and hooking everything together.

You do not necessarily have to start with the UI. Architect gives you the option of starting with models, controllers, or stores. You could start with larger UI components and work your way down to smaller ones, or the other way around. And, once a project is finished, you can work on any part of it you want and have other members of the team work on other parts at the same time.

That said, adding interactivity and data generally happens later in a project. We introduce those topics in The Inspector guide in Architect documentation, which includes simple instructions for starting to build controllers, models, and data stores in Architect.

Also, at any point in the project, you can add your own code to components. Most frequently, this is for incorporating business logic into the Controller component of you app or populating the tpl statement that defines the template for some portion of the View. Architect provides multiple ways of doing this:

  • enter JavaScript code directly into the Code View window.
  • import code that implements business logic into the controller as a "Resource"; see Using Resources for more information.
  • an override feature for advanced users that lets you overwrite the code for any component in Architect.

Adding components to an Architect project

The Toolbox provides a complete list of components used to build Views, Stores, Models, and Controllers. Architect provides the following ways to add components to a project:

  1. Drag View components from the Toolbox to the Canvas. Dropping them on an empty section of the Canvas means they are added to the project as top-level components. Dropping them on another View component makes them children of that component.
  2. Drag components of any type from the Toolbox to the appropriate node in the Inspector. For example, View components can be dropped on the Views node, stores on the Stores node, and so on. Double-click any kind of component in the Toolbox. If no node in the Inspector is selected, Architect places the component under the appropriate node as a top-level component, placing View components under the View node, and so on. If a node is selected in the Inspector, you can only double click components of that type to add them to the project, and they are added as top-level components within the node. If a component is selected in the Inspector, double-clicking components in the Toolbox adds them as children of the selected component. Note that this last technique only works for components that can become children of the selected component.
  3. In the Inspector, click the add button ("+") and select Controller, Store, or Model components. They are added to the Inspector under the appropriate node.

Previewing a project

Any time during the development of a project, you can preview it using either of the following methods:

  • Click on the "Preview" button in the Menu Bar and Select File-->Preview
  • Go to the URL you set up for the project in your web server root folder (http://localhost/sampleproject1/).

Each of these does the same thing: load the app.html file and open the project in its current state in your default web browser.

In order to preview a project, you must set up a web Server on your computer if you do not already have one and point Architect to the URL prefix of that Web Server. See Installation and Set-Up for instructions.

Note: For mobile project targeting Sencha Touch, the Architect preview function does not support non-WebKit browsers such as Internet Explorer or Firefox. For Touch projects, you should use a WebKit browser such as Chrome or Safari and size it so your app previews correctly.

Saving and Archiving Architect Projects

Architect provides facilities for saving and archiving whole projects, components (classes), and child components. See Saving and Sharing Architect Projects for details.

Deploying Projects

Deploy your completed application using the Deploy command in the Toolbar. See the brief guide, Deploying, Simulating, and Packaging a Project for details.

Adding resources

Architect lets you add externally created JavaScript and CSS resources through the Inspector. See Using Resources.

Note that it is not possible to move a project back and forth between Architect and other development environments, but you can develop some elements, such as business logic sections, in Eclipse or other development environment, then import that Eclipse code as a Resource in the controller portion of the Architect app.

Simulating and packaging Sencha Touch projects

Architect lets you view Sencha Touch projects in an iOS device simulator, and provides native packaging capabilities. See Deploying, Simulating, and Packaging a Project.

Getting More Information

Any time you need more detail on a component or a config, follow the links in Architect to the Ext JS 4 and Sencha Touch 2 API documentation. There are two ways to do this:

  • For components: Position the cursor over the component name in the Toolbox and then move the cursor over the question mark (?) that appears to the right. You should see a short description of the component with a link to the detailed Ext JS or Sencha Touch framework documentation.
  • For configs: In the Config panel, place your cursor over the question mark next to the name of the config to display a description of the config and a link to the API documentation for it.

You can also view the full documentation sets for the frameworks by clicking on the arrow next to "Architect 2 Sencha Docs" in the upper left corner of the Architect 2 documentation set and selecting the framework (or other product) whose documentation you want to view.

The Sencha Forums are an online community of Sencha developers that provide a wealth of useful information and a place where you can post questions and get answers. We encourage you to register on the Forums (it is free) and to participate actively in this vibrant group.

Sencha Training offers a number of excellent courses that teach you how to develop applications using Sencha tools and frameworks.

Sencha Support is available if you need customized assistance for your development projects.