Friday, June 1, 2012

Flex in Visual force page


Flex in Visual force page: 
   This example is the combination of different languages such as Flex, Visual Force, Apex class and JavaScript. We are fetching the all documents and displaying in tree format. For this we need Flex SWF file we can download on this link http://wiki.apexdevnet.com/images/f/fd/TreeSample.swf
After download this SWF file upload in Static resource and used in VF page. We have written controller to get all parent and child documents and set in Visual force page.
Following are the code for this application.

VF page:
<apex:page controller="DocumentController" id="myPage">
<script>
var jsFolders = [];
var flexApp;
var docId, sfolderId, dfolderId, btnMove;
function getMyApp(appName) {
  if (navigator.appName.indexOf("Microsoft") != -1) {
    return window[appName];
  } else {
    return document[appName];
  }
}
function flexIsReadys() {
  flexApp = getMyApp("FlexFiles");
  flexApp.initApp(jsFolders);
}
function moveDocument(moveData) {
  docId.value = moveData.docId;
  sfolderId.value = moveData.sfolderId;
  dfolderId.value = moveData.dfolderId;
  btnMove.click();
}

</script>

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id="FlexFile" width="300" height="450" codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
  <param name="movie" value="{!$Resource.FlexSWFFiles}" />
  <param name="quality" value="high" />
  <param name="bgcolor" value="#869ca7" />
  <param name="allowScriptAccess" value="sameDomain" />
  <embed src="{!$Resource.FlexSWFFilse}" quality="high" bgcolor="#869ca7" width="300" height="450" name="FlexFiles" align="middle" play="true" loop="false" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer">
  </embed>
</object>

<!—Repeat tag is like as for loop and displas multiple folder names. -- >
<apex:repeat id="folderInformation" value="{!folders}" var="fldr">
  <script> jsFolder = { name:"{!fldr.name}", id:"{!fldr.id}", docs:[], type:"folder" }; </script>
  <apex:repeat value="{!fldr.docs}" var="doc">
    <script> jsFolder.docs.push( { name:"{!doc.name}", id:"{!doc.id}", type:"document" } ); </script>
  </apex:repeat>
  <script> jsFolders.push(jsFolder); </script>
</apex:repeat>


<apex:form id="movedDocuments">
  <apex:inputHidden id="documentId" value="{!myDocId}"/>
  <apex:inputHidden id="sfolderId" value="{!mySfolderId}"/>
  <apex:inputHidden id="dfolderId" value="{!myDfolderId}"/>
  <apex:commandButton action="{!moveDoc}" value="Move" id="btnMove" style="display: none" />
  <script>
    docId = document.getElementById("{!$Component.documentId}");
    sfolderId = document.getElementById("{!$Component.sfolderId}");
    dfolderId = document.getElementById("{!$Component.dfolderId}");
    btnMove = document.getElementById("{!$Component.btnMove}");
    </script>
</apex:form>
</apex:page>

Apex Controller class:
public class DocumentController {
//Declare the class
  public class myFolder {

    private String name;
    private String id;
    private Map<String, Document> documents = new Map<String, Document>();
 //Set Get method of Documents
    public List<Document> getDocuments() { return new List<Document>(docs.values()); }
    public String getName() { return name; }
    public String getId() { return id; }
  }

  private Map<String, myFolder> folder = new Map<String, myFolder>();
  private String my_DocumentId;
  private String my_SfolderId;
  private String my_DfolderId;
//Getter Methods
  public String getMyDocumentId() { return my_DocumentId; }
  public String getMySfolderId() { return my_SfolderId; }
  public String getMyDfolderId() { return my_DfolderId; }
//Setter methods
  public void setMyDocId(String id) { my_DocId = id; }
  public void setMySfolderId(String id) { my_SfolderId = id; }
  public void setMyDfolderId(String id) { my_DfolderId = id; }

  public String moveDoc() {
    Document doc = [Select Id, FolderId From Document Where Id = :my_DocId];
    doc.FolderId = my_DfolderId;
    update doc;
    return null;
  }

  public List<myFolder> getFolder() {
              //Fetched the documents
    List<Folder> thefolders = [Select Folder.id, Folder.name, Folder.type From Folder Where Folder.Type = :'Document'];
    for (Folder fldr : thefolders) {
      myFolder mfldr = new myFolder();
      mfldr.name = fldr.name;
      mfldr.id = fldr.id;
      folders.put(fldr.name, mfldr);
      List<Document> docs = [Select Id, Name From Document Where FolderId = :mfldr.id];
      for (Document doc : docs) {
        mfldr.docs.put(doc.id, doc);
      }
    }
    return new List<myFolder>(folders.values());
  }
}// end of DocumentController

No comments:

Post a Comment