Sigma Php Ajax framework, Ajax Components, GUI Builder
May 23, 2012, 08:47:01 PM *
Welcome, Guest. Please login or register.
Did you miss your activation email?

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: Basic library, layout, and style questions  (Read 669 times)
Bruce_Dickey
Sr. Member
****
Posts: 67


View Profile
« on: July 26, 2011, 10:15:18 AM »

Hi,

I can't help but think that I may be asking questions with obvious answers because I don't find the information in the Getting Started Guide, The Sigma Visual Manual, or in this forum. I do need to learn more CSS and overall linb workings, the latter being more difficult and hopefully you can help with that. I find the linb library and the GUI Builder very good. The documentation is fairly good, although for me the following would help:
1. A lot more tutorials and examples.
2. The DOM is well-documented. A complete description of how to do in linb each thing that can be done in the DOM would be helpful. And/or how to access each underlying DOM element and attribute. For example, when to use "KEY" versus "INPUT" (versus other)? to set a background color.
3. Update API method descriptions with tutorial-type information: why one would want to use the method, and how, in an example.
4. The comments for many of the methods say that maybe the code explains the method. This could be replaced with real explanations.
5. Add an overview of UI Profiles. What are UI Profiles?
6. Between the GUI Builder output and posts on this forum, I've seen three (maybe 4) different ways to create an app (below). What is each method best suited for? / When to use one method instead of another?
7.1. Gui Builder output, then linb.Com.load()
7.2. Gui Builder output, then:
function My_App()
{
   app = new App;
   app.iniComponents();
   linb('gui').append( app.getUIComponents() );  // "gui" is a div id
}
linb.main( My_App );
7.3. It appears that one can make a bunch of linb.create() calls.
7.4. In section 5.1 of the Cookbook - Getting Started Guide:
       Namespace("App");
       linb.include("App.MyName",
           linb.getPath("mypath"),
           function() {
                   var x = new App.MyName();
                   x.show();
          }  ...
       The example is for a dialog, but an entire app could be run this way, correct? Is this show() doing the iniComponents() from 7.2 above? How does that all work?
7.5. Other ways?
8. Examples of using (in the GUI Builder) Custom Style, Custom Class, Custom Behaviors, and Custom Functions. What is the syntax that should be used for each?

Other questions:
1. I'm trying to get the app to center horizontally, and move when the browser window is re-sized. What is the best way to do this? I've tried
   <div style="width:100%; text-align:center;">
   <div id="gui" style="margin:0 auto; width: 1024px; margin-left: auto;  margin-right: auto;"></div>                  <!-- Location for the GUI to reside in. -->
   </div>
but the linb lib appears to be overriding this and the app is placed on the left. Even after commenting-out the .setLeft() code etc that the Builder generated. I'm using .setDock("top"), by the way.
2. I've placed the generated app on a pane below a div, both on a main pane. Is this good or bad? What would you do in regards to panes on panes etc?
3. What is the best way to apply an external CSS to the generated app? linb.CSS.addStyleSheet("/static/css/mainstyles.css");? Or
<head>
<link href="http://127.0.0.1:8000/has/static/css/mainstyles.css" rel="stylesheet" type="text/css" />
</head>?
Other?
4. Linb appears to be overriding the background color of panes on the tabbed window. How can the background color of these be set?
5. How can a border be given to the TreeGrid? I've tried .setProperties( {border:"solid 1px"} ), which has no effect.
6. Is this valid: .setProperties("overflow", "auto")? Or should it be .setProperties ( { overflow:  "auto"} )?

Sorry for the long post, but thank you very much for your help,
Bruce

Logged
linb
Administrator
Hero Member
*****
Posts: 435


View Profile
« Reply #1 on: July 26, 2011, 10:25:45 PM »

Thank you for your suggestions, we will improve step by step.


>> Other questions:
>> 1. I'm trying to get the app to center horizontally, and move when the browser window is re-sized. What is the best way to do this? I've tried....

.setDock("center")

or with your CSS setting,

.setLeft(’auto')

[/b]

>> 2. I've placed the generated app on a pane below a div, both on a main pane. Is this good or bad? What would you do in regards to panes on panes etc?

That depends, just meet your needs.

>> 3. What is the best way to apply an external CSS to the generated app? linb.CSS.addStyleSheet("/static/css/mainstyles.css");? Or
>> <head>
>> <link href="http://127.0.0.1:8000/has/static/css/mainstyles.css" rel="stylesheet" type="text/css" />
>> </head>?

The latter is better.

>> 4. Linb appears to be overriding the background color of panes on the tabbed window. How can the background color of these be set?

xx.setCustomStyle({"PANEL":"background:red;"})

>> 5. How can a border be given to the TreeGrid? I've tried .setProperties( {border:"solid 1px"} ), which has no effect.

Treegrid self is not suitable for border, you can set a TreeGrid in a Block.

>> 6. Is this valid: .setProperties("overflow", "auto")? Or should it be .setProperties ( { overflow:  "auto"} )?

No, you cant set CSS to linb widget directly,  The right way are :

xx.getSubNode('..').css("overflow", "auto");

xx.getRoot().css("overflow", "auto");


« Last Edit: July 26, 2011, 10:30:57 PM by linb » Logged
Bruce_Dickey
Sr. Member
****
Posts: 67


View Profile
« Reply #2 on: July 27, 2011, 02:03:32 PM »

Thank you! That gets me going on my "Other questions" 1-5.

I've seen:
.setCustomStyle({"FIELDSET","background:#ff0000;"})
.setCustomStyle({"PANEL":"background:red;"})
.setCustomStyle({"INPUT":"blah blah"})
.setCustomStyle({"KEY":"blah blah"})
.setCustomStyle({"ITEM":"blah blah"})

What other (template keys?) are there?
Can you provide a list for all controls?

In your response to cgetty, topic "ctl_group transparent background" on October 28, 2010,
you said

>.setCustomStyle({"FIELDSET","background:#ff0000;"})
>
>or
>
>.setCustomStyle({"PANEL","background:#ff0000;"})

but as I understand it, these are template key names, so only one of the two should work,
and you are only saying to try each, possibly due to not knowing offhand. You are not
saying that both should work, are you?

On my question #6, suppose I want to use CSS from my CSS file. How can I get styles from the file into xx.getSubNode('w').css("x", "y");?

Where can I look to find what 'w' should be for any control in xx.getSubNode('w')?

(From your answer to "Re: Can not start a project" on January 29, 2010, it looks like 'w' is a "template key"
-- correct? If so the answer is the list of keys for all the controls...?

Assuming I have a site CSS file, please explain in detail how to apply that to a linb app -- do you have an example or sample possibly?
That would include
* text styles
* body, pane, button background colors
* control-selected colors, etc.
* By the way, I have seen your documentation on themes and how to make a custom one. Please tell me whether that
is the way to go. I've not looked into this and am hoping that an existing CSS file could be applied fairly easily.

In my app, I now have a couple panes docked vertically. When the app is running and I click on a pane, a outline
box is drawn around it. How can this be turned off? But I want to keep it turned on for radio button labels.

Thank you!
Bruce
Logged
linb
Administrator
Hero Member
*****
Posts: 435


View Profile
« Reply #3 on: July 27, 2011, 07:57:31 PM »

Sorry, no template Keys list for each contorl yet. But We are going to add "Custom node appearance" dialog to the UI Builder later.

And, you need to look those examples in "Appearances" block (/Examples/index.html).
Logged
Bruce_Dickey
Sr. Member
****
Posts: 67


View Profile
« Reply #4 on: July 28, 2011, 04:10:41 PM »

OK, will do. Thanks.
Logged
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.7 | SMF © 2006-2008, Simple Machines LLC Valid XHTML 1.0! Valid CSS!