From Seeks

Contents 1 Seeks YUI: JavaScript Library for Seeks 1.1 Resources 1.2 Examples 1.3 Sample code 1.3.1 Simple widget that displays search results for the "hello" keyword

Seeks YUI: JavaScript Library for Seeks

• Source: https://gitorious.org/seeks-yui
• Latest version: 0.2-pre1

Resources

• Documentation
• YUI 3
  • Video: Satyen Desai — A Widget Walkthrough
  • Video: Luke Smith — Events Evolved

Examples

• Basic standalone Seeks search interface: workspace.html
• Select some text and search it as a keyword in a Seeks search widget: text-select.html
• Search on Yahoo! News and get continuous realtime Seeks search results in Seeks a widget: news.html

Sample code

Simple widget that displays search results for the "hello" keyword

Put an empty place holder element that helps YUI to inject CSS at early stage:

<style type="text/css" id="styleoverrides"></style>

Load some CSS to dress up Seeks YUI widgets:

<link rel="stylesheet" href="http://garbure.org/~mammique/soft/seeks/yui/lib/0.2-pre1/examples/style/base.css" type="text/css" />

Load a combo of basic YUI CSS:

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?3.3.0/build/cssreset/reset-min.css&3.3.0/build/cssfonts/fonts-min.css&3.3.0/build/cssgrids/grids-min.css&3.3.0/build/widget/assets/skins/sam/widget.css&3.3.0/build/node-menunav/assets/skins/sam/node-menunav.css&3.3.0/build/test/assets/skins/sam/test.css">

Specific CSS to dress up our widget:

<style type="text/css">
#seeks_widget {
	width: 480px;
	height: 320px;
	overflow-y: scroll;
	border: 3px solid #880000;
	border-radius: 10px;
	padding: 5px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 100px;
}
</style>

Load YUI with the seed yui-min.js file which will then load other YUI dependencies:

<script src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js" charset="utf-8"></script>

Note: for network performance you can load all of it at once using the YUI Configurator

Load Seeks YUI modules individually:

<script type="text/javascript" src="http://garbure.org/~mammique/soft/seeks/yui/lib/0.2-pre1/seeks-search-base-min.js"></script>
<script type="text/javascript" src="http://garbure.org/~mammique/soft/seeks/yui/lib/0.2-pre1/seeks-i18n-min.js"></script>
<script type="text/javascript" src="http://garbure.org/~mammique/soft/seeks/yui/lib/0.2-pre1/seeks-misc-min.js"></script>
<script type="text/javascript" src="http://garbure.org/~mammique/soft/seeks/yui/lib/0.2-pre1/seeks-search-widget-min.js"></script>

Note: for network performance all modules can be loaded at once using the minified combo version: http://garbure.org/~mammique/soft/seeks/yui/lib/0.2-pre1/seeks-combo-min.js

Element that will host our widget:

<div class="yui3-skin-sam yui-skin-sam" id="seeks_widget"></div>

Start JavaScript:

<script type="text/javascript">

Variable for our Y.Seeks.SeeksnodePool, it will hold informations about Seeks nodes. We put it outside of the YUI instance, thus all Seeks nodes and their informations can be globally shared by any Seeks YUI objects/widgets over different YUI instances:

var seeksnode_pool;

Open a YUI instance with the 'node' and 'seeks-search-widget' modules:

YUI({insertBefore: 'styleoverrides'}).use('node', 'seeks-search-widget', function (Y) {

Create our new global Y.Seeks.SeeksnodePool instance:

seeksnode_pool = new Y.Seeks.SeeksnodePool({records: [

Declare a bunch of Seeks we want to use, and close the Y.Seeks.SeeksnodePool instantiation:

{url: 'http://seeks-project.info/search.php/', label: 'seeks-project.info'},
{url: 'http://s.s/', label: 's.s (local proxy node)'},
{url: 'http://seeks.homecomputing.fr/', label: 'seeks.homecomputing.fr'},
]});

To fire our search request we will need a Y.Seeks.SearchPad object, as we also need the search results to be reflected in the user interface (browser interface) we will have to extend it with Y.Widget, and with Y.WidgetParent to append child result(s) in it. We don't need to provide any control to the user over the search, as we will just hardcode the "hello" keyword in the request, so we leave the widget empty of any graphical elements. To create this object we create a new class with Y.Base.create, learn more about this at YUI Base:

SearchPadWidget = Y.Base.create("seeks-search-pad-widget", Y.Widget, [Y.WidgetParent, Y.Seeks.SearchPad], {}, {});

Create an instance from our SearchPadWidget class:

var searchpad = new SearchPadWidget({'seeksnodePool': seeksnode_pool});

Render it into the previously created element:

searchpad.render("#seeks_widget");

When the search pad will fire the request, we will need to handle and render the result(s) into it with a Y.Seeks.SearchRequestHandler*Widget based object. Thus, in order to handle the request as text, we append a new Y.Seeks.SearchRequestHandlerTextWidget instance into our search pad:

searchpad.add(new Y.Seeks.SearchRequestHandlerTextWidget());

Finally we create a new request, and assign it to the search pad. This will fire the request with the requestChange event:

var request = {'seeksnode': searchpad.get('seeksnode'), 'data': {'keyword': 'hello', 'perso': true, 'lang': 'en', 'expansion': 1}};
searchpad.set('request', request);

Close the YUI instance:

});

</script>