Android - programowanie
Post:18 maja 2012, 23:41
Może kogoś zainteresuje. Jakiś czas temu napisałem aplikację na Androida którą nazwałem "Czytnikiem Telepolis". Aplikacja była dosyć kapryśna jako, że bazowała na bibliotece Jsoup. Postanowiłem przepisać ją zupełnie na nowo z użyciem kodu Java jako "owijacza" (wrappera, ale nie lubię anglojęzycznych określeń) i, tym razem, języków webowych, konkretnie javascriptowej biblioteki jQuery, która tak na marginesie jest naprawdę fantastyczna. Oto kod "wrappera" oraz sam kod aplikacji, wymaga ona jednego uprawnienia, korzystanie z internetu. Jako, że wersja jest robocza, choć w pełni działająca, nie podaję tu linku do konkretnego apk, tylko sam kod. Pozdrawiam koderów, szczególnie tych wierzących, że języki webowe to w przyszłości jedna z ciekawych alternatyw mobilnego programowania.
[ Dodano: 2012-05-19, 22:40 ]
Gdyby ktoś chciał sprawdzić, pod poniższym adresem znajdują się trzy pliki apk.
http://hostuje.net/file.php?id=30f66847 ... c842e174ed
Pomyślałem, że można by wzbogacić aplikację o bardziej interesujące efekty graficzne i aż się prosi by zastosować do tego bliźniaczą bibliotekę jQuery czyli jQuery UI. W powyższym przykładzie jak widać, przy przejściu do treści newsa, zastosowałem efekt blaknięcia z funkcją zwrotną, oraz przywrócenia zmienionego już o odpowiednią treść ekranu.
W kolejnych przykładach (plikach apk.) jest to efekt "slide", chyba najefektowniejszy i najbardziej pasujący do telefonów komórkowych, oraz efekt "wstrzącania" wraz z małym przykładem jak można ładnie zaanimować linka efektem "podskakiwania" odnośnika by zwrócić na niego uwagę uzytkownika. Do powyższych dwóch wersji użyłem kolejkowania jQuery z użyciem metody queue(callback) przyjmującej funkcję zwrotną, ponieważ metody efektów z biblioteki UI nie udostępniają możliwości dodania funkcji zwrotnych jako ich argumentów.
Wygląda to następująco:
Aplikacje testowałem na Samsungu Galaxy S II , Android 4.0 i nie dam żadnej pewności, że na każdym telefonie działać to będzie tak samo, aczkolwiek jest bardzo prawdopodobne, że tak.
[ Dodano: 2012-05-24, 18:42 ]
A tutaj praktycznie finalna, naprawdę dopracowana graficznie i wystylizowana z użyciem jUI, wersja aplikacji "Telepolis Mobile":
http://hostuje.net/file.php?id=b8ff2e8f ... 2141007c06
i kod źródłowy rdzenia aplikacji:
[ Dodano: 2012-06-12, 13:18 ]
Jeszcze w ramach ćwiczeń gdyby ktoś chciał się zapoznać z niuansami JavaScriptu przepisałem i wydzieliłem skrypt JS stosując przestrzeń nazw i domknięcia. Sam skrypt wydzielony z pliku html należy dołączyć do pliku zawierającego kod html:
<script src="telepolis.js" charset="utf-8" ></script>
po zaimportowaniu biblioteki jQuery i jQuery UI.
Natomiast sam skrypt telepolis.js przyjmie postać:
Kod: Zaznacz cały
oraz sam rdzeń aplikacji:
package moj.jquery;
import android.app.Activity;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.Menu;
import android.view.MenuItem;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
public class JQueryMobileActivity extends Activity {
private WebView kontrolka;
private final int ZAMKNIJ=Menu.FIRST;
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
kontrolka = (WebView) findViewById(R.id.html5);
kontrolka.getSettings().setJavaScriptEnabled (true);
kontrolka.setWebChromeClient (new WebChromeClient());
kontrolka.loadUrl("file:///android_asset/www/aplikacja.html");
}
public boolean onKeyDown(int kodKlawisza, KeyEvent zdarzenie)
{
if (zdarzenie.getKeyCode()==KeyEvent.KEYCODE_BACK)
{ kontrolka.loadUrl("file:///android_asset/www/aplikacja.html");}
return false;
}
public boolean onCreateOptionsMenu(Menu menu) {
menu.add(Menu.NONE, ZAMKNIJ, Menu.NONE, "Zamknij");
return(super.onCreateOptionsMenu(menu));
}
public boolean onOptionsItemSelected(MenuItem pozycja)
{
switch (pozycja.getItemId())
{
case ZAMKNIJ:
finish();
}
return(super.onOptionsItemSelected(pozycja));
}
public void onDestroy(){android.os.Process.killProcess(android.os.Process.myPid());};
}
Kod: Zaznacz cały
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<title></title>
<style>
</style>
</head>
<body>
<div id="pozycje">
</div>
<script src="jquery-1.7.1.min.js"></script>
<script>
(function($)
{
$.ajax({
url : 'http://www.telepolis.pl/rss/news.php',
dataType: 'xml',
success: function( data ){
$('#pozycje').empty();
$('#pozycje').append('<p style="background-color:black;color:white;font-size:1.5em;text-align:center;"><b>Czytnik Telepolis</b></p>');
$( data ).find( 'item' ).each(function() {
var tytul=$( this ).find( 'title' ).text();
$( '#pozycje' ).append('<p style="color:white;background-color:grey;"><b><i>'+tytul+'</i></b></p>');
var data=$( this ).find( 'pubDate' ).text().substring(17,25);
$( '#pozycje' ).append('<p>Opublikowano: '+data+"</p>");
$( '#pozycje' ).append('<p></p>');
$( '#pozycje' ).append($( this ).find( 'description' ).text());
var link =$(this).find('link').text();
$('#pozycje').append('<br/><a href="'+link+'">Czytaj dalej</a>');
$( '#pozycje' ).append("<hr/>");
});
},
beforeSend:function (){$('#pozycje').append($('<img src="ajax_loader.gif">'));} ,
error : function(data){
$( 'body' ).append('<p>Błąd ładowania, przyciśnij przycisk "wstecz"</p>');
}
});
$('a').live ("click", function(e)
{
e.preventDefault();
var link_strony=$(this).attr('href');
var link_gotowy = link_strony+" #intertext1";
$('#pozycje').fadeOut
(2000, function()
{
$("#pozycje").empty().load (link_gotowy, function()
{
$("#pozycje").fadeIn(2000);
});
}
);
});
})(jQuery);
</script>
</body>
</html>
[ Dodano: 2012-05-19, 22:40 ]
Gdyby ktoś chciał sprawdzić, pod poniższym adresem znajdują się trzy pliki apk.
http://hostuje.net/file.php?id=30f66847 ... c842e174ed
Pomyślałem, że można by wzbogacić aplikację o bardziej interesujące efekty graficzne i aż się prosi by zastosować do tego bliźniaczą bibliotekę jQuery czyli jQuery UI. W powyższym przykładzie jak widać, przy przejściu do treści newsa, zastosowałem efekt blaknięcia z funkcją zwrotną, oraz przywrócenia zmienionego już o odpowiednią treść ekranu.
W kolejnych przykładach (plikach apk.) jest to efekt "slide", chyba najefektowniejszy i najbardziej pasujący do telefonów komórkowych, oraz efekt "wstrzącania" wraz z małym przykładem jak można ładnie zaanimować linka efektem "podskakiwania" odnośnika by zwrócić na niego uwagę uzytkownika. Do powyższych dwóch wersji użyłem kolejkowania jQuery z użyciem metody queue(callback) przyjmującej funkcję zwrotną, ponieważ metody efektów z biblioteki UI nie udostępniają możliwości dodania funkcji zwrotnych jako ich argumentów.
Wygląda to następująco:
Kod: Zaznacz cały
oraz: $("#pozycje")
.effect("shake",{times:1},300)
.queue(function(){
$("#pozycje")
.empty()
.load(link_gotowy,function(){
$("#pozycje")
.effect("shake",{times:1},300)
.dequeue();
}
);
});
Kod: Zaznacz cały
Jak widać mała rzecz (mało kodu), a cieszy (oko). W ogóle jQuery jest ucieleśnieniem eleganckiego i zwięzłego, ale bardzo efektywnego kodowania. $("#pozycje")
.hide ("slide",{direction:"left"},500)
.queue(function(){
$("#pozycje")
.empty()
.load(link_gotowy,function(){
$("#pozycje")
.show("slide",{direction:"left"},500)
.dequeue();
}
);
});
Aplikacje testowałem na Samsungu Galaxy S II , Android 4.0 i nie dam żadnej pewności, że na każdym telefonie działać to będzie tak samo, aczkolwiek jest bardzo prawdopodobne, że tak.
[ Dodano: 2012-05-24, 18:42 ]
A tutaj praktycznie finalna, naprawdę dopracowana graficznie i wystylizowana z użyciem jUI, wersja aplikacji "Telepolis Mobile":
http://hostuje.net/file.php?id=b8ff2e8f ... 2141007c06
i kod źródłowy rdzenia aplikacji:
Kod: Zaznacz cały
Gdyby ktoś miał jakieś pytania dotyczące szczegółów kodu to chętnie odpowiem. <title></title>
<link rel="stylesheet" type="text/css" href="jquery-ui-1.8.20.custom.css"/>
<style type="text/css">
body{color:white;background-color:black;}
#powiadomienie
{
position:absolute;
left:0;
top:0;
width:100px;
height:20px;
padding-top:3px;
padding-left:3px;
background: green;color: white;
}
</style>
</head>
<body>
<div id="tytul"></div>
<div id="pozycje"></div>
<div id="powiadomienie">Ładowanie...</div>
<script src="jquery-1.7.1.min.js"></script>
<script src="jquery-ui-1.8.20.custom.js"></script>
<script>
(function($)
{
var aplikacja={kopia:null};
$.ajax({
url : 'http://www.telepolis.pl/rss/news.php',
dataType: 'xml',
beforeSend: function(){$("#powiadomienie").show();},
success: function( dane ){
$("#powiadomienie").hide();
$("#tytul").append('<p id="tytul" style="background-color:black;color:white;text-align:center;margin-bottom:-10px;"><b>Telepolis Mobile</b></p><p style="margin-bottom:-10px;" id="odswiez">Odśwież</p>');
$('#pozycje').empty();
$( dane ).find( 'item' ).each(function() {
var kod='<div id="newsy">';
var tytul=$( this ).find( 'title' ).text();
kod+='<p style="color:white;background-color:#189425;padding-left:3px;padding-top:3px;padding-bottom:3px;"><b><i>'+tytul+'</i></b></p>';
kod+='<div style="margin-left:7px;padding-left: 5px;border-left:10px solid #0078ae;">';
var czas=$( this ).find( 'pubDate' ).text().substring(17,22);
kod+='<p>Opublikowano: '+czas+"</p>";
var tresc = $( this ).find( 'description' ).text();
kod+='<p style="margin-bottom:0px;">'+tresc+'</p>';
var link =$(this).find('link').text();
kod+='<a id="'+tytul+'" href="'+link+'">Czytaj dalej</a></div></div>';
var $div=$(kod);
$("#pozycje").append($div).append("<hr/>")
});
aplikacja.kopia=$("#pozycje").children().clone(true);
$("p#odswiez").button({icons: {secondary: "ui-icon-arrowrefresh-1-e"}});
$("a", pozycje).button();
},
error : function(){$( 'body' ).append('<p>Błąd ładowania, przyciśnij przycisk "wstecz"</p>');}
});
$("p#odswiez").live ("click", function (zdarzenie){
if ($(this).text()=="Powrót")
{
$("#pozycje").css({"border-left":"0px", "margin-left":"0px","padding-left":"0px"});
$(this).button({label:"Odśwież",icons: {secondary: "ui-icon-arrowrefresh-1-e"}});
$("p#tytul").text("Telepolis Mobile");
$("#pozycje").empty().append(aplikacja.kopia);
$("a", pozycje).button();
}
else if($(this).text()=="Odśwież")
{
$("#pozycje").empty();
$.ajax({
url : 'http://www.telepolis.pl/rss/news.php',
dataType: 'xml',
beforeSend: function(){$("#powiadomienie").show();},
success: function( dane ){
$("#powiadomienie").hide();
$('#pozycje').empty();
$( dane ).find( 'item' ).each(function() {
var kod='<div id="newsy">';
var tytul=$( this ).find( 'title' ).text();
kod+='<p style="color:white;background-color:#189425;"><b><i>'+tytul+'</i></b></p>';
kod+='<div style="margin-left:7px;padding-left: 5px;border-left:10px solid #0078ae;">';
var czas=$( this ).find( 'pubDate' ).text().substring(17,22);
kod+='<p>Opublikowano: '+czas+"</p>";
var tresc = $( this ).find( 'description' ).text();
kod+='<p style="margin-bottom:0px;">'+tresc+"</p>";
var link =$(this).find('link').text();
kod+='<a id="'+tytul+'" href="'+link+'">Czytaj dalej</a></div></div>';
var $div=$(kod);
$("#pozycje").append($div).append("<hr/>")
});
aplikacja.kopia=$("#pozycje").children().clone(true);
$("p#odswiez").button({icons: {secondary: "ui-icon-arrowrefresh-1-e"}});
$("a", pozycje).button();
},
error : function(){ $( 'body' ).append('<p>Błąd ładowania, przyciśnij przycisk "wstecz"</p>');}
});
}
});
$("a", pozycje).live ("click", function(zdarzenie)
{
zdarzenie.preventDefault();
$("#powiadomienie").show();
$("p#odswiez").button({label:"Powrót",icons: {primary: "ui-icon-arrowthick-1-w"}});
$("p#tytul").text($(this).attr('id'));
var link_strony=$(this).attr('href');
var link_gotowy = link_strony+" #intertext1";
$("#pozycje").fadeOut (2000, function(){
$("#pozycje").empty().load (link_gotowy, function()
{ $("#pozycje img").each ( function () {
var adres = $(this).attr("src");
var nowy_adres="http://www.telepolis.pl"+adres;
$(this).attr("src", nowy_adres );
});
$("#pozycje").css({"border-left":"10px solid #0078ae", "margin-left":"7px","padding-left":"5px"}).fadeIn(2000);
$("#powiadomienie").hide();
$("#pozycje a").css({color:"lightblue"}).click (function(){return false});
});
}
);
});
})(jQuery);
</script>
</body>
[ Dodano: 2012-06-12, 13:18 ]
Jeszcze w ramach ćwiczeń gdyby ktoś chciał się zapoznać z niuansami JavaScriptu przepisałem i wydzieliłem skrypt JS stosując przestrzeń nazw i domknięcia. Sam skrypt wydzielony z pliku html należy dołączyć do pliku zawierającego kod html:
<script src="telepolis.js" charset="utf-8" ></script>
po zaimportowaniu biblioteki jQuery i jQuery UI.
Natomiast sam skrypt telepolis.js przyjmie postać:
Kod: Zaznacz cały
Jak widać wszystko robi się jeszcze bardziej czytelne. Miłej zabawy życzę JS-towcom.
TELEPOLIS = {
kopia:null,
adres:'http://www.telepolis.pl/rss/news.php',
komunikat_bledu:'<p>Błąd ładowania, przyciśnij przycisk "wstecz"</p>',
flaga_start: true,
wyczysc: function (){$("#pozycje").empty();},
zaladuj: function (){
var self=this;
$.ajax({
url : self.adres,
dataType: 'xml',
beforeSend: function(){$("#powiadomienie").show();},
success: function( dane ){
$("#powiadomienie").hide();
self.wyczysc();
if (self.flaga_start) {$("#tytul").append('<p id="tytul" style="background-color:black;color:white;text-align:center;margin-bottom:-10px;"><b>Telepolis Mobile</b></p><p style="margin-bottom:-10px;" id="odswiez">Odśwież</p>');self.flaga_start=false; }
$( dane ).find( 'item' ).each(function() {
var kod='<div id="newsy">';
var tytul=$( this ).find( 'title' ).text();
kod+='<p style="color:white;background-color:#189425;padding-left:3px;padding-top:3px;padding-bottom:3px;"><b><i>'+tytul+'</i></b></p>';
kod+='<div style="margin-left:7px;padding-left: 5px;border-left:10px solid #0078ae;">';
var czas=$( this ).find( 'pubDate' ).text().substring(17,22);
kod+='<p>Opublikowano: '+czas+"</p>";
var tresc = $( this ).find( 'description' ).text();
kod+='<p style="margin-bottom:0px;">'+tresc+'</p>';
var link =$(this).find('link').text();
kod+='<a id="'+tytul+'" href="'+link+'">Czytaj dalej</a></div></div>';
var $div=$(kod);
$("#pozycje").append($div).append("<hr/>")
});
self.kopia=$("#pozycje").children().clone(true);
$("p#odswiez").button({icons: {secondary: "ui-icon-arrowrefresh-1-e"}});
$("a", pozycje).button();
self.ustawObslugeInterfejsu();
self.linkuj();
},
error : function(dane){$( 'body' ).append(self.komunikat_bledu);}
});
},
ustawObslugeInterfejsu: function(){
var self=this;
$("p#odswiez").live ("click", function (zdarzenie){
if ($(this).text()=="Powrót")
{
$("#pozycje").css({"border-left":"0px", "margin-left":"0px","padding-left":"0px"});
$(this).button({label:"Odśwież",icons: {secondary: "ui-icon-arrowrefresh-1-e"}});
$("p#tytul").text("Telepolis Mobile");
$("#pozycje").empty().append(self.kopia);
$("a", pozycje).button();
}
else if($(this).text()=="Odśwież")
{
self.wyczysc();
self.zaladuj();
}
});
},
linkuj: function() {
$("a", pozycje).live ("click", function(zdarzenie)
{
zdarzenie.preventDefault();
$("#powiadomienie").show();
$("p#odswiez").button({label:"Powrót",icons: {primary: "ui-icon-arrowthick-1-w"}});
$("p#tytul").text($(this).attr('id'));
var link_strony=$(this).attr('href');
var link_gotowy = link_strony+" #intertext1";
$("#pozycje").fadeOut (2000, function(){
$("#pozycje").empty().load (link_gotowy, function()
{
$("#pozycje img").each ( function () {
var adres = $(this).attr("src");
var nowy_adres="http://www.telepolis.pl"+adres;
$(this).attr("src", nowy_adres );
});
$("#pozycje").css({"border-left":"10px solid #0078ae", "margin-left":"7px","padding-left":"5px"}).fadeIn(2000);
$("#powiadomienie").hide();
$("#pozycje a").css({color:"lightblue"}).click(function(){return false;});
});
}
);
});
}
}
$(document).ready(function(){
TELEPOLIS.zaladuj();
});