Firefox extensions made in XUL had a nice Tab element. But with Jetpack, I see nothing that would allow me to make tabbed content in a panel module, for example.
I understand that Jetpack uses jQuery. Would the proper way to create tabs be to include jQuery UI or is there some other approach?
Yes, the Addon SDK encourages using standard web technologies instead of XUL, so the appropriate way is to use any JS framework; jQuery UI should be fine too.
Related
Is there any UI automation framework(like Selenium or Potractor) for web sites built using google's Polymer?
Well, I haven't tried but Selenium (maybe Protractor too) should work fine. After all Web Components is just DOM. With Shadow DOM however you'd need to prefix selectors with body /deep/. And I don't think XPaths will work.
And, there's also Web Component Tester although that's something different, not used to test entire pages AFAICT
Selenium does work with Polymer. However, there are some challenges with finding/working with elements within shadow doms. It seems that most buttons are exposed as are text fields. The challenge that I have run into and am still working on is testing date pickers, drop downs and lists. These element seem to be obfuscated behind a shadow dom or something similar, but the /deep/ method doesn't work to access them.
Selenium works with polymer. I tried finding solution online but failed. Experimented and found a way which helped my testers to completely automate our application built on polymer (E-E) with Selenium.Icludes ircular picker, dropdown, tabs, lists, buttons, links, time picker and other functionalities that are custom built but were possible over time.
I am trying to build a Vaadin 7 elements and it would be beneficial if I can somehow directly use the polymer elements like these ones -->
http://vaadin.github.io/gwt-polymer-elements/demo/#paper/ButtonSample
However, there is no clear cut explanation or tutorial on how to add polymer elements in Vaadin application directly.
If you want to use web components on server-side there is an experimental addon from vaadin. Here you find a demo application
On the Vaadin forum page suggestion is to take a look at:
https://vaadin.com/labs-elements, https://vaadin.com/directory#!addon/elements-add-on and
https://github.com/vaadin/serverside-elements
but this is still experimental.
While we are waiting for official support you can include Vaadin Elements as stated in Demystifying Web Components or to include Vaadin Elements as stated in Integrating JavaScript Components and Extensions and Using web components in plain java.
I'd like to add a slider (like this: http://www.menucool.com/javascript-image-slider) on my Wordpress.com blog on the sidebar without changing my theme. However, I'm not allowed to use Javascript or CSS. Is there a way I can write this?
Looks like you are using an HTML editor which does not allow you to write your own javascript. Editors which provide "themes" are easy to use, but canNot guard/sustain its "theme" properties/appearances against javascript and CSS code. Therefore, most internet editors do not allow it. They offers only certain objects which the "theme" can process.
Since much of the theme is defined in CSS properties, it would be nice if the theme creator would provide documentation and allow the user to enter CSS which would alter the actual theme declarations. JavaScript and CSS could easily render the theme inoperative. And what seems to be "functional" CSS and/or JavaScript code could suddenly disrupt the theme due to any alteration. Supplying ability and documentation for either would require theme versions to be retained so that the chosen theme could continue to operate properly with your JavaScript and CSS. In other words... If the editor provider tweaked the theme, then your functional theme/CSS/JavaScript combination could easily be rendered inoperative and call-in complaints would arise.
If you're not allowed to use jQuery, then a flash object would be the only option IMO.
I'm wondering if there are any good non-native form inputs for web development? I am currently using the built in <input> controls. They work just fine, but for my application they are too big (especially on OS X). I am wondering if there are any libraries that I can drop in as replacements.
I am especially interested in ones that:
Are a close to native control behavior as possible. Support for tabbing, highlighting current textbox, pressing up/down in <select>, etc.
Have something that replicates <select>
Look good and are compact
I am aware that you can use CSS for some styling, but it's pretty minimal and looks different depending on the browser.
Thanks for your help.
These two from Codrops give the native selects "display: none", then add an overlay that can be styled/modified.
Pretty simple, you just need to call the plugin on your select box.
Demos
http://tympanus.net/Development/SelectInspiration/index3.html
http://tympanus.net/Development/SimpleDropDownEffects/
HTML is not modular like that. Importantingly, you're also restricted by the browser support. The only ways to customize the look'n'feel of HTML are CSS and Javascript. There are crossbrowser CSS/JS based UI frameworks available like jQuery UI and several CSS based form solutions with the goal to have the same look'n'feel among the (most) browsers.
You can also consider to develop an Rich Internet Application (RIA) using one of Flex, Air, JavaFX, Silverlight, etc. This way it looks exactly the same in every webbrowser, but that requires at least an additional plugin which the client may have to install first.
http://plugins.jquery.com/project/jNice
http://www.whitespace-creative.com/jquery/jNice/
You may want to customize the images, sizes and CSS with your own.
You could try creating the controls with Flex/Flash and using JavaScript to retrieve the values.
This would allow you to customize the control as much as you wanted while still staying compatible with most users/browsers.
I have a suite of custom tags in my application that abstract some of the common system tasks.
I am using TinyMCE as my HTML editor, and want to be able to render my custom tag as an image in the editor when in the WYSIWYG view. Similar to TinyMCE's built-in behaviour for SWF files.
Is there an easy way to do this in TinyMCE?
UPDATE:
It seems that custom tags barely work in TinyMCE at all.
Some of the problem seems to be that face that my tags are namespaced:
<o:some_tag />
Which is causing all sorts of issues.
Is there a editor that supports this kind of functionality better?
I found a method that meets my needs and turned out to be a little easier than constructing a plugin.
Full details here: How-To: Custom tags with TinyMCE.
Unfortunately there is no easy way. Tinymce supports "extended_valid_elements" property . However as you want to render this custom tag as an image, all you can do is to create a custom plugin for your task
Try same code like media plugin (it is not build-in behaviour, it is a plugin). Or yoy can check page break plugin.