Screen Layout design for Juos Apps

[satish.mane@techmah…]

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

[kmadhava]

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

[patrick.clark]

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?

[Yesh]

Hi,

Please refer to Visual Style guide bundled with SDK.

Regards

Yesh

[patrick.clark]

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

[satish.mane@techmah…]

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

[Yesh]

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

[patrick.clark]

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

[satish.mane@techmah…]

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

[Yesh]

Hi Satish,

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

Thanks

Yesh