Instead of a view I have a repeat control with checkboxes on mobile page 1. I want to be able to navigate to another mobile page (Details page) by clicking on that checkbox label. So how do I do that? Is there a way to turn repeat control row into navigation item (so it shows an right arros). On that another mobile page I want to show details about clicked item in repeat. Assume I can use scope variables. But how do I actually navigate? Here is my simple mobile app page:
<xe:singlePageApp id="singlePageApp1" selectedPageName="mLists">
<xe:appPage id="appPage1" pageName="mLists">
<xe:djxmHeading id="djxmHeading1" label="*** app name ***">
<xp:this.facets>
<xp:button value="Submit" id="button1" xp:key="actionFacet"></xp:button>
</xp:this.facets>
</xe:djxmHeading>
<xp:panel id="panelMain">
<xp:repeat id="repeatList" rows="10000" var="rowData"
indexVar="rowDataIndex" repeatControls="true" value="#{viewScope.LIST_REPEAT}">
<xp:checkBox id="lstCheckBox_${rowDataIndex}">
<xp:this.text><![CDATA[#{javascript:rowData[1]}]]></xp:this.text>
</xp:checkBox>
<xp:br></xp:br>
</xp:repeat>
</xp:panel>
</xe:appPage>
<xe:appPage id="appPage2" pageName="mDetails" resetContent="true">
<xe:djxmHeading id="djxmHeading2" label="DETAILS" back="Back" moveTo="mLists" transition="slide">
</xe:djxmHeading>
<xe:djxmRoundRectList id="djxmRoundRectList1">
<xp:panel></xp:panel>
</xe:djxmRoundRectList>
</xe:appPage>
</xe:singlePageApp>
There are Simple Actions for moving between pages inside mobile controls. Here's an example on an image.
<xp:image url="/63_48x48.png" id="image3" styleClass="imageLeft">
<xp:eventHandler event="onclick" submit="true"
refreshMode="complete" id="eventHandler2">
<xp:this.action>
<xe:moveTo direction="Left to Right"
targetPage="manifests" forceFullRefresh="false"
transitionType="slide">
</xe:moveTo>
</xp:this.action>
</xp:eventHandler>
</xp:image>
I highly recommend you abandon all use of Mobile Controls inside XPages. I've talked about this off an on over at NotesIn9. Sadly it's just not a safe way to build applications.
To better flesh out the "Don't use Mobile Controls" statement. Here's a link to several blog posts I made when iOS8 came out.
http://www.notesin9.com/?s=ios8
Here's the skinny : iOS8 came out and broke Mobile Controls. It could EASILY happen again.
What are "Mobile Controls"? They're pieces of the dojo javaScript framework. The break was caused by a change in iOS Safari I think. Dojo did put a fix in but then what? We couldn't easily absorb the fix. We needed to wait for IBM to release a fixpack with the newer version of Dojo. It couldn't be delivered via the Ext. Library unfortunately. IBM did get a fix out very quickly for them but for the users was a problem for several weeks. And that fixpack was unprecedented I believe. So it could have gone much longer.
More recently Chrome caused something to break in how dojo allows XPages to do the Partial Refresh. Within 10 days or so Chrome did correct their change and pushed out an update.
Dojo, different browsers, different os's. At any point 1 of them might break another. There's so many moving parts. The core risk here with Mobile Controls is that in this situation IBM just can not get a fix out in a manner that's timely to a user.
Note I've not even mentioned that Mobile Controls, even if there was no risk, just don't scale well to bigger apps. If it's not simple just don't do it. Also while IBM has said they still support them, I believe they've said that they won't be enhancing them and recommend the Bootstrap option going forward.
It's much better to use a framework you have more control of. They can update Bootstrap much faster because it's in the Ext. Library. You could even manually use your own version of Bootstrap if necessary. So it's just a safer play.
Why listen to me?
I did many videos (NotesIn9.com / XPages.TV) and presentations on teaching people how to use Mobile Controls. I did a big app in the Day Job using Mobile Controls. I'll never use them again for anything and recommend you don't either.
Related
I have developed a website based on Joomla 2.5 and I wish to make it mobile friendly, without changing (or changing as less as possible) the desktop version of my website.
So I have installed Joomla Mobile component. This component allows activating dynamically a different template (w.r.t the one that is used on desktop), when detecting a mobile device.
By default, the template that is activated when detecting a mobile is "Mobile_basic". This is a simple and really nice template, but the problem is that it doesn't support some menu positions, which are used by the desktop template. So the result is that some menu items are not displayed on mobile device.
I give an example for better clarification: my website uses a menu that is placed in "right" position. But the "Mobile_basic" template doesn't have this position. It has instead other positions called "mj_top", "mj_top2"...
The possible solutions could be:
1) Find a way to instruct Joomla to show a menu item in a different position, depending on the template which is used at that moment
2) Create new positions which are valid both desktop and mobile templates
Has anybody some better idea to solve my task?
Best regards
Alberto
Maybe best solution will be use the same position in both templates [desktop and mobile] ?
at first i suggest to make a copy of mobile template - when you update your Joomla Mobile component it can overwrite your changes.
here you can find easy way to do that
https://docs.joomla.org/J3.x:Modifying_a_Joomla!_Template
then edit index.php file in your mobile template
templates/My_mobile_basic/index.php
and insert this code in place you want to display menu
<?php if ($this->countModules('right')) : ?>
<jdoc:include type="modules" name="right" style="none" />
<?php endif; ?>
Code above check is there are any modules with 'right' position, and display them
Also you need to change default template at Joomla Mobile configuration - so it will use your version
thank you for the smart hint.
I have tested it an it allowed me to achieve my goal, but I had to abandon it because I found a bit difficult to control the order and the visualization of the objects in the mobile version.
Finally I opted for a solution that I would recommend to others who have my same need. With the menu manager I have created "clones" of the menus that are visible only in the desktop template, using positions that are valid only for the mobile template. Then I have populated these cloned menus with a copy of the items that are in the desktop menus.
In this way I can control the order and the visualization of the menu items in the mobile version, easily and independently from the desktop version.
Is there a way to use responsive design principles with Google Sites. Has anyone tried that. Could you direct me to a sample site. I looked at this google help topic but then that is supposedly about exclusively mobile sites.
My main focus is a normal website which is optimized for web rather than primarily a mobile site.
Alternatively would Blogger be a better option in this case as that allows to change CSS.
I think your negative impression is right. It doesn't implement the features you'd expect in responsive design.
The key to your question is that Google Sites don't use a viewport declaration (meta viewport in the head element). If you don't have that, then device browsers treat you as a legacy desktop-only website. They assume you'll break completely below ~830px, and set a page min-width accordingly. That doesn't sound much like responsive design to me.
Google Sites don't let you write your own CSS or HTML HEAD, so you can't implement a more responsive design yourself.
To be fair, you can choose to not set a fixed page width. Also navigations buttons will reflow on relatively narrow windows, if you're using the "horizontal navigation" feature. The latter isn't great design but at least it's degrading gracefully.
There is an option "Automatically adjust site to mobile phones" under Manage site -> General. However many people suggest it's better not to use it :). I tried enabling it on an old site, previewing the page, and selecting "preview in mobile". At least on Firefox on my original netbook (800px width), it was not responsive. It didn't expand to use the 800px screen properly.
As an aside, the line-wrapping (or absence of it) is a pre-existing issue with my site. You could blame this on me for not testing it :). However it illustrates a limitation of the WYSIWYG editor in Google Sites. It doesn't show, check for, or filter out the formatting that causes this problem.
Mobile yes, responsive no.
I was messing with Google Sites today and you can make a site mobile friendly (I had to come here to get started!). I just used the "Blank Template" to mess around with.
You do need to activate (like others that have mentioned):
Options (gear icon) > Manage site > (scroll down to Mobile) Check.. Automatically adjust for mobile phones. Yeah, let's bury that option way down at the bottom!
Considering the whole mobile "push" Google implemented in the spring of 2015 this should be ON by default for any newly created Google Site.
Just selecting that option makes an OK (basic) mobile site. Not a responsive site. So on my iPhone it does scale photos correctly to fit the device and switches the main horizontal menu to the "hamburger" icon/menu. But collapsing the desktop browser window does not produce responsive results.
https://sites.google.com/site/rwstws51/
As a test, I uploaded a way too large photo (2.5mb) to see what would happen. Running the site through Google PageSpeed Insights it did not display any "optimize photos" warning, so seems to serves up an optimized photo for phones and desktops.
I guess the basic theme is actually called "Ski." I tried out the "Legal Pad" theme and it was totally borked on mobile. I think due to the header and content area background images.
To me Google Sites is ideal if you are already heavy into Google's other products... drive, docs, Google+, webmastertools, analytics, etc... As it has links to add those types of items when editing. Or need a quick site for collaborating as you can easily set the site access like YouTube,Drive items.
Also, you are very limited as to what html you can added. Trying to add a script tag gets stripped out when attempting to save. So again depending on the use there are definitely other options out there.
The answer applying to old "Classic" google sites is NO.
If you create your own custom HTML forms with apps script, you can add the #media viewports etc to the css for those pages/forms,so that helps...
but the google site frame around overrides custom css attempting
responsive design at the page level.
now a days its possible to make a responsive Google Site. since Google has enhanced this feature "Automatically adjust site to mobile phones" option in the Manage Site option button.
to find the option- go to> Manage Site> General> , in the general settings page's lower portion you can see a radio button named "Automatically adjust site to mobile phones". Just tick the radio button & u have enhanced the feature.
Refer an example site made with responsive Google site www.jyotiprokashmusic.com
Any idea, how can we create already running website to Mobile Website?
Are there, ready made plug-ins / components available ?
I've found some like wapple.net however it is paid one, which is not feasible for client's budget.
I have found, XML creations is pretty easy in CakePHP, though your ideas would be appreciated.
Kindly share more details on the same !
Regards,
i dont think that you'll find a plugin that will transform your website for mobile. because there are too many decisions to make when creating a mobile web, for me it's like creating a completly different website with only the necessary information that your website has..
But maybe there are components that might help you with the small taks (like detecting the user agent and stuff).. here you can read two good articles about creating a mobile website:
http://www.smashingmagazine.com/2010/11/03/how-to-build-a-mobile-website/
http://www.smashingmagazine.com/2009/01/13/mobile-web-design-trends-2009/
There's also a few JS frameworks that will help you with the interaction with the user, i've only used Sencha touch..
But my guess is that you'll have to adapt/create "manually" the css, html and js for mobile, and I don't think that there's a magical tool to do that, you'll have to do it yourself (or pay someone to do it =D)
Hope this helps, Good Luck!
You may be interested in my answer over here:
CakePHP v2.2.1 Solution (+ Cookies to persist mobile/desktop/other layout)
In a nutshell:
Lets you setup mobile layouts /Views/Layouts/mobile/default.ctp
Mobile views /Views/Pages/mobile/home.ctp
Sets a template variable $is_mobile
Lets you force a specific layout ?forcedLayout=desktop, and remembers this in a COOKIE
If no layout is forced it uses CakePHP's User-Agent detection to make the decision $this->request->is('mobile')
If no ../mobile/ layout or view file exists then it falls back to the default layout or view.
Typically with cakephp you want to create a separate view layout for mobile viewing. The app controller should change the default view layout to the mobile one when detecting a mobile browser.
Your mobile view layout should be made by you, only you know what data on your site is important and what is not (aka, what should be removed /kept for mobile viewing) Also your mobile layout can use alternate CSS and only load the elements you want.
To learn more about creating views in cakephp see the cookbook:
I'm looking for something similar to the VB6 / .Net Winforms "Browser Control", that let's you show a browser inside your application.
I don't want to just render a page, I want it to be a fully-functional browser, in which people can click links, will run Javascript, etc.
In essence, what I want is an IFrame, only that it runs inside a Flash app, or a Silverlight app.
The ultimate reason for this is that I want to defeat IFrame busters. I'm making a web app that lets you see other sites inside of it, and I'm running into a bunch of sites that have this code:
var t=top.location,w=window.location;if(t!=w) t.replace(w);
(that's from eBay BTW)
which essentially pops the user out of my site and into theirs.
My hope is that by using a "browser control" of some sort, inside a plugin sandbox, "top", will be top for that browser control, and not for my site.
Of course, if you have any other ideas to achieve the same, they'll be more than welcome.
Edit: I've tried the Component One control suggested by Bill, but it didn't work for these purposes, because it's creating an IFrame outside of the SilverLight control, so it executes in the same context as the page hosting Silverlight, which is what I'm trying to avoid.
Northcode SWF Studio allows you to add browser window on the stage in Flash. I personally use SWF Studio as a third party SWF2EXE tool to extend the power of Flash projectors. It's quite stable and powerful. As far as browser control is concerned here is the example you can download and test if it serves your purpose. Check the Browser APT here.
We've not built a component to enable folks to do this but we're open to suggestions here. That being said, easiest solution is an iFrame, but word of caution in that when you overlay an iFrame over the the top of Silverlight we've seen customers experience perf issues as a result (mostly due to alpha transparency of the iframe etc).
This isn't isolated to Silverlight, Flash suffers the same issue as it has to do with browsers and rendering within the given operating system.
HTH.
Scott Barnes / Rich Platforms Product Manager / Microsoft.
I use the HTML control created by Component One. It has the limitation that the Silverlight object in the page should be set to windowless, but otherwise it works very well.
It's an old post but I'll add my tupence answer. I used the DivElements free control for Silverlight link text and it works quite nicely. It just positions the div accurately so that it looks like it's on top.
As for the other such controls, you've got to set the windowless property of the Silverlight container to true.
It works really well for me and I'm able to seemlessly have Google maps and the Acrobat plugin displayed side by side with my Silverlight application.
PS: because the component just adds a <div> to the page, you can't do stuff like having it load dynamically Javascript file like in the <header> tag.
PPS: when setting the HTML code "by hand", be sure to hook up on the DocumentReady or Loaded event before playing with the HTML DOM.
Hope that helps someone.
I can present multiple pages in Silverlight using
Content = new DetailsPage();
However is this can be confusing to a user who may not even know the page is in Silverlight and would be expecting to hit the back button on the browser.
Obviously I can add my own buttons but this doesn't seem right.
How can I allow "normal" browser navigation using the back/forwards button?
In Silverlight 2, you can still handle navigation. It's just a more manual process.
Call
HtmlPage.Window.NavigateToBookmark("blah");
to add the "#blah" to the end of the URL.
Call
string bookmark = HtmlPage.Window.CurrentBookmark;
to find out where you currently are. People are also tying into jquery/Asp.net AJAX libraries to use their navigation support.
In Silverlight 3, you can use the Navigation Framework to do some of this automatically. File->New Project->Silverlight Navigation Project.
You should really formulate a question.
I'll assume that you want to know how to achieve multi-page navigation with browser back-button support.
There one simple answer, which is to use Silverlight 3 where it is supported out of the box, as well as in-app navigation using the address bar.
Release date is set for july 10, so there's not much longer to wait.
Be careful, you cannot at the moment install both Silverlight 2 and 3 on one machine, and there is no end-user plugin available (only developper runtimes, to install manually).