Foros

Inicio » Alloy UI » English

Vista combinada Visión Plana Vista de árbol
Discusiones [ Anterior | Siguiente ]
toggle
AUI().('aui-viewport') Bahador Vafadar 24 de mayo de 2012 9:40
RE: AUI().('aui-viewport') Juan Gonzalez 24 de mayo de 2012 13:30
RE: AUI().('aui-viewport') Bahador Vafadar 25 de mayo de 2012 0:58
RE: AUI().('aui-viewport') Juan Gonzalez 25 de mayo de 2012 2:06
RE: AUI().('aui-viewport') Bahador Vafadar 25 de mayo de 2012 2:41
RE: AUI().('aui-viewport') Bahador Vafadar 25 de mayo de 2012 5:44
RE: AUI().('aui-viewport') Juan Gonzalez 25 de mayo de 2012 7:37
RE: AUI().('aui-viewport') Bahador Vafadar 27 de mayo de 2012 4:45
RE: AUI().('aui-viewport') Nate Cavanaugh 25 de mayo de 2012 11:02
RE: AUI().('aui-viewport') Bahador Vafadar 27 de mayo de 2012 4:44
RE: AUI().('aui-viewport') Armen Danielyan 12 de junio de 2012 14:37
RE: AUI().('aui-viewport') Juan Gonzalez 13 de junio de 2012 0:25
RE: AUI().('aui-viewport') Armen Danielyan 13 de junio de 2012 9:50
RE: AUI().('aui-viewport') Juan Gonzalez 13 de junio de 2012 10:07
RE: AUI().('aui-viewport') Bahador Vafadar 17 de junio de 2012 23:17
RE: AUI().('aui-viewport') Simon Michel 18 de junio de 2012 2:17
RE: AUI().('aui-viewport') Bahador Vafadar 18 de junio de 2012 3:04
RE: AUI().('aui-viewport') Simon Michel 18 de junio de 2012 14:14
RE: AUI().('aui-viewport') Bahador Vafadar 24 de junio de 2012 23:14
RE: AUI().('aui-viewport') Armen Danielyan 19 de junio de 2012 10:53
RE: AUI().('aui-viewport') Armen Danielyan 21 de junio de 2012 13:58
RE: AUI().('aui-viewport') Bahador Vafadar 24 de junio de 2012 23:17
RE: AUI().('aui-viewport') Bahador Vafadar 24 de junio de 2012 23:27
RE: AUI().('aui-viewport') Armen Danielyan 29 de junio de 2012 7:12
RE: AUI().('aui-viewport') Bahador Vafadar 2 de julio de 2012 0:56
RE: AUI().('aui-viewport') Md Mohiuddin 10 de julio de 2012 23:35
RE: AUI().('aui-viewport') Bahador Vafadar 12 de julio de 2012 0:59
RE: AUI().('aui-viewport') Juan M. Gomez 3 de agosto de 2012 5:19
RE: AUI().('aui-viewport') Bahador Vafadar 8 de agosto de 2012 0:35
RE: AUI().('aui-viewport') Riccardo Masini 13 de noviembre de 2012 1:47
RE: AUI().('aui-viewport') Ranjith Raj 14 de marzo de 2013 2:27
RE: AUI().('aui-viewport') Ranjith Raj 14 de marzo de 2013 2:37
RE: AUI().('aui-viewport') Jennifer Carr 18 de diciembre de 2013 11:31
RE: AUI().('aui-viewport') Nate Cavanaugh 18 de diciembre de 2013 12:02
RE: AUI().('aui-viewport') Jennifer Carr 18 de diciembre de 2013 12:23
RE: AUI().('aui-viewport') Nate Cavanaugh 18 de diciembre de 2013 12:46
RE: AUI().('aui-viewport') Marco Weiland 4 de enero de 2014 3:44
Bahador Vafadar
AUI().('aui-viewport')
24 de mayo de 2012 9:40
Respuesta

Bahador Vafadar

Ranking: New Member

Mensajes: 23

Fecha de incorporación: 20 de abril de 2012

Mensajes recientes

Hi all,

I have been coding back and forth on trying to get some results with Responsive Design technique in my portal. But nothing happens, however I have tried to use @media screen technique and it works just fine. But I have read in some post in Liferay that the method with media screen is not supported by all browsers. Therefore I ecided to go with the Liferay version.

In my portal_normal.vm I have written:

<script type="text/javascript">
AUI().('aui-viewport');
</script>

Just before the </body> tag. I also added two scripts:

<link rel="stylesheet" href="../../build/aui-skin-classic/css/aui-skin-classic-all-min.css" type="text/css" media="screen" />
<script src="/html/js/aui/aui/aui.js" type="text/javascript"></script>

Just before </head> tag.

Now I should be able to call the yui3-aui-view models right? Well here is my problem nothing works. How should I write the code here?

I have tryied with:
.aui-view-320 html
{
background-color: red;
}

But it doesnt do anything in particular. Actually nothing happens. I have been trying to get this to work and no results in 6 full days of work. Now This problem might be very easy but I can't seem to find what it is. If you know how to solve this please guide me!

I would really appreciate all the help I can get!
Thanks
Bahador
Juan Gonzalez
RE: AUI().('aui-viewport')
24 de mayo de 2012 13:30
Respuesta

Juan Gonzalez

LIFERAY STAFF

Ranking: Liferay Legend

Mensajes: 1906

Fecha de incorporación: 28 de octubre de 2008

Mensajes recientes

Bahador Vafadar
RE: AUI().('aui-viewport')
25 de mayo de 2012 0:58
Respuesta

Bahador Vafadar

Ranking: New Member

Mensajes: 23

Fecha de incorporación: 20 de abril de 2012

Mensajes recientes

Juan Gonzalez P:


Thanks so much for your answer Juan Gonzalez. I have been looking at this website you refer to and many other websites regarding this issue. The code Im using is this:

.yui3-aui-view-960 #wrapper
{
background-color: #DA0;
}

I have written the code so it looks as similar as the example demo in the website you referred to. But still I get no results. With Firebug I can see the elements and if I change the background to red for an example it works. Also in addition it works with @media screen and(min-width) etc..
As soon as I rewrite the code into yui3-aui-view it seems that it doesnt read it at all, or just stops executing the code.

My senses tell me that something is wrong with: yui3-aui-view
since it doesn't do what it is supposed to do.
Any idéas here what might be wrong?

Thanks in advance!
Bahadaor
Juan Gonzalez
RE: AUI().('aui-viewport')
25 de mayo de 2012 2:06
Respuesta

Juan Gonzalez

LIFERAY STAFF

Ranking: Liferay Legend

Mensajes: 1906

Fecha de incorporación: 28 de octubre de 2008

Mensajes recientes

Guess you didn't read the article.

I didn't see .yui3-aui-view-960, I only saw .aui-view-960
Bahador Vafadar
RE: AUI().('aui-viewport')
25 de mayo de 2012 2:41
Respuesta

Bahador Vafadar

Ranking: New Member

Mensajes: 23

Fecha de incorporación: 20 de abril de 2012

Mensajes recientes

Juan Gonzalez P:
Guess you didn't read the article.

I didn't see .yui3-aui-view-960, I only saw .aui-view-960


I have read the article about a thousands of times. I got the demo working on my local PC I also tried with both:
.yui3-aui-view-960
.aui-view-960

But I get no results in my Liferay at all, nothing happens.

I will show the files I use maybe you can see something I don't and give me some hints in how to proceed.

portal_normal.vm
 1
 2<!DOCTYPE html>
 3
 4#parse ($init)
 5
 6<html class="#language("lang.dir")" dir="#language("lang.dir")" lang="$w3c_language_id">
 7
 8<head>
 9<script src="/html/js/aui/aui/aui.js" type="text/javascript"></script>
10<link rel="stylesheet" href="../../build/aui-skin-classic/css/aui-skin-classic-all-min.css" type="text/css" media="screen" />
11
12    <title>$the_title - $company_name</title>
13
14    $theme.include($top_head_include)
15</head>
16
17<body class="$css_class">
18
19#if($is_signed_in)
20    #dockbar()
21#end
22
23<div id="wrapper">
24    <a href="#main-content" id="skip-to-content">#language("skip-to-content")</a>
25    <header id="banner" role="banner">
26        <hgroup id="heading">
27            <h1 class="company-title">
28                <a class="$logo_css_class" href="$site_default_url" title="#language("go-to") $site_name">
29                    <img alt="$logo_description" height="$site_logo_height" src="$site_logo" width="$site_logo_width" />
30                </a>
31            </h1>
32
33            <h2 class="community-title">
34                <a href="$community_default_url" title="#language("go-to") $community_name">
35                    <span>$community_name</span>
36                </a>
37            </h2>
38
39            <h3 class="page-title">
40                <span>$the_title</span>
41            </h3>
42        </hgroup>
43
44        #if(!$is_signed_in)
45            <a href="$sign_in_url" id="sign-in" rel="nofollow">$sign_in_text</a>
46        #end
47
48        <div id="site-banner">
49        </div>
50
51        #if ($has_navigation)
52            #parse ("$full_templates_path/navigation.vm")
53        #end
54    </header>
55    <div class="content">
56          <div class="title" id="title">
57        <nav class="site-breadcrumbs" id="breadcrumbs">
58            <h1>
59                <span>#language("breadcrumbs")</span>
60            </h1>
61
62            #breadcrumbs()
63        </nav>
64
65        #if ($selectable)
66            $theme.include($content_include)
67        #else
68            $portletDisplay.recycle()
69
70            $portletDisplay.setTitle($the_title)
71
72            $theme.wrapPortlet("portlet.vm", $content_include)
73        #end
74          </div>
75    </div>
76    <footer id="footer" role="contentinfo">
77        <p class="powered-by">
78            #language("powered-by") <a href="http://www.liferay.com" rel="external">Liferay</a>
79        </p>
80    </footer>
81</div>
82<script type="text/javascript">
83AUI().use('viewport');
84</script>
85</body>
86$theme.include($bottom_include)
87</html>


And here is the custom.css:
 1
 2#wrapper {
 3    /*background: #FFF;
 4    color: #000000;*/
 5    font-family: "Helvetica Neue", Arial, Helvetica, "Nimbus Sans L", sans-serif;
 6    font-size: 100%;
 7    margin: 20px auto;
 8    padding: 30px 20px 0;
 9    position: relative;
10    width: 940px;
11}
12
13.aui-view-960 #wrapper
14{
15  background: green;
16  color: yellow;
17}
18/*
19.yui3-aui-view-960 #wrapper
20{
21  background: green;
22  color: yellow;
23}
24*/


The background and color is commented out so these should be changed by the aui right? Or is something missing or not good enough to actually work properly?
Bahador Vafadar
RE: AUI().('aui-viewport')
25 de mayo de 2012 5:44
Respuesta

Bahador Vafadar

Ranking: New Member

Mensajes: 23

Fecha de incorporación: 20 de abril de 2012

Mensajes recientes

Bahador Vafadar:
Juan Gonzalez P:
Guess you didn't read the article.

I didn't see .yui3-aui-view-960, I only saw .aui-view-960


I have read the article about a thousands of times. I got the demo working on my local PC I also tried with both:
.yui3-aui-view-960
.aui-view-960

But I get no results in my Liferay at all, nothing happens.

I will show the files I use maybe you can see something I don't and give me some hints in how to proceed.

portal_normal.vm
 1
 2<!DOCTYPE html>
 3
 4#parse ($init)
 5
 6<html class="#language("lang.dir")" dir="#language("lang.dir")" lang="$w3c_language_id">
 7
 8<head>
 9<script src="/html/js/aui/aui/aui.js" type="text/javascript"></script>
10<link rel="stylesheet" href="../../build/aui-skin-classic/css/aui-skin-classic-all-min.css" type="text/css" media="screen" />
11
12    <title>$the_title - $company_name</title>
13
14    $theme.include($top_head_include)
15</head>
16
17<body class="$css_class">
18
19#if($is_signed_in)
20    #dockbar()
21#end
22
23<div id="wrapper">
24    <a href="#main-content" id="skip-to-content">#language("skip-to-content")</a>
25    <header id="banner" role="banner">
26        <hgroup id="heading">
27            <h1 class="company-title">
28                <a class="$logo_css_class" href="$site_default_url" title="#language("go-to") $site_name">
29                    <img alt="$logo_description" height="$site_logo_height" src="$site_logo" width="$site_logo_width" />
30                </a>
31            </h1>
32
33            <h2 class="community-title">
34                <a href="$community_default_url" title="#language("go-to") $community_name">
35                    <span>$community_name</span>
36                </a>
37            </h2>
38
39            <h3 class="page-title">
40                <span>$the_title</span>
41            </h3>
42        </hgroup>
43
44        #if(!$is_signed_in)
45            <a href="$sign_in_url" id="sign-in" rel="nofollow">$sign_in_text</a>
46        #end
47
48        <div id="site-banner">
49        </div>
50
51        #if ($has_navigation)
52            #parse ("$full_templates_path/navigation.vm")
53        #end
54    </header>
55    <div class="content">
56          <div class="title" id="title">
57        <nav class="site-breadcrumbs" id="breadcrumbs">
58            <h1>
59                <span>#language("breadcrumbs")</span>
60            </h1>
61
62            #breadcrumbs()
63        </nav>
64
65        #if ($selectable)
66            $theme.include($content_include)
67        #else
68            $portletDisplay.recycle()
69
70            $portletDisplay.setTitle($the_title)
71
72            $theme.wrapPortlet("portlet.vm", $content_include)
73        #end
74          </div>
75    </div>
76    <footer id="footer" role="contentinfo">
77        <p class="powered-by">
78            #language("powered-by") <a href="http://www.liferay.com" rel="external">Liferay</a>
79        </p>
80    </footer>
81</div>
82<script type="text/javascript">
83AUI().use('viewport');
84</script>
85</body>
86$theme.include($bottom_include)
87</html>


And here is the custom.css:
 1
 2#wrapper {
 3    /*background: #FFF;
 4    color: #000000;*/
 5    font-family: "Helvetica Neue", Arial, Helvetica, "Nimbus Sans L", sans-serif;
 6    font-size: 100%;
 7    margin: 20px auto;
 8    padding: 30px 20px 0;
 9    position: relative;
10    width: 940px;
11}
12
13.aui-view-960 #wrapper
14{
15  background: green;
16  color: yellow;
17}
18/*
19.yui3-aui-view-960 #wrapper
20{
21  background: green;
22  color: yellow;
23}
24*/


The background and color is commented out so these should be changed by the aui right? Or is something missing or not good enough to actually work properly?


The problem is solved!
There was nothing wrong with my code. The only problem was the import of the additional script and css. The path to script was not right. and the .aui-view-960 was not inside the imported script. Once i fixed them it worked successfully! Thank you Juan for taking your time and helping me out.

Cheers :-)
Bahador
Juan Gonzalez
RE: AUI().('aui-viewport')
25 de mayo de 2012 7:37
Respuesta

Juan Gonzalez

LIFERAY STAFF

Ranking: Liferay Legend

Mensajes: 1906

Fecha de incorporación: 28 de octubre de 2008

Mensajes recientes

Glad it worked. Many times solution is simpler as we can think....
Nate Cavanaugh
RE: AUI().('aui-viewport')
25 de mayo de 2012 11:02
Respuesta

Nate Cavanaugh

LIFERAY STAFF

Ranking: Junior Member

Mensajes: 65

Fecha de incorporación: 27 de noviembre de 2006

Mensajes recientes

Hi there,
If you're doing this in a theme, then AlloyUI should already be imported for you.

As soon as you put
AUI().use('aui-viewport') either in your main.js or in your portal_normal.vm, it will automatically download and add the JS and css for you (so you shouldn't need to manually link to any files).

Can you describe what path was set wrong?

Thanks!
Bahador Vafadar
RE: AUI().('aui-viewport')
27 de mayo de 2012 4:44
Respuesta

Bahador Vafadar

Ranking: New Member

Mensajes: 23

Fecha de incorporación: 20 de abril de 2012

Mensajes recientes

Nate Cavanaugh:
Hi there,
If you're doing this in a theme, then AlloyUI should already be imported for you.

As soon as you put
AUI().use('aui-viewport') either in your main.js or in your portal_normal.vm, it will automatically download and add the JS and css for you (so you shouldn't need to manually link to any files).

Can you describe what path was set wrong?

Thanks!



The path was set to:
href="../../build/aui-skin-classic/css/aui-skin-classic-all-min.css"
src="/html/js/aui/aui/aui.js"

From there it couldnt read the file(Im refering to the aui.js file!). So basicaly what I did was to change the path name. from the /html/js/aui/aui.js to the map where I copied it. And it worked fine in the other map. So the error landed on the path. But it is very interesting what you say about that it should get linked whitout manually give paths. I will try to write the AUI().use('aui-viewport') in the main.js and see if it works.

Thanks for sharing your tips Nate Appreciate it!
Bahador
Bahador Vafadar
RE: AUI().('aui-viewport')
27 de mayo de 2012 4:45
Respuesta

Bahador Vafadar

Ranking: New Member

Mensajes: 23

Fecha de incorporación: 20 de abril de 2012

Mensajes recientes

Juan Gonzalez P:
Glad it worked. Many times solution is simpler as we can think....



Sure is emoticon but the problem becomes simple as we get new idéas and insperation from others. Keep up the good job emoticonemoticon
Bahador
Armen Danielyan
RE: AUI().('aui-viewport')
12 de junio de 2012 14:37
Respuesta

Armen Danielyan

Ranking: New Member

Mensajes: 7

Fecha de incorporación: 29 de marzo de 2012

Mensajes recientes

Hi Bahador, did you make it work on Liferay 6.0 CE?

I'm trying to make it work on 6.0.6 CE, but it seems there is no 'aui-viewport' support in this version. Does anybody know any workaround which will work on 6.0 CE?
Juan Gonzalez
RE: AUI().('aui-viewport')
13 de junio de 2012 0:25
Respuesta

Juan Gonzalez

LIFERAY STAFF

Ranking: Liferay Legend

Mensajes: 1906

Fecha de incorporación: 28 de octubre de 2008

Mensajes recientes

Nope. This feature is only available from 6.1.

EDIT: To make this available for 6.0 many changes should be made. Probably better spend that time on upgrading...
Armen Danielyan
RE: AUI().('aui-viewport')
13 de junio de 2012 9:50
Respuesta

Armen Danielyan

Ranking: New Member

Mensajes: 7

Fecha de incorporación: 29 de marzo de 2012

Mensajes recientes

Juan Gonzalez P:
Nope. This feature is only available from 6.1.

EDIT: To make this available for 6.0 many changes should be made. Probably better spend that time on upgrading...



Juan, thank you for responding. Unfortunately we have so many custom plugins developed for 6.0 that upgrading them all is not an option at the moment.

As I understand for having the mentioned functionality the AlloyUI and YUI should be upgraded from 3.2.0 to 3.3.0. Has anybody tried doing this?


EDIT: OK, I figured out how to make the viewport feature work in LR 6.0 CE.

I copied aui-viewport.js and aui-debounce.js files to my theme, then slightly modified aui-viewport.js to simplify a prefix building process (it's a prefix used for css class name):

I replaced
1NAME = 'view',
2
3CSS_PREFIX = getClassName(NAME) + A.config.classNameDelimiter,

with
1NAME = 'aui-view',
2
3CSS_PREFIX = NAME + A.config.classNameDelimiter,


Then I added a dependency in aui-viewport.js by modifying the last line:

from
1}, '1.0.1' ,{skinnable:false, requires:['aui-base']});

to
1}, '1.0.1' ,{skinnable:false, requires:['aui-debounce']});

aui-base was required for building a prefix. As I simplified a prefix building I don't need aui-base anymore in my aui-viewport module.
Juan Gonzalez
RE: AUI().('aui-viewport')
13 de junio de 2012 10:07
Respuesta

Juan Gonzalez

LIFERAY STAFF

Ranking: Liferay Legend

Mensajes: 1906

Fecha de incorporación: 28 de octubre de 2008

Mensajes recientes

Wow. Good job!
Bahador Vafadar
RE: AUI().('aui-viewport')
17 de junio de 2012 23:17
Respuesta

Bahador Vafadar

Ranking: New Member

Mensajes: 23

Fecha de incorporación: 20 de abril de 2012

Mensajes recientes

NIcely done. Im glad it still worked out emoticon
Simon Michel
RE: AUI().('aui-viewport')
18 de junio de 2012 2:17
Respuesta

Simon Michel

Ranking: New Member

Mensajes: 7

Fecha de incorporación: 26 de mayo de 2012

Mensajes recientes

Hi all,

i am also using different themes for different devices. When i am surfing with my mobile device, I have noticed that first the desktop version is loaded, before the switch to the mobile version is executed. I don´t think that this is the correct behaviour, isn´t it?

Anyone an idea what can be the reason for this?

Many thanks,
Simon
Bahador Vafadar
RE: AUI().('aui-viewport')
18 de junio de 2012 3:04
Respuesta

Bahador Vafadar

Ranking: New Member

Mensajes: 23

Fecha de incorporación: 20 de abril de 2012

Mensajes recientes

Hello Simon

I am done with the Responsive Design part of my theme and yes. I have exactly the same results on my phone. It shows the website as normal as if you visit the website on a regular monitor before it starts to scale down. I think this is due to the loading process or something. It loades the website first.. etc.. etc.. and then the CSS that makes the change and due to this there is a delay of a couple of seconds before it starts to apply everything.

As far as I am concerned I don't know if you can do anything about this.
Regards,
Bahador
Simon Michel
RE: AUI().('aui-viewport')
18 de junio de 2012 14:14
Respuesta

Simon Michel

Ranking: New Member

Mensajes: 7

Fecha de incorporación: 26 de mayo de 2012

Mensajes recientes

Hey Bahador,

do you have the same problems when you visit www.liferay.com with your mobile device? In my opinion, liferay.com load first the mobile theme.

Regards,
Simon
Armen Danielyan
RE: AUI().('aui-viewport')
19 de junio de 2012 10:53
Respuesta

Armen Danielyan

Ranking: New Member

Mensajes: 7

Fecha de incorporación: 29 de marzo de 2012

Mensajes recientes

Bahador, I have the same issue here and haven't found a solution yet.

Liferay.com, however, opens in a mobile view without any delay.
Armen Danielyan
RE: AUI().('aui-viewport')
21 de junio de 2012 13:58
Respuesta

Armen Danielyan

Ranking: New Member

Mensajes: 7

Fecha de incorporación: 29 de marzo de 2012

Mensajes recientes

Bahador Vafadar:
Hello Simon

I think this is due to the loading process or something. It loades the website first.. etc.. etc.. and then the CSS that makes the change and due to this there is a delay of a couple of seconds before it starts to apply everything.


Well, I believe switching from desktop layout to mobile layout happens only after the aui-viewport script adds corresponding css classes to <html> tag. This script runs only after the web page is loaded, otherwise it would not work, because it uses core AUI libraries which are loaded by Liferay, usually at the end of page loading process, if I am not mistaken. Therefore the layout changes only after the page with default layout is loaded.

But what is interesting is that Liferay.com doesn't have this issue, and it loads mobile layout first. Can anybody from Liferay please clarify how this behavior is implemented there?
Bahador Vafadar
RE: AUI().('aui-viewport')
24 de junio de 2012 23:14
Respuesta

Bahador Vafadar

Ranking: New Member

Mensajes: 23

Fecha de incorporación: 20 de abril de 2012

Mensajes recientes

Hello Simon

I have no problem with the mobile device. It shows directly the mobile theme.

does it have something to do with the code below?:
1<meta name="viewport" content="target-densitydpi=160dpi, width=device-width, minimum-scale=1, maximum-scale=1">
Bahador Vafadar
RE: AUI().('aui-viewport')
24 de junio de 2012 23:17
Respuesta

Bahador Vafadar

Ranking: New Member

Mensajes: 23

Fecha de incorporación: 20 de abril de 2012

Mensajes recientes

Perhaps if we write this:

1<script type="text/javascript" chartype="UTF-8">
2AUI().use('aui-viewport');
3</script>


a little higher up in the code the other theme would apply faster? Im gonna test this out and give results shortly. It may do nothing at all but we will see
Bahador Vafadar
RE: AUI().('aui-viewport')
24 de junio de 2012 23:27
Respuesta

Bahador Vafadar

Ranking: New Member

Mensajes: 23

Fecha de incorporación: 20 de abril de 2012

Mensajes recientes

it works a little better if you apply the code I just posted above just after the body tag. Before all the elements starts to apply. But still it has delays with the themes.

I believe this is done by changing something with Liferay itself. Question is what has to be done to achieve this?
This is a important question because it doesn't look professional showing this kind of neat things with delays of themes overlapping each other...
Can anyone help out with the delay part of themes please?
Armen Danielyan
RE: AUI().('aui-viewport')
29 de junio de 2012 7:12
Respuesta

Armen Danielyan

Ranking: New Member

Mensajes: 7

Fecha de incorporación: 29 de marzo de 2012

Mensajes recientes

As I mentioned above, to make a page change its layout the corresponding classes should be added to an <html> tag. The sooner this classes are added the sooner the layout will change. However Liferay relies on AUI libraries to add this classes. It means that the layout will not change until the AUI libraries are loaded. It seems to me that the AUI libraries are loaded at the end of page loading process. Not sure if this can be changed.

To workaround this problem and to display the correct layout right away you can try hiding the entire page by adding style="display: none;" to a <body> tag, and then when page is completely loaded unhide it using JavaScript. The drawback of this method is that users may wait too long before they see anything in their browser window, especially if the page is large in size (has too many images, scripts, stylesheets etc.)

The more advanced variation of this method might be tracking the AUI libraries loading process, and unhide the page once the libraries are loaded. However I am not sure how to track this.
Bahador Vafadar
RE: AUI().('aui-viewport')
2 de julio de 2012 0:56
Respuesta

Bahador Vafadar

Ranking: New Member

Mensajes: 23

Fecha de incorporación: 20 de abril de 2012

Mensajes recientes

Armen I think your thoughts regarding this issue is just brilliant.

However I don't think liferay uses that much images and such and due to that their loading process takes less time to show. But the website I am working on atm has many pictures and a lot of other things. It would take too much time to load the webbsite. But I this will do the trick until something better comes up I guess.

Thanks for sharing this Armen much appreciated!
Md Mohiuddin
RE: AUI().('aui-viewport')
10 de julio de 2012 23:35
Respuesta

Md Mohiuddin

Ranking: New Member

Mensajes: 2

Fecha de incorporación: 1 de marzo de 2012

Mensajes recientes

Hi ,

We have been trying to build a mobile theme in Liferay using repsonsive web design.
We have included the line : AUI().use('aui-viewport'); within script tags and also included : <meta name="viewport" content="target-densitydpi=160dpi, width=device-width, minimum-scale=1, maximum-scale=1"> within the <head> tags of portal_normal.vm
The theme is working fine on Android , Nokia ,Apple mobiles but gives issues on Blackberry (OS 4).We have tested it on firefox browser for BB 8520 and the problem is that the web site is rendered as a full site on Blackberry Firefox and does not use responsive layout.The client's major requirement is that the mobile theme should open up on Blackberry.

Any suggestions in this regard will be highly welcome.Need urgent help on this.


Regards,
Md. Mohiuddin
Bahador Vafadar
RE: AUI().('aui-viewport')
12 de julio de 2012 0:59
Respuesta

Bahador Vafadar

Ranking: New Member

Mensajes: 23

Fecha de incorporación: 20 de abril de 2012

Mensajes recientes

Md Mohiuddin:
Hi ,

We have been trying to build a mobile theme in Liferay using repsonsive web design.
We have included the line : AUI().use('aui-viewport'); within script tags and also included : <meta name="viewport" content="target-densitydpi=160dpi, width=device-width, minimum-scale=1, maximum-scale=1"> within the <head> tags of portal_normal.vm
The theme is working fine on Android , Nokia ,Apple mobiles but gives issues on Blackberry (OS 4).We have tested it on firefox browser for BB 8520 and the problem is that the web site is rendered as a full site on Blackberry Firefox and does not use responsive layout.The client's major requirement is that the mobile theme should open up on Blackberry.

Any suggestions in this regard will be highly welcome.Need urgent help on this.


Regards,
Md. Mohiuddin


Well according to:
BlackBerry

Wikipedia says that the operating system there is coded with c++. Huge code blocks are written as I understand with Java. Might be the reason why it is not working. I have a web browser that is extremly good it is an app for android but perhaps you can find it on a BlackBerry aswell I don't know. The name of the app is:

Spearmint Browser

Good Luck
Bahador
Juan M. Gomez
RE: AUI().('aui-viewport')
3 de agosto de 2012 5:19
Respuesta

Juan M. Gomez

Ranking: Junior Member

Mensajes: 69

Fecha de incorporación: 7 de noviembre de 2007

Mensajes recientes

Hi all,

This behavior works only in Liferay? or including the alloy js and css files will make it work in a normal html site?

Juan M.
Bahador Vafadar
RE: AUI().('aui-viewport')
8 de agosto de 2012 0:35
Respuesta

Bahador Vafadar

Ranking: New Member

Mensajes: 23

Fecha de incorporación: 20 de abril de 2012

Mensajes recientes

Juan M. Gomez:
Hi all,

This behavior works only in Liferay? or including the alloy js and css files will make it work in a normal html site?

Juan M.



This will only work in Liferay.

However if you want to use it on a normal HTML site try using

@media... Here is a link that describes it further:
CSS HTML

Good Luck Juan!
Riccardo Masini
RE: AUI().('aui-viewport')
13 de noviembre de 2012 1:47
Respuesta

Riccardo Masini

Ranking: New Member

Mensajes: 6

Fecha de incorporación: 14 de mayo de 2012

Mensajes recientes

Hi!
I'm using Liferay 6.1.0 and i'm trying to create a responsive layout but i have a problem with AUI script.
It works fine on my PC when i resize the viewport but on the iPad and iPhone it detect only 960 viewport. How can i solve this problem?
Best Regards!
Ranjith Raj
RE: AUI().('aui-viewport')
14 de marzo de 2013 2:27
Respuesta

Ranjith Raj

Ranking: New Member

Mensajes: 8

Fecha de incorporación: 15 de septiembre de 2011

Mensajes recientes

Hi Riccardo Masini,

I am also facing the issue what u have posted. Please let me know if u resolved the issue.

Regards,
Ranjith Raj D
Ranjith Raj
RE: AUI().('aui-viewport')
14 de marzo de 2013 2:37
Respuesta

Ranjith Raj

Ranking: New Member

Mensajes: 8

Fecha de incorporación: 15 de septiembre de 2011

Mensajes recientes

As per the Md Mohiuddin post,
I got the solution that, If the application is not working on the mobile please include the following code in the header part.

<meta name="viewport" content="target-densitydpi=160dpi, width=device-width, minimum-scale=1, maximum-scale=1">

Regards,
Ranjith Raj D
Jennifer Carr
RE: AUI().('aui-viewport')
18 de diciembre de 2013 11:31
Respuesta

Jennifer Carr

Ranking: New Member

Mensajes: 6

Fecha de incorporación: 26 de julio de 2012

Mensajes recientes

Any tricks or best practices for getting the alloy to load faster? Right now our pages have a dramatically slow load time and it seems to be the last thing loaded on the page. So when you are viewing a page on your phone, the whole page loads in the desktop mode and then snaps to the mobile view afterwards.
Nate Cavanaugh
RE: AUI().('aui-viewport')
18 de diciembre de 2013 12:02
Respuesta

Nate Cavanaugh

LIFERAY STAFF

Ranking: Junior Member

Mensajes: 65

Fecha de incorporación: 27 de noviembre de 2006

Mensajes recientes

Hi Jennifer,
The easiest way would be to load the module in the head of your theme, and then use the module right away, like so:
 1
 2...
 3    $theme.include($top_head_include)
 4
 5    #js("$theme_display.getPathJavaScript()/aui/aui-viewport/aui-viewport.js")
 6
 7    <script type="text/javascript">
 8        AUI().use('aui-viewport');
 9    </script>
10</head>


That will make it so that the code is executed immediately in the head before the rest of the page has loaded.

I hope that helps emoticon
Jennifer Carr
RE: AUI().('aui-viewport')
18 de diciembre de 2013 12:23
Respuesta

Jennifer Carr

Ranking: New Member

Mensajes: 6

Fecha de incorporación: 26 de julio de 2012

Mensajes recientes

Nate Cavanaugh:
Hi Jennifer,
The easiest way would be to load the module in the head of your theme, and then use the module right away, like so:
 1
 2...
 3    $theme.include($top_head_include)
 4
 5    #js("$theme_display.getPathJavaScript()/aui/aui-viewport/aui-viewport.js")
 6
 7    <script type="text/javascript">
 8        AUI().use('aui-viewport');
 9    </script>
10</head>


That will make it so that the code is executed immediately in the head before the rest of the page has loaded.

I hope that helps emoticon


Thanks Nate!

Would you recommend I have this at the end of the head like how you have it or should I place it right after the opening <head> tag? I have several other javascript tags in the head.

-Jenn
Nate Cavanaugh
RE: AUI().('aui-viewport')
18 de diciembre de 2013 12:46
Respuesta

Nate Cavanaugh

LIFERAY STAFF

Ranking: Junior Member

Mensajes: 65

Fecha de incorporación: 27 de noviembre de 2006

Mensajes recientes

Hi Jennifer,
As long as it comes after the $theme.include($top_head_include) portion, it is fine.
But technically, since all script tags block the execution of anything else after it, it shouldn't affect things too much either way, since the page won't be visible until the entire head has been parsed anyways.
Again, hope that has been helpful emoticon
Marco Weiland
RE: AUI().('aui-viewport')
4 de enero de 2014 3:44
Respuesta

Marco Weiland

Ranking: Junior Member

Mensajes: 26

Fecha de incorporación: 28 de octubre de 2007

Mensajes recientes

for those who are struggling like me migrating 6.1.x to 6.2.x; seems like the css classes changed from .aui-view-960 to .view-960 and so on.