Android DataGrid with Custom Cells Components and Formulas

clock November 15, 2014 17:29 by author Administrator

In many line of  business applications, you will often find yourself with a need to embed custom logic into each of the cells of a datagrid. The cells themselves could affect other cells via a formula, and so on and so forth. The Flexicious API provides two features that are very useful in such scenarios.

1) The concept of item renderers

2) The concept of label Functions

Item Renderers are custom components that sit inside each cell. Label Functions are bits of logic that determine the text in the cell. In this example. we will demonstrate a checkable cell with custom icons via a custom item renderer, and a total calculator cell that uses a labelFunction.

 

Follow the following steps to achieve the required functions

Step 1 – Adding grid XML to display the structure

The XML will be a simple XML file you need to place in your project. The XML file will have the grid structure understandable by Flexicious android lib to draw the structure for Flexicious Data Grid

The contents of grid XML file are as follows

<grid

    enableCopy="true"

    enableExport="true"

    enableFilters="true"

    enableFooters="true"

    enablePaging="true"

    enablePreferencePersistence="true"

    enablePrint="true"

    initialSortAscending="true"

    initialSortField="legalName"

    pageSize="50"

    preferencePersistenceKey="PeriodGrid"

    selectedKeyField="id" >

 

    <level

        childrenField="deals"

        enableFooters="true"

        pageSize="20"

        selectedKeyField="id" >

        <columns>

            <column

                columnLockMode="left"

                dataField="period"

                enableCellClickRowSelect="false"

                headerText="Period"

                useHandCursor="true"

                useUnderLine="true" />

            <column

                dataField="A"

                enableCellClickRowSelect="false"

                headerText="A"

                itemRenderer="com.example.demoapp.itemRenderer.CheckBoxViewRenderer"

                useHandCursor="true"

                useUnderLine="true" />

            <column

                dataField="B"

                enableCellClickRowSelect="false"

                headerText="B"

                itemRenderer="com.example.demoapp.itemRenderer.CheckBoxViewRenderer"

                useHandCursor="true"

                useUnderLine="true" />

            <column

                dataField="C"

                enableCellClickRowSelect="false"

                headerText="C"

                itemRenderer="com.example.demoapp.itemRenderer.CheckBoxViewRenderer"

                useHandCursor="true"

                useUnderLine="true" />

            <column

                dataField="D"

                enableCellClickRowSelect="false"

                headerText="D"

                itemRenderer="com.example.demoapp.itemRenderer.CheckBoxViewRenderer"

                useHandCursor="true"

                useUnderLine="true" />

            <column

                dataField="E"

                enableCellClickRowSelect="false"

                headerText="E"

                itemRenderer="com.example.demoapp.itemRenderer.CheckBoxViewRenderer"

                useHandCursor="true"

                useUnderLine="true" />

            <column

                dataField="F"

                enableCellClickRowSelect="false"

                headerText="F"

                itemRenderer="com.example.demoapp.itemRenderer.CheckBoxViewRenderer"

                useHandCursor="true"

                useUnderLine="true" />

            <column

                dataField="G"

                enableCellClickRowSelect="false"

                headerText="G"

                itemRenderer="com.example.demoapp.itemRenderer.CheckBoxViewRenderer"

                useHandCursor="true"

                useUnderLine="true" />

            <column

                dataField="H"

                enableCellClickRowSelect="false"

                headerText="H"

                itemRenderer="com.example.demoapp.itemRenderer.CheckBoxViewRenderer"

                useHandCursor="true"

                useUnderLine="true" />

            <column

                columnLockMode="right"

                dataField="total"

                enableCellClickRowSelect="false"

                footerOperation="sum"

                headerText="Total"

                useHandCursor="true"

                useUnderLine="true" />

 

        </columns>

    </level>

</grid>

Step 2 – Creating Item renderer view

In step 2, we need to create a java class that will act as a check box and display two different images for two on and off states for the check box.

On mouse click it will shift the data from ON to OFF or OFF to ON and according to that our item renderer will display the image representing that specific state

To assign item renderer class to our grid we need to specify it in XML element for the column that we defined in grid XML in previous step.

itemRenderer="com.example.demoapp.itemRenderer.CheckBoxViewRenderer"

Our “CheckBoxViewItemRenderer” class extends the “LinearLayout” and on initializing it will add an ImageView to that class as a child.

public CheckBoxViewRenderer(Context context) {

              super(context);

              setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.MATCH_PARENT));

              setOrientation(LinearLayout.HORIZONTAL);

              setHorizontalGravity(Gravity.CENTER);

              imageView = new ImageView(context);

              imageView.setLayoutParams(new LayoutParams(50, LayoutParams.MATCH_PARENT));

             

              addView(imageView);

 

After that we need to add the click listener to our CheckBoxItemRenderer to shift the ON and OFF states.

imageView.setOnClickListener(new OnClickListener() {

                     @Override

                     public void onClick(View v) {

                           FlexDataGrid grid = ((IFlexDataGridCell)getParent()).getColumn().getLevel().getGrid();

                           setValueByDataField(!(Boolean) getValueByDateField());

                           if((Boolean) getValueByDateField())

                                  imageView.setImageResource(R.drawable.checkmarkcircle);

                           else

                                  imageView.setImageResource(R.drawable.dashimage);

                           if(data instanceof PeriodGridData){

                                  ((PeriodGridData)data).calculateTotal();

                                 

                            }

                           else if(data instanceof FullGridData){

                                  ((FullGridData)data).calculateTotal();

                                 

                            }

                           ((IFlexDataGridCell)getParent()).getRowInfo().refreshCells();

                           grid.rebuildFooter();

                     }

              });

 

Now we also need some more code to display the by default state from our data provider, to do that we need to look into the data object for our specific cell and then set the source for the image view to display the required state in form of image.

Check the following function is the setter function for the specific cell. It checks the data field value and display the image for state.

private Object data;

 

public void setData(Object data){

this.data = data;

       if(data instanceof PeriodGridData || data instanceof FullGridData){

              if((Boolean) getValueByDateField())

                     imageView.setImageResource(R.drawable.checkmarkcircle);

              else

                     imageView.setImageResource(R.drawable.dashimage);

       }

}

 

public Object getData(){

       return data;

}

      

Step 3 – Creating Android Layout to display the main Grid

We need to add a layout file which will add our Flexicious data grid to our main screen. The code for the layout file is pasted below

<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:orientation="vertical"

    android:paddingBottom="@dimen/activity_vertical_margin"

    android:paddingLeft="@dimen/activity_horizontal_margin"

    android:paddingRight="@dimen/activity_horizontal_margin"

    android:paddingTop="@dimen/activity_vertical_margin" >

 

    <Button

        android:id="@+id/switchButton"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:text="Switch Grid" />

 

    <com.flexicious.nestedtreedatagrid.FlexDataGrid

        android:id="@+id/flexDataGrid1"

        android:layout_width="fill_parent"

        android:layout_height="fill_parent" >

    </com.flexicious.nestedtreedatagrid.FlexDataGrid>

 

 

</LinearLayout>

Step 4 – Main Activity Class

Now we will need a main activity class which will draw the structure for our grid using XML and layout, and then assign data provider to it

protected void onCreate(Bundle savedInstanceState) {

              super.onCreate(savedInstanceState);

              setContentView(R.layout.activity_main);

              flexDataGrid = (FlexDataGrid) findViewById(R.id.flexDataGrid1);

              this.buildGrid(this.flexDataGrid, R.raw.periodgrid);

              flexDataGrid.setDataProvider(DataFactory.getInstance().getDataForPeriodGrid(10));

             

              switchButton = (Button) findViewById(R.id.switchButton);

              switchButton.setOnClickListener(new OnClickListener() {

                     @Override

                     public void onClick(View v) {

                           Intent intent = new Intent(v.getContext(), FullGridActivity.class);

                           startActivity(intent);

                     }

              });

}

Step 5 - Starting activity and launching application

Now we need to start our above activity in main class and launch application on running you will see the following grid displaying the two type of images for different states.

 

 

 

ItemRendererExample.zip (1.87 mb)



iTunes Search app with Android DataGrid

clock November 12, 2014 23:26 by author Administrator

I wanted to share with you a simple application I created using the Android DataGrid component. So, lets get started!

What does the application do?

Searches the iTunes library for a given artist and displays the results in a data grid.

Here is how I went about creating this app.

Before we get into the core app, lets have look at the URL we will use to retrieve our data

https://itunes.apple.com/search?term=greenday

This URL should return you the songs by artist "greenday" in JSON format.

Step 1: Setting up the grid XML.

There are many ways to define the grid, but by far the simples and the most intuitive is using the XML file. Lets look at how this XML looks like.

<grid

    autoRefresh="autoRefreshHandler"

    enableCopy="true"

    enableExport="true"

    enableMultiColumnSort="true"

    enablePaging="true"

    enablePdf="true"

    enablePreferencePersistence="true"

    enablePrint="true"

    enablePullToRefresh="true"

    footerDrawTopBorder="true"

    forcePagerRow="true"

    horizontalScrollPolicy="auto"

    placingSections="onPlacingSectionsHandler"

    preferencePersistenceKey="simpleGrid"

    useCompactPreferences="true" >

 

    <level

        enableFilters="true"

        enableFooters="true"

        pageSize="50"

        selectedKeyField="id" >

        <columns>

            <column

                dataField="primaryGenreName"

                filterComboBoxBuildFromGrid="true"

                filterControl="MultiSelectComboBox"

                headerText="Genre" />

            <column

                dataField="artistName"

                filterControl="TextInput"

                headerText="Artist Name" />

            <column

                enableIcon="YES"

                headerText="Art Work"

                iconField="artworkUrl30"

                iconLeft="50"

                iconTop="5" />

            <column

                dataField="trackName"

                filterControl="TextInput"

                headerText="Track Name" />

            <column

                dataField="collectionName"

                filterControl="TextInput"

                headerText="Collection Name" />

        </columns>

    </level>

 

</grid>

 

 

 

The key information here is that we have 5 columns in the grid. The data is bound via the dataField attribute and the header text for the column is supplied via the headerText attribute. All the other attributes you see are options that you want the grid to have. For example if you want to have paging enabled, you just say enablePaging="YES". There are many many options available and I will blog about some of them as we go. You can find a list of option available here.

http://www.ioscomponents.com/Home/Docs

However, for now lets concentrate on the basic grid.

Once you have the XML ready defined, 90% of your work is already done

Step 2: Setting up the UI/Layout

The layout file is simple it just contains a text input and a search button to search the typed word from iTunes libaray. To display grid with result data our layout file also have com.flexicious.nestedtreedatagrid.FlexDataGrid element 

<?xml version="1.0" encoding="utf-8"?>

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

    android:layout_width="fill_parent"

    android:layout_height="match_parent"

    android:orientation="vertical" >

 

    <LinearLayout

        android:layout_width="match_parent"

        android:layout_height="wrap_content" >

      

        <EditText android:inputType="text"

            android:layout_width="0dp"

            android:id="@+id/textView1"

            android:layout_height="wrap_content"

            android:layout_weight="1"

            android:ems="10" >

            <requestFocus />

        </EditText>

       

        <Button

            android:id="@+id/button1"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="@string/Search" />

 

    </LinearLayout>

 

    <com.flexicious.nestedtreedatagrid.FlexDataGrid

        android:id="@+id/flexDataGrid1"

        android:layout_width="fill_parent"

        android:layout_height="fill_parent" >

    </com.flexicious.nestedtreedatagrid.FlexDataGrid>

 

</LinearLayout>

 

 


Step 3:  Activity Class

Now we need to have our Activity class which will set the above layout as content then adds a click listener on the button to search. 

@Override

       protected void onCreate(Bundle savedInstanceState) {

              super.onCreate(savedInstanceState);

              super.setContentView(R.layout.example_simple);

              this.buildGrid(this.flexDataGrid, R.raw.grid);

              final Button button = (Button) findViewById(R.id.button1);

              final TextView textView = (TextView) findViewById(R.id.textView1);

             

        button.setOnClickListener(new View.OnClickListener() {

            public void onClick(View v) {

                // Perform action on click

              String path = "https://itunes.apple.com/search?term="+textView.getText();

              new HttpAsyncTask().execute(path);

            }

        });

       }

It calls the itunes api to get the json result. parse it and feed to our flexicious data grid as data provider

 

androiditunesgrid.zip (849.17 kb)



AndroidJetPack Team Blog


Tag cloud