NativeHost: Uruchom aplikację Cappuccino jako aplikację desktopową

Posted on by
Reply

Zespół Cappuccino Framework upublicznił nowe, ekscytujące, narzędzie NativeHost.

Czym jest NativeHost?

Jest to narzędzie umożliwiające uruchomienie aplikacji internetowej napisanej przy użyciu Cappuccino (i nie tylko) jako aplikacji desktopowej. Rozwiązanie polega na wykorzystaniu niesamowicie lekkiego i małego wrappera wokół silnika przeglądarki internetowej WebKit. Rozwiązanie jest zbliżone do istniejących technologii np. Adobe AIR, Titanium, ale na tym podobieństwa się kończą.

Jaka jest różnica NativHost od Titanium, Adobe AIR ?

Titanium i Adobe AIR posiadają własne API umożliwiajce pisanie aplikacji desktowpowych za pomocą technologi webowych ale nie pozwalają przenieść istniejące aplikacji internetowej by działała jako aplikacja natywna. Na tym polega główna różnica pomiędzy w/w technologiami a NativeHost. NativHost umożliwia przeniesienie istniejącej aplikacji webowej na system operacyjny komputera (na chwilę obecną tylko Mac OS X) bez potrzeby modyfikacji aplikacji!

Dodatkowo Cappuccino jest bardzo silnie powiązane z NativeHost dzięki czemu udało się osiągnąć:

  • Główne menu Cappuccino automatycznie staje się natywnym paskiem menu w  Mac OS X. Na innych platformach będzie dokładnie działać tak jak będą oczekiwać tego użytkownicy. Dla przykładu, w Windowsowej wersji NativeHost menu będzie przywiązane do każdego okna.
  • Okno Cappuccino (CPWindow) automatycznie stanie się „natywnym” oknem. W przeglądarce internetowej okna Cappuccino są standardowo rysowane w środku głównego okna przeglądarki. W NativeHost staną się one w pełni systemowymi oknami, które  będzie można minimalizować itp.
  • Bezpieczny dostęp do natywnego systemu plików bez natywnego API: wykorzystanie istniejących metod jak XMLHttpRequest.
  • Architektura dokumentu Cappuccino jest zintegrowana z systemem operacyjnym.
  • Są używane systemowe operacyjne okna otwórz/zapisz.
  • Tak jak każda natywna aplikacja Twoja aplikacja może przypisać się do otwierania specyficznego typu pliku. Kiedy system operacyjny zażąda by Twoja aplikacja otwarła dokument ta informacja jest przekazywana do Cappuccino aby Twoja aplikacja to przechywciła i obsłużyła.

Dlaczego instalować aplikacje webowe na desktopie?

Istnieje kilka przypadków, w których przeniesienie aplikacji internetowej na komputer stacjonarny może mieć sens:

  • Kiedy Twoja aplikacja wymaga dostępu do lokalnego systemu plików lub innego natywnego API nie dostępnego z poziomu przeglądarki internetowej.
  • Kiedy jest wymagane dostęp offline.
  • Kiedy użytkownicy Twojej aplikacji nie ufają jeszcze chmurze (cloud).
  • Kiedy chcesz integracji z systemem operacyjnym np. pasek zadań, dock, przełącznik aplikacji itp.

Przykłady aplikacji wykorzystujących NativHost

Upublicznienie NativHost przyniosło ze sobą kilka działających aplikacji:

  • Atlas – czyli zintegrowane środowisko programistyczne dla Cappuccino Framework, Objective-J zawierające w sobie narzędzie do budowania interfejsu podobne do Xcode.
  • Github Issues – działa w wersji dla przeglądarki ale można go również pobrać jako aplikacje na Mac OS X.
  • CappKiDo – jest to przeglądarka API dokumentacji Cappuccino – i jest tym samym co AppKiDo dla Cocoa!

Zapraszam do oficjalnej informacji na stronie głównej Cappucino.org i do strony projektu na github.com.

Gianduia – konkurencją Cappuccino i SproutCore?

Posted on by
Reply

Na grupie dyskusyjnej Cappuccino Framework został poruszony temat Gianduia – „nowego” produktu od Apple.

W odpowiedzi jeden z użytkowników napisał ciekawy list czym może być Gianduia.
Poniżej przedstawiam polskie tłumaczenie a zainteresowanych całą dyskusją zapraszam do całości wątku.

Witam wszystkich, pierwszy post na liście.
Nie tak dawno byłem programistą WebObjects, więc możliwe że mogę rzucić delikatne światło na to…

Nie byłbym zaskoczony gdyby Gianduia została wypuszczona. Apple całkiem niedawno zatrudniło lead dewelopera na defakto-standard open-source WebObject toolchain (nie wiem jak dokładnie przetłumaczyć, zatem zostawiam oryginał) i większy zestaw otwarto źródłowego frameworku WebObjects (ta sama osoba). Używają WebObjects mocno dla wielu masywnych systemów strategicznych takich jak iTunes Store i Apple Store (online i w handlu detalicznym)… WO wspierają tworzenie interfejsu użytkownika.. połączenie z Cappuccino/SproutCore w zasadniczo nie istnieje, więc nie jest naginane by myśleć że chcą wyprodukować Cappuccino-podobne UI i również ładnie połączone z ich istniejącym kodem.

Widziałem wzmianki o Apple że jest możliwość  użycia Gianduia do iAd i że zdecydowanie jest już w publicznym użyciu przez Apple w sklepie detalicznym rezerwacji iPhona.

Wątpię, że Apple mierzy w Flash – Gianduią, ale jeżeli ludzie chcą tak myśleć to nie wydaje mi się że Apple będzie miało coś przeciwko (dopóki oczywiście jest to tylko framework WebObject  stworzony do działania po stronie klienta zamiast po stronie serwera i że nie jest niczym takim jak Flash).

Rozważając jak długo Apple pracowało nad tym, przypuszczam że jest możliwe iż mogli zdecydować się by pójść w stronę Flash, który w tym samym czasie zaczyna stawać się frameworkiem aplikacji webowych.

Jeżeli chcesz się dowiedzieć czym była Gianduia rok temu możesz kupić wideo WOWODC West 2009. Powiedziano mi że mowa o Gianduii jest częścią tej paczki. Nie widziałem tego więc nie mogę komentować.

Jim

Całość prezentuje tajemniczo.

Ciekawi mnie czy Gianduia może być czymś takim jak GWT? Skoro i WebObjects oparte jest na Javie. Jeśli nie, to po co Apple wypuszczało by kolejny framework…? „ma” już potężny framework SproutCore, na którym zostało oparte me.com.

Pozostaje czekać.. niebawem wszystko będzie jasne czy będzie czymś konkurencyjnym dla Cappuccino i innych frameworków aplikacji webowych.

PS. Jeszcze link do grupy dyskusyjnej Apple:  http://lists.apple.com/archives/Webobjects-dev/2009/Nov/msg00296.html

Raphuccino – Cappuccino + RaphaëlJS

Posted on by
Reply

Raphaël to mała biblioteka JavaScript, której celem jest uproszczenie pracy z grafiką wektorową w sieci. Jeżeli chcesz stworzyć własny wykres, narzędzie do przycinania, obracania grafiki,… możesz to wszystko osiągnąć za pomocą tej biblioteki.

Raphaël uzywa SVG W3C Recommendation  i VML jako podstawe do tworzenia grafik. Oznacza to że każdy obiekt graficzny tworzy również obiekt DOM, zatem można dopiąć do niego zdarzenia JavaScript.

Raphuccino łączy moc i potencjał RaphaëlJS z Objective-J dając Cappuccino Framework wspaniałą bibliotekę do tworzenia grafiki wektorowej.

Cappuccino Framework posiada implementację elementu canvas, jednak w porównaniu do możliwości SVG jest to tylko „prosta” funkcjonalność ;)

Zapraszam do obejrzenia możliwościami Raphuccino.

Wireframes on the fly – czyli Mockingbird z kolaboracją za pomocą Node.js + WebSockets

Posted on by
Reply

Mockingbird – jest świetnym darmowym online’nowym narzędziem do tworzenia szkieletów interfejsów (wireframes). Całość działa z poziomu przeglądarki internetowej (projekt jest napisany w Cappuccino Framework, i rzeczywiście wygląda jak aplikacja okienkowa przeniesiona do internetu!)

Mockingbird, pozwala na wiele form dzielenia się projektami.. niestety jeszcze nie posada możliwości współpracy nad jednym szkicem przez więcej niż jedną osobę ale to ma się zmienić!

Saikat Chakrabarti współzałożyciel Mockingbird opisał na swoim blogu w jaki sposób wykorzystał narzędzia Cappuccino + Node.js + WebSockets i stworzył bardzo proste narzędzie umożliwiające kolaborację.

Efekty pracy można zobaczyć na poniższym filmiku:

Być może w zbliżony sposób ta funkcjonalność zostanie wbudowana w nową odsłonę Mockingbird.

Jakie są plany na przyszłość Cappuccino Framework

Posted on by
Reply

Rozwój SproutCore jest bardzo stymulujące dla zespołu 280North zajmującego się rozwojem Cappuccino Framework i narzędzi mu towarzyszących np. Atlas.

Zespół SC oprócz wydania narzędzia do tworzenia interfejsu graficznego Greenhouse dodał możliwość wykorzystania dobrodziejstw dotykowych ekranów.

Jakie są plany na przyszłość rozwoju Cappuccino Framework?

Lepsza wydajność, a w tym:

  • zmniejszenie rozmiaru frameworka
  • zmniejszenie czasu ładowania aplikacji
  • optymalizacja czasu renderowania jedno milionowej tabeli oraz test jej przewijania
  • wydajność KVO

Mobilność – dostosowanie Cappuccino do aplikacji mobilnych (iPhone, iPad, Android) czyli nowe możliwości touch screen

Lepsze wsparcie dla motywów – wsparcie dla CSS i generalnie prostszy sposób do składania motywów w całość

Zbudowanie pozostałych widżetów Aristo – color picker, stepper view, calendar, tabs, itd…

Dokumentacja – niestety obecna forma nie jest najlepsza. Francisko Tomalsky na konferencji JSConf wspominał że pracują nad nowym narzędziem do dostarczenia dokumentacji.

Bindings support.

TextView – lepsze wpsparcie dla tekstu – niestety w obecnej formie nie jest to tak wygodne.

CoreData/LocalStorage – wykorzystanie możliwości HTML5

Kompleksowe testy.

Dodatkowo cały zespół pracuje nad nowymi narzędziami dla Cappuccino, mają to być min. narzędzia do testowania itp.

Dla zainteresowanych więcej informacji można znaleźć tutaj.

System szablonów, który „sam dba” o aktualizację cache plików CSS i JavaScript

Posted on by
Reply

W dniu dzisiejszym postanowiłem zaimplementować pewną nowa funkcjonalność w systemie szablonów.

Dodana została możliwość sprawdzanie czasu modyfikacji pliku CSS i JavaScript. Czas ostatniej modyfikacji pliku jest teraz doklejany do nazwy pliku jako parametr GET.

Dla przykładu, nazwa pliku przed:

plik.css

i nazwa pliku po:

plik.css?s=123123123

Co dzięki temu zyskałem?

  • jestem zwolniony z ciągłego czyszczenia cache przeglądarki po dokonaniu zmian w plikach CSS lub JavaScript
  • zmiany wizualne i funkcjonalne na stronie są widoczne natychmiastowo po ich wprowadzeniu

Jaki to ma wpływ na wydajność?

Z przeprowadzonych testów wywoływanie funkcji filectime(); w pętli 100 razy trwało ~0.0001. W najgorszym z przypadków w projekcie wykorzystuję 10 plików CSS i 5 JavaScript, w których dokonuje zmian, zatem czas generowania strony wzrośnie niezauważalnie.

Jakie pomysły na przyszłość?

Jako że konfigurację szablonu przechowuję w zewnętrznym pliku konfiguracyjnym, daje mi to możliwość napisanie narzędzia, które będzie łączyć pliki CSS i JavaScript w jeden plik globalny. Zatem czas wczytywania strony WWW (w najgorszym z przypadków)  wzrośnie znacząco :) .

PS. Wiem że mogę w/w czynności mogę wykonywać ręcznie (i teraz tak robię) ale z odpowiednim skryptem jest o wiele szybciej i przyjemniej!

EDIT: Dzięki ^brand zmodyfikowałem testy o wywołanie funkcji clearstatcache() i wydajność delikatnie spadła ale nadal jest to poziom akceptowalny.

Zakladki z innego komutera – Mozilla Weave

Posted on by
Reply

Nadejście „chmury” w internecie.. spowodowało że coraz więcej programów oferuje tzw. zdalna synchronizację danych.

Jednym z takich programów jest Firefox z dodatkiem weave . Korzystam z tego plug-in’u już od ponad roku i teraz instaluje go zaraz po zainstalowaniu „na świeżo” Firefox’a. Dodatek ten umożliwia synchronizacje zakładek, zapamiętanych haseł… itd. Całość jest zaszyfrowana i przechowywane w chmurze.

Niedawno zauważyłem nowy – a niesamowicie przydatny – element,  który się pojawił w tym dodatku a mianowicie „zakladki z innego komutera” (Tabs From Other Commputer). Teraz z komputera biurowego mogę przeglądać otwarte zakładki na komputerze w domu!.. mam tą stronę otwartą na innym komputerze.

Jak dla mnie jest to dodatek który odciążył mnie od „.. jak to szło… coś… .com lub .pl ??” lub „gdzie ja to znalazłem”.

Polecam: Mozilla Weave

Zawijanie tekstu w Zend_Pdf

Posted on by
Reply

W dniu dzisiejszym pracowałem nad generowaniem plików PDF w swojej aplikacji. Wybrałem do tego celu Zend_Pdf dlatego że backend jest oparty na Zend Framework.

Współprace z tą biblioteką mogę ocenić na 4/6. Przyjemnie. Jednak brakuje w niej kilku kluczowych elementów jednym z nich jest możliwość zawijania długiego tekstu. W sposób natywny ZF nie ma zaimplementowanej takiej metody.

Poniżej przedstawiam prostą funkcję, która w szybki i sprawny sposób zawinie (przełamie) przekazany tekst po określonej długości znaków.

/**
* Zawin tekst po określonej długości znaków.
*
* @param Zend_Pdf_Page $page
* @param string $text
* @param int $x
* @param int $y
* @param int $width
* @param string $brake
* @param bool $cut
* @return void
*/
function drawTextWrap($page, $text, $x, $y, $width, $brake = "\n", $cut = true)
{
// przygotuj tekst
$text = wordwrap($text, $width, $brake, $cut);
$token = strtok($text, $brake);

$fontSize = $page->getStyle()->getFontSize();

// rysuje każdą linię tekstu niżej od poprzedniej
// o wysokośc (wielkość) czcionki
while (false !== $token)
{
$y -= $fontSize;

$page->drawText($token, $x, $y);

$token = strtok("\n");
};
}

Jeżeli ktoś pracował z Zend_Pdf to wytłumaczenie jak użyć w/w kawałek kodu jest zbyteczne. Pozdrawiam.

AtMail Open 1.02 w polskiej wersji językowej

Posted on by
2

AtMail Open PL

AtMail Open jest otwarto źródłowym klientem mailowym, działającym w przeglądarce internetowej.

Niestety wersja domyślna nie posiada polskiej wersji językowej – z pomocą przychodzi nam Google.pl.

Po wpisaniu frazy „languages/polish/polish.lang” odnajdujemy polskie tłumaczenie do AtMail wykonane przez:

Polish Language File by Adam Kozubowicz (tapir@interdata.net.php)

Instalacja polskiej wersji językowej do AtMail Open

Przechodzimy do głównego katalogu i wydajemy następujące polecenia w terminalu:

php lang.php polish lang/languages/polish/polish.lang
cd lang/
php mergenew.php

Mamy utworzony nowy język, teraz aby cieszyć się wersją polską należy ją wybrać w ustawieniach konta.

Niestety, nie każdy użytkownik zna język angielski by wykonać tą operację samodzielnie.

Ustawienie  języka polskiego jako język domyślny w AtMail

Ulubionym edytorem tekstu otwórz plik konfiguracyjny:

vim atmail/libs/Atmail/Config.php

Ustaw zmiennej $settings['Language'] wartość ‘polish’ (u mnie linia 328):

Tak jak w przykładzie:

$settings = array (
 'NewWindow' => '0',
 'VlinkColor' => '#000033',
 'PrimaryColor' => '#EBE9E4',
 'Language' => 'polish',
(...)

Teraz domyślnym językiem użytkownika, zaraz po zalogowaniu, jest język polski (chyba że ustawił sobie inny).

Pozostaje jeszcze jeden wątek.

Jak ustawić panel logowania AtMail w wersji polskiej.

Otwórz plik atmail/html/login-light.html w edytorze tekstu i przetłumacz odpowiednie elementy na język polski:

Do sekcji <head> należy jeszcze dodać informację o kodowaniu:

<meta http-equiv="content-type" content="text/html;charset=UTF-8" />

To wszystko. Życzę miłego użytkowania AtMail Open.