Create dynamic theme for DDS conversion

[infgge00]

Hi! I´d like to create a custom theme with simple containers to get dynamic screens. Inside these containers I want to place some widgets such as panels.

I´d like to know if it´s possible to include a widget inside simple container, in the theme definition.

I little example would be wonderful!! Thanks in advance!!!

[Scott Klement]

I'm not sure that I've ever tried this -- Usually people use layouts like this in mobile applications, and for those it's better to design the screen for mobile rather than convert it, since you typically want to give mobile applications a very different look and feel from green-screen applications.

There's an 'items' setting in a conversion theme that can be used to add extra elements to the screen. So you could use this to add the layout.

However, you'd also need to, somehow, designate which screen elements are to be placed into the layout, and you'd need to recalculate the left/top offsets to be relative to the layout. This part will not be so simple. You may be able to do it in the "add enhancements" function, but I have not tried this myself, and do not have an example.

If you can get the converted widgets to go into the layout, you'd still need to do stuff like change them to be sized via a percent (instead of fixed positions). So this would also need to be done somehow... so, this could get very tricky.

Can you explain why you want to do this? Is this for a mobile app, or are you trying to adjust to different screen sizes automatically? We have not had anyone ask for this before, but of course, we'll be happy to help find a way to meet your needs.

[infgge00]

We are converting a business application into a graphical environment in Profound. We want to create a dynamic theme to suit different resolutions. Our customers have square and widescreen monitors and could be interesting to see it correctly in all of them. I can create a dynamic screen after converting but I spend too much time. If I could to create a theme, with simple containers and widths, heights, tops and lefts in percentages, I will reduce the hours spent in that job.

I don´t know how to use function "add enhacements". I have seen the documentation, but I´d like to see a practical example if it´s possible.

thanks!!

[infgge00]

Coulld You also explain how to use "process field" parameter into DDS conversion theme? I think that can be very useful ... An example would be nice!
thanks

[Scott Klement]

I don't really think the idea of adding layouts in the conversion theme will accomplish what you're looking for. Or, at least, I don't think it'll work as well as you might be thinking that it will.

Using a layout and setting everything up by percent would be extremely difficult to do. You could, perhaps, calculate the left/top positions as percents by dividing the green screen row/col by the screen height/width. But, that would only adjust the position, it would not adjust the size of the field, the font, etc. If you set up the sizes as percents, you'd probably see some very strange results... the fields would be larger, but the font would be the same. Buttons would be wider, but the text would be the same. Things might look "squished". Since a browser isn't always open to the full screen (the user might make it just be a small window) they can drag the edges to be any size they want, so it won't always be the shape of the monitor. If things are placed/sized by percents, this could create some very strange effects indeed.

If you want to use layouts in this fashion, I would suggest building the screen by hand so you can see what it looks like as you're making it. You can then try different settings, and figure out what looks good. But, I don't think an automatic conversion would work very well.

I spoke to some of my colleagues about this, and one of them had what might be a better suggestion: He said that you can download "twitter bootstrap" http://getbootstrap.com -- this is a free tool that (among other things) has the ability to automatically set the screen's zoom level so that the page fills the available area. With this, you wouldn't need to modify a conversion theme, you'd set up your site's "start.html" to load the bootstrap framework, and it'd take care of resizing all of the screens for you. If you ever wanted to make a change to how it worked, there'd only be one place to make the change (whereas with a conversion theme, you'd have to change every display file you converted.)

I have not used Twitter Bootstrap myself, but my colleague said that he was working with a customer that was using it for their displays and that it worked nicely for them.

[Scott Klement]

If you want to try using the "add enhancements" function (maybe not for resizing, but for something else?) then here's an example of how you might code one:

Code: Select all

"add enhancements": function(format, isSFL, isWin) {
      if (isSFL) return;

      var items = format.items;

      // List of constants for transformation
      var list = {
                  '(*)All  (A)ctive  (I)nactive': {
                        "field type": "select box",
                        "choices": "*ALL,Active,Inactive",
                        "choice values": "*,A,I",
                        "width": "75px"   
                  },
                  '(*)All  (Y)es  (N)o': {
                        "field type": "select box",
                        "choices": "*ALL,Yes,No",
                        "choice values": "*,Y,N",
                        "width": "75px"   
                  },
                  '(Y)es   (N)o': {
                        "field type": "checkbox",
                        "checked value": "Y",
                        "unchecked value": "N"
                  },                                                
                  '(Y)es, (N)o': {
                        "field type": "checkbox",
                        "checked value": "Y",
                        "unchecked value": "N"
                  },                                          
      };

      // create dropdown or checkbox for predetermined fields
      for (var i = 0; i < items.length; i++) {                                                        //Examine every item on screen
            var constItem = items[i];
            if (constItem["field type"] == "output field" && list[constItem.value] != null) {           //Item is output field and not empty
                  var constRow = Number(constItem["cursor row"]);                                     //Checking for row and column numbers
                  var constCol = Number(constItem["cursor column"]);
                  if (isNaN(constRow) || isNaN(constCol)) continue;
                  var inputItem = null;
                  var inputCol = 0;
                  for (var j = 0; j < items.length; j++) {                                            //Loop back through all screen items to find input box immediately before constant
                        var item = items[j];
                        var row = Number(item["cursor row"]);
                        var col = Number(item["cursor column"]);
                        if (row != constRow) continue;
                        if (col > constCol) continue;
                        if (col < inputCol) continue;
                        if (item["field type"] != "textbox") continue;
                        inputItem = item;
                        inputCol = col;
                  } 
                  if (inputItem != null) {                                                            //If input field found apply properties from list above 
                        for (var propName in list[constItem.value]) {
                              inputItem[propName] = list[constItem.value][propName];
                        }
                        constItem["visibility"] = "hidden";                                           // hide constant 
                  }        
            }

      }
}

The idea here is that this will loop through all of the output fields on the screen, and see if any of them contain the constant value of "(*)All (A)ctive (I)nactive" -- if so, it loops back to the previous field (textbox) on the screen and changes it to a dropdown (select box). Similarly, it finds (*)All (Y)es (N)o, and changes the previous textbox to a select box. Or if it finds (Y)es (N)o, it changes the previous textbox into a checkbox.

This should give you a simple idea of how you can use this to modify the screen fields during conversion.

[Scott Klement]

I couldn't find an example of "process field", but here's an example of "process fkey" which is very similar, so perhaps that will help you. What this example does is capitalize the first letter of the function key label, and set the remaining letters to lowercase.

Code: Select all

  "process fkey": function(keyword, item, format){
      var parts = item["value"].split("=");
      if (parts.length > 1) {
              item["value"] = parts[1];
      }
      item["value"] = item["value"].replace(/\w\S*/g, function(txt){
        return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
        });
  },

Hope that helps

[infgge00]

ok!! It will help me so much!! So, to add bootstrap to my start.html I have only to add the css and js links?

[Scott Klement]

I have not used Bootstrap myself, sorry! You'll need to read the documentation of Bootstrap to find out how it works...