""
, ,

FleXcelsius Xplained - Componente OrderBy

, ,

If you have experience with Xcelsius, you may have faced some limitations when using the built in components. Fortunately with the SDK you can extend the capabilities of Xcelsius by developing new components.

Flex y la importancia de ordenar

As the basics of setting up a development environment are already covered quite well in the Everything Xcelsius SDK FAQ blog post, this post will focus on the source code of OrderBy as an example. The resulting component will address one of the general principals of good data visualization: sorting data.

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;
…

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

With this article I have shown the power of FleXcelsius to provide new components that add extra value on top of the standard Xcelsius component portfolio. Feel free to re-use the source code at the end of this article in your projects. And good luck with FleXcelsius! If you have any questions or suggestions, please leave a comment below or email info@clariba.com.

If your company is using SAP BusinessObjects Xcelsius and you or your colleagues need hands-on training, we offer beginner and advanced Xcelsius courses as part of Clariba Education Services.

And if you are looking for other interesting components, we recommend also checking out Centigon Solutions' plugin components for Xcelsius.

Código fuente

OrderBy Component Source Code Add-on Component and Example XLF OrderBy Example Flash SWF

EspañolEnglish