how to display interactive charts using flash builder - flash-builder

Hi
I have to display dashboard using flash builder. May i know some examples.
Thank you.

Download the the samples from this page:
http://www.adobe.com/devnet/flex/tourdeflex.html
Or look at them online at: http://www.adobe.com/devnet-apps/flex/tourdeflex/web/
Select Data visualization on the left, and look at all the chart samples.
Also look here: Visit http://flex.amcharts.com
Some of the code looks like this:
<fx:Style>
#font-face
{
src: url("../assets/tahoma.ttf");
fontFamily: "Tahoma";
embedAsCFF: false;
unicode-range:
U+0020-U+0040, /* Punctuation, Numbers */
U+0041-U+005A, /* Upper-Case A-Z */
U+005B-U+0060, /* Punctuation and Symbols */
U+0061-U+007A, /* Lower-Case a-z */
U+007B-U+007E; /* Punctuation and Symbols */
}
.MyTextStyle
{
font-family: Tahoma;
}
</fx:Style>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import flash.filters.DropShadowFilter;
[Bindable]private var chartData:Array = [{country:"USA",visits:4252},{country:"China",visits:1882},{country:"Japan",visits:1809},{country:"Germany",visits:1322},{country:"UK",visits:1122},{country:"France",visits:1114},{country:"India",visits:984},{country:"Spain",visits:711},{country:"Netherlands",visits:665},{country:"Russia",visits:580},{country:"South Korea",visits:443},{country:"Canada",visits:441},{country:"Brazil",visits:395},{country:"Italy",visits:386},{country:"Australia",visits:384},{country:"Taiwan",visits:338},{country:"Poland",visits:328}];
[Bindable]private var shadow:DropShadowFilter = new DropShadowFilter(2,45,0,0.5);
]]>
</fx:Script>
<s:HGroup width="100%" height="100%">
<amcharts:AmPieChart
styleName="MyTextStyle"
width="50%"
height="100%"
dataProvider="{chartData}"
valueField="visits"
titleField="country"
angle="5"
depth3D="5"
innerRadius="10"
groupPercent="3"
gradient="radial"
filters="{[shadow]}"
startDuration="1.5"
startRadius="100"
marginLeft="0"
marginRight="0"
labelWidth="100">
<amcharts:balloon>
<amcharts:AmBalloon cornerRadius="10" borderThickness="2" borderColor="#FFFFFF" borderAlpha="1"/>
</amcharts:balloon>
</amcharts:AmPieChart>
<amcharts:AmSerialChart
styleName="MyTextStyle"
width="50%"
height="100%"
dataProvider="{chartData}"
categoryField="country"
startDuration="1"
angle="30"
depth3D="15">
<amcharts:categoryAxis>
<amcharts:CategoryAxis gridCount="{chartData.length}" labelRotation="90"/>
</amcharts:categoryAxis>
<amcharts:graphs>
<amcharts:AmGraph balloonText="[[category]]: [[value]]" id="g0" valueField="visits" type="column" lineAlpha="0" fillAlphas="[0.8]"/>
</amcharts:graphs>
<amcharts:balloon>
<amcharts:AmBalloon cornerRadius="10" borderThickness="2" borderColor="#FFFFFF" borderAlpha="1"/>
</amcharts:balloon>
<amcharts:chartCursor>
<amcharts:ChartCursor zoomable="false" cursorAlpha="0" categoryBalloonEnabled="false"/>
</amcharts:chartCursor>
</amcharts:AmSerialChart>
</s:HGroup>

Related

New custom property in properties panel extension not reflect in bpmn diagram xml

I’m adding some custom properties in the property panel like below,
I diable Id property in the General tab. Adding 2 new tabs Input and Output.
<?xml version="1.0" encoding="UTF-8"?>
<bpmn2:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" id="sample-diagram" targetNamespace="http://bpmn.io/schema/bpmn" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd">
<bpmn2:process id="Process_1" isExecutable="false">
<bpmn2:startEvent id="StartEvent_1">
<bpmn2:outgoing>Flow_0n4p9tk</bpmn2:outgoing>
</bpmn2:startEvent>
<bpmn2:task id="Activity_0d872w2">
<bpmn2:incoming>Flow_0n4p9tk</bpmn2:incoming>
</bpmn2:task>
<bpmn2:sequenceFlow id="Flow_0n4p9tk" sourceRef="StartEvent_1" targetRef="Activity_0d872w2" />
</bpmn2:process>
<bpmndi:BPMNDiagram id="BPMNDiagram_1">
<bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">
<bpmndi:BPMNEdge id="Flow_0n4p9tk_di" bpmnElement="Flow_0n4p9tk">
<di:waypoint x="448" y="258" />
<di:waypoint x="500" y="258" />
</bpmndi:BPMNEdge>
<bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1">
<dc:Bounds x="412" y="240" width="36" height="36" />
</bpmndi:BPMNShape>
<bpmndi:BPMNShape id="Activity_0d872w2_di" bpmnElement="Activity_0d872w2">
<dc:Bounds x="500" y="218" width="100" height="80" />
</bpmndi:BPMNShape>
</bpmndi:BPMNPlane>
</bpmndi:BPMNDiagram>
</bpmn2:definitions>
See 2 screenshots I added new control in the property panel but XML not showing me if I download the diagram. What am I missing in it?
Note: My code is the same replica of the BPMN custom property panel example
I resolved the issue. I able to set input-output parameter in BPMN diagram using the following code,
set: function setValue(element, values, node) {
var b_obj = getBusinessObject(element);
var selectedValues = {};
selectedValues = values;
prop[_id] = selectedValues[_id];
var selectedName = dropdownOptions[parseInt(prop[_id])].name;
var bo = cmdHelper.updateBusinessObject(element, b_obj, prop);
var selectedInputParameter = bpmnFactory.create('camunda:InputParameter', {
name: selectedName,
value: prop[_id]
});
var inputOutput = bpmnFactory.create('camunda:InputOutput', {
inputParameters: [selectedInputParameter]
});
b_obj.extensionElements = b_obj.extensionElements || bpmnFactory.create('bpmn:ExtensionElements');
b_obj.extensionElements.get('values').push(inputOutput);
return bo;
}
I got a hint from here

Get list with cc.attrs and ValueExpression on CompositeComponent JSF

I should create a composite component and insert it in a parent component. I tried to find the answer to my problem on stackOverflow and i found this:
Add programmatically composite component in backing bean
So, I create the composite component:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://xmlns.jcp.org/jsf/passthrough"
xmlns:composite="http://java.sun.com/jsf/composite"
xmlns:ic="http://java.sun.com/jsf/composite/inputComponent">
<composite:interface>
<composite:attribute name="idPanel" required="true" />
<composite:attribute name="typeBSPanel" default="default" />
<composite:attribute name="idPanelHeading" required="true" />
<composite:attribute name="idPanelBody" required="true" />
<composite:attribute name="listInputText" required="true"
shortDescription="Questo componente è un Panel con un numero variabile di InputText di tipo Text, Number e DropDown. Questa lista deve contenere degli oggetti con le seguenti proprietà: label, value e placeholder."></composite:attribute>
<composite:attribute name="objectBindToPanel" required="true" />
</composite:interface>
<composite:implementation>
<div class="panel-group" id="accordion">
<div id="#{cc.attrs.idPanel}"
class="panel panel-#{cc.attrs.typeBSPanel}">
<div id="#{cc.attrs.idPanelHeading}" class="panel-heading">
<button type="button" class="btn btn-#{cc.attrs.typeBSPanel}"
data-toggle="collapse" data-target="#collapseBodyPanel">
+/-</button>
</div>
<div id="collapseBodyPanel" class="panel-collapse collapse in">
<div id="#{cc.attrs.idPanelBody}" class="panel-body">
<ui:repeat var="inputText" value="#{cc.attrs.listInputText}">
<ic:inputTextBS preAddon="#{inputText.label}"
requiredMessage="This field must not be empty"
placeholder="#{inputText.placeholder}"
value="#{cc.attrs.objectBindToPanel[inputText.value]}" required="true">
</ic:inputTextBS>
</ui:repeat>
</div>
</div>
</div>
</div>
</composite:implementation>
</html>
the class and the method to add the composite component dinamically:
public class CCUtility {
public static void includeCompositeComponent(UIComponent parent, String libraryName, String resourceName, String id, Map<String, String> mapValueExpression) {
// Prepare.
FacesContext context = FacesContext.getCurrentInstance();
Application application = context.getApplication();
FaceletContext faceletContext = (FaceletContext) context.getAttributes().get("javax.faces.FACELET_CONTEXT");
// This basically creates <ui:component> based on <composite:interface>.
Resource resource = application.getResourceHandler().createResource(resourceName, libraryName);
UIComponent composite = application.createComponent(context, resource);
composite.setId(id); // Mandatory for the case composite is part of UIForm! Otherwise JSF can't find inputs.
ExpressionFactory factory = application.getExpressionFactory();
ELContext ctx = context.getELContext();
for (Map.Entry<String, String> entry : mapValueExpression.entrySet()) {
ValueExpression expr = factory.createValueExpression(ctx, entry.getValue(), String.class);
composite.setValueExpression(entry.getKey(), expr);
//composite.getAttributes().put(entry.getKey(), entry.getValue());
}
// This basically creates <composite:implementation>.
UIComponent implementation = application.createComponent(UIPanel.COMPONENT_TYPE);
implementation.setRendererType("javax.faces.Group");
composite.getFacets().put(UIComponent.COMPOSITE_FACET_NAME, implementation);
// Now include the composite component file in the given parent.
parent.getChildren().add(composite);
parent.pushComponentToEL(context, composite); // This makes #{cc} available.
try {
faceletContext.includeFacelet(implementation, resource.getURL());
} catch (IOException e) {
throw new FacesException(e);
}
}
}
and I call the previous method in another class that pass the map of Attributes I want for the composite component:
public void addPanelHostMachine(){
this.dataCenterController.getDataCenter().getGroupsHost().add(indexGroupHostMachine, new GroupHost());
Map<String, String> mapValueExpression = new HashMap<String, String>();
mapValueExpression.put("idPanel", "panelHostMachine" + indexGroupHostMachine);
mapValueExpression.put("idPanelHeading", "panelHostMachineHeading" + indexGroupHostMachine);
mapValueExpression.put("idPanelBody", "panelHostMachineBody" + indexGroupHostMachine);
mapValueExpression.put("typeBSPanel", "success");
mapValueExpression.put("listInputText", "#{dataCenterController.dataCenter.groupsHost.get(" + indexGroupHostMachine + ").listOfInputText}");
mapValueExpression.put("objectbindToPanel", "#{dataCenterController.dataCenter.groupsHost.get(" + indexGroupHostMachine + ")}");
CCUtility.includeCompositeComponent(panelBodyDataCenter, "panelComponent", "panelComponent.xhtml", "ccPanelHostMachine" + indexGroupHostMachine, mapValueExpression);
indexGroupHostMachine = indexGroupHostMachine + 1;
}
Now the problem is that when I try to add the CompositeComponent I get this error:
Grave: Servlet.service() for servlet [Faces Servlet] in context with path [/IcaroKBMassiveEditor] threw exception [/resources/panelComponent/panelComponent.xhtml #34,79 preAddon="#{inputText.label}": Property 'label' not found on type java.lang.String] with root cause
javax.el.PropertyNotFoundException: Property 'label' not found on type java.lang.String
I think that it's a problem with EL expression and 'composite:attribute' but I don't know how to fix this. Can anyone help me?
I find the solution in this post: DataTable Inside Composite Component.
Instead of:
for (Map.Entry<String, String> entry : mapValueExpression.entrySet()) {
ValueExpression expr = factory.createValueExpression(ctx, entry.getValue(),String.class);
composite.setValueExpression(entry.getKey(), expr);
}
I used:
for (Map.Entry<String, String> entry : mapValueExpression.entrySet()) {
ValueExpression expr = factory.createValueExpression(ctx, entry.getValue(),Object.class);
composite.setValueExpression(entry.getKey(), expr);
}
I replaced String.Class to Object.class in funciton call factory.createValueExpression

Blueprint CSS last column not working correctly

I have a 10 column blueprint setup and having trouble with havingtwo divs each be 5 columns wide. The second one always jumps down under the first one, even though I have "last" in the second div.
Here's the code:
<div class="container">
<div class="span-5">
<ul><li><p><strong>Discounts on professional development programs that protect your interests.</strong> We monitor state and national policy issues that affect our industry and take action on our members' behalf. These efforts ensure that our members have a powerful voice and strong representation on the issues that matter.</p></li></ul>
</div>
<div class="span-5 last">
<ul><li><p><strong>Marketing and promotional opportunities and management and operational resources.</strong> You get access to useful tools as well as valuable insights and expert perspectives on industry issues and trends that will help your business succeed.</p></li></ul>
</div>
</div>
Here's part of the CSS:
== STRUCTURE: ========================
* Page width: 640 px
* Number of columns: 10
* Column width: 55 px
* Margin width: 10 px
======================================
By default, the grid is 640px wide, with 10 columns
spanning 55px, and a 10px margin between columns.
If you need fewer or more columns, use this formula to calculate
the new total width:
Total width = (number_of_columns * column_width) - margin_width
-------------------------------------------------------------- */
/* A container should group all your columns. */
.container {
width: 640px;
margin: 0 auto;
}
/* Use this class on any div.span / container to see the grid. */
.showgrid {
background: url(src/grid.png);
}
/* Body margin for a sensile default look. */
body {
margin:1.5em 0;
}
/* Columns
-------------------------------------------------------------- */
/* Sets up basic grid floating and margin. */
div.span-1, div.span-2, div.span-3, div.span-4, div.span-5, div.span-6, div.span-7, div.span-8, div.span-9, div.span-10 {float:left;margin-right: 10px;}
/* The last column in a row needs this class. */
div.last { margin-right: 0; }
/* Use these classes to set the width of a column. */
.span-1 { width: 55px;}
.span-2 { width: 120px;}
.span-3 { width: 185px;}
.span-4 { width: 250px;}
.span-5 { width: 315px;}
.span-6 { width: 380px;}
.span-7 { width: 445px;}
.span-8 { width: 510px;}
.span-9 { width: 575px;}
.span-10, div.span-10 { width: 640px; margin: 0; }

grails renderpdf plugin, how does it work?

i´m trying to render PDF with renderpdf grails plugin,
but their documentation is very short.
i made a button in my gsp view/file
<button type="button">PDF Me!</button>
and
ByteArrayOutputStream bytes = pdfRenderingService.render(template: "/pdfs/report", model: [data: data])
in a view for binding images
<rendering:inlinePng bytes="${imageBytes}" class="some-class" />
model data is domainInstance and how do i connect the button with this renderpdf?
may be i should more specify my code
def invoice ={
def vermittlungInstance = Vermittlung.get(params.id)
def aa = vermittlungInstance.lieferungen.id
def lieferungInstance = Lieferung.get(aa)
def bb = lieferungInstance.packete.id // .id
def packetInstance = Packet.findAllByIdInList(bb)
if (!vermittlungInstance & !lieferungInstance) {
flash.message = "${message(code: 'default.not.found.message', args: [message(code: 'vermittlung.label', default: 'Vermittlung'), params.id])}"
redirect(action: "list")
}
else {
if(vermittlungInstance.rechnungen.id!=null || vermittlungInstance.lieferungen.id!=null || lieferungInstance.packete.id!=null ){
def a = vermittlungInstance.rechnungen.id
def rechnungList = Rechnung.findById(a)
def b = vermittlungInstance.lieferungen.id
def lieferungList = Lieferung.findById(b)
def c = lieferungInstance.packete.id
//println c
def packetList = Packet.findAllByIdInList(c)//findById(c)
def d = packetInstance.artikel.id//id
def artikelList = Artikel.findAllByIdInList(d)//findById(d)
def e = lieferungInstance.adressen.id
def adresseList = Adresse.findById(e)
[vermittlungInstance: vermittlungInstance,
rechnungInstanceList:rechnungList,
lieferungInstanceList:lieferungList,
packetInstanceList: packetList,
artikelInstanceList: artikelList,
adresseInstanceList: adresseList
]
//System.out.println(c)
}
else{
def rechnungList = Rechnung.all
def lieferungList = Lieferung.all
def packetList = Packet.all
def artikelList = Artikel.all
def adresseList = Adresse.all
[vermittlungInstance: vermittlungInstance,
rechnungInstanceList:rechnungList,
lieferungInstanceList:lieferungList,
packetInstanceList: packetList,
artikelInstanceList: artikelList,
adresseInstanceList: adresseList
]
}
}
}
this is my def in a controller, i tried to put this renderpdf on many places, but it won't render the page, actually i am changing some values in html (browser), so it should render in html.
the controller seems to be a wrong place to renderpdf than, but there is no render function for .gsp
thanks
Add a new action which generates the pdf version of your invoice and link them from your view.
Here is your link:
<g:link action="downloadInvoice" id="${yourInvoiceID}">Download invoice</g:link>
In your controlle add following:
def downloadInvoice = {
def invoice = Invoice.get(params.id) //replace with your logic
renderPdf(template: '/templates/pdf/invoice', model: [invoice: invoice], filename: "yourTitle")
}
Your invoice template is a simple gsp view where you could place all your HTML (including images) and CSS:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Invoice</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="${resource(dir:'css',file:'your.css')}" />
</head>
<body>
<img src="${resource(dir:'images',file:'invoiceLogo.png')}" />
<h1>Invoice: ${invoice.id}</h1>
.
.
.
</body>
</html>
Hope that example helps!
How to add unicode fonts to this plugin ?? unicode characters are not displayed in rendered pdf. The generated pdf contains blank spaces in place of unicode characters, although they are displayed in other gsp pages. later that i tried the below css. but not worked.
#font-face {
font-family: 'Ubuntu';
font-style: normal;
font-weight: 400;
src:url(http://themes.googleusercontent.com/static/fonts/ubuntu/v4/_xyN3apAT_yRRDeqB3sPRg.woff) format('woff');
-fs-pdf-font-embed: embed;
-fs-pdf-font-encoding: UTF-8;
}
body pre{
font-size: 14px;
font-family: 'Ubuntu', Helvetica, Arial, sans-serif;
}
Thank you,

Unable to Show Data insde dojox.grid.DataGrid with dojo.data.ItemFileReadStore

I am using DOJO ItemFileReadStore with dojox.grid.DataGrid to show Data Inside a Grid
Please see the Image here
http://imageshare.web.id/viewer.php?file=kdfvrkmn6k7xafmi4jdy.jpg
EMployee.Java
public class Employee {
String name;
String dept;
// Setters and Getters
}
This is My Servlet
response.setContentType("text/x-json;charset=UTF-8");
response.setHeader("Cache-Control", "no-cache");
PrintWriter out = response.getWriter();
List list = new ArrayList();
Employee emp1 = new Employee();
Employee emp2 = new Employee();
emp1.setDept("CSE");
emp1.setName("Vamsi");
emp2.setDept("EEE");
emp2.setName("Raju");
list.add(emp1);
list.add(emp2);
List jsonresponse = new ArrayList();
for (int i = 0; i < list.size(); i++) {
JSONObject nextObject = new JSONObject();
nextObject.put("name", list.get(i));
jsonresponse.add(nextObject);
}
JSONObject json = new JSONObject();
json.put("label", "name");
json.put("items", jsonresponse.toArray());
response.getWriter().write(json.toString());
}
This is MY JSP Page
<body class=" claro ">
<span dojoType="dojo.data.ItemFileReadStore" jsId="store1" url="http://localhost:8080/Man/MyServlet2"></span>
<table dojoType="dojox.grid.DataGrid" store="store1"
style="width: 100%; height: 500px;">
<thead>
<tr>
<th width="150px" field="name">Name</th>
<th width="150px" field="dept">Dept</th>
</tr>
</thead>
</table>
Please see the Image here
http://imageshare.web.id/viewer.php?file=kdfvrkmn6k7xafmi4jdy.jpg
Please help , Thank you .
+1 for posting the server output (firebug screenshot) in your question. This makes a lot easier for people to help you - for example I can easily see that the data format is still not quite right. You are getting better at both dojo and stackoverflow, it seems!
Remember that the ItemFileReadStore expects the data to be in a particular format. Your servlet is producing:
{label: "name", items: [
{name: {dept: "CSE", name: "Vansi"}},
{name: {dept: "ABC", name: "Abcd"}}
]}
You see you are telling the store that each item's "name" is an object with some properties ("dept" and "name"). This is why the grid shows object Object in the name column. It should be:
{label: "name", items: [
{dept: "CSE", name: "Vansi"},
{dept: "ABC", name: "Abcd"}
]}
I'm not very good with java, but I believe only a small change in your servlet is required:
// The for loop that adds employees to jsonresponse.
for (int i = 0; i < list.size(); i++)
{
// Instead of adding the
Emloyee e = (Employee)list.get(i);
JSONObject nextObject = new JSONObject();
nextObject.put("name", e.getName());
nextObject.put("dept", e.getDept());
jsonresponse.add(nextObject);
}
In fact, it's possible that you can just do json.put("items", list.toArray()); instead of adding each employee to jsonresponse.