Junos Space Developer
Showing results for 
Search instead for 
Do you mean 
Reply
Contributor
Posts: 54
Registered: ‎07-26-2011
0 Kudos

Screen Layout design for Juos Apps

Hi,

 

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.

 

Regards

Satish

Juniper Employee
Posts: 13
Registered: ‎08-13-2010
0 Kudos

Re: Screen Layout design for Junos Apps

Hi Satish

 

Thanks for pointing out.

 

Kindly note that the look and feel of your user interface looks significantly different when you preview your screen in the designer. However, when you attach your generated Javascript with a workspace or a task or invoke it inside a Space application, your user interface will by default use the CSS/Style sheet of Space and render your UI with Space look & feel.

 

Hope this clarifies.

 

Thanks

Karthik

Contributor
Posts: 19
Registered: ‎08-12-2011
0 Kudos

Re: Screen Layout design for Junos Apps

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?

Recognized Expert
Posts: 456
Registered: ‎09-29-2009
0 Kudos

Re: Screen Layout design for Junos Apps

Hi,

 

Please refer to Visual Style guide bundled with SDK.

 

Regards

Yesh

Contributor
Posts: 19
Registered: ‎08-12-2011
0 Kudos

Re: Screen Layout design for Junos Apps

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.

 

Regards,

Patrick

Contributor
Posts: 54
Registered: ‎07-26-2011
0 Kudos

Re: Screen Layout design for Junos Apps

Hi,

 

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.

 

Regards

Satish

Recognized Expert
Posts: 456
Registered: ‎09-29-2009
0 Kudos

Re: Screen Layout design for Junos Apps

Hi Satish,

 

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.

Regards

Yesh

Contributor
Posts: 19
Registered: ‎08-12-2011
0 Kudos

Re: Screen Layout design for Junos Apps

Thanks Yesh,

 

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.

 

Thanks,
Patrick

Contributor
Posts: 54
Registered: ‎07-26-2011
0 Kudos

Re: Screen Layout design for Junos Apps

Thanks Yesh.

 

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?

 

Regards

Satish

Recognized Expert
Posts: 456
Registered: ‎09-29-2009
0 Kudos

Re: Screen Layout design for Junos Apps

Hi Satish,

 

You can try this http://www.sencha.com/forum/showthread.php?21904-Button-color

 

Thanks

Yesh

Recognized Expert
Posts: 456
Registered: ‎09-29-2009
0 Kudos

Re: Screen Layout design for Junos Apps

We will check on this.

Regards

Yesh

Contributor
Posts: 54
Registered: ‎07-26-2011
0 Kudos

Re: Screen Layout design for Junos Apps

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.

Recognized Expert
Posts: 456
Registered: ‎09-29-2009
0 Kudos

Re: Screen Layout design for Junos Apps

Hi Patrick,

 

Are you referring to Actions tab?

 

Thanks

Yesh

Contributor
Posts: 19
Registered: ‎08-12-2011
0 Kudos

Re: Screen Layout design for Junos Apps

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.

 

Thanks,

Patrick

Recognized Expert
Posts: 456
Registered: ‎09-29-2009
0 Kudos

Re: Screen Layout design for Junos Apps

 

Hi Patrick,

 

We don’t have support for it today. Note that Grid Panel , Actions tab can't be achieved with CSS.

 

Regards

Yesh

Visitor
Posts: 4
Registered: ‎12-20-2011
0 Kudos

Re: Screen Layout design for Junos Apps

Hi Yesh,

 

so there is no way to apply the default Junos Space style to a GridPanel? Is this still an open issue?

 

Thanks,

Tobia

Recognized Expert
Posts: 456
Registered: ‎09-29-2009
0 Kudos

Re: Screen Layout design for Junos Apps

Hi Tobia,

 

Yes, it is still an open issue.

 

Regards

Yesh