Mobile Development Blog: июня 2012

воскресенье, 17 июня 2012 г.

IBM Worklight + Jquery Mobile

В этой статье я расскажу как разрабатывать приложения с использованием ранее установленного IBM Worklight. Установка. для дизайна возьмем Jquery Mobile HTML5 UIFramework. Для того чтобы нам можно было использовать Jquery Mobile необходимо скачать его вот отсюда -> Jquery Mobile.

Создаем Worklight-приложение. После установки Worklight в Eclipse на верхней панели появился значек, на него и нажимаем. Вот как выглядит значек:

Появляется следующее окно, где мы можем выбрать тип нашего будущего проекта. Выбираем hybrid. Называем проект ( В моем случае Worklight Started ). Должно быть вот так:

Нажимаем next. Далее появляется окно в котором мы указываем название нашего приложения.

Мое название Start. Не подключаем при создании никаких библиотек ( это все мы сделаем чуть позже ). Жмем finish - наше приложение создано. Вот картинка:

Теперь нам необходимо скопировать наш скачаный Jquery Mobile в наше приложение. Я создал в папках css и js дополнительно папки jquery.mobile ( опять же для удобства ).
Копируем файл jquery.mobile-1.1.0.min.css и папку images в папку common/css/jquery.mobile.
Файлы jquery-1.7.1.min.js и jquery.mobile-1.1.0.min.js копируем в common/js/jquery.mobile.
После всех копирований струкрута папок в приложении выглядит вот так:

Для подключения и использова jquery mobile нам необходимо открыть файл Start.html и подключить наши файлы.
После подключения файл Start.html будет выглядеть вот так:

 <!DOCTYPE html>            
 <html>  
      <head>  
           <meta charset="utf-8" />  
           <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />  
           <title>Start</title>  
           <link rel="shortcut icon" href="images/favicon.png" />  
           <link rel="apple-touch-icon" href="images/apple-touch-icon.png" />  
           <link rel="stylesheet" href="css/reset.css" />  
           <link rel="stylesheet" href="css/jquery.mobile/jquery.mobile-1.1.0.min.css" />  
           <link rel="stylesheet" href="css/Start.css" />  
      </head>  
      <body onload="WL.Client.init({})" id="content" style="display: none">
  
           <!-- application UI goes here -->  

           <script src="js/jquery.mobile/jquery-1.7.1.min.js"></script>  
           <script src="js/jquery.mobile/jquery.mobile-1.1.0.min.js"></script>  
           <script src="js/Start.js"></script>  
           <script src="js/messages.js"></script>  
           <script src="js/auth.js"></script>  
      </body>  
 </html>

Теперь приступим к написанию наших страниц. Так как мы используем jquery mobile нам нужно сделать следующее:

 <!DOCTYPE html>            
 <html>  
      <head>  
           <meta charset="utf-8" />  
           <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />  
           <title>Start</title>  
           <link rel="shortcut icon" href="images/favicon.png" />  
           <link rel="apple-touch-icon" href="images/apple-touch-icon.png" />  
           <link rel="stylesheet" href="css/reset.css" />  
           <link rel="stylesheet" href="css/jquery.mobile/jquery.mobile-1.1.0.min.css" />  
           <link rel="stylesheet" href="css/Start.css" />  
      </head>  
      <body onload="WL.Client.init({})" id="content" style="display: none">  
           <div data-role="page" id="first">  
                <div data-role="header">  
                     <h1>Header</h1>  
                </div>  
                <div data-role="content">  
                     Start  
                </div>  
                <div data-role="footer">  
                     <h1>Footer</h1>  
                </div>  
           </div>  
           <!-- application UI goes here -->  
           <script src="js/jquery.mobile/jquery-1.7.1.min.js"></script>  
           <script src="js/jquery.mobile/jquery.mobile-1.1.0.min.js"></script>  
           <script src="js/Start.js"></script>  
           <script src="js/messages.js"></script>  
           <script src="js/auth.js"></script>  
      </body>  
 </html>

Для того чтобы у нас footer был footer-ом и располагался внизу страницы необходимо в файле Start.css дописать вот такие строки:

 //...

 [data-role=page] {  
      height: 100% !important;  
      position: relative !important;  
 }  
 [data-role=footer] {  
      bottom: 0;  
      position: absolute !important;  
      top: auto !important;  
      width: 100%;  
 }

//...

Выглядит все это вот так:

Теперь добавим на нашу страницу кнопку и добавим страницу на которую мы будем переходить.

Наш файл Start.html теперь будет выглядеть вот так:

 //...
<body onload="WL.Client.init({})" id="content" style="display: none">  
      <div data-role="page" id="first">  
           <div data-role="header">  
              <h1>Header</h1>  
           </div>  
           <div data-role="content">  
                Start  
                <a href="#second" data-role="button">Second Page</a>  
           </div>  
           <div data-role="footer">  
                <h1>Footer</h1>  
           </div>  
      </div>  
      <div data-role="page" id="second">  
           <div data-role="header">  
                <h1>Header</h1>  
           </div>  
           <div data-role="content"> 
                Second Page   
                <a href="#first" data-role="button" data-revers="true">First Page</a>
           </div>  
      </div>  
      // ...  
 </body>









Теперь создадим Android и iPhone приложения в Worklight. Для этого нажимаем правой кнопкой мыши на проекте и выбираем New->Worklight Environment.

Вот как выглядит:












В появившемся окне выбираем Android, iPhone Environment. Выглядит окно вот так:









Жмем finish. Все наши приложения для Android и iPhone созданы.

Структура приложения теперь стала вот такой:









Для проверки нашего приложения на Android эмуляторе нам нужно сначала собрать наше приложение. Для этого нажимаем првой кнопкой мыши по папке Start->Run As->Build All and Deploy. После того как все соберется мы можем проверить приложение на Android эмуляторе. Вот куда нужно нажать для "билда" приложения:












Для запуске на Android нужно нажать правой кнопкой мыши по папке Worklight SartedStartAndroid->Run As-> Android Application.


Вот так приложение будет выглядеть на Android:

На iPhone выглядит вот так:

Вот пожалуй и все, что я хотел в этой статье показать и рассказать о написании приложений с использованием Worklight.

IBM Worklight. Установка.

Очень популярно в нынешнее время cоздание кроссплатформенных приложений для мобильных телефонов ( Android/iPhone/BlackBerry ).
В этой статье рассказу об одной из многих возможностей разработки таких приложений. Речь пойдет о IBM Worklight ( Mobile Application Platform and Tools).
Эта платформа представляет из себя Worklight Server и Worklight Studio ( плагин для Eclipse ). На данный момент нам необходимо установить только плагин для eclipse. Версия Worklight 5.

Теперь непосредственно об установке Worklight.
Для того чтобы разрабатывать приложение с помощью Worklight нам нужно установить плагин в Eclipse. Для этого переходим в Help->Install New Software. Нажимаем Add и ставляем вот такие строчки для нашего плагина:

Name: IBM Worklight Studio
Location: http://public.dhe.ibm.com/ibmdl/export/pub/software/mobile-solutions/worklight/wdeupdate/

Жмем ок. Далее выбираем IBM Worklight Studio Development Tools, нажимаем ок и ждем пока установится. Перезагружаем Eclipse. Вот теперь мы можем разрабатывать Worklight-приложения.
Вот что нам нужно выбрать при установке:

Worklight предоставляет возможноть создавать приложения для Android, iPad, iPhone, BlackBerry, Windows Phone и ешё некоторый тип приложений ( посмотрите сами ).

Более подробную информацию о Worklight можете посмотреть вот здесь -> Worklight Mobile Platform

суббота, 16 июня 2012 г.

iPad / iPhone. Анимированные переходы между окнами.

Думаю пора немного рассказать о второй ОС под которую я пишу. Сегодня речь пойдет об iOS.
В сравнение к статье про Android. Анимированный переходы между окнами. хочу рассказать о том как это все делается на iPad / iPhone.

Пожалуй начнем.

Для начала создадим проект, теперь уже в Xcode. Назовем его iPhoneTransition.
Заходим в Xcode ( Create new xcode project -> Empty Application ( жмем next ) -> называем наше приложение ( next ) -> выбираем куда сохранить проект -> Create ). Все, наше приложение создано.
Теперь о написанном в картинках :

Создаем новое приложение:

Называем приложение:

Созданное приложение выглядит вот так:

Теперь пожалуй начнем создавать наше приложение.
Для начала создадим папки Controllers и Resources. ( можно и не создавать. я делаю для удобства ).
Теперь структура приложения будет выглядеть вот так:

Теперь добавляем контроллер с xib файлом. Для этого нам нужно на папке controllers нажать правой кнопкой мыши и выбрать New File -> Objective-c class. Далее жмем next называем наш класс ( в моём случае MainViewController ). Жмем next, выбираем куда сохранить наш файл и create.

Покажу пару картинок для наглядности.

Выбираем наш Objective-c class.

Называем наш класс.

Проделаем операцию по созданию контроллера ещё раз для SecondViewController ( надо же куда-то переходить с MainViewController ).

Xib-файлы я положил в ранее созданную папку Resources.

После того как сохранили и переместили все файлы как нам нравится ( структура такая как нравится мне ) структура приложения будет выглядеть вот так:

Теперь приступим непосредственно к созданию наших переходов.
Для начала набросаем пару кнопок в MainViewController.xib файл. Для этого нажимаем на наш MainViewController.xib файл он откроется в Interface Builder-e. Перетаскиваем кнопки на панель.
Должно получиться приблизительно вот так:

Теперь повесим на копку обрабоку нажатия. Для этого в верхнем право углу нажимаем кнопку show the assistant editor. Вот как она выглядит на экране:

Получаем экран разделенный на две части справа .h файл слева .xib. для того чтобы подключить нажатие на кнопку к определенному методу нам нужно нажать на кнопке право кнопкой мыши и перетащить в наш .h файл. Вот так как на картинке:

В появившемся окне выбираем Connection : Action, даем название нашему методу ( в моем случае btnTransitionPressed ). Потом нажимаем Connect. Вот как выглядит окошко:

Ну все, в этом примере нам больше ничего подключать не надо будет.
Только ещё установим tag для каждой кнопки которую мы создали, это нам понадобиться позже. Для этого нам необходимо выделить кнопку и нажать Show the attributes inspector. В атрибутах найти поле tag и выставить для каждой кнопки по возрастанию от 0 значения. Вот где это находится:

Вот теперь мы сделали все для того чтобы приступить к написанию наших переходов.
Для начала сделаем так чтобы наш MainViewController запускался при старте приложения и нам отображались наши кнопки для переходов. Для этого нам нужно изменить наш TransitionAppDelegate.h и TransitionAppDelegate.m файлы. Начнем с TransitionAppDelegate.h

Вот так будет выглядеть наш файл после изменений:

TransitionAppDelegate.h

 #import <UIKit/UIKit.h> 
 
 @interface TransitionAppDelegate : UIResponder <UIApplicationDelegate> 
 
 @property (strong, nonatomic) UIWindow *window;  
 @property (strong, nonatomic) UINavigationController *navigationViewController; // Добавляем вот эту строку
 
 @end

Теперь изменим TransitionAppDelegate.m. Вот так будет выглядеть файл после изменений:

TransitionAppDelegate.m

 #import "TransitionAppDelegate.h"  
 #import "MainViewController.h" 
 
 @implementation TransitionAppDelegate  

 @synthesize window = _window;  
 @synthesize navigationViewController = _navigationViewController;
  
 - (void)dealloc {  
   [_window release];  
   [_navigationViewController release];  
   [super dealloc];  
 }  

 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {  
   self.window = [[[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]] autorelease]; 

   // Устанавливаем MainViewController как основное окно которое будет запускаться при старте приложения  
   UIViewController *rootController = [[MainViewController alloc] init];  
   _navigationViewController = [[UINavigationController alloc] initWithRootViewController:rootController];  
   self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];  
   [self.window addSubview:_navigationViewController.view];  
   [rootController release]; 

   [self.window makeKeyAndVisible];  
    
   return YES;  
 }  

 - (void)applicationWillResignActive:(UIApplication *)application {}  
 - (void)applicationDidEnterBackground:(UIApplication *)application {}  
 - (void)applicationWillEnterForeground:(UIApplication *)application {}  
 - (void)applicationDidBecomeActive:(UIApplication *)application {}  
 - (void)applicationWillTerminate:(UIApplication *)application {}  

 @end

Теперь запускаем наше приложение и должно появиться наше окно с кнопками.
Далее изменим наши MainViewController.h и MainViewController.m файлы.
MainViewController.h будет выглядеть вот так:

MainViewController.h

 #import <UIKit/UIKit.h>  

 @interface MainViewController : UIViewController 
 
 - (IBAction)btnTransitionPressed:(id)sender;  

 @end

Изменим MainViewController.m. Вот так будет выглядеть после изменений наш файл.

MainViewController.m

 #import "MainViewController.h"  
 #import "SecondViewController.h"  

 @interface MainViewController () 

// Создаем несколько private методов для разного типа переходов
 - (void)slideTransition;  
 - (void)flipTransition;  
 - (void)curlDownTransition;  

 @end  

 @implementation MainViewController  

 - (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil {  
   self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];  
   if (self) {  
     // Custom initialization  
   }  
   return self;  
 }  

 - (void)viewDidLoad {  
   [super viewDidLoad];  
 }  

 - (void)viewDidUnload {  
   [super viewDidUnload];  
 }  

 - (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation {  
   return (interfaceOrientation == UIInterfaceOrientationPortrait);  
 }  

 - (void)dealloc {  
   [super dealloc];  
 }  

 - (IBAction)btnTransitionPressed:(id)sender {  

// [sender tag] - даст нам tag нажатой кнопки
// Смотрим какая кнопка нажата и выбираем тот тип перехода что нам нужно
   switch ([sender tag]) {  
     case 0:  
       [self slideTransition];  
       break;  
     case 1:  
       [self flipTransition];  
       break;  
     case 2:  
       [self curlDownTransition];  
       break;  
   }  
 }  

 // Написаны непосредственно сами переходы  
 - (void) flipTransition {  
   [UIView beginAnimations:nil context:nil];  
   [UIView setAnimationDuration:1.0];  
   [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];  
   [UIView setAnimationTransition:UIViewAnimationTransitionFlipFromRight   
                          forView:self.navigationController.view   
                            cache:NO];  
   SecondViewController *temp = [[SecondViewController alloc] initWithTransitionType: @"Flip"];  
   [self.navigationController pushViewController:temp animated:YES];  
   [UIView commitAnimations];  
   [temp release];  
 }  

 - (void) slideTransition {  
    SecondViewController *temp = [[SecondViewController alloc] initWithTransitionType: @"Slide"];  
   [self.navigationController pushViewController: temp animated:YES];  
   [temp release];  
 }  

 - (void) curlDownTransition {  
   [UIView beginAnimations:nil context:nil];  
   [UIView setAnimationTransition:UIViewAnimationTransitionCurlDown   
                          forView:self.view.window   
                            cache:NO];  
   [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];  
   [UIView setAnimationDuration:1.0];  
   [UIView commitAnimations];  
   SecondViewController *temp = [[SecondViewController alloc] initWithTransitionType: @"Curl"];  
   [self.navigationController pushViewController:temp animated:YES];  
   [temp release];  
 }  

 @end

Теперь приступим к изменениям наших файлов SecondViewController.h и SecondViewController.m которые отвечают за окно в которое мы будем переходить из нашего главного окна.
Изменяем SecondViewController.h вот так:

SecondViewController.h

 #import <UIKit/UIKit.h>  

 @interface SecondViewController : UIViewController  

 @property (strong, nonatomic) NSString *transitionType;  

// Объявляем новый init метод. Он нам необходим чтобы передавать тип перехода по которому мы пришли в SecondViewController
 -(id)initWithTransitionType:(NSString *)transitionType;  

 @end

Теперь изменяем SecondViewController.m. Вот как он будет выглядеть после изменений.

SecondViewController.m

 #import "SecondViewController.h" 
 
 @interface SecondViewController () 

// Метод нужен для возврата по анимации в MainViewController
 - (void)backTransitionType;

 @end  

 @implementation SecondViewController  

 @synthesize transitionType = _transitionType;  

 - (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil {  
   self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];  
   if (self) {  
     // Custom initialization  
   }  
   return self;  
 }  

// Наш новый init метод
 - (id) initWithTransitionType:(NSString *)transitionType {  
   if((self = [super init])) {  
     // Инициализируем transitionType. Устанавливаем тип перехода по которому пришли 
     self.transitionType = transitionType;  
   }    
   return self;  
 }  

 - (void)viewDidLoad {  
   [super viewDidLoad];  
 }  

 - (void)viewDidUnload {  
   [self setTransitionType:nil];  
   [super viewDidUnload];  
 }  

 - (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation {  
   return (interfaceOrientation == UIInterfaceOrientationPortrait);  
 }  

 - (void)dealloc {  
   [_transitionType release];  
   [super dealloc];  
 }  

// В данном примере метод будет отвечать за нажатие по кнопке back в UINavigationController
 -(void) viewWillDisappear:(BOOL)animated {  
   if ([self.navigationController.viewControllers indexOfObject:self] == NSNotFound) {  
     [self backTransitionType];  
   }  
   [super viewWillDisappear:animated];  
 }  

// Здесь создаем наши обратные переходы в MainViewController в зависимости от того каким переходом мы пришли.
 - (void)backTransitionType {  
   if (_transitionType == @"Flip") {  
     [UIView beginAnimations:nil context:nil];  
     [UIView setAnimationDuration:1.0];  
     [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];  
     [UIView setAnimationTransition:UIViewAnimationTransitionFlipFromLeft  
                            forView:self.navigationController.view   
                              cache:NO];  
     [UIView commitAnimations];  
   } else if (_transitionType == @"Curl") {  
     [UIView beginAnimations:nil context:nil];  
     [UIView setAnimationTransition:UIViewAnimationTransitionCurlUp  
                            forView:self.view.window   
                              cache:NO];  
     [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];  
     [UIView setAnimationDuration:1.0];  
     [UIView commitAnimations];  
   }  
 }  

 @end

Ну вот и весь код, который нам надо написать для того чтобы посмотреть на 3 типа анимации переходов между окнами для iPhone-приложения.
Надеюсь статья полезна и помогла кому-нибудь сделать в своем приложении анимацию переходов между окнами. :)
Спасибо за внимание и не забывайте кликать like, +1 мне это очень важно.
Принимаются советы и пожелания по поводу будущих и написанных статей.
Результаты в картинках:

Slide Transition

Flip Transition

Curl Transition

воскресенье, 17 июня 2012 г.

IBM Worklight + Jquery Mobile

IBM Worklight. Установка.

суббота, 16 июня 2012 г.

iPad / iPhone. Анимированные переходы между окнами.

воскресенье, 17 июня 2012 г.

суббота, 16 июня 2012 г.