• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Архитектура минимальных Ui компонент
 

Архитектура минимальных Ui компонент

on

  • 1,811 views

Докладчик - Виталий Хить

Докладчик - Виталий Хить

Statistics

Views

Total Views
1,811
Views on SlideShare
1,630
Embed Views
181

Actions

Likes
0
Downloads
7
Comments
0

5 Embeds 181

http://fpug.org.ua 126
http://flash-ripper.com 46
http://www.fpug.org.ua 4
http://www.slideshare.net 4
http://webcache.googleusercontent.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Архитектура минимальных Ui компонент Архитектура минимальных Ui компонент Presentation Transcript

    • Архитектура минимальных UI компонент
      Виталий Хить (well)
    • Зачем это нужно?
      Виджеты
      Примеры кода
      Собственное обучение
    • Готовые компоненты
      Flex
      Flash
      Minimal Components (bit-101.com)
    • Flex
    • Flash
    • Minimal components
    • Minimal Components
    • Структура компонента
      Менеджер
      Менеджер
    • Менеджер клавиатуры
    • Менеджер отображения (СТИЛИ)
    • Структура Класса компонента
    • UIComponent extends Sprite / MovieClip
    • UIComponentсвойства
      Координаты
      Размеры
      Состояния
      Visible
      Enabled
      Мышка (up, over, down)
      Значения
      Стили
      Стили экземпляра компонента
      Глобальные стили (класс, глобальные)
    • Uicomponent cтруктура менеджера свойств
    • МЕНЕДЖЕР СВОЙСТВ
      static public const ISIZE :uint = 0x01;
      static public const ISTYLE :uint = 0x02;
      …….
      protected varinvalidHash :uint;
      …….
      public function invalidate(property: uint = InvalidationType.ALL, callLater :Boolean = true):void {
      invalidHash |= property;
      if (!_inCallLater) {
      addEventListener(Event.ENTER_FRAME, callLaterDispatcher,false,0,true);
      _inCallLater = true;
      }
      }
      protected function validate():void {
      invalidHash = 0;
      _inCallLater = false;
      }
      private function callLaterDispatcher(event:Event):void {
      removeEventListener(Event.ENTER_FRAME,callLaterDispatcher);
      draw();
      }
      protected function draw() :void {
      if (isValid(ISTYLE | ISIZE)) { ... }
      validate();
      }
    • UICOMPONENT Ограничивающий прямоугольник
      x, y -> _x, _y, move()
      width, height -> _width, _height, setSize()
      scaleX, scaleY
    • UIComponentСтиликласса
      static private const defaultStyles:Object= {
      color :0xffffff,
      defaultLabel : “Label”,
      disabledSkin : “Label_DisabledSkin”
      };
      public static function getStyleDefinition():Object {
      return defaultStyles;
      }
    • UIComponentменеджер стилей
      protected varinstanceStyles:Object;
      protected function getStyleValue(name:String):Object {
      return (instanceStyles[name] == null) ? StyleManager.getStyleValue(name, _classDef) : instanceStyles[name];
      }
      protected function getDisplayObjectInstance(skin:Object):DisplayObject {
      varclassDef:Object = null;
      if (skin is Class) {
      return (new skin()) as DisplayObject;
      } else if (skin is DisplayObject) {
      (skin as DisplayObject).x = 0;
      (skin as DisplayObject).y = 0;
      return skin as DisplayObject;
      }
      try {
      classDef = getDefinitionByName(skin.toString());
      } catch(e:Error) {
      try {
      classDef = loaderInfo.applicationDomain.getDefinition(skin.toString()) as Object;
      } catch (e:Error) {
      // Nothing
      }
      }
      if (classDef == null) {
      return null;
      }
      return (new classDef()) as DisplayObject;
      }
    • МЕНЕДЖЕР Стилей
      private static var _instances :Dictionary = new Dictionary(true);
      private static var _styles :Dictionary = new Dictionary(true);
      public static function getStyleValue(name :String, classDef :Class = null) :Object
      {
      var style :Object = _styles[classDef];
      return (style && style[name]) ? style[name] : _styles[null][name];
      }
      public static function setStyle(name :String, value :Object, classDef :Class = null) :void
      {
      if (!_styles[classDef]) _styles[classDef] = {};
      _styles[classDef][name] = value;
      if (classDef) invalidateStyle(classDef);
      else for (varobj :* in _instances) invalidateStyle(obj == 'null' ? null : obj);
      }
    • МЕНЕДЖЕР Стилей
      public static function registerInstance(instance :UIComponent) :void
      {
      varclassDef :Class = getClassDef(instance);
      if (!classDef) return;
      if (!_instances[classDef]) _instances[classDef] = new Dictionary(true);
      _instances[classDef][instance] = true;
      if (_styles[classDef]) return;
      var target :Class = classDef;
      vardefaultStyles :Object = null;
      while (!defaultStyles) {
      if (target["getStyleDefinition"]) { defaultStyles = target["getStyleDefinition"](); break; }
      try { target = instance.loaderInfo.applicationDomain.getDefinition(getQualifiedSuperclassName(target)) as Class; }
      catch(err :Error) {
      try { target = getDefinitionByName(getQualifiedSuperclassName(target)) as Class; }
      catch (e:Error) { defaultStyles = UIComponent.getStyleDefinition(); break; }
      }
      }
      _styles[classDef] = defaultStyles;
      if (!_styles[null]) _styles[null] = UIComponent.getStyleDefinition();
      }
    • СКИНЫ
    • [Embed…
      public class fl.controls.Button extends UIComponent {
      [Embed (source='../skin/skin.swf', symbol='Button_disabledSkin')]
      static private vardisabledSkin :Class;
      public class fl.controls.Button_disabledSkin extends SpriteAsset
      private static vardefaultStyles:Object = {
      disabledSkin:"fl.controls::Button_disabledSkin",
    • Чистка Flash компонентов
      Удалить acsessibilityсоставляющую
      Удалить FocusManagerи сопутствующие классы
      Упростить Style Manager
      Удалить из UIComponent
      Связь с фокус менеджером
      Связь со средой разработки Flash
      (?) Изменение scale составляющей
      Исправить ошибки в дочерних классах
      Изменить названия скинов (если используется flex)