I am trying to create an app with App Inventor which allows you to see files from a server and also download and share them.
I created 3 listviewers one that opens the file, the second allows to share it and the last allows you to download it. And It looks like this:
But I am looking to put all of this in the same column like this app do:
Does any one know what I have to do create a format like that?
Thanks.
Finally thanks to www.jquerymobile.com and some Taifun's tutorials I could create an interface similar to what I was looking for. I also achive how to recover he index selected by the user. Here I post the jquery code:
<!DOCTYPE html>
<html>
<head>
<title>0</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<style>
.split-custom-wrapper {
/* position wrapper on the right of the listitem */
position: absolute;
right: 0;
top: 0;
height: 100%;
}
.split-custom-button {
position: relative;
float: right; /* allow multiple links stacked on the right */
height: 100%;
margin:0;
min-width:3em;
/* remove boxshadow and border */
border:none;
moz-border-radius: 0;
webkit-border-radius: 0;
border-radius: 0;
moz-box-shadow: none;
webkit-box-shadow: none;
box-shadow: none;
}
.split-custom-button span.ui-btn-inner {
/* position icons in center of listitem*/
position: relative;
margin-top:50%;
margin-left:50%;
/* compensation for icon dimensions */
top:11px;
left:-12px;
height:40%; /* stay within boundaries of list item */
}
</style>
</head>
<body>
<div data-role="page">
<div data-role="content">
<div id="searchPickPlace">
<script>
// get the table to display from the window.AppInventor object and split at new line
var urlArray = window.AppInventor.getWebViewString().split("\n");
// split at comma
var doc = document;
var fragment = doc.createDocumentFragment();
document.write('<ul data-role="listview" data-filter="true">');
for(i=0;i<(urlArray.length-1);i++){
j = i + 1; //+1 because app invetor array start at position 1
var rowArray = urlArray[i].split(",");
html = '<li> \
<a id="R_'+j+'" onClick="reply_click(this.id)" href="#">\
<h3>'+rowArray[1]+" "+j+'</h3>\
<p>description</p>\
</a>\
<div class="split-custom-wrapper">\
<a id="D_'+j+'" onClick="reply_click(this.id)" href="#" data-role="button" class="split-custom-button" data-icon="arrow-d" data-rel="dialog" data-theme="c" data-iconpos="notext"></a>\
<a id="S_'+j+'" onClick="reply_click(this.id)" href="#" data-role="button" class="split-custom-button" data-icon="gear" data-rel="dialog" data-theme="c" data-iconpos="notext"></a>\
</div>\
</li>';
document.write(html);
}
document.write('</ul>');
function reply_click(clicked_id)
{
//alert(clicked_id);
window.document.title = clicked_id;
setTimeout(function(){window.document.title = "0";}, 500);
}
</script>
</div>
</div><!-- content -->
</div><!-- /page -->
</body>
</html>
With this code I get this interface:
When you click a button the text label change to the number of the index you have clicked with a prefix depending if you have clicked the main area or the other buttons. The text label only change during less than a secon so if during this time you click again the interface wont recive the click. I think this is work perfect for what I want to do becaus I don't want any one that spam the button but If want an app where you can spam a button you will have to figure it out an other solution.
To do that you will need a clock. In thsi example I have obtained the table from my web site but you can create your own table with a text variable separeting the columns by comas and each line by "\n". I post the app invetor blocks down here:
I am aware that maybe there is a better solution if any one can find it out, I am open to listen new sugestions.
Thanks
Related
I am trying to make a Slick slider jump back to the first slide after the last slide. The closest answer to this topic I have found is this:
Slick slider goto first slide
But unfortunately it uses the fade animation so it does not have the effect I'm after. What I want is that the slideshow will play until the end and then scroll back to the beginning after the last slide is shown.
There are only three slides in my use case, and I can easily fire a message in the console when the last one is reached, but the slickslider method slickGoTo doesn't work.
(function($) {
var slider = $('.sightbox__slideshow');
slider.slick({
arrows: false,
autoplay: true,
infinite: true,
});
function jumpBack() {
slider.slick('slickGoTo', 0);
}
slider.on('beforeChange', function(event, slick, currentSlide, nextSlide) {
console.log(currentSlide);
if (currentSlide === 2 ) {
console.log('last slide');
jumpBack();
}
});
})(jQuery);
.sightbox__slideshow {
width: 250px;
padding: 50px;
}
.sightbox__slide--1 {
background-color: pink;
}
.sightbox__slide--2 {
background-color: green;
}
.sightbox__slide--3 {
background-color: yellow;
}
<link href="https://kenwheeler.github.io/slick/slick/slick.css" rel="stylesheet"/>
<div class="sightbox__slideshow">
<div class="sightbox__slide sightbox__slide--1" id="sightbox__slide--1">
<div alt="" class="sightbox__slide-img"></div>
<p class="sightbox__slide-txt">1. first</p>
</div>
<div class="sightbox__slide sightbox__slide--2" id="sightbox__slide--2">
<div alt="" class="sightbox__slide-img"></div>
<p class="sightbox__slide-txt">2. second</p>
</div>
<div class="sightbox__slide sightbox__slide--3" id="sightbox__slide--3">
<div alt="" class="sightbox__slide-img"></div>
<p class="sightbox__slide-txt">3. third</p>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://kenwheeler.github.io/slick/slick/slick.js"></script>
You may change the trigger event to afterChange and resort to setTimeout function to stay on the last slide for a while (3 seconds approx).
The slick-slider preventing a custom action on its events can also be overridden using the setTimeout function.
function jumpBack() {
setTimeout(function() {
slider.slick("slickGoTo", 0);
},3000);
}
CODEPEN
Hope this helps.
Is it possible to set a margin around fields.
For example in image :
If I want to set lower (separated) checkBox in line with above once, is there a way to do it?
Marko
Start by inspecting the HTML code (with Chrome).
The code corresponding to the Checkbox Field is something like that:
<div class="form-field check-box-field"
data-modelclass="org.eclipse.scout.widgets.client.ui.forms.CheckboxFieldForm$MainBox$ConfigurationBox$CheckboxField"
data-classid="CheckboxField_org.eclipse.scout.widgets.client.ui.forms.CheckboxFieldForm"
id="scout.CheckBoxField[1-49]"
style="left: 0px; top: 14px; width: 1598px; height: 30px;"
>
<div class="field has-inner-alignment halign-left valign-top" style=
"left: 148px; top: 0px; width: 1420px; height: 30px;">
<div class="check-box" tabindex="0"></div>
<div class="label">
Checkbox
</div>
</div>
</div>
With CSS you can do anything possible:
.check-box-field {
background-color: red;
}
Now because you do not want to add some custom CSS style for all CheckBox Fields, you can define a custom Css-Class in your CheckBox:
#Order(4)
public class UnknownCheckBox extends AbstractBooleanField {
#Override
protected String getConfiguredCssClass() {
return "checkbox-under-listbox";
}
// ... Some Code ...
}
And now you add this CSS code:
.checkbox-under-listbox {
margin-left: 20px;
}
I have realized this example with the Widgets Demo Application (org.eclipse.scout.docs repository, releases/5.2.x branch). I added my css code in this file: org.eclipse.scout.widgets.ui.html/src/main/js/widgets/main.css (It is probably not the best approach to have everything in main.css).
You can deduce from this example how you can add an additional CSS/LESS module and macro to your application. This post: Inclusion of additional icons from font-awesome might also be usefull. You will have a main.css instead of a font.css.
WARNING: this is not state of the art.
At the end this is normal HTML development (single page application of course), so you can do what you want...
If you do not want to use the LESS compiler and the File preprocessor, you can simpelly add a normal CSS file in the folder:
<your_project>.ui.html/src/main/resources/WebContent
Let say:
<your_project>.ui.html/src/main/resources/WebContent/my_custom.css
Do not forget to include your CSS File between the <head> and </head> tags in the HTML index file:
<your_project>.ui.html/src/main/resources/WebContent/index.html
Something like:
<head>
<!-- some code -->
<link rel="stylesheet" type="text/css" href="my_custom.css">
<scout:stylesheet src="res/scout-module.css" />
<!-- some code -->
</head>
You can always use custom CSS: Let your field implement IStyleable and use setCssClass() to apply an appropriate CSS class. I'd try to avoid using such pixel pushing approaches as much as possible.
I came across a difficulty where I have to perform Ctrl+mouse click operation using watir-webdriver with Ruby
In my web application application I have to select multiple options using Ctrl key plus mouse clicks (random options not all options). I could see multiple solutions using C# or Java. But I couldn't find any solution using Ruby and Watir-webdriver. Can anyone help me?
I have tried using the below code
regionsArray=['Airlines', 'Biotechnology', 'Financial Conglomerates', 'Food Retail', 'Restaurants', 'Savings Banks and Tobacco']
oPage.action.key_down(:control)
puts "hello2"
regionsArray.each { |x|
indXpath="//div[#id=('options-tree-region')]//div[text()='#{x}']"
indText = UtilsCommon.GetElementWithXpath(oPage, indXpath, 10, true)
if indText!= false
indText.click
end
I assume that the control behaves similar to the jQuery UI selectable and will use their demo as an example.
The demo page is:
<html lang="en">
<head>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="https://jqueryui.com/resources/demos/style.css">
<style>
#feedback { font-size: 1.4em; }
#selectable .ui-selecting { background: #FECA40; }
#selectable .ui-selected { background: #F39814; color: white; }
#selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
</style>
<script>
$(function() {
$( "#selectable" ).selectable();
});
</script>
</head>
<body>
<ol class="ui-selectable" id="selectable">
<li class="ui-widget-content ui-selectee">Item 1</li>
<li class="ui-widget-content ui-selectee">Item 2</li>
<li class="ui-widget-content ui-selectee">Item 3</li>
<li class="ui-widget-content ui-selectee">Item 4</li>
<li class="ui-widget-content ui-selectee">Item 5</li>
<li class="ui-widget-content ui-selectee">Item 6</li>
<li class="ui-widget-content ui-selectee">Item 7</li>
</ol>
</body>
</html>
Option 1 - Using ActionBuilder
As you noticed, you could call down to the Selenium-WebDriver ActionBuilder to press control and then click the elements. I am guessing that your code did not work was because the perform method was never called for the action. For the demo page, to hold control and click each li would be:
# Press control (note the call to 'perform' the action)
browser.driver.action.key_down(:control).perform
# Click the elements
browser.lis.each(&:click)
So that control is pressed and then released at the end, you could also do:
action = browser.driver.action
action.key_down(:control)
browser.lis.each { |li| action.click(li.wd) }
action.key_up(:control)
action.perform
Option 2 - Using Modifiers for Click
An alternative solution would be to use Watir's click method with modifiers. The modifiers can be used to tell Watir to hold down certain keys while clicking an element. For example, the following will press control while clicking each li:
browser.lis.each do |li|
li.click(:control)
end
Note that this is technically a different user behaviour than that in Option 1. In Option 1, the control button is held while all lis were clicked. In contrast Option 2 will press the control button, click the element, release the control button and then repeat for the next element. Depending on the application's implementation, it may or may not care about the difference.
I have a Zurb Foundation 3 navigation menu. When the page is on a phone, it correctly shows the phone version of my menu system.
However, the only way to activate the menu is to tap the down=arrow triangle on the right. I want to have the title also be active.
EDIT: Added this link to a simple working version of the home page.
Notice, tapping the bar or the word "menu" highlights the bar, but only the arrow makes the menu appear.
I am hiding the name ("Menu") on the desktop and showing it on the phone like so:
<div class="row">
<div class="contain-to-grid">
<nav class="top-bar">
<ul>
<!-- Title Area -->
<li class="name show-for-small">
<h1>Menu</h1>
</li>
<li class="toggle-topbar"></li>
</ul>
<section>
<!-- Left Nav Section -->
<ul class="left">
etc.
Since I expect a lot of people will tap on the title "menu" to access the menu I want to make it do the same as tapping the arrow on the right.
IF you adjust:
.top-bar ul > li.toggle-topbar {
cursor: pointer;
display: block;
height: 45px;
position: absolute;
right: 0;
top: 0;
width: 50%;
}
and change the width value to:
width 100%;
It will work - in your app.css add:
.top-bar ul > li.toggle-topbar {
width: 100%;
}
The CSS method is one way, but I would up modifying jquery.foundation.topbar.js, line 45 (which is the function below) I changed '.top-bar .toggle-topbar to '.top-bar .toggle-topbar, .top-bar .title'
$('.top-bar .toggle-topbar, .top-bar .title').off('click.fndtn').on('click.fndtn', function (e) {
e.preventDefault();
if (methods.breakpoint()) {
settings.$topbar.toggleClass('expanded');
settings.$topbar.css('min-height', '');
}
if (!settings.$topbar.hasClass('expanded')) {
settings.$section.css({left: '0%'});
settings.$section.find('>.name').css({left: '100%'});
settings.$section.find('li.moved').removeClass('moved');
settings.index = 0;
}
});
Sorry, total Juice UI newbie, and really a web app newbie as well. Having trouble getting the simple example working from the Juice UI website. It is supposed to illustrate how easy it is to make a drag-drop example, but I get a lot of errors which makes me think I'm missing something really basic. I'm trying to use the Droppable control, documented here:
http://juiceui.com/controls/droppable
The draggable example worked fine, so I've gotten that far, but when I paste the droppable example text into my C# web application, I get errors that the style needs to be outside the form, outside the body, etc - I keep moving it up the chain. Eventually it says "element style needs to be in a parent element" - not sure where to put it if I can't put it on the page. I suppose in a .css file? Also, it says the tag is missing a required attribute 'type'.
Any help would be much appreciated!
<style>
.draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
.droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
</style>
<script>
$(function(){
$( "#_Default" ).droppable( "option", "drop", function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
);
});
</script>
<asp:panel ID="_Draggable" CssClass="draggable ui-widget-content" runat="server">
<p>Drag me to my target</p>
</asp:panel>
<juice:draggable TargetControlID="_Draggable" runat="server"/>
<asp:panel ID="_Default" CssClass="droppable ui-widget-header" runat="server" ClientIDMode="Static">
<p>Drop here</p>
</asp:panel>
<juice:droppable TargetControlID="_Default" runat="server"/>
The document you're reviewing is a partial document. I believe it assumes you have the rest of the document already authored:
<!DOCTYPE html>
<html>
<head>
<title>Droppable Example</title>
</head>
<body>
<!-- Your Code Here -->
</body>
</html>
Okay, a little research revealed:
element always goes inside the section - duh
the type attribute for always needs to be type="text/css",
so I added that
Added the type attribute for the (type="text/javascript")
Another error popped up, conflict with the _Default id in the
example, same as the Default class name when you create a new web
application. Bad choice of element ID for an example in which the
user will likely be doing exactly what I was doing, creating a
default web app and pasting in the code and expecting it to run.
Don't know why none of these errors were caught when this example was written, but kind of frustrating first experience with Juice UI. Thanks all for your time and responses.