New features: configurable app width and container version!

[Bruno Oliveira ("btco")]

Hello orkut developers,

We now support two cool new features for gadgets in canvas view:

• Container version detection
• Flexible application width

A quick introduction follows. We hope you enjoy them! They're enabled on sandbox and should reach production soon. If you have any feedback, please let us know!

Container Version Detection

The Container Version is supplied to your gadget in a new iframe parameter (containerVersion) in canvas view, so it can be retrieved like this:

var containerVersion = gadgets.util.getUrlParameters()["containerVersion"];

Its value is 1 for the canvas view container in the old orkut UI and 2 for the canvas view container in the new orkut UI. You can read this to determine which container your application is running inside of. Please be aware, however, that "container version" is not the same as "orkut UI version"... for now, there is a 1-to-1 correspondence (1 for old orkut, 2 for new orkut) but this may come out of sync when we launch new container versions or new UIs.

Configurable App Width

That's right, we now support configurable width for applications in canvas view!

You can specify a "preferred width" to orkut in your applications XML by means of the preferred_width attribute of the Content tag:

<?xml version="1.0" encoding="UTF-8"?>

<Module>

   <ModulePrefs title="Yourtitlehere"

      author="authorhere"

      author_email="email_here@......com"

      description="Description here...."

      screenshot="http://url/of/a/screenshot/of/your/app"

      thumbnail="http://url/of/the/thumbnail/for/your/app">

      <Require feature="opensocial-0.8" />

      <Locale lang="en" country="us" />

   </ModulePrefs>

<Content type="html" preferred_width="900">

<![CDATA[

...

</Content>

</Module>

The container will try to allocate your indicated width but might have to crop it if it's too big and expand it if it's too small. The actual width will be reported to you in the "gadgetWidth" iframe parameter.

Some points to take into account are:

• The preferred_width parameter will only be taken into account when rendering your application on container version 2, but will be ignored in container version 1.
  
  
• The container might or might not honor your preferred width depending on the available space.
  
  
• The gadgetWidth iframe parameter is only available to your application in container version 2 and above. This is the "slight catch" we were talking about above.

Therefore, the correct way to determine your application's actual width is first testing the container version and then, if the version is 2 or above, reading the gadgetWidth parameter. Otherwise (container version 1), the width of the gadget is fixed at 835px. So an example of Javascript code would be:

// Determines the actual width of the application

function getActualWidth() {

   return (gadgets.util.getUrlParameters()["containerVersion"] >= 2) ?

             gadgets.util.getUrlParameters()["gadgetWidth"] : 835;

}

[anatoly]

Hi Bruno


Can you please clarify, if I don't change anything the width would be
835 as it is today?
Is it correct?


thanks

On Feb 22, 5:04 am, "Bruno Oliveira (\"btco\")" <bru...@google.com>
wrote:

> Hello orkut developers,
>
> We now support two cool new features for gadgets in canvas view:
>

>    - Container version detection
>    - Flexible application width

>
> A quick introduction follows. We hope you enjoy them! They're enabled on
> sandbox and should reach production soon. If you have any feedback, please
> let us know!
>

> *Container Version Detection*

> The Container Version is supplied to your gadget in a new iframe parameter
> (containerVersion) in canvas view, so it can be retrieved like this:
>
> var containerVersion = gadgets.util.getUrlParameters()["containerVersion"];
>
> Its value is 1 for the canvas view container in the old orkut UI and 2 for
> the canvas view container in the new orkut UI. You can read this to
> determine which container your application is running inside of. Please be
> aware, however, that "container version" is not the same as "orkut UI
> version"... for now, there is a 1-to-1 correspondence (1 for old orkut, 2
> for new orkut) but this may come out of sync when we launch new container
> versions or new UIs.
>

> *Configurable App Width*

> That's right, we now support configurable width for applications in canvas
> view!
> You can specify a "preferred width" to orkut in your applications XML by
> means of the preferred_width attribute of the Content tag:
>
> <?xml version="1.0" encoding="UTF-8"?>
> <Module>
>    <ModulePrefs title="Yourtitlehere"
>       author="authorhere"
>       author_email="email_here@......com"
>       description="Description here...."
>       screenshot="http://url/of/a/screenshot/of/your/app"
>       thumbnail="http://url/of/the/thumbnail/for/your/app">
>       <Require feature="opensocial-0.8" />
>       <Locale lang="en" country="us" />
>    </ModulePrefs>

> <Content type="html" *preferred_width="900"*>

> <![CDATA[
>
> ...
>
> </Content>
> </Module>
>
> The container will try to allocate your indicated width but might have to
> crop it if it's too big and expand it if it's too small. The actual width
> will be reported to you in the "gadgetWidth" iframe parameter.
>
> Some points to take into account are:
>

>    - The preferred_width parameter will only be taken into account when

>    rendering your application on container version 2, but will be ignored in
>    container version 1.
>

>    - The container might or might not honor your preferred width depending
>    on the available space.
>
>    - The gadgetWidth iframe parameter is only available to your application

>    in container version 2 and above. This is the "slight catch" we were talking
>    about above.
>
> Therefore, the correct way to determine your application's actual width is
> first testing the container version and then, if the version is 2 or above,
> reading the gadgetWidth parameter. Otherwise (container version 1), the
> width of the gadget is fixed at 835px. So an example of Javascript code
> would be:
>
> // Determines the actual width of the application
> function getActualWidth() {
>    return (gadgets.util.getUrlParameters()["containerVersion"] >= 2) ?
>              gadgets.util.getUrlParameters()["gadgetWidth"] : 835;
>
>
>

> }- Hide quoted text -
>
> - Show quoted text -

[Bruno Oliveira ("btco")]

Yep. If you don't do anything, your app will continue to be 835px wide (both on the new and old UI).

[Julio Alvarez]

First, congratulations, really great feature :)

How container defines available width? Do it check browser's window width or the max width is fixed in UI?

Thanks.

Julio.

2011/2/22 Bruno Oliveira ("btco") <bru...@google.com>

Yep. If you don't do anything, your app will continue to be 835px wide (both on the new and old UI).

--
You received this message because you are subscribed to the Google Groups "orkut Developer Forum" group.
To post to this group, send email to opensoci...@googlegroups.com.
To unsubscribe from this group, send email to opensocial-ork...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/opensocial-orkut?hl=en.

[Bruno Oliveira ("btco")]

Hi! Thanks for the feedback.

The width is clamped to a fixed interval (currently, the range is 800 to 980 pixels in the new UI, and hard-coded to 835 on the old UI).