function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
anjuanju 

Using Active Widget in visual force

Hi,
 
I want to use Active Widget in visual force.
For that I have uploaded AW css, javascript and image files as static resources. In AW CSS file I have replaced image names with resource id. For e.g. image name was tab.png and I replaced it as /resource/1234567890/tab. Then I gave css file reference in visual force page as <apex:stylesheet value="/resource/12222355677/awcss" /> where 'awcss' is my AW CSS file. I have done the coding as follows. And for javascript I have used tag - <script type="text/javascript" src="{!$Resource.awjs}" />. But I didn't get any result. Can anybody help me?
 
<apex:page>
<apex:stylesheet value="/resource/12222355677/awcss" />
<script type="text/javascript" src="{!$Resource.awjs}" />
 
<style>
#tab1 {width=100;}
</style>
 
<div id="divTest" name="divTest"></div>
<script>
var objTab=new AW.UI.Tab;
objTab.setId("tab1");
document.getElementById("divTest").innerHTML=objTab;
</script>
 
</apex:page>
dchasmandchasman
A couple of things:

- do not hard code the versioned resource url like you are doing - this is a recipe for heartache, use $Resource for what its there for - to provide a layer of abstraction that will keep things from breaking over time.
- breaking apart 3rd party library code and then modify its source like you describe is also a bad idea for many reasons, perhaps the most important of which is that most libraries expect a very specific physical structure and you are breaking that with what you are doing currently.

I looks to me like you are not aware of the most powerful part of static resources: archives like ZIP and JAR files can be uploaded and then they can be used as a virtual file system, web root, or a file system in a file including maintaining full support for relative references.

In you specific case of AW, I would take the AW zip file, expand it on your local drive, remove the examples folder and re ZIP it into a file called aw.zip. Then create a static resource called aw and upload aw.zip as the resource's content file.

Now you can refer to things like this:

Code:
<apex:includeScript value="{!urlFor($Resource.aw, '/ActiveWidgets/runtime/lib/aw.js')}" />
 
or a complete example that I basically grabbed straight from the ActiveWidgets' documentation:

Code:
<apex:page showHeader="false">
<head>
    <title>Visualforce using ActiveWidgets Example</title>
    <apex:includeScript value="{!urlFor($Resource.aw, '/ActiveWidgets/runtime/lib/aw.js')}" />
    <apex:stylesheet value="{!urlFor($Resource.aw, '/ActiveWidgets/runtime/styles/aqua/aw.css')}" />
</head>
    <script>
    var myCells = [
        ["CRM","Salesforce.com", "$3.93B"],
        ["AAPL", "Apple Inc.", "$90.26B"]
    ];

    var myHeaders = ["Ticker", "Company Name", "Market Cap."];

    // create grid object
    var obj = new AW.UI.Grid();

    // assign cells and headers text
    obj.setCellText(myCells);
    obj.setHeaderText(myHeaders);

    // set number of columns/rows
    obj.setColumnCount(3);
    obj.setRowCount(2);

    // write grid to the page
    document.write(obj);
    </script>
</apex:page>

And for extra credit we can leverage the Component Development Kit that is part of Visualforce to abstract things out a bit:

Code /apex/awDemo:
<apex:page showHeader="false">
    <title>Visualforce using ActiveWidgets Example</title>

    <script>
    var myCells = [
        ["CRM","Salesforce.com", "$3.93B"],
        ["AAPL", "Apple Inc.", "$90.26B"]
    ];
    var myHeaders = ["Ticker", "Company Name", "Market Cap."];
    </script>
    
    <c:awGrid data="myCells" headers="myHeaders"/>
    
</apex:page>

and the new custom component:

Code /apexcomponent/awGrid:
<apex:component>
    <apex:attribute name="data" type="String" description="TODO: Describe me" required="true"/>
    <apex:attribute name="headers" type="String" description="TODO: Describe me" required="true"/>

    <apex:includeScript value="{!urlFor($Resource.aw, '/ActiveWidgets/runtime/lib/aw.js')}" />
    <apex:stylesheet value="{!urlFor($Resource.aw, '/ActiveWidgets/runtime/styles/aqua/aw.css')}" />

    <script>    
    // create grid object
    var obj = new AW.UI.Grid();

    // assign cells and headers text
    obj.setCellText({!data});
    obj.setHeaderText({!headers});

    // set number of columns/rows
    obj.setColumnCount(3);
    obj.setRowCount(2);

    // write grid to the page
    document.write(obj);
    </script>        
</apex:component>



Message Edited by dchasman on 10-16-2008 09:33 PM
VisualForceVisualForce

Hi..

        I want to display a static resource image in PDF as header image.. (ie I want to display in each page in PDF)

Is it possible in Visualforce..?

   I am using following code.. It doesnt work..

   @top-left{
                             background-image: url(!urlfor($resource.logo));                                                                
                  }

 

How to display  today date as footer (ie every page in PDF)

Give me a guidance.. How to fix it..