Scroll to a given item in a dataview - Sencha Touch

In my Sencha Touch app I had a component dataview. I had included an index bar and I needed to scroll to the relevant items when I click on index bar. This is what I did.

Here recordIndex is the index of the component in dataview that we need to scroll to.

Adding a custom theme for the android preview screen in a Sencha Touch - Cordova app

In android on app launch, a preview screen is shown. This is before the splash screen. In a Sencha - Cordova app even if we have added the splash screen plugin, before the splash screen this preview window will appear. In my last post I have written how to change the theme of this preview screen in a pure Sencha Touch app. Here I'm writing how to add a custom theme for Sencha Touch+cordova app.

First create an xml file inside,

project-folder/cordova/platforms/android/res/values

The name of the XML file could be anything. Let's call it themes.xml. Then define your theme inside it.

Eg:
I'm going to override the NoTitleBar theme.. To do that this is what we should put inside themes.xml

Now, in the android manifest XML file which is inside,

project-folder/cordova/platforms/android

change the theme as follows.
android:theme="@style/MyTheme"

Black screen before splash screen in Sencha Touch android app?

I built a native Sencha Touch app using Sencha cmd.

I was having a problem. When I open the app before my splash screen loads a black screen was appearing. I found that the reason for this black screen is that on app launch, Android displays a simple preview window (based on your activity theme) as an immediate response to the user action. Then the preview window crossfades with the actual UI, once that has fully loaded [1].  

I could not find a "nice" way to get rid of this black preview window. This is the only solution I found.

1. Go to AndroidManifest.xml inside the path_to_sencha_cmd/Sencha/Cmd/4.0.4.84/stbuild/st-res/android/
(I was using the version 4.0.4.84. The path depends on that.)

2. Inside application tag change the theme as android:theme="@android:style/Theme.Light"

If you do not want the title bar use this instead of the above one.
android:theme="@android:style/Theme.Light.NoTitleBar"

I don't think this is a good way to solve the problem. But I could not find a better way rather than changing Sencha cmd code.


References

[1] https://plus.google.com/+AndroidDevelopers/posts/VVpjo7KDx4H 

Sencha native build - App doesn't go beyond app loading screen after installing in phone

I has developed a sencha touch application and I wanted to do a native build using Sencha cmd. I went through a really bad time trying to find out what exactly to do.

First, there is a difference in below two builds.

1. Sencha app build native

2. Sencha app package build

The first one creates the actual application using sencha native packager. The second  creates the source to be put into a packager(eg: Cordova). Say you are going to build for android. Either way you will get an apk which can be installed in an android phone. But if you are planning to access native APIs then either you should do the native build or you should do the package build plus another wrapper.

I first packaged my app using "sencha app package build". But later I wanted to access native APIs(for example accessing the network status of the device).Therefore I ran sencha app build native command. I got a nice apk and I installed it in my phone.

Problems I faced and how I solved them

1. The app got stuck on app loading screen and none of the pictures I had on app loading screen were visible.

There is a file called app.json inside the application folder. You need to put paths to all the JS, CSS assests and resources inside this file.

2. Even after solving above problem app was still stuck at app loading screen.

I ran "Sencha app build production" command. This creates a minimized version of the app inside

./build/production folder. I pointed localhost to this. Then when app loads I could see the errors on console. The problem had been that I had included my "sencha-touch-all.js" file inside my index.html.(<script type="text/javascript" src="touch/sencha-touch-all.js"></script>)

Actually there is no need to put this inside index.html because we have already included this inside app.json as a JS assest. In the native build this file is not inside the app anymore but index file requires this because I have put it there. Once I removed this from index.html and did the native build again, my app didn't stuck at app loading screen anymore.

Why would Sencha Touch build fail?

Today I was trying to build and package my app for GSoC but packaging was failing.

Path variables were properly set, every required software were installed and most importantly I built and packaged this same app inside the same directory using the same output folder few days back. I forgot that the only change I did was making the app folder a git repository. The output folder also was inside the repository. 

When I changed the output folder in my config file to a folder outside the git repository building and packaging happened successfully.

Always use the process of elimination but before that make sure you have all the facts !

Some other things to check if build is failing

• Have you installed Ruby and added it to the path variable?
• Have you added the path to jdk as JAVA_HOME environment variable?

Google Summer of Code 2014

I got selected for Google Summer of Code 2014 this year to contribute to Raxa EMR and I'm thankful to Google and Raxa.

I think if you want to get selected for GSoC what matters is not the number of proposals you submit but the quality. 

My project is to implement a  mobile app that allows users to search for hospitals, doctors, pharmacies and view them on a Google map. And the user can get directions to the location and call if  phone number is available. If the user is a registered user he can view his profile after logging in and he can make appointments with doctors. The user can mark his favorite locations. The app will support language translation. The technology used is Sencha Touch and the app will be able to run on both iOS and Android.

Project wiki can be found here.

Code repository can be found here.