Recykluji starší článek (2016) a 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. Jen pro jistotu: podporované platformy v jednotlivých verzích Delphi.
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. Dá se vynutit vzhled Androidu i na Windows, ale to příště.
Pravidlo: zapomeňte na fixní souřadnice a snažte se vždy o nějaké zarovnání, jenom tak se aplikace bude chovat na rozdílných zařízení správně.
Nyní je tedy 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.
Pokud nechcete používat TListBox a spol, použijte normálně TEdit, TButton atd, jen jim nastavte align, margin, padding. Nebo použijte jiný způsob zarovnání přes některý z Layoutů, Panelů…
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, Linux (nutno mít stažen FMX Linux) nebo právě 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. Kompilace pro Windows je řádově rychlejší než např. kompilace a deploy pro Android.
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.Free;
oClient.Free;
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: ve starších verzích Delphi v mobilních překladačích začínají řetězce od nuly, ale to už pár verzí neplatí.
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.
download source: source (13K)
RSS