Cappuccino: prohledáváme Twitter

Formát JSON není třeba zdlouhavě představovat, v dnešním díle se zaměříme na to, jak pomocí něj v Cappuccinu zpracovávat a prezentovat data. Ukážeme si to na příkladu vyhledávání v populární službě Twitter.

qrcode

K článku není ukázka

K článku je k dispozici zdrojový kód

Co budeme tvořit

V dnešním díle si vytvoříme jednoduché vyhledávání na Twitteru. Využijeme k tomu Twitter API, které má na výstupu formát JSON, a naučíme se tak pracovat s tímto formátem a provádět requesty na pozadí (XHR).

Začneme tím, že si vygenerujeme nový projekt TwitterSearch.

Tvoříme uživatelské rozhraní

Nejprve si pro naší aplikace vytvoříme uživatelské rozhraní, které bude vypadat takto:

Základní prvky uživatelského rozhraní by pro nás neměly býti nic nového, vytvoříme je následovně:

@import <Foundation/CPObject.j>


@implementation AppController : CPObject
{
	CPTextField textField;
}

- (void)applicationDidFinishLaunching:(CPNotification)aNotification
{
	var theWindow = [[CPWindow alloc] initWithContentRect:CGRectMakeZero() styleMask:CPBorderlessBridgeWindowMask],
	contentView = [theWindow contentView];
	
	var button = [[CPButton alloc] initWithFrame: CGRectMake(420.0,37.0,80.0,24.0)];
	[button setTitle: @"Hledej"];
	
	textField = [CPTextField textFieldWithStringValue:@"" placeholder:@"Zadej řetězec" width:390.0];
	[textField setFrameOrigin:CGPointMake(30.0, 35.0)];
	
	[contentView addSubview:textField];
	[contentView addSubview:button];
	
	[theWindow orderFront:self];
}

Twitter API

K vyhledávání na Twitteru využijeme jeho API.

Na požadavek http://search.twitter.com/search.json?q=zdrojak dostáváme následující odpověď ve formátu JSON:

Pro naší aplikaci nám budou stačit pole from_user a text.

Zobrazení výsledků vyhledávání

Dalším prvkem uživatelského rozhraní bude třída CPCollectionView, která nám umožní vypsat záznamy do seznamu pod sebe. Avšak nebude to poslední věc, kterou budeme pro zobrazení dat muset udělat (viz níže). Přidáme ji do UI takto:

var resultsArea = [[CPScrollView alloc] initWithFrame: CGRectMake(34.0, 67.0, 380.0, 500.0)];
[resultsArea setAutohidesScrollers: YES];

//a přidáme ji do aktuálního view
[contentView addSubview: resultsArea];

Nyní potřebujeme určit, jak budou naše výsledky vyhledávání vypadat, proto si nadeklarujeme novou třídu SearchResultCell, která bude dědit od CPView. Pro třídu si vytvoříme nový soubor SearchResultCell.j, ten pak musíme importovat do našeho AppController.j

@import <Foundation/CPObject.j>
@import "SearchResultCell.j"

Začneme s deklarací třídy. Naše výsledky budeme zobrazovat pomocí nastylované třídy CPTextField, tu budeme mít jako instanční proměnnou label.

@implementation SearchResultCell : CPView
{
	CPTextField label;
}

@end

Třídu máme nadeklarovanou, přejdeme k samotnému stylování Labelu, to budeme provádět dvěma metodami.

První metoda setRepresentedObject určuje, jak bude Label vypadat a co bude jeho obsahem.

Druhá metoda určuje, jak se bude Label chovat ve chvíli, kdy je vybrán – nastaví se bílý text a šedé pozadí, jinak bude text černý a pozadí defaultně bílé.

@implementation SearchResultCell : CPView
{
	CPTextField label;
}

- (void)setRepresentedObject: (JSObject)anObject
{
	if (!label)
	{
		label = [[CPTextField alloc] initWithFrame: CGRectMakeZero()];
		[label setFont: [CPFont systemFontOfSize:12.0]];
		[label setTextColor: [CPColor blackColor]];
		[self addSubview: label];
	}
	
	[label setStringValue: "@" + anObject.from_user + ": " + anObject.text]; // z Twitter api používáme from_user a text
	[label setFrameSize: CGSizeMake(360.0, 60.0)]; // rozměry Labelu
	[label setLineBreakMode: CPLineBreakByWordWrapping];
}
	
- (void)setSelected:(BOOL)isSelected
{
	if (isSelected)
	{
		[label setTextColor: [CPColor whiteColor]];
		[self setBackgroundColor: [CPColor grayColor]];
	}
	else
	{
		[label setTextColor: [CPColor blackColor]];
		[self setBackgroundColor: nil];
	}
}

@end

Nyní se můžeme vrátit k souboru AppController.j, kde budeme pokračovat s definicí zobrazení našich výsledků.

var searchResultItem = [[CPCollectionViewItem alloc] init]; // nová položka v seznamu
[searchResultItem setView: [[SearchResultCell alloc] initWithFrame:CGRectMakeZero()]]; // nastavujeme view na naší třídu

list = [[CPCollectionView alloc] initWithFrame: [resultsArea bounds]]; // rozměry listu

; // později budeme implementovat delegate metody, které budou pracovat s třídou pro XHR komunikaci
;

;
;
;

[resultsArea setDocumentView: list];

[contentView addSubview: resultsArea];

Proměnnou list uděláme instanční proměnnou:

@implementation AppController : CPObject
{
	CPCollectionView list ;
	CPTextField textField;
}

Napojení uživatelského rozhraní

Přejdeme k připojení uživatelského rozhraní na akce, které se mají stát po kliknutí na tlačítko vyhledat.

Začneme metodou newSearch, která bude zavolána po stisknutí tlačítka:

- (void)newSearch:(id)sender
{
	var string = [textField stringValue];
	var request = [CPURLRequest requestWithURL:"http://search.twitter.com/search.json?q=" + encodeURIComponent(string)];
	twitterConnection = [CPJSONPConnection connectionWithRequest:request callback:"callback" delegate:self];
}

Nejprve vytvoříme request, který má proběhnout, a poté využijeme třídu CPJSONPConnection, která se nám postará o XHR request.

Nesmíme za inicializací tlačítka zapomenout nastavit akci, která se má stát po jeho stisknutí.

var button = [[CPButton alloc] initWithFrame: CGRectMake(420.0,37.0,80.0,24.0)];
[button setTitle: @"Hledej"];
[button setAction:@selector(newSearch:)];

Teď musíme definovat dvě delegate metody, které budou třídou CPJSONPConnection volány automaticky a poslední metodu, která provede samotné zobrazení našich výsledků.

- (void)connection:(CPJSONPConnection)aConnection didReceiveData:(CPString)data
{
	[self showSearchResults:data.results]; // vyvolá níže deklarovanou metodu, které se postará o interpretaci výsledků
}

- (void)connection:(CPJSONPConnection)aConnection didFailWithError:(CPString)error
{
	alert(error);
}

- (void)showSearchResults:(CPArray)results
{
	; // vyvolá zobrazení výsledků
}

Celý kód AppController.j vypadá takto:

@import <Foundation/CPObject.j>
@import "SearchResultCell.j"


@implementation AppController : CPObject
{
	CPCollectionView list;
	CPTextField textField;
}

- (void)applicationDidFinishLaunching:(CPNotification)aNotification
{
	var theWindow = [[CPWindow alloc] initWithContentRect: CGRectMakeZero() styleMask: CPBorderlessBridgeWindowMask],
	contentView = [theWindow contentView];
	
	var button = [[CPButton alloc] initWithFrame: CGRectMake(420.0,37.0,80.0,24.0)];
	[button setTitle: @"Hledej"];
	[button setAction:@selector(newSearch:)];
	
	textField = [CPTextField textFieldWithStringValue: @"" placeholder: @"Zadej řetězec" width: 390.0];
	[textField setFrameOrigin:CGPointMake(30.0, 35.0)];
	
	var resultsArea = [[CPScrollView alloc] initWithFrame: CGRectMake(34.0, 67.0, 380.0, 500.0)];
	[resultsArea setAutohidesScrollers: YES];
	
	var searchResultItem = [[CPCollectionViewItem alloc] init];
	[searchResultItem setView: [[SearchResultCell alloc] initWithFrame:CGRectMakeZero()]];
	
	list = [[CPCollectionView alloc] initWithFrame: [resultsArea bounds]];
	
	;
	;
	
	;
	;
	;
	
	[resultsArea setDocumentView: list];
	
	[contentView addSubview: resultsArea];
	[contentView addSubview: textField];
	[contentView addSubview: button];
	
	[theWindow orderFront: self];
}

- (void)newSearch:(id)sender
{
	var string = [textField stringValue];
	var request = [CPURLRequest requestWithURL:"http://search.twitter.com/search.json?q=" + encodeURIComponent(string)];
	twitterConnection = [CPJSONPConnection connectionWithRequest:request callback:"callback" delegate:self];
}

- (void)connection:(CPJSONPConnection)aConnection didReceiveData:(CPString)data
{
	[self showSearchResults:data.results];
}

- (void)connection:(CPJSONPConnection)aConnection didFailWithError:(CPString)error
{
	alert(error);
}

- (void)showSearchResults:(CPArray)results
{
	;
}

@end

Co jsme se naučili

Dnes jsme si v Cappuccinu vytvořili jednoduché Twitter vyhledávání, což nám umožnilo vyzkoušet si další třídu uživatelského rozhraní CPCollectionView, a také jsme si vyzkoušeli, jak se pracuje s formátem JSON a prováděním XHR requestu.

Pokud by vás problematika XHR a JSONu zajímala víc, doporučuji článek na blogu Cappuccina.

(Můžete si stáhnout zdrojové kódy k dnešnímu článku.)

Co bude příště

Příště? To záleží na čtenářském zájmu – co by vás v Cappuccinu zajímalo?

Zabývá se návrhem a vývojem webových aplikací. Své nápady s důrazem na jednoduchost a použitelnost realizuje spolu se členy týmu abdoc.

Věděli jste, že nám můžete zasílat zprávičky? (Jen pro přihlášené.)

Zatím nebyl přidán žádný komentář, buďte první!

Přidat komentář
Zdroj: https://www.zdrojak.cz/?p=3432