I'm trying to use amChart in a qooxdoo mobile application. The problem I'm facing right now is that in qooxdoo I don't have a <div> tag to draw the chart at. Because chart.write("chartdiv"); expects a <div> container. In qooxdoo desktop it would work like this:
chart.write(widget.getChildControl("body").getContentElement().getDomElement());
Unfortunatly the qooxdoo Mobile widget does not provide any of these methodes.
Can somebody tell me how this can be done with a qooxdoo Mobile widget?
qx.Mobile is much nearer to the DOM tree than qx.Desktop.
A default widget is based on a "div" tag. So if you use, for example, a qx.ui.mobile.container.Composite(), and then call getContentElement(), you will have the required "div" element.
Another way could be the http://demo.qooxdoo.org/current/apiviewer/#qx.ui.mobile.embed.Html
Related
I am using the Angular Google maps directive to show maps on my webpage. Currently my markers are created using SVG but this is slow as I have to pass my information into a function that creates an SVG in memory to pass to the Google Icon. So I want to replace it with a custom HTML marker which will hopefully be less code and can leverage CSS classes for lots of the heavy lifting.
Unfortunately this isn't available as standard within the Angular Google Maps markers (unless I havent seen it?!)
I found a tutorial on how to do this with Overlays but I need clustering to work with my icons.
How can I do this? Without rewriting everything from scratch? Ideally I'd like to leverage as much of the existing angular-google-maps code as possible
The way I ended up doing this was to put in rich HTML into the labelContent property, setting a class on it via labelClass and then setting the icon to be transparent (https://maps.gstatic.com/mapfiles/transparent.png)
This way the actual icon is invisible but you can create rich HTML / CSS markers through the label. And this doesnt break functionality with the clusterer
I have just started using angular-gridster library and I am wondering how I can embed an html page in a widget. I mean, how can I 'point' towards an html resource which loads its data separately etc. etc.
For example, I would like to embed a chart of some sort in a widget with the purpose of creating a dashboard.
Thanks!
You can put an iframe element inside of a Gridster widget. From experience, my recommendation is to detect when the user begins resizing a widget with an embedded iframe, and temporarily set display: none on the iframe during the resize, otherwise the browser will have big problems. Once the resize is done, reveal the iframe again.
I have actually solved it using this answer: Widgets with different dynamic content (angular-gridster)
Slightly more complicated than just using an iframe, yes, but then again you have a better modularity - each widget will have its own directive and all that. Thank you emackey!
What is the difference between Ionic Framework vs Famo.us Framework. It is possible to use both framework in one project . Which One support smooth render graphic on mobile devices ?
Both framework support AngularJs?
Both frameworks work with AngularJS, but they come from a different direction and have different goals.
Ionic
is built on top of AngularJS and extends it, providing you with buttons, grids and other ready made UI elements to help you publishing your mobile app real quick. AngularJS focuses on data binding and the MVC structure of your app and doesn't really care about whether it's running in a desktop browser or on a mobile device. Ionic concentrates on the presentation of your app data and extends AngularJS to make it fit for use on mobile devices and supply you with design patterns that mobile users have come to expect. Since Ionic sits on top of AngularJS, you can't really have Ionic without Angular.
Check out Ionic's components to get a better understanding.
Famo.us
on the other hand strives for the fastest render performance. It just so happens that you can put regular HTML into a Famo.us Surface — which is the container that holds the content to be displayed. That content can be HTML, but doesn't have to.
Famo.us itself doesn't use the standard HTML reflow to position its surfaces in the viewport but its very own implementation of a render tree, so you're free to manipulate surface position and rotation, even in 3D space, with buttery smooth performance. HTML that is put inside a surface on the other hand uses reflows to position its elements just like you're used to. Read more about the render tree.
Famo.us can output to HTML, but can also render using WebGL or even Mixed Mode, combining DOM with WebGL. This allows for fancy graphic effects that wouldn't be quite possible with plain CSS. There's also tight integration with Easing and Physics to allow for playful and realistic animation.
Now that there's Famo.us/Angular, I don't see why you couldn't use Ionic and Famo.us in the same app, although I haven't tried it yet.
Summary
Ionic sticks with the regular DOM for rendering and focuses on mobile design / UX patterns. Famo.us disregards the DOM and lets you (read: requires you to) build / populate the render tree, provides physics and allows for more complex and fluid animations. This also means that using Famo.us comes with a learning curve. Good thing is: you don't have to go 'all in', since you can build certain views of your app with Famo.us and then use regular HTML/CSS for everything else.
ionic lists work well when famous is loaded in the same index.html SPA.
Some things like touch to pan in angular-google-maps stop working when ionic and famo.us share the same page.
Transitions from a ionic tabbed state to a detail view using ion-nav-bar animate badly too.
So i recommend you to keep things separated just by switching your app from famous.html to ionic.html as needed. each implementation having its own stack of dependencies and its own separated styles as they come in the sample apps.
you can transition by using document.location.href
i think you can find a way to transition to specific states from one world to the other by setting the proper state in the url.
I am developing a mobile app using dojo mobile. I need functionality similar to dijit.form.Select However I have not been able to locate mobile equivalent for the same.
If such a widget is not available off the shelf, is there any way I can achieve the required functionality using dojo mobile module.
I am learning qooxdoo framework and I am going to develop web app on mobile device. However here comes a problem. I do not know how to set the background color for qx.ui.mobile.core.Widget. In terms of qx.ui.core.Widget(Another class, I think this is for desktop application), there are methods to set background color. However, for qx.ui.mobile.core.Widget which is used for developing mobile app, I can find any method in the API reference.
I am trying to do this by 'addCssClass()' method, it works for label and so on, however, it is not working for composite widget. By default, the background image of mobile app is the image used in iPhone group style tableview. However, what I am trying to do is to modify the background image to a pure background color.
I do not know how to accomplish that, can anyone give me some ideas? Thank you!
there are several ways to alter a qx.Mobile widget:
if you use the "getContainerElement()" method, you get the HTML element directly.
There you can set any attribute, you could set in plain HTML, too.
Another possibility is to add a class, as you mentioned: "addCssClass("foo")"
You just have to add your css selector statement to your projects resource folder:
.. resource/ yourproject /css/styles.css
.foo{
background-color:red;
}
or you could even set the style with brute force, through http://demo.qooxdoo.org/current/apiviewer/#qx.bom.element.Style
set()
Now choose your weapon =)