""
, ,

FleXcelsius Xplained - Componente OrderBy

, ,

Si tiene experiencia con Xcelsius, es posible que haya enfrentado algunas limitaciones al usar los componentes integrados. Afortunadamente con el SDK Puede ampliar las capacidades de Xcelsius desarrollando nuevos componentes.

Flex y la importancia de ordenar

Como los principios básicos para configurar un entorno de desarrollo ya están cubiertos bastante bien en Everything Xcelsius SDK Preguntas más frecuentes publicación de blog, esta publicación se centrará en el código fuente de   OrderBy como ejemplo. El componente resultante abordará uno de los principios generales de una buena visualización de datos: ordenar datos .

Mostrar datos sin procesar en orden aleatorio o incluso en orden alfabético obliga al usuario a ordenar los valores por sí mismo. En la mayoría de los casos, aparte de una serie temporal, el usuario estará interesado en el orden de los elementos por valor y en la localización de los altibajos. El pedido debe ser uno de los primeros pasos para "convertir datos sin procesar en información fácilmente accesible".

La última versión, Xcelsius 2008 SP3, llenó un viejo vacío de clasificación de gráficos básicos, y como verá más adelante, tengo un componente para los casos más complejos que no están cubiertos por esta última versión. Además, comprender el componente OrderBy lo ayudará a crear su propio componente para que pueda resolver sus desafíos específicos.

Requisitos y generalidades sobre componentes.

La especificación para el componente OrderBy es manejar el orden alfabético / numérico ascendente / descendente de una matriz, basado en una columna especificada.

Entradas: - matriz fuente - columna para ordenar - dirección de clasificación

Salida: - matriz ordenada

Hay dos partes principales de un componente de Xcelsius: el componente secundario real y una hoja de propiedades que contiene su configuración. Las propiedades del componente secundario se pueden codificar directamente en la hoja de propiedades (es decir, color) o establecer dinámicamente, vinculando su valor a los valores contenidos en una hoja de Excel (es decir, fuente o visibilidad). Este último brinda más flexibilidad, ya que las propiedades (es decir, una etiqueta vinculada a un valor de celda) cambiarán automáticamente durante el tiempo de ejecución dependiendo de la interacción del usuario. En Xcelsius prefiero flexibilidad sobre simplicidad.

El diseño de la solución en cinco pasos.

Paso 1: enlace

Entonces, veamos cómo vincular una región de nuestro Excel a la propiedad de origen del componente hijo. A continuación enumeré las partes importantes de la encuadernación.

Componente secundario (OrderByOrderBycomclaribacontrolsOrderBy.as):

// Important for bound arrays! This allows detecting if the
array changed.
[CxInspectableList("source")]
…
private var _source:Array = new Array();
private var _sourceChanged:Boolean = true;
…
//----------------------------------
//  source Property
//----------------------------------
[Inspectable(defaultValue="undefined", type="Array")]
public function get source():Array
{
      return _source;
}

public function set source(value:Array):void
{
      _source = value;
      _sourceChanged = true; // Changing the source array.
      invalidateProperties();
}

Hoja de propiedades (OrderByOrderByPropertySheetOrderByPropertySheet.mxml):

applicationComplete="init();"
…
protected function init():void
{
      // Sets the callback to the "continueBind" method when the
user is picking a cell to bind to.   
      proxy.addCallback(PropertySheetFunctionNamesSDK.RESPONSE_
BINDING_ID, this.continueBind);

      // Notify Xcelsius that we have finished loading this
      Property Sheet.
      proxy.callContainer(PropertySheetFunctionNamesSDK.
      INIT_COMPLETE_FUNCTION); initValues();
}
…
var propertyValues:Array = proxy.getProperties(["source", "target",
"columnToSort", "directionOfSort"]);
…
case "source":
      bindingText = getPropertyBindDisplayName(propertyName);
      if (bindingText != null)
      {
      sourceTextBox.enabled = false;// When bound the user
      cannot edit the value.
      sourceTextBox.text = bindingText;// Show the address we
      bound to. 
      }
break;
…
case "source":
      if ((bindingID == null) || (bindingID == ""))
      {
            sourceTextBox.enabled = true;
            propertyValues = proxy.getProperties([propertyName]);
            propertyObject = propertyValues[0];
            sourceTextBox.text = String(propertyObject.value);
            proxy.setProperty(propertyName, propertyObject.value);
            return;
      }
      sourceTextBox.enabled = false;
      sourceTextBox.text = proxy.getBindingDisplayName(bindingID);
      proxy.bind("source", null, bindingID, BindingDirection.OUTPUT,
"", OutputBindings.ARRAY2D);      
break;
…
<mx:Button y="32" right="25"  width="24" click="initiateBind
('source');"icon="@Embed('resources/bind to cell.png')"
id="sourceBindButton"/>

Paso 2: definir en qué columna ordenar la matriz

A diferencia del tipo Xcelsius integrado, preferiría que esto sea dinámico y esté vinculado a una celda en Excel. Si la numeración de la columna comienza en 1, esto nos ayudará a la hora de integrarnos con un botón de opción o un selector desplegable, ya que podremos elegir el tipo de inserción "Posición" en el selector, que también comenzará en 1. Las únicas diferencias (en comparación con la propiedad fuente explicada en el Paso 1) son convertir como un Número y vincular como un Singleton. Vea las diferencias a continuación:

Hoja de propiedades (OrderByOrderByPropertySheetOrderByPropertySheet.mxml):

proxy.setProperty(propertyName, Number(propertyObject.value));
…
proxy.bind("columnToSort", null, bindingID, BindingDirection.OUTPUT,
"", OutputBindings.SINGLETON);

Paso 3: configuración de la dirección del enlace de clasificación

Del mismo modo, debemos establecer la dirección de clasificación de enlace a una celda con posibles valores de 1 (ascendente) y 2 (descendente). Después de esto, enlace también la matriz de salida.

Paso 4: Encontrar una función de clasificación integrada y aplicarla

Después de todos estos enlaces, la parte Flex específica de Xcelsius ha terminado. El resto es puro Flex. Todo lo que tenemos que hacer es encontrar una función de clasificación integrada y aplicarla a nuestra matriz fuente. Lo bueno es que el tipo de variable ArrayCollection en Flex tiene una función Ordenar, pero también tiene un efecto secundario: el tipo de variable ArrayCollection no es flexible con respecto al número de columnas; porque cada columna debe tener su nombre de columna predefinido.

La solución es usar una matriz horizontal dentro de una variable ArrayCollection. Nuestra variable ArrayCollection consistirá principalmente en dos columnas (es decir, objetos):

  1. Los valores de la columna que estamos ordenando (valores copiados de la matriz original)

  2. Las filas (vectores) de nuestra matriz original.

Clase auxiliar de componentes (OrderByOrderBycomclaribautilsRowObject.as):

package com.clariba.utils
{ 
      [Bindable]
      public class RowObject
      {
            public var sortColumnStringType:String; 
            public var sortColumnNumberType:Number; 
            public var sourceArrayRow:Array;
      }
}

Componente secundario (OrderByOrderBycomclaribacontrolsOrderBy.as):

public function createArrayCollection(s:Array):ArrayCollection
      
         
     

Paso 5: poblar la matriz de destino

Después de realizar la operación de ordenación en una variable ArrayCollection utilizando la función sortArrayCollection, necesitamos completar nuestra matriz de destino con la función convertToArray. La acción final es ejecutar el ordenamiento si alguna de las propiedades cambia.

Componente secundario (OrderByOrderBycomclaribacontrolsOrderBy.as):

override protected function commitProperties():void
{
      super.commitProperties();

      if (_sourceChanged || _columnToSortChanged ||
      _directionOfSortChanged)
      {
            // source -> createArrayCollection ->
            sortArrayCollection -> convertToArray -> target
            if (_directionOfSort == 1)
            {
                  descendingSort = false;
                  }
                  else
                  {
                        descendingSort = true;
                  }

                  this.target = convertToArray
(sortArrayCollection createArrayCollection(_source)));

                  _sourceChanged          = false;
                  _columnToSortChanged    = false;
                  _directionOfSortChanged = false;
                        }

                        invalidateDisplayList();
                  }

Conclusión

Con este artículo, he demostrado el poder de FleXcelsius para proporcionar nuevos componentes que agregan valor adicional a la cartera de componentes estándar de Xcelsius. Siéntase libre de reutilizar el código fuente al final de este artículo en sus proyectos. ¡Y buena suerte con FleXcelsius! Si tiene alguna pregunta o sugerencia, deje un comentario a continuación o envíe un correo electrónico info@clariba.com .

Si su empresa está utilizando SAP BusinessObjects Xcelsius y usted o sus colegas necesitan capacitación práctica, ofrecemos cursos para principiantes y avanzados de Xcelsius como parte de Servicios de educación de Clariba .

Y si está buscando otros componentes interesantes, le recomendamos que también consulte Soluciones Centigon 'componentes del complemento para Xcelsius.

Código fuente

Código fuente del componente OrderBy Componente adicional y ejemplo XLF OrderBy Ejemplo SWF Flash

EspañolEnglish