how to set the background color for widget in qooxdoo mobile framework? - mobile

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 =)

Related

Custom marker with Angular Google Maps

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

Apply theme dynamically on Onsen UI

I'm working on a customizable application based on Onsen UI. I'd like to know if Onsen UI exposes a method (or if there is some way to hack around it) to set a theme dynamically, in the same way components.onsenui.io does for previewing a generated theme.
What I'd like to accomplish is that the user can select the theme colors for his own application. So i would need some way to set the ui colors using Javascript instead of downloading a static/generated theme.
Thanks
No, Onsen UI doesn't provide APIs to change theme dynamically.
Changing or editing the stylesheet programmatically is the way to do this.

How do you get ActionBar from SocialBoo theme to show up in your GUI?

Ok. Starting over with this. I see that the SocialBoo theme has something similar in what I want to achieve. If I find that I can work and improve. I Added a new socialboo theme and created blank GUI. Assumed it would be a Commandbehavior but that didnt do the trick, so did adding tabs. Seems like those components are not for that specific bar... However did notice another issue.
How do I get the social actionbar as displayed in the socialboo theme? (Screen shot). Assuming those images etc are part of the default theme, right.
Also, If I create a TouchCommand = bar, title or native. It displays fine in Gingerbread but not ICS. DO you know why is that? (screen shot)
Thanks, in advance.
Those images aren't a part of the theme, they are a part of the specific demo. If you add a Tabs component to the center of the border layout UI you will get thee tabs where the "icon" property will allow you to customize the unselected icon and you can customize the selected icon as well. You can see the full source/resource file of the social boo demo in the docs and demos zip in the download section.
Generally customizing commands is a bit complex because of platform specific constraints, when running on an Actual Android 4 device we use the native ActionBar by default to provide the experience Android users are used to. This is hard for us to simulate so you will only see this properly in the device build. I suggest not relying on commands, it seems that what you are trying to achieve is easily doable with tabs and its possible that's why you had difficulties in your other question.

is it possible to render a XAML canvas wihtout Silverlight?

Is it possible to create an online photo editor in XAML (editor allows users to add text, other images, clipart) that simply renders in a browser without the need for the user to download a plug in like Silverlight?
No. Closest would be using HTML5's canvas and javascript and/or jquery.

Manipulating silverlight media element and associating with jQuery UI Widget

I have no background with ASP and Silverlight. As a jQuery UI widget developer, I have to write a seekbar widget for silverlight media element player. I need to understand how should I define an interface for my widget if I have to associate it with silverlight?
How can I intercept MediaElement instance?
How can I know what is total media duration?
How can I know about current media position?
How can I call the player to play from some specific position?
How can I bind events with silverlight player so that with each tick it should invoke my seekbar to get updated?
All I want with JS/jQuery environment. What is the best source to start?
NOTE: I am from linux background, so I have moonlight for my browser.
You should read the JavaScript API for Silverlight reference on MSDN. It will provide answers to all of your questions.

Resources