Getting A List of Contents

Latest update: August 2013

In this tutorial, we will show you how to fetch the list of files in your FlashAir in an Android App. We will use command.cgi to do this.

We will make a button that will fetch a list of the current contents of your FlashAir when clicked. We will also set up the layout file so that the content list will be displayed below the button.

We want the app to be formatted like this:

display empty list

Important: Please note that your project contains a file called AndroidManifest.xml. This file gives your application particular permissions. By default, applications are not permitted to access the internet. The path to this file should look something like: [Project_Folder]/AndroidManifest.xml
You will need to add the following line of code into your AndroidManifest.xml in order for this application to work: 

<uses-permission android:name="android.permission.INTERNET" />

It is written by the actual code, for explaining. Please add the code by operating the Permissions tab.

First, we will write the activity_main.xml file that determines the layout of our Android App. This can be found in your layout folder. The path to this file should look something like: [Project_Folder]/res/layout/activity_main.xml

Creating the List Layout

We will set up one Button and two TextView layout elements. We will put default text in the TextView layout elements. The data received from the FlashAir will replace the default text.

You want the activity_main.xml file to look like this:

activity_main.xml 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:orientation="vertical"
    tools:context=".MainActivity" >

    <Button
        android:id="@+id/button1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:cacheColorHint="#00000000"
        android:text="Get List"
        android:textColor="@android:color/white"
        android:textSize="20sp" />

    <TextView
        android:id="@+id/textView0"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:scaleType="centerInside"
        android:text="# of items will be here"
        android:textAlignment="center"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:textSize="20sp" />

    <TextView
        android:id="@+id/textView1"
        android:layout_width="match_parent"
        android:layout_height="fill_parent"
        android:text="List of contents will be here"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:textSize="20sp" />

</LinearLayout>

Creating the Content List

Next, we will modify the MainActivity.java file. It should look like this by default:

MainActivity.java 

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }
}

Initialization

We will start by changing the class declaration, since we want to include a button that is clickable. We will add a import to the file when one needs them in the future.

MainActivity.java (1)

public class MainActivity extends Activity implements OnClickListener {

Declaring a Button

Now we will rewrite the onCreate(Bundle savedInstanceState) function and set up the screen format. We will then declare a button for the user to press to get the content list:

MainActivity.java (2)

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Button button = (Button)findViewById(R.id.button1);
        getWindow().setTitleColor(Color.rgb(65, 183, 216));
        button.getBackground().setColorFilter(Color.rgb(65, 183, 216), PorterDuff.Mode.SRC_IN);
        button.setOnClickListener(this);
    }

We will leave the onCreateOptionsMenu(Menu menu) function as it is:

MainActivity.java (3)

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

Getting & Showing the Number of Items in a Directory

We will set a click listener to the Button we declared above. When the user clicks the button, we want the number of items in the FlashAir directory as well as a list of the directory contents to appear on the screen.

We will use the following CGI command to get the number of items in each directory:

  • command.cgi with op=101 and the directory as a parameter
    • The command will look like this: http://flashair/command.cgi?op=101&DIR=/DCIM
    • The command will return the following information about the directory: <NumberofItems>

We will create the FlashAirRequest.java to be able to use URLConnection simple, and we will create the getString() that return the data returned by the CGI command in a String.

FlashAirRequest.java 

public class FlashAirRequest {    
    static public String getString(String command) {    
        String result = "";
        try{
            URL url = new URL(command);
            URLConnection urlCon = url.openConnection();
            urlCon.connect();
            InputStream inputStream = urlCon.getInputStream();         
            BufferedReader bufreader = new BufferedReader(new InputStreamReader(inputStream, "UTF-8"));
            StringBuffer strbuf = new StringBuffer();
            String str;
            while ((str = bufreader.readLine()) != null) {
                if(strbuf.toString() != "") strbuf.append("\n");
                strbuf.append(str);
            }
            result =  strbuf.toString();
        }catch(MalformedURLException e) {
            Log.e("ERROR", "ERROR: " + e.toString());
            e.printStackTrace();
        }
        catch(IOException e) {
            Log.e("ERROR", "ERROR: " + e.toString());
            e.printStackTrace();
        }
        return result;
    }
}

Next, we will create code using getString(). We use AsyncTask to avoid blocking the main UI thread.

MainActivity.java (4)

    @Override
    public void onClick(View view) {
        switch ( view.getId() ) {
        case R.id.button1 :            
            // Fetch number of items in directory and display in a TextView
            new AsyncTask<String, Void, String>(){
                @Override
                protected String doInBackground(String... params) {
                    return FlashAirRequest.getString(params[0]);                
                }
                @Override
                protected void onPostExecute(String fileCount) {
                    TextView textView = (TextView)findViewById(R.id.textView0);                    
                    textView.setText("Items Found: " + fileCount);        
                }
            }.execute("http://flashair/command.cgi?op=101&DIR=/DCIM");
  • Line 9:
    This function returns the String value returned by the getString().
  • Lines 13-14:
    The onPostExecute() receives the String value returned by doInBackground() and we set the first of the two TextView layout elements that we declared in activity_main.xml to show the value of fileCount.

Getting & Showing Directory Contents

We will use the following command to retrieve a list of contents from the FlashAir device:

  • command.cgi with op=100 and the directory /DCIM as a parameter
    • The command will look like this: http://flashair/command.cgi?op=100&DIR=/DCIM

We will also use the FlashAirRequest.java.

MainActivity.java (5)

            // Get a file list from FlashAir
            new 
            <String, Void, String>(){
                @Override
                protected String doInBackground(String... params) {    
                    return FlashAirRequest.getString(params[0]);
                }
                @Override
                protected void onPostExecute(String text) {
                    TextView textView1 = (TextView)findViewById(R.id.textView1);
                    textView1.setText(text);
                }
            }.execute("http://flashair/command.cgi?op=100&DIR=/DCIM");
            break;
        }
    }
} // End MainActivity class
  • Line 5:
    This function return the String value returned by the getString().
  • Lines 9-10:
    The onPostExecute() receives the String value returned by doInBackground(), we set the value of text to replace the default text in the second of the two TextView() layout elements.

Result

The command http://flashair/command.cgi?op=100&DIR=/DCIM
will return the following information about each item in the directory:
<Directory>,<Filename>,<Size>,<Attribute>,<Date>,<Time>

We will include all of this information in our list:

displayed content list

Sample Code

android_tutorial_02.zip (528KB)

All sample code on this page is licensed under BSD 2-Clause License