Android Setup - Windows
Many classes have shortcut names used when creating (instantiating) a class with a
configuration object. The shortcut name is referred to as an alias (or xtype if the
class extends Ext.Component). The alias/xtype is listed next to the class name of
applicable classes for quick reference.
Framework classes or their members may be specified as private or protected. Else,
the class / member is public. Public, protected, and private are access
descriptors used to convey how and when the class or class member should be used.
Public classes and class members are available for use by any other class or application code and may be relied upon as a stable and persistent within major product versions. Public classes and members may safely be extended via a subclass.
Protected class members are stable public members intended to be used by the
owning class or its subclasses. Protected members may safely be extended via a subclass.
Private classes and class members are used internally by the framework and are not intended to be used by application developers. Private classes and members may change or be omitted from the framework at any time without notice and should not be relied upon in application logic.
static label next to the
method name. *See Static below.Below is an example class member that we can disect to show the syntax of a class member (the lookupComponent method as viewed from the Ext.button.Button class in this case).
Let's look at each part of the member row:
lookupComponent in this example)( item ) in this example)Ext.Component in this case). This may be omitted for methods that do not
return anything other than undefined or may display as multiple possible values
separated by a forward slash / signifying that what is returned may depend on the
results of the method call (i.e. a method may return a Component if a get method calls is
successful or false if unsuccessful which would be displayed as
Ext.Component/Boolean).PROTECTED in
this example - see the Flags section below)Ext.container.Container in this example). The source
class will be displayed as a blue link if the member originates from the current class
and gray if it is inherited from an ancestor or mixed-in class.view source in the example)item : Object in the example).undefined a "Returns" section
will note the type of class or object returned and a description (Ext.Component in the
example)Available since 3.4.0 - not pictured in
the example) just after the member descriptionDefaults to: false)The API documentation uses a number of flags to further commnicate the class member's function and intent. The label may be represented by a text label, an abbreviation, or an icon.
classInstance.method1().method2().etc();false is returned from
an event handler- Indicates a framework class
- A singleton framework class. *See the singleton flag for more information
- A component-type framework class (any class within the Ext JS framework that extends Ext.Component)
- Indicates that the class, member, or guide is new in the currently viewed version
- Indicates a class member of type config
- Indicates a class member of type property
- Indicates a class member of type
method
- Indicates a class member of type event
- Indicates a class member of type
theme variable
- Indicates a class member of type
theme mixin
- Indicates that the class, member, or guide is new in the currently viewed version
Just below the class name on an API doc page is a row of buttons corresponding to the types of members owned by the current class. Each button shows a count of members by type (this count is updated as filters are applied). Clicking the button will navigate you to that member section. Hovering over the member-type button will reveal a popup menu of all members of that type for quick navigation.
Getting and setter methods that correlate to a class config option will show up in the methods section as well as in the configs section of both the API doc and the member-type menus just beneath the config they work with. The getter and setter method documentation will be found in the config row for easy reference.
Your page history is kept in localstorage and displayed (using the available real estate) just below the top title bar. By default, the only search results shown are the pages matching the product / version you're currently viewing. You can expand what is displayed by clicking on the button on the right-hand side of the history bar and choosing the "All" radio option. This will show all recent pages in the history bar for all products / versions.
Within the history config menu you will also see a listing of your recent page visits. The results are filtered by the "Current Product / Version" and "All" radio options. Clicking on the button will clear the history bar as well as the history kept in local storage.
If "All" is selected in the history config menu the checkbox option for "Show product details in the history bar" will be enabled. When checked, the product/version for each historic page will show alongside the page name in the history bar. Hovering the cursor over the page names in the history bar will also show the product/version as a tooltip.
Both API docs and guides can be searched for using the search field at the top of the page.
On API doc pages there is also a filter input field that filters the member rows using the filter string. In addition to filtering by string you can filter the class members by access level, inheritance, and read only. This is done using the checkboxes at the top of the page.
The checkbox at the bottom of the API class navigation tree filters the class list to include or exclude private classes.
Clicking on an empty search field will show your last 10 searches for quick navigation.
Each API doc page (with the exception of Javascript primitives pages) has a menu view of metadata relating to that class. This metadata view will have one or more of the following:
Ext.button.Button class has an alternate class name of Ext.Button). Alternate class
names are commonly maintained for backward compatibility.Runnable examples (Fiddles) are expanded on a page by default. You can collapse and expand example code blocks individually using the arrow on the top-left of the code block. You can also toggle the collapse state of all examples using the toggle button on the top-right of the page. The toggle-all state will be remembered between page loads.
Class members are collapsed on a page by default. You can expand and collapse members using the arrow icon on the left of the member row or globally using the expand / collapse all toggle button top-right.
Viewing the docs on narrower screens or browsers will result in a view optimized for a smaller form factor. The primary differences between the desktop and "mobile" view are:
The class source can be viewed by clicking on the class name at the top of an API doc page. The source for class members can be viewed by clicking on the "view source" link on the right-hand side of the member row.
This guide is intended to walk users through preparing Windows 8/8.1/10 for building native Android apps with Sencha Architect. This guide focuses on environmental setup for Sencha Architect, but these steps are also necessary for building native Touch applications without Architect.
Note: This guide is intended for a clean Windows 8 machine. Some of these steps may be unnecessary if you are simply updating software.
The first thing thing we'll do is ensure that JAVA JDK 1.7+ is installed and mapped properly in your JAVA_HOME Environment Variable.
Let's get started by downloading JAVA JDK 1.8 (Java SE 1.8).
Click the "Download" button under JDK in the "Java Platform, Standard Edition" section.
At this point you'll need to check the "Accept License Agreement" radio button and then click the appropriate download link. Windows x86 is for 32-bit machines, while Windows x64 is for 64-bit machines.
Press "Run" when the save alert is displayed.
Upon download, allow Java to make changes to your machine by clicking "Yes" on the resulting popup.
Click "Next" until the installer begins to extract. After extraction, you should be allowed to change the installation directory. Make sure that you change the directory to point at the root of the C drive. Create a folder at C:\Java\ and point your installation there.
Make sure that you designate another folder if it asks where you'd like to install "jre7". The JRE has been known to overwrite the JDK if the location isn't verified, which causes significant issues later down the line.
Verify your JAVA installation and version by issuing the following command from your Command Prompt:
java -version
You should see:
java version 1.8.0_xx
Next, you'll need to modify the JAVA_HOME Environment Variable. JAVA_HOME needs to point to the installation location that you set above.
You can set Environment Variables in Windows 8/10 by performing the following steps:
Now that you're within your Environment Variables, let's go ahead and add JAVA_HOME.
Next, let's add Java's path to the system's Path variable
Note: Please remember this option will only affect new Command Prompt windows and not existing ones. Close any windows previously open to ensure installation. This particular installation may require a restart before all of the changes resolve.
Next, let's move on to Apache Ant. If you haven’t already installed Apache Ant, you can find the binaries here.
Select your preferred flavor of compression. In this example, I have downloaded the .zip archive, found below "Current Release of Ant".
Upon clicking the link, click "Save" and download the file. Though Ant can be placed anywhere on your machine, I like to keep this software in the C:\ directory.
There is no Ant installer for windows. Simply extract the content to C:\Ant.
Once Ant is in place, you can set up your ANT_HOME environment variable. Unlike the JAVA_HOME environment variable, the ANT_HOME variable maps directly to the root of the ant directory.
Open your Environment Settings as we did previously and then follow these steps:
Next, let's add Ant's path to the system's Path variable
You can verify that Ant is properly installed by issuing the following command in your Command Prompt:
ant -v
It should return:
Apache Ant(™) version {version} compiled on {date}
Note: Please remember this option will only affect new Command Prompt windows and not existing ones. Close any windows previously open to ensure installation.
Next, let's move on to Ruby. Ruby is most easily installed by utilizing this installer.
Download the most recent version installer (Ruby 2.0.0-p481 at the time of writing).
Run the installer and you should come to an "options" page.
Set your Ruby installation path to C:\Ruby and then make sure to check the box labeled "Add Ruby executables to your PATH".
This will automate the steps that we've been doing manually thus far.
Ensure that installation was complete by opening a new Command Prompt and typing:
ruby -v
It should return something to this effect:
ruby 2.0.0p481 {build-date} {bit version}
Note: Please remember this option will only affect new Command Prompt windows and not existing ones. Close any windows previously open to ensure installation.
Next, we'll need the Android SDK. You can download it by visiting the Android SDK site.
Click "Other Download Options" and select the recommended .exe under "SDK Tools Only".
Agree to the terms and conditions and Download your file.
Run the executable. First, it will verify Java installation, which should pass based on the results of our above installation.
Next, select what scope of installation you desire.
Set the destination folder to be C:\Android, click "Next", and then "Install".
Upon successful installation, run the Android SDK manager. You'll need to install the pre-checked boxes. These things include base tools for the Android build tools and a few of the latest platforms.
Click the "Install x packages" and wait for the download to complete.
Note: You can download the ADT bundle instead, though it includes a lot of extras that may not be necessary from case to case.
As per usual, we will need to create the ANDROID_HOME Environment Variable.
Lastly, you will need to append the ANDROID_HOME Environment Variable.
You can test that the path is setup properly by issuing the "android" command from your terminal. If the SDK tools are properly installed, the Android manager should launch.
Note: Please remember this option will only affect new Command Prompt windows and not existing ones. Close any windows previously open to ensure installation.
The last dependency to install is NodeJS. Start by downloading the NodeJS installer.
Node automatically adds itself to the system path, but you DO need to restart your machine for all of the new mapping to resolve.
After restarting your machine, open your Command Prompt and test the NodeJS install by issuing the following command:
node -v
The above command should return something along the lines of:
"v0.10.3x".
Now that NodeJS is installed, you can easily add Cordova and/or PhoneGap to your machine.
This should be the easiest step so far. Simply open your Command Prompt and run the
following command(s).
npm install -g cordova
npm install -g phonegap
You can verify installation by performing the following commands:
cordova -v
phonegap -v
Both should return a version number if they are properly installed. Workflow in Sencha Architect
After opening your existing project in Sencha Architect 3.x, you can get started by hitting the "save" button. This will get your project initialized and set up with Sencha Cmd.
After the project has been successfully saved, open your Command Prompt.
Navigate to the project folder that was just saved and run the following command (APP_ID and APP_NAME arguments optional).
sencha phonegap init com.mycompany.MyApp MyApp
or
sencha cordova init com.mycompany.MyApp MyApp
You should now see a phonegap (or cordova) directory in the project folder after the above command completes. Returning to Sencha Architect and you should see two new build options:
You should also see a block for PhoneGap or Cordova in your project's app.json file.
app.json is located at the root of your project. This is where you can set the platform
for which you are building.
"native": {
"packager": "phonegap",
"cordova": {
"config": {
"id": "com.domain.MyApp",
"name": "MyApp",
"platform": "android"
}
}
}
"native": {
"packager": "cordova",
"cordova": {
"config": {
"id": "com.domain.MyApp",
"name": "MyApp",
"platforms": "android"
}
}
}
Note: Native Build & Emulate takes a very long time to complete for Android builds on Windows due to the the Android tools and emulator.
Your Windows 8.x/10 environment should now be prepared to build native Android builds on Sencha Touch with Sencha Architect 3.x. For more information, please refer to the PhoneGap and Cordova guide.
Architect | Terms of Use