• Home
  • Учебник по ExtJS
  • О сайте
  •  


    Объектно-ориентированный дизайн ExtJS

    Октябрь 17th, 2008

    Одна из задач, которую ставили себе разработчики библиотеки ExtJS при ее проектировании, была возможность сосуществования с другими JavaScript-библиотеками и фреймворками. Для этого были добавлены удобные методы, помогающие разработчику создавать, наследовать и сопровождать код различных классов. Несмотря на то, что все они были специально созданы для работы с компонентами ExtJS, их можно использовать с любыми объектами JavaScript, в том числе в проектах, не задействующих визуальные компоненты.

    Ext.namespace

    Синтаксис: Ext.namespace( String namespace1, String namespace2, String etc ) : void

    В языке JavaScript пространство имен само является объектом, содержащим список определений других объектов. Правильное использование пространств имен гарантирует, что ваш код не будет конфликтовать с другими библиотеками. Однако, чем больше становится кода в библиотеке, тем глубже иерархия имен и такие классы как Ext.ux.graphing.GraphPanel перестают быть редкостью. В ExtJS существует метод Ext.namespace, который позволяет определить все пространства имен за один вызов, уменьшая не только затраты на поддержку кода, но и сокращая его размер.

    Традиционный код JavaScript, создающий иерархию пространства имен, выглядит следующим образом:

    var Ext = Ext || {}; Ext.ux = Ext.ux || {}; Ext.ux.graphing = Ext.ux.graphing || {}; Ext.ux.soundFx = Ext.ux.soundFx || {}; Ext.ux.maps = Ext.ux.maps || {};

    Того же результата можно достичь вызовом всего одного метода:

    Ext.namespace("Ext.ux.graphing", "Ext.ux.soundFx", "Ext.ux.maps");

    Ext.override

    Синтаксис: Ext.override( Object origclass, Object overrides ) : void

    JavaScript очень гибкий язык, и переопределение метода в нем выполняется простым переназначением его объекта другой функции: Read the rest of this entry »




    HelloWorld: Библиотека ExtJS для новичков

    Сентябрь 27th, 2008

    Это первая статья из цикла уроков по самой интересной и функциональной на сегодняшний день библиотеки виджетов ExtJS. Публикация материала будет проходить от простого к сложному, поэтому к маститым разработчикам просьба: не критиковать за разъяснения очевидных вещей.

    Необходимые инструменты

    Для запуска примера из этого раздела нам не потребуются специальные навороченные среды разработки (типа Eclipse), а будет достаточно современного браузера Firefox с дополнительным пакетом расширения Firebug.

    Если Firefox еще не установлен на вашем компьютере, то пора скачать и установить его. После чего запустите Firefox и введите в адресной строке https://addons.mozilla.org/ru/firefox/search?q=Firebug. Откроется окно:

    Щелкаем по кнопке Добавить в Firefox, расположенной справа от описания необходимого нам дополнения Firebug. Появится дополнительное окно, которое сообщит о намерении установки нового расширения:

    Нажимаем кнопку Установить, после чего произойдет загрузка пакета и его установка в систему. Read the rest of this entry »




    Кроссдоменный прокси на Google App Engine

    Август 12th, 2008

    Большинство браузеров не позволяют Javascript Ajax обращения к другим доменам, поэтому использование Flickr API с Google App Engine весьма затруднено. Описанный ниже код позволяет организовать простой прокси-сервер:

    import cgi
    import urllib
    from google.appengine.ext import webapp
    from google.appengine.api import urlfetch
    
    class FlickrController(webapp.RequestHandler):
    	"""Прокси для Ajax запросов к Flickr"""
    	def get(self):
    		flickrapiendpoint = 'http://api.flickr.com/services/rest/'
    		flickrapikey = 'you_flicker_api_key'
    
    		params = self.request.GET
    		params.add('api_key', flickrapikey)
    		params.add('format', 'json')
    		apiquery = urllib.urlencode(params)
    
    		result = urlfetch.fetch(url=flickrapiendpoint + '?' + apiquery, method=urlfetch.GET)
    		self.response.out.write(result.content)
    
    def main():
    	application = webapp.WSGIApplication(
    		[('/flickr/', FlickrController)],
    		debug=True)
    	wsgiref.handlers.CGIHandler().run(application)
    
    if __name__ == "__main__":
    	main()



    Aptana + PyDev = любовь с App Engine

    Август 10th, 2008

    Существует замечательная статья о настройке среды Eclipse для работы с расширением PyDev и SDK Google App Engine. После настройки этой связки становится очень удобным вести разработку приложений – большинство действий осуществляются в пару кликов.

    Однако это еще не все, на что способна эта замечательная среда разработки. Если вы создаете сложное современное приложение, но наверняка используете на всю мощь язык JavaScript, стили CSS и имеете кучу html со сложной структурой. Эта статья описывает, как можно еще больше облегчить себе жизнь и установить расширения для web-разработки от компании Aptana Studio.

    Начнем сначала, запускаем Eclipse и выбираем в меню Help -> Software Updates -> Find and Install. В появившемся окне щелкаем по пункту Search for new features to install и нажмаем кнопку Next:

    В появившемся окне нажимаем кнопку New remote site и вводим в поле Name – Aptana, а в поле URL: http://update.aptana.com/update/studio/3.2

    В базовом окне установим галочку напротив вновь добавленного компонента Aptana. Ждем кнопку Finish:

    В следующем экране выберем компоненты пакета: Eclipse Integration и Features. Жмем кнопку Next:

    Читаем и принимаем лицензию:

    В завершение нажимаем кнопку Finish:

    Ну и далее нажимаем кнопку Install All:

    Eclipse попросит перезагрузки для того, чтобы все установки вступили в силу. Перезагружаемся, открываем в нашем проекте любой html шаблон и видим прелесть:

    Дополнительно к нашей среде разработки мы получили три интегрированных редактора: HTML, JavaScript, CSS файлов. Плюс на закуску – встроенный отладчик JavaScript и просмотр готовых страниц в соседней вкладке. Так как мы используем сложную генерацию страниц на стороне сервера, нам потребуется создать кастомизированный вид предварительного просмотра приложения. Щелкаем по зеленому плюсу справа от вкладки Default внизу окна редактирования файла и создаем новый вид. Произвольно называем его (допустим, GAE Preview), выбираем опцию Absolute URL и указываем адрес этой страницы, совпадающий в приложении (например http://localhost:9999/results в нашем случае). Нажимаем Save:

    Обратите внимание, что перед предварительным просмотром локальный сервер должен быть запущен (меню Run -> Run). Щелкаем по новой вкладке и наслаждаемся видом приложения:

    Соответственно мы можем одним кликом переключиться во вкладку редактирования HTML, внести исправления, снова щелкнуть по предварительному просмотру и проверить работу (среда сама за нас сохранит изменения!).

    Дополнительные видео-материалы по техникам работы с Aptana Studio находятся на официальном сайте разработчика среды: aptana.tv




    App Engine и шифрование

    Август 5th, 2008

    Оригинал статьи – http://blog.appenginefan.com/2008/04/appengine-and-encryption.html

    Одна из наиболее значимых возможностей, которую просят компанию Google реализовать в первую очередь разработчики в AppEngine – это поддержка шифрования через SSL. Хотя и нет сомнений, что она будет реализована в ближайшее время, хотелось бы изучить варианты того, как можно сделать работу приложения безопаснее в текущей версии. По крайней мере в век Web 2.0 не может быть ничего невозможного.

    Представьте, что мы начинаем разработку с нуля нового приложения. Большая часть данных приложения не требует никакого шифрования (страницы html, логотип компании, стили css…). Давайте предположим, что нас не пугает Javascript и попробуем его задействовать для обмена информацией через XmlHttpRequest. Что мешает нам шифровать все данные, до того, как они будут переданы через сеть? Таким образом необходимо, чтобы и клиент, и сервер выбрали общий метод шифрования данных.

    Необходимые ингредиенты:

    (Я не проводил тестирование этих компонентов, поэтому вам необходимо сделать это самостоятельно).

    Представьте что приложение работает под AppEngine и мы загрузили вместе с его кодом пару публичный/приватный ключ. Ничто не мешает нам сделать следующее:

    • поместить публичный ключ в один из файлов со скриптами Javascript, которые загружаются вместе с приложением. В этом случае, код на Javascript в клиенте может зашифровать данные, отправляемые в сторону сервера.
    • после инициализации, клиент на Javascript создает случайный ключ для шифрования по алгоритму AES. Он шифрует эти данные с использованием публичного ключа сервера и сохраняет их в cookie, отправляемый серверу.
    • мы создаем собственную версию функции XmlHttpRequest, которая будет шифровать все данные с помощью AES до того, как отправлять их в сеть
    • сервер получает зашифрованные данные, извлекает ключ из зашифрованного cookie и использует его для расшифровки данных
    • когда серверу требуется отправить данные обратно, он использует полученный ключ от клиента и зашифровывает им сообщение

    Я не пробовал этот метод в реальной работе, поэтому не имею ни малейшего представления, какое это может оказать влияние на квоты приложения (процедура шифрации/дешифрации на чистом языке Python может отнимать много ресурсов). Также неизвестно, как быстро будет работать AES на строне клиента. Если кто-нибудь, попробовал реализовать эти идеи в жизнь, дайте знать.