Apex Code Development You need to sign in to do that
Don't have an account?
nimbusproject HTML Storage, Display Best Practices
Hi I'm building a UI for an APP and need to know some best practices for storage and display of various HTML components within my page:
* I understand the concept for inline style sheets, or the zipped resource locator
I would like to be able to change the various components of the page around choosing which components I draw based on user selection (without drawing new areas using javascript etc.)
Should I:
1.) Be storing various portions of the page in a custom object? If so, I've seen some methods on these boards, but they included displaying (using escape="false") and storing the HTML in the object field's description which is limited in the number of characters it can store.
2.) Where should I place the logic to determine which panels I should display. I know I can write an APEX method in my standard controller but how should I store my logic.
-or-
Should I choose elements to display using "apex:outputpanel rendered="true/false"" -- and if so, where and how should I place the logic to choose these panels as rendered/rerendered etc.
Thanks in advance!
Hey
This can be quite a large Technical Architecture question, it depends on who's going to be editing the HTML (if anyone), and how you'd like them to perform those updates. Let's start with a few simple, if not ideal solutions..
1. Store your html in an object's fields. The restrictions on the size of the string are quite large (Textarea can be up to 30 000 chars if I remember correctly) and you'd be using an outputText tag with the escape attribute set (as you said). This solution has the advantage of keeping your Visualforce page clean as all the complexity could lie within your apex controller e.g.
public class MyClass{
// Other logic that fetches the field values from the DB based on user choice selection
public String getField(){
if(userChoice==1)
return '<span>value 1</span>';
else
return '<span>value 2</span>';
}
}
<apex:page>
<apex:outputText escape="false" value="{!field}" />
</apex:page>
The problem is it could be difficult to manage the HTML that you're storing i.e. small changes can be tedious.
2. Store your HTML sections as components with different names (see visualforce components) and then display these based on boolean vars from an Apex controller e.g.
public class MyClass{
// Other logic that fetches the field values from the DB based on user choice selection
public Boolean getShowField1(){
if(userChoice==1)
return true;
else
return false;
}
}
<apex:page>
<apex:outputPanel rendered="{!showField1}" >
<c:field1 /> <!-- this component has some html in it -->
</apex:outputPanel>
</apex:page>
The advantage here is nice readable HTML within your visualforce component, and the disadvantage is a complex VF page.
There are a number of variables that'll affect your decision, but hopefully that's enough to go on.
Wes
Thanks Wes!
I will give this a shot -- hoping to have a kind of a lot going on in terms of jS, but most of that can be referenced externally, as well as the style sheet (so both of those tricks should save some complexity!)
I will update if I have more questions.
Jordan
Wes -
I decided to go with the second method, but still not sure if I'm doing it the best way, here is some example of what I've defaulted to, and it works 'alright'.
<apex:outputPanel rendered="{!div_main}">
<!-- Main -->
<div id="main" class="box">
<apex:outputPanel rendered="{!div_header}">
<!-- Header -->
<div id="header">
<!-- Logotyp -->
<h1 id="logo"><a href="./" title="CrystalX [Go to homepage]">Crystal<strong>X</strong><span></span></a></h1>
<hr class="noscreen" />
<apex:outputPanel rendered="{!div_search}">
<!-- Search -->
<div id="search" class="noprint">
<form action="" method="get">
<fieldset><legend>Search</legend>
<label><span class="noscreen">Find:</span>
<span id="search-input-out"><input type="text" name="" id="search-input" size="30" /></span></label>
<input type="image" src="design/search_submit.gif" id="search-submit" value="OK" />
</fieldset>
</form>
</div> <!-- /search -->
</apex:outputPanel>
</div> <!-- /header -->
</apex:outputPanel>
Now, in the controller, I'm prompted by the live editor (or whatever you want to call it) that I am missing a property or method in the controller, so I select create and I always get a string method or property (example of the auto-generated property):
public String div_search { get; set; }
or
public String getDiv_search() {
return null;
}
As you can see these are both String type methods, but they don't work (at least as far as I can tell the same way if I just create public Boolean type variables and methods as such:
public with sharing class nimbus_cntrl {
public Boolean div_search = false;
public Boolean getDiv_search(){
return div_search;
}
public PageReference page_update_controller1() {
div_search = true;
return null;
}
So am I on the right track? Or totally weird? I'm trying to stick to some solid design principles so I don't end up totally screwed up down the road somewhere I can see and working in Visualforce is still kind of feeling in the dark!
Thanks
Hey
I think it's just a small syntax issue, you're almost there:
public with sharing class nimbus_cntrl {private Boolean div_search = false; // I've set this to private so that SF doesn't get confused public Boolean getDiv_search(){ return div_search; } public PageReference page_update_controller1() {
div_search = true; return null; // this will refresh the whole page and cause your controller to 'start from scratch' i.e. reinstantiate }}Do you have a button that calls page_update_controller1()? Although you are setting the value of div_search in that method it's value will be lost when the method returns null, as that causes the page to reload. If you want the value of div_search to be retained you'll have to do a partial page refresh i.e.
<apex:outputPanel id="search-container"> <!-- use this id after calling page_update_controller1 --><apex:outputPanel rendered="{!div_search}"> <!-- Search --> <div id="search" class="noprint"> <form action="" method="get"> <fieldset><legend>Search</legend> <label><span class="noscreen">Find:</span> <span id="search-input-out"><input type="text" name="" id="search-input" size="30" /></span></label> <input type="image" src="design/search_submit.gif" id="search-submit" value="OK" /> </fieldset> </form> </div> <!-- /search --></apex:outputPanel></apex:outputPanel>
<apex:form>
<apex:commandButton value="Go" action="{!page_update_controller1}" rerender="search-container" />
</apex:form>
Wes