[SOLVED] could not be able to work with the SplitViewNavigator container

I want to make an App using SplitViewNavigator container which contains List of cities in left view and Detail about the city in right view, In right view there is a text input through I get Name of city and store in a SQLite Database, and that name should be added to list in left view from SQLite Database I got started with flowing code in Main.mxml:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
                        xmlns:s="library://ns.adobe.com/flex/spark" 
                        applicationDPI="160"
                        initialize="application1_initializeHandler(event)">
<fx:Script>
    <![CDATA[
        import model.DataModel;

        import mx.events.FlexEvent;
        import valueobject.CityValueObject;
        import utillities.CityUtils;

        public var sqlConnection:SQLConnection;
        protected var statement:SQLStatement;
        protected function application1_initializeHandler(event:FlexEvent):void
        {
            sqlConnection = new SQLConnection();
            sqlConnection.open(File.applicationStorageDirectory.resolvePath("cityDB.db"), SQLMode.CREATE);
            statement.sqlConnection = sqlConnection; // Here error occurs saying that Error #1009: Cannot access a property or method of a null object reference.
            statement.text = "CREATE TABLE IF NOT EXISTS CITYNAME (" +
                "id INTEGER PRIMARY KEY AUTOINCREMENT, " +
                "nameofcity TEXT)";
            statement.execute();
            DataModel.getInstance().connection = sqlConnection;

            CityUtils.getAllCities();
        }

    ]]>
</fx:Script>
<fx:Declarations>
    <!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:SplitViewNavigator id="svn" width="100%" height="100%">
    <s:ViewNavigator width="30%" height="100%" id="list_of_cities" firstView="views.ListOfCities"/>
    <s:ViewNavigator width="70%" height="100%" id="display_contents" firstView="views.DisplayContents"/>
</s:SplitViewNavigator>

My model.DataModel is an action script class:

    package model
    {
    import flash.data.SQLConnection;

    import mx.collections.ArrayCollection;

    [Bindable]
    public class DataModel
    {
        public var connection:SQLConnection;
        public var cityList:ArrayCollection = new ArrayCollection();
        public var logs:String="Application Logs........\n";

        public static var _instance:DataModel;

        public function DataModel()
        {

        }

        public static function getInstance():DataModel
        {
            if(_instance == null)
            {
                _instance = new DataModel();
            }
            return _instance;
        }
    }
}

My valueobject.CityValueObject class is:

package valueobject
{
[Bindable]
public class CityValueObject
{
    public var id:uint;
    public var nameofcity:String;
}}

And My uttillities.CityUtils class is ::

package utillities
{
import flash.data.SQLResult;
import flash.data.SQLStatement;
import flash.display.Loader;
import flash.display.LoaderInfo;
import flash.events.Event;
import flash.net.URLRequest;
import flash.utils.ByteArray;

import model.DataModel;

import mx.collections.Sort;
import mx.collections.SortField;

import valueobject.CityValueObject;


public class CityUtils
{
    public static function getAllCities():void
    {
        var contactListStatement:SQLStatement = new SQLStatement();
        contactListStatement.sqlConnection = DataModel.getInstance().connection;
        contactListStatement.text = "SELECT * FROM CITYNAME";
        contactListStatement.execute();
        var result:SQLResult = contactListStatement.getResult();
        if( result.data!=null)
        {
            DataModel.getInstance().cityList.removeAll();

            for(var count:uint=0;count<result.data.length;count++)
            {
                var cityVO:CityValueObject = new CityValueObject();
                cityVO.id = result.data[count].id;
                cityVO.nameofcity = result.data[count].city;                    
                DataModel.getInstance().cityList.addItem(cityVO);
            }
        }
        sortData();     
    }

    public static function sortData():void
    {
        var dataSortField:SortField = new SortField();
        dataSortField.name = "cityName";
        dataSortField.numeric = false;

        /* Create the Sort object and add the SortField object created earlier to the array of fields to sort on. */
        var numericDataSort:Sort = new Sort();
        numericDataSort.fields = [dataSortField];

        /* Set the ArrayCollection object's sort property to our custom sort, and refresh the ArrayCollection. */
        DataModel.getInstance().cityList.sort = numericDataSort;
        DataModel.getInstance().cityList.refresh();
    }

    public static function updateLog(newLog:String):void
    {
        DataModel.getInstance().logs += new Date().time+" :-> "+newLog+"\n";
    }
}

}

My left containing list of cities is :

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" title="Cities"
    >
<fx:Declarations>
    <!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>

<fx:Script>
    <![CDATA[
        import model.DataModel;

        import mx.collections.ArrayCollection;
        import mx.events.FlexEvent;
        import mx.events.IndexChangedEvent;

        import spark.components.SplitViewNavigator;
        import spark.components.ViewNavigator;
        import spark.transitions.ViewTransitionBase;
        protected function myList_changeHandler():void {
            // Create a reference to the SplitViewNavigator.
            var splitNavigator:SplitViewNavigator = navigator.parentNavigator as SplitViewNavigator;

            // Create a reference to the ViewNavigator for the Detail frame.
            var detailNavigator:ViewNavigator = splitNavigator.getViewNavigatorAt(1) as ViewNavigator;

            detailNavigator.transitionsEnabled = false;

            // Change the view of the Detail frame based on the selected List item.
            detailNavigator.pushView(DisplayContents, list_of_cities.selectedItem);             
        }           
    ]]>
</fx:Script>
<s:VGroup width="100%" height="100%">
    <s:List id="list_of_cities" height="100%" width="100%" change="myList_changeHandler();" 
            dataProvider="{DataModel.getInstance().cityList}" labelField="nameofcity">

    </s:List>       
</s:VGroup>

and in last my Display Detail about city is simply like this :

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" title="Detail About City"
    >
<fx:Declarations>
    <!-- Place non-visual elements (e.g., services, value objects) here -->

</fx:Declarations>
<s:actionContent>
    <s:CalloutButton id="add_call_out_button" label="Add City" verticalPosition="after" 
                     icon="@Embed('assets/add.png')" calloutDestructionPolicy="never">
        <!-- layout the callout content here -->
        <s:calloutLayout>
            <s:VerticalLayout paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" horizontalAlign="center" gap="5"/>
        </s:calloutLayout>
        <s:calloutContent>              
            <s:TextInput id="city_name_input" prompt="Enter City Name" text="Sydney"/>
            <s:HGroup gap="40">
                <s:Button id="add_city_name" label="Add City" width="150" height="40" click="add_city_name_clickHandler()"/>
                <s:CheckBox id="preferred_cbox" label="Preferred" height="40" />
            </s:HGroup>

        </s:calloutContent>
    </s:CalloutButton>
    <s:Button id="remove_city_name" label="Remove" width="120" height="40"
              click="remove_city_name_clickHandler()" icon="@Embed('assets/delete.png')"/>

</s:actionContent>

<s:Label id="nameSomeThing" text="{data.Description}"/>

<fx:Script>
    <![CDATA[
        import model.DataModel;

        import spark.components.SplitViewNavigator;
        import spark.components.ViewNavigator; 

        protected function add_city_name_clickHandler():void
        {
            var sqlStatement:SQLStatement = new SQLStatement();
            sqlStatement.sqlConnection = DataModel.getInstance().connection;
            sqlStatement.text = "INSERT INTO CITYNAME (nameofcity)" +
                                "VALUES(:nameofcity)";
            sqlStatement.parameters[":nameofcity"] = city_name_input.text;
            sqlStatement.execute();

            var splitNavigator:SplitViewNavigator = navigator.parentNavigator as SplitViewNavigator;

            // Create a reference to the ViewNavigator for the Detail frame.
            var detailNavigator:ViewNavigator = splitNavigator.getViewNavigatorAt(1) as ViewNavigator;

            detailNavigator.transitionsEnabled = false;

            // Change the view of the Detail frame based on the selected List item.
            detailNavigator.popToFirstView();
        }

        protected function remove_city_name_clickHandler():void
        {
            // TODO Auto-generated method stub

        }

    ]]>
</fx:Script>

the above view(Display Detail) is still in development but at this stage I was Trying to add City Name to list of cities by getting name from city name input text input but at:

statement.sqlConnection = sqlConnection; // Here error occurs saying that Error #1009: Cannot access a property or method of a null object reference.

Iget that error and not be able to go ahead.

Can any one please give me the way to solve my this problem by my code givien above or suggest me an other way to meet my needs by this App Thanks in Advance...