I've been a zone leader with DZone since 2008, and I'm crazy about community. Every day I get to work with the best that JavaScript, HTML5, Android and iOS has to offer, creating apps that truly make at difference, as principal front-end architect at Avego. James is a DZone Zone Leader and has posted 639 posts at DZone. You can read more from them at their website. View Full User Profile

Plugin and Play - Integrating YouTube with Eclipse

02.26.2008
| 24720 views |
  • submit to reddit

Implementing the Search User Interface

The generated YouTubeView class contains the UI code that gets displayed in our Search tab in the tasks view.
The createPartControl method is where the composites are created.

In this example I have used the FormsToolkit to render the components in the view using the org.eclipse.ui.forms extension. You will need to add this to your list of Required Plugins. Above our table view, we want to display a search field where we can type in an author or title and see the results populate the table.

Here is a code snippet from the createPartControl method which makes only a few alterations to the TableViewer creation code for layout purposes.

		//use the form toolkit for rendering
FormToolkit toolkit = new FormToolkit(Display.getCurrent());

Composite container = new Composite(parent, SWT.NONE);
toolkit.adapt(container);
toolkit.paintBordersFor(container);

container.setLayout(new GridLayout());
final GridData gd_container = new GridData(SWT.FILL, SWT.BEGINNING, true, true);
container.setLayoutData(gd_container);

/**
* Create a group for the search fields and button
*/
final Group searchGroup = new Group(container, SWT.NONE);
toolkit.adapt(searchGroup);
toolkit.paintBordersFor(searchGroup);
searchGroup.setText("Search");
final GridData gd_searchGroup = new GridData(SWT.FILL, SWT.CENTER, true, false);
searchGroup.setLayoutData(gd_searchGroup);
final GridLayout gridLayout = new GridLayout();
gridLayout.numColumns = 2;
searchGroup.setLayout(gridLayout);

final Label titleLabel = toolkit.createLabel(searchGroup,null, SWT.NONE);
titleLabel.setText("Title:");

txtTitle = toolkit.createText(searchGroup, null, SWT.BORDER);
txtTitle.setLayoutData(new GridData(SWT.FILL, SWT.CENTER, true, false));

final Label authorLabel = toolkit.createLabel(searchGroup,null, SWT.NONE);
authorLabel.setText("Author:");

txtAuthor = toolkit.createText(searchGroup,null, SWT.BORDER);
txtAuthor.setLayoutData(new GridData(SWT.FILL, SWT.CENTER, true, false));
new Label(searchGroup, SWT.NONE);

searchYoutubeButton = toolkit.createButton(searchGroup, null, SWT.NONE);
searchYoutubeButton.setText("Search YouTube");

viewer = new TableViewer(container, SWT.SINGLE | SWT.FILL | SWT.H_SCROLL | SWT.V_SCROLL );
viewer.getControl().setLayoutData(new GridData(GridData.BEGINNING | GridData.VERTICAL_ALIGN_BEGINNING | GridData.GRAB_VERTICAL
| GridData.FILL_BOTH));
viewer.setContentProvider(new ViewContentProvider());
viewer.setLabelProvider(new ViewLabelProvider());
viewer.setSorter(new NameSorter());
viewer.setInput(getViewSite());

We also need to provide a SelectionListener for the button so that it can populate the table with the results of our search. An important feature of this code is that we use an IRunnableWithProgress so that we can display a wait progress bar while the search is being run.

		searchYoutubeButton.addSelectionListener(
new SelectionAdapter()
{
public void widgetSelected(SelectionEvent e)
{
try
{
PlatformUI.getWorkbench().getProgressService().run(false, true,
new IRunnableWithProgress()
{
public void run(org.eclipse.core.runtime.IProgressMonitor monitor) throws java.lang.reflect.InvocationTargetException ,InterruptedException
{
YouTubeSearch search = new YouTubeSearch();
monitor.setTaskName("Retrieving Results....");
try
{
feed = search.getResults(txtAuthor.getText(), txtTitle.getText());

viewer.refresh();
}
catch (IOException e1)
{
e1.printStackTrace();
}
catch (ServiceException e1)
{
e1.printStackTrace();
}


};});
}
catch (InvocationTargetException e4) {
e4.printStackTrace();
} catch (InterruptedException e2) {

e2.printStackTrace();
}
}
});



When the view was created using the template, it provided a default model for the TableViewer. We need to replace this model with our YouTube search results. As you can see from the above listener code, we simply store the feed as a variable within this class.

The ViewContentProvider inner class that is created contains a getElements method, which returns the model to be rendered as an Object array. This snippet shows the changes made for this method.

public Object[] getElements(Object parent) 
{
if(feed != null)
{
return feed.getEntries().toArray();
}
return new String[] {};
}

The ViewLabelProvider will render the model. There are two signifigant changes made here. Firstly, the text we want to display is the title of the result, and it would be really nice to display the thumbnail of the result in the tree.

public String getColumnText(Object obj, int index) 
{
return ((VideoEntry)obj).getTitle().getPlainText();//getText(obj);
}
public Image getImage(Object obj)
{
YouTubeMediaGroup mediaGroup = ((VideoEntry)obj).getMediaGroup();
//use the first thumbnail
String imgURL = mediaGroup.getThumbnails().get(0).getUrl();

try
{
ImageDescriptor desc = ImageDescriptor.createFromURL(new URL(imgURL));
return desc.createImage();
}
catch (MalformedURLException e)
{
e.printStackTrace();
}
//default image.
return PlatformUI.getWorkbench().
getSharedImages().getImage(ISharedImages.IMG_OBJ_ELEMENT);
}

When the search is run now, we can see the thumbnails for each of the entries.

 

 

 

 

 

 

 

 

 

 

 

 

Tags: