Ukáži jak za pomoci Delphi a pár minut vytvoříte jednoduchou mobilní aplikaci pro Android s tím, že pokud máte Apple tak ji jen přeložíte pro iOS.
Veškerý vývoj bude probíhat na Windows jako Win32 aplikace a jen výsledek upravíme na zařízení. Naše aplikace umožní zadat IČO a z webu si dotáhne informace o firmě ve formě JSON, ten zpracujeme a zobrazíme.
Co budeme potřebovat
Začínáme
Vytvoříme novou aplikaci, tj. vybereme Multi device application a ze šablon Header/footer.
Tím máme základní program, který si někam uložíme.
Několik posledních verzí umí FireMonkey používat technologii View, kdy si můžeme definovat jak přesně vzhled bude vypadat na různých rozlišeních, kdy definujeme "Master" a ten pak přizpůsobujeme. Nám bude ale stačit aby se aplikace přizpůsobila sama a nebudeme nijak přesně specifikovat rozlišení, tj. budeme pracovat jen s "Master".
Přepínání View - my zůstaneme u master.
Nyní je třeba vyřešit Layout, tj. aby se aplikace přizpůsobila zařízení, když nebudeme specifikovat rozložení pro jednotlivá rozlišení. Máme na výběr několik možností Layout (představte si to jako panel, který se nějak chová), ale já místo toho použiji TListBox (další dobrá možnost je MultiView /zde byl již ukázán/ nebo TListView).
Zapomeňte na TListBox z VCL, tohle je jiná liga. Každý Item může být libovolná komponenta s různým stylem, která v sobě může nést jiné komponenty.
ListBox v akci
Vyberte ListBox a vložte ho na formulář, nastavte mu Align = alClient.
Titulek
Nyní budeme vkládat jednotlivé položky, které budou tvořit naše UI. Začneme titulkem (já ho tam už mám vložen).
Přes kontextové menu na ListBox přidáme položku
a nastavíme její styl jaký se Vám líbí
a zadáme text titulku.
Položky
Cílový stav
takže vložíme 10x TListBoxItem, styl tam kde je potřeba. Nyní editační pole což je normální TEdit, ale s nastaveným stylem a Align = Center (nic vám nebrání použít jiné Align).
Jak uděláme mazací tlačítko? Klikneme na TEdit a přes kontextové menu přidáme TClearEditButton, to je vše.
Všimněte si prosím ve stromě struktury u TEdit. Ve FireMonkey můžete komponenty libovolně kombinovat jak je Vám libo. Dalším plusem jsou styly, které dokáží kolikrát zázraky.
Takže základní UI máme - toto UI se podle toho jak přeložíte aplikaci předvede ve stylu platformy.
Vlastní program
V tomto okamžiku můžete program přeložit pro cílovou platformu, tj. některou z Windows, iOS, Mac OS X nebo Android. Doporučuji dělat veškerý vývoj na Windows a pak to teprve doladit např. na Androidu - je to nejen z hlediska rychlosti kompilace a deploy.
Zatím jsem ani nenapsal ani řádek kódu. To hned napravíme. Jak to bude fungovat? Využijeme jednu službu, která umí vracet pro IČO v URL (tj. REST API) JSON odpověď s informacemi o firmě. Takže jednoduše sestrojíme URL, přes multiplatformní THTTPClient z Delphi stáhneme data a přes multiplatformní System.JSON je projdeme a zobrazíme.
Obsluha tlačítka
uses
// Windows,
System.Net.httpclient,
System.JSON;
{$R *.fmx}
procedure THeaderFooterForm.Button1Click(Sender: TObject);
var
oClient: THTTPClient;
oStream: TStringStream;
iStatus: Integer;
sResponse: string;
oJsonValue: TJSONValue;
s: string;
o: TObject;
const
ciLen = length('ico_back('); // odpoved obsahuje kus JS
begin
oClient := THTTPClient.Create;
oStream := TStringStream.Create;
try
// pro ladeni
iStatus := oClient.Get('http://data.fin.cz/json/subject/45274649.js', oStream, nil).StatusCode;
// iStatus := oClient.Get('http://data.fin.cz/json/subject/'+edtICO.Text+'.js', oStream, nil).StatusCode;
iStatus := iStatus div 200;
if iStatus <> 1 then
begin
edtName.Text := 'Error:'+iStatus.ToString;
Exit;
end;
sResponse := oStream.DataString.Substring(ciLen);
sResponse := sResponse.Remove(Length(sResponse) - 1);
finally
oStream.DisposeOf; // ignoruj ARC
oClient.DisposeOf;
end;
(*
'ico_back({id:''25247484'',count:1,name:''AB - AKCIMA, s.r.o.'',
url:''http://rejstrik-firem.kurzy.cz/25247484/ab-akcima-sro/'',
addr_main:{city:''Cheb'',citypart:''Cheb'',street:''Havl\u00ED\u010Dkova 1803/2'',
zip:''35002'',no:''1803/2'',code:{city:''554481'',district:''CZ0411''}},
vat:{id:''CZ25247484''},date:{start:''2000-08-03'',last:''2014-09-01'',end:null}})'
*)
sResponse := NormaliseJSON(sResponse);
// Windows.MessageBox(0, Pchar(sResponse), nil, 0);
oJsonValue := TJSONObject.parseJSONValue(sResponse);
if oJsonValue is TJSONObject then
begin
s := TJSONObject(oJsonValue).Values['id'].Value;
edtName.Text := TJSONObject(oJsonValue).Values['name'].Value;
o := TJSONObject(oJsonValue).Values['addr_main'];
if o is TJSONObject then
begin
edtAdr1.Text := TJSONObject(o).Values['street'].Value;
edtAdr2.Text := TJSONObject(o).Values['citypart'].Value;
edtPost.Text := TJSONObject(o).Values['zip'].Value;
end;
end;
První část stáhne JSON, druhá ji projde. Je to přímočaré, až na NormaliseJSON, která trochu upravuje vrácený JSON.
function THeaderFooterForm.NormaliseJSON(const s: string): string;
var
c: char;
bInQuote: Boolean;
begin
Result := '';
bInQuote := False;
for c in s do
begin
if c = '''' then
begin
bInQuote := not bInQuote;
Result := Result + '"';
continue;
end;
if bInQuote then
Result := Result + c
else
if CharInSet(c, ['{', ',']) then
Result := Result + c+ '"'
else
if CharInSet(c, [':']) then
Result := Result + '"'+c
else
Result := Result + c
end;
Result := Result + '';
end;
Vyzkoušíme aplikaci na Windows, přeložíme pro Android a máme hotovo.
Poznámky
Pozor na řetězce od nuly v mobilních aplikacích, pokud nechcete použít přepínač, který to vypne, tak si jen vzpomeňte, že všechny funkce volané stylem string.xxxx začínají od 0 (viz. příklad).
Velikost aplikace
Odeberte z aplikace co nepotřebujete přes Project Manager.
Výslednou aplikaci (APK) přeložte jako release, v mém případě má balíček 6 119 782 bytes.
Měl to být původně video návod, ale nebylo to dobré. Navíc já mám raději textové návody, takže se omlouvám RK.
download source: source (13K)
RSS