09-12-2011 04:30 AM
We are developing screen layout using Juniper recommended Sencha Ext/Js designer tool. However the look & feel of the screens does not match as per juniper recommended visual style.
We are not sure whether Juniper team used same tool to design screen or they did extra modifications in the code generated after designing layout using Sencha tool.
Could you please give us suggestions to match our screen layout with Juniper suggested visual style guide.
09-12-2011 08:08 AM
Thanks for pointing out.
Hope this clarifies.
09-12-2011 10:16 AM
Is a list of styles available? For example, I have a Ext.form.Label I am using. When it displays on the page it is a black 10 pt font, looking nothing like any of the other styling. Also, I would like to make it bold.
Are there available styles for 3rd party applications? Or should I create my own css?
09-14-2011 07:48 AM
Thanks, after reading through the guide it sets out the specifics about what font and size to use.
However, I want to make sure that I am understanding this correctly. It appears that developers will need to create their own css style sheet? The other option would be to unpack some of the Junos Space ear files and look through the style sheets in that application?
Sorry for the confusion, just trying to understand what is expected.
09-16-2011 03:07 AM
Actully we were trying to design screen layout using sencha EXt/js tool and assumed that we do not have to write our own CSS/style sheets. Our assumtion is that if we have a tool to prepare GUI, then why bother writing CSS/style sheet like other GUI design tool e.g. Adobe flex builder etc. But here it seems, we need to extensively modify CSS in order to make screen look & feel as per Juniper visual style guide. This is a time consuming task for those who are not GUI developer.
09-18-2011 08:07 PM
Where are you reviewing the UI screens? Inside the designer or insider the Junos Space after App is deployed ?
If you have deployed the App, then it does take the Space look and feel. Only item that it doesn’t match with a JNPR developed Space App is the layered background.
The developer doesn’t have to/shouldn't be creating his/her own CSS or modifying the CSS.
09-19-2011 07:51 AM
I just wanted to let you know that in my experience, that works most of the time. So the "space look and feel" is automatically applied with panels, trees, and tab panels. However two areas that it appears I will need to style manually: GridPanel and general labels. The GridPanel does not automatically style as you see in the style guide, or in the Network Application Platform application (specifically the role listing). I may be doing something wrong, so any advice will be helpful, but that has been my experience thus far.
09-19-2011 10:12 PM
But take example of buttons. We could not see option in Ext designer to change button colour as per Junos visual style guide. Can you guide us how to change button attributes in Ext designer?
09-20-2011 12:16 AM
Thanks Yesh. We have already set button color after checking on the website given by you. We want to know why Sencha desinger tool is not rich enogh to provide all these features easily.
Can you please help us to understand - the button properties in Ext designer it shows CLS attribute for button color. Do you know list of attributes for CLS property of button object.
E.g. For blue button, we need to set CLS as jx-btn-blue. We came to know about this property after going through source code of Juniper developed apps. If I need to set green colour, then I do not know property value.
09-22-2011 08:37 AM
No, I am talking about the GridPanel (the control used to produce tables).
The most difficult one to style will be the GridPanel. Does anyone have the css styles necessary for it to look like the grid shown in the Network Application Platform? The Hello World application doesn't have the same styling as the Network Application Platform (at least for grids).
Attached are two screenshots. I would like my gridpanels to look like the "User Roles" one, the Hello World is attached as an example of how the styling defaults. Again, any assistance on how to style it is greatly appreciated, I would rather not have to create my own stylesheet for it.
But regarding the "Actions" tab, does anyone know how to create your own "action" drawer with ExtJS? I haven't found any information on it either in the style guide or on the web. In fact, I would be very interested in understanding how to build the entire Manage Roles page. It has a number of controls I would like to use. I am viewing the source code through firebug, but it could be easier to understand with the original source project.