I am a developer and I know how hard it is to solve difficult issues while programming in case you did not get any help. I have faced this so many times. That's why I started this blog so that I can share problems and solutions with developer community. In case if you face any issue in programming do check my blog once, it will surely save your time.

Pages

Saturday, April 26, 2014

This is my first blog on AngularJs. I have been working with AngularJs since last three or four weeks and I am very excited about this Framework. It has nice features like two way data binding, templates, MVVM model, directives. That makes this framework super cool. I will be adding more blogs in future for AngularJs. In this blog I will explain how to pass data between controllers.

For this first we have to understand $rootScope. Every AngularJs application has one root scope and all other scopes are children of root scope. It's like application wide global variable.

Now lets see how we can use this to share data between controllers. First we need a service which is common in both controllers. We will invoke a service function from a controller which wants to send data. Service will broadcast it and using $rootScope. While the receiver controller will listen to the broadcast event and receives that data. First lets crete a service and function.

Recently in one our project we have to build slide out menu like Facebook but with some difference. In Facebook app when slide menu opens the main content screen also goes left or right. While in our case main content should stat and menu should come over the content like Navigation Drawer. For certain reasons we could not use Navigation Drawer class as we have the fragments in the application.

So we accomplished it with some different manner. In this blog I will explain you how to do this. First lets see our Main Layout XML file.

So in our layout we have FrameLayout with top toolbar with menu button which will open our menu. and a content layout which holds out main content. Now our menu should occupy 70% of available space when it opens so for that we have to set width and height for it. Lets create MainLayout class in app and configure this.

// This is called when MainLayout is attached to window
// At this point it has a Surface and will start drawing.
// Note that this function is guaranteed to be called before onDraw
@Override
protected void onAttachedToWindow() {
super.onAttachedToWindow();

// Invalite this whole MainLayout, causing onLayout() to be called
//this.invalidate();
}

}

As you can see in above class we have extended LinearLayout and it's core method and created an extended class. Where onLayout method we are hiding the menu and setting it's width to 70% width of the screen. Key function here is toggleMenu. It identifies the state of the menu and based on that show animation and show/hide the menu. You just have to call toggleMenu function when users taps on button. To close the menu user has to swipe left on the screen and it will close the menu. See the below code.

As you can see in above code we are setting MainLayout as content layout for the activity added on click listener for menu button. Which invokes toggleMenu function of mainLayout and toggles the menu. Also we have added dispatchTouchEvent method where we tracking user motion and invoke toggle menu method.

Recently in one of my project we have a layout where we have transparent top and bottom bar and which overlaps content of the screen. Content was the list view so when you scroll up or down the list view content goes under overlapping top and bottom bar where we can see it as the both top and bottom bars were transparent. Something like this.

So in this blog I am going to explain how to do this type of layout. I have used FrameLayout for this. As FrameLayout automatically sets the z-index for all it's child items as per the order. So following is our layout XML for this.

<!-- Main frame layout -->

<FrameLayout

xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:orientation="vertical" >

<!-- Main Content layout -->

<LinearLayout

android:layout_width="fill_parent"

android:id="@+id/contentPane"

android:layout_height="wrap_content"

android:layout_weight="1" >

</LinearLayout>

<!-- Relative Layout for top and bottom bar -->

<RelativeLayout

android:layout_width="fill_parent"

android:layout_height="fill_parent" >

<!-- top bar -->

<RelativeLayout

android:layout_width="fill_parent"

android:layout_height="70dip"

android:alpha="0.9"

android:orientation="horizontal" >

</RelativeLayout>

<!-- Bottom bar -->

<RelativeLayout

android:layout_width="fill_parent"

android:layout_alignParentBottom="true"

android:layout_height="70dip"

android:alpha="0.9"

android:orientation="horizontal" >

</RelativeLayout>

</RelativeLayout>

</FrameLayout>

As you can see in above XML first we have frame layout inside frame layout we have linear layout as our content layout where we have set layout weight property as 1 so this component will take whole space for the frame layout. After that we have used Relative layout and inside it we have or top and bottom bar as relative layout for bottom bar we are using android:layout_alignParentBottom config and set is true so it will go to bottom. This is how you can have overlapping views in android. Hopw this helps you.

Monday, April 21, 2014

As we know that now Cordova only support command line interface. Earlier with download you get cordova.jar file, that you can directly import to eclipse project and create android cordova file. Now with new download you only get source code, you have to manually generate cordova.jar file and import to eclipse. In this blog I will explain you the steps. First download Cordova source code from the Download.

Extract the content on the desktop. Now you will need following two things.

Saturday, April 19, 2014

Recently I faced one issues while creating tables in database. I was adding primary and foreign key in tables and I get errorno : 150 "Can't Create Table" I took almost couple of hours to resolve that error so in this blog I am going to explain what could be possible cause for this error. If you get this error check following possible cause.

1) The two tables must have same storage ENGINE
As we know we can configure storage engines like MyISAM, InnoDB. When you add foreign key to the table both parent and reference table should have same storage engine.

2) The two tables must have the same charset.
MySql supports more than 30 character sets. Both parent and reference table should have the same charset.

3) Primary key and Foreign key column must have same datatype.

When you add a foreign key, the primary key in parent table must have the same datatype as foreign key. For example if you have following definition of primary key

id INT UNSIGNED NOT NULL AUTO_INCREMENT

then you must define foreign key as

pk_id INT UNSIGNED NOT NULL

Else it will give you an error and will not work.

4) Primary key and Foreign key column must have same collation type

MySql supports more than 70 collation type. To define primary key and foreign key both columns should have same collation type

5) If there is already data is must match
If there are already data in both the tables it should match otherwise MySql will not allow to add foreign key. If there is data inconsistency, first delete the inconsistent data and then add primary key.

6) If the reference column is part of composite primary key, it may not work.

If the referenced column is part of composite primary key it may not work so if it's not required to have composite primary key, just define single column as primary key.

Recently in one of my project, requirement was to display context menu when user tap and hold on sencha touch panel. We all know we can add itemtphold event on sencha touch list. But in my case I have to use panel. In this blog I will explain how to add tap hold event to sencha touch list.

The logic is simple , first of all we have to bind touchstart and touchend event on panel. When touch starts we will check after some interval if touchend event is fired or not. If there is no touch event fired that means user is still holding tap. See the code below.

As you can see in above code after touch start event we are setting timeout to check isTouch variable after two seconds. You can change the interval according to your need. If touch ends before two seconds we set isTouch to false. So after timeout when this variable is checked you will get false and tap hold event is not fired. This way you can add tap hold event to any of the sencha touch component.