Scrollable Flex Charts

clock October 28, 2013 02:01 by author Flexicious

A number of our customers have asked this question, so it might be something that you would like to add to your charts. As most of you are aware, the Flexicious Dashboard Charts are completely Skinnable. They inherit from SkinnableComponent, thereby coming with all the skinning goodness from Flex. One of the biggest advantages of this is that you can easily go into the skin and put a scroller around the chart area, while keeping the vertical axis out of the scroller, there by locking it in place. This example demonstrates the beauty of the Spark framework, where by with no changes to the actual code of the component, you can implement a feature which would have taken an unhealthy amount of code (and caffiene) in the old MX world. No wonder a number of our customers are switching to the new Flexicious Spark Charts. 

Below is the screenshot and the code associated. 

 

 

ScrollableCharts.mxml (3.25 kb)

 

ScrollableChartSkin.mxml (3.44 kb)



Scrollbar Configuration for Dashboard

clock October 21, 2013 02:47 by author Flexicious

The dashboard framework is an extremenly versatile platform to build dashboard applications. When we built it, we could not build a one size fits all layout, because every application has a different way of laying out its pods. If you look through the various demos, we show how to configure the dashboard to use a number of different layout algorithms. Here is a PDF document that discusses the various layout mechanisms built into the samples.. At the very base, you have a Dashboard Container, which contains one or more Drag Drop Zones. Each zone in turn contains Dashlets, which are basically shells that hold your dashlet item renderers and decorate them with the various functional elements provided by the dashlet parent, like drag drop, maximize/minimize, collapse/expand, move to and restore from task bar, and resize. All of these are configureable, and give you a lot of flexibility in how you want your dashlets laid out.

However, with such high level of flexibility, there is no easy way to build in global scrolling that works consistently across all different layout mechanisms. The current architecture allows you to scroll at any level - For the entire dashboard, within drag drop zones, within dashlets themselves, or any combination of the above. In this blog post, we are going to cover a small customization to the default skin that enables vertical scrolling on the top level dashboard container.

To do this, the first thing we do is define a custom skin. This is as easy as typing skinClas=" on your dashboard container and Flex Builder does the rest. It creates a new skin based on a copy of the default built in skin. So you should have something like this:

    <dashboard:DashboardContainer id="dashboardZones" ...           skinClass="MyDashboardSkin">

In MyDashboardSkin, all we do is wrap the content group inside a scroller. It is important to hide the scroller when the maximized content group is shown, so we bind the visible and includeInLayout flags to disable the scroll in maximize mode.

<s:Scroller width="100%" height="100%" includeInLayout="{contentGroup.visible}" visible="{contentGroup.visible}">
                <s:viewport>
                    <s:Group id="contentGroup"  minWidth="0" minHeight="0">
                    </s:Group>
                </s:viewport>
</s:Scroller>

The other thing to keep in mind is that we need to eliminate the forced heights for the dashlet. Since we have a scrollbar, percentage based heights for the dashlets no longer make sense, because we have infinite space to render vertically. Once this done, you should see something similar to the below. Code is included after the screenshot. Enjoy!

WorkbasketDashboard.mxml (3.38 kb)

MyDashboardSkin.mxml (12.48 kb)



New Components Coming - Flex Calendar/Treemap, Android DataGrid and IOS DataGrid

clock October 1, 2013 03:02 by author Flexicious

Usually, we're a less talk more results kinda company. We add a massive set of features, or completely new components and then announce them to the world. We're taking a little bit of a different approach here, in the interest of involving customers sooner rather than later. So we would like to announce that we are now in the process finalizing the release of Flexicious 3.1 with exciting new components - Flex TreeMap as well as the Flex Calendar/Scheduler AND are wrapping up a version of Flexicious Ultimate for Android and iOS.

Yup, you heard that right. PURE Native Android DataGrid and iOS DataGrid components.

The iOS Team has put up a website <www.ioscomponents.com>, please feel free to contact our iOS team with any comment or suggestions. 

Our Flex team is busier than ever with a lot of consulting work porting Flex projects from Desktop To Air Mobile. We have developed a series of components that are sorely missing in the Air Mobile space. We've skinned a lot of the built in ones to be touch friendly. We are in the process of packaging these into production quality components that can speed up your Mobile development. There is SO much activity here at flexicious sometimes it is hard to keep up with the various teams!!

A number of the components are at a fairly stable beta state, and we can get you the bits if you are interested prior to the release, please use the Contact Us Form.