Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 4 Next »

This page will give you some example of how to start your first widget and breakdown of how the Infinit.e Widget framework interacts with your widget.

This guide is written to be picked up from the end of the Getting Started tutorial for getting set up with the Eclipse Plugin and Widget Library.

Overview of an Infinit.e Widget

An infinit.e widget is a flex module that gets run inside a window in the infinit.e application.

The Infinit.e Webpage handles all interactions with the window such as moving, dragging, changing size, hiding/showing, and data transfer.  You are responsible for handling the content inside the widget.
A widget must implement the com.ikanow.infinit.e.widget.library.widget.IWidget interface which is included in the infinit.e.widget.library.swc library.  This involves implementing the following functions: onInit(IWidgetContext), onReceiveNewQuery(), onReceiveNewFilter(), and reScale(Number,Number).  The first 3 functions are for data transfer while the last is used for resizing the content you create.

If you are using the Infinit.e Eclipse Plugin then these methods will already be stubbed out for you with sample code.

Overview of function to implement

The IWidget interface requires you to implement 4 methods, which will be called from the framework.  We will go over each method in detail below:

1. onInit(IWidgetContext) - This function is called when your widget has completed loading into the Infinit.e Framework.  The current data context object is passed to the widget which you will want to store locally.  This IWidgetContext object contains methods to access the current result sets from the query, filter, and other associated information.  This method has been stubbed out if you are using the Infinit.e Eclipse Plugin and no further action needs taken.

2. onReceiveNewQuery() - This function is called by the framework when new data has been loaded into the IWidgetContext object.  This is your notice that the dataset has changed and you can display new content in your widget.  Some sample code has been stubbed out in the Infinit.e Eclipse Plugin that shows how you can get the query result set from the context object (passed to you on the onInit() function) and then that data can be iterated over to access various fields in the document set.  An example is explained below on using query or filter data. TODO

3. onRecieveNewFilter() - This function is similary to the onReceiveNewQuery function except it is called when a filter has been put on the query data set (even if this filter was applied by this widget).  It can be used similarly to the onReceiveNewQuery function and an example can be seen below. TODO

4. reScale(Number,Number) - This function is used to resize data in your widget.  When the parent window the widget is housed in gets resized, it will let the module inside know that it has changed width and height so you can change your data accordingly.  If you are using the Infinit.e Eclipse Plugin this method has stubbed out an example for you that will set this modules width and height to the incoming width and height so the parent and internal module will stay the same size.  Some examples where you may not want to do this is if you want to instead scale the data in your window so it is always shown or resize in another manor.

Example of displaying data received from a query or filter

Here we will step through and example of displaying the titles and entities of a query to show how you can display data your widget receives.

1. First will will create 2 lists in our widget, the left list will show the documents titles, and the right list will show all the entities in the resulting dataset.
Lets first create a group to hold our 2 lists so they will align appropriately:

<s:HGroup width="100%" height="100%">
     <s:List id="titleList" width="50%" height="100%" dataProvider="{titleArrayList}" />
     <s:List id="entityList" width="50%" height="100%" dataProvider="{entityArrayList}" />
</s:HGroup>

Insert this text just below the Module tag in your sampleWidget.
Also create the 2 ArrayCollections we are using as dataProviders for the list inside the <fx:Script> block:

import mx.collections.ArrayCollection;
[Bindable] private var titleArrayList:ArrayCollection = new ArrayCollection();
[Bindable] private var entityArrayList:ArrayCollection = new ArrayCollection();

Now we just need to load some data into these ArrayCollections and the lists will populate so we can show some data.  Let's look at the onReceiveNewQuery function.
This function is going to get called everytime a query is ran so we know to display new data.  Let's first clear our ArrayCollections of any old data, insert this code block at the beginning of the onReceiveNewQuery function:

titleArrayList.removeAll();
entityArrayList.removeAll();

Next we will loop through the result set we get from the IWidgetContext object we saved in the onInit function and add the documents titles to our ArrayCollection.  At the same time we will loop through the document entities adding them to our entity ArrayCollection so we can show their names also:  Add this code below the code we just added in the previous step:

var queryResults:ArrayCollection =  _context.getQueryResults().getResults();
for each (var doc:Object in queryResults )
{
     titleArrayList.addItem(doc.title);
     for each ( var entity:Object in doc.entities )
     {
          entityArrayList.addItem(entity.disambiguous_name);
     }
}

Now we can run our example, login and do a sample query and we should have some data displayed in our lists, all the results titles, and every entity in all the resulting documents!

  • No labels