What is the API to change the theme?

Question

Hi,

Is there an API to set the theme of an application?

If yes, which? If no, how does TEAM do this in their application?

Kind regards, Jan Willem

Answer 1

0

Hi Jan,

Formspider does not have this API but it is still possible to change the CSS of an application using the method explained in this thread. http://osqa.theformspider.com/questions/726/apply-different-css-when-starting-application

We think we should add this API to Formspider, so I created a ticket for this issue.

Kind Regards,
Yalim

link

answered 10 Sep '15, 07:08

Yalim Gerger ♦♦
1.8k●5
accept rate: 15%

Answer 2

0

Hi Yalim,

I want to enable users to set the theme for their sessions. Just like the TEAM example on your homepage. How do they do that if there is no API?

Kind regards,

Jan Willem

link

answered 10 Sep '15, 07:36

Jan Willem V...
123●1●3●31
accept rate: 0%

Hi Jan,

The link I shared above explains how it is done. TEAM does it the same way.

Kind Regards,
Yalim

(10 Sep '15, 08:09) Yalim Gerger ♦♦

Answer 3

Hi Yalim,

Some users are complaining about the colors of my application so i am working on this subject again. But i can not get this working.

I have created javascript planmysport.js with this function:

function applyCss(fileName) {
  BDF_Manager.getCurrentApplication().loadCss(fileName);
}

And have placed this file in the /webapps/formspider/js folder.

And set the link in the main.jsp file in the /webapps/formspider folder.

  <body tabindex="-1">
    <script type="text/javascript" src="js/fs-all.js?v=1.9.0.build42"></script>
    <script type="text/javascript" src="js/planmysport.js"></script>    
    <script type="text/javascript">
        window.requestParameters = "<%=bfr.toString()%>";
    </script>
  </body>

Then i have stopped/started tomcat, removed all temporary files from my browser and run the application. The first problem then occurs: it does not seem to load the script. alt text

Also, in the html source i can see that all skins are loaded: alt text

I have written some plsql-code to change from one skin to the other:

api_externalMethod.invoke('applyCss', new_file_name);

What values do i have to give to new_file_name? Is that for example 'FS19Pink_preview.css' or do i have to add the path?

I hope you can help.

Kind regards, Jan Willem Vermeer

Answer 4

0

Hi,

i hope there is someone awake before the weekend :)

I discovered that main.jsp is not used when i start my application. I can even delete the entire file main.jsp and everything keeps running normally.

KR, JW

link

answered 23 Oct '15, 09:41

Jan Willem V...
123●1●3●31
accept rate: 0%

Hi Jan-Willem, That should not be possible. That would mean that the main.jsp is cashed somewhere.. (maybe a proxy server?)
Also the fact that all skins are loaded seems weird..

(26 Oct '15, 15:03) Michiel A

Hi Michiel,

There is no caching, as far as i know... In the browser i see main.html and that is something else than main.jsp. So i guess there is "something" that creates the main.html page and as far as i can see, the main.jsp is not used in this process.

Kind regards, Jan Willem

(26 Oct '15, 17:47) Jan Willem V...

Hi Jan,

main.jsp is one of the crucial parts of Formspider and it's impossible to run Formspider without it.

What I see in your issue is, that, you're hitting a caching mechanism. If this is not the browser's then it is probably the tomcat's. To get over, please stop tomcat, remove [tomcat]/work directory and remove [tomcat]/conf/Catalina directory. Then restart tomcat. ( make sure that main.jsp is in place )

Best Regards
Serdar Gokcen

(27 Oct '15, 04:41) Serdar ♦♦

Answer 5

Hi Serdar,

This helped. My javascript is loaded now. So i have this:

1) Javascript

function applyCss(fileName) {
  BDF_Manager.getCurrentApplication().loadCss(fileName);
}

2) PLSQL

 procedure setThemeColor is
    l_file_name varchar2(240);
    l_chosen_theme varchar2(20);
    v_params_t api_externalMethod.tt_params;
  begin
    l_chosen_theme := api_component.getValueTX('my-panel.theme-combo-box');
    case l_chosen_theme
    when 'DEFAULT' then l_file_name := 'FS19Default_preview.css';
    when 'GREEN'   then l_file_name := 'FS19Green_preview.css';
    when 'ORANGE'  then l_file_name := 'FS19Orange_preview.css';
    when 'PINK'    then l_file_name := 'FS19Pink_preview.css';
    when 'PURPLE'  then l_file_name := 'FS19Purple_preview.css';
    when 'GREY'    then l_file_name := 'FS19Grey_preview.css';
    end case;
    v_params_t('0').value_tx := l_file_name;
    api_externalMethod.invoke('applyCss', v_params_t);
  end;

3) Offcourse the external method.

But when i change the value in the combo box to change the color, nothing happens.

I have added alert(fileName); to the javascript and verified that it is passed through.

I guess BDF_Manager.getCurrentApplication().loadCss(fileName); is wrong OR the filenames, but what should they be?

Kind regards, Jan Willem

Answer 6

0

Hi Michiel,

I have studied your solution, but do not understand it cq do not know the link index.

The html-source looks like this:

alt text

I do not understand why all these "preview" stylesheets are loaded. I guess there must be a reason because the fs-team are clever guys. And even if this was ok, which file should be replaced?

Kind regards, Jan Willem

link

answered 28 Oct '15, 02:52

Jan Willem V...
123●1●3●31
accept rate: 0%

Hi Jan,

Preview CSS files is used only in FormspiderIDE to preview panels. Browsers load them only once and then use it via their cache mechanism. Thus, these won't be an issue.

Regards, Serdar

(28 Oct '15, 04:24) Serdar ♦♦

Answer 7

0

YES, i got it working...

With the html-inspector i noticed this:

alt text

After copying the css files to my app folder, it worked.

Now i am also beginning to understand Michiels solution... the chosen stylesheet is just loaded after the previous one so when users change the colorscheme 20 times, there are 20 "link" statements. Michiel - can you describe how to determine the cssLinkIndex in this case?

Kind regards, Jan Willem

link

answered 28 Oct '15, 04:55

Jan Willem V...
123●1●3●31
accept rate: 0%

Hi Jan-Willem,

The trick is to not create a new link each time you change the theme, but change the existing one, so you should only need 1 linkindex, pointing to your default css.

I personally use a more etensive js function, that also prevents the flickering you might see when changing theme.. I can send that if you are interested..

(28 Oct '15, 06:10) Michiel A

Thanks Michiel,

Sorry... a little bit complex for me.

Do i understand it correctly that i have to replace the third stylesheet so:

So, with your script it should be linkindex 3. Is that right?

I do not see any flickering... is that with a specific browser or o/s?

Kind regards, Jan Willem

(28 Oct '15, 06:41) Jan Willem V...

Answer 8

Hi,

i have made this javascript to replace only the relevant stylesheet:

function applyCss(fileName) {
  var newCSS = "css/skins/" + fileName;
  var oldCSS = [ "css/skins/FS19Default.css?v=1.9.0.build42"
               , "css/skins/FS19Default.css"
               , "css/skins/FS19Green.css?v=1.9.0.build42"
               , "css/skins/FS19Green.css"
               , "css/skins/FS19Orange.css?v=1.9.0.build42"
               , "css/skins/FS19Orange.css"
               , "css/skins/FS19Pink.css?v=1.9.0.build42"
               , "css/skins/FS19Pink.css"
               , "css/skins/FS19Purple.css?v=1.9.0.build42"
               , "css/skins/FS19Purple.css"
               , "css/skins/FS19Grey.css?v=1.9.0.build42"
               , "css/skins/FS19Grey.css"
               ];
  var allCSS = document.getElementsByTagName("link");
  var curCSS;
  for (var i=0, im=allCSS.length; im>i; i++) {
    curCSS = allCSS[i].getAttribute("href");
    if ( oldCSS.indexOf(curCSS) > -1 )
      { allCSS[i].setAttribute("href",newCSS);
        break;
      }
  }
}

Kind regards, Jan Willem

What is the API to change the theme?

Follow this question

Related questions