A Number of Enhancements for the TextInput(EditText) Filter

clock January 26, 2015 01:47 by author Administrator

The TextInput (EditText) filter is by far the most commonly used filter, and along with the MultiSelect filter, plays a very important role in making the user interface intuitive and easy to use. With the 2.0 release, we have made it all the more powerful!

Take a look at the following markup to declare the textinput filter:

            <column id="colId" dataField="id" headerText="ID"

filterWaterMark="Search" enableFilterAutoComplete="true" filterComboBoxBuildFromGrid="true" filterIcon="executeMethodOnDelegate__getImageResourceSearch" clearFilterOnIconClick="true"

                    columnLockMode="left" columnWidthMode="fitToContent"  textAlign="center"

 

                    filterControl="TextInput" filterOperation="BeginsWith" />

The underlined section of this configuration demonstrates a number of new features added to the textinput filter

-> The filterWaterMark will cause the TextInput to show a hint

-> The enableFilterAutoComplete flag will cause it to be auto complete enabled

-> The filterComboBoxBuildFromGrid will cause it to build the list of autocomplete values automatically from the grid data

-> The filterIcon will show the icon resoruce returned by the getImageResourceSearch method on your delegate within the TextInput Filter

-> The clearFilterOnIconClick will cause the textinput filter to clear when the icon is clicked!

 

Together, these enhancements make the textinput filter very versatile and powerful!

Take a look at the screenshot!

 



Custom Date Range Picker Added

clock January 26, 2015 01:29 by author Administrator

As a part of the newly released 2.0 version, we have implemeted an extension to the DateComboBox that lets you pick custom date ranges. We have also added the ability to define custom date ranges. By default, the grid ships with a number of default date ranges. These are listed below. You can customize which ranges appear by using configuration similar to this:

            <column  itemEditorApplyOnValueCommit="true"

                    id="date" dataField="addedDate" headerText="Date Added"

                    filterControl="DateComboBox" labelFunction="dataGridFormatDateLabelFunction"

filterDateRangeOptions="DATE_RANGE_THISQUARTER,DATE_RANGE_LASTQUARTER
,DATE_RANGE_THISYEAR,DATE_RANGE_LASTYEAR,DATE_RANGE_CUSTOM"/>

 

The two enhancements in 2.0 are the additoin of the Custom Date Range Picker, as well as the ability for you to define your own Date Ranges and register them. Below is the screenshot of the custom date range picker:

 


DATE_RANGE_CUSTOM 
DATE_RANGE_IN_THE_FUTURE 
DATE_RANGE_IN_THE_PAST 
DATE_RANGE_LAST_12_HOURS 
DATE_RANGE_LAST_24_HOURS 
DATE_RANGE_LAST_7_DAYS 
DATE_RANGE_LAST_SIXTY_MINTUES 
DATE_RANGE_LASTHOUR 
DATE_RANGE_LASTMONTH 
DATE_RANGE_LASTQUARTER 
DATE_RANGE_LASTWEEK 
DATE_RANGE_LASTYEAR 
DATE_RANGE_NEXTHOUR 
DATE_RANGE_NEXTMONTH 
DATE_RANGE_NEXTQUARTER 
DATE_RANGE_NEXTWEEK 
DATE_RANGE_NEXTYEAR 
DATE_RANGE_THISHOUR 
DATE_RANGE_THISMONTH 
DATE_RANGE_THISQUARTER 
DATE_RANGE_THISWEEK 
DATE_RANGE_THISYEAR 
DATE_RANGE_TODAY 
DATE_RANGE_TOMORROW 
DATE_RANGE_YESTERDAY 

 

 

CustomDateRangeExample.java (2.88 kb)



New Settings Popup

clock January 26, 2015 01:02 by author Administrator

As a part of the Android JetPack 2.0 release, a much requested feature, reordering of columns has been added. The demo files have been updated, but for those of you who have purchased or are currently using the the 1.x versions, when you upgrade, you will need to do the following things:1)  1) 

1) Replace the flxs_settings_dialog.xml with the one at the bottom of this post
2) Place the flxs_column_settings_grid.xml at the bottom of this file into the raw folder of your app, next to flxs_default_styles.json
3) If you have customized the SettingsActivity (by using Constants.SETTINGS_POPUP_ACTIVITY = CustomSettingsActivity.class;) then you will need to use the newer version of the SettingsActivity, also at the bottom of this post, and make your modifications to it.


For those of you who cannot wait to see what this looks like, below is a screenshot - Note that if you have grouped columns (column groups) the setting popup shows a tree - which makes sense because you cannot re-order a column out of its group, and you can move entire groups around! For grids that do not have  column groups, you will not see a tree structure, you will see a simple list of columns which you can reorder and show/hide.

 

 

 

flxs_settings_dialog.xml (3.86 kb)

flxs_column_settings_grid.xml (1,002.00 bytes)

SettingsActivity.java (19.37 kb)



All New Documentation!

clock January 26, 2015 01:00 by author Administrator

We have released a ton of updates to the user guide. In addition, it is no longer a bulky doc file, but a searchable, organized, library of topics arranged in a natural progression. We also have it available for download in various different formats!

Although it is still a work in progress, it is much better than what we had before, so please feel free to share feedback, we are continuing to work on it and improve it for you!



Version 2.0 about to be released

clock January 14, 2015 05:20 by author Administrator

We are wrapping up work on the upcoming release of Android JetPack. We have numerous bug fixes and features added to this release. We are looking for beta testers. If you have downloaded a trial in the past, or have purchased the library, please contact us using our contact us form, we would be glad to get you the beta trial.



Customizing the Pager (Toolbar), Export Options, Settings and Save Settings Popups

clock January 7, 2015 16:15 by author Administrator

All our products ship with a lot of functionality that comes with its own UI.


  1. The toolbars on top of each datagrid have their own UI
  2. The export comes with its own export type and column picker
  3. The print comes with the print column picker and the print preview window
  4. The user settings persistence mechanism comes with its own popup to save and set preferences

 

So, that said, the first thing you should know is that we have built in a mechanism  that allows you to customize this UI, whether it be for localization purposes, or for customization of functionality.

First, lets focus on the popups :

Customizing the layout is the easy part, since these are already in the layout folder for you, and not in the core library. : /SinglePageTest/res/layout

 

  1. flxs_export_dialog.xml
  2. flxs_save_settings_dialog.xml
  3. flxs_settings_dialog.xml

 

The actual code behind these layouts are in the associated activity classes. However, the grid uses the Constants class to get to the class of the activity. So we can specify our own classes:

 

  1. Constants.SETTINGS_POPUP_ACTIVITY = CustomSettingsActivity.class;
  2. Constants.SAVE_SETTINGS_POPUP_ACTIVITY= CustomSaveSettingsActivity.class;
  3. Constants.EXPORT_POPUP_ACTIVITY = CustomExportActivity.class;

 

And thats it! you can have your own code for these popups. The attached project demonstrates how this is done.

Finally, for the toolbar, since we render the toolbar everytime the grid is rendered, we have made it using better performing pure Java based view code, as opposed to inflating a layout. In the attached sample project, the full code for the custom toolbar is included (CustomPagerControl.as). And the way you plug it in is also shown:

grid.setPagerRenderer(new ClassFactory(CustomPagerControlAS.class));

Please review the project that is attached below, it should be pretty easy to follow once you have reviewed the blog post. When you run the project, you should get: 

 

CustomPopups.zip (1.91 mb)

UPDATE : Please note, that version 2.0 has been released and included a number of enhancements to the SettingsPopup. If you are using the code above with the library of version 2.0 or higher,  please refer to the blog post http://blog.androidjetpack.com/post/New-Settings-Popup.aspx for the files you will need to update. 

 



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)



Android Multi Column ListView

clock August 31, 2014 05:25 by author Administrator

One of the things that is unique about our product is that it solves a problem that no other component on the market does effectively. The closest component that the Android SDK has that matches the functionality of the Android JetPack Android DataGrid is the ListView. 

In fact, a lot of the concepts that the ListView has are built into the Android DataGrid. But, we go way above and beyond the features of the ListView

The Android JetPack Android DataGrid offers you:

-> Ability to organize information as rows and columns, with locked headers, Ability to Customize the appearance Rows and Columns, Interactive, Sortable Columns

-> Ability to independantly sort, align, and manipulate these columns

-> Horizontal as well as Vertical Scrolling

-> Inline Filtering, with numerous built in Filter Controls, and extensible architecture to define your own.

-> Server and Client Paging, with a fully Customizable Pager UI.

-> Summary Footers, with fine tuned control over Formula, Precision, Formatting, Placement and Rendering of Footers.

-> Various Selection Modes, including spreadsheet like behavior will cell by cell selection

-> Ability to define custom item renderers or "templates" for each column

-> Horizontal and Vertical Renderer Recycling, so only the viewport is drawn for ability to display large datasets very efficiently

-> Ability to Export to Excel, Word, Text, XML and other formats. Ability to plug in your own Exporters

-> Preference Persistence (Ability for your end users to save viewing preferences, like column order, visibility, widths, filter criteria, settings etc.)

-> Suppport for Hierarchical Data with Smooth Scrolling and Nested Tree Grids

-> Ability to define Fully Lazy Loaded, Partially Lazy Loaded and Initial Loaded Flat as well as Hierarchical Data Grids.

 

In addition, the Android JetPack Android DataGrid has a plethora of other features as we demonstrate here: http://www.androidjetpack.com/Home/AndroidDataGrid 

To truly appreciate the power of the product, download a trial today!

 



Running Android JetPack Demo Console in BlueStacks player

clock August 17, 2014 01:51 by author Administrator

The Blue Stacks player is an efficient emulator to test Android apps. Followings steps are show how to configure and run your android mobile app in blue stacks player. For those of you who find the Android emulator unusably slow,, this is an awesome alternative. 

Please note : Irrespective of whether you run Android code on the device or the excellent (and fast) bluestacks emulator, debugging will be an order of magnitude slower than running without debugger attached. 

1. Go to http://www.bluestacks.com/app-player.html and download blue stack player and install 

2. Open command line tool go to platform-tools folder with in your android sdk directory. 

3. Run command "adb-connect 127.0.0.1" and hit enter. It should show message "connected to 127.0.0.1:5555"

4. Now open eclipse, and launch the demo console. On the android device chooser you will see the blue stacks player listed. Select it and click ok to run your application in the BlueStacks player 

 

 

On successful launch you will see blue stacks player showing your project first screen 

 



AndroidJetPack Team Blog


Tag cloud