diff --git a/docs/developer-guide/Advanced-Theming.asciidoc b/docs/developer-guide/Advanced-Theming.asciidoc index 05e55a3149..292605e71d 100644 --- a/docs/developer-guide/Advanced-Theming.asciidoc +++ b/docs/developer-guide/Advanced-Theming.asciidoc @@ -74,7 +74,7 @@ When we want to adapt the look of an application to different OS conventions one Codename One allows you to override a resource for a specific platform when doing this you can redefine a resource differently for that specific platform and also add platform specific resources. .Override resources for specific platform -image::img/developer-guide/override-resource.png[Override resources for specific platform] +image::img/override-resource.png[Override resources for specific platform] `Overriden` resources take precedence over embedded resources thus allowing us to change the look or even behavior (when overriding a GUI builder element) for a specific platform/OS. @@ -84,7 +84,7 @@ To override select the platform where overriding is applicable [[override-platform]] .Override for platform, allows us to override the checked resources and replace them with another resource -image::img/developer-guide/override-platform.png[Override for platform, allows us to override the checked resources and replace them with another resource] +image::img/override-platform.png[Override for platform, allows us to override the checked resources and replace them with another resource] You can then click the green checkbox to define that this resource is specific to this platform. All resources added when the platform is selected will only apply to the selected platform. If you change your mind and are no longer interested in a particular override just delete it in the override mode and it will no longer be overridden. @@ -660,7 +660,7 @@ are abstracted by native theming. Without it you will need to do everything from You can simulate different OS platforms by using the native theme menu option .The native theme menu option -image::img/developer-guide/designer-native-theme-menu.png[The native theme menu option,scaledwidth=30%] +image::img/designer-native-theme-menu.png[The native theme menu option,scaledwidth=30%] Developers can pick the platform of their liking and see how the theme will appear in that particular platform by selecting it and having the preview update on the fly. @@ -754,7 +754,7 @@ TIP: This relies on the common use case of asking your designer to design for on Alternatively, you can use the standard add multi-image dialog and set it like this: -image::img/developer-guide/select-image-resolutions.png[Multi-image resolution dialog,scaledwidth=50%] +image::img/select-image-resolutions.png[Multi-image resolution dialog,scaledwidth=50%] Notice that we selected the square image option, essentially eliminating the height option. Setting values to 0 prevents the system from generating a multi-image entry for that resolution, which will mean a device in that category will fall @@ -813,7 +813,7 @@ myButton.getAllStyles().setPadding(pixels, pixels, pixels, pixels); === Creating a Great Looking Side Menu .Side Menu final result -image::img/developer-guide/styled-sidemenu-result.png[Side Menu final result,scaledwidth=50%] +image::img/styled-sidemenu-result.png[Side Menu final result,scaledwidth=50%] A side menu is a crucial piece of an elegant application. We'll explain how one creates a simple side menu that's elegant, portable and easy to build. This is a good "starting point" side menu from which you can build more elaborate designs. @@ -849,62 +849,62 @@ hi.show(); Next we'll open the designer tool to style the UI .Open the side menu so we will get the right values in the combo box on add -image::img/developer-guide/styled-sidemenu-1.png[Open the side menu so we will get the right values in the combo box on add,scaledwidth=40%] +image::img/styled-sidemenu-1.png[Open the side menu so we will get the right values in the combo box on add,scaledwidth=40%] Now when we press #Add# the side menu entries will appear in the combo box (you can type them but this is more convenient). We'll start with the #SideNavigationPanel# style: .The SideNavigationPanel has an opaque white background -image::img/developer-guide/styled-sidemenu-2.png[The SideNavigationPanel has an opaque white background,scaledwidth=40%] +image::img/styled-sidemenu-2.png[The SideNavigationPanel has an opaque white background,scaledwidth=40%] The #SideCommand# style is a bit more elaborate, we start with a white foreground and an opaque bluish/purple color: .The SideCommand has a white foreground and opaque bluish background -image::img/developer-guide/styled-sidemenu-3.png[The SideCommand has a white foreground and opaque bluish background,scaledwidth=40%] +image::img/styled-sidemenu-3.png[The SideCommand has a white foreground and opaque bluish background,scaledwidth=40%] We'll set padding to 3 millimeters which gives everything a good feel and spacing. This is important for finger touch sensitivity. .Padding is 3mm so it will feel spacious and touch friendly -image::img/developer-guide/styled-sidemenu-4.png[Padding is 3mm so it will feel spacious and touch friendly,scaledwidth=40%] +image::img/styled-sidemenu-4.png[Padding is 3mm so it will feel spacious and touch friendly,scaledwidth=40%] We'll set margin to 0 except for the bottom one pixel which will leave a nice white line by showing off the background. This means the commands will have a space between them and the white style we gave to the #SideNavigationPanel# will appear thru that space. .Margin is 0 except for a thin line below each command -image::img/developer-guide/styled-sidemenu-5.png[Margin is 0 except for a thin line below each command,scaledwidth=40%] +image::img/styled-sidemenu-5.png[Margin is 0 except for a thin line below each command,scaledwidth=40%] Setting the border to empty is crucial! The iOS version of the side command inherits a border style so we must "remove" it by defining a different border in this case an empty border. Since borders take precedence over color this would have prevented the color changes we made from appearing. .Border must be defined as Empty -image::img/developer-guide/styled-sidemenu-6.png[Border must be defined as Empty,scaledwidth=40%] +image::img/styled-sidemenu-6.png[Border must be defined as Empty,scaledwidth=40%] Next we need to pick a good looking font and make sure it's large enough. We use millimeters size it correctly for all OS’s and override the derived text decoration which has a value in the iOS native theme so it can impact the final look. .Pick a good looking font for the side command -image::img/developer-guide/styled-sidemenu-7.png[Pick a good looking font for the side command,scaledwidth=40%] +image::img/styled-sidemenu-7.png[Pick a good looking font for the side command,scaledwidth=40%] Next we need to move to the selected tab and add a new side command entry that derives from the unselected version. We'll pick a new color that’s slightly deeper and will make the selected style appear selected. We'll also copy and paste this selected style to the pressed style. .Selected & Pressed SideCommand -image::img/developer-guide/styled-sidemenu-8.png[Selected & Pressed SideCommand,scaledwidth=40%] +image::img/styled-sidemenu-8.png[Selected & Pressed SideCommand,scaledwidth=40%] .Color for the Selected/Pressed SideCommand -image::img/developer-guide/styled-sidemenu-9.png[Color for the Selected/Pressed SideCommand,scaledwidth=40%] +image::img/styled-sidemenu-9.png[Color for the Selected/Pressed SideCommand,scaledwidth=40%] The #SidemenuTagline# is just a #SideCommand# style that was slightly adapted. We'll remove the padding and margin because the whole section is wrapped in a side command and we don't want double padding. We'll leave 1mm padding at the top for a bit of spacing from the logo. .Padding of the SidemenuTagline -image::img/developer-guide/styled-sidemenu-10.png[Padding of the SidemenuTagline,scaledwidth=40%] +image::img/styled-sidemenu-10.png[Padding of the SidemenuTagline,scaledwidth=40%] We'll also update the font to a smaller size and italic styling so it will feel like a tagline. .Font for the SideMenuTagline is slightly smaller and italic -image::img/developer-guide/styled-sidemenu-11.png[Font for the SideMenuTagline is slightly smaller and italic,scaledwidth=40%] +image::img/styled-sidemenu-11.png[Font for the SideMenuTagline is slightly smaller and italic,scaledwidth=40%] The last change for the theme is for the #StatusBarSideMenu# UIID which is a spacing on the top of the sidemenu. This spacing is there for iOS devices which render the clock/battery/reception symbols on top of the app. We'll set the padding to 0. .StatusBarSideMenu padding for the top of the side menu -image::img/developer-guide/styled-sidemenu-11.png[StatusBarSideMenu padding for the top of the side menu,scaledwidth=40%] +image::img/styled-sidemenu-11.png[StatusBarSideMenu padding for the top of the side menu,scaledwidth=40%] Finally, we'll add the icon image (or a logo if you have it) into the theme as a multi image so we can use it within the side menu as a good looking logo. A relatively large icon image works as a 2HD multi-image but you can use many strategies to get a fitting image for this spot. @@ -926,12 +926,12 @@ The process we followed was: http://freebiesbug.com/psd-freebies/iphone-6-ui-kit/[this PSD file] created by https://dribbble.com/adrianchiran[Adrian Chiran] (we mirrored it https://www.codenameone.com/files/iOS_UI-Kit.psd[here] in case it goes offline): + .Sign Up form Design -image::img/developer-guide/psd2app-image1.png[Sign Up form Design,scaledwidth=25%] +image::img/psd2app-image1.png[Sign Up form Design,scaledwidth=25%] . Re-create the general structure and layout of the design in a Codename One `Form` using nested components and layout managers. Here is a break-down of how we structured the component hierarchy in the `Form`: + .Component hierarchy and layouts -image::img/developer-guide/psd2app-image2.png[Component hierarchy and layouts,scaledwidth=50%] +image::img/psd2app-image2.png[Component hierarchy and layouts,scaledwidth=50%] . Extract the images we needed using Photoshop - this process is often referred to as "cutting" . Extract the fonts, colors, and styles we needed to reproduce the design in Codename One @@ -941,7 +941,7 @@ image::img/developer-guide/psd2app-image2.png[Component hierarchy and layouts,sc Here is a screenshot of the resulting component running inside the Codename One simulator: .Resulting app in the Codename One simulator -image::img/developer-guide/psd2app-image3.png[Resulting app in the Codename One simulator,scaledwidth=25%] +image::img/psd2app-image3.png[Resulting app in the Codename One simulator,scaledwidth=25%] ==== Breaking Down the PSD @@ -959,24 +959,24 @@ In this PSD we want only one of the screen designs so initially we want to remov You should end up with something like this where a layer is selected in the layers window: .Selecting a layer from the region you are interested in -image::img/developer-guide/psd2app-image4.png[Selecting a layer from the region you are interested in] +image::img/psd2app-image4.png[Selecting a layer from the region you are interested in] Scroll up the hierarchy a bit and uncheck/recheck the eye icon on the left until you locate the right element layer. .Selecting a layer from the region you are interested in -image::img/developer-guide/psd2app-image5.png[Find the right element layer you are interested in,scaledwidth=30%] +image::img/psd2app-image5.png[Find the right element layer you are interested in,scaledwidth=30%] Right click the layer and select #Convert To Smart Object#. IMPORTANT: The right click menu will present different options when you click different areas of the layer, clicking on the left area of the layer works .In the right click menu option select "Convert To Smart Object" -image::img/developer-guide/psd2app-image6.png[In the right click menu option select "Convert To Smart Object",scaledwidth=40%] +image::img/psd2app-image6.png[In the right click menu option select "Convert To Smart Object",scaledwidth=40%] Once the layer hierarchy is a smart object you can just double click it which will open the sub hierarchy in a new tab and you now only have the pieces of the image you care about. .Double clicking the smart object allows us to edit only the form we need -image::img/developer-guide/psd2app-image7.png[Double clicking the smart object allows us to edit only the form we need,scaledwidth=40%] +image::img/psd2app-image7.png[Double clicking the smart object allows us to edit only the form we need,scaledwidth=40%] ===== Removing the Noise @@ -989,19 +989,19 @@ We don't need the "Sign Up" or "Done" strings in the title either but before rem To discover that I can click them to select the layer then switch to the text tool: .The text tool allows us to inspect the font used -image::img/developer-guide/psd2app-image8.png[The text tool allows us to inspect the font used,scaledwidth=5%] +image::img/psd2app-image8.png[The text tool allows us to inspect the font used,scaledwidth=5%] Then I can double click the text area layer to find out the font in the top of the UI like this: .The Done toolbar entry uses SourceSansPro Regular -image::img/developer-guide/psd2app-image9.png[The Done toolbar entry uses SourceSansPro Regular] +image::img/psd2app-image9.png[The Done toolbar entry uses SourceSansPro Regular] TIP: Notice that I don't actually need to have the font installed in this case I don't (hence the square brackets) Also notice that the color of the font is accessible in that toolbar, by clicking the color element we get this dialog which shows the color value to be #f73267#, this is something we will use later .The color dialog lists the hex color at the bottom, we can paste that directly to the designer tool -image::img/developer-guide/psd2app-image10.png[The color dialog lists the hex color at the bottom, we can paste that directly to the designer tool,scaledwidth=40%] +image::img/psd2app-image10.png[The color dialog lists the hex color at the bottom, we can paste that directly to the designer tool,scaledwidth=40%] We can now hide both text layers so they won't pose a problem later. @@ -1012,13 +1012,13 @@ The camera button includes an icon and the button background itself. You can jus When you click on the camera icon you will notice that the camera icon is comprised of two separate layers: the camera and the "x" symbol above it. We can select both layers using #ctrl-click# (command click on the Mac) and convert both to a smart object together using the same method as before: .The camera smart object -image::img/developer-guide/psd2app-image11.png[The camera smart object] +image::img/psd2app-image11.png[The camera smart object] Since the image is used as an icon we want it to be completely square which isn't the situation here! + This is important as a non-square image can trigger misalignment when dealing with icons and the background. So we need to use the #Image# -> #Canvas Size# menu and set the values to be the same (the higher value of the two). .The canvas size dialog for the camera.png file -image::img/developer-guide/psd-image-size.png[The canvas size dialog for the camera.png file,scaledwidth=40%] +image::img/psd-image-size.png[The canvas size dialog for the camera.png file,scaledwidth=40%] We can now use #File# -> #Export# and save the first image resource we will need into a temporary directory. Make sure to save a PNG file to preserve quality and transparency! @@ -1027,13 +1027,13 @@ TIP: Use #File# -> #Export# and never use #File# -> #Save As#. The latter can pr For convenience we'll refer to the file as `camera.png` when we need it later. .The camera icon image -image::img/developer-guide/camera.png[The camera icon image,scaledwidth=4%] +image::img/camera.png[The camera icon image,scaledwidth=4%] We can follow the exact same procedure with the parent button layer (the white portion) which we can convert to a smart object and export `camera-button.png`. **** .The camera button image set to a gray background so it will be visible -image::img/developer-guide/camera-button.png[The camera button image set to a gray background so it will be visible,scaledwidth=15%] +image::img/camera-button.png[The camera button image set to a gray background so it will be visible,scaledwidth=15%] **** Now we can hide both of these elements and proceed to get the background image for the title. @@ -1043,7 +1043,7 @@ Here the "smart object trick" won't work... There is an effects layer in place a We need to switch to the rectangular select tool: .The select tool and the clean image we want to select -image::img/developer-guide/psd2app-image12.png[The select tool and the clean image we want to select] +image::img/psd2app-image12.png[The select tool and the clean image we want to select] Now drag the select tool to select the image don't cross into the white pixels below the image. You can use the zoom value and set it to a very high value to get the selection right. @@ -1054,12 +1054,12 @@ Now click #File# -> #New# it should have the #Presets# set to #Clipboard# which You can now save the image, since it's just a background using JPEG is totally acceptable in this case. We named it `background.jpg`. .The background image -image::img/developer-guide/background.jpg[The background image,scaledwidth=40%] +image::img/background.jpg[The background image,scaledwidth=40%] The last thing we need is the colors used in the UI. We can use the "eye drop" tool in a high zoom level to discover the colors of various elements e.g. the text color is `4d606f` and the separator color is `f5f5f5`: .The eye drop tool can be pointed at an area of the image to get the color in that region -image::img/developer-guide/psd2app-image13.png[The eye drop tool can be pointed at an area of the image to get the color in that region] +image::img/psd2app-image13.png[The eye drop tool can be pointed at an area of the image to get the color in that region] ==== The Code @@ -1068,7 +1068,7 @@ While that was verbose it was relatively simple. We'll create a simple barebones NOTE: The reason for this is to avoid "noise", if we use a more elaborate theme it would have some existing settings. This can make the tutorial harder to follow .Simple bare bones app settings -image::img/developer-guide/psd2app-image14.png[Simple bare bones app settings] +image::img/psd2app-image14.png[Simple bare bones app settings] Once the project is created double click the `theme.res` file and within the designer select #Images# -> #Quick Add Multi Images#. Select the 3 images we created above: `background.jpg`, `camera.png` & `camera-button.png`. Leave the default setting on #Very High# and press #OK#. @@ -1173,10 +1173,10 @@ public void start() { So the code above is most of the work but we still need to put everything together using the theme. This is what we have so far: .Before applying the changes to the theme this is what we have -image::img/developer-guide/psd2app-image15.png[Before applying the changes to the theme this is what we have,scaledwidth=20%] +image::img/psd2app-image15.png[Before applying the changes to the theme this is what we have,scaledwidth=20%] .This is what we are aiming at with no additional code changes -image::img/developer-guide/psd2app-image16.png[This is what we are aiming at with no additional code changes,scaledwidth=20%] +image::img/psd2app-image16.png[This is what we are aiming at with no additional code changes,scaledwidth=20%] This looks like a major set of changes but it requires exactly 10 UIID definitions to get to this look! diff --git a/docs/developer-guide/Advanced-Topics-Under-The-Hood.asciidoc b/docs/developer-guide/Advanced-Topics-Under-The-Hood.asciidoc index 50024fc93c..ee6b59a9ac 100644 --- a/docs/developer-guide/Advanced-Topics-Under-The-Hood.asciidoc +++ b/docs/developer-guide/Advanced-Topics-Under-The-Hood.asciidoc @@ -9,7 +9,7 @@ These hints are often referred to as "build hints" or "build arguments", they ar You can set these hints by right clicking the project in the IDE and selecting #Codename One# -> #Codename One Settings# -> #Build Hints#. The hints use the `key=value` style of data. .The build hints UI in Codename One Settings -image::img/developer-guide/build-hints-codenameone-settings.png[The build hints UI in Codename One Settings,scaledwidth=50%] +image::img/build-hints-codenameone-settings.png[The build hints UI in Codename One Settings,scaledwidth=50%] You can set the build hints in the `codenameone_settings.properties` file directly notice that when you do that all settings need to start with the `codename1.arg.` prefix. When editing the properties file directly we would need to define something like `android.debug=true` as `codename1.arg.android.debug=true`. @@ -545,22 +545,22 @@ f.show(); If you explicitly lower the target SDK (e.g. `android.targetSDKVersion=21`) and install this app on an Android 6 device you will still see the legacy install prompt with all permissions listed up front: .Install UI when using the old permissions system -image::img/developer-guide/marshmallow-permissions-level21.png[Install UI when using the old permissions system,scaledwidth=20%] +image::img/marshmallow-permissions-level21.png[Install UI when using the old permissions system,scaledwidth=20%] When you keep the default target (API 33+) the installer defers to the runtime permission flow and the install UI looks like this instead: .Install UI when using the new permissions system -image::img/developer-guide/marshmallow-permissions-level23.png[Install UI when using the new permissions system,scaledwidth=20%] +image::img/marshmallow-permissions-level23.png[Install UI when using the new permissions system,scaledwidth=20%] When we launch the UI under the old permissions system we see the contacts instantly. In the new system we are presented with this UI: .Native permission prompt first time -image::img/developer-guide/marshmallow-permissions-first-request.png[Native permission prompt first time,scaledwidth=20%] +image::img/marshmallow-permissions-first-request.png[Native permission prompt first time,scaledwidth=20%] If we accept and allow all is good and the app loads as usual but if we deny then Codename One gives the user another chance to request the permission. Notice that in this case you can customize the prompt string as explained below. .Codename One permission prompt -image::img/developer-guide/marshmallow-permissions-codenameone-prompt.png[Codename One permission prompt,scaledwidth=20%] +image::img/marshmallow-permissions-codenameone-prompt.png[Codename One permission prompt,scaledwidth=20%] If we select don't ask then you will get a blank screen since the contacts will return as a 0 length array. This makes sense as the user is aware he denied permission and the app will still function as expected on a device where @@ -568,7 +568,7 @@ no contacts are available. However, if the user realizes his mistake he can dou permission in which case he will see this native prompt: .Native permission prompt second time -image::img/developer-guide/marshmallow-permissions-second-request.png[Native permission prompt second time,scaledwidth=20%] +image::img/marshmallow-permissions-second-request.png[Native permission prompt second time,scaledwidth=20%] Notice that denying this second request will not trigger another Codename One prompt. @@ -600,7 +600,7 @@ The following permission keys are supported: "android.permission.READ_PHONE_STAT You can simulate permission prompts by checking that option in the simulator menu. .Simulate permission prompts menu item in the simulator -image::img/developer-guide/simulate-permission-prompts.png[Simulate permission prompts menu item in the simulator,scaledwidth=10%] +image::img/simulate-permission-prompts.png[Simulate permission prompts menu item in the simulator,scaledwidth=10%] This will produce a dialog to the user whenever this happens in Android and will try to act in a similar way to the device. Notice that you can test it in the iOS simulator too. @@ -640,7 +640,7 @@ With Android Studio this is sometimes as very easy task as it is possible to act By default you should be able to open the gradle project in Android Studio and just run it. To get this to work open the Android Studio #Setting# and select gradle *2.11*. .Gradle settings UI in Android Studio (notice you need gradle 2.11 and not 2.8 as pictured here) -image::img/developer-guide/gradle-settings.png[Gradle settings UI in Android Studio,scaledwidth=50%] +image::img/gradle-settings.png[Gradle settings UI in Android Studio,scaledwidth=50%] If this works for you then you can ignore the section below. @@ -702,22 +702,22 @@ public interface MyNative extends NativeInterface { We now need to right click the class in the IDE and select the #Generate Native Access# menu item: .Generating the native code -image::img/developer-guide/native-interfaces-generate-menu.png[Generating the native code,scaledwidth=20%] +image::img/native-interfaces-generate-menu.png[Generating the native code,scaledwidth=20%] .Once generated we are prompted that the native code is in the "native" directory -image::img/developer-guide/native-interfaces-generated.png[Once generated we are prompted that the native code is in the "native" directory,scaledwidth=40%] +image::img/native-interfaces-generated.png[Once generated we are prompted that the native code is in the "native" directory,scaledwidth=40%] We can now look int the #native# directory in the project root (in NetBeans you can see that in the #Files# tab) and you can see something that looks like this: .Native directory structure containing stubs for the various platforms -image::img/developer-guide/native-interfaces-native-hierarchy.png[Native directory structure containing stubs for the various platforms,scaledwidth=30%] +image::img/native-interfaces-native-hierarchy.png[Native directory structure containing stubs for the various platforms,scaledwidth=30%] These are effectively stubs you can edit to implement the methods in native code. TIP: If you re-run the #Generate Native Access# tool you will get this dialog, if you answer yes all the files will be overwritten, if you answer no only files you deleted/renamed will be recreated .Running "Generate Native Access" when some/all of the native files exist already -image::img/developer-guide/native-interfaces-generated-existing.png[Running "Generate Native Access" when some/all of the native files exist already,scaledwidth=40%] +image::img/native-interfaces-generated-existing.png[Running "Generate Native Access" when some/all of the native files exist already,scaledwidth=40%] For now lets leave the stubs and come back to them soon. From the Codename One Java code we can call the implementation of this native interface using: @@ -1686,7 +1686,7 @@ Support for JAR files in Codename One has been a source of confusion so its prob The first source of confusion is changing the classpath. You should NEVER change the classpath or add an external JAR via the IDE classpath UI. The reasoning here is very simple, these IDE's don't package the JAR's into the final executable and even if they did these JAR's would probably use features unavailable or inappropriate for the device (e.g. `java.io.File` etc.). .Don't change the classpath, this is how it should look for a typical Java 8 Codename One application -image::img/developer-guide/cn1libs-dont-change-classpath.png[Don't change the classpath, this is how it should look for a typical Java 8 Codename One application,scaledwidth=40%] +image::img/cn1libs-dont-change-classpath.png[Don't change the classpath, this is how it should look for a typical Java 8 Codename One application,scaledwidth=40%] Cn1libs are Codename One's file format for 3rd party extensions. It's physicially a zip file containing other zip files and some meta-data. @@ -1711,7 +1711,7 @@ Cn1lib’s address the modularity aspect allowing you to break that down. Existi Codename One has a large repository of https://www.codenameone.com/cn1libs.html[3rd party cn1libs], you can install a cn1lib by placing it in the lib directory of your project then right clicking the project and selecting #Codename One# -> #Refresh cn1lib files#. .Refresh cn1lib files menu option -image::img/developer-guide/cn1libs-refresh.png[Refresh cn1lib files menu option,scaledwidth=40%] +image::img/cn1libs-refresh.png[Refresh cn1lib files menu option,scaledwidth=40%] Once refreshed the content of the cn1lib will be available to code completion and you could just use it. @@ -1731,10 +1731,10 @@ The native files are extracted to `lib/impl/native`. The classpath for the main Creating a cn1lib is trivial, we will get into more elaborate uses soon enough but for a hello world cn1lib we can just use this 2 step process: .Select the CodenameOne Library Option -image::img/developer-guide/cn1lib-create-step1.png[Select the CodenameOne Library Option,scaledwidth=30%] +image::img/cn1lib-create-step1.png[Select the CodenameOne Library Option,scaledwidth=30%] .Select the file name/destination. Notice that a Java 8 cn1lib requires Java 8 support in the parent project! -image::img/developer-guide/cn1lib-create-step2.png[Select the file name/destination. Notice that a Java 8 cn1lib requires Java 8 support in the parent project!,scaledwidth=30%] +image::img/cn1lib-create-step2.png[Select the file name/destination. Notice that a Java 8 cn1lib requires Java 8 support in the parent project!,scaledwidth=30%] Once we go thru these steps we can define any source file within the library and it will be accessible to the users of the library. @@ -1964,7 +1964,7 @@ hi.show(); ---- .Drag and drop demo -image::img/developer-guide/draganddrop-rearrange-game.png[Drag and drop demo,scaledwidth=20%] +image::img/draganddrop-rearrange-game.png[Drag and drop demo,scaledwidth=20%] To enable dragging a component it must be flagged as draggable using `setDraggable(true)`, to allow dropping the component onto another component you must first enable the drop target with `setDropTarget(true)` and override some methods (more on that later). @@ -2178,13 +2178,13 @@ The following diagram shows the dependencies in a native library: [[fc8a77d2-61e0-11e5-9ecf-bf381d4ac966]] .Relationship between native & Codename One API UML Diagram -image::img/developer-guide/fc8a77d2-61e0-11e5-9ecf-bf381d4ac966.png[Relationship between native and Codename One API UML Diagram,scaledwidth=50%] +image::img/fc8a77d2-61e0-11e5-9ecf-bf381d4ac966.png[Relationship between native and Codename One API UML Diagram,scaledwidth=50%] In the specific case of our FreshDesk API, the public API and classes will look like: [[a5fe88406-61e4-11e5-951e-e09bd28a93c9]] .Freshdesk API Integration -image::img/developer-guide/5fe88406-61e4-11e5-951e-e09bd28a93c9.png[Freshdesk API Integration,scaledwidth=30%] +image::img/5fe88406-61e4-11e5-951e-e09bd28a93c9.png[Freshdesk API Integration,scaledwidth=30%] ===== Things to Notice @@ -2692,13 +2692,13 @@ Now that we have set up our public API and our native interface, it is time to w [[c9d4b9cc-61f6-11e5-8b67-4691600188cd]] .Generate Native Access Menu Item -image::img/developer-guide/c9d4b9cc-61f6-11e5-8b67-4691600188cd.png[Generate Native Access Menu Item,scaledwidth=20%] +image::img/c9d4b9cc-61f6-11e5-8b67-4691600188cd.png[Generate Native Access Menu Item,scaledwidth=20%] This will generate a separate directory for each platform inside your project's `native` directory: [[eef6d078-61f6-11e5-91cd-2e1836916359]] .Native generated sources directory view -image::img/developer-guide/eef6d078-61f6-11e5-91cd-2e1836916359.png[Native generated sources directory view,scaledwidth=15%] +image::img/eef6d078-61f6-11e5-91cd-2e1836916359.png[Native generated sources directory view,scaledwidth=15%] Inside the `android` directory, this generates a `com/codename1/freshdesk/MobihelpNativeImpl` class with stubs for each method. @@ -3074,13 +3074,13 @@ The iOS integration guide for the FreshDesk SDK lists the following core framewo [[IOSlinkoptions]] .IOS link options -image::img/developer-guide/12c5303e-620c-11e5-9dbb-bcb4bebc0c87.png[iOS link options,scaledwidth=35%] +image::img/12c5303e-620c-11e5-9dbb-bcb4bebc0c87.png[iOS link options,scaledwidth=35%] We can add these dependencies to our project using the `ios.add_libs` build hint. E.g. [[a65e31df8-620c-11e5-87ff-6b926a3f2090]] .iOS's "add libs" build hint -image::img/developer-guide/65e31df8-620c-11e5-87ff-6b926a3f2090.png[iOS's "add libs" build hint,scaledwidth=30%] +image::img/65e31df8-620c-11e5-87ff-6b926a3f2090.png[iOS's "add libs" build hint,scaledwidth=30%] I.e. we just list the framework names separated by semicolons. Notice that my list in the above image doesn't include all of the frameworks that they list because many of the frameworks are already included by default (I obtained the default list by simply building the project with "include sources" checked, then looked at the frameworks that were included). @@ -3168,7 +3168,7 @@ hi.show(); ---- .Center layout staircase effect with margin -image::img/developer-guide/center-layout.png[Center layout staircase effect with margin,scaledwidth=20%] +image::img/center-layout.png[Center layout staircase effect with margin,scaledwidth=20%] ==== Porting a Swing/AWT Layout Manager diff --git a/docs/developer-guide/Animations.asciidoc b/docs/developer-guide/Animations.asciidoc index fdad84c9eb..5ac239ee80 100644 --- a/docs/developer-guide/Animations.asciidoc +++ b/docs/developer-guide/Animations.asciidoc @@ -58,13 +58,13 @@ There are a couple of things that you should notice about this example: This results in: -image:img/developer-guide/layout-animation-1.png[Frame 1] -image:img/developer-guide/layout-animation-2.png[Frame 2] -image:img/developer-guide/layout-animation-3.png[Frame 3] -image:img/developer-guide/layout-animation-4.png[Frame 4] -image:img/developer-guide/layout-animation-5.png[Frame 5] -image:img/developer-guide/layout-animation-6.png[Frame 6] -image:img/developer-guide/layout-animation-7.png[Frame 7] +image:img/layout-animation-1.png[Frame 1] +image:img/layout-animation-2.png[Frame 2] +image:img/layout-animation-3.png[Frame 3] +image:img/layout-animation-4.png[Frame 4] +image:img/layout-animation-5.png[Frame 5] +image:img/layout-animation-6.png[Frame 6] +image:img/layout-animation-7.png[Frame 7] ==== Unlayout Animations @@ -456,36 +456,36 @@ hi.show(); .The slide transition moves both incoming and outgoing forms together -image::img/developer-guide/transition-slide.jpg[The slide transition moves both incoming and outgoing forms together,scaledwidth=70%] +image::img/transition-slide.jpg[The slide transition moves both incoming and outgoing forms together,scaledwidth=70%] .The slide transition can be applied vertically as well -image::img/developer-guide/transition-slide-vertical.jpg[The slide transition can be applied vertically as well,scaledwidth=70%] +image::img/transition-slide-vertical.jpg[The slide transition can be applied vertically as well,scaledwidth=70%] .Slide fade fades in the destination title while sliding the content pane it is the default on iOS -image::img/developer-guide/transition-slide-fade.jpg[Slide fade fades in the destination title while sliding the content pane its the default on iOS,scaledwidth=70%] +image::img/transition-slide-fade.jpg[Slide fade fades in the destination title while sliding the content pane its the default on iOS,scaledwidth=70%] TIP: `SlideFade` is problematic without a title area. If you have a `Form` that lacks a title area we would recommend to disable `SlideFade` at least for that `Form`. .With cover transitions the source form stays in place as it is covered by the destination. This transition can be played both horizontally and vertically -image::img/developer-guide/transition-cover.jpg[With cover transitions the source form stays in place as it is covered by the destination. This transition can be played both horizontally and vertically,scaledwidth=70%] +image::img/transition-cover.jpg[With cover transitions the source form stays in place as it is covered by the destination. This transition can be played both horizontally and vertically,scaledwidth=70%] .Uncover is the inverse of cover. The destination form stays in place while the departing form moves away -image::img/developer-guide/transition-uncover.jpg[Uncover is the inverse of cover. The destination form stays in place while the departing form moves away,scaledwidth=70%] +image::img/transition-uncover.jpg[Uncover is the inverse of cover. The destination form stays in place while the departing form moves away,scaledwidth=70%] ==== Fade and Flip Transitions The fade transition is pretty trivial and only accepts a time value since it has no directional context. .Fade transition is probably the simplest one around -image::img/developer-guide/transition-fade.jpg[Fade transition is probably the simplest one around,scaledwidth=70%] +image::img/transition-fade.jpg[Fade transition is probably the simplest one around,scaledwidth=70%] The https://www.codenameone.com/javadoc/com/codename1/ui/animations/FlipTransition.html[FlipTransition] is also pretty simple but unlike the others it isn't a part of the `CommonTransitions`. It has its own `FlipTransition` class. IMPORTANT: This transition looks very different on devices as it uses native perspective transforms available only there .Fade transition is probably the simplest one around -image::img/developer-guide/transition-flip.jpg[Fade transition is probably the simplest one around,scaledwidth=70%] +image::img/transition-flip.jpg[Fade transition is probably the simplest one around,scaledwidth=70%] ==== Bubble Transition @@ -546,7 +546,7 @@ hi.show(); ---- .Bubble transition converting a circular button to a Dialog -image::img/developer-guide/transition-bubble.png[Bubble transition converting a circular button to a Dialog,scaledwidth=12%] +image::img/transition-bubble.png[Bubble transition converting a circular button to a Dialog,scaledwidth=12%] @@ -561,7 +561,7 @@ once. [[mighty-morphing-components-1]] .Morph Transition -image::img/developer-guide/mighty-morphing-components-1.png[Morph Transition,scaledwidth=15%] +image::img/mighty-morphing-components-1.png[Morph Transition,scaledwidth=15%] To support this behavior we have the https://www.codenameone.com/javadoc/com/codename1/ui/animations/MorphTransition.html[MorphTransition] class that provides this same effect coupled with a fade to the rest of the UI (see <>). diff --git a/docs/developer-guide/Casual-Game-Programming.asciidoc b/docs/developer-guide/Casual-Game-Programming.asciidoc index 9bf07ee602..430505c067 100644 --- a/docs/developer-guide/Casual-Game-Programming.asciidoc +++ b/docs/developer-guide/Casual-Game-Programming.asciidoc @@ -50,7 +50,7 @@ The first step is creating the splash animation as you can see in the screenshot [[game-figure-2]] .Animation stages for the splash screen opening animation -image::img/developer-guide/gaming-fig2.png[Figure 2,scaledwidth=40%] +image::img/gaming-fig2.png[Figure 2,scaledwidth=40%] The animation in the splash screen and most of the following animations are achieved using the simple tool of layout animations. In Codename One components are automatically arranged into position using layout managers, however this isn’t implicit unless the device is rotated. A layout animation relies on this fact, it allows you to place components in a position (whether by using a layout manager or by using `setX`/`setY`) then invoke the layout animation code so they will slide into their “proper” position based on the layout manager rules. @@ -66,7 +66,7 @@ Initially when entering the game form we have another animation where all the ca [[game-figure-3]] .Game form startup animation and deal animation -image::img/developer-guide/game-figure-3.png[Game UI,scaledwidth=40%] +image::img/game-figure-3.png[Game UI,scaledwidth=40%] This animation is really easy to accomplish although it does have several stages. In the first stage we layout the cards within a grid layout (13x4), then when the animation starts (see the https://www.codenameone.com/javadoc/com/codename1/ui/util/UITimer.html[UITimer] code within `showGameUI()`) we just change the layout to a layered layout, add the back card (so it will come out on top based on z-ordering) and invoke animate layout. diff --git a/docs/developer-guide/Index.asciidoc b/docs/developer-guide/Index.asciidoc index e182e71484..6b8d070796 100644 --- a/docs/developer-guide/Index.asciidoc +++ b/docs/developer-guide/Index.asciidoc @@ -130,7 +130,7 @@ When a version of Codename One is released the version number refers to the libr === History .LWUIT App Screenshot circa 2007 -image::img/developer-guide/lwuit-screenshot.png[LWUIT App Screenshot,scaledwidth=15%] +image::img/lwuit-screenshot.png[LWUIT App Screenshot,scaledwidth=15%] Codename One was started by Chen Fishbein and Shai Almog who authored the Open Source LWUIT project at Sun Microsystems (circa 2007). The LWUIT project aimed to solve the fragmentation within J2ME/Blackberry devices by creating a higher standard of user interface than the common baseline at the time. LWUIT received critical acclaim and traction within multiple industries but was limited by the declining feature phone market. It was forked by several companies including Nokia. It was used as the base standard for DTV in Brazil. Another fork has brought a LWUIT into high end cars from Toyota and other companies. This fork later adapted Codename One as well. @@ -149,13 +149,13 @@ Density is also known as DPI (Dots Per Inch) or PPI (pixels or points per inch). As the following figure shows, if a Pixel 2 XL had pixels the size of an iPad it would have been twice the size of that iPad. While in reality it's nearly half the height of the iPad! .Device Density vs. Resolution -image::img/developer-guide/dpi.png[Device Density vs Resolution] +image::img/dpi.png[Device Density vs Resolution] Differences in density can be extreme. A second generation iPad has 132 PPI, where modern phones have PPI that crosses the 600 mark. Low resolution images on high PPI devices will look either small or pixelated. High resolution images on low PPI devices will look huge, overscaled (artifacts) and will consume too much memory. .How the Same Image Looks in Different Devices -image::img/developer-guide/image-sizes-different-dpis.png[How the Same Image Looks in Different Devices] +image::img/image-sizes-different-dpis.png[How the Same Image Looks in Different Devices] The exact same image will look different on each device, sometimes to a comical effect. One of the solutions for this problem is multi-images. All OS’s support the ability to define different images for various densities. I will discuss multi-images later in Chapter 2. @@ -389,7 +389,7 @@ public void start() { <5> The `show()` method places the `Form` on the screen. Only one `Form` can be shown at a time .Title and Label in the UI -image::img/developer-guide/codenameone-hello-world-title-label.png[Title and Label in the UI,scaledwidth=50%] +image::img/codenameone-hello-world-title-label.png[Title and Label in the UI,scaledwidth=50%] There are some complex ideas within this short snippet which I'll address later in this chapter when talking about layout. The gist of it is that we create and show a `Form`. `Form` is the top level UI element, it takes over the whole screen. We can add UI elements to that `Form` object, in this case the `Label`. We use the `BoxLayout` to arrange the elements within the `Form` from top to the bottom vertically. @@ -408,7 +408,7 @@ Simply explained an application has three states: The lifecycle is the process of transitioning between these 3 states and the callbacks invoked when such a transition occurs. The first time we launch the app we start from a "`Cold Start`" (Not Running State) but on subsequent launches the app is usually started from the "Warm Start" (Suspended State). .Codename One Application Lifecycle -image::img/developer-guide/codenameone-application-lifecycle.png[Codename One Application Lifecycle] +image::img/codenameone-application-lifecycle.png[Codename One Application Lifecycle] Codename One has four standard callback methods in the lifecycle API: @@ -451,7 +451,7 @@ That's it. Hopefully you have a general sense of the code. It's time to run on t ==== Building and Deploying On Devices .Codename One Control Center -image::img/developer-guide/control-center-main.png[Codename One Settings/Control Center,scaledwidth=50%] +image::img/control-center-main.png[Codename One Settings/Control Center,scaledwidth=50%] You can use the Control Center to configure almost anything. Specifically, the application title, application version, application icon etc. are all found in the Codename One Settings maven target. @@ -460,7 +460,7 @@ There are many options within this UI that control almost every aspect of the ap Your device builds using the Codename One Cloud can also be found right here as well as subscription information. .Device Builds in Logged out State -image::img/developer-guide/control-center-builds-empty.png[Builds in Empty State,scaledwidth=50%] +image::img/control-center-builds-empty.png[Builds in Empty State,scaledwidth=50%] ===== Signing/Certificates @@ -486,7 +486,7 @@ With that in mind generating an Android certificate is trivial. NOTE: The following chart illustrates a process that's identical on all IDE's .Process of Certificate Generation for Android -image::img/developer-guide/android-certificate-generator.png[] +image::img/android-certificate-generator.png[] .Your certificate will generate into the file `Keychain.ks` in your home directory TIP: Make sure to back that up and the password as losing these can have dire consequences @@ -514,7 +514,7 @@ TIP: The 99USD price and requirement have been around since the introduction of Apple also requires a "`provisioning profile`" which is a special file bound to your certificate and app. This file describes some details about the app to the iOS installation process. One of the details it includes during development is the list of permitted devices. .The Four Files Required for iOS Signing and Provisioning -image::img/developer-guide/ios-certificates-provisioning.png[The 4 files Required for iOS Signing and Provisioning] +image::img/ios-certificates-provisioning.png[The 4 files Required for iOS Signing and Provisioning] We need 4 files for signing. Two certificates and two provisioning profiles: @@ -525,13 +525,13 @@ We need 4 files for signing. Two certificates and two provisioning profiles: The certificate wizard automatically creates these 4 files and configures them for you. .Using the iOS Certificate Wizard Steps 1 and 2 -image::img/developer-guide/ios-certificate-wizard-1.png[Using the iOS Certificate Wizard Steps 1 and 2] +image::img/ios-certificate-wizard-1.png[Using the iOS Certificate Wizard Steps 1 and 2] .Using the iOS Certificate Wizard Steps 3 and 4 -image::img/developer-guide/ios-certificate-wizard-2.png[Using the iOS Certificate Wizard Steps 3 and 4] +image::img/ios-certificate-wizard-2.png[Using the iOS Certificate Wizard Steps 3 and 4] .Using the iOS Certificate Wizard Steps 5 and 6 -image::img/developer-guide/ios-certificate-wizard-3.png[Using the iOS Certificate Wizard Steps 5 and 6] +image::img/ios-certificate-wizard-3.png[Using the iOS Certificate Wizard Steps 5 and 6] [TIP] ==== @@ -543,7 +543,7 @@ One important aspect of provisioning on iOS is the device list in the provisioni WARNING: There are several apps and tools that offer the UDID of the device, they aren't necessarily reliable and might give a fake number! .Get the UDID of a Device -image::img/developer-guide/get-device-udid.png[Get the UDID of a Device] +image::img/get-device-udid.png[Get the UDID of a Device] TIP: You can right click the UDID and select #copy# to copy it @@ -558,14 +558,14 @@ Before we continue with the build we should sign up at https://www.codenameone.c Now that we have certificates the process of device builds is literally a right click away for both OS's. We can right click the project and select #Codename One# -> #Send iOS Debug Build# or #Codename One# -> #Send Android Build#. .Right click menu options for sending device builds -image::img/developer-guide/getting-started-right-click-menu.png[Right click menu options for sending device builds,scaledwidth=50%] +image::img/getting-started-right-click-menu.png[Right click menu options for sending device builds,scaledwidth=50%] NOTE: The first time you send a build you will be prompted for the email and password you provided when signing up for Codename One Once you send a build you should see the results in the build server page: .Build Results -image::img/developer-guide/build-server-results.png[Build Results,scaledwidth=80%] +image::img/build-server-results.png[Build Results,scaledwidth=80%] TIP: On iOS make sure you use Safari when installing, as 3rd party browsers might have issues diff --git a/docs/developer-guide/Miscellaneous-Features.asciidoc b/docs/developer-guide/Miscellaneous-Features.asciidoc index c9e0c3f838..e12d071ecc 100644 --- a/docs/developer-guide/Miscellaneous-Features.asciidoc +++ b/docs/developer-guide/Miscellaneous-Features.asciidoc @@ -143,7 +143,7 @@ hi.show(); ---- .List of contacts -image::img/developer-guide/contacts-list.png[List of contacts,scaledwidth=20%] +image::img/contacts-list.png[List of contacts,scaledwidth=20%] Notice that we didn't fetch the image of the contact as the performance of loading these images might be prohibitive. We can enhance the code above to include images by using slightly more complex code such as this: @@ -183,7 +183,7 @@ Display.getInstance().scheduleBackgroundTask(() -> { ---- .Contacts with the default photos on the simulator, on device these will use actual user photos when available -image::img/developer-guide/contacts-with-photos.png[Contacts with the default photos on the simulator, on device these will use actual user photos when available,scaledwidth=20%] +image::img/contacts-with-photos.png[Contacts with the default photos on the simulator, on device these will use actual user photos when available,scaledwidth=20%] TIP: Notice that the code above uses `callSerially` & `scheduleBackgroundTask` in a liberal nested way. This is important to avoid an EDT violation @@ -248,7 +248,7 @@ hi.show(); ---- .Localized label -image::img/developer-guide/l10n-basic.png[Localized label,scaledwidth=30%] +image::img/l10n-basic.png[Localized label,scaledwidth=30%] ==== Localization Manager @@ -280,7 +280,7 @@ hi.show(); ---- .Localization formatting/parsing and information -image::img/developer-guide/l10n-manager.png[Localization formatting/parsing and information,scaledwidth=20%] +image::img/l10n-manager.png[Localization formatting/parsing and information,scaledwidth=20%] ==== RTL/Bidi @@ -331,7 +331,7 @@ TIP: You will need to create the _strings_ directory manually, if it doesn't exi .Maven project with English, French, and Spanish localizations for Info.plist. English and French language bundles are contained in the _ios/src/main/strings_ directory. The Spanish bundle is included as a zip file in _ios/src/main/resources_. Both methods are supported (zipped in _resources_ and unzipped in _strings_). -image::img/developer-guide/ios_strings_directory_screenshot.png[] +image::img/ios_strings_directory_screenshot.png[] .ios/src/main/strings/en.lproj/InfoPlist.strings [source,strings] @@ -547,7 +547,7 @@ hi.show(); ---- .Captured photos previewed in the ImageViewer -image::img/developer-guide/capture-photo.png[Captured photos previewed in the ImageViewer,scaledwidth=20%] +image::img/capture-photo.png[Captured photos previewed in the ImageViewer,scaledwidth=20%] // HTML_ONLY_START We demonstrate video capture in the https://www.codenameone.com/manual/components.html#mediamanager-section[MediaManager section]. @@ -614,7 +614,7 @@ hi.show(); ---- .Captured recordings in the demo -image::img/developer-guide/capture-audio.png[Captured recordings in the demo,scaledwidth=20%] +image::img/capture-audio.png[Captured recordings in the demo,scaledwidth=20%] Alternatively, you can use the `Media`, `MediaManager` and `MediaRecorderBuilder` APIs to capture audio, as a more customizable approach than using the Capture API: @@ -820,7 +820,7 @@ Alternatively, you can use the `Media`, `MediaManager` and `MediaRecorderBuilder } ---- -image::img/developer-guide/media-audio-recording-example.png[Example of recording and playback audio using Media API] +image::img/media-audio-recording-example.png[Example of recording and playback audio using Media API] ==== Capture Asynchronous API @@ -951,40 +951,40 @@ To get started first you will need to create a facebook app on the Facebook deve at https://developers.facebook.com/apps/ .Create New App -image::img/developer-guide/chat-app-tutorial-facebook-login-1.png[Create New App,scaledwidth=50%] +image::img/chat-app-tutorial-facebook-login-1.png[Create New App,scaledwidth=50%] You need to repeat the process for web, Android & iOS (web is used by the simulator): .Pick Platform -image::img/developer-guide/chat-app-tutorial-facebook-login-2.png[Pick Platform,scaledwidth=50%] +image::img/chat-app-tutorial-facebook-login-2.png[Pick Platform,scaledwidth=50%] For the first platform you need to enter the app name: .Pick app name -image::img/developer-guide/chat-app-tutorial-facebook-login-3.png[Pick Name,scaledwidth=50%] +image::img/chat-app-tutorial-facebook-login-3.png[Pick Name,scaledwidth=50%] And provide some basic details: .Basic details for the app -image::img/developer-guide/chat-app-tutorial-facebook-login-4.png[Details,scaledwidth=35%] +image::img/chat-app-tutorial-facebook-login-4.png[Details,scaledwidth=35%] For iOS we need the bundle ID which is the exact same thing we used in the Google+ login to identify the iOS app its effectively your package name: .iOS specific basic details -image::img/developer-guide/chat-app-tutorial-facebook-login-5.png[Details,scaledwidth=50%] +image::img/chat-app-tutorial-facebook-login-5.png[Details,scaledwidth=50%] You should end up with something that looks like this: .Finished Facebook app -image::img/developer-guide/chat-app-tutorial-facebook-login-6.png[Details,scaledwidth=50%] +image::img/chat-app-tutorial-facebook-login-6.png[Details,scaledwidth=50%] The Android process is pretty similar but in this case we need the activity name too. IMPORTANT: The activity name should match the main class name followed by the word `Stub` (uppercase s). E.g. for the main class `SociallChat` we would use `SocialChatStub` as the activity name .Android Activity definition -image::img/developer-guide/chat-app-tutorial-facebook-login-7.png[Details,scaledwidth=50%] +image::img/chat-app-tutorial-facebook-login-7.png[Details,scaledwidth=50%] To build the native Android app we must make sure that we setup the keystore correctly for our application. If you don't have an Android certificate you can use the visual wizard (in the Android section in the project preferences the button labeled #Generate#) or use the command line: @@ -1012,12 +1012,12 @@ keytool -exportcert -alias androiddebugkey -keystore %HOMEPATH%\.android\debug.k You can read more about it on the https://developers.facebook.com/docs/android/getting-started[Facebook guide here]. .Hash generation process, notice the command lines are listed as part of the web wizard -image::img/developer-guide/chat-app-tutorial-facebook-login-8.png[Hash,scaledwidth=50%] +image::img/chat-app-tutorial-facebook-login-8.png[Hash,scaledwidth=50%] Lastly you need to publish the Facebook app by flipping the switch in the apps "Status & Review" page as such: .Without flipping the switch the app won't "appear" -image::img/developer-guide/chat-app-tutorial-facebook-login-9.png[Enable The App,scaledwidth=50%] +image::img/chat-app-tutorial-facebook-login-9.png[Enable The App,scaledwidth=50%] ==== IDE Setup @@ -1116,54 +1116,54 @@ Go to https://developers.google.com/mobile/add[the Google Developer Portal], fol Point your browser to https://developers.google.com/mobile/add[this page]. .Set up mobile app form on Google -image::img/developer-guide/google-signin-ios-setup.png[Google Setup Mobile App Form,scaledwidth=50%] +image::img/google-signin-ios-setup.png[Google Setup Mobile App Form,scaledwidth=50%] Click on the "Getting Started" button. .Getting started button -image::img/developer-guide/google-signin-ios-getting-started-button.png[Getting started button,scaledwidth=15%] +image::img/google-signin-ios-getting-started-button.png[Getting started button,scaledwidth=15%] Then click "iOS App" .Pick a platform -image::img/developer-guide/google-signin-ios-pick-a-platform.png[Pick a platform,scaledwidth=50%] +image::img/google-signin-ios-pick-a-platform.png[Pick a platform,scaledwidth=50%] Now enter an app name and the bundle ID for your app on the form below. The app name doesn't necessary need to match your app's name, but the bundle ID should match the package name of your app. .Create or Choose App -image::img/developer-guide/google-signin-ios-create-or-choose-app.png[Create or Choose App,scaledwidth=50%] +image::img/google-signin-ios-create-or-choose-app.png[Create or Choose App,scaledwidth=50%] Select your country, and then click the "Choose and Configure Services" button. .Choose and Configure Services -image::img/developer-guide/google-signin-ios-choose-and-configure-services-btn.png[Choose and Configure Services,scaledwidth=20%] +image::img/google-signin-ios-choose-and-configure-services-btn.png[Choose and Configure Services,scaledwidth=20%] You'll be presented with the following screen .Choose and Configure Services form -image::img/developer-guide/google-signin-ios-choose-and-configure-services-form.png[Choose and Configure Services form,scaledwidth=50%] +image::img/google-signin-ios-choose-and-configure-services-form.png[Choose and Configure Services form,scaledwidth=50%] Click on "Google Sign-In". Then press the "Enable Google Sign-In" button that appears. .Enable Google Sign-In -image::img/developer-guide/google-signin-ios-enable-google-signin-btn.png[Enable Google Sign-In,scaledwidth=50%] +image::img/google-signin-ios-enable-google-signin-btn.png[Enable Google Sign-In,scaledwidth=50%] You should then be presented with another button to "Generate Configuration Files" as shown below .Generate Configuration Files -image::img/developer-guide/google-signin-ios-generate-configuration-files-button.png[Generate Configuration Files,scaledwidth=20%] +image::img/google-signin-ios-generate-configuration-files-button.png[Generate Configuration Files,scaledwidth=20%] Finally you will be presented with a button to "Download GoogleServices-Info.plist". .Download GoogleService-Info.plist file -image::img/developer-guide/google-signin-ios-download-googleservice-infoplist-btn.png[Download GoogleService-Info plist file,scaledwidth=20%] +image::img/google-signin-ios-download-googleservice-infoplist-btn.png[Download GoogleService-Info plist file,scaledwidth=20%] Press this button to download the GoogleService-Info.plist file. Then copy this into the "native/ios" directory of your Codename One project. .Project file structure after placing the GoogleService-Info.plist into the native/ios directory -image::img/developer-guide/google-signin-ios-google-service-info-plist-file-structure.png[Project structure,scaledwidth=15%] +image::img/google-signin-ios-google-service-info-plist-file-structure.png[Project structure,scaledwidth=15%] At this point, your app should be able to use Google Sign-In. Notice that we don't require any build hints. Only that the GoogleService-Info.plist file is added to the project's native/ios directory. @@ -1179,32 +1179,32 @@ Go to https://developers.google.com/mobile/add[the Google Developer Portal], fol Point your browser to https://developers.google.com/mobile/add[this page]. .Set up mobile app form on Google -image::img/developer-guide/google-signin-ios-setup.png[Google Setup Mobile App Form,scaledwidth=30%] +image::img/google-signin-ios-setup.png[Google Setup Mobile App Form,scaledwidth=30%] Click on the "Getting Started" button. -image::img/developer-guide/google-signin-ios-getting-started-button.png[Getting started button,scaledwidth=15%] +image::img/google-signin-ios-getting-started-button.png[Getting started button,scaledwidth=15%] Then click "Android App" -image::img/developer-guide/google-signin-ios-pick-a-platform.png[Pick a platform,scaledwidth=30%] +image::img/google-signin-ios-pick-a-platform.png[Pick a platform,scaledwidth=30%] Now enter an app name and the platform for your app on the form below. The app name doesn't necessary need to match your app's name, but the package name should match the package name of your app. .Create or Choose App -image::img/developer-guide/google-signin-android-create-or-choose-app.png[Create or Choose App,scaledwidth=40%] +image::img/google-signin-android-create-or-choose-app.png[Create or Choose App,scaledwidth=40%] Select your country, and then click the "Choose and Configure Services" button. .Choose and Configure Services -image::img/developer-guide/google-signin-android-choose-and-configure-services-btn.png[Choose and Configure Services,scaledwidth=40%] +image::img/google-signin-android-choose-and-configure-services-btn.png[Choose and Configure Services,scaledwidth=40%] Click on "Google Sign-In" Then you'll be presented with a field to enter the Android Signing Certificate SHA-1. .Android Signing Certifiate SHA-1 -image::img/developer-guide/google-signin-android-signing-sha1.png[Android Signing Certifiate SHA-1,scaledwidth=40%] +image::img/google-signin-android-signing-sha1.png[Android Signing Certifiate SHA-1,scaledwidth=40%] The value that you enter here should be obtained from the certificate that you are using to build your app. You an use the *keytool* app that is distributed with the JDK to extract this value @@ -1254,22 +1254,22 @@ You would paste this value into the "Android Signing Certificate SHA-1" field in After pasting that in, you'll see a new button with label "Enable Google Sign-in" .Enable Google Sign-In -image::img/developer-guide/google-signin-ios-enable-google-signin-btn.png[Enable Google Sign-In,scaledwidth=40%] +image::img/google-signin-ios-enable-google-signin-btn.png[Enable Google Sign-In,scaledwidth=40%] Press this button and you'll be presented with another button to "Generate Configuration Files" as shown below .Generate Configuration Files -image::img/developer-guide/google-signin-ios-generate-configuration-files-button.png[Generate Configuration Files,scaledwidth=20%] +image::img/google-signin-ios-generate-configuration-files-button.png[Generate Configuration Files,scaledwidth=20%] Finally you will be presented with a button to "Download google-services.json". .Download google-services.json file -image::img/developer-guide/google-signin-android-download-googleservices-json-btn.png[Download google-services json file,scaledwidth=20%] +image::img/google-signin-android-download-googleservices-json-btn.png[Download google-services json file,scaledwidth=20%] Press this button to download the google-services.json file. Then copy this into the "native/android" directory of your Codename One project. .Project file structure after placing the GoogleService-Info.plist into the native/android directory -image::img/developer-guide/google-signin-android-google-services-json-file-structure.png[Project structure,scaledwidth=15%] +image::img/google-signin-android-google-services-json-file-structure.png[Project structure,scaledwidth=15%] At this point, your app should be able to use Google Sign-In. Notice that we don't require any build hints. Only that the google-services.json file is added to the project's native/android directory. @@ -1288,13 +1288,13 @@ If you've set up the Google Sign-In API for either Android or iOS, then Google w . Select your app from the drop-down-menu in the top bar . Click on "Credentials" in the left menu. You'll see a screen like this + -image::img/developer-guide/google-sign-in-google-cloud-platform-credentials.png[Credentials,scaledwidth=20%] +image::img/google-sign-in-google-cloud-platform-credentials.png[Credentials,scaledwidth=20%] . Under the "OAuth2.0 Client IDs", find the row with "Web application" listed in the type column . Click the "Edit icon for that row. . Make note of the "Client ID" and "Client Secret" on this page, as you'll need to add them to your Java source in the next step. . In the "Authorized redirect URIs" section, you will need to enter the URL to the page that the user will be sent to after a successful login. This page will only appear in the simulator for a split second, as Codename One's BrowserComponent will intercept this request to obtain the access token upon successful login. You can use any URL you like here, but it must match the value you give to `GoogleConnect.setRedirectURL()` in <>. + -image::img/developer-guide/google-sign-in-oauth-setup-redirect-url.png[Redirect URL,scaledwidth=30%] +image::img/google-sign-in-oauth-setup-redirect-url.png[Redirect URL,scaledwidth=30%] [[javascript-setup]] ==== Javascript Setup Instructions @@ -1470,7 +1470,7 @@ void addEntry(Accordion accr) { This allows us to add/edit entries but it also allows the delete button above to actually work separately. Without a call to `setBlockLead(true)` the delete button would cat as the rest of the accordion title. .Accordion with delete button entries that work despite the surrounding lead -image::img/developer-guide/lead-component-blocking.png[Accordion with delete button entries that work despite the surrounding lead,scaledwidth=20%] +image::img/lead-component-blocking.png[Accordion with delete button entries that work despite the surrounding lead,scaledwidth=20%] === Pull To Refresh @@ -1490,7 +1490,7 @@ hi.show(); ---- .Pull to refresh demo -image::img/developer-guide/pull-to-refresh.png[Simple pull to refresh demo,scaledwidth=20%] +image::img/pull-to-refresh.png[Simple pull to refresh demo,scaledwidth=20%] === Running 3rd Party Apps Using Display's execute diff --git a/docs/developer-guide/Monetization.asciidoc b/docs/developer-guide/Monetization.asciidoc index 4e5ff68a09..72af32fae0 100644 --- a/docs/developer-guide/Monetization.asciidoc +++ b/docs/developer-guide/Monetization.asciidoc @@ -13,7 +13,7 @@ The most effective network is the simplest banner ad support. To enable mobile a To enable this for Android just define the `android.googleAdUnitId=ca-app-pub-8610616152754010/3413603324` in the build arguments and for iOS use the same as in `ios.googleAdUnitId`. The rest is seamless, the right ad will be created for you at the bottom of the screen and the form should automatically shrink to fit the ad. This shrinking is implemented differently between iOS and Android due to some constraints but the result should be similar and this should work reasonably well with device rotation as well. .Google play ads -image::img/developer-guide/google-play-ads.png[Google play ads,scaledwidth=20%] +image::img/google-play-ads.png[Google play ads,scaledwidth=20%] There's a special ad unit id to use for test ads. If you specify `ca-app-pub-3940256099942544/6300978111`, you'll get test ads for your development phase. This is important because you're not allowed to click on your own ads. When it's time to create a production release, you should replace this with the real value you generated in adMob. @@ -139,17 +139,17 @@ NOTE: You can test out this code in the simulator without doing any additional s When the app first opens we see our button: .In-app purchase demo app -image::img/developer-guide/iap-demo-1.png[In-app purchase demo app,scaledwidth=20%] +image::img/iap-demo-1.png[In-app purchase demo app,scaledwidth=20%] In the simulator, clicking on the "Buy World" button will bring up a prompt to ask you if you want to approve the purchase. .Approving the purchase in the simulator -image::img/developer-guide/iap-demo2.png[Approving the purchase in the simulator,scaledwidth=30%] +image::img/iap-demo2.png[Approving the purchase in the simulator,scaledwidth=30%] Now if I try to buy the product again, it pops up the dialog to let me know that I already own it. .In App purchase already owned -image::img/developer-guide/iap-demo3.png[In App purchase already owned,scaledwidth=20%] +image::img/iap-demo3.png[In App purchase already owned,scaledwidth=20%] ==== Making it Consumable @@ -280,7 +280,7 @@ NOTE: The receipt store is intended to interface with a server so that the subsc .The Receipt store is a layer between your server and Codename One -image::img/developer-guide/in-app-purchase-receipt-store-diagram.png[The Receipt store is a layer between your server and Codename One] +image::img/in-app-purchase-receipt-store-diagram.png[The Receipt store is a layer between your server and Codename One] A basic receipt store needs to implement just two methods: @@ -577,16 +577,16 @@ Notice that, in `itemPurchased()` we don't need to explicitly create any receipt ==== Screenshots .Main form -image::img/developer-guide/in-app-purchase-subscription-main-form.png[Main form,scaledwidth=25%] +image::img/in-app-purchase-subscription-main-form.png[Main form,scaledwidth=25%] .Dialog shown when subscribing to a product -image::img/developer-guide/in-app-purchase-subscription-dialog.png[Dialog shown when subscribing to a product,scaledwidth=25%] +image::img/in-app-purchase-subscription-dialog.png[Dialog shown when subscribing to a product,scaledwidth=25%] .Simulator confirm dialog when purchasing a subscription -image::img/developer-guide/in-app-purchase-subscription-confirm.png[Simulator confirm dialog when purchasing a subscription,scaledwidth=40%] +image::img/in-app-purchase-subscription-confirm.png[Simulator confirm dialog when purchasing a subscription,scaledwidth=40%] .Upon successful purchase, the toastbar message is shown -image::img/developer-guide/in-app-purchase-subscription-toastbar-success.png[Upon successful purchase, the toastbar message is shown,scaledwidth=20%] +image::img/in-app-purchase-subscription-toastbar-success.png[Upon successful purchase, the toastbar message is shown,scaledwidth=20%] ==== Summary @@ -670,10 +670,10 @@ create TABLE RECEIPTS ---- 3. Open the "persistence.xml" file in the server netbeans project. + -image::img/developer-guide/iap3-persistence-file.png[Persistence File,scaledwidth=40%] +image::img/iap3-persistence-file.png[Persistence File,scaledwidth=40%] 4. Change the data source to the database you just created. + -image::img/developer-guide/iap3-persistence-file.png[Edit persistence.xml file data source,scaledwidth=40%] +image::img/iap3-persistence-file.png[Edit persistence.xml file data source,scaledwidth=40%] If you're not sure how to create a data source, see my https://www.codenameone.com/blog/connecting-to-a-mysql-database-part-2.html[previous tutorial on connecting to a MySQL database]. @@ -687,34 +687,34 @@ At this point we should be able to test out the project in the Codename One simu When the app first opens you'll see a screen as follows: .First screen of app -image::img/developer-guide/iap3-first-screen.png[First screen of app,scaledwidth=20%] +image::img/iap3-first-screen.png[First screen of app,scaledwidth=20%] This screen is for testing consumable products, so we won't be making use of this right now. Open the hamburger menu and select "Subscriptions". You should see something like this: .Subscriptions form -image::img/developer-guide/iap3-subscriptions-form.png[Subscriptions form,scaledwidth=20%] +image::img/iap3-subscriptions-form.png[Subscriptions form,scaledwidth=20%] Click on the "Subscribe 1 Month No Ads" button. You will be prompted to accept the purchase: .Approve purchase dialog -image::img/developer-guide/iap3-approve-purchase.png[Approve purchase dialog,scaledwidth=40%] +image::img/iap3-approve-purchase.png[Approve purchase dialog,scaledwidth=40%] Upon completion, the app will submit the purchase to your server, and if all went well, it will retrieve the updated list of receipts from your server also, and update the label on this form to say "No Ads. Expires ": .After successful purchase -image::img/developer-guide/iap3-successful-purchase.png[After successful purchase,scaledwidth=20%] +image::img/iap3-successful-purchase.png[After successful purchase,scaledwidth=20%] NOTE: This project is set up to use an expedited expiry date schedule for purchases from the simulator. 1 month = 5 minutes. 3 months = 15 minutes. This helps for testing. That is why your expiry date may be different than expected. Just to verify that the receipt was inserted correctly, you should check the contents of your "RECEIPTS" table in your database. In Netbeans, I can do this easily from the "Services" pane. Expand the database connection down to the RECEIPTS table, right click "RECEIPTS" and select "View Data". This will open a data table similar the the following: .Receipts table after insertion -image::img/developer-guide/iap3-view-table-data.png[Receipts table after insertion,scaledwidth=20%] +image::img/iap3-view-table-data.png[Receipts table after insertion,scaledwidth=20%] .Table view -image::img/developer-guide/iap3-table-view.png[Table view,scaledwidth=40%] +image::img/iap3-table-view.png[Table view,scaledwidth=40%] A few things to mention here: @@ -1112,7 +1112,7 @@ For more information about setting up alpha testing on Google play see https://s Once you have set your app up for alpha testing, you can send an invite link to your test accounts. You can find the link in the Google Play console under the APK section, under the "Alpha" tab (and assuming you've enabled alpha testing. .Alpha testing tab in google play -image::img/developer-guide/iap3-alpha-testing-tab.png[Alpha testing tab in google play,scaledwidth=40%] +image::img/iap3-alpha-testing-tab.png[Alpha testing tab in google play,scaledwidth=40%] The format of the link is `https://play.google.com/apps/testing/your-app-id` in case you can't find it. You can email this to your alpha testers. Make sure that you have added all testers to your tester lists so that their purchases will be made in the sandbox environment. @@ -1134,12 +1134,12 @@ IMPORTANT: Since we will be adding products as "Subscriptions" in the pay store, 3. Select "Subscription", and enter "iapdemo.noads.month.auto" for the Product ID. Then click "Continue" .Add new product dialog -image::img/developer-guide/iap3-play-add-new-product.png[Add new product dialog,scaledwidth=30%] +image::img/iap3-play-add-new-product.png[Add new product dialog,scaledwidth=30%] Now fill in the form. You can choose your own price and name for the product. The following is a screenshot of the options I chose. .Add product to google -image::img/developer-guide/iap3-add-product-google.png[Add product to google] +image::img/iap3-add-product-google.png[Add product to google] **Adding 3 month Subscription** @@ -1163,21 +1163,21 @@ Steps: 2. Click on the "Library" menu item in the left menu, and then click the "Google Play Developer API" link. + + .Google Play Developer API Link -image::img/developer-guide/iap3-play-developer-api-link.png[Google Play Developer API Link,scaledwidth=20%] +image::img/iap3-play-developer-api-link.png[Google Play Developer API Link,scaledwidth=20%] 3. Click on the button that says "Enable". (If you already have it enabled, then just proceed to the next step). + .Enable API button -image::img/developer-guide/iap3-enable-api.png[Enable API button,scaledwidth=20%] +image::img/iap3-enable-api.png[Enable API button,scaledwidth=20%] 4. Click on the "Credentials" menu item in the left menu. 5. In the "Credentials" drop-down menu, select the "Service Account Key" option. + .Credentials dropdown -image::img/developer-guide/iap3-credentials-dropdown.png[Credentials dropdown,scaledwidth=20%] +image::img/iap3-credentials-dropdown.png[Credentials dropdown,scaledwidth=20%] 6. You will be presented with a new form. In the "Service Account" drop-down, select "New Service Account". This will give you some additional options. + .Create service account key -image::img/developer-guide/iap3-create-service-account-key.png[Create service account key,scaledwidth=20%] +image::img/iap3-create-service-account-key.png[Create service account key,scaledwidth=20%] 7. Enter anything you like for the "Service account name". For the role, we'll select "Project" > "Owner" for now just so we don't run into permissions issues. You'll probably want to investigate further to fine a more limited role that only allows receipt verification, but for now, I don't want any unnecessary road blocks for getting this to work. We're probably going to run into "permission denied" errors at first anyways, so the fewer reasons for this, the better. 8. It will auto-generate an account ID for you. 9. Finally, for the "Key type", select "JSON". Then click the "Create" button. @@ -1227,15 +1227,15 @@ Steps: 2. You should see your app listed on this page. Click the "Link" button next to your app. + .Link to API -image::img/developer-guide/iap3-link-to-api.png[Link to API,scaledwidth=20%] +image::img/iap3-link-to-api.png[Link to API,scaledwidth=20%] 3. This should reveal some more options on the page. You should see a "Service Accounts" section with a list of all of the service accounts that you have created. Find the one we just created, and click the "Grant Access" button in its row. + .Grant access -image::img/developer-guide/iap3-grant-access.png[Grant access,scaledwidth=20%] +image::img/iap3-grant-access.png[Grant access,scaledwidth=20%] 4. This will open a dialog titled "Add New User". Leave everything default, except change the "Role" to "Administrator". This provides "ALL" permissions to this account, which probably isn't a good idea for production. Later on, after everything is working, you can circle back and try to refine permissions. For the purpose of this tutorial, I just want to pull out all of the potential road blocks. + .New User -image::img/developer-guide/iap3-new-user.png[New User,scaledwidth=30%] +image::img/iap3-new-user.png[New User,scaledwidth=30%] 5. Press the "Add User" button. At this point, the service account *should* be active so we can try to validate receipts. diff --git a/docs/developer-guide/Push-Notifications.asciidoc b/docs/developer-guide/Push-Notifications.asciidoc index 7689a98fca..eae70d2c83 100644 --- a/docs/developer-guide/Push-Notifications.asciidoc +++ b/docs/developer-guide/Push-Notifications.asciidoc @@ -93,7 +93,7 @@ TIP: You can set the `android.background_push_handling` build hint to "true" to The easiest way to test push notifications in your app is to use the push simulation feature of the Codename One Simulator. .The "Push Simulation" menu item in the simulator opens the push simulator tool. -image::img/developer-guide/push-push-simulation-menuitem.png[Push simulation menu item,scaledwidth=30%] +image::img/push-push-simulation-menuitem.png[Push simulation menu item,scaledwidth=30%] The "Registered Successfully" button will trigger your app's `registeredForPush()` method, and the "Registration Error" button will trigger your app's `pushRegistrationError()` method. @@ -102,7 +102,7 @@ The "Send" button will trigger the `push()` callback with the message body that The "Push Type" drop-down allows you to select the "type" of the push message. This dictates how the message body (i.e. the contents of the "Send Message" field) is interpreted. Some push types simply pass the message to the device verbatim, while others assume that the message contains structure that is meant to be parsed by the client to extract such things as badges, sounds, images, and actions that are associated with the message. We'll go over the available push types in a moment, but for now, we'll keep it simple by just using a push type of "1" - which just sends the message verbatim. .Sending a basic hello world push from the push simulator -image::img/developer-guide/push-push-simulator-test-1.png[Sending a basic Hello World push,scaledwidth=30%] +image::img/push-push-simulator-test-1.png[Sending a basic Hello World push,scaledwidth=30%] Let's try a simple "hello world" push message. Select "1" from the "Push Type" drop-down menu, and enter "Hello World" into the "Send Message" field as shown above. Then press "send". @@ -124,14 +124,14 @@ Received push message: Hello World This experiment simulated a push notification while the app is running in the foreground. Now let's simulate the case where the app is not running, or running in the background. We can simulate this by pausing the app. Return to the Codename One simulator window, and select "Pause App" from the "Simulate" menu as shown below. .Pausing the app in the simulator so we can simulate push notifications while app is in the background. -image::img/developer-guide/push-pause-app.png[Pausing app in the simulator,scaledwidth=30%] +image::img/push-pause-app.png[Pausing app in the simulator,scaledwidth=30%] When the app is paused it will simply display a white screen in the simulator with the text "Paused" in the middle. Now return to the push simulator again, and press "Send" again with same values in the other fields (Push type 1, and Message "Hello World"). Rather than running the `push()` callback this time, it will display a popup dialog outside the app, as shown below. .Push message causes a popup dialog in the simulator when the app is paused. -image::img/developer-guide/push-hello-world-simulator-paused.png[Push popup when app paused,scaledwidth=30%] +image::img/push-hello-world-simulator-paused.png[Push popup when app paused,scaledwidth=30%] While this popup dialog doesn't replicate what a push notification will look like in a device's notifications stream when the app is closed, it does simulate the conceptual workflow. The process whereby the user is notified of the message outside of the app, and the app is not notified until/unless the user taps on the notification. @@ -167,16 +167,16 @@ The following sections will show examples of the various kinds of pushes. You c **Push Type 1; Message Body: "Hello World"** .Push type 1 "Hello World" message in simulator. -image::img/developer-guide/push-hello-world-simulator-paused.png[Push popup when app paused,scaledwidth=30%] +image::img/push-hello-world-simulator-paused.png[Push popup when app paused,scaledwidth=30%] .Push type 1 "Hello World" message in Android when app is in background. -image::img/developer-guide/push-type-1-example-hello-android.png[Push type 1 on Android,scaledwidth=30%] +image::img/push-type-1-example-hello-android.png[Push type 1 on Android,scaledwidth=30%] .Push type 1 "Hello World" message in iOS when app is in background. -image::img/developer-guide/push-type-1-example-hello-ios.png[Push type 1 on iOS,scaledwidth=30%] +image::img/push-type-1-example-hello-ios.png[Push type 1 on iOS,scaledwidth=30%] .Push type 1 "Hello World" message in Chrome desktop. -image::img/developer-guide/push-type-1-example-hello-chrome-desktop.png[Push type 1 on Chrome desktop,scaledwidth=30%] +image::img/push-type-1-example-hello-chrome-desktop.png[Push type 1 on Chrome desktop,scaledwidth=30%] In all cases, if the user taps/clicks the notification, it will bring the app to the foreground and call the `push()` callback with "Hello World" as the argument. @@ -199,7 +199,7 @@ Push type 3 combines an alert message with some hidden content that the user won If the app is in the background, then the alert message will be posted to the user's notifications. See "Example Push Type 1" above as this message will be identical. .Push type 3 shows only the alert message (the portion before the first ";"). -image::img/developer-guide/push-type-3-simulator.png[Push type 3,scaledwidth=30%] +image::img/push-type-3-simulator.png[Push type 3,scaledwidth=30%] This push will result in our `push()` callback being fired twice; once with the alert message, and once with the hidden content. When it is fired with the alert message, `Display.getInstance().getProperty("pushType")` will report a type of "1". When it is fired with the JSON hidden content, it will report a push type of "2". @@ -210,16 +210,16 @@ This push will result in our `push()` callback being fired twice; once with the Push type 4 specifies a title and a message body. In this example, alert title will be "Hello World", and the body will by "I'm just saying hello". .Push type 4 "Hello World" message in simulator. -image::img/developer-guide/push-type-4-simulator-paused.png[Push popup when app paused,scaledwidth=30%] +image::img/push-type-4-simulator-paused.png[Push popup when app paused,scaledwidth=30%] .Push type 4 "Hello World" message in Android when app is in background. -image::img/developer-guide/push-type-4-example-hello-android.png[Push type 4 on Android,scaledwidth=30%] +image::img/push-type-4-example-hello-android.png[Push type 4 on Android,scaledwidth=30%] .Push type 4 "Hello World" message in iOS when app is in background. -image::img/developer-guide/push-type-4-example-hello-ios.png[Push type 4 on iOS,scaledwidth=30%] +image::img/push-type-4-example-hello-ios.png[Push type 4 on iOS,scaledwidth=30%] .Push type 4 "Hello World" message in Firefox desktop. -image::img/developer-guide/push-type-4-example-hello-firefox-desktop.png[Push type 4 on Firefox desktop,scaledwidth=30%] +image::img/push-type-4-example-hello-firefox-desktop.png[Push type 4 on Firefox desktop,scaledwidth=30%] With this push type, the `push()` callback will be fired only if the user taps/opens the notification, and the argument will contain the entire message ("Title;Body"). @@ -238,7 +238,7 @@ Push type 5 will behave identically to push type 1, except that the notification Push type 100 just expects an integer in the message body. This is interpreted as the badge that should be set on the app. This is currently only supported on Windows and iOS. .Push type 100 on iOS, setting the badge to "5" -image::img/developer-guide/push-type-100-example-5-ios.png[Push type 100 with badge set to 5 on iOS,scaledwidth=30%] +image::img/push-type-100-example-5-ios.png[Push type 100 with badge set to 5 on iOS,scaledwidth=30%] Push type 100 should not trigger the `push()` callback. @@ -284,13 +284,13 @@ The message body should be an XML string. A minimal example of a push type 99 t IMPORTANT: The image URL *must* be a secure URL (i.e. start with "https:" and not "http:", otherwise, iOS will simply ignore it. .Push type 99 with attached image in simulator. -image::img/developer-guide/push-type-99-hello-world-simulator-paused.png[Push popup when app paused,scaledwidth=30%] +image::img/push-type-99-hello-world-simulator-paused.png[Push popup when app paused,scaledwidth=30%] .Push type 99 with attached image in Android when app is in background. -image::img/developer-guide/push-type-99-example-hello-android.png[Push type 99 on Android with attached image,scaledwidth=30%] +image::img/push-type-99-example-hello-android.png[Push type 99 on Android with attached image,scaledwidth=30%] .Push type 99 with attached image in iOS when app is in background. -image::img/developer-guide/push-type-99-example-hello-ios.png[Push type 99 on iOS with attached image,scaledwidth=30%] +image::img/push-type-99-example-hello-ios.png[Push type 99 on iOS with attached image,scaledwidth=30%] NOTE: The image will only be shown if you press and pull down on the notification. When the notification initially appears in the user's notifications it will appear like a normal alert - but possibly with the image shown as a small thumbnail. @@ -365,16 +365,16 @@ Now we can test our new category. In the push simulator, you can select Push Ty ---- .Push notification with "invite" category on the simulator will show dialog with buttons to select between the actions defined in the "invite" category. -image::img/developer-guide/push-actions-simulator.png[Push with actions in simulator,scaledwidth=30%] +image::img/push-actions-simulator.png[Push with actions in simulator,scaledwidth=30%] .Push notification with "invite" category on the android will show dialog with buttons to select between the actions defined in the "invite" category. -image::img/developer-guide/push-actions-android.png[Push with actions on Android,scaledwidth=30%] +image::img/push-actions-android.png[Push with actions on Android,scaledwidth=30%] .Push notification with "invite" category on the android will show dialog with buttons to select between the actions defined in the "invite" category. -image::img/developer-guide/push-actions-ios.png[Push with actions on iOS,scaledwidth=30%] +image::img/push-actions-ios.png[Push with actions on iOS,scaledwidth=30%] .Push notification with "invite" category on the Chrome desktop includes a "More" dropdown where user can select the action. -image::img/developer-guide/push-actions-chrome-desktop.png[Push with actions on Chrome Desktop,scaledwidth=30%] +image::img/push-actions-chrome-desktop.png[Push with actions on Chrome Desktop,scaledwidth=30%] The `push()` callback will be fired after the user taps on the notification, or one of its actions. If the user taps the notification itself, and not one of the actions, then your `PushContent.getActionId()` will return `null`. If they selected one of the actions, then the action ID of that action can be obtained from `getActionId()`. @@ -412,29 +412,29 @@ Android Push goes thru Google servers and to do that we need to register with Go Go to https://console.firebase.google.com/ and click #Add project#: .Click "Add project" -image::img/developer-guide/push-android-firebase-console-1.png[Click "click Add project",scaledwidth=30%] +image::img/push-android-firebase-console-1.png[Click "click Add project",scaledwidth=30%] This will open a form as shown here: .Enter project name -image::img/developer-guide/push-fcm-add-project.png[Enter project name,scaledwidth=30%] +image::img/push-fcm-add-project.png[Enter project name,scaledwidth=30%] Enter the project name, select your country, read/accept their terms, and press "Create Project". Once the project has been created (should take only a few seconds), you'll be sent to your new project's dashboard. .Firebase Project Dashboard -image::img/developer-guide/push-fcm-dashboard.png[Firebase project dashboard,scaledwidth=30%] +image::img/push-fcm-dashboard.png[Firebase project dashboard,scaledwidth=30%] Expand the "Grow" section of the left menu bar, then click on the "Cloud Messaging" link. .Expand "Grow" Section and select "Cloud Messaging" -image::img/developer-guide/push-fcm-grow-menu.png[Expand Grow section and select Cloud Messaging,scaledwidth=30%] +image::img/push-fcm-grow-menu.png[Expand Grow section and select Cloud Messaging,scaledwidth=30%] On the next screen, click on the Android icon where is says "Add an app to get started". .Click on the "Android" icon to add an Android App to the project -image::img/developer-guide/push-fcm-enable-notifications.png[Click on the Android icon,scaledwidth=30%] +image::img/push-fcm-enable-notifications.png[Click on the Android icon,scaledwidth=30%] This will bring us to the "Add Application Form", which visually shows us the remainder of the steps. @@ -443,14 +443,14 @@ Fill in the Android package name with the package name of your project, and the The Debug signing certificate SHA-1 is optional, but you can paste the SHA-1 from your app's certificate here if you like. .Fill in the package name -image::img/developer-guide/push-fcm-add-app-form.png[Fill in the package name,scaledwidth=30%] +image::img/push-fcm-add-app-form.png[Fill in the package name,scaledwidth=30%] Press "Register app" once you have filled in the required fields. This will expand "Step 2" of this form: "Download config file". .Download the google-services.json file -image::img/developer-guide/push-fcm-download-config-file.png[Download google-services.json,scaledwidth=30%] +image::img/push-fcm-download-config-file.png[Download google-services.json,scaledwidth=30%] All we need to do here is press the "Download google-services.json" file, then copy the file into your project's native/android directory. @@ -462,14 +462,14 @@ There is one last piece of information that we need so that we can *send* push n Go to your project dashboard in Firebase console. Then click the "Settings" menu (the "Gear" icon next to "Project Overview" in the upper left): .Select "Project settings" -image::img/developer-guide/push-fcm-project-settings-context-menu.png[Press Project Settings,scaledwidth=30%] +image::img/push-fcm-project-settings-context-menu.png[Press Project Settings,scaledwidth=30%] Then select the "Cloud Messaging" tab. The "Server Key" displayed here is the `FCM_SERVER_API_KEY` that we refer to throughout this document. It will be used to send push notifications to your app from a server, or from another device. You can copy and paste this value now, or you can retrieve it later by logging into the Firebase console. .Save the Server key for later use. -image::img/developer-guide/push-fcm-server-key.png[Save the Server Key for later use,scaledwidth=30%] +image::img/push-fcm-server-key.png[Save the Server Key for later use,scaledwidth=30%] NOTE: The Sender ID shown in the above is not required for our Android app, however it it is helpful/required to support Push notifications in Javascript builds (in Chrome). This value is referred to elsewhere in this document as `GCM_SENDER_ID`. @@ -486,7 +486,7 @@ They are *completely different certificates* that have nothing to do with the bu The certificate wizard can generate these additional push certificates and do quite a few other things if you just check this flag in the end of the wizard: .Enable Push in the certificate wizard -image::img/developer-guide/certificate-wizard-enable-push.png[Enable Push in the certificate wizard,scaledwidth=40%] +image::img/certificate-wizard-enable-push.png[Enable Push in the certificate wizard,scaledwidth=40%] IMPORTANT: If you already have signing certificated defined for your app just skip the certificate generation phase (answer no) the rest will work as usual. @@ -537,17 +537,17 @@ Once you have registered your app in the Windows Store, and completed the corres Navigate to the App overview page for your app inside the Windows store dashboard. Under the "Services" menu (left side), select "Push notifications". .Push notifications menu item in Windows Store dashboard -image::img/developer-guide/windows-store-push-notications-menu.png[Push notifications menu item in Windows Store dashboard,scaledwidth=10%] +image::img/windows-store-push-notications-menu.png[Push notifications menu item in Windows Store dashboard,scaledwidth=10%] Then, select the "WNS/MPNS" option that appears in the left menu under "Push notifications" .WNS menu item in Windows Store dashboard -image::img/developer-guide/windows-store-wns-menu-item.png[WNS menu item in Windows Store dashboard,scaledwidth=10%] +image::img/windows-store-wns-menu-item.png[WNS menu item in Windows Store dashboard,scaledwidth=10%] This will bring you to a page with information about WNS push notifications. You'll be interested in the paragraph shown here: .Live services link -image::img/developer-guide/wns-live-services-link.png[Live services link,scaledwidth=20%] +image::img/wns-live-services-link.png[Live services link,scaledwidth=20%] Click on the "Live Services Site" link. @@ -556,12 +556,12 @@ You'll be prompted to log in using your Windows Store account. Then you'll be t Package SID. (It will be of the form "ms-app://XXXXXXXXXXX...") .WNS Package SID -image::img/developer-guide/wns-package-id.png[WNS Package SID,scaledwidth=20%] +image::img/wns-package-id.png[WNS Package SID,scaledwidth=20%] Client Secret. This will be listed in a section called "Application Secrets" .WNS Client secret -image::img/developer-guide/wns-client-secret.png[WNS Client secret,scaledwidth=20%] +image::img/wns-client-secret.png[WNS Client secret,scaledwidth=20%] You will use these two values for sending push notifications to your app. @@ -606,7 +606,7 @@ You can get it by going to the Codename One build server dashboard at https://ww The token should appear at the bottom as such: .Push Token from the build server -image::img/developer-guide/push-token.png[Push Token from the build server,scaledwidth=30%] +image::img/push-token.png[Push Token from the build server,scaledwidth=30%] The instructions for extracting the API key for Google are <>. diff --git a/docs/developer-guide/The-Components-Of-Codename-One.asciidoc b/docs/developer-guide/The-Components-Of-Codename-One.asciidoc index 459fbdb816..5d1af135fc 100644 --- a/docs/developer-guide/The-Components-Of-Codename-One.asciidoc +++ b/docs/developer-guide/The-Components-Of-Codename-One.asciidoc @@ -9,7 +9,7 @@ The Codename One container is a base class for many high level components; a con Every component has a parent container that can be null if it isn’t within a container at the moment or is a top-level container. A container can have many children. .Component-Container relationship expressed as UML -image::img/developer-guide/component-uml.png[Component-Container relationship expressed as UML,scaledwidth=50%] +image::img/component-uml.png[Component-Container relationship expressed as UML,scaledwidth=50%] Components are arranged in containers using layout managers which are algorithms that determine the arrangement of components within the container. @@ -73,7 +73,7 @@ myForm.getContentPane().add(...); [[form-layout-layers-graphic]] .Form layout graphic -image::img/developer-guide/perspective-form-layers.png[Form layout graphic,scaledwidth=20%] +image::img/perspective-form-layers.png[Form layout graphic,scaledwidth=20%] You can see that every `Form` has space allocated for the title area. If you don’t set the title it won’t show up (its size will be zero), but it will still be there. The same isn’t always true for the case of the menu bar, which can vary significantly. Effectively, the section that matters is the content pane, so the form tries to do the “right thing” by pretending to be the content pane. However, this isn’t always seamless and sometimes code needs to just invoke `getContentPane()` in order to work directly with the container. @@ -218,7 +218,7 @@ d.showPacked(BorderLayout.SOUTH, true); ---- .Custom modal Dialog in the south position -image::img/developer-guide/components-dialog-modal-south.png[Custom Dialog in the south position,scaledwidth=20%] +image::img/components-dialog-modal-south.png[Custom Dialog in the south position,scaledwidth=20%] TIP: You can turn the code above to a modless `Dialog` by flipping the boolean `true` argument to `false`. @@ -233,7 +233,7 @@ d.show(hi.getHeight() / 2, 0, 0, 0); ---- .Custom Dialog positioned absolutely -image::img/developer-guide/components-dialog-modal-bottom-half.png[Custom Dialog positioned absolutely,scaledwidth=20%] +image::img/components-dialog-modal-bottom-half.png[Custom Dialog positioned absolutely,scaledwidth=20%] NOTE: `hi` is the name of the parent `Form` in the sample above. @@ -258,7 +258,7 @@ hi.show(); ---- .Dialog with tinted background -image::img/developer-guide/components-dialog-tint.png[Dialog with tinted background,scaledwidth=20%] +image::img/components-dialog-tint.png[Dialog with tinted background,scaledwidth=20%] The tint color can be manipulated on the parent form, you can set it to any AARRGGBB value to set any color using the `setTintColor` method. Notice that this is invoked on the parent form and not on the `Dialog`! @@ -277,7 +277,7 @@ hi.show(); ---- .Dialog with green tinted background -image::img/developer-guide/components-dialog-green-tint.png[Dialog with green tinted background,scaledwidth=20%] +image::img/components-dialog-green-tint.png[Dialog with green tinted background,scaledwidth=20%] We can apply Gaussian blur to the background of a dialog to highlight the foreground further and produce a very attractive effect. We can use the `setDefaultBlurBackgroundRadius` to apply this globally, we can use the theme constant `dialogBlurRadiusInt` to do the same or we can do this on a per `Dialog` basis using `setBlurBackgroundRadius`. @@ -294,7 +294,7 @@ hi.show(); ---- .The blur effect coupled with the OS default tint -image::img/developer-guide/components-dialog-blur.png[The blur effect coupled with the OS default tint,scaledwidth=20%] +image::img/components-dialog-blur.png[The blur effect coupled with the OS default tint,scaledwidth=20%] It might be a bit hard to notice the blur effect with the tinting so here is the same code with tinting disabled: @@ -304,7 +304,7 @@ hi.setTintColor(0); ---- .The blur effect is more pronounced when the tint is disabled -image::img/developer-guide/components-dialog-blur-no-tint.png[The blur effect is more pronounced when the tint is disabled,scaledwidth=20%] +image::img/components-dialog-blur-no-tint.png[The blur effect is more pronounced when the tint is disabled,scaledwidth=20%] ==== Popup Dialog @@ -320,7 +320,7 @@ d.showPopupDialog(showDialog); ---- .Popup Dialog -image::img/developer-guide/components-dialog-popup.png[Popup Dialog,scaledwidth=20%] +image::img/components-dialog-popup.png[Popup Dialog,scaledwidth=20%] The popup dialog accepts a https://www.codenameone.com/javadoc/com/codename1/ui/Component.html[Component] or https://www.codenameone.com/javadoc/com/codename1/ui/geom/Rectangle.html[Rectangle] to point at and handles the rest. @@ -389,7 +389,7 @@ dlg.show(0, 0, Display.getInstance().getDisplayWidth() - (pre.getWidth() + pre.g ---- .Interaction Dialog -image::img/developer-guide/components-interaction-dialog.png[Interaction Dialog,scaledwidth=20%] +image::img/components-interaction-dialog.png[Interaction Dialog,scaledwidth=20%] This will show the dialog on the right hand side of the screen, which is pretty useful for a floating in place dialog. @@ -422,7 +422,7 @@ hi.add(left).add(right).add(bottom).add(top); ---- .Label positions -image::img/developer-guide/components-label-text-position.png[Label positions,scaledwidth=20%] +image::img/components-label-text-position.png[Label positions,scaledwidth=20%] `Label` allows only a single line of text, line breaking is a very expensive operation on mobile devices footnote:[String width is the real expensive part here, the complexity of font kerning and the recursion required to reflow text is a big performance hurdle] and so the `Label` class doesn't support it. @@ -471,7 +471,7 @@ hi.show(); ---- .Automatically sizes the fonts of the buttons/labels based on text and available space -image::img/developer-guide/autosize.png[Automatically sizes the fonts of the buttons/labels based on text and available space,scaledwidth=20%] +image::img/autosize.png[Automatically sizes the fonts of the buttons/labels based on text and available space,scaledwidth=20%] === TextField and TextArea @@ -542,7 +542,7 @@ hi.add("First Name").add(firstName). ---- .Simple text component sample -image::img/developer-guide/components-text-component.png[Simple text component sample,scaledwidth=20%] +image::img/components-text-component.png[Simple text component sample,scaledwidth=20%] TIP: The <> contains a very elaborate `TextField` search sample with `DataChangeListener` and rather unique styling. @@ -609,10 +609,10 @@ We try to hide a lot of the platform differences in Codename One, input is **ver To make the behavior more uniform we slightly customized the iOS keyboard as such: .Next virtual keyboard with toolbar -image::img/developer-guide/components-textfield-vkb-next.png[Next virtual keyboard with toolbar,scaledwidth=20%] +image::img/components-textfield-vkb-next.png[Next virtual keyboard with toolbar,scaledwidth=20%] .Done virtual keyboard without toolbar -image::img/developer-guide/components-textfield-vkb-done.png[Done virtual keyboard without toolbar,scaledwidth=20%] +image::img/components-textfield-vkb-done.png[Done virtual keyboard without toolbar,scaledwidth=20%] NOTE: This works with 3rd party keyboards too... @@ -654,10 +654,10 @@ When building input forms we sometimes want to adapt to the native OS behavior a E.g. this is how most of us would expect the UI to look on iOS and Android respectively: .Text Input on iOS -image::img/developer-guide/pixel-perfect-text-field-reasonable-on-ios.png[TextModeLayout on iOS,scaledwidth=30%] +image::img/pixel-perfect-text-field-reasonable-on-ios.png[TextModeLayout on iOS,scaledwidth=30%] .Text Input on Android -image::img/developer-guide/pixel-perfect-text-field-android-codenameone-font.png[TextModeLayout on Android with the same code,scaledwidth=30%] +image::img/pixel-perfect-text-field-android-codenameone-font.png[TextModeLayout on Android with the same code,scaledwidth=30%] Doing this with text fields is possible but would require code that looks a bit different and jumps through hoops. `TextComponent` allows this exact UI without forcing developers to write OS specific code: @@ -709,13 +709,13 @@ val.addConstraint(price, new NumericConstraint(true)); You would see something that looks like this on Android: .Error handling when the text is blank -image::img/developer-guide/pixel-perfect-text-field-error-handling-blank.png[Error handling when the text is blank,scaledwidth=30%] +image::img/pixel-perfect-text-field-error-handling-blank.png[Error handling when the text is blank,scaledwidth=30%] .Error handling when there is some input (notice red title label) -image::img/developer-guide/pixel-perfect-text-field-error-handling-text.png[Error handling when there is some input (notice red title label),scaledwidth=30%] +image::img/pixel-perfect-text-field-error-handling-text.png[Error handling when there is some input (notice red title label),scaledwidth=30%] .On iOS the situation hasn't changed much yet -image::img/developer-guide/pixel-perfect-text-field-error-handling-on-ios.png[On iOS the situation hasn't changed much yet,scaledwidth=30%] +image::img/pixel-perfect-text-field-error-handling-on-ios.png[On iOS the situation hasn't changed much yet,scaledwidth=30%] The underlying system is the `errorMessage` method which you can chain like the other methods on `TextComponent` as such: @@ -757,10 +757,10 @@ f.show(); This produces the following which looks pretty standard: .Picker component taking place in iOS -image::img/developer-guide/pixel-perfect-text-field-picker-ios.png[Picker component taking place in iOS,scaledwidth=30%] +image::img/pixel-perfect-text-field-picker-ios.png[Picker component taking place in iOS,scaledwidth=30%] .And in Android -image::img/developer-guide/pixel-perfect-text-field-picker-android.png[And in Android,scaledwidth=30%] +image::img/pixel-perfect-text-field-picker-android.png[And in Android,scaledwidth=30%] The one tiny thing you should notice with the `PickerComponent` is that we don't construct the picker component using `new PickerComponent()`. Instead we use create methods such as `PickerComponent.createDate(new Date())`. The reason for that is that we have many types of pickers and it wouldn't make sense to have one constructor. @@ -807,7 +807,7 @@ b.addActionListener((e) -> Log.p("Clicked")); ---- .Simple button in the iOS styling, notice iOS doesn't have borders on buttons... -image::img/developer-guide/components-button.png[Simple button in the iOS styling, notice iOS doesn't have borders on buttons...,scaledwidth=40%] +image::img/components-button.png[Simple button in the iOS styling, notice iOS doesn't have borders on buttons...,scaledwidth=40%] Such a button can be styled to look like a link using code like this or simply by making these settings in the theme and using code such as `btn.setUIID("Hyperlink")`. @@ -822,7 +822,7 @@ b.addActionListener((e) -> Log.p("Clicked")); ---- .Button styled to look like a link -image::img/developer-guide/components-link-button.png[Button styled to look like a link,scaledwidth=40%] +image::img/components-link-button.png[Button styled to look like a link,scaledwidth=40%] ==== Uppercase Buttons @@ -848,14 +848,14 @@ if(UIManager.getInstance().isThemeConstant("hasRaisedButtonBool", false)) { To enable this we have the `RaisedButton` UIID that derives from `Button` and will act like it except for the places where `hasRaisedButtonBool` is true in which case it will look like this: .Raised and flat button in simulator -image::img/developer-guide/raised-flat-buttons.png[Raised and flat button in simulator,scaledwidth=40%] +image::img/raised-flat-buttons.png[Raised and flat button in simulator,scaledwidth=40%] Notice that you can easily customize the colors of these buttons now since the border respects user colors... In this case I just set the background color to purple and the foreground to white: .Purple raised button -image::img/developer-guide/raised-flat-buttons-purple.png[Purple raised button,scaledwidth=40%] +image::img/raised-flat-buttons-purple.png[Purple raised button,scaledwidth=40%] [source,java] ---- @@ -908,7 +908,7 @@ hi.add(cb1).add(cb2).add(cb3).add(cb4).add(rb1).add(rb2).add(rb3); ---- .RadioButton & CheckBox usage -image::img/developer-guide/components-radiobutton-checkbox.png[RadioButton & CheckBox usage,scaledwidth=20%] +image::img/components-radiobutton-checkbox.png[RadioButton & CheckBox usage,scaledwidth=20%] Both of these components can be displayed as toggle buttons (see the toggle button section below), or just use the default check mark/filled circle appearance based on the type/OS. @@ -940,7 +940,7 @@ hi.add(cb1).add(cb2).add(cb3).add(cb4).add(rb1).add(rb2).add(rb3); ---- .Toggle button converted sample -image::img/developer-guide/components-toggle-buttons.png[Toggle button converted sample,scaledwidth=20%] +image::img/components-toggle-buttons.png[Toggle button converted sample,scaledwidth=20%] That's half the story though, to get the full effect of some cool toggle button UI's we can use a https://www.codenameone.com/javadoc/com/codename1/ui/ComponentGroup.html[ComponentGroup]. This allows us to create a button bar effect with the toggle buttons. @@ -953,7 +953,7 @@ hi.add(ComponentGroup.enclose(cb1, cb2, cb3, cb4)). ---- .Toggle button converted sample wrapped in ComponentGroup -image::img/developer-guide/components-toggle-buttons-component-group.png[Toggle button converted sample wrapped in ComponentGroup,scaledwidth=20%] +image::img/components-toggle-buttons-component-group.png[Toggle button converted sample wrapped in ComponentGroup,scaledwidth=20%] === ComponentGroup @@ -976,7 +976,7 @@ hi.add("Three Labels"). ---- .ComponentGroup adapts the UIID's of the components added so we can style them -image::img/developer-guide/components-componentgroup.png[ComponentGroup adapts the UIID's of the components added so we can style them,scaledwidth=15%] +image::img/components-componentgroup.png[ComponentGroup adapts the UIID's of the components added so we can style them,scaledwidth=15%] Notice the following about the code above and the resulting image: @@ -1047,7 +1047,7 @@ hi.add(oneLineIconEmblem). ---- .Multiple usage scenarios for the MultiButton -image::img/developer-guide/components-multibutton.png[Multiple usage scenarios for the MultiButton,scaledwidth=20%] +image::img/components-multibutton.png[Multiple usage scenarios for the MultiButton,scaledwidth=20%] ==== Styling The MultiButton @@ -1074,7 +1074,7 @@ hi.add(sb); ---- .The SpanButton Component -image::img/developer-guide/components-spanbutton.png[The SpanButton Component,scaledwidth=20%] +image::img/components-spanbutton.png[The SpanButton Component,scaledwidth=20%] TIP: `SpanButton` is slower than both `Button` and `MultiButton`. We recommend using it only when there is a genuine need for its functionality. @@ -1104,7 +1104,7 @@ hi.add(d).add(l).add(r).add(c); ---- .The SpanLabel Component -image::img/developer-guide/components-spanlabel.png[The SpanLabel Component,scaledwidth=20%] +image::img/components-spanlabel.png[The SpanLabel Component,scaledwidth=20%] TIP: `SpanLabel` is significantly slower than `Label`. We recommend using it only when there is a genuine need for its functionality. @@ -1123,7 +1123,7 @@ hi.add(onOff); ---- .The OnOffSwitch component as it appears on/off on iOS (top) and on Android (bottom) -image::img/developer-guide/components-onoffswitch.png[The OnOffSwitch component as it appears on/off on iOS (top) and on Android (bottom),scaledwidth=20%] +image::img/components-onoffswitch.png[The OnOffSwitch component as it appears on/off on iOS (top) and on Android (bottom),scaledwidth=20%] As you can understand the difference between the way iOS and Android render this component has triggered two very different implementations within a single component. The Android implementation just uses standard buttons and is the default for non-iOS platforms. @@ -1157,7 +1157,7 @@ v.addSubmitButtons(submit); ---- .Validation & Regular Expressions -image::img/developer-guide/validation-regex-masking-1.png[Validation and Regular Expressions,scaledwidth=20%] +image::img/validation-regex-masking-1.png[Validation and Regular Expressions,scaledwidth=20%] === InfiniteProgress @@ -1185,7 +1185,7 @@ ip.dispose(); ---- .Infinite progress -image::img/developer-guide/infinite-progress.png[Infinite progress,scaledwidth=10%] +image::img/infinite-progress.png[Infinite progress,scaledwidth=10%] The image used in the `InfiniteProgress` animation is defined by the native theme. You can override that definition either by defining the theme constant `infiniteImage` or by invoking the https://www.codenameone.com/javadoc/com/codename1/components/InfiniteProgress.html#setAnimation-com.codename1.ui.Image-[setAnimation] method. @@ -1204,7 +1204,7 @@ Let start by exploring how we can achieve this UI that fetches data from a webse .InfiniteScrollAdapter demo code fetching property cross data -image::img/developer-guide/components-infinitescrolladapter.png[InfiniteScrollAdapter demo code fetching property cross data,scaledwidth=20%] +image::img/components-infinitescrolladapter.png[InfiniteScrollAdapter demo code fetching property cross data,scaledwidth=20%] The first step is creating the webservice call, we won't go into too much detail here as webservices & IO are discussed later in the guide: @@ -1373,7 +1373,7 @@ Let's recap, what is MVC: - #Controller# - The controller accepts user input and performs changes to the model, which in turn cause the view to refresh. .Typical MVC Diagram footnote:[Image by RegisFrey - Own work, Public Domain, https://commons.wikimedia.org/w/index.php?curid=10298177] -image::img/developer-guide/mvc.png[Image by RegisFrey - Own work Public Domain https://commons.wikimedia.org/w/index.php?curid=10298177,scaledwidth=25%] +image::img/mvc.png[Image by RegisFrey - Own work Public Domain https://commons.wikimedia.org/w/index.php?curid=10298177,scaledwidth=25%] Codename One's https://www.codenameone.com/javadoc/com/codename1/ui/List.html[List] component uses the MVC paradigm in its implementation. `List` itself is the #Controller# (with a bit of the #View# mixed in). The https://www.codenameone.com/javadoc/com/codename1/ui/list/ListCellRenderer.html[ListCellRenderer] interface is the rest of the #View# and the https://www.codenameone.com/javadoc/com/codename1/ui/list/ListModel.html[ListModel] is (you guessed it by now) the #Model#. @@ -1439,7 +1439,7 @@ hi.add(BorderLayout.CENTER, ml); ---- .Basic usage of the MultiList & DefaultListModel] -image::img/developer-guide/components-multilist.png[Basic usage of the MultiList and DefaultListModel,scaledwidth=20%] +image::img/components-multilist.png[Basic usage of the MultiList and DefaultListModel,scaledwidth=20%] `createListEntry` is relatively trivial: @@ -1467,7 +1467,7 @@ private Map createListEntry(String name, String date, Image cove ---- .With cover images in place -image::img/developer-guide/graphics-urlimage-multilist.png[With cover images in place,scaledwidth=20%] +image::img/graphics-urlimage-multilist.png[With cover images in place,scaledwidth=20%] TIP: Since the `MultiList` uses the `GenericListCellRenderer` internally we can use https://www.codenameone.com/javadoc/com/codename1/ui/URLImage.html[URLImage] to dynamically fetch the data. This is discussed in the graphics section of this guide. @@ -1551,7 +1551,7 @@ MultiList ml = new MultiList(new GRMMModel()); ---- .It took ages to scroll this far... This goes to a million... -image::img/developer-guide/components-millionbooks.png[It took ages to scroll this far... This goes to a million...,scaledwidth=20%] +image::img/components-millionbooks.png[It took ages to scroll this far... This goes to a million...,scaledwidth=20%] ==== List Cell Renderer @@ -1773,7 +1773,7 @@ private Object[] createGenericListCellRendererModelData() { ---- .GenericListCellRenderer demo code -image::img/developer-guide/components-generic-list-cell-renderer.png[GenericListCellRenderer demo code,scaledwidth=20%] +image::img/components-generic-list-cell-renderer.png[GenericListCellRenderer demo code,scaledwidth=20%] ===== Custom UIID Of Entry in GenenricListCellRenderer/MultiList @@ -1873,7 +1873,7 @@ combo.setRenderer(new GenericListCellRenderer<>(new MultiButton(), new MultiButt ---- .GRRM ComboBox -image::img/developer-guide/components-combobox.png[GRRM ComboBox,scaledwidth=25%] +image::img/components-combobox.png[GRRM ComboBox,scaledwidth=25%] === Slider @@ -1881,7 +1881,7 @@ A https://www.codenameone.com/javadoc/com/codename1/ui/Slider.html[Slider] is an It can have a thumb on top to show its current position. .Slider -image::img/developer-guide/slider.png[Slider,scaledwidth=25%] +image::img/slider.png[Slider,scaledwidth=25%] The interesting part about the slider is that it has two separate style `UIID’s`, `Slider` & `SliderFull`. The `Slider` `UIID` is always painted and `SliderFull` is rendered on top based on the amount the `Slider` should be filled. @@ -1935,7 +1935,7 @@ private void showStarPickingForm() { ---- .Star Slider set to 5 (its between 0 - 10) -image::img/developer-guide/components-slider.png[Star Slider set to 5 (its between 0 - 10),scaledwidth=25%] +image::img/components-slider.png[Star Slider set to 5 (its between 0 - 10),scaledwidth=25%] TIP: This slider goes all the way to 0 stars which is less common. You can use a `Label` to represent the first star and have the slider work between 0 - 8 values to provide 4 additional stars. @@ -1967,7 +1967,7 @@ hi.show(); ---- .Simple Table usage -image::img/developer-guide/components-table.png[Simple Table usage,scaledwidth=20%] +image::img/components-table.png[Simple Table usage,scaledwidth=20%] NOTE: In the sample above the title area and first column aren't editable. The other two columns are editable. @@ -2003,7 +2003,7 @@ hi.add(BorderLayout.CENTER, table); ---- .Table with spanning & fixed widths to 33% -image::img/developer-guide/components-table-with-spanning.png[Table with spanning and fixed widths to 33%,scaledwidth=20%] +image::img/components-table-with-spanning.png[Table with spanning and fixed widths to 33%,scaledwidth=20%] In order to customize the table cell behavior you can derive the `Table` to create a "renderer like" widget, however unlike the list this component is "kept" and used as is. This means you can bind listeners to this component and work with it as you would with any other component in Codename One. @@ -2052,10 +2052,10 @@ Table table = new Table(model) { <5> We set the "pinstripe" effect by coloring even rows. Notice that unlike renderers we only need to apply the coloring once as the `Components` are stateful. .Table with customize cells using the pinstripe effect -image::img/developer-guide/components-table-pinstripe.png[Table with customize cells using the pinstripe effect,scaledwidth=20%] +image::img/components-table-pinstripe.png[Table with customize cells using the pinstripe effect,scaledwidth=20%] .Picker table cell during edit -image::img/developer-guide/components-table-pinstripe-edit.png[Picker table cell during edit,scaledwidth=20%] +image::img/components-table-pinstripe-edit.png[Picker table cell during edit,scaledwidth=20%] To line wrap table cells we can just override the `createCell` method and return a https://www.codenameone.com/javadoc/com/codename1/ui/TextArea.html[TextArea] instead of a https://www.codenameone.com/javadoc/com/codename1/ui/TextField.html[TextField] since the `TextArea` defaults to the multi-line behavior this should work seamlessly. E.g.: @@ -2096,10 +2096,10 @@ TIP: Notice that we don't really need to do anything else as binding to the `Tex IMPORTANT: We must set the column width constraint when we want multi-line to work. Otherwise the preferred size of the column might be too wide and the remaining columns might not have space left. .Multiline table cell in portrait mode -image::img/developer-guide/components-table-multiline-portrait.png[Multiline table cell in portrait mode,scaledwidth=20%] +image::img/components-table-multiline-portrait.png[Multiline table cell in portrait mode,scaledwidth=20%] .Multiline table cell in landscape mode. Notice the cell row count adapts seamlessly -image::img/developer-guide/components-table-multiline-landscape.png[Multiline table cell in landscape mode. Notice the cell row count adapts seamlessly,scaledwidth=20%] +image::img/components-table-multiline-landscape.png[Multiline table cell in landscape mode. Notice the cell row count adapts seamlessly,scaledwidth=20%] ==== Sorting Tables @@ -2174,7 +2174,7 @@ Tree dt = new Tree(new StringArrayTreeModel()); Will result in this: .Tree -image::img/developer-guide/tree.png[Tree,scaledwidth=20%] +image::img/tree.png[Tree,scaledwidth=20%] NOTE: Since `Tree` is hierarchy based we can't have a simple model like we have for the `Table` as deep hierarchy is harder to represent with arrays. @@ -2204,7 +2204,7 @@ try(Reader r = new InputStreamReader(is, "UTF-8");) { NOTE: The `try(Stream)` syntax is a try with resources clogic that implicitly closes the stream. .XML Tree -image::img/developer-guide/components-tree-xml.png[XML Tree,scaledwidth=20%] +image::img/components-tree-xml.png[XML Tree,scaledwidth=20%] The model for the XML hierarchy is implemented as such: @@ -2270,12 +2270,12 @@ sb.setImageToShare(imageFile, "image/png"); ---- .The share button running on the simulator -image::img/developer-guide/components-sharebutton.png[The share button running on the simulator,scaledwidth=20%] +image::img/components-sharebutton.png[The share button running on the simulator,scaledwidth=20%] IMPORTANT: `ShareButton` behaves very differently on the device... .The share button running on the Android device and screenshot sent into twitter -image::img/developer-guide/components-sharebutton-android.png[The share button running on the Android device and screenshot sent into twitter,scaledwidth=50%] +image::img/components-sharebutton-android.png[The share button running on the Android device and screenshot sent into twitter,scaledwidth=50%] IMPORTANT: The `ShareButton` features some share service classes to allow plugging in additional share services. However, this functionality is only relevant to devices where native sharing isn't supported. So this code isn't used on iOS/Android... @@ -2302,7 +2302,7 @@ hi.add(BorderLayout.CENTER, t); ---- .Simple usage of Tabs -image::img/developer-guide/components-tabs.png[Simple usage of Tabs,scaledwidth=20%] +image::img/components-tabs.png[Simple usage of Tabs,scaledwidth=20%] A common usage for `Tabs` is the the swipe to proceed effect which is very common in iOS applications. In the code below we use https://www.codenameone.com/javadoc/com/codename1/ui/RadioButton.html[RadioButton] and https://www.codenameone.com/javadoc/com/codename1/ui/layouts/LayeredLayout.html[LayeredLayout] with hidden tabs to produce that effect: @@ -2350,10 +2350,10 @@ t.addSelectionListener((i1, i2) -> { ---- .Swipeable Tabs with an iOS carousel effect page 1 -image::img/developer-guide/components-tabs-swipe1.png[Swipeable Tabs with an iOS carousel effect page 1,scaledwidth=20%] +image::img/components-tabs-swipe1.png[Swipeable Tabs with an iOS carousel effect page 1,scaledwidth=20%] .Swipeable Tabs with an iOS carousel effect page 2 -image::img/developer-guide/components-tabs-swipe2.png[Swipeable Tabs with an iOS carousel effect page 2,scaledwidth=20%] +image::img/components-tabs-swipe2.png[Swipeable Tabs with an iOS carousel effect page 2,scaledwidth=20%] NOTE: Notice that we used `setRadioButtonImages` to explicitly set the radio button images to the look we want for the carousel. @@ -2401,11 +2401,11 @@ hi.show(); ---- .Video playback running on the simulator -image::img/developer-guide/components-mediaplayer.png[Video playback running on the simulator,scaledwidth=25%] +image::img/components-mediaplayer.png[Video playback running on the simulator,scaledwidth=25%] .Video playback running on an Android device. Notice the native playback controls that appear when the video is tapped -image::img/developer-guide/components-mediaplayer-android.png[Video playback running on an Android device. Notice the native playback controls that appear when the video is tapped,scaledwidth=25%] +image::img/components-mediaplayer-android.png[Video playback running on an Android device. Notice the native playback controls that appear when the video is tapped,scaledwidth=25%] IMPORTANT: Video playback in the simulator will only work with JavaFX enabled. This is the default for Java 8 or newer so we recommend using that. @@ -2429,10 +2429,10 @@ TIP: You can simulate pinch to zoom on the simulator by dragging the right butto .ImageViewer as the demo loads with the image from the default icon -image::img/developer-guide/components-imageviewer.png[ImageViewer as the demo loads with the image from the default icon,scaledwidth=20%] +image::img/components-imageviewer.png[ImageViewer as the demo loads with the image from the default icon,scaledwidth=20%] .ImageViewer zoomed in -image::img/developer-guide/components-imageviewer-zoomed-in.png[ImageViewer zoomed in,scaledwidth=20%] +image::img/components-imageviewer-zoomed-in.png[ImageViewer zoomed in,scaledwidth=20%] We can work with a list of images to produce a swiping effect for the image viewer where you can swipe from one image to the next and also zoom in/out on a specific image: @@ -2451,7 +2451,7 @@ hi.add(BorderLayout.CENTER, iv); ---- .An ImageViewer with multiple elements is indistinguishable from a single ImageViewer with the exception of swipe -image::img/developer-guide/components-imageviewer-multi.png[An ImageViewer with multiple elements is indistinguishable from a single ImageViewer with the exception of swipe,scaledwidth=20%] +image::img/components-imageviewer-multi.png[An ImageViewer with multiple elements is indistinguishable from a single ImageViewer with the exception of swipe,scaledwidth=20%] Notice that we use a https://www.codenameone.com/javadoc/com/codename1/ui/list/ListModel.html[ListModel] to allow swiping between images. @@ -2538,7 +2538,7 @@ hi.add(BorderLayout.CENTER, iv); ---- .Dynamically fetching an image URL from the internet footnote:[Image was fetched from http://awoiaf.westeros.org/index.php/Portal:Books] -image::img/developer-guide/components-imageviewer-dynamic.png[Dynamically fetching an image URL from the internet,scaledwidth=20%] +image::img/components-imageviewer-dynamic.png[Dynamically fetching an image URL from the internet,scaledwidth=20%] This fetches the images in the URL asynchronously and fires a data change event when the data arrives to automatically refresh the `ImageViewer` when that happens. @@ -2572,7 +2572,7 @@ hi.show(); .ScaleImageLabel/Button, the top row includes scale to fit versions (the default) whereas the bottom row includes the scale to fill versions -image::img/developer-guide/components-scaleimage.png[ScaleImageLabel/Button the top row includes scale to fit versions (the default) whereas the bottom row includes the scale to fill versions,scaledwidth=25%] +image::img/components-scaleimage.png[ScaleImageLabel/Button the top row includes scale to fit versions (the default) whereas the bottom row includes the scale to fill versions,scaledwidth=25%] WARNING: When styling these components keep in mind that changing attributes such as background behavior might cause an issue with their functionality or might not work. @@ -2614,14 +2614,14 @@ hi.show(); .The Toolbar -image::img/developer-guide/components-toolbar.png[The Toolbar,scaledwidth=25%] +image::img/components-toolbar.png[The Toolbar,scaledwidth=25%] .The default sidemenu of the Toolbar -image::img/developer-guide/components-toolbar-sidemenu.png[The default sidemenu of the Toolbar,scaledwidth=30%] +image::img/components-toolbar-sidemenu.png[The default sidemenu of the Toolbar,scaledwidth=30%] .The overflow menu of the Toolbar -image::img/developer-guide/components-toolbar-overflow-menu.png[The overflow menu of the Toolbar,scaledwidth=25%] +image::img/components-toolbar-overflow-menu.png[The overflow menu of the Toolbar,scaledwidth=25%] Normally you can just set a title with a `String` but if you would want the component to be a text field or a multi line label you can use `setTitleComponent(Component)` which allows you to install any component into the @@ -2696,17 +2696,17 @@ Visible indicates whether a component can be seen. It will still occupy the phys However, that isn't intuitive to most users so we added the button to start editing. .Search field within the toolbar -image::img/developer-guide/components-toolbar-search.png[Search field within the toolbar,scaledwidth=20%] +image::img/components-toolbar-search.png[Search field within the toolbar,scaledwidth=20%] .Search field after typing a couple of letters -image::img/developer-guide/components-toolbar-search-ongoing.png[Search field after typing a couple of letters,scaledwidth=20%] +image::img/components-toolbar-search-ongoing.png[Search field after typing a couple of letters,scaledwidth=20%] ==== Search Mode While you can implement search manually using the builtin search offers a simpler and more uniform UI. .Builtin toolbar search functionality -image::img/developer-guide/toolbar-search-mode.jpg[Builtin toolbar search functionality,scaledwidth=40%] +image::img/toolbar-search-mode.jpg[Builtin toolbar search functionality,scaledwidth=40%] You can customize the appearance of the search bar by using the UIID's: `ToolbarSearch`, `TextFieldSearch` & `TextHintSearch`. @@ -2822,13 +2822,13 @@ hi.show(); ---- .The Toolbar starts with the large URLImage fetched from the web -image::img/developer-guide/components-toolbar-animation-1.png[The Toolbar starts with the large URLImage fetched from the web,scaledwidth=20%] +image::img/components-toolbar-animation-1.png[The Toolbar starts with the large URLImage fetched from the web,scaledwidth=20%] .As we scroll down the image fades and the title shrinks in size returning to the default UIID look -image::img/developer-guide/components-toolbar-animation-2.png[As we scroll down the image fades and the title shrinks in size returning to the default UIID look,scaledwidth=20%] +image::img/components-toolbar-animation-2.png[As we scroll down the image fades and the title shrinks in size returning to the default UIID look,scaledwidth=20%] .As scrolling continues the title reaches standard size -image::img/developer-guide/components-toolbar-animation-3.png[As scrolling continues the title reaches standard size,scaledwidth=20%] +image::img/components-toolbar-animation-3.png[As scrolling continues the title reaches standard size,scaledwidth=20%] Almost all of the code above just creates the "look" of the application. The key piece of code above is this: @@ -2865,7 +2865,7 @@ hi.add(BorderLayout.CENTER, browser); ---- .Browser Component showing the Codename One website on the simulator -image::img/developer-guide/components-browsercomponent.png[Browser Component showing the Codename One website on the simulator,scaledwidth=30%] +image::img/components-browsercomponent.png[Browser Component showing the Codename One website on the simulator,scaledwidth=30%] NOTE: The scrollbars only appear in the simulator, device versions of the browser component act differently and support touch scrolling. @@ -2949,10 +2949,10 @@ bc.setBrowserNavigationCallback((url) -> { .Before the link is clicked for the "shouldNavigate" call -image::img/developer-guide/components-browsercomponent-callback-before.png[Before the link is clicked for the "shouldNavigate" call,scaledwidth=25%] +image::img/components-browsercomponent-callback-before.png[Before the link is clicked for the "shouldNavigate" call,scaledwidth=25%] .After the link is clicked for the "shouldNavigate" call -image::img/developer-guide/components-browsercomponent-callback-after.png[After the link is clicked for the "shouldNavigate" call,scaledwidth=25%] +image::img/components-browsercomponent-callback-after.png[After the link is clicked for the "shouldNavigate" call,scaledwidth=25%] NOTE: The JavaScript Bridge is implemented on top of the `BrowserNavigationCallback`. @@ -3141,7 +3141,7 @@ hi.show(); ---- .JavaScript code was invoked to append text into the browser image above -image::img/developer-guide/components-browsercomponent-javascript.png[JavaScript code was invoked to append text into the browser image above,scaledwidth=20%] +image::img/components-browsercomponent-javascript.png[JavaScript code was invoked to append text into the browser image above,scaledwidth=20%] NOTE: Notice that opening an alert in an embedded native browser might not work @@ -3211,7 +3211,7 @@ hi.show(); ---- .The contents was copied from the DOM and placed in the south position of the form -image::img/developer-guide/components-browsercomponent-context.png[The contents was copied from the DOM and placed in the south position of the form,scaledwidth=20%] +image::img/components-browsercomponent-context.png[The contents was copied from the DOM and placed in the south position of the form,scaledwidth=20%] Notice that when you work with numeric values or anything related to the types mentioned above your code must be aware of the typing. E.g. in this case the type is `Double` and not `String`: @@ -3280,7 +3280,7 @@ hi.add(ac); ---- .Autocomplete Text Field -image::img/developer-guide/components-autocomplete.png[Autocomplete Text Field,scaledwidth=30%] +image::img/components-autocomplete.png[Autocomplete Text Field,scaledwidth=30%] However, if you wish to query a database or a web service you will need to derive the class and perform more advanced filtering by overriding the `filter` method: @@ -3341,7 +3341,7 @@ String[] searchLocations(String text) { ---- .Autocomplete Text Field with a webservice -image::img/developer-guide/dynamic-autocomplete.png[Autocomplete Text Field with a webservice,scaledwidth=20%] +image::img/dynamic-autocomplete.png[Autocomplete Text Field with a webservice,scaledwidth=20%] ==== Using Images In AutoCompleteTextField @@ -3416,7 +3416,7 @@ current.show(); <3> In a renderer it's important to always set the value especially if you don't have a value in place .Auto complete with images -image::img/developer-guide/auto-complete-with-pictures.png[Auto complete with images,scaledwidth=20%] +image::img/auto-complete-with-pictures.png[Auto complete with images,scaledwidth=20%] [[picker-section]] @@ -3472,34 +3472,34 @@ hi.show(); .The various picker components -image::img/developer-guide/components-picker.png[The various picker components,scaledwidth=30%] +image::img/components-picker.png[The various picker components,scaledwidth=30%] .The date & time picker on the simulator -image::img/developer-guide/components-picker-date-time-on-simulator.png[The date & time picker on the simulator,scaledwidth=30%] +image::img/components-picker-date-time-on-simulator.png[The date & time picker on the simulator,scaledwidth=30%] .The date picker component on the Android device -image::img/developer-guide/components-picker-date-android.png[The date picker component on the Android device,scaledwidth=15%] +image::img/components-picker-date-android.png[The date picker component on the Android device,scaledwidth=15%] .Date & time picker on Android. Notice it didn't use a builtin widget since there is none -image::img/developer-guide/components-picker-date-time-android.png[Date and time picker on Android. Notice it didn't use a builtin widget since there is none,scaledwidth=20%] +image::img/components-picker-date-time-android.png[Date and time picker on Android. Notice it didn't use a builtin widget since there is none,scaledwidth=20%] .String picker on the native Android device -image::img/developer-guide/components-picker-strings-android.png[String picker on the native Android device,scaledwidth=20%] +image::img/components-picker-strings-android.png[String picker on the native Android device,scaledwidth=20%] .Time picker on the Android device -image::img/developer-guide/components-picker-time-android.png[Time picker on the Android device,scaledwidth=20%] +image::img/components-picker-time-android.png[Time picker on the Android device,scaledwidth=20%] .Duration picker on Android device -image::img/developer-guide/components-picker-duration-android.png[Duration picker on Android device,scaledwidth=20%] +image::img/components-picker-duration-android.png[Duration picker on Android device,scaledwidth=20%] .Hours Duration picker on Android device -image::img/developer-guide/components-picker-duration-hours-android.png[Hours Duration picker on Android device,scaledwidth=20%] +image::img/components-picker-duration-hours-android.png[Hours Duration picker on Android device,scaledwidth=20%] .Minutes Duration picker on Android device -image::img/developer-guide/components-picker-duration-minutes-android.png[Minutes Duration picker on Android device,scaledwidth=20%] +image::img/components-picker-duration-minutes-android.png[Minutes Duration picker on Android device,scaledwidth=20%] The text displayed by the picker on selection is generated automatically by the `updateValue()` method. You can override it to display a custom formatted value and call `setText(String)` with the correct display string. @@ -3540,7 +3540,7 @@ public SwipeableContainer createRankWidget(String title, String year) { ---- .SwipableContainer showing a common use case of ranking on swipe -image::img/developer-guide/components-swipablecontainer.png[SwipableContainer showing a common use case of ranking on swipe,scaledwidth=20%] +image::img/components-swipablecontainer.png[SwipableContainer showing a common use case of ranking on swipe,scaledwidth=20%] @@ -3568,7 +3568,7 @@ The https://www.codenameone.com/javadoc/com/codename1/maps/MapComponent.html[Map The code was contributed by Roman Kamyk and was originally used for a LWUIT application. .Map Component -image::img/developer-guide/mapcomponent.png[Map Component,scaledwidth=30%] +image::img/mapcomponent.png[Map Component,scaledwidth=30%] The screenshot above was produced using the following code: @@ -3607,7 +3607,7 @@ make sure to obtain your secret api key from the Google https://www.codenameone. https://developers.google.com/maps/documentation/places/ .MapComponent with Google Location API -image::img/developer-guide/map-loc.png[MapComponent with Google Location API,scaledwidth=25%] +image::img/map-loc.png[MapComponent with Google Location API,scaledwidth=25%] [source,java] ---- @@ -3724,40 +3724,40 @@ sampling of the types of charts that can be created. .Line Charts [float="left"] -image::img/developer-guide/line_chart.png[Line Charts,scaledwidth=15%] +image::img/line_chart.png[Line Charts,scaledwidth=15%] .Cubic Line Charts [float="right"] -image::img/developer-guide/line_chart_cubic_multi.png[Cubic Line Charts,scaledwidth=15%] +image::img/line_chart_cubic_multi.png[Cubic Line Charts,scaledwidth=15%] .Bar Charts [float="left"] -image::img/developer-guide/bar_chart.png[Bar Charts,scaledwidth=15%] +image::img/bar_chart.png[Bar Charts,scaledwidth=15%] .Stacked Bar Charts [float="right"] -image::img/developer-guide/bar_chart_stacked.png[Stacked Bar Charts,scaledwidth=15%] +image::img/bar_chart_stacked.png[Stacked Bar Charts,scaledwidth=15%] .Range Bar Charts [float="left"] -image::img/developer-guide/range_bar_chart.png[Range Bar Charts,scaledwidth=15%] +image::img/range_bar_chart.png[Range Bar Charts,scaledwidth=15%] .Pie Charts [float="right",scaledwidth=15%] -image::img/developer-guide/pie_chart.png[Pie Charts,scaledwidth=15%] +image::img/pie_chart.png[Pie Charts,scaledwidth=15%] .Doughnut Charts [float="left"] -image::img/developer-guide/doughnut_chart.png[Doughnut Charts,scaledwidth=15%] +image::img/doughnut_chart.png[Doughnut Charts,scaledwidth=15%] .Scatter Charts [float="right",scaledwidth=15%] -image::img/developer-guide/scatter_chart.png[Scatter Charts,scaledwidth=15%] +image::img/scatter_chart.png[Scatter Charts,scaledwidth=15%] .Dial Charts [float="left",scaledwidth=15%] -image::img/developer-guide/dial_chart.png[Dial Charts,scaledwidth=15%] +image::img/dial_chart.png[Dial Charts,scaledwidth=15%] .Combined Charts [float="right"] -image::img/developer-guide/combined.png[Combined Charts,scaledwidth=15%] +image::img/combined.png[Combined Charts,scaledwidth=15%] .Bubble Charts [float="left",scaledwidth=15%] -image::img/developer-guide/bubble_chart.png[Bubble Charts,scaledwidth=15%] +image::img/bubble_chart.png[Bubble Charts,scaledwidth=15%] .Time Charts [float="right",scaledwidth=15%] -image::img/developer-guide/time_chart.png[Time Charts,scaledwidth=15%] +image::img/time_chart.png[Time Charts,scaledwidth=15%] NOTE: The above screenshots were taken from the https://github.com/codenameone/codenameone-demos/tree/master/ChartsDemo[ChartsDemo app]. @@ -3866,7 +3866,7 @@ hi.add(BorderLayout.CENTER, cld); .The Calendar component -image::img/developer-guide/components-calendar.png[The Calendar component,scaledwidth=20%] +image::img/components-calendar.png[The Calendar component,scaledwidth=20%] === ToastBar @@ -3885,7 +3885,7 @@ status.clear(); ---- .ToastBar with message -image::img/developer-guide/components-statusbar-message.png[ToastBar with message,scaledwidth=20%] +image::img/components-statusbar-message.png[ToastBar with message,scaledwidth=20%] We can show a progress indicator in the ToastBar like this: @@ -3898,7 +3898,7 @@ status.show(); ---- .Status Message with Progress Bar -image::img/developer-guide/components-statusbar.png[Status Message with Progress Bar,scaledwidth=20%] +image::img/components-statusbar.png[Status Message with Progress Bar,scaledwidth=20%] We can automatically clear a status message/progress after a timeout using the `setExpires` method as such: @@ -3923,7 +3923,7 @@ status.clear(); ---- .ToastBar with a multiline message -image::img/developer-guide/components-statusbar-multiline.png[ToastBar with a multiline message,scaledwidth=20%] +image::img/components-statusbar-multiline.png[ToastBar with a multiline message,scaledwidth=20%] ==== Actions In ToastBar @@ -3977,7 +3977,7 @@ hi.show(); ---- .The signature Component -image::img/developer-guide/components-signature2.png[The Signature Component,scaledwidth=25%] +image::img/components-signature2.png[The Signature Component,scaledwidth=25%] === Accordion @@ -4006,7 +4006,7 @@ f.show(); ---- .The Accordion Component -image::img/developer-guide/components-accordion.png[The Accordion Component,scaledwidth=30%] +image::img/components-accordion.png[The Accordion Component,scaledwidth=30%] === Floating Hint @@ -4024,7 +4024,7 @@ hi.show(); ---- .The FloatingHint component with one component that contains text and another that doesn't -image::img/developer-guide/components-floatinghint.png[The FloatingHint component with one component that contains text and another that doesn't,scaledwidth=30%] +image::img/components-floatinghint.png[The FloatingHint component with one component that contains text and another that doesn't,scaledwidth=30%] === Floating Button @@ -4052,7 +4052,7 @@ fab.bindFabToContainer(form.getContentPane()); ---- .FloatingActionButton with submenu expanded -image::img/developer-guide/floating-action.png[FloatingActionButton with submenu expanded,scaledwidth=20%] +image::img/floating-action.png[FloatingActionButton with submenu expanded,scaledwidth=20%] Those familiar with this widget know that there are many nuances to this UI that we might implement/expose in the future. At the moment we chose to keep the API simple and minimal for the common use cases and refine it based on feedback. @@ -4085,7 +4085,7 @@ hi.show(); The code above results in this, notice you can type into the text field to change the badge value: .Badge floating button in action -image::img/developer-guide/badge-floating-button.png[Badge floating button in action,scaledwidth=20%] +image::img/badge-floating-button.png[Badge floating button in action,scaledwidth=20%] === SplitPane @@ -4114,7 +4114,7 @@ private Container encloseInMaximizableGrid(Component cmp1, Component cmp2) { ---- .Split Pane in the Kitchen Sink Demo -image::img/developer-guide/splitpane.png[Split Pane in the Kitchen Sink Demo,scaledwidth=30%] +image::img/splitpane.png[Split Pane in the Kitchen Sink Demo,scaledwidth=30%] This is mostly self explanatory but only "mostly". We have 5 arguments the first 3 make sense: diff --git a/docs/developer-guide/The-EDT---Event-Dispatch-Thread.asciidoc b/docs/developer-guide/The-EDT---Event-Dispatch-Thread.asciidoc index f47393c6bf..4cf5cfa32f 100644 --- a/docs/developer-guide/The-EDT---Event-Dispatch-Thread.asciidoc +++ b/docs/developer-guide/The-EDT---Event-Dispatch-Thread.asciidoc @@ -125,7 +125,7 @@ It’s an imperfect tool. It might fire “false positives” meaning it might d To activate this tool just select the Debug EDT menu option in the simulator and pick the level of output you wish to receive: .Debug EDT -image::img/developer-guide/debug-edt.png[Debug EDT,scaledwidth=40%] +image::img/debug-edt.png[Debug EDT,scaledwidth=40%] Full output will include stack traces to the area in the code that is suspected in the violation. diff --git a/docs/developer-guide/Theme-Basics.asciidoc b/docs/developer-guide/Theme-Basics.asciidoc index 3e7b9fea41..31055ade01 100644 --- a/docs/developer-guide/Theme-Basics.asciidoc +++ b/docs/developer-guide/Theme-Basics.asciidoc @@ -48,38 +48,38 @@ We can launch the designer tool by double clicking on the `theme.res` file found In the left side you can see the section picker and within it the Theme section. .The theme area in the designer -image::img/developer-guide/theme-area-in-designer.png[The theme area in the designer] +image::img/theme-area-in-designer.png[The theme area in the designer] When you select the theme you will see the theme default view. .Theme default view -image::img/developer-guide/theme-default-view.png[Theme default view] +image::img/theme-default-view.png[Theme default view] There are several interesting things to notice here the preview section allows us to instantly see the changes we make to the theme data. .Theme preview section -image::img/developer-guide/theme-preview-section.png[Theme preview section,scaledwidth=50%] +image::img/theme-preview-section.png[Theme preview section,scaledwidth=50%] The theme state tabs and constant tabs allow us to pass between the various editing modes for the theme and also add theme constants. We discussed styles before, you can pick the right style mode through the tabs. .You can use these tabs to add the various types of styles and theme constants -image::img/developer-guide/theme-state-tabs.png[You can use these tabs to add the various types of styles and theme constants,scaledwidth=50%] +image::img/theme-state-tabs.png[You can use these tabs to add the various types of styles and theme constants,scaledwidth=50%] The most important section is the style section. It allows us to add/edit/remove style UIID's. Notice the #Default Style# section, it allows us to customize global defaults for the styles. Use it with caution as changes here can have wide implications. .The theme selection area allows us to add, edit and delete entries. Notice the default style entry which is a unique special case -image::img/developer-guide/theme-style-selection-pane.png[The theme selection area allows us to add, edit and delete entries. Notice the default style entry which is a unique special case,scaledwidth=50%] +image::img/theme-style-selection-pane.png[The theme selection area allows us to add, edit and delete entries. Notice the default style entry which is a unique special case,scaledwidth=50%] When we add an entry to the style we can just type the desired UIID into the box at the top of the dialog. We can also pick a UIID from the combo box but that might not include all potential options. TIP: You can use the Component Inspector tool in the simulator to locate a component and its UIID in a specific https://www.codenameone.com/javadoc/com/codename1/ui/Form.html[Form] .When pressing the Add/Edit entry we can edit a specific style entry UIID -image::img/developer-guide/theme-add-edit-entry.png[When pressing the Add/Edit entry we can edit a specific style entry UIID,scaledwidth=50%] +image::img/theme-add-edit-entry.png[When pressing the Add/Edit entry we can edit a specific style entry UIID,scaledwidth=50%] When we add/edit an entry an important piece of the puzzle is the #Derive# check box that appears next to all of the UIID entries. All styles derive from the base style and usually from the native theme defaults, so when this flag is checked the defaults will be used. @@ -95,7 +95,7 @@ The title is a great target for customization since it includes a few interestin The `Title` is surrounded by a `TitleArea` container that encloses it, above the title you will also see the `StatusBar` UIID that prevents the status details from drawing on top of the title text. .Title Area UIID's -image::img/developer-guide/theme-title-area-UIIDs.png[Title Area UIID's,scaledwidth=50%] +image::img/theme-title-area-UIIDs.png[Title Area UIID's,scaledwidth=50%] TIP: The `StatusBar` UIID is a special case that is only there on iOS. In iOS the application needs to render the section under the status bar (which isn't the case for other OS's) and the `StatusBar` UIID was added so developers can ignore that behavior. @@ -123,71 +123,71 @@ Lets start in the first page of the style entry, we'll customize the background The pictures below demonstrate the different types of background image behaviors. .IMAGE_SCALED scales the image without preserving aspect ratio to fit the exact size of the component -image::img/developer-guide/theme-background-image-scaled.png[IMAGE_SCALED scales the image without preserving aspect ratio to fit the exact size of the component] +image::img/theme-background-image-scaled.png[IMAGE_SCALED scales the image without preserving aspect ratio to fit the exact size of the component] .IMAGE_SCALED_FILL scales the image while preserving aspect ratio so it fills the entire space of the component -image::img/developer-guide/theme-background-image-scaled-fill.png[IMAGE_SCALED_FILL scales the image while preserving aspect ratio so it fills the entire space of the component] +image::img/theme-background-image-scaled-fill.png[IMAGE_SCALED_FILL scales the image while preserving aspect ratio so it fills the entire space of the component] TIP: Aspect ratio is the ratio between the width and the height of the image. E.g. if the image is `100x50` pixels and we want the width to be 200 pixels preserving the aspect ratio will require the height to also double to `200x100`. + We highly recommend preserving the aspect ratio to keep images more "natural". .IMAGE_SCALED_FIT scales the image while preserving aspect ratio so it fits within the component -image::img/developer-guide/theme-background-image-scaled-fit.png[IMAGE_SCALED_FIT scales the image while preserving aspect ratio so it fits within the component] +image::img/theme-background-image-scaled-fit.png[IMAGE_SCALED_FIT scales the image while preserving aspect ratio so it fits within the component] .IMAGE_TILE_BOTH tiles the image on both axis of the component -image::img/developer-guide/theme-background-image-tile-both.png[IMAGE_TILE_BOTH tiles the image on both axis of the component] +image::img/theme-background-image-tile-both.png[IMAGE_TILE_BOTH tiles the image on both axis of the component] .IMAGE_TILE_VERTICAL_ALIGN_LEFT tiles the image on the left side of the component -image::img/developer-guide/theme-background-image-tile-vertical-left-align.png[IMAGE_TILE_VERTICAL_ALIGN_LEFT tiles the image on the left side of the component] +image::img/theme-background-image-tile-vertical-left-align.png[IMAGE_TILE_VERTICAL_ALIGN_LEFT tiles the image on the left side of the component] .IMAGE_TILE_VERTICAL_ALIGN_CENTER tiles the image in the middle of the component -image::img/developer-guide/theme-background-image-tile-vertical-center-align.png[IMAGE_TILE_VERTICAL_ALIGN_CENTER tiles the image in the middle of the component] +image::img/theme-background-image-tile-vertical-center-align.png[IMAGE_TILE_VERTICAL_ALIGN_CENTER tiles the image in the middle of the component] .IMAGE_TILE_VERTICAL_ALIGN_RIGHT tiles the image on the right side of the component -image::img/developer-guide/theme-background-image-tile-vertical-right-align.png[IMAGE_TILE_VERTICAL_ALIGN_RIGHT tiles the image on the right side of the component] +image::img/theme-background-image-tile-vertical-right-align.png[IMAGE_TILE_VERTICAL_ALIGN_RIGHT tiles the image on the right side of the component] .IMAGE_TILE_HORIZONTAL_ALIGN_TOP tiles the image on the top of the component -image::img/developer-guide/theme-background-image-tile-horizontal-align-top.png[IMAGE_TILE_HORIZONTAL_ALIGN_TOP tiles the image on the top of the component] +image::img/theme-background-image-tile-horizontal-align-top.png[IMAGE_TILE_HORIZONTAL_ALIGN_TOP tiles the image on the top of the component] .IMAGE_TILE_HORIZONTAL_ALIGN_CENTER tiles the image in the middle of the component -image::img/developer-guide/theme-background-image-tile-horizontal-align-center.png[IMAGE_TILE_HORIZONTAL_ALIGN_CENTER tiles the image in the middle of the component] +image::img/theme-background-image-tile-horizontal-align-center.png[IMAGE_TILE_HORIZONTAL_ALIGN_CENTER tiles the image in the middle of the component] .IMAGE_TILE_HORIZONTAL_ALIGN_BOTTOM tiles the image to the bottom of the component -image::img/developer-guide/theme-background-image-tile-horizontal-align-bottom.png[IMAGE_TILE_HORIZONTAL_ALIGN_BOTTOM tiles the image to the bottom of the component] +image::img/theme-background-image-tile-horizontal-align-bottom.png[IMAGE_TILE_HORIZONTAL_ALIGN_BOTTOM tiles the image to the bottom of the component] .IMAGE_ALIGNED_TOP places the image centered at the top part of the component -image::img/developer-guide/theme-background-image-aligned-top.png[IMAGE_ALIGNED_TOP places the image centered at the top part of the component] +image::img/theme-background-image-aligned-top.png[IMAGE_ALIGNED_TOP places the image centered at the top part of the component] .IMAGE_ALIGNED_BOTTOM places the image centered at the bottom part of the component -image::img/developer-guide/theme-background-image-aligned-bottom.png[IMAGE_ALIGNED_BOTTOM places the image centered at the bottom part of the component] +image::img/theme-background-image-aligned-bottom.png[IMAGE_ALIGNED_BOTTOM places the image centered at the bottom part of the component] .IMAGE_ALIGNED_LEFT places the image centered at the left part of the component -image::img/developer-guide/theme-background-image-aligned-left.png[IMAGE_ALIGNED_LEFT places the image centered at the left part of the component] +image::img/theme-background-image-aligned-left.png[IMAGE_ALIGNED_LEFT places the image centered at the left part of the component] .IMAGE_ALIGNED_RIGHT places the image centered at the right part of the component -image::img/developer-guide/theme-background-image-aligned-right.png[IMAGE_ALIGNED_RIGHT places the image centered at the right part of the component] +image::img/theme-background-image-aligned-right.png[IMAGE_ALIGNED_RIGHT places the image centered at the right part of the component] .IMAGE_ALIGNED_TOP_LEFT places the image at the top left corner -image::img/developer-guide/theme-background-image-aligned-top-left.png[IMAGE_ALIGNED_TOP_LEFT places the image at the top left corner] +image::img/theme-background-image-aligned-top-left.png[IMAGE_ALIGNED_TOP_LEFT places the image at the top left corner] .IMAGE_ALIGNED_TOP_RIGHT places the image at the top right corner -image::img/developer-guide/theme-background-image-aligned-top-right.png[IMAGE_ALIGNED_TOP_RIGHT places the image at the top right corner] +image::img/theme-background-image-aligned-top-right.png[IMAGE_ALIGNED_TOP_RIGHT places the image at the top right corner] .IMAGE_ALIGNED_BOTTOM_LEFT places the image at the bottom left corner -image::img/developer-guide/theme-background-image-aligned-bottom-left.png[IMAGE_ALIGNED_BOTTOM_LEFT places the image at the bottom left corner] +image::img/theme-background-image-aligned-bottom-left.png[IMAGE_ALIGNED_BOTTOM_LEFT places the image at the bottom left corner] .IMAGE_ALIGNED_BOTTOM_RIGHT places the image at the bottom right corner -image::img/developer-guide/theme-background-image-aligned-bottom-right.png[IMAGE_ALIGNED_BOTTOM_RIGHT places the image at the bottom right corner] +image::img/theme-background-image-aligned-bottom-right.png[IMAGE_ALIGNED_BOTTOM_RIGHT places the image at the bottom right corner] .IMAGE_ALIGNED_CENTER places the image in the middle of the component -image::img/developer-guide/theme-background-image-aligned-center.png[IMAGE_ALIGNED_CENTER places the image in the middle of the component] +image::img/theme-background-image-aligned-center.png[IMAGE_ALIGNED_CENTER places the image in the middle of the component] ==== The Color Settings The color settings are much simpler than the background behavior. As explained <> the priority for color is at the bottom so if you have a border, image or gradient defined the background color settings will be ignored. .Add theme entry color settings -image::img/developer-guide/theme-entry-color.png[Add theme entry color settings] +image::img/theme-entry-color.png[Add theme entry color settings] There are three color settings: @@ -206,7 +206,7 @@ Not all component types support alignment and even when they do they don't suppo Notice that https://www.codenameone.com/javadoc/com/codename1/ui/Container.html[Container] doesn't support alignment. You should use the layout manager to tune component positioning. .Alignment of the text within some component types -image::img/developer-guide/theme-entry-align.png[Alignment of the text within some component types] +image::img/theme-entry-align.png[Alignment of the text within some component types] WARNING: Aligning text components to anything other than the default alignment might be a problem if they are editable. The native editing capabilities might collide with the alignment behavior. @@ -217,14 +217,14 @@ NOTE: Bidi/RtL layout reverses the alignment value so left becomes right and vis Padding and margin are concepts derived from the CSS box model. They are slightly different in Codename One, where the border spacing is part of the padding, but other than that they are pretty similar: .Padding and Margin/Box Model -image::img/developer-guide/padding.png[Padding and Margin,scaledwidth=50%] +image::img/padding.png[Padding and Margin,scaledwidth=50%] In the diagram, we can see the component represented in yellow occupying its preferred size. The padding portion in gray effectively increases the components size. The margin is the space between components, it allows us to keep whitespace between multiple components. Margin is represented in red in the diagram. The theme allows us to customize the padding/margin, and specify them for all 4 sides of a component. They can be specified in pixels, millimeters/dips, or screen percentage: .Padding tab -image::img/developer-guide/theme-entry-padding.png[Padding tab] +image::img/theme-entry-padding.png[Padding tab] TIP: We recommend using millimeters for all spacing to make it look good for all device densities. Percentages make sense only in very extreme cases @@ -233,7 +233,7 @@ TIP: We recommend using millimeters for all spacing to make it look good for all Borders are a big subject in their own right, the UI for their creation is also a bit confusing: .Border entry in the theme -image::img/developer-guide/theme-entry-border-settings.png[Border entry in the theme] +image::img/theme-entry-border-settings.png[Border entry in the theme] ==== 9-Piece Image Border @@ -250,14 +250,14 @@ They don't work well in cases where the image is asymmetric on both axis. E.g. a The image border wizard simplifies the process of generating a 9-piece image border using a 3 stage process. .Stage 1: create or pick an image from an existing PNG file that we will convert to a 9-piece image -image::img/developer-guide/theme-entry-9-piece-wizard-stage1.png[Stage 1: create or pick an image from an existing PNG file that we will convert to a 9-piece image] +image::img/theme-entry-9-piece-wizard-stage1.png[Stage 1: create or pick an image from an existing PNG file that we will convert to a 9-piece image] TIP: Use an image that's designed for a high DPI device For your convenience you can create a rudimentary image with the create image stage but for a professional looking application you would usually want to use a design by a professional designer. .Stage 2: Cutting the image and adapting it to the DPI's -image::img/developer-guide/theme-entry-9-piece-wizard-stage2.png[Stage 2: Cutting the image and adapting it to the DPI's] +image::img/theme-entry-9-piece-wizard-stage2.png[Stage 2: Cutting the image and adapting it to the DPI's] The second stage is probably the hardest and most important one in this wizard! @@ -268,17 +268,17 @@ You can change the values of the top/bottom/left/right spinners to move the posi - The top and bottom lines have exactly one pixel between them. This is to avoid breaking the gradient. E.g. if we set the lines further apart we will end up with this: .This is why it's important to keep the lines close when a gradient is involved, notice the tiling effect... -image::img/developer-guide/theme-entry-9-piece-wizard-stage2-bad-border.png[This is why it's important to keep the lines close when a gradient is involved, notice the tiling effect...,scaledwidth=30%] +image::img/theme-entry-9-piece-wizard-stage2-bad-border.png[This is why it's important to keep the lines close when a gradient is involved, notice the tiling effect...,scaledwidth=30%] .When the lines are close together the gradient effect grows more effectively -image::img/developer-guide/theme-entry-9-piece-wizard-stage2-better-border.png[When the lines are close together the gradient effect grows more effectively,scaledwidth=30%] +image::img/theme-entry-9-piece-wizard-stage2-better-border.png[When the lines are close together the gradient effect grows more effectively,scaledwidth=30%] - The elements on the right hand side include the #Generate Multi Image# options. Here you can indicate the density of the source image you are using (e.g. if its for iPhone 5 class device pick Very High). You can then select in the checkboxes below the densities that should be generated automatically for you. This allows fine detail on the border to be maintained in the various high/low resolution devices. TIP: We go into a lot of details about multi images in the advanced theming section. .Stage 3: Styles to which the border is applied -image::img/developer-guide/theme-entry-9-piece-wizard-stage3.png[Stage 3: Styles to which the border is applied] +image::img/theme-entry-9-piece-wizard-stage3.png[Stage 3: Styles to which the border is applied] The last page indicates the styles to which the wizard will apply the border. Under normal usage you don't really need to touch this as its properly filled out. @@ -298,13 +298,13 @@ This is coded into the common preferred size methods in Codename One and compone Normally we can just use the 9-piece border wizard but we can also customize the border by pressing the "..." button on the border section in the theme. .Press this to customize borders -image::img/developer-guide/theme-entry-border-three-dot-button.png[Press this to customize borders] +image::img/theme-entry-border-three-dot-button.png[Press this to customize borders] The UI for the 9-piece border we created above looks like <>. [[theme-entry-border-edit-9-piece]] .9-piece border in edit mode -image::img/developer-guide/theme-entry-border-edit-9-piece.png[9-piece border in edit mode] +image::img/theme-entry-border-edit-9-piece.png[9-piece border in edit mode] You can pick the image represented by every section in the border from the combo boxes. They are organized in the same way the border is with the 9-pieces placed in the same position they would occupy when the border is rendered. @@ -324,7 +324,7 @@ NOTE: Don't confuse the 3-image mode for the 9-piece border with the horizontal/ The 9-piece border is the workhorse of borders in Codename One, however there are some edge cases of UI elements that should grow on one axis and not on another. A perfect example of this is the iOS 6 style back button. If we tried to cut it into a 9-piece border the arrow effect would be broken. .Horizontal image border is commonly used for UI's that can't grow vertically e.g. the iOS 6 style back button -image::img/developer-guide/theme-entry-border-edit-horizontal-image.png[Horizontal image border is commonly used for UI's that can't grow vertically e.g. the iOS style back button] +image::img/theme-entry-border-edit-horizontal-image.png[Horizontal image border is commonly used for UI's that can't grow vertically e.g. the iOS style back button] The horizontal and vertical image borders accept 3 images of their respective AXIS and build the border by placing one image on each side and tiling the center image between them. E.g. A horizontal border will never grow vertically. @@ -353,7 +353,7 @@ To make matters worse the round border has a ridiculous number of features/confi .Round Border -image::img/developer-guide/round-border-theme.png[Round Border,scaledwidth=50%] +image::img/round-border-theme.png[Round Border,scaledwidth=50%] ==== Rounded Rectangle Border @@ -364,7 +364,7 @@ TIP: Don't confuse the Rounded Rectangle border with the deprecated `Rounded` bo It's a pretty simple border type akin to the `RoundBorder`. .Rounded Rectangle Border -image::img/developer-guide/rounded-rectangle-border.png[Rounded Rectangle Border,scaledwidth=50%] +image::img/rounded-rectangle-border.png[Rounded Rectangle Border,scaledwidth=50%] ==== Bevel/Etched Borders @@ -372,10 +372,10 @@ image::img/developer-guide/rounded-rectangle-border.png[Rounded Rectangle Border We generally recommend avoiding bevel/etched border types as they aren't as efficient and look a bit dated in todays applications. We cover them here mostly for completeness. .Bevel border -image::img/developer-guide/theme-entry-border-edit-bevel.png[Bevel border] +image::img/theme-entry-border-edit-bevel.png[Bevel border] .Etched border -image::img/developer-guide/theme-entry-border-edit-etched.png[Etched border] +image::img/theme-entry-border-edit-etched.png[Etched border] ==== Derive @@ -393,7 +393,7 @@ But title might sometimes be aligned to the left (based on theme) and we always To solve this we can define a `MyTitle` UIID and derive the `Title` UIID. Then just customize that one attribute. .Derive title -image::img/developer-guide/theme-entry-derive.png[Derive title] +image::img/theme-entry-derive.png[Derive title] .Issues With Derive **** @@ -421,7 +421,7 @@ WARNING: If you use a TTF file **MAKE SURE** not to delete the file when there * IMPORTANT: Notice that a TTF file must have the ".ttf" extension, otherwise the build server won't be able to recognize the file as a font and set it up accordingly (devices need fonts to be defined in very specific ways). Once you do that, you can use the font from code or from the theme .Font Theme Entry -image::img/developer-guide/theme-entry-fonts.png[Font Theme Entry] +image::img/theme-entry-fonts.png[Font Theme Entry] NOTE: System fonts are always defined even if you use a TTF or native font. If the native font/TTF is unavailable in a specific platform the system font will be used instead. @@ -551,10 +551,10 @@ public void showForm() { ---- .The fonts running on the ipad simulator on a Mac, notice that this will look different on a PC -image::img/developer-guide/theme-font-catalog.png[The fonts running on the ipad simulator on a Mac, notice that this will look different on a PC,scaledwidth=60%] +image::img/theme-font-catalog.png[The fonts running on the ipad simulator on a Mac, notice that this will look different on a PC,scaledwidth=60%] .The same demo running on a OnePlus One device with Android 5.1 -image::img/developer-guide/theme-font-catalog-opo.png[The same demo running on a OnePlus One device with Android 5.1,scaledwidth=60%] +image::img/theme-font-catalog-opo.png[The same demo running on a OnePlus One device with Android 5.1,scaledwidth=60%] ===== Font Effects diff --git a/docs/developer-guide/Working-With-Javascript.asciidoc b/docs/developer-guide/Working-With-Javascript.asciidoc index cef099b91d..bc949d4dfd 100644 --- a/docs/developer-guide/Working-With-Javascript.asciidoc +++ b/docs/developer-guide/Working-With-Javascript.asciidoc @@ -284,7 +284,7 @@ If your application crashes and you don't have a clue where to begin, follow the 4. Step through each exception until you reach the one you are interested in. Chrome will then show you a stack trace that includes the name of the Java source file and line numbers. + .Debugging using Chrome tools -image::img/developer-guide/chrome-debugger.png[Debugging using Chrome tools,scaledwidth=50%] +image::img/chrome-debugger.png[Debugging using Chrome tools,scaledwidth=50%] [id="third_party_libs", reftext="Including Third-Party Javascript Libraries"] @@ -550,7 +550,7 @@ if (d.getProperty("User-Agent", "Unknown").indexOf("Android") != -1) { By default, apps will display warning/confirm dialog when the user attempts to leave the page. -image::img/developer-guide/js-beforeunload-prompt.png[onbeforeunload prompt dialog,scaledwidth=20%] +image::img/js-beforeunload-prompt.png[onbeforeunload prompt dialog,scaledwidth=20%] You can explicitly enable or disable this behaviour by setting the "platformHint.javascript.beforeUnloadMessage" display property. Setting the property to `null` will disable this behaviour, so that users will not be harassed by this dialog when they navigate away from the app. Setting it to a string value, like "leaving so soon?", will re-enable this behaviour. @@ -583,12 +583,12 @@ Out of the box, your app is ready to be deployed as a progressive web app (PWA). Below is a screenshot from Chrome for Android where the browser is prompting the user to add the app to their home screen. .Add app to homescreen banner -image::img/developer-guide/javascript-pwa-add-app-banner.png[Add app to homescreen banner,scaledwidth=20%] +image::img/javascript-pwa-add-app-banner.png[Add app to homescreen banner,scaledwidth=20%] If the app is available as a native app, in the Play store, you can indicate this using the `javascript.manifest.related_applications` and `javascript.manifest.prefer_related_applications` build hints. Then, instead of prompting the user to add the web app to their home screen, they'll be prompted to install the native app from the Play store, as shown below. .Add native app banner -image::img/developer-guide/javascript-pwa-add-native-app-banner.png[Add native app banner,scaledwidth=20%] +image::img/javascript-pwa-add-native-app-banner.png[Add native app banner,scaledwidth=20%] NOTE: The PWA standard requires that you host your app on over HTTPS. For testing purposes, it will also work when accessed at a `localhost` address. You can use the https://developers.google.com/web/ilt/pwa/lighthouse-pwa-analysis-tool[Lighthoust PWA analysis tool] to ensure compliance. @@ -626,19 +626,19 @@ Chrome and Firefox both support PWAs on desktop and on Android. iOS doesn't sup On the desktop, Chrome provides an analogous feature to "add to your homescreen": "Add to shelf". If it looks like the user is using the app on a regular basis, and it isn't yet installed, it will show a banner at the top of the page asking the user if they want to add to their shelf. .Add to shelf banner -image::img/developer-guide/javascript-pwa-add-to-shelf-banner.png[Add to shelf banner,scaledwidth=20%] +image::img/javascript-pwa-add-to-shelf-banner.png[Add to shelf banner,scaledwidth=20%] Clicking the "Add button" prompts the user for the name they wish the app to appear as: .Add to shelf prompt -image::img/developer-guide/javascript-pwa-add-to-shelf-prompt.png[Add to shelf prompt,scaledwidth=20%] +image::img/javascript-pwa-add-to-shelf-prompt.png[Add to shelf prompt,scaledwidth=20%] Upon submission, Chrome will generate a real application (on Mac, it will be a ".app", on Windows, an "exe", etc..) which the user can double click to open the app directly in the Chrome. And, importantly, the app will still work when the user is offline. The app will also appear in their "Shelf" which you can always access at `chrome://apps`, or by opening the "Chrome App Launcher" app (on OS X this is located in "~/Applications/Chrome Apps/Application Launcher"). .Chrome App Launcher -image::img/developer-guide/javascript-pwa-chrome-app-launcher.png[Chrome App Launcher,scaledwidth=20%] +image::img/javascript-pwa-chrome-app-launcher.png[Chrome App Launcher,scaledwidth=20%] NOTE: The Chrome App Launcher lists apps installed both via the Chrome Web Store and via the "Add to Shelf" feature that we discuss here. The features we describe in this article are orthogonal to the Chrome Web Store and will not be affected by its closure. diff --git a/docs/developer-guide/Working-With-The-GUI-Builder.asciidoc b/docs/developer-guide/Working-With-The-GUI-Builder.asciidoc index 87fed357fb..c616c1954c 100644 --- a/docs/developer-guide/Working-With-The-GUI-Builder.asciidoc +++ b/docs/developer-guide/Working-With-The-GUI-Builder.asciidoc @@ -85,27 +85,27 @@ This is a step-by-step guide with explanations on how to achieve this. Again, yo Start by creating a new GUI form, set its scrollable Y to false, and set its layout to border layout. .Set border layout -image::img/developer-guide/gb-create-list-1.png[Set border layout,scaledwidth=40%] +image::img/gb-create-list-1.png[Set border layout,scaledwidth=40%] Next, drag a list into the center of the layout and you should now have a functioning basic list with 3 items. .Drag list onto form -image::img/developer-guide/gb-create-list-2.png[Drag list onto form,scaledwidth=40%] +image::img/gb-create-list-2.png[Drag list onto form,scaledwidth=40%] Next, we will create the Renderer, which indicates how an individual item in the list appears, start by pressing the Add New GUI Element button and select the “Blank Container” option! Fill the name as “MyRenderer” or anything like that. .Set list renderer -image::img/developer-guide/gb-create-list3.png[Set list renderer,scaledwidth=40%] +image::img/gb-create-list3.png[Set list renderer,scaledwidth=40%] Within the renderer you can drag any component you would like to appear, labels, checkboxes, etc. You can nest them in containers and layouts as you desire. Give them names that are representative of what you are trying to accomplish, e.g. firstName, selected, etc. .Add to renderer -image::img/developer-guide/gb-create-list-4.png[Add to renderer,scaledwidth=30%] +image::img/gb-create-list-4.png[Add to renderer,scaledwidth=30%] You can now go back to the list, select it and click the Renderer property in order to select the render container you created previously, resulting in something like this. .Preview list -image::img/developer-guide/gb-create-list5.png[Preview list,scaledwidth=20%] +image::img/gb-create-list5.png[Preview list,scaledwidth=20%] You’ll notice that the data doesn’t match the original content of the list, that is because the list contains strings instead of Hashtables. To fix this we must edit the list data. @@ -116,11 +116,11 @@ If you wish to populate your list from code, just click the events tab and press To populate the list via the GUI builder, click the properties of the list, and within them, click the ListItems entry. The entries within can be Strings or Hashtables, however in order to be customizable in the rendering stage, we will need them all to be Hashtables. Remove all the current entries and add a new entry: .Add to list -image::img/developer-guide/gb-create-list-6.png[Add to list,scaledwidth=40%] +image::img/gb-create-list-6.png[Add to list,scaledwidth=40%] After adding two entries as such: .Add items to list -image::img/developer-guide/gb-create-list-7.png[Add items to list,scaledwidth=40%] +image::img/gb-create-list-7.png[Add items to list,scaledwidth=40%] We now have a customized list that’s adapted to its renderer. diff --git a/docs/developer-guide/Working-With-iOS.asciidoc b/docs/developer-guide/Working-With-iOS.asciidoc index a2e2c7f273..6f6959558f 100644 --- a/docs/developer-guide/Working-With-iOS.asciidoc +++ b/docs/developer-guide/Working-With-iOS.asciidoc @@ -108,7 +108,7 @@ Display.getInstance().scheduleLocalNotification( The resulting notification will look like .Resulting notification in iOS -image::img/developer-guide/f7200840-677e-11e5-8fd7-41eb027f8a6c.png[Resulting notification in iOS,scaledwidth=20%] +image::img/f7200840-677e-11e5-8fd7-41eb027f8a6c.png[Resulting notification in iOS,scaledwidth=20%] ==== Receiving Notifications diff --git a/docs/developer-guide/Working-with-Mac-OS-X.asciidoc b/docs/developer-guide/Working-with-Mac-OS-X.asciidoc index c300f70d82..02ed30e8ed 100644 --- a/docs/developer-guide/Working-with-Mac-OS-X.asciidoc +++ b/docs/developer-guide/Working-with-Mac-OS-X.asciidoc @@ -5,12 +5,12 @@ You can configure Desktop Mac OS build settings, by opening Codename One Settings, and clicking the "Mac Desktop Settings" button: .Mac Desktop settings -image::img/developer-guide/mac-desktop-settings-button.png[Mac Desktop settings,scaledwidth=30%] +image::img/mac-desktop-settings-button.png[Mac Desktop settings,scaledwidth=30%] This will bring you to the following form: .Mac Desktop settings form -image::img/developer-guide/mac-desktop-settings-form.png[Mac Desktop settings form,scaledwidth=30%] +image::img/mac-desktop-settings-form.png[Mac Desktop settings form,scaledwidth=30%] Here you can provide your certificate(s) as a .p12 file, and select a bundle type. @@ -45,7 +45,7 @@ NOTE: Apple provides documentation on obtaining certificates https://developer.a If you have an Apple developer account, you can manage your certificates https://developer.apple.com/account/mac/certificate[here]. .Mac Developer portal certificates -image::img/developer-guide/mac-developer-certificates.png[Mac Developer portal certificates,scaledwidth=30%] +image::img/mac-developer-certificates.png[Mac Developer portal certificates,scaledwidth=30%] The screenshot above shows an account that already has the three kinds of certificates we will require: @@ -56,7 +56,7 @@ The screenshot above shows an account that already has the three kinds of certif If your account doesn't yet have a certificate of the required type, you should begin by pressing the "+" button in the upper right. This will bring you to a page asking "What type of Certificate do you need?". There are only two options on this page that we'll be interested in: .Creating a new certificate -image::img/developer-guide/mac-developer-guide-what-type-of-certificate.png[Creating a new certificate,scaledwidth=30%] +image::img/mac-developer-guide-what-type-of-certificate.png[Creating a new certificate,scaledwidth=30%] . **Production > Mac App Store** - For both the Mac App Distribution and Mac App Installer certificates. . **Production > Developer ID** - For the Developer ID Application certificate. @@ -83,7 +83,7 @@ The "Mac Appstore Upload (PKG)" target will require both a "Mac App Distribution The easiest way to produce a P12 that includes all 3 kinds of certificates is to export them from the Keychain Access app (Requires a Mac). Select all 3 certificates at once (using CMD-click), then right click and select "Export 3 Items..." -image::img/developer-guide/mac-desktop-export-certificates-as-p12.png[Exporting certificates as P12,scaledwidth=10%] +image::img/mac-desktop-export-certificates-as-p12.png[Exporting certificates as P12,scaledwidth=10%] You will then be prompted to select a location to save the .p12 file, as well as selecting a password for the file. @@ -93,7 +93,7 @@ You will then be prompted to select a location to save the .p12 file, as well as When distributing apps in the Mac Appstore, or when using the "Sandboxed DMG" bundle type, your app is run inside a sandboxed environment, meaning that it doesn't have access to the outside world. It is provided its own "sandboxed" container for file system access, and it doesn't get any network access. If your app requires access to the "outside world", you need to request entitlements for that access. If you select a bundle type that uses the sandbox, you you will be shown a list of all of the available entitlements from which you can "check" the ones that you wish to include. .App sandbox entitlements -image::img/developer-guide/mac-desktop-entitlements.png[App sandbox entitlements,scaledwidth=30%] +image::img/mac-desktop-entitlements.png[App sandbox entitlements,scaledwidth=30%] For more information about the app sandbox, and a full list of entitlements, see https://developer.apple.com/library/content/documentation/Miscellaneous/Reference/EntitlementKeyReference/Chapters/EnablingAppSandbox.html[Apple's documentation on the subject]. diff --git a/docs/developer-guide/Working-with-UWP.asciidoc b/docs/developer-guide/Working-with-UWP.asciidoc index 34d3ce6b46..218dbba94c 100644 --- a/docs/developer-guide/Working-with-UWP.asciidoc +++ b/docs/developer-guide/Working-with-UWP.asciidoc @@ -17,15 +17,15 @@ Before you can side-load apps onto your phone, you'll need to set up your phone . In "Settings", select "Update & Security" > "For developers" + -image::img/developer-guide/uwp-mobile-settings-update-security.png[Updates & Security in UWP Mobile settings,scaledwidth=20%] -image::img/developer-guide/uwp-mobile-settings-developer-mode.png[Developer mode in UWP Mobile settings,scaledwidth=20%] +image::img/uwp-mobile-settings-update-security.png[Updates & Security in UWP Mobile settings,scaledwidth=20%] +image::img/uwp-mobile-settings-developer-mode.png[Developer mode in UWP Mobile settings,scaledwidth=20%] . Select "Developer mode" . Under "Device Discovery", make sure that the "Make your device visible to USB connections and your local network" is set to "On". + -image::img/developer-guide/uwp-mobile-settings-devicediscovery-on.png[Device discover on in UWP Mobile settings,scaledwidth=20%] +image::img/uwp-mobile-settings-devicediscovery-on.png[Device discover on in UWP Mobile settings,scaledwidth=20%] . Make sure that "Device Portal" is set to "On" + -image::img/developer-guide/uwp-mobile-settings-deviceportal-on.png[Device Portal in UWP Mobile settings,scaledwidth=20%] +image::img/uwp-mobile-settings-deviceportal-on.png[Device Portal in UWP Mobile settings,scaledwidth=20%] . When you switch "Device Portal" to "On" it should show you an address that you can access the Phone at via wifi. (E.g. https://10.0.1.11). **Remember this address**, you're going to use it to install all of your apps onto the device. + NOTE: This will be a local address within your local network. It **won't** be available to the outside world. @@ -38,13 +38,13 @@ Now that your device is set up for development, you can proceed to build your ap . Select the "Mobile Debug Build" option in the UWP Codename One Settings. + -image::img/developer-guide/uwp-cn1settings-uwp.png[Windows panel of Codename One Settings,scaledwidth=40%] +image::img/uwp-cn1settings-uwp.png[Windows panel of Codename One Settings,scaledwidth=40%] . Select the "Send Windows UWP Build" option in the Codename One menu of your IDE. This will initiate the build on the Codename One build server. + -image::img/developer-guide/uwp-send-build.png[Send UWP Build,scaledwidth=20%] +image::img/uwp-send-build.png[Send UWP Build,scaledwidth=20%] . Log into the Codename One dashboard to watch the build progress. When it is complete, you'll be able to download the ".appxbundle" file to your desktop. + -image::img/developer-guide/uwp-dashboard-download-appxbundle.png[Download appxbundle file from dashboard,scaledwidth=20%] +image::img/uwp-dashboard-download-appxbundle.png[Download appxbundle file from dashboard,scaledwidth=20%] + WARNING: You cannot simply download the .appxbundle file directly to your Windows Phone 10 mobile device and install it. It will indeed allow you to download it, and will give you an option to install it, but the install will silently fail. @@ -53,14 +53,14 @@ WARNING: You cannot simply download the .appxbundle file directly to your Window . Point your computer's web browser to the address for your mobile device. (This is the address listed when you turned on the "Device Portal" in the "Enabling Developer Mode on Device" section above. This will open the App Manager page. . Click on the "Apps" item in the left menu. + -image::img/developer-guide/uwp-app-manager-apps.png[UWP Apps Manager,scaledwidth=40%] +image::img/uwp-app-manager-apps.png[UWP Apps Manager,scaledwidth=40%] . If this is the first time installing a UWP (debug) app on your device, you will need to install the dependencies. You can find the dependencies for mobile/ARM apps https://github.com/codenameone/cn1-binaries/tree/master/uwp/Dependencies/ARM[here]. You'll need to install both `Microsoft.NET.CoreRuntime.1.0.appx` and `Microsoft.VCLibs.ARM.Debug.14.00.appx`. **If this is not the first time installing a UWP app, you can skip to the next step**. .. Under the "Install App" section, click the "Choose File" button and navigate through the file chooser to select the "Microsoft.NET.CoreRuntime.1.0.appx" file. Then click "Go". .. Do the same for the "Microsoft.VCLibs.ARM.Debug.14.00.appx" file. . Under the "Install App" section, click the "Choose File" button and navigate through the file chooser to select the .appxbundle file for your app. . Once you have the appxbundle selected, you should press "Go" under the "Deploy" subheading. This will install the app and, if all went well, your app will appear in the "Recently Added" section in the apps list of the phone. + -image::img/developer-guide/uwp-mobile-recently-added.png[UWP Recently added menu,scaledwidth=20%] +image::img/uwp-mobile-recently-added.png[UWP Recently added menu,scaledwidth=20%] ==== Side-loading to Windows 10 Desktop Devices @@ -70,7 +70,7 @@ The easiest way to be able to run your development apps on a Windows 10 PC is to To enable developer mode, open "Settings", then select "Updates an Security". Under the "For Developers" menu item, select "Developer Mode" as shown below: -image::img/developer-guide/uwp-pc-settings-developer-mode.png[UWP Windows 10 Developer Mode,scaledwidth=50%] +image::img/uwp-pc-settings-developer-mode.png[UWP Windows 10 Developer Mode,scaledwidth=50%] ===== Building the App @@ -80,44 +80,44 @@ Steps: . Open Codename One Settings (steps vary by IDE). On Netbeans you will find "Codename One Settings" by right clicking your project's node in the project explorer, and look in the "Codename One" submenu: + -image::img/developer-guide/uwp-netbeans-codenameone-settings-menu.png[Codename One Settings menu in Netbeans,scaledwidth=20%] +image::img/uwp-netbeans-codenameone-settings-menu.png[Codename One Settings menu in Netbeans,scaledwidth=20%] . Click on "Windows Settings": + -image::img/developer-guide/uwp-cn1settings-windows-settings-menu-item.png[Windows Settings menu item,scaledwidth=20%] +image::img/uwp-cn1settings-windows-settings-menu-item.png[Windows Settings menu item,scaledwidth=20%] . Under "Build Type", make sure that "Desktop Debug Build" is selected, as shown below: + -image::img/developer-guide/uwp-cn1settings-debug-desktop-selected.png[Desktop Debug Build Selected,scaledwidth=50%] +image::img/uwp-cn1settings-debug-desktop-selected.png[Desktop Debug Build Selected,scaledwidth=50%] . Save the changes by clicking the "Disk" icon in the upper right: + -image::img/developer-guide/uwp-cn1settings-disk-icon.png[Save icon,scaledwidth=2%] +image::img/uwp-cn1settings-disk-icon.png[Save icon,scaledwidth=2%] Now you can proceed to send the build to the build server. . Select the "Send Windows UWP Build" option in the Codename One menu of your IDE. This will initiate the build on the Codename One build server. + -image::img/developer-guide/uwp-send-build.png[Send UWP Build,scaledwidth=20%] +image::img/uwp-send-build.png[Send UWP Build,scaledwidth=20%] . Log into the Codename One dashboard to watch the build progress. When it is complete, you'll be able to download the ".zip" file to the Windows 10 PC on which you wish to install the app. + -image::img/developer-guide/uwp-dashboard-download-appxbundle.png[Download appxbundle file from dashboard,scaledwidth=20%] +image::img/uwp-dashboard-download-appxbundle.png[Download appxbundle file from dashboard,scaledwidth=20%] ===== Installing the App Start by extracting the .zip file. (Navigate to the folder where the zip was downloaded, right click it, and select "Extract all" as shown below: .Extract UWP zip file -image::img/developer-guide/uwp-extract-zip-file.png[Extract UWP zip file,scaledwidth=40%] +image::img/uwp-extract-zip-file.png[Extract UWP zip file,scaledwidth=40%] After extraction, open the resulting directory. You should see contents similar to the following: .UWP Zip file contents -image::img/developer-guide/uwp-zip-file-contents.png[UWP Zip file contents,scaledwidth=40%] +image::img/uwp-zip-file-contents.png[UWP Zip file contents,scaledwidth=40%] **Downloading Dependencies** If this is your first time installing a UWP app on this PC, you may need to add the dependencies before you can install. You can download the dependencies https://github.com/codenameone/cn1-binaries/raw/master/uwp/Dependencies.zip[here]. Extract "Dependencies.zip" and copy the resulting "Dependencies" directory into the app install directory. Your app install directory should now look like: .UWP Zip file contents with dependencies -image::img/developer-guide/uwp-zip-contents-with-dependencies.png[UWP Zip file contents with dependencies,scaledwidth=30%] +image::img/uwp-zip-contents-with-dependencies.png[UWP Zip file contents with dependencies,scaledwidth=30%] **Running the Powershell Script** @@ -126,24 +126,24 @@ We are *finally* at the point where we can run the installer. Right-click on the "Add-AppDevPackage" icon, and select "Run in Powershell", as shown: .UWP Install by run in powershell -image::img/developer-guide/uwp-run-in-powershell.png[UWP Install by run in powershell,scaledwidth=30%] +image::img/uwp-run-in-powershell.png[UWP Install by run in powershell,scaledwidth=30%] You may be prompted that you need to change the execution policy, in Powershell: .UWP Powershell change execution policy -image::img/developer-guide/uwp-powershell-change-execution-policy.png[UWP Powershell change execution policy,scaledwidth=40%] +image::img/uwp-powershell-change-execution-policy.png[UWP Powershell change execution policy,scaledwidth=40%] Enter "Y" at the prompt to allow this. If all goes well, you should see a message saying that the app as successfully installed. .UWP Powershell app successfully installed -image::img/developer-guide/uwp-powershell-success.png[UWP Powershell app successfully installed,scaledwidth=40%] +image::img/uwp-powershell-success.png[UWP Powershell app successfully installed,scaledwidth=40%] And if you look in your "Windows Menu" under "All Apps", you should see your app listed there: .Windows 10 App listed in All Apps -image::img/developer-guide/uwp-windows-10-start-menu-app-installed.png[Windows 10 App listed in All Apps,scaledwidth=15%] +image::img/uwp-windows-10-start-menu-app-installed.png[Windows 10 App listed in All Apps,scaledwidth=15%] [[building-for-the-windows-store]] ==== Building for the Windows Store @@ -157,17 +157,17 @@ If you want to be able to distribute your app to the public, the Windows Store i Let's go through these steps in more detail. Start https://developer.microsoft.com/en-us/windows/publish[here]. .Publish windows apps webpage -image::img/developer-guide/uwp-windows-store-publish.png[Publish windows apps webpage,scaledwidth=40%] +image::img/uwp-windows-store-publish.png[Publish windows apps webpage,scaledwidth=40%] If you don't already have an account, sign up for one. Then log in. Once logged in, you can click the "Dashboard" link on the toolbar. .Windows Store dashboard -image::img/developer-guide/uwp-windows-store-dashboard.png[Windows Store dashboard,scaledwidth=40%] +image::img/uwp-windows-store-dashboard.png[Windows Store dashboard,scaledwidth=40%] Under the "Your apps" section (on the left in the above screenshot), click the "Create new app" button. .Reserve name form -image::img/developer-guide/uwp-windows-store-reserve-name.png[Reserve name form,scaledwidth=40%] +image::img/uwp-windows-store-reserve-name.png[Reserve name form,scaledwidth=40%] Enter a name for your app, and click "Reserve app name". @@ -179,12 +179,12 @@ If the name was available, it should take you to the app overview page for your You can get this information by scrolling down to the bottom of the "App overview" page and clicking the "View app identity details" under the "App Management" > "App identity" section: .App Identity section -image::img/developer-guide/uwp-windows-store-app-identity.png[App Identity section,scaledwidth=40%] +image::img/uwp-windows-store-app-identity.png[App Identity section,scaledwidth=40%] You'll see a page with the information we need shown below: .App identity details -image::img/developer-guide/uwp-windows-store-wpp-identity-info.png[App identity details,scaledwidth=40%] +image::img/uwp-windows-store-wpp-identity-info.png[App identity details,scaledwidth=40%] The next step is to copy this information into your Codename One project. @@ -199,7 +199,7 @@ Next, click on the "Generate" button next to the Certificate field. This will open a dialog titled "Certificate Generator". Paste the value from the "Package/Identity/Publisher" listed in the Windows Store into the Publisher ID field as shown below: .Certificate Generator -image::img/developer-guide/uwp-certificate-generator.png[Certificate Generator,scaledwidth=20%] +image::img/uwp-certificate-generator.png[Certificate Generator,scaledwidth=20%] Then click OK. This will generate a .pfx file inside your project folder. @@ -208,7 +208,7 @@ The "Display Name" must also match that app name in the store. Finally, make sure that "Windows Store Upload" is selected in the "Build Type" field. For the example above, my settings form looks like the following screenshot when I am done. .Settings for Windows Store uploads -image::img/developer-guide/uwp-store-upload-settings.png[Settings for Windows Store uploads,scaledwidth=40%] +image::img/uwp-store-upload-settings.png[Settings for Windows Store uploads,scaledwidth=40%] When you are done, hit the "Save" icon in the upper right corner of the window to save your changes. diff --git a/docs/developer-guide/basics.asciidoc b/docs/developer-guide/basics.asciidoc index f3429dca67..96e9d53647 100644 --- a/docs/developer-guide/basics.asciidoc +++ b/docs/developer-guide/basics.asciidoc @@ -8,20 +8,20 @@ Let's start with a brief overview of the ideas within Codename One. We'll dig de Every button, label or element you see on the screen in a Codename One application is a https://www.codenameone.com/javadoc/com/codename1/ui/Component.html[Component]. This is a highly simplified version of this class hierarchy: .The Core Component Class Hierarchy -image::img/developer-guide/codenameone-class-diagram.png[The Core Component Class Hierarchy] +image::img/codenameone-class-diagram.png[The Core Component Class Hierarchy] The https://www.codenameone.com/javadoc/com/codename1/ui/Form.html[Form] is a special case `Component`. It's the root component that you can show to the user. `Container` is a `Component` type that can hold other components within it. This lets us create elaborate hierarchies by nesting `Container` instances. [[component-uml]] .Component UML -image::img/developer-guide/component-uml.png[Component UML,scaledwidth=50%] +image::img/component-uml.png[Component UML,scaledwidth=50%] A Codename One application is effectively a series of forms, only one Form can be shown at a time. The Form includes everything we see on the screen. Under the hood the `Form` is comprised of a few separate pieces: [id=StructureOfForm, reftext={chapter}.{counter:figure}] .Structure of a Form -image::img/developer-guide/codenameone-form.png[Structure of a Form,scaledwidth=50%] +image::img/codenameone-form.png[Structure of a Form,scaledwidth=50%] * Content Pane - this is literally the body of the `Form`. When we `add` a `Component` into the `Form` it goes into the content pane. Notice that Content Pane is scrollable by default on the Y axis! @@ -74,10 +74,10 @@ A layout manager places a component based on its own logic and the preferred siz TIP: `FlowLayout` is great for simple things but has issues when components change their sizes dynamically (like a text field). In those cases it can make bad decisions about line breaks and take up too much space .Layout Manager Primer Part I -image::img/developer-guide/codenameone-layout-managers-1.png[Layout Manager Primer Part I] +image::img/codenameone-layout-managers-1.png[Layout Manager Primer Part I] .Layout Manager Primer Part II -image::img/developer-guide/codenameone-layout-managers-2.png[Layout Manager Primer Part II] +image::img/codenameone-layout-managers-2.png[Layout Manager Primer Part II] Scrolling doesn't work well for all types of layouts as the positioning algorithm within the layout might break. Scrolling on the Y axis works great for `BoxLayout` Y which is why I picked it for the `TodoForm`: @@ -223,7 +223,7 @@ To sum this up, we can use layout managers and nesting to create elaborate UI's [[flow-layout]] .Flow Layout -image::img/developer-guide/flow-layout.png[Flow Layout,scaledwidth=20%] +image::img/flow-layout.png[Flow Layout,scaledwidth=20%] link:https://www.codenameone.com/javadoc/com/codename1/ui/layouts/FlowLayout.html[Flow layout] lets the components “flow” horizontally and break a line when reaching the edge of the container. It's the default layout manager for containers. Because it's so flexible it's also problematic as it can result in incorrect preferred size values for the parent https://www.codenameone.com/javadoc/com/codename1/ui/Container.html[Container]. This can create a reflow issue, as a result we recommend using flow layout only for trivial cases. Avoid it for things such as text input etc. As the size of the text input can vary in runtime. @@ -254,15 +254,15 @@ Flow layout can be aligned to the left (the default), to the <> [[box-layout-y]] .BoxLayout Y -image::img/developer-guide/box-layout-y.png[BoxLayout Y,scaledwidth=20%] +image::img/box-layout-y.png[BoxLayout Y,scaledwidth=20%] Box layout also supports a shorter terse notation which we use here to <>. @@ -303,7 +303,7 @@ Container box = BoxLayout.encloseX(new Label("First"), [[box-layout-x]] .BoxLayout X -image::img/developer-guide/box-layout-x.png[BoxLayout X,scaledwidth=20%] +image::img/box-layout-x.png[BoxLayout X,scaledwidth=20%] The box layout keeps the preferred size of its destination orientation and scales elements on the other axis. Specifically `X_AXIS` will keep the preferred width of the component while growing all the components vertically to match in size. Its `Y_AXIS` counterpart keeps the preferred height while growing the components horizontally. @@ -313,7 +313,7 @@ This behavior is very useful since it allows elements to align as they would all In some cases the growing behavior in the X axis is undesired, for these cases we can use the `X_AXIS_NO_GROW` variant. .BoxLayout X_AXIS_NO_GROW -image::img/developer-guide/box-layout-x-no-grow.png[BoxLayout X_AXIS_NO_GROW,scaledwidth=20%] +image::img/box-layout-x-no-grow.png[BoxLayout X_AXIS_NO_GROW,scaledwidth=20%] .`FlowLayout` vs. `BoxLayout.X_AXIS` TIP: When applicable we recommend `BoxLayout` over `FlowLayout` as it acts more consistently in all situations. Another advantage of `BoxLayout` is the fact that it grows and thus aligns nicely @@ -321,7 +321,7 @@ TIP: When applicable we recommend `BoxLayout` over `FlowLayout` as it acts more ===== Border Layout .Border Layout -image::img/developer-guide/border-layout.png[Border Layout,scaledwidth=20%] +image::img/border-layout.png[Border Layout,scaledwidth=20%] link:https://www.codenameone.com/javadoc/com/codename1/ui/layouts/BorderLayout.html[Border layout] is quite unique. `BorderLayout` is a constraint-based layout that can place up to five components in one of the five positions: `NORTH`, `SOUTH`, `EAST`, `WEST` or `CENTER`. @@ -359,7 +359,7 @@ hi.show(); Results in: .Border Layout with CENTER_BEHAVIOR_CENTER -image::img/developer-guide/border-layout-center.png[Border Layout with CENTER_BEHAVIOR_CENTER,scaledwidth=20%] +image::img/border-layout-center.png[Border Layout with CENTER_BEHAVIOR_CENTER,scaledwidth=20%] .Scrolling is Disabled in Border Layout NOTE: Because of its scaling behavior scrolling a border @@ -368,7 +368,7 @@ layout makes no sense. `Container` implicitly blocks scrolling on a border layou In the case of RTL the EAST and WEST values are implicitly reversed as shown in this image: .Border Layout in RTL mode -image::img/developer-guide/border-layout-RTL.png[Border Layout in RTL mode,scaledwidth=20%] +image::img/border-layout-RTL.png[Border Layout in RTL mode,scaledwidth=20%] .RTL and Bidi **** @@ -402,12 +402,12 @@ hi.add(new Label("First")). ---- .Grid Layout 2x2 -image::img/developer-guide/grid-layout-2x2.png[Grid Layout 2x2,scaledwidth=20%] +image::img/grid-layout-2x2.png[Grid Layout 2x2,scaledwidth=20%] When we use a 2x4 size ratio we would see elements getting cropped as we do here. The grid layout uses the grid size first and doesn't pay too much attention to the preferred size of the components it holds. .Grid Layout 2x4 -image::img/developer-guide/grid-layout-2x4.png[Grid Layout 2x4,scaledwidth=20%] +image::img/grid-layout-2x4.png[Grid Layout 2x4,scaledwidth=20%] Grid also has an autoFit attribute that can be used to automatically calculate the column count based on available space and preferred width. This is really useful for working with UI's where the device orientation @@ -427,10 +427,10 @@ GridLayout.encloseIn(new Label("First"), ---- .Grid Layout autofit portrait -image::img/developer-guide/grid-layout-autofit-portrait.png[Grid Layout autofit portrait,scaledwidth=20%] +image::img/grid-layout-autofit-portrait.png[Grid Layout autofit portrait,scaledwidth=20%] .Grid Layout autofit landscape -image::img/developer-guide/grid-layout-autofit-landscape.png[Grid Layout autofit landscape,scaledwidth=20%] +image::img/grid-layout-autofit-landscape.png[Grid Layout autofit landscape,scaledwidth=20%] [[table-layout-section]] ==== Table Layout @@ -457,7 +457,7 @@ hi.show(); ---- .2x2 TableLayout with 5 elements, notice that the last element is missing -image::img/developer-guide/table-layout-2x2.png[2x2 TableLayout with 5 elements, notice that the last element is missing,scaledwidth=20%] +image::img/table-layout-2x2.png[2x2 TableLayout with 5 elements, notice that the last element is missing,scaledwidth=20%] `TableLayout` supports the ability to grow the last column which can be enabled using the `setGrowHorizontally` method. You can also use a shortened terse syntax to construct a `TableLayout` however since the `TableLayout` is a constraint based layout you won't be able to utilize its full power with this syntax. @@ -473,7 +473,7 @@ Container tl = TableLayout.encloseIn(2, new Label("First"), ---- .`TableLayout.encloseIn()` with default behavior of growing the last column -image::img/developer-guide/table-layout-enclose.png[TableLayout.encloseIn() with default behavior of growing the last column,scaledwidth=20%] +image::img/table-layout-enclose.png[TableLayout.encloseIn() with default behavior of growing the last column,scaledwidth=20%] ===== The Full Potential @@ -550,7 +550,7 @@ hi.add(cn, new Label("AAA")). [[table-layout-constraints]] .TableLayout constraints can be used to create very elaborate UI's -image::img/developer-guide/table-layout-constraints.png[TableLayout constraints can be used to create very elaborate UI's,scaledwidth=20%] +image::img/table-layout-constraints.png[TableLayout constraints can be used to create very elaborate UI's,scaledwidth=20%] ===== TextMode Layout @@ -576,10 +576,10 @@ f.show(); ---- .TextModeLayout on iOS -image::img/developer-guide/pixel-perfect-text-field-reasonable-on-ios.png[TextModeLayout on iOS,scaledwidth=30%] +image::img/pixel-perfect-text-field-reasonable-on-ios.png[TextModeLayout on iOS,scaledwidth=30%] .TextModeLayout on Android with the same code -image::img/developer-guide/pixel-perfect-text-field-android-codenameone-font.png[TextModeLayout on Android with the same code,scaledwidth=30%] +image::img/pixel-perfect-text-field-android-codenameone-font.png[TextModeLayout on Android with the same code,scaledwidth=30%] As you can see from the code and samples above there is a lot going on under the hood. On Android we want a layout that's similar to `TableLayout` so we can "`pack`" the entries. On iOS we want a box layout Y type of layout but we also want the labels/text to align properly... @@ -598,7 +598,7 @@ When working in the non-android environment we use a `BoxLayout` on the Y axis a When used without constraints, the https://www.codenameone.com/javadoc/com/codename1/ui/layouts/LayeredLayout.html[LayeredLayout] places the components in order one on top of the other and sizes them all to the size of the largest component. This is useful when trying to create an overlay on top of an existing component. E.g. an “x” button to allow removing the component. .The X on this button was placed there using the layered layout code below -image::img/developer-guide/layered-layout.png[The X on this button was placed there using the layered layout code below,scaledwidth=20%] +image::img/layered-layout.png[The X on this button was placed there using the layered layout code below,scaledwidth=20%] The code to generate this UI is slightly complex and contains very few relevant pieces. The only truly relevant piece is this block: @@ -662,7 +662,7 @@ ll.setInsets(btn, "auto 0 0 auto"); The result is: -image::img/developer-guide/guibuilder-2-insets-1.png[Button positioned in bottom right using insets,scaledwidth=20%] +image::img/guibuilder-2-insets-1.png[Button positioned in bottom right using insets,scaledwidth=20%] The only thing new here is this line: @@ -694,7 +694,7 @@ ll.setInsets(btn, "auto auto auto 5mm"); Resulting in: .Button vertically centered 5mm from left edge -image::img/developer-guide/guibuilder-2-insets-2.png[Button vertically centered 5mm from left edge,scaledwidth=20%] +image::img/guibuilder-2-insets-2.png[Button vertically centered 5mm from left edge,scaledwidth=20%] Move it to the right edge with: @@ -744,7 +744,7 @@ ll.setInsets(tf, "auto") This would result in: .Button's left inset linked to text field -image::img/developer-guide/guibuilder-2-insets-3.png[Button's left inset linked to text field,scaledwidth=50%] +image::img/guibuilder-2-insets-3.png[Button's left inset linked to text field,scaledwidth=50%] The two active lines here are the last two: @@ -787,7 +787,7 @@ The glass pane is the top most layer, unlike the layered pane it's purely a grap **** .The Layered Pane -image::img/developer-guide/layers.png["The Layered Pane",scaledwidth=80%] +image::img/layers.png["The Layered Pane",scaledwidth=80%] ==== GridBag Layout @@ -850,7 +850,7 @@ hi.addComponent(c, button); Notice that because of the way gridbag works we didn't provide any terse syntax API for it although it should be possible. .GridbagLayout sample from the Java tutorial running on Codename One -image::img/developer-guide/gridbag-layout.png[GridbagLayout sample from the Java tutorial running on Codename One,scaledwidth=20%] +image::img/gridbag-layout.png[GridbagLayout sample from the Java tutorial running on Codename One,scaledwidth=20%] ==== Group Layout @@ -931,7 +931,7 @@ layout.setVerticalGroup( ---- .GroupLayout Matisse generated UI running in Codename One -image::img/developer-guide/group-layout.png[GroupLayout Matisse generated UI running in Codename One,scaledwidth=20%] +image::img/group-layout.png[GroupLayout Matisse generated UI running in Codename One,scaledwidth=20%] If you are porting newer Matisse code there are simple changes you can do: @@ -963,7 +963,7 @@ hi.show(); ---- .MiG layout sample ported to Codename One -image::img/developer-guide/mig-layout.png[MiG layout sample ported to Codename One,scaledwidth=20%] +image::img/mig-layout.png[MiG layout sample ported to Codename One,scaledwidth=20%] It should be reasonably easy to port MiG code but you should notice the following: @@ -1074,45 +1074,45 @@ application. In NetBeans you need to follow these 4 steps: .Right click the package select #New# -> #Other# -image::img/developer-guide/netbeans-gui-builder-step-1.png[Right click the package select New -> Other,scaledwidth=50%] +image::img/netbeans-gui-builder-step-1.png[Right click the package select New -> Other,scaledwidth=50%] .In the Codename One section select the GUI builder form -image::img/developer-guide/netbeans-gui-builder-step-2.png[In the Codename One section select the GUI builder form,scaledwidth=50%] +image::img/netbeans-gui-builder-step-2.png[In the Codename One section select the GUI builder form,scaledwidth=50%] .Type in the name of the form and click finish, you can change the type to be a Container or Dialog -image::img/developer-guide/netbeans-gui-builder-step-3.png[Type in the name of the form and click finish, you can change the type to be a Container or Dialog,scaledwidth=50%] +image::img/netbeans-gui-builder-step-3.png[Type in the name of the form and click finish, you can change the type to be a Container or Dialog,scaledwidth=50%] .Launch the GUI builder thru the right click menu on the newly created file -image::img/developer-guide/netbeans-gui-builder-step-4.png[Launch the GUI builder thru the right click menu on the newly created file,scaledwidth=50%] +image::img/netbeans-gui-builder-step-4.png[Launch the GUI builder thru the right click menu on the newly created file,scaledwidth=50%] ===== IntelliJ/IDEA In IntelliJ you need to follow these 3 steps: .Right click the package select #New# -> #Codename One AutoLayout Form# (or Dialog/Container) -image::img/developer-guide/intellij-gui-builder-step-1.png[Right click the package select New -> Codename One Form (or Dialog/Container),scaledwidth=50%] +image::img/intellij-gui-builder-step-1.png[Right click the package select New -> Codename One Form (or Dialog/Container),scaledwidth=50%] .Type in a name for the new form -image::img/developer-guide/intellij-gui-builder-step-2.png[Type in a name for the new form,scaledwidth=50%] +image::img/intellij-gui-builder-step-2.png[Type in a name for the new form,scaledwidth=50%] .Launch the GUI builder thru the right click menu on the newly created file -image::img/developer-guide/intellij-gui-builder-step-3.png[Launch the GUI builder thru the right click menu on the newly created file,scaledwidth=50%] +image::img/intellij-gui-builder-step-3.png[Launch the GUI builder thru the right click menu on the newly created file,scaledwidth=50%] ===== Eclipse In Eclipse you need to follow these 4 steps: .Right click the package select #New# -> #Other# -image::img/developer-guide/eclipse-gui-builder-step-1.png[Right click the package select New -> Other,scaledwidth=50%] +image::img/eclipse-gui-builder-step-1.png[Right click the package select New -> Other,scaledwidth=50%] .In the Codename One section select the GUI builder option -image::img/developer-guide/eclipse-gui-builder-step-2.png[In the Codename One section select the GUI builder option,scaledwidth=50%] +image::img/eclipse-gui-builder-step-2.png[In the Codename One section select the GUI builder option,scaledwidth=50%] .Type in the name of the form and click finish, you can change the type to be a Container or Dialog -image::img/developer-guide/eclipse-gui-builder-step-3.png[Type in the name of the form and click finish, you can change the type to be a Container or Dialog,scaledwidth=50%] +image::img/eclipse-gui-builder-step-3.png[Type in the name of the form and click finish, you can change the type to be a Container or Dialog,scaledwidth=50%] .Launch the GUI builder thru the right click menu on the newly created file -image::img/developer-guide/eclipse-gui-builder-step-4.png[Launch the GUI builder thru the right click menu on the newly created file,scaledwidth=50%] +image::img/eclipse-gui-builder-step-4.png[Launch the GUI builder thru the right click menu on the newly created file,scaledwidth=50%] ===== Basic Usage @@ -1124,10 +1124,10 @@ The GUI builder is controlled via it's main toolbar, notice that your changes wi the #Save# button on the right: .The features of the left toolbar -image::img/developer-guide/new-gui-builder-left-toolbar.png[The features of the left toolbar,scaledwidth=50%] +image::img/new-gui-builder-left-toolbar.png[The features of the left toolbar,scaledwidth=50%] .The features of the right toolbar -image::img/developer-guide/new-gui-builder-right-toolbar.png[The features of the right toolbar,scaledwidth=50%] +image::img/new-gui-builder-right-toolbar.png[The features of the right toolbar,scaledwidth=50%] The main UI includes four important parts: @@ -1141,19 +1141,19 @@ The main UI includes four important parts: .The four parts of the GUI builder -image::img/developer-guide/new-gui-builder-component-tree-palette-inspector.png[The four parts of the GUI builder,scaledwidth=50%] +image::img/new-gui-builder-component-tree-palette-inspector.png[The four parts of the GUI builder,scaledwidth=50%] We'll start by selecting the #Component Palette# and dragging a button into the UI: .You can drag any component you want from the palette to the main UI -image::img/developer-guide/new-gui-builder-drag-button.png[You can drag any component you want from the palette to the main UI,scaledwidth=50%] +image::img/new-gui-builder-drag-button.png[You can drag any component you want from the palette to the main UI,scaledwidth=50%] By default the auto-layout mode of the GUI builder uses layered layout to position components. Sides can be bound to a component or to the `Form`. We then use distance units to determine the binding behavior. The GUI builder tries to be "smart" and guesses your intention as you drag the components along. When you select the component you placed you can edit the properties of that component: .Properties allow you to customize everything about a component -image::img/developer-guide/new-gui-builder-property-sheet.png[Properties allow you to customize everything about a component,scaledwidth=50%] +image::img/new-gui-builder-property-sheet.png[Properties allow you to customize everything about a component,scaledwidth=50%] There are five property sheets per component: @@ -1171,7 +1171,7 @@ For things like setting the text on the component we can use a convenient "long edit the text in place as such: .Use the long click to edit the text "in place" -image::img/developer-guide/gui-builder-in-place-edit.png[Use the long click to edit the text "in place",scaledwidth=50%] +image::img/gui-builder-in-place-edit.png[Use the long click to edit the text "in place",scaledwidth=50%] ===== Events @@ -1181,7 +1181,7 @@ When a component supports broadcasting events you can bind such events by select the events tab and clicking the button matching the event type .The events tab is listed below supported event types can be bound above -image::img/developer-guide/gui-builder-events.png[The events tab is listed below supported event types can be bound above,scaledwidth=50%] +image::img/gui-builder-events.png[The events tab is listed below supported event types can be bound above,scaledwidth=50%] Once an event is bound the IDE will open to the event code e.g.: @@ -1206,7 +1206,7 @@ private com.codename1.ui.Button gui_Button_1 = new com.codename1.ui.Button(); Saving the project generates an XML file representing the UI into the res directory in the project, the GUI file is created in a matching hierarchy in the project under the `res/guibuilder` directory: .The java and GUI files in the hierarchy -image::img/developer-guide/gui-builder-java-and-gui-files.png[The java and GUI files in the hierarchy,scaledwidth=50%] +image::img/gui-builder-java-and-gui-files.png[The java and GUI files in the hierarchy,scaledwidth=50%] IMPORTANT: If you refactor (rename or move) the java file it's connection with the GUI file will break. You need to move/rename both @@ -1326,22 +1326,22 @@ Press the mouse inside the bounds of the button and drag it around to reposition Let's take a closer look at the inset control (the inset controls are the black buttons that appear to the top, bottom, left, and right of the selected component). .The inset control allows you to change the inset size and units, toggle it between fixed and flexible, and link it to another component. -image::img/developer-guide/guibuilder-2-inset-control.png[Inset control,scaledwidth=5%] +image::img/guibuilder-2-inset-control.png[Inset control,scaledwidth=5%] Each control has three sections: 1. **The inset value drop-down menu**. This shows the current value of the inset (e.g. 0mm, 25%, auto, etc...). If you click on this, it will open a menu that will allow you to change the units. If the inset is currently in millimetres, it will have options for pixels, and percent. If the inset is in percent, it will have options for pixels and millimetres. Etc.. It also includes a text field to enter a an inset value explicitly. + -image::img/developer-guide/guibuilder-2-insets-dropdown-menu.png[Inset drop-down menu,scaledwidth=6%] -2. **The "Link" Button** image:img/developer-guide/guibuilder-2-link-button-unselected.png[Link button,scaledwidth=6%] - If the inset is linked to a reference component, then this button will be highlighted "blue", and hovering over it will highlight the reference component in the UI so that you can clearly see which component it is linked to. Clicking on this button will open a dialog that will allow you to "break" this link. You can drag this button over any component in the form to "link". -3. **The "Lock" Button"** image:img/developer-guide/guibuilder-2-inset-fixed-button.png[Inset fixed button,scaledwidth=6%] - This button allows you to toggle the inset between "flexible" (i.e. auto) and "fixed" (i.e. millimetres or percent). +image::img/guibuilder-2-insets-dropdown-menu.png[Inset drop-down menu,scaledwidth=6%] +2. **The "Link" Button** image:img/guibuilder-2-link-button-unselected.png[Link button,scaledwidth=6%] - If the inset is linked to a reference component, then this button will be highlighted "blue", and hovering over it will highlight the reference component in the UI so that you can clearly see which component it is linked to. Clicking on this button will open a dialog that will allow you to "break" this link. You can drag this button over any component in the form to "link". +3. **The "Lock" Button"** image:img/guibuilder-2-inset-fixed-button.png[Inset fixed button,scaledwidth=6%] - This button allows you to toggle the inset between "flexible" (i.e. auto) and "fixed" (i.e. millimetres or percent). ===== Auto Snap Notice the "auto-snap" checkbox that appears in the top-right corner of the GUI builder window. .Auto-snap checkbox -image::img/developer-guide/guibuilder-2-smart-insets-auto-snap-checkboxes.png[Auto-snap checkbox,scaledwidth=10%] +image::img/guibuilder-2-smart-insets-auto-snap-checkboxes.png[Auto-snap checkbox,scaledwidth=10%] Auto-snap does exactly what it sounds like: It automatically snaps two components together when you drag them near each other. This is handy for linking components together without having to explicitly link them (using the "link" button). This feature is turned on by default. If auto-snap is turned off, you can still initiate a "snap" by holding down the ALT/Option key on your keyboard during the drag. @@ -1350,14 +1350,14 @@ Auto-snap does exactly what it sounds like: It automatically snaps two componen Beside the "auto-snap" checkbox is another checkbox named "Smart Insets". .Smart insets checkbox -image::img/developer-guide/guibuilder-2-smart-insets-auto-snap-checkboxes.png[Smart insets checkbox,scaledwidth=10%] +image::img/guibuilder-2-smart-insets-auto-snap-checkboxes.png[Smart insets checkbox,scaledwidth=10%] Smart Inset uses some heuristics during a drag to try to determine how the insets should be linked. Currently the heuristics are quite basic (it tries to link to the nearest neighbor component in most cases), but we will be working on improving this for future releases. This feature is turned off by default while it is still being refined. The goal is to improve this to the point where it *always* makes the correct link choices - at which time you will be able to use the GUI builder without having any knowledge of insets or reference components. ===== The Widget Control Pad .Widget control pad -image::img/developer-guide/guibuilder-2-widget-control-pad.png[Widget control pad,scaledwidth=10%] +image::img/guibuilder-2-widget-control-pad.png[Widget control pad,scaledwidth=10%] When a component is selected, you should see a black floating panel appear in the lower right of the screen. @@ -1380,12 +1380,12 @@ You can also change the layout of subcontainers to another classical layout mana Drag the button (that was previously on the form) over that container, and you should see a drop-zone become highlighted. .Dropping container on child container with box layout y -image::img/developer-guide/guibuilder-2-subcontainer-add-child.png[Dropping container on child container with box layout y,scaledwidth=25%] +image::img/guibuilder-2-subcontainer-add-child.png[Dropping container on child container with box layout y,scaledwidth=25%] You can drop the button directly there. You can As you drag more components into the sub-container, you'll see them automatically laid out vertically. .Box Layout Y dropping 2nd child -image::img/developer-guide/guibuilder-2-subcontainer-add-child-2.png[Box Layout Y dropping 2nd child,scaledwidth=25%] +image::img/guibuilder-2-subcontainer-add-child-2.png[Box Layout Y dropping 2nd child,scaledwidth=25%] ===== The Canvas Resize Tool diff --git a/docs/developer-guide/component-selector.asciidoc b/docs/developer-guide/component-selector.asciidoc index e35bfd898c..c9b17a379b 100755 --- a/docs/developer-guide/component-selector.asciidoc +++ b/docs/developer-guide/component-selector.asciidoc @@ -116,7 +116,7 @@ $(".even", table) .setBgTransparency(255); ---- -image::img/developer-guide/component-selector-table-striping.png[Table striping screenshot] +image::img/component-selector-table-striping.png[Table striping screenshot] In the above example we add a tag to each label when we add it to the table or either "even" or "odd". We then use the "even" in our ComponentSelector to set the background color and transparency of all labels in even rows. In this example, we actually build the table and set the striping in the same place, but consider the situation when the table is constructed by another API. This approach would allow the API to provide more extensibility by simply tagging the elements and allowing the library user to decide how to style the even and odd rows. diff --git a/docs/developer-guide/css.asciidoc b/docs/developer-guide/css.asciidoc index 50bf4cca43..55affd76ff 100644 --- a/docs/developer-guide/css.asciidoc +++ b/docs/developer-guide/css.asciidoc @@ -12,10 +12,10 @@ Codename One applications always use the resource file. The CSS support compiles To enable CSS support in Codename One you need to flip a switch in `Codename One Settings`. .The CSS Option in Codename One Settings Part I -image::img/developer-guide/css-in-codenameone-settings-1.png[The CSS Option in Codename One Settings] +image::img/css-in-codenameone-settings-1.png[The CSS Option in Codename One Settings] .The CSS Option in Codename One Settings Part II -image::img/developer-guide/css-in-codenameone-settings-2.png[The CSS Option in Codename One Settings] +image::img/css-in-codenameone-settings-2.png[The CSS Option in Codename One Settings] Once enabled your `theme.res` file will regenerate from a CSS file that resides under the `css` directory. Changes you make to the CSS file will instantly update the simulator as you save. However, there are some limits to this live update so in some cases a simulator restart would be necessary. @@ -271,13 +271,13 @@ This section isn't as comprehensive as it should be due to the breadth of CSS. |No text decoration. E.g. `text-decoration: none;` |cn1-3d -a|3D text. E.g. `text-decoraton: cn1-3d;` image:img/developer-guide/cn1-3d.png[cn1-3d screenshot] +a|3D text. E.g. `text-decoraton: cn1-3d;` image:img/cn1-3d.png[cn1-3d screenshot] |cn1-3d-lowered -a|3D lowered text. E.g. `text-decoration: cn1-3d-lowered;` image:img/developer-guide/cn1-3d-lowered.png[cn1-3d-lowered screenshot] +a|3D lowered text. E.g. `text-decoration: cn1-3d-lowered;` image:img/cn1-3d-lowered.png[cn1-3d-lowered screenshot] |cn1-3d-shadow-north -|3D text with north shadow. E.g. `text-decoration: cn1-3d-shadow-north;` image:img/developer-guide/cn1-3d-shadow-north.png[cn1-3d-shadow-north screenshot] +|3D text with north shadow. E.g. `text-decoration: cn1-3d-shadow-north;` image:img/cn1-3d-shadow-north.png[cn1-3d-shadow-north screenshot] |=== For other CSS font settings see link:Fonts[the Fonts section] @@ -399,7 +399,7 @@ MyContainer { ---- .Native linear gradient 0 degrees -image::img/developer-guide/linear-gradient-0deg.png[Native linear gradient 0 degrees] +image::img/linear-gradient-0deg.png[Native linear gradient 0 degrees] [source,css] ---- @@ -409,7 +409,7 @@ MyContainer { ---- .Native linear gradient to top -image::img/developer-guide/linear-gradient-to-top.png[Native linear gradient to top] +image::img/linear-gradient-to-top.png[Native linear gradient to top] [source,css] ---- @@ -419,7 +419,7 @@ MyContainer { ---- .Native linear gradient 90deg -image::img/developer-guide/linear-gradient-90deg.png[Native linear gradient 90deg] +image::img/linear-gradient-90deg.png[Native linear gradient 90deg] [source,css] ---- @@ -429,7 +429,7 @@ MyContainer { ---- .Native linear gradient to left -image::img/developer-guide/linear-gradient-to-left.png[Native linear gradient to left] +image::img/linear-gradient-to-left.png[Native linear gradient to left] **Unsupported `linear-gradient` syntax** @@ -443,7 +443,7 @@ MyComponent { ---- .45deg gradient rendered at compile-time -- uses background image -image::img/developer-guide/linear-gradient-45deg.png[45deg gradient rendered at compile-time - uses background image] +image::img/linear-gradient-45deg.png[45deg gradient rendered at compile-time - uses background image] The above example is not supported natively because the gradient direction is 45 degrees. Codename One only supports 0, 90, 180, and 270 degrees natively. Therefore this would result in a background image being generated at compile-time with the appropriate gradient. @@ -455,7 +455,7 @@ MyComponent { ---- .Linear gradient with different alpha -image::img/developer-guide/linear-gradient-diff-alpha.png[Linear gradient with different alpha] +image::img/linear-gradient-diff-alpha.png[Linear gradient with different alpha] The above linear-gradient is not supported natively because the stop colors have different transparencies. The first color has an opacity of 0.5, and the second as an opacity of 1.0 (implicitly). Therefore, this would result in the gradient being generated as an image at compile-time. @@ -483,7 +483,7 @@ MyContainer { ---- .Radial gradient 0 to 100 -image::img/developer-guide/radial-gradient-c100.png[Radial gradient 0 to 100] +image::img/radial-gradient-c100.png[Radial gradient 0 to 100] [source,css] ---- @@ -493,7 +493,7 @@ MyContainer { ---- .Radial gradient 0 to 200 -image::img/developer-guide/radial-gradient-c200.png[Radial gradient 0 to 200] +image::img/radial-gradient-c200.png[Radial gradient 0 to 200] [source,css] ---- @@ -503,7 +503,7 @@ MyContainer { ---- .Radial gradient at left -image::img/developer-guide/radial-gradient-xeq0.png[Radial gradient at left] +image::img/radial-gradient-xeq0.png[Radial gradient at left] [source,css] ---- @@ -513,7 +513,7 @@ MyContainer { ---- .Radial gradient at right -image::img/developer-guide/radial-gradient-xeq1.png[Radial gradient at right] +image::img/radial-gradient-xeq1.png[Radial gradient at right] [[cn1-background-type]] @@ -714,7 +714,7 @@ Images { ==== Generating 9-Piece Image Borders -image::img/developer-guide/css-nine-piece-border.png[] +image::img/css-nine-piece-border.png[] 9-Piece image borders can be created using the `image-border` and `image-border-slice` properties. diff --git a/docs/developer-guide/graphics.asciidoc b/docs/developer-guide/graphics.asciidoc index de91696b84..6c07fb34d3 100644 --- a/docs/developer-guide/graphics.asciidoc +++ b/docs/developer-guide/graphics.asciidoc @@ -58,7 +58,7 @@ hi.show(); ---- .Hi world demo code, notice that the blue bar on top is the iOS7+ status bar -image::img/developer-guide/graphics-hiworld.png[Hi world demo code, notice that the blue bar on top is the iOS7+ status bar,scaledwidth=20%] +image::img/graphics-hiworld.png[Hi world demo code, notice that the blue bar on top is the iOS7+ status bar,scaledwidth=20%] ==== Painting with Gradients @@ -101,7 +101,7 @@ the background painters are responsible for drawing the background of all compon component draws its own content (which might overrule the painter) and the glass pane paints last... .Form layout graphic -image::img/developer-guide/perspective-form-layers.png[Form layout graphic,scaledwidth=20%] +image::img/perspective-form-layers.png[Form layout graphic,scaledwidth=20%] Essentially the glass pane is a painter that allows us to draw an overlay on top of the Codename One application. @@ -161,7 +161,7 @@ hi.show(); ---- .The glass pane draws the warning sign on the border of the component partially peeking out -image::img/developer-guide/graphics-glasspane.png[The glass pane draws the warning sign on the border of the component partially peeking out,scaledwidth=20%] +image::img/graphics-glasspane.png[The glass pane draws the warning sign on the border of the component partially peeking out,scaledwidth=20%] === Shapes & Transforms @@ -263,7 +263,7 @@ A drawing might look like this: [[linetoexample]] .lineTo example -image::img/developer-guide/lineto-example.png[lineTo example,scaledwidth=20%] +image::img/lineto-example.png[lineTo example,scaledwidth=20%] ==== Using Bezier Curves @@ -311,7 +311,7 @@ above the line and below the line. A drawing from the resulting app looks like: .Result of quadTo example -image::img/developer-guide/quadto-example.png[Result of quadTo example,scaledwidth=20%] +image::img/quadto-example.png[Result of quadTo example,scaledwidth=20%] ==== Detecting Platform Support @@ -516,7 +516,7 @@ the angle and the radius. If math isn't your thing, don't worry. This example At this point our clock should include a series of tick marks orbiting a blank center as shown below: .Drawing tick marks on the watch face -image::img/developer-guide/tick_marks.png[Drawing tick marks on the watch face,scaledwidth=40%] +image::img/tick_marks.png[Drawing tick marks on the watch face,scaledwidth=40%] ==== Drawing the Numbers @@ -585,7 +585,7 @@ center and translate to the correct location. Now, we should have a clock with tick marks _and_ numbers as shown below: .Drawing the numbers on the watch face -image::img/developer-guide/numbers.png[Drawing the numbers on the watch face,scaledwidth=40%] +image::img/numbers.png[Drawing the numbers on the watch face,scaledwidth=40%] ==== Drawing the Hands @@ -720,7 +720,7 @@ g.resetAffine(); At this point, we have a complete clock as shown below: .The final result - fully rendered watch face -image::img/developer-guide/final.png[The final result - fully rendered watch face,scaledwidth=40%] +image::img/final.png[The final result - fully rendered watch face,scaledwidth=40%] [[clock-animation-section]] ==== Animating the Clock @@ -831,7 +831,7 @@ hi.show(); ---- .Shape Clipping used to clip the image of duke within the given shape -image::img/developer-guide/shaped-clipping.png[Shape Clipping used to clip the image of duke within the given shape,scaledwidth=20%] +image::img/shaped-clipping.png[Shape Clipping used to clip the image of duke within the given shape,scaledwidth=20%] TIP: Notice that this functionality isn't available on all platforms so you normally need to test if shaped clipping is supported using https://www.codenameone.com/javadoc/com/codename1/ui/Graphics.html#isShapeClipSupported--[isShapeClipSupported()]. @@ -843,7 +843,7 @@ libraries) and places the origin in the upper left corner of the screen. X-valu grow downward as illustrated below: .The Codename One graphics coordinate space -image::img/developer-guide/coordinate_system.png[The Codename One graphics coordinate space,scaledwidth=20%] +image::img/coordinate_system.png[The Codename One graphics coordinate space,scaledwidth=20%] Therefore the screen origin is at the top left corner of the screen. Given this information, consider the method call on the https://www.codenameone.com/javadoc/com/codename1/ui/Graphics.html[Graphics] context `g`: @@ -916,7 +916,7 @@ class RectangleComponent extends Component { The result is as follows: .The rectangle component -image::img/developer-guide/rectangle_component1.png[The rectangle component,scaledwidth=20%] +image::img/rectangle_component1.png[The rectangle component,scaledwidth=20%] NOTE: The `x` and `y` coordinates that are passed to the `drawRect(x,y,w,h)` method are relative to the component's _parent’s_ origin -- *not the component itself .. its parent.* This is why we the _x_ position is `getX()+5` @@ -980,7 +980,7 @@ demonstrate this, let's try to place five of these components on a form inside a The result is as follows: .Rotating the rectangle -image::img/developer-guide/rotation1.png[Rotating the rectangle,scaledwidth=20%] +image::img/rotation1.png[Rotating the rectangle,scaledwidth=20%] This may not be an intuitive outcome since we drew 10 rectangle components, be we only see a portion of one rectangle. The reason is that the `rotate(angle)` method uses the screen origin as the pivot point for the rotation. @@ -1003,7 +1003,7 @@ Top Left Corner: ---- .Rotating the rectangle with wrong pivot point -image::img/developer-guide/rotation2.png[Rotating the rectangle with wrong pivot point,scaledwidth=20%] +image::img/rotation2.png[Rotating the rectangle with wrong pivot point,scaledwidth=20%] Center: @@ -1026,7 +1026,7 @@ public void paint(Graphics g) { ---- .Rotating the rectangle with the center pivot point -image::img/developer-guide/rotation3.png[Rotating the rectangle with the center pivot point,scaledwidth=20%] +image::img/rotation3.png[Rotating the rectangle with the center pivot point,scaledwidth=20%] You could also use the `Graphics.setTransform()` class to apply rotations and other complex transformations (including 3D perspective transforms), but I'll leave that for its own topic as it is a little bit more complex. @@ -1191,7 +1191,7 @@ hi.show(); ---- .Icon font from material design icons created with the fixed size of display width -image::img/developer-guide/graphics-fontimage-fixed.png[Icon font from material design icons created with the fixed size of display width,scaledwidth=20%] +image::img/graphics-fontimage-fixed.png[Icon font from material design icons created with the fixed size of display width,scaledwidth=20%] NOTE: The samples use the builtin material design icon font. This is for convenience so the sample will work out of the box, for everyone. However you should be able to do this with any arbitrary icon font off the internet as long as its a valid TTF file. @@ -1212,7 +1212,7 @@ hi.show(); ---- .An image created from the Style object -image::img/developer-guide/graphics-fontimage-style.png[An image created from the Style object,scaledwidth=20%] +image::img/graphics-fontimage-style.png[An image created from the Style object,scaledwidth=20%] WARNING: Notice that for this specific version of the method the size of the font is used to determine the icon size. In the other methods for `FontImage` creation the size of the font is ignored! @@ -1235,7 +1235,7 @@ hi.add(myButton); ---- .Material save icon -image::img/developer-guide/graphics-fontimage-material.png[Material save icon,scaledwidth=20%] +image::img/graphics-fontimage-material.png[Material save icon,scaledwidth=20%] NOTE: Notice that the icon is smaller now as it's calculated based on the font size of the `Button` UIID. @@ -1293,7 +1293,7 @@ hi.getToolbar().addCommandToRightBar("", camera, (ev) -> { ---- .Picture after the capture was complete and the resulted image was rounded. The background was set to red so the rounding effect will be more noticeable -image::img/developer-guide/graphics-image-masking.png[Picture after the capture was complete and the resulted image was rounded. The background was set to red so the rounding effect will be more noticeable,scaledwidth=20%] +image::img/graphics-image-masking.png[Picture after the capture was complete and the resulted image was rounded. The background was set to red so the rounding effect will be more noticeable,scaledwidth=20%] Notice that this example is simplistic in order to be self contained. We often recommend that developers ship "ready made" mask images with their application which can allow very complex effects on the images. @@ -1424,7 +1424,7 @@ private Map createListEntry(String name, String date, String cov ---- .A URL image fetched dynamically into the list model -image::img/developer-guide/graphics-urlimage-multilist.png[A URL image fetched dynamically into the list model,scaledwidth=20%] +image::img/graphics-urlimage-multilist.png[A URL image fetched dynamically into the list model,scaledwidth=20%] === Charts diff --git a/docs/developer-guide/img/developer-guide/12c5303e-620c-11e5-9dbb-bcb4bebc0c87.png b/docs/developer-guide/img/12c5303e-620c-11e5-9dbb-bcb4bebc0c87.png similarity index 100% rename from docs/developer-guide/img/developer-guide/12c5303e-620c-11e5-9dbb-bcb4bebc0c87.png rename to docs/developer-guide/img/12c5303e-620c-11e5-9dbb-bcb4bebc0c87.png diff --git a/docs/developer-guide/img/developer-guide/5fe88406-61e4-11e5-951e-e09bd28a93c9.png b/docs/developer-guide/img/5fe88406-61e4-11e5-951e-e09bd28a93c9.png similarity index 100% rename from docs/developer-guide/img/developer-guide/5fe88406-61e4-11e5-951e-e09bd28a93c9.png rename to docs/developer-guide/img/5fe88406-61e4-11e5-951e-e09bd28a93c9.png diff --git a/docs/developer-guide/img/developer-guide/65e31df8-620c-11e5-87ff-6b926a3f2090.png b/docs/developer-guide/img/65e31df8-620c-11e5-87ff-6b926a3f2090.png similarity index 100% rename from docs/developer-guide/img/developer-guide/65e31df8-620c-11e5-87ff-6b926a3f2090.png rename to docs/developer-guide/img/65e31df8-620c-11e5-87ff-6b926a3f2090.png diff --git a/docs/developer-guide/img/developer-guide/android-certificate-generator.png b/docs/developer-guide/img/android-certificate-generator.png similarity index 100% rename from docs/developer-guide/img/developer-guide/android-certificate-generator.png rename to docs/developer-guide/img/android-certificate-generator.png diff --git a/docs/developer-guide/img/developer-guide/android-certificate-wizard.png b/docs/developer-guide/img/android-certificate-wizard.png similarity index 100% rename from docs/developer-guide/img/developer-guide/android-certificate-wizard.png rename to docs/developer-guide/img/android-certificate-wizard.png diff --git a/docs/developer-guide/img/developer-guide/android-certificate-wizard2.png b/docs/developer-guide/img/android-certificate-wizard2.png similarity index 100% rename from docs/developer-guide/img/developer-guide/android-certificate-wizard2.png rename to docs/developer-guide/img/android-certificate-wizard2.png diff --git a/docs/developer-guide/img/developer-guide/app-prefix.png b/docs/developer-guide/img/app-prefix.png similarity index 100% rename from docs/developer-guide/img/developer-guide/app-prefix.png rename to docs/developer-guide/img/app-prefix.png diff --git a/docs/developer-guide/img/developer-guide/auto-complete-with-pictures.png b/docs/developer-guide/img/auto-complete-with-pictures.png similarity index 100% rename from docs/developer-guide/img/developer-guide/auto-complete-with-pictures.png rename to docs/developer-guide/img/auto-complete-with-pictures.png diff --git a/docs/developer-guide/img/developer-guide/autocomplete.png b/docs/developer-guide/img/autocomplete.png similarity index 100% rename from docs/developer-guide/img/developer-guide/autocomplete.png rename to docs/developer-guide/img/autocomplete.png diff --git a/docs/developer-guide/img/developer-guide/autosize.png b/docs/developer-guide/img/autosize.png similarity index 100% rename from docs/developer-guide/img/developer-guide/autosize.png rename to docs/developer-guide/img/autosize.png diff --git a/docs/developer-guide/img/developer-guide/background.jpg b/docs/developer-guide/img/background.jpg similarity index 100% rename from docs/developer-guide/img/developer-guide/background.jpg rename to docs/developer-guide/img/background.jpg diff --git a/docs/developer-guide/img/developer-guide/badge-floating-button.png b/docs/developer-guide/img/badge-floating-button.png similarity index 100% rename from docs/developer-guide/img/developer-guide/badge-floating-button.png rename to docs/developer-guide/img/badge-floating-button.png diff --git a/docs/developer-guide/img/developer-guide/bar_chart.png b/docs/developer-guide/img/bar_chart.png similarity index 100% rename from docs/developer-guide/img/developer-guide/bar_chart.png rename to docs/developer-guide/img/bar_chart.png diff --git a/docs/developer-guide/img/developer-guide/bar_chart_stacked.png b/docs/developer-guide/img/bar_chart_stacked.png similarity index 100% rename from docs/developer-guide/img/developer-guide/bar_chart_stacked.png rename to docs/developer-guide/img/bar_chart_stacked.png diff --git a/docs/developer-guide/img/developer-guide/border-layout-RTL.png b/docs/developer-guide/img/border-layout-RTL.png similarity index 100% rename from docs/developer-guide/img/developer-guide/border-layout-RTL.png rename to docs/developer-guide/img/border-layout-RTL.png diff --git a/docs/developer-guide/img/developer-guide/border-layout-center.png b/docs/developer-guide/img/border-layout-center.png similarity index 100% rename from docs/developer-guide/img/developer-guide/border-layout-center.png rename to docs/developer-guide/img/border-layout-center.png diff --git a/docs/developer-guide/img/developer-guide/border-layout.png b/docs/developer-guide/img/border-layout.png similarity index 100% rename from docs/developer-guide/img/developer-guide/border-layout.png rename to docs/developer-guide/img/border-layout.png diff --git a/docs/developer-guide/img/developer-guide/box-layout-x-no-grow.png b/docs/developer-guide/img/box-layout-x-no-grow.png similarity index 100% rename from docs/developer-guide/img/developer-guide/box-layout-x-no-grow.png rename to docs/developer-guide/img/box-layout-x-no-grow.png diff --git a/docs/developer-guide/img/developer-guide/box-layout-x.png b/docs/developer-guide/img/box-layout-x.png similarity index 100% rename from docs/developer-guide/img/developer-guide/box-layout-x.png rename to docs/developer-guide/img/box-layout-x.png diff --git a/docs/developer-guide/img/developer-guide/box-layout-y.png b/docs/developer-guide/img/box-layout-y.png similarity index 100% rename from docs/developer-guide/img/developer-guide/box-layout-y.png rename to docs/developer-guide/img/box-layout-y.png diff --git a/docs/developer-guide/img/developer-guide/bubble_chart.png b/docs/developer-guide/img/bubble_chart.png similarity index 100% rename from docs/developer-guide/img/developer-guide/bubble_chart.png rename to docs/developer-guide/img/bubble_chart.png diff --git a/docs/developer-guide/img/developer-guide/build-hints-codenameone-settings.png b/docs/developer-guide/img/build-hints-codenameone-settings.png similarity index 100% rename from docs/developer-guide/img/developer-guide/build-hints-codenameone-settings.png rename to docs/developer-guide/img/build-hints-codenameone-settings.png diff --git a/docs/developer-guide/img/developer-guide/build-server-results.png b/docs/developer-guide/img/build-server-results.png similarity index 100% rename from docs/developer-guide/img/developer-guide/build-server-results.png rename to docs/developer-guide/img/build-server-results.png diff --git a/docs/developer-guide/img/developer-guide/camera-button.png b/docs/developer-guide/img/camera-button.png similarity index 100% rename from docs/developer-guide/img/developer-guide/camera-button.png rename to docs/developer-guide/img/camera-button.png diff --git a/docs/developer-guide/img/developer-guide/camera.png b/docs/developer-guide/img/camera.png similarity index 100% rename from docs/developer-guide/img/developer-guide/camera.png rename to docs/developer-guide/img/camera.png diff --git a/docs/developer-guide/img/developer-guide/capture-audio.png b/docs/developer-guide/img/capture-audio.png similarity index 100% rename from docs/developer-guide/img/developer-guide/capture-audio.png rename to docs/developer-guide/img/capture-audio.png diff --git a/docs/developer-guide/img/developer-guide/capture-photo.png b/docs/developer-guide/img/capture-photo.png similarity index 100% rename from docs/developer-guide/img/developer-guide/capture-photo.png rename to docs/developer-guide/img/capture-photo.png diff --git a/docs/developer-guide/img/developer-guide/center-layout.png b/docs/developer-guide/img/center-layout.png similarity index 100% rename from docs/developer-guide/img/developer-guide/center-layout.png rename to docs/developer-guide/img/center-layout.png diff --git a/docs/developer-guide/img/developer-guide/certificate-wizard-enable-push.png b/docs/developer-guide/img/certificate-wizard-enable-push.png similarity index 100% rename from docs/developer-guide/img/developer-guide/certificate-wizard-enable-push.png rename to docs/developer-guide/img/certificate-wizard-enable-push.png diff --git a/docs/developer-guide/img/developer-guide/chat-app-tutorial-facebook-login-1.png b/docs/developer-guide/img/chat-app-tutorial-facebook-login-1.png similarity index 100% rename from docs/developer-guide/img/developer-guide/chat-app-tutorial-facebook-login-1.png rename to docs/developer-guide/img/chat-app-tutorial-facebook-login-1.png diff --git a/docs/developer-guide/img/developer-guide/chat-app-tutorial-facebook-login-2.png b/docs/developer-guide/img/chat-app-tutorial-facebook-login-2.png similarity index 100% rename from docs/developer-guide/img/developer-guide/chat-app-tutorial-facebook-login-2.png rename to docs/developer-guide/img/chat-app-tutorial-facebook-login-2.png diff --git a/docs/developer-guide/img/developer-guide/chat-app-tutorial-facebook-login-3.png b/docs/developer-guide/img/chat-app-tutorial-facebook-login-3.png similarity index 100% rename from docs/developer-guide/img/developer-guide/chat-app-tutorial-facebook-login-3.png rename to docs/developer-guide/img/chat-app-tutorial-facebook-login-3.png diff --git a/docs/developer-guide/img/developer-guide/chat-app-tutorial-facebook-login-4.png b/docs/developer-guide/img/chat-app-tutorial-facebook-login-4.png similarity index 100% rename from docs/developer-guide/img/developer-guide/chat-app-tutorial-facebook-login-4.png rename to docs/developer-guide/img/chat-app-tutorial-facebook-login-4.png diff --git a/docs/developer-guide/img/developer-guide/chat-app-tutorial-facebook-login-5.png b/docs/developer-guide/img/chat-app-tutorial-facebook-login-5.png similarity index 100% rename from docs/developer-guide/img/developer-guide/chat-app-tutorial-facebook-login-5.png rename to docs/developer-guide/img/chat-app-tutorial-facebook-login-5.png diff --git a/docs/developer-guide/img/developer-guide/chat-app-tutorial-facebook-login-6.png b/docs/developer-guide/img/chat-app-tutorial-facebook-login-6.png similarity index 100% rename from docs/developer-guide/img/developer-guide/chat-app-tutorial-facebook-login-6.png rename to docs/developer-guide/img/chat-app-tutorial-facebook-login-6.png diff --git a/docs/developer-guide/img/developer-guide/chat-app-tutorial-facebook-login-7.png b/docs/developer-guide/img/chat-app-tutorial-facebook-login-7.png similarity index 100% rename from docs/developer-guide/img/developer-guide/chat-app-tutorial-facebook-login-7.png rename to docs/developer-guide/img/chat-app-tutorial-facebook-login-7.png diff --git a/docs/developer-guide/img/developer-guide/chat-app-tutorial-facebook-login-8.png b/docs/developer-guide/img/chat-app-tutorial-facebook-login-8.png similarity index 100% rename from docs/developer-guide/img/developer-guide/chat-app-tutorial-facebook-login-8.png rename to docs/developer-guide/img/chat-app-tutorial-facebook-login-8.png diff --git a/docs/developer-guide/img/developer-guide/chat-app-tutorial-facebook-login-9.png b/docs/developer-guide/img/chat-app-tutorial-facebook-login-9.png similarity index 100% rename from docs/developer-guide/img/developer-guide/chat-app-tutorial-facebook-login-9.png rename to docs/developer-guide/img/chat-app-tutorial-facebook-login-9.png diff --git a/docs/developer-guide/img/developer-guide/chrome-debugger.png b/docs/developer-guide/img/chrome-debugger.png similarity index 100% rename from docs/developer-guide/img/developer-guide/chrome-debugger.png rename to docs/developer-guide/img/chrome-debugger.png diff --git a/docs/developer-guide/img/developer-guide/cn1-3d-lowered.png b/docs/developer-guide/img/cn1-3d-lowered.png similarity index 100% rename from docs/developer-guide/img/developer-guide/cn1-3d-lowered.png rename to docs/developer-guide/img/cn1-3d-lowered.png diff --git a/docs/developer-guide/img/developer-guide/cn1-3d-shadow-north.png b/docs/developer-guide/img/cn1-3d-shadow-north.png similarity index 100% rename from docs/developer-guide/img/developer-guide/cn1-3d-shadow-north.png rename to docs/developer-guide/img/cn1-3d-shadow-north.png diff --git a/docs/developer-guide/img/developer-guide/cn1-3d.png b/docs/developer-guide/img/cn1-3d.png similarity index 100% rename from docs/developer-guide/img/developer-guide/cn1-3d.png rename to docs/developer-guide/img/cn1-3d.png diff --git a/docs/developer-guide/img/developer-guide/cn1lib-create-step1.png b/docs/developer-guide/img/cn1lib-create-step1.png similarity index 100% rename from docs/developer-guide/img/developer-guide/cn1lib-create-step1.png rename to docs/developer-guide/img/cn1lib-create-step1.png diff --git a/docs/developer-guide/img/developer-guide/cn1lib-create-step2.png b/docs/developer-guide/img/cn1lib-create-step2.png similarity index 100% rename from docs/developer-guide/img/developer-guide/cn1lib-create-step2.png rename to docs/developer-guide/img/cn1lib-create-step2.png diff --git a/docs/developer-guide/img/developer-guide/cn1libs-dont-change-classpath.png b/docs/developer-guide/img/cn1libs-dont-change-classpath.png similarity index 100% rename from docs/developer-guide/img/developer-guide/cn1libs-dont-change-classpath.png rename to docs/developer-guide/img/cn1libs-dont-change-classpath.png diff --git a/docs/developer-guide/img/developer-guide/cn1libs-refresh.png b/docs/developer-guide/img/cn1libs-refresh.png similarity index 100% rename from docs/developer-guide/img/developer-guide/cn1libs-refresh.png rename to docs/developer-guide/img/cn1libs-refresh.png diff --git a/docs/developer-guide/img/developer-guide/codenameone-application-lifecycle.png b/docs/developer-guide/img/codenameone-application-lifecycle.png similarity index 100% rename from docs/developer-guide/img/developer-guide/codenameone-application-lifecycle.png rename to docs/developer-guide/img/codenameone-application-lifecycle.png diff --git a/docs/developer-guide/img/developer-guide/codenameone-class-diagram.png b/docs/developer-guide/img/codenameone-class-diagram.png similarity index 100% rename from docs/developer-guide/img/developer-guide/codenameone-class-diagram.png rename to docs/developer-guide/img/codenameone-class-diagram.png diff --git a/docs/developer-guide/img/developer-guide/codenameone-form.png b/docs/developer-guide/img/codenameone-form.png similarity index 100% rename from docs/developer-guide/img/developer-guide/codenameone-form.png rename to docs/developer-guide/img/codenameone-form.png diff --git a/docs/developer-guide/img/developer-guide/codenameone-hello-world-title-label.png b/docs/developer-guide/img/codenameone-hello-world-title-label.png similarity index 100% rename from docs/developer-guide/img/developer-guide/codenameone-hello-world-title-label.png rename to docs/developer-guide/img/codenameone-hello-world-title-label.png diff --git a/docs/developer-guide/img/developer-guide/codenameone-layout-managers-1.png b/docs/developer-guide/img/codenameone-layout-managers-1.png similarity index 100% rename from docs/developer-guide/img/developer-guide/codenameone-layout-managers-1.png rename to docs/developer-guide/img/codenameone-layout-managers-1.png diff --git a/docs/developer-guide/img/developer-guide/codenameone-layout-managers-2.png b/docs/developer-guide/img/codenameone-layout-managers-2.png similarity index 100% rename from docs/developer-guide/img/developer-guide/codenameone-layout-managers-2.png rename to docs/developer-guide/img/codenameone-layout-managers-2.png diff --git a/docs/developer-guide/img/developer-guide/combined.png b/docs/developer-guide/img/combined.png similarity index 100% rename from docs/developer-guide/img/developer-guide/combined.png rename to docs/developer-guide/img/combined.png diff --git a/docs/developer-guide/img/developer-guide/component-selector-table-striping.png b/docs/developer-guide/img/component-selector-table-striping.png similarity index 100% rename from docs/developer-guide/img/developer-guide/component-selector-table-striping.png rename to docs/developer-guide/img/component-selector-table-striping.png diff --git a/docs/developer-guide/img/developer-guide/component-uml.png b/docs/developer-guide/img/component-uml.png similarity index 100% rename from docs/developer-guide/img/developer-guide/component-uml.png rename to docs/developer-guide/img/component-uml.png diff --git a/docs/developer-guide/img/developer-guide/components-accordion.png b/docs/developer-guide/img/components-accordion.png similarity index 100% rename from docs/developer-guide/img/developer-guide/components-accordion.png rename to docs/developer-guide/img/components-accordion.png diff --git a/docs/developer-guide/img/developer-guide/components-autocomplete.png b/docs/developer-guide/img/components-autocomplete.png similarity index 100% rename from docs/developer-guide/img/developer-guide/components-autocomplete.png rename to docs/developer-guide/img/components-autocomplete.png diff --git a/docs/developer-guide/img/developer-guide/components-browsercomponent-callback-after.png b/docs/developer-guide/img/components-browsercomponent-callback-after.png similarity index 100% rename from docs/developer-guide/img/developer-guide/components-browsercomponent-callback-after.png rename to docs/developer-guide/img/components-browsercomponent-callback-after.png diff --git a/docs/developer-guide/img/developer-guide/components-browsercomponent-callback-before.png b/docs/developer-guide/img/components-browsercomponent-callback-before.png similarity index 100% rename from docs/developer-guide/img/developer-guide/components-browsercomponent-callback-before.png rename to docs/developer-guide/img/components-browsercomponent-callback-before.png diff --git a/docs/developer-guide/img/developer-guide/components-browsercomponent-context.png b/docs/developer-guide/img/components-browsercomponent-context.png similarity index 100% rename from docs/developer-guide/img/developer-guide/components-browsercomponent-context.png rename to docs/developer-guide/img/components-browsercomponent-context.png diff --git a/docs/developer-guide/img/developer-guide/components-browsercomponent-javascript.png b/docs/developer-guide/img/components-browsercomponent-javascript.png similarity index 100% rename from docs/developer-guide/img/developer-guide/components-browsercomponent-javascript.png rename to docs/developer-guide/img/components-browsercomponent-javascript.png diff --git a/docs/developer-guide/img/developer-guide/components-browsercomponent.png b/docs/developer-guide/img/components-browsercomponent.png similarity index 100% rename from docs/developer-guide/img/developer-guide/components-browsercomponent.png rename to docs/developer-guide/img/components-browsercomponent.png diff --git a/docs/developer-guide/img/developer-guide/components-button.png b/docs/developer-guide/img/components-button.png similarity index 100% rename from docs/developer-guide/img/developer-guide/components-button.png rename to docs/developer-guide/img/components-button.png diff --git a/docs/developer-guide/img/developer-guide/components-calendar.png b/docs/developer-guide/img/components-calendar.png similarity index 100% rename from docs/developer-guide/img/developer-guide/components-calendar.png rename to docs/developer-guide/img/components-calendar.png diff --git a/docs/developer-guide/img/developer-guide/components-combobox.png b/docs/developer-guide/img/components-combobox.png similarity index 100% rename from docs/developer-guide/img/developer-guide/components-combobox.png rename to docs/developer-guide/img/components-combobox.png diff --git a/docs/developer-guide/img/developer-guide/components-componentgroup.png b/docs/developer-guide/img/components-componentgroup.png similarity index 100% rename from docs/developer-guide/img/developer-guide/components-componentgroup.png rename to docs/developer-guide/img/components-componentgroup.png diff --git a/docs/developer-guide/img/developer-guide/components-dialog-blur-no-tint.png b/docs/developer-guide/img/components-dialog-blur-no-tint.png similarity index 100% rename from docs/developer-guide/img/developer-guide/components-dialog-blur-no-tint.png rename to docs/developer-guide/img/components-dialog-blur-no-tint.png diff --git a/docs/developer-guide/img/developer-guide/components-dialog-blur.png b/docs/developer-guide/img/components-dialog-blur.png similarity index 100% rename from docs/developer-guide/img/developer-guide/components-dialog-blur.png rename to docs/developer-guide/img/components-dialog-blur.png diff --git a/docs/developer-guide/img/developer-guide/components-dialog-green-tint.png b/docs/developer-guide/img/components-dialog-green-tint.png similarity index 100% rename from docs/developer-guide/img/developer-guide/components-dialog-green-tint.png rename to docs/developer-guide/img/components-dialog-green-tint.png diff --git a/docs/developer-guide/img/developer-guide/components-dialog-modal-bottom-half.png b/docs/developer-guide/img/components-dialog-modal-bottom-half.png similarity index 100% rename from docs/developer-guide/img/developer-guide/components-dialog-modal-bottom-half.png rename to docs/developer-guide/img/components-dialog-modal-bottom-half.png diff --git a/docs/developer-guide/img/developer-guide/components-dialog-modal-south.png b/docs/developer-guide/img/components-dialog-modal-south.png similarity index 100% rename from docs/developer-guide/img/developer-guide/components-dialog-modal-south.png rename to docs/developer-guide/img/components-dialog-modal-south.png diff --git a/docs/developer-guide/img/developer-guide/components-dialog-popup.png b/docs/developer-guide/img/components-dialog-popup.png similarity index 100% rename from docs/developer-guide/img/developer-guide/components-dialog-popup.png rename to docs/developer-guide/img/components-dialog-popup.png diff --git a/docs/developer-guide/img/developer-guide/components-dialog-tint.png b/docs/developer-guide/img/components-dialog-tint.png similarity index 100% rename from docs/developer-guide/img/developer-guide/components-dialog-tint.png rename to docs/developer-guide/img/components-dialog-tint.png diff --git a/docs/developer-guide/img/developer-guide/components-floatinghint.png b/docs/developer-guide/img/components-floatinghint.png similarity index 100% rename from docs/developer-guide/img/developer-guide/components-floatinghint.png rename to docs/developer-guide/img/components-floatinghint.png diff --git a/docs/developer-guide/img/developer-guide/components-generic-list-cell-renderer.png b/docs/developer-guide/img/components-generic-list-cell-renderer.png similarity index 100% rename from docs/developer-guide/img/developer-guide/components-generic-list-cell-renderer.png rename to docs/developer-guide/img/components-generic-list-cell-renderer.png diff --git a/docs/developer-guide/img/developer-guide/components-imageviewer-dynamic.png b/docs/developer-guide/img/components-imageviewer-dynamic.png similarity index 100% rename from docs/developer-guide/img/developer-guide/components-imageviewer-dynamic.png rename to docs/developer-guide/img/components-imageviewer-dynamic.png diff --git a/docs/developer-guide/img/developer-guide/components-imageviewer-multi.png b/docs/developer-guide/img/components-imageviewer-multi.png similarity index 100% rename from docs/developer-guide/img/developer-guide/components-imageviewer-multi.png rename to docs/developer-guide/img/components-imageviewer-multi.png diff --git a/docs/developer-guide/img/developer-guide/components-imageviewer-zoomed-in.png b/docs/developer-guide/img/components-imageviewer-zoomed-in.png similarity index 100% rename from docs/developer-guide/img/developer-guide/components-imageviewer-zoomed-in.png rename to docs/developer-guide/img/components-imageviewer-zoomed-in.png diff --git a/docs/developer-guide/img/developer-guide/components-imageviewer.png b/docs/developer-guide/img/components-imageviewer.png similarity index 100% rename from docs/developer-guide/img/developer-guide/components-imageviewer.png rename to docs/developer-guide/img/components-imageviewer.png diff --git a/docs/developer-guide/img/developer-guide/components-infinitescrolladapter.png b/docs/developer-guide/img/components-infinitescrolladapter.png similarity index 100% rename from docs/developer-guide/img/developer-guide/components-infinitescrolladapter.png rename to docs/developer-guide/img/components-infinitescrolladapter.png diff --git a/docs/developer-guide/img/developer-guide/components-interaction-dialog.png b/docs/developer-guide/img/components-interaction-dialog.png similarity index 100% rename from docs/developer-guide/img/developer-guide/components-interaction-dialog.png rename to docs/developer-guide/img/components-interaction-dialog.png diff --git a/docs/developer-guide/img/developer-guide/components-label-text-position.png b/docs/developer-guide/img/components-label-text-position.png similarity index 100% rename from docs/developer-guide/img/developer-guide/components-label-text-position.png rename to docs/developer-guide/img/components-label-text-position.png diff --git a/docs/developer-guide/img/developer-guide/components-link-button.png b/docs/developer-guide/img/components-link-button.png similarity index 100% rename from docs/developer-guide/img/developer-guide/components-link-button.png rename to docs/developer-guide/img/components-link-button.png diff --git a/docs/developer-guide/img/developer-guide/components-mediaplayer-android.png b/docs/developer-guide/img/components-mediaplayer-android.png similarity index 100% rename from docs/developer-guide/img/developer-guide/components-mediaplayer-android.png rename to docs/developer-guide/img/components-mediaplayer-android.png diff --git a/docs/developer-guide/img/developer-guide/components-mediaplayer.png b/docs/developer-guide/img/components-mediaplayer.png similarity index 100% rename from docs/developer-guide/img/developer-guide/components-mediaplayer.png rename to docs/developer-guide/img/components-mediaplayer.png diff --git a/docs/developer-guide/img/developer-guide/components-millionbooks.png b/docs/developer-guide/img/components-millionbooks.png similarity index 100% rename from docs/developer-guide/img/developer-guide/components-millionbooks.png rename to docs/developer-guide/img/components-millionbooks.png diff --git a/docs/developer-guide/img/developer-guide/components-multibutton.png b/docs/developer-guide/img/components-multibutton.png similarity index 100% rename from docs/developer-guide/img/developer-guide/components-multibutton.png rename to docs/developer-guide/img/components-multibutton.png diff --git a/docs/developer-guide/img/developer-guide/components-multilist.png b/docs/developer-guide/img/components-multilist.png similarity index 100% rename from docs/developer-guide/img/developer-guide/components-multilist.png rename to docs/developer-guide/img/components-multilist.png diff --git a/docs/developer-guide/img/developer-guide/components-onoffswitch.png b/docs/developer-guide/img/components-onoffswitch.png similarity index 100% rename from docs/developer-guide/img/developer-guide/components-onoffswitch.png rename to docs/developer-guide/img/components-onoffswitch.png diff --git a/docs/developer-guide/img/developer-guide/components-picker-date-android.png b/docs/developer-guide/img/components-picker-date-android.png similarity index 100% rename from docs/developer-guide/img/developer-guide/components-picker-date-android.png rename to docs/developer-guide/img/components-picker-date-android.png diff --git a/docs/developer-guide/img/developer-guide/components-picker-date-time-android.png b/docs/developer-guide/img/components-picker-date-time-android.png similarity index 100% rename from docs/developer-guide/img/developer-guide/components-picker-date-time-android.png rename to docs/developer-guide/img/components-picker-date-time-android.png diff --git a/docs/developer-guide/img/developer-guide/components-picker-date-time-on-simulator.png b/docs/developer-guide/img/components-picker-date-time-on-simulator.png similarity index 100% rename from docs/developer-guide/img/developer-guide/components-picker-date-time-on-simulator.png rename to docs/developer-guide/img/components-picker-date-time-on-simulator.png diff --git a/docs/developer-guide/img/developer-guide/components-picker-duration-android.png b/docs/developer-guide/img/components-picker-duration-android.png similarity index 100% rename from docs/developer-guide/img/developer-guide/components-picker-duration-android.png rename to docs/developer-guide/img/components-picker-duration-android.png diff --git a/docs/developer-guide/img/developer-guide/components-picker-duration-hours-android.png b/docs/developer-guide/img/components-picker-duration-hours-android.png similarity index 100% rename from docs/developer-guide/img/developer-guide/components-picker-duration-hours-android.png rename to docs/developer-guide/img/components-picker-duration-hours-android.png diff --git a/docs/developer-guide/img/developer-guide/components-picker-duration-minutes-android.png b/docs/developer-guide/img/components-picker-duration-minutes-android.png similarity index 100% rename from docs/developer-guide/img/developer-guide/components-picker-duration-minutes-android.png rename to docs/developer-guide/img/components-picker-duration-minutes-android.png diff --git a/docs/developer-guide/img/developer-guide/components-picker-strings-android.png b/docs/developer-guide/img/components-picker-strings-android.png similarity index 100% rename from docs/developer-guide/img/developer-guide/components-picker-strings-android.png rename to docs/developer-guide/img/components-picker-strings-android.png diff --git a/docs/developer-guide/img/developer-guide/components-picker-time-android.png b/docs/developer-guide/img/components-picker-time-android.png similarity index 100% rename from docs/developer-guide/img/developer-guide/components-picker-time-android.png rename to docs/developer-guide/img/components-picker-time-android.png diff --git a/docs/developer-guide/img/developer-guide/components-picker.png b/docs/developer-guide/img/components-picker.png similarity index 100% rename from docs/developer-guide/img/developer-guide/components-picker.png rename to docs/developer-guide/img/components-picker.png diff --git a/docs/developer-guide/img/developer-guide/components-radiobutton-checkbox.png b/docs/developer-guide/img/components-radiobutton-checkbox.png similarity index 100% rename from docs/developer-guide/img/developer-guide/components-radiobutton-checkbox.png rename to docs/developer-guide/img/components-radiobutton-checkbox.png diff --git a/docs/developer-guide/img/developer-guide/components-scaleimage.png b/docs/developer-guide/img/components-scaleimage.png similarity index 100% rename from docs/developer-guide/img/developer-guide/components-scaleimage.png rename to docs/developer-guide/img/components-scaleimage.png diff --git a/docs/developer-guide/img/developer-guide/components-sharebutton-android.png b/docs/developer-guide/img/components-sharebutton-android.png similarity index 100% rename from docs/developer-guide/img/developer-guide/components-sharebutton-android.png rename to docs/developer-guide/img/components-sharebutton-android.png diff --git a/docs/developer-guide/img/developer-guide/components-sharebutton.png b/docs/developer-guide/img/components-sharebutton.png similarity index 100% rename from docs/developer-guide/img/developer-guide/components-sharebutton.png rename to docs/developer-guide/img/components-sharebutton.png diff --git a/docs/developer-guide/img/developer-guide/components-signature2.png b/docs/developer-guide/img/components-signature2.png similarity index 100% rename from docs/developer-guide/img/developer-guide/components-signature2.png rename to docs/developer-guide/img/components-signature2.png diff --git a/docs/developer-guide/img/developer-guide/components-slider.png b/docs/developer-guide/img/components-slider.png similarity index 100% rename from docs/developer-guide/img/developer-guide/components-slider.png rename to docs/developer-guide/img/components-slider.png diff --git a/docs/developer-guide/img/developer-guide/components-spanbutton.png b/docs/developer-guide/img/components-spanbutton.png similarity index 100% rename from docs/developer-guide/img/developer-guide/components-spanbutton.png rename to docs/developer-guide/img/components-spanbutton.png diff --git a/docs/developer-guide/img/developer-guide/components-spanlabel.png b/docs/developer-guide/img/components-spanlabel.png similarity index 100% rename from docs/developer-guide/img/developer-guide/components-spanlabel.png rename to docs/developer-guide/img/components-spanlabel.png diff --git a/docs/developer-guide/img/developer-guide/components-statusbar-message.png b/docs/developer-guide/img/components-statusbar-message.png similarity index 100% rename from docs/developer-guide/img/developer-guide/components-statusbar-message.png rename to docs/developer-guide/img/components-statusbar-message.png diff --git a/docs/developer-guide/img/developer-guide/components-statusbar-multiline.png b/docs/developer-guide/img/components-statusbar-multiline.png similarity index 100% rename from docs/developer-guide/img/developer-guide/components-statusbar-multiline.png rename to docs/developer-guide/img/components-statusbar-multiline.png diff --git a/docs/developer-guide/img/developer-guide/components-statusbar.png b/docs/developer-guide/img/components-statusbar.png similarity index 100% rename from docs/developer-guide/img/developer-guide/components-statusbar.png rename to docs/developer-guide/img/components-statusbar.png diff --git a/docs/developer-guide/img/developer-guide/components-swipablecontainer.png b/docs/developer-guide/img/components-swipablecontainer.png similarity index 100% rename from docs/developer-guide/img/developer-guide/components-swipablecontainer.png rename to docs/developer-guide/img/components-swipablecontainer.png diff --git a/docs/developer-guide/img/developer-guide/components-table-multiline-landscape.png b/docs/developer-guide/img/components-table-multiline-landscape.png similarity index 100% rename from docs/developer-guide/img/developer-guide/components-table-multiline-landscape.png rename to docs/developer-guide/img/components-table-multiline-landscape.png diff --git a/docs/developer-guide/img/developer-guide/components-table-multiline-portrait.png b/docs/developer-guide/img/components-table-multiline-portrait.png similarity index 100% rename from docs/developer-guide/img/developer-guide/components-table-multiline-portrait.png rename to docs/developer-guide/img/components-table-multiline-portrait.png diff --git a/docs/developer-guide/img/developer-guide/components-table-pinstripe-edit.png b/docs/developer-guide/img/components-table-pinstripe-edit.png similarity index 100% rename from docs/developer-guide/img/developer-guide/components-table-pinstripe-edit.png rename to docs/developer-guide/img/components-table-pinstripe-edit.png diff --git a/docs/developer-guide/img/developer-guide/components-table-pinstripe.png b/docs/developer-guide/img/components-table-pinstripe.png similarity index 100% rename from docs/developer-guide/img/developer-guide/components-table-pinstripe.png rename to docs/developer-guide/img/components-table-pinstripe.png diff --git a/docs/developer-guide/img/developer-guide/components-table-with-spanning.png b/docs/developer-guide/img/components-table-with-spanning.png similarity index 100% rename from docs/developer-guide/img/developer-guide/components-table-with-spanning.png rename to docs/developer-guide/img/components-table-with-spanning.png diff --git a/docs/developer-guide/img/developer-guide/components-table.png b/docs/developer-guide/img/components-table.png similarity index 100% rename from docs/developer-guide/img/developer-guide/components-table.png rename to docs/developer-guide/img/components-table.png diff --git a/docs/developer-guide/img/developer-guide/components-tabs-swipe1.png b/docs/developer-guide/img/components-tabs-swipe1.png similarity index 100% rename from docs/developer-guide/img/developer-guide/components-tabs-swipe1.png rename to docs/developer-guide/img/components-tabs-swipe1.png diff --git a/docs/developer-guide/img/developer-guide/components-tabs-swipe2.png b/docs/developer-guide/img/components-tabs-swipe2.png similarity index 100% rename from docs/developer-guide/img/developer-guide/components-tabs-swipe2.png rename to docs/developer-guide/img/components-tabs-swipe2.png diff --git a/docs/developer-guide/img/developer-guide/components-tabs.png b/docs/developer-guide/img/components-tabs.png similarity index 100% rename from docs/developer-guide/img/developer-guide/components-tabs.png rename to docs/developer-guide/img/components-tabs.png diff --git a/docs/developer-guide/img/developer-guide/components-text-component.png b/docs/developer-guide/img/components-text-component.png similarity index 100% rename from docs/developer-guide/img/developer-guide/components-text-component.png rename to docs/developer-guide/img/components-text-component.png diff --git a/docs/developer-guide/img/developer-guide/components-textfield-vkb-done.png b/docs/developer-guide/img/components-textfield-vkb-done.png similarity index 100% rename from docs/developer-guide/img/developer-guide/components-textfield-vkb-done.png rename to docs/developer-guide/img/components-textfield-vkb-done.png diff --git a/docs/developer-guide/img/developer-guide/components-textfield-vkb-next.png b/docs/developer-guide/img/components-textfield-vkb-next.png similarity index 100% rename from docs/developer-guide/img/developer-guide/components-textfield-vkb-next.png rename to docs/developer-guide/img/components-textfield-vkb-next.png diff --git a/docs/developer-guide/img/developer-guide/components-toggle-buttons-component-group.png b/docs/developer-guide/img/components-toggle-buttons-component-group.png similarity index 100% rename from docs/developer-guide/img/developer-guide/components-toggle-buttons-component-group.png rename to docs/developer-guide/img/components-toggle-buttons-component-group.png diff --git a/docs/developer-guide/img/developer-guide/components-toggle-buttons.png b/docs/developer-guide/img/components-toggle-buttons.png similarity index 100% rename from docs/developer-guide/img/developer-guide/components-toggle-buttons.png rename to docs/developer-guide/img/components-toggle-buttons.png diff --git a/docs/developer-guide/img/developer-guide/components-toolbar-animation-1.png b/docs/developer-guide/img/components-toolbar-animation-1.png similarity index 100% rename from docs/developer-guide/img/developer-guide/components-toolbar-animation-1.png rename to docs/developer-guide/img/components-toolbar-animation-1.png diff --git a/docs/developer-guide/img/developer-guide/components-toolbar-animation-2.png b/docs/developer-guide/img/components-toolbar-animation-2.png similarity index 100% rename from docs/developer-guide/img/developer-guide/components-toolbar-animation-2.png rename to docs/developer-guide/img/components-toolbar-animation-2.png diff --git a/docs/developer-guide/img/developer-guide/components-toolbar-animation-3.png b/docs/developer-guide/img/components-toolbar-animation-3.png similarity index 100% rename from docs/developer-guide/img/developer-guide/components-toolbar-animation-3.png rename to docs/developer-guide/img/components-toolbar-animation-3.png diff --git a/docs/developer-guide/img/developer-guide/components-toolbar-overflow-menu.png b/docs/developer-guide/img/components-toolbar-overflow-menu.png similarity index 100% rename from docs/developer-guide/img/developer-guide/components-toolbar-overflow-menu.png rename to docs/developer-guide/img/components-toolbar-overflow-menu.png diff --git a/docs/developer-guide/img/developer-guide/components-toolbar-search-ongoing.png b/docs/developer-guide/img/components-toolbar-search-ongoing.png similarity index 100% rename from docs/developer-guide/img/developer-guide/components-toolbar-search-ongoing.png rename to docs/developer-guide/img/components-toolbar-search-ongoing.png diff --git a/docs/developer-guide/img/developer-guide/components-toolbar-search.png b/docs/developer-guide/img/components-toolbar-search.png similarity index 100% rename from docs/developer-guide/img/developer-guide/components-toolbar-search.png rename to docs/developer-guide/img/components-toolbar-search.png diff --git a/docs/developer-guide/img/developer-guide/components-toolbar-sidemenu.png b/docs/developer-guide/img/components-toolbar-sidemenu.png similarity index 100% rename from docs/developer-guide/img/developer-guide/components-toolbar-sidemenu.png rename to docs/developer-guide/img/components-toolbar-sidemenu.png diff --git a/docs/developer-guide/img/developer-guide/components-toolbar.png b/docs/developer-guide/img/components-toolbar.png similarity index 100% rename from docs/developer-guide/img/developer-guide/components-toolbar.png rename to docs/developer-guide/img/components-toolbar.png diff --git a/docs/developer-guide/img/developer-guide/components-tree-xml.png b/docs/developer-guide/img/components-tree-xml.png similarity index 100% rename from docs/developer-guide/img/developer-guide/components-tree-xml.png rename to docs/developer-guide/img/components-tree-xml.png diff --git a/docs/developer-guide/img/developer-guide/contacts-list.png b/docs/developer-guide/img/contacts-list.png similarity index 100% rename from docs/developer-guide/img/developer-guide/contacts-list.png rename to docs/developer-guide/img/contacts-list.png diff --git a/docs/developer-guide/img/developer-guide/contacts-with-photos.png b/docs/developer-guide/img/contacts-with-photos.png similarity index 100% rename from docs/developer-guide/img/developer-guide/contacts-with-photos.png rename to docs/developer-guide/img/contacts-with-photos.png diff --git a/docs/developer-guide/img/developer-guide/control-center-builds-empty.png b/docs/developer-guide/img/control-center-builds-empty.png similarity index 100% rename from docs/developer-guide/img/developer-guide/control-center-builds-empty.png rename to docs/developer-guide/img/control-center-builds-empty.png diff --git a/docs/developer-guide/img/developer-guide/control-center-main.png b/docs/developer-guide/img/control-center-main.png similarity index 100% rename from docs/developer-guide/img/developer-guide/control-center-main.png rename to docs/developer-guide/img/control-center-main.png diff --git a/docs/developer-guide/img/developer-guide/coordinate_system.png b/docs/developer-guide/img/coordinate_system.png similarity index 100% rename from docs/developer-guide/img/developer-guide/coordinate_system.png rename to docs/developer-guide/img/coordinate_system.png diff --git a/docs/developer-guide/img/cover.png b/docs/developer-guide/img/cover.png deleted file mode 100644 index d1d75f368b..0000000000 Binary files a/docs/developer-guide/img/cover.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/css-in-codenameone-settings-1.png b/docs/developer-guide/img/css-in-codenameone-settings-1.png similarity index 100% rename from docs/developer-guide/img/developer-guide/css-in-codenameone-settings-1.png rename to docs/developer-guide/img/css-in-codenameone-settings-1.png diff --git a/docs/developer-guide/img/developer-guide/css-in-codenameone-settings-2.png b/docs/developer-guide/img/css-in-codenameone-settings-2.png similarity index 100% rename from docs/developer-guide/img/developer-guide/css-in-codenameone-settings-2.png rename to docs/developer-guide/img/css-in-codenameone-settings-2.png diff --git a/docs/developer-guide/img/developer-guide/css-nine-piece-border.png b/docs/developer-guide/img/css-nine-piece-border.png similarity index 100% rename from docs/developer-guide/img/developer-guide/css-nine-piece-border.png rename to docs/developer-guide/img/css-nine-piece-border.png diff --git a/docs/developer-guide/img/developer-guide/csv-parsing.png b/docs/developer-guide/img/csv-parsing.png similarity index 100% rename from docs/developer-guide/img/developer-guide/csv-parsing.png rename to docs/developer-guide/img/csv-parsing.png diff --git a/docs/developer-guide/img/developer-guide/debug-edt.png b/docs/developer-guide/img/debug-edt.png similarity index 100% rename from docs/developer-guide/img/developer-guide/debug-edt.png rename to docs/developer-guide/img/debug-edt.png diff --git a/docs/developer-guide/img/developer-guide/designer-native-theme-menu.png b/docs/developer-guide/img/designer-native-theme-menu.png similarity index 100% rename from docs/developer-guide/img/developer-guide/designer-native-theme-menu.png rename to docs/developer-guide/img/designer-native-theme-menu.png diff --git a/docs/developer-guide/img/developer-guide/9-piece-tool.png b/docs/developer-guide/img/developer-guide/9-piece-tool.png deleted file mode 100644 index 7ef1111975..0000000000 Binary files a/docs/developer-guide/img/developer-guide/9-piece-tool.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/add-style-dialog.png b/docs/developer-guide/img/developer-guide/add-style-dialog.png deleted file mode 100644 index 9cd66b3300..0000000000 Binary files a/docs/developer-guide/img/developer-guide/add-style-dialog.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/advanced-buildhints-eclipse.png b/docs/developer-guide/img/developer-guide/advanced-buildhints-eclipse.png deleted file mode 100644 index 2f5ae140ac..0000000000 Binary files a/docs/developer-guide/img/developer-guide/advanced-buildhints-eclipse.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/advanced-buildhints-intellij.png b/docs/developer-guide/img/developer-guide/advanced-buildhints-intellij.png deleted file mode 100644 index 5c873a190a..0000000000 Binary files a/docs/developer-guide/img/developer-guide/advanced-buildhints-intellij.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/advanced-buildhints-ios-settings.png b/docs/developer-guide/img/developer-guide/advanced-buildhints-ios-settings.png deleted file mode 100644 index 26a2c8c9db..0000000000 Binary files a/docs/developer-guide/img/developer-guide/advanced-buildhints-ios-settings.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/advanced-buildhints-netbeans.png b/docs/developer-guide/img/developer-guide/advanced-buildhints-netbeans.png deleted file mode 100644 index ebcf1d9d16..0000000000 Binary files a/docs/developer-guide/img/developer-guide/advanced-buildhints-netbeans.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/android-studio-preferences.png b/docs/developer-guide/img/developer-guide/android-studio-preferences.png deleted file mode 100644 index a5702d6525..0000000000 Binary files a/docs/developer-guide/img/developer-guide/android-studio-preferences.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/background006.jpg b/docs/developer-guide/img/developer-guide/background006.jpg deleted file mode 100644 index 33f06683e5..0000000000 Binary files a/docs/developer-guide/img/developer-guide/background006.jpg and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/badges-1.png b/docs/developer-guide/img/developer-guide/badges-1.png deleted file mode 100644 index 2e0a4a8bdc..0000000000 Binary files a/docs/developer-guide/img/developer-guide/badges-1.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/bg-bind-events.png b/docs/developer-guide/img/developer-guide/bg-bind-events.png deleted file mode 100644 index d6074d5629..0000000000 Binary files a/docs/developer-guide/img/developer-guide/bg-bind-events.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/border-tab-advanced.png b/docs/developer-guide/img/developer-guide/border-tab-advanced.png deleted file mode 100644 index 9d46743e1a..0000000000 Binary files a/docs/developer-guide/img/developer-guide/border-tab-advanced.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/border-tab.png b/docs/developer-guide/img/developer-guide/border-tab.png deleted file mode 100644 index e454b9fbc1..0000000000 Binary files a/docs/developer-guide/img/developer-guide/border-tab.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/border-wizard.png b/docs/developer-guide/img/developer-guide/border-wizard.png deleted file mode 100644 index c97b2f8df8..0000000000 Binary files a/docs/developer-guide/img/developer-guide/border-wizard.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/build-results-qr-code.png b/docs/developer-guide/img/developer-guide/build-results-qr-code.png deleted file mode 100644 index 00671825d1..0000000000 Binary files a/docs/developer-guide/img/developer-guide/build-results-qr-code.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/build_server_qr.png b/docs/developer-guide/img/developer-guide/build_server_qr.png deleted file mode 100644 index 0492f18e2d..0000000000 Binary files a/docs/developer-guide/img/developer-guide/build_server_qr.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/chat-app-tutorial-gcm-1.png b/docs/developer-guide/img/developer-guide/chat-app-tutorial-gcm-1.png deleted file mode 100644 index 988389d605..0000000000 Binary files a/docs/developer-guide/img/developer-guide/chat-app-tutorial-gcm-1.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/chat-app-tutorial-gcm-2.png b/docs/developer-guide/img/developer-guide/chat-app-tutorial-gcm-2.png deleted file mode 100644 index eb0456e79d..0000000000 Binary files a/docs/developer-guide/img/developer-guide/chat-app-tutorial-gcm-2.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/chat-app-tutorial-gcm-3.png b/docs/developer-guide/img/developer-guide/chat-app-tutorial-gcm-3.png deleted file mode 100644 index a5a5bfcfba..0000000000 Binary files a/docs/developer-guide/img/developer-guide/chat-app-tutorial-gcm-3.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/chat-app-tutorial-gcm-4.png b/docs/developer-guide/img/developer-guide/chat-app-tutorial-gcm-4.png deleted file mode 100644 index 1cd67579ef..0000000000 Binary files a/docs/developer-guide/img/developer-guide/chat-app-tutorial-gcm-4.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/chat-app-tutorial-gcm-5.png b/docs/developer-guide/img/developer-guide/chat-app-tutorial-gcm-5.png deleted file mode 100644 index d831d02303..0000000000 Binary files a/docs/developer-guide/img/developer-guide/chat-app-tutorial-gcm-5.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/chat-app-tutorial-google-login-1.png b/docs/developer-guide/img/developer-guide/chat-app-tutorial-google-login-1.png deleted file mode 100644 index bf5dcf5e27..0000000000 Binary files a/docs/developer-guide/img/developer-guide/chat-app-tutorial-google-login-1.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/chat-app-tutorial-google-login-10.png b/docs/developer-guide/img/developer-guide/chat-app-tutorial-google-login-10.png deleted file mode 100644 index 93164b01af..0000000000 Binary files a/docs/developer-guide/img/developer-guide/chat-app-tutorial-google-login-10.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/chat-app-tutorial-google-login-11.png b/docs/developer-guide/img/developer-guide/chat-app-tutorial-google-login-11.png deleted file mode 100644 index 50da25a6c0..0000000000 Binary files a/docs/developer-guide/img/developer-guide/chat-app-tutorial-google-login-11.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/chat-app-tutorial-google-login-2.png b/docs/developer-guide/img/developer-guide/chat-app-tutorial-google-login-2.png deleted file mode 100644 index 6da7a62c5b..0000000000 Binary files a/docs/developer-guide/img/developer-guide/chat-app-tutorial-google-login-2.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/chat-app-tutorial-google-login-3.png b/docs/developer-guide/img/developer-guide/chat-app-tutorial-google-login-3.png deleted file mode 100644 index b8f281437d..0000000000 Binary files a/docs/developer-guide/img/developer-guide/chat-app-tutorial-google-login-3.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/chat-app-tutorial-google-login-4.png b/docs/developer-guide/img/developer-guide/chat-app-tutorial-google-login-4.png deleted file mode 100644 index 6dc9afd6ae..0000000000 Binary files a/docs/developer-guide/img/developer-guide/chat-app-tutorial-google-login-4.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/chat-app-tutorial-google-login-5.png b/docs/developer-guide/img/developer-guide/chat-app-tutorial-google-login-5.png deleted file mode 100644 index a2dc3c6cdc..0000000000 Binary files a/docs/developer-guide/img/developer-guide/chat-app-tutorial-google-login-5.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/chat-app-tutorial-google-login-6.png b/docs/developer-guide/img/developer-guide/chat-app-tutorial-google-login-6.png deleted file mode 100644 index b41789acb1..0000000000 Binary files a/docs/developer-guide/img/developer-guide/chat-app-tutorial-google-login-6.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/chat-app-tutorial-google-login-7.png b/docs/developer-guide/img/developer-guide/chat-app-tutorial-google-login-7.png deleted file mode 100644 index d0e80c3dee..0000000000 Binary files a/docs/developer-guide/img/developer-guide/chat-app-tutorial-google-login-7.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/chat-app-tutorial-google-login-8.png b/docs/developer-guide/img/developer-guide/chat-app-tutorial-google-login-8.png deleted file mode 100644 index 44c8548d18..0000000000 Binary files a/docs/developer-guide/img/developer-guide/chat-app-tutorial-google-login-8.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/chat-app-tutorial-google-login-9.png b/docs/developer-guide/img/developer-guide/chat-app-tutorial-google-login-9.png deleted file mode 100644 index 8d0f0f09ab..0000000000 Binary files a/docs/developer-guide/img/developer-guide/chat-app-tutorial-google-login-9.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/cn1-toolchain.jpg b/docs/developer-guide/img/developer-guide/cn1-toolchain.jpg deleted file mode 100644 index 178b6f5375..0000000000 Binary files a/docs/developer-guide/img/developer-guide/cn1-toolchain.jpg and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/cn1-toolchain.png b/docs/developer-guide/img/developer-guide/cn1-toolchain.png deleted file mode 100644 index 6c6dda831d..0000000000 Binary files a/docs/developer-guide/img/developer-guide/cn1-toolchain.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/codenameone-add-image.png b/docs/developer-guide/img/developer-guide/codenameone-add-image.png deleted file mode 100644 index 6f96c274f8..0000000000 Binary files a/docs/developer-guide/img/developer-guide/codenameone-add-image.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/codenameone-add-theme-entry-button.png b/docs/developer-guide/img/developer-guide/codenameone-add-theme-entry-button.png deleted file mode 100644 index 0961e8d7e9..0000000000 Binary files a/docs/developer-guide/img/developer-guide/codenameone-add-theme-entry-button.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/codenameone-add-theme-entry-dialog-options-1.png b/docs/developer-guide/img/developer-guide/codenameone-add-theme-entry-dialog-options-1.png deleted file mode 100644 index 0af68fa42f..0000000000 Binary files a/docs/developer-guide/img/developer-guide/codenameone-add-theme-entry-dialog-options-1.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/codenameone-add-theme-entry-dialog-options-2.png b/docs/developer-guide/img/developer-guide/codenameone-add-theme-entry-dialog-options-2.png deleted file mode 100644 index 8576095301..0000000000 Binary files a/docs/developer-guide/img/developer-guide/codenameone-add-theme-entry-dialog-options-2.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/codenameone-add-theme-entry-dialog-options.png b/docs/developer-guide/img/developer-guide/codenameone-add-theme-entry-dialog-options.png deleted file mode 100644 index 4e6a1fadc6..0000000000 Binary files a/docs/developer-guide/img/developer-guide/codenameone-add-theme-entry-dialog-options.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/codenameone-add-theme-entry.png b/docs/developer-guide/img/developer-guide/codenameone-add-theme-entry.png deleted file mode 100644 index 872152f457..0000000000 Binary files a/docs/developer-guide/img/developer-guide/codenameone-add-theme-entry.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/codenameone-designer-feature-map.png b/docs/developer-guide/img/developer-guide/codenameone-designer-feature-map.png deleted file mode 100644 index 1e7dde22ff..0000000000 Binary files a/docs/developer-guide/img/developer-guide/codenameone-designer-feature-map.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/codenameone-hello-world-simulator.png b/docs/developer-guide/img/developer-guide/codenameone-hello-world-simulator.png deleted file mode 100644 index 1f28288533..0000000000 Binary files a/docs/developer-guide/img/developer-guide/codenameone-hello-world-simulator.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/codenameone-layout-managers.png b/docs/developer-guide/img/developer-guide/codenameone-layout-managers.png deleted file mode 100644 index 554a287278..0000000000 Binary files a/docs/developer-guide/img/developer-guide/codenameone-layout-managers.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/codenameone-new-app-wizard.png b/docs/developer-guide/img/developer-guide/codenameone-new-app-wizard.png deleted file mode 100644 index 7808456156..0000000000 Binary files a/docs/developer-guide/img/developer-guide/codenameone-new-app-wizard.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/codenameone-settings-home.png b/docs/developer-guide/img/developer-guide/codenameone-settings-home.png deleted file mode 100644 index b26ccf1096..0000000000 Binary files a/docs/developer-guide/img/developer-guide/codenameone-settings-home.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/colors-transparency.png b/docs/developer-guide/img/developer-guide/colors-transparency.png deleted file mode 100644 index 1ca4837f30..0000000000 Binary files a/docs/developer-guide/img/developer-guide/colors-transparency.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/component-hierarchy.png b/docs/developer-guide/img/developer-guide/component-hierarchy.png deleted file mode 100644 index 71166cb77e..0000000000 Binary files a/docs/developer-guide/img/developer-guide/component-hierarchy.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/components-signature1.png b/docs/developer-guide/img/developer-guide/components-signature1.png deleted file mode 100644 index 1b5b80a5f2..0000000000 Binary files a/docs/developer-guide/img/developer-guide/components-signature1.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/coordinate_system.gif b/docs/developer-guide/img/developer-guide/coordinate_system.gif deleted file mode 100644 index 0063579853..0000000000 Binary files a/docs/developer-guide/img/developer-guide/coordinate_system.gif and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/cover.png b/docs/developer-guide/img/developer-guide/cover.png deleted file mode 100644 index d1d75f368b..0000000000 Binary files a/docs/developer-guide/img/developer-guide/cover.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/create-theme.png b/docs/developer-guide/img/developer-guide/create-theme.png deleted file mode 100644 index 1b03ec9220..0000000000 Binary files a/docs/developer-guide/img/developer-guide/create-theme.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/css-in-codenameone-settings.jpg b/docs/developer-guide/img/developer-guide/css-in-codenameone-settings.jpg deleted file mode 100644 index aa8721f7eb..0000000000 Binary files a/docs/developer-guide/img/developer-guide/css-in-codenameone-settings.jpg and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/custom-theme-bg.png b/docs/developer-guide/img/developer-guide/custom-theme-bg.png deleted file mode 100644 index 1cf6f28266..0000000000 Binary files a/docs/developer-guide/img/developer-guide/custom-theme-bg.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/cut-image.png b/docs/developer-guide/img/developer-guide/cut-image.png deleted file mode 100644 index d9cfa9c6d9..0000000000 Binary files a/docs/developer-guide/img/developer-guide/cut-image.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/debug-network-conn.png b/docs/developer-guide/img/developer-guide/debug-network-conn.png deleted file mode 100644 index 313b85be72..0000000000 Binary files a/docs/developer-guide/img/developer-guide/debug-network-conn.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/deep-customizations.png b/docs/developer-guide/img/developer-guide/deep-customizations.png deleted file mode 100644 index bb4d74c75f..0000000000 Binary files a/docs/developer-guide/img/developer-guide/deep-customizations.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/derive-native-theme.png b/docs/developer-guide/img/developer-guide/derive-native-theme.png deleted file mode 100644 index cf10b30175..0000000000 Binary files a/docs/developer-guide/img/developer-guide/derive-native-theme.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/dlg-show.png b/docs/developer-guide/img/developer-guide/dlg-show.png deleted file mode 100644 index 532d43e91d..0000000000 Binary files a/docs/developer-guide/img/developer-guide/dlg-show.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/eclipse-add-repository.png b/docs/developer-guide/img/developer-guide/eclipse-add-repository.png deleted file mode 100644 index a41f7c2d06..0000000000 Binary files a/docs/developer-guide/img/developer-guide/eclipse-add-repository.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/eclipse-install-new-software.png b/docs/developer-guide/img/developer-guide/eclipse-install-new-software.png deleted file mode 100644 index 2fe07035ec..0000000000 Binary files a/docs/developer-guide/img/developer-guide/eclipse-install-new-software.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/eclipse-install-wizard-1.png b/docs/developer-guide/img/developer-guide/eclipse-install-wizard-1.png deleted file mode 100644 index 0ed7380fa2..0000000000 Binary files a/docs/developer-guide/img/developer-guide/eclipse-install-wizard-1.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/eclipse-install.png b/docs/developer-guide/img/developer-guide/eclipse-install.png deleted file mode 100644 index fd96a01703..0000000000 Binary files a/docs/developer-guide/img/developer-guide/eclipse-install.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/explode-transition.png b/docs/developer-guide/img/developer-guide/explode-transition.png deleted file mode 100644 index b23c703d4d..0000000000 Binary files a/docs/developer-guide/img/developer-guide/explode-transition.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/facebook-app-form.png b/docs/developer-guide/img/developer-guide/facebook-app-form.png deleted file mode 100644 index e198ce79e0..0000000000 Binary files a/docs/developer-guide/img/developer-guide/facebook-app-form.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/facebook-support.png b/docs/developer-guide/img/developer-guide/facebook-support.png deleted file mode 100644 index 12c46c35e3..0000000000 Binary files a/docs/developer-guide/img/developer-guide/facebook-support.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/facebook_settings.png b/docs/developer-guide/img/developer-guide/facebook_settings.png deleted file mode 100644 index 02f482c2ac..0000000000 Binary files a/docs/developer-guide/img/developer-guide/facebook_settings.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/flip.png b/docs/developer-guide/img/developer-guide/flip.png deleted file mode 100644 index 5276744f8a..0000000000 Binary files a/docs/developer-guide/img/developer-guide/flip.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/font-dlg.png b/docs/developer-guide/img/developer-guide/font-dlg.png deleted file mode 100644 index 27efa80c60..0000000000 Binary files a/docs/developer-guide/img/developer-guide/font-dlg.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/form-layout-graphic.png b/docs/developer-guide/img/developer-guide/form-layout-graphic.png deleted file mode 100644 index c3f6378c85..0000000000 Binary files a/docs/developer-guide/img/developer-guide/form-layout-graphic.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/gb-action-listener-generated.png b/docs/developer-guide/img/developer-guide/gb-action-listener-generated.png deleted file mode 100644 index 97e4328a3e..0000000000 Binary files a/docs/developer-guide/img/developer-guide/gb-action-listener-generated.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/gb-native-themes.png b/docs/developer-guide/img/developer-guide/gb-native-themes.png deleted file mode 100644 index b1b8cf85f9..0000000000 Binary files a/docs/developer-guide/img/developer-guide/gb-native-themes.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/generate-certificate-android.png b/docs/developer-guide/img/developer-guide/generate-certificate-android.png deleted file mode 100644 index 7919921994..0000000000 Binary files a/docs/developer-guide/img/developer-guide/generate-certificate-android.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/get-started-theme-alignment.png b/docs/developer-guide/img/developer-guide/get-started-theme-alignment.png deleted file mode 100644 index e7f2aea63c..0000000000 Binary files a/docs/developer-guide/img/developer-guide/get-started-theme-alignment.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/get-started-theme-color.png b/docs/developer-guide/img/developer-guide/get-started-theme-color.png deleted file mode 100644 index 7985f9ab9b..0000000000 Binary files a/docs/developer-guide/img/developer-guide/get-started-theme-color.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/get-started-theme-font.png b/docs/developer-guide/img/developer-guide/get-started-theme-font.png deleted file mode 100644 index 0b2a938d33..0000000000 Binary files a/docs/developer-guide/img/developer-guide/get-started-theme-font.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/get-started-theme-padding.png b/docs/developer-guide/img/developer-guide/get-started-theme-padding.png deleted file mode 100644 index 405346b807..0000000000 Binary files a/docs/developer-guide/img/developer-guide/get-started-theme-padding.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/getting-started-project-settings.png b/docs/developer-guide/img/developer-guide/getting-started-project-settings.png deleted file mode 100644 index a9fd94a9b4..0000000000 Binary files a/docs/developer-guide/img/developer-guide/getting-started-project-settings.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/google-sign-in-google-cloud-platform-api-select-app.png.png b/docs/developer-guide/img/developer-guide/google-sign-in-google-cloud-platform-api-select-app.png.png deleted file mode 100644 index 1ff61f78fc..0000000000 Binary files a/docs/developer-guide/img/developer-guide/google-sign-in-google-cloud-platform-api-select-app.png.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/google-sign-in-google-cloud-platform-client-id-for-web-application.png b/docs/developer-guide/img/developer-guide/google-sign-in-google-cloud-platform-client-id-for-web-application.png deleted file mode 100644 index 2680209b0f..0000000000 Binary files a/docs/developer-guide/img/developer-guide/google-sign-in-google-cloud-platform-client-id-for-web-application.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/google_settings.png b/docs/developer-guide/img/developer-guide/google_settings.png deleted file mode 100644 index f43b2c4e85..0000000000 Binary files a/docs/developer-guide/img/developer-guide/google_settings.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/gradient-linear-vertical.png b/docs/developer-guide/img/developer-guide/gradient-linear-vertical.png deleted file mode 100644 index fbceae2077..0000000000 Binary files a/docs/developer-guide/img/developer-guide/gradient-linear-vertical.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/graphics-shape-fill.png b/docs/developer-guide/img/developer-guide/graphics-shape-fill.png deleted file mode 100644 index 911ab79609..0000000000 Binary files a/docs/developer-guide/img/developer-guide/graphics-shape-fill.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/grid-layout.png b/docs/developer-guide/img/developer-guide/grid-layout.png deleted file mode 100644 index 8d01a84679..0000000000 Binary files a/docs/developer-guide/img/developer-guide/grid-layout.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/gui-builder-drag-button-1.png b/docs/developer-guide/img/developer-guide/gui-builder-drag-button-1.png deleted file mode 100644 index ca9fbdebd2..0000000000 Binary files a/docs/developer-guide/img/developer-guide/gui-builder-drag-button-1.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/gui-builder-enclose-option.png b/docs/developer-guide/img/developer-guide/gui-builder-enclose-option.png deleted file mode 100644 index 336903067e..0000000000 Binary files a/docs/developer-guide/img/developer-guide/gui-builder-enclose-option.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/gui-builder-hello.png b/docs/developer-guide/img/developer-guide/gui-builder-hello.png deleted file mode 100644 index a0df87cf70..0000000000 Binary files a/docs/developer-guide/img/developer-guide/gui-builder-hello.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/gui-builder-image-dialog.png b/docs/developer-guide/img/developer-guide/gui-builder-image-dialog.png deleted file mode 100644 index 737b1407be..0000000000 Binary files a/docs/developer-guide/img/developer-guide/gui-builder-image-dialog.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/gui-builder-layouts-constraints-border.png b/docs/developer-guide/img/developer-guide/gui-builder-layouts-constraints-border.png deleted file mode 100644 index e54ae53ede..0000000000 Binary files a/docs/developer-guide/img/developer-guide/gui-builder-layouts-constraints-border.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/gui-builder-layouts-settings-flowlayout.png b/docs/developer-guide/img/developer-guide/gui-builder-layouts-settings-flowlayout.png deleted file mode 100644 index b1110b220c..0000000000 Binary files a/docs/developer-guide/img/developer-guide/gui-builder-layouts-settings-flowlayout.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/gui-builder-layouts.png b/docs/developer-guide/img/developer-guide/gui-builder-layouts.png deleted file mode 100644 index e25195d6f1..0000000000 Binary files a/docs/developer-guide/img/developer-guide/gui-builder-layouts.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/gui-builder-main-toolbar.png b/docs/developer-guide/img/developer-guide/gui-builder-main-toolbar.png deleted file mode 100644 index 4a940b73da..0000000000 Binary files a/docs/developer-guide/img/developer-guide/gui-builder-main-toolbar.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/gui-builder-multi-select-off.png b/docs/developer-guide/img/developer-guide/gui-builder-multi-select-off.png deleted file mode 100644 index c8380f96ff..0000000000 Binary files a/docs/developer-guide/img/developer-guide/gui-builder-multi-select-off.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/gui-builder-properties.png b/docs/developer-guide/img/developer-guide/gui-builder-properties.png deleted file mode 100644 index 08a9f69ee0..0000000000 Binary files a/docs/developer-guide/img/developer-guide/gui-builder-properties.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/gui-builder-sidebar.png b/docs/developer-guide/img/developer-guide/gui-builder-sidebar.png deleted file mode 100644 index 28365a9eb7..0000000000 Binary files a/docs/developer-guide/img/developer-guide/gui-builder-sidebar.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/guibuilder-2-designer-selected-cmp.png b/docs/developer-guide/img/developer-guide/guibuilder-2-designer-selected-cmp.png deleted file mode 100644 index 2191e32481..0000000000 Binary files a/docs/developer-guide/img/developer-guide/guibuilder-2-designer-selected-cmp.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/guibuilder-2-header.jpg b/docs/developer-guide/img/developer-guide/guibuilder-2-header.jpg deleted file mode 100644 index 43d7292b5c..0000000000 Binary files a/docs/developer-guide/img/developer-guide/guibuilder-2-header.jpg and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/guibuilder-2-link-button-hover.png b/docs/developer-guide/img/developer-guide/guibuilder-2-link-button-hover.png deleted file mode 100644 index 457807beb9..0000000000 Binary files a/docs/developer-guide/img/developer-guide/guibuilder-2-link-button-hover.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/guibuilder-2-link-button-selected.png b/docs/developer-guide/img/developer-guide/guibuilder-2-link-button-selected.png deleted file mode 100644 index 6a4ede086f..0000000000 Binary files a/docs/developer-guide/img/developer-guide/guibuilder-2-link-button-selected.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/guibuilder-2-screenshot.png b/docs/developer-guide/img/developer-guide/guibuilder-2-screenshot.png deleted file mode 100644 index 8a15244dc6..0000000000 Binary files a/docs/developer-guide/img/developer-guide/guibuilder-2-screenshot.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/hello-world-default-blue-theme.png b/docs/developer-guide/img/developer-guide/hello-world-default-blue-theme.png deleted file mode 100644 index b7d7461c0e..0000000000 Binary files a/docs/developer-guide/img/developer-guide/hello-world-default-blue-theme.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/hello-world-getting-started-hierarchy.png b/docs/developer-guide/img/developer-guide/hello-world-getting-started-hierarchy.png deleted file mode 100644 index 85b0dd0d07..0000000000 Binary files a/docs/developer-guide/img/developer-guide/hello-world-getting-started-hierarchy.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/iap3-new-data-source.png b/docs/developer-guide/img/developer-guide/iap3-new-data-source.png deleted file mode 100644 index a088f10fe8..0000000000 Binary files a/docs/developer-guide/img/developer-guide/iap3-new-data-source.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/icon250.png b/docs/developer-guide/img/developer-guide/icon250.png deleted file mode 100644 index 53dea8158c..0000000000 Binary files a/docs/developer-guide/img/developer-guide/icon250.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/in-app-purchase.jpg b/docs/developer-guide/img/developer-guide/in-app-purchase.jpg deleted file mode 100644 index b8661478c5..0000000000 Binary files a/docs/developer-guide/img/developer-guide/in-app-purchase.jpg and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/infinite-scroll.png b/docs/developer-guide/img/developer-guide/infinite-scroll.png deleted file mode 100644 index 032a70c06d..0000000000 Binary files a/docs/developer-guide/img/developer-guide/infinite-scroll.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/intellij-install.png b/docs/developer-guide/img/developer-guide/intellij-install.png deleted file mode 100644 index 635dd3f59b..0000000000 Binary files a/docs/developer-guide/img/developer-guide/intellij-install.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/ios-cert-wizard-blog-post-header.png b/docs/developer-guide/img/developer-guide/ios-cert-wizard-blog-post-header.png deleted file mode 100644 index c3878067aa..0000000000 Binary files a/docs/developer-guide/img/developer-guide/ios-cert-wizard-blog-post-header.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/ios-certificate-wizard.png b/docs/developer-guide/img/developer-guide/ios-certificate-wizard.png deleted file mode 100644 index 38c04f8fbd..0000000000 Binary files a/docs/developer-guide/img/developer-guide/ios-certificate-wizard.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/l10nform.png b/docs/developer-guide/img/developer-guide/l10nform.png deleted file mode 100644 index 2bdf1f3293..0000000000 Binary files a/docs/developer-guide/img/developer-guide/l10nform.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/libraries-dialog.png b/docs/developer-guide/img/developer-guide/libraries-dialog.png deleted file mode 100644 index c5bd4e8cf2..0000000000 Binary files a/docs/developer-guide/img/developer-guide/libraries-dialog.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/libraries-run-tab.png b/docs/developer-guide/img/developer-guide/libraries-run-tab.png deleted file mode 100644 index c9bc88edcb..0000000000 Binary files a/docs/developer-guide/img/developer-guide/libraries-run-tab.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/line_chart_trig_funcs.png b/docs/developer-guide/img/developer-guide/line_chart_trig_funcs.png deleted file mode 100644 index 8426cf9e7b..0000000000 Binary files a/docs/developer-guide/img/developer-guide/line_chart_trig_funcs.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/multi-button.png b/docs/developer-guide/img/developer-guide/multi-button.png deleted file mode 100644 index f52efa06d8..0000000000 Binary files a/docs/developer-guide/img/developer-guide/multi-button.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/nb-add-cn1-repo.png b/docs/developer-guide/img/developer-guide/nb-add-cn1-repo.png deleted file mode 100644 index c55e4a8bc3..0000000000 Binary files a/docs/developer-guide/img/developer-guide/nb-add-cn1-repo.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/nb-default-project-structure.png b/docs/developer-guide/img/developer-guide/nb-default-project-structure.png deleted file mode 100644 index 407b5620d0..0000000000 Binary files a/docs/developer-guide/img/developer-guide/nb-default-project-structure.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/nb-new-project-dialog-step-2.png b/docs/developer-guide/img/developer-guide/nb-new-project-dialog-step-2.png deleted file mode 100644 index f6f56dfafc..0000000000 Binary files a/docs/developer-guide/img/developer-guide/nb-new-project-dialog-step-2.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/nb-new-project-dialog.png b/docs/developer-guide/img/developer-guide/nb-new-project-dialog.png deleted file mode 100644 index 1133f21411..0000000000 Binary files a/docs/developer-guide/img/developer-guide/nb-new-project-dialog.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/nb-new-project.png b/docs/developer-guide/img/developer-guide/nb-new-project.png deleted file mode 100644 index b2a658a5ed..0000000000 Binary files a/docs/developer-guide/img/developer-guide/nb-new-project.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/nb-plugin-install-wizard-2.png b/docs/developer-guide/img/developer-guide/nb-plugin-install-wizard-2.png deleted file mode 100644 index fcd6f1c11b..0000000000 Binary files a/docs/developer-guide/img/developer-guide/nb-plugin-install-wizard-2.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/nb-plugin-install-wizard.png b/docs/developer-guide/img/developer-guide/nb-plugin-install-wizard.png deleted file mode 100644 index fa8a9cf5fd..0000000000 Binary files a/docs/developer-guide/img/developer-guide/nb-plugin-install-wizard.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/nb-proper-package-name.png b/docs/developer-guide/img/developer-guide/nb-proper-package-name.png deleted file mode 100644 index 8481a01271..0000000000 Binary files a/docs/developer-guide/img/developer-guide/nb-proper-package-name.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/nb-tools-plugins.png b/docs/developer-guide/img/developer-guide/nb-tools-plugins.png deleted file mode 100644 index dd0ce23cde..0000000000 Binary files a/docs/developer-guide/img/developer-guide/nb-tools-plugins.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/netbeans-install.png b/docs/developer-guide/img/developer-guide/netbeans-install.png deleted file mode 100644 index 1bbba7e841..0000000000 Binary files a/docs/developer-guide/img/developer-guide/netbeans-install.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/new-gui-builder-file-name.png b/docs/developer-guide/img/developer-guide/new-gui-builder-file-name.png deleted file mode 100644 index 45e9ea4205..0000000000 Binary files a/docs/developer-guide/img/developer-guide/new-gui-builder-file-name.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/new-gui-builder-file-type.png b/docs/developer-guide/img/developer-guide/new-gui-builder-file-type.png deleted file mode 100644 index cf47450e64..0000000000 Binary files a/docs/developer-guide/img/developer-guide/new-gui-builder-file-type.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/new-gui-builder-initial-view.png b/docs/developer-guide/img/developer-guide/new-gui-builder-initial-view.png deleted file mode 100644 index 12e4f76f98..0000000000 Binary files a/docs/developer-guide/img/developer-guide/new-gui-builder-initial-view.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/new-gui-builder-new-file.png b/docs/developer-guide/img/developer-guide/new-gui-builder-new-file.png deleted file mode 100644 index c64767080c..0000000000 Binary files a/docs/developer-guide/img/developer-guide/new-gui-builder-new-file.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/new-gui-builder-sample.png b/docs/developer-guide/img/developer-guide/new-gui-builder-sample.png deleted file mode 100644 index 6a305c7c97..0000000000 Binary files a/docs/developer-guide/img/developer-guide/new-gui-builder-sample.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/new-gui-builder-search-component-palette.png b/docs/developer-guide/img/developer-guide/new-gui-builder-search-component-palette.png deleted file mode 100644 index c3d77a0c8e..0000000000 Binary files a/docs/developer-guide/img/developer-guide/new-gui-builder-search-component-palette.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/new-gui-builder-sidebar.png b/docs/developer-guide/img/developer-guide/new-gui-builder-sidebar.png deleted file mode 100644 index 0516160dc6..0000000000 Binary files a/docs/developer-guide/img/developer-guide/new-gui-builder-sidebar.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/new-gui-builder-toolbar.png b/docs/developer-guide/img/developer-guide/new-gui-builder-toolbar.png deleted file mode 100644 index b710f11ac3..0000000000 Binary files a/docs/developer-guide/img/developer-guide/new-gui-builder-toolbar.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/new-hello-world-app.png b/docs/developer-guide/img/developer-guide/new-hello-world-app.png deleted file mode 100644 index 217ec79cd6..0000000000 Binary files a/docs/developer-guide/img/developer-guide/new-hello-world-app.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/new-theme-dialog.png b/docs/developer-guide/img/developer-guide/new-theme-dialog.png deleted file mode 100644 index 3a2fa21c75..0000000000 Binary files a/docs/developer-guide/img/developer-guide/new-theme-dialog.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/newsettings-ui.png b/docs/developer-guide/img/developer-guide/newsettings-ui.png deleted file mode 100644 index 1c6e762c49..0000000000 Binary files a/docs/developer-guide/img/developer-guide/newsettings-ui.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/not-a-dialog-again-1.png b/docs/developer-guide/img/developer-guide/not-a-dialog-again-1.png deleted file mode 100644 index 3c65a86c6b..0000000000 Binary files a/docs/developer-guide/img/developer-guide/not-a-dialog-again-1.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/offline-build-targets.png b/docs/developer-guide/img/developer-guide/offline-build-targets.png deleted file mode 100644 index b4cc346dc7..0000000000 Binary files a/docs/developer-guide/img/developer-guide/offline-build-targets.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/offline-builds-section.png b/docs/developer-guide/img/developer-guide/offline-builds-section.png deleted file mode 100644 index e9bf22bf89..0000000000 Binary files a/docs/developer-guide/img/developer-guide/offline-builds-section.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/offline-builds-settings.png b/docs/developer-guide/img/developer-guide/offline-builds-settings.png deleted file mode 100644 index 7661ad460f..0000000000 Binary files a/docs/developer-guide/img/developer-guide/offline-builds-settings.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/offline-gradle-config.png b/docs/developer-guide/img/developer-guide/offline-gradle-config.png deleted file mode 100644 index 96ad3655a3..0000000000 Binary files a/docs/developer-guide/img/developer-guide/offline-gradle-config.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/old-gui-builder-sample.png b/docs/developer-guide/img/developer-guide/old-gui-builder-sample.png deleted file mode 100644 index 089cf4cdd0..0000000000 Binary files a/docs/developer-guide/img/developer-guide/old-gui-builder-sample.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/override-for-ios.png b/docs/developer-guide/img/developer-guide/override-for-ios.png deleted file mode 100644 index a45a726e5e..0000000000 Binary files a/docs/developer-guide/img/developer-guide/override-for-ios.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/override-style-derive.png b/docs/developer-guide/img/developer-guide/override-style-derive.png deleted file mode 100644 index 080e8c2839..0000000000 Binary files a/docs/developer-guide/img/developer-guide/override-style-derive.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/override-style.png b/docs/developer-guide/img/developer-guide/override-style.png deleted file mode 100644 index bf7e742b8f..0000000000 Binary files a/docs/developer-guide/img/developer-guide/override-style.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/padding-tab.png b/docs/developer-guide/img/developer-guide/padding-tab.png deleted file mode 100644 index e60fa571bd..0000000000 Binary files a/docs/developer-guide/img/developer-guide/padding-tab.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/phones.png b/docs/developer-guide/img/developer-guide/phones.png deleted file mode 100644 index 4a22e8b445..0000000000 Binary files a/docs/developer-guide/img/developer-guide/phones.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/push-error.png b/docs/developer-guide/img/developer-guide/push-error.png deleted file mode 100644 index ac40e83b2d..0000000000 Binary files a/docs/developer-guide/img/developer-guide/push-error.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/push-notifications-graphic.png b/docs/developer-guide/img/developer-guide/push-notifications-graphic.png deleted file mode 100644 index 280fc91cb4..0000000000 Binary files a/docs/developer-guide/img/developer-guide/push-notifications-graphic.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/push-type-101-hello-world-simulator-paused.png b/docs/developer-guide/img/developer-guide/push-type-101-hello-world-simulator-paused.png deleted file mode 100644 index 4162102167..0000000000 Binary files a/docs/developer-guide/img/developer-guide/push-type-101-hello-world-simulator-paused.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/select-style-mode.png b/docs/developer-guide/img/developer-guide/select-style-mode.png deleted file mode 100644 index 3c39650d3d..0000000000 Binary files a/docs/developer-guide/img/developer-guide/select-style-mode.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/send-build-menu.png b/docs/developer-guide/img/developer-guide/send-build-menu.png deleted file mode 100644 index 5fc03de9bb..0000000000 Binary files a/docs/developer-guide/img/developer-guide/send-build-menu.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/share-btn.png b/docs/developer-guide/img/developer-guide/share-btn.png deleted file mode 100644 index 3543110804..0000000000 Binary files a/docs/developer-guide/img/developer-guide/share-btn.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/side-swipe-1.png b/docs/developer-guide/img/developer-guide/side-swipe-1.png deleted file mode 100644 index cc1ae32b5a..0000000000 Binary files a/docs/developer-guide/img/developer-guide/side-swipe-1.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/spinner.png b/docs/developer-guide/img/developer-guide/spinner.png deleted file mode 100644 index 67d4099e03..0000000000 Binary files a/docs/developer-guide/img/developer-guide/spinner.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/splitpane-1.png b/docs/developer-guide/img/developer-guide/splitpane-1.png deleted file mode 100644 index fc9cceba60..0000000000 Binary files a/docs/developer-guide/img/developer-guide/splitpane-1.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/splitpane-collapsed.png b/docs/developer-guide/img/developer-guide/splitpane-collapsed.png deleted file mode 100644 index 8672a1f21c..0000000000 Binary files a/docs/developer-guide/img/developer-guide/splitpane-collapsed.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/splitpane-expanded.png b/docs/developer-guide/img/developer-guide/splitpane-expanded.png deleted file mode 100644 index 2044e2d6a7..0000000000 Binary files a/docs/developer-guide/img/developer-guide/splitpane-expanded.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/styled-sidemenu-12.png b/docs/developer-guide/img/developer-guide/styled-sidemenu-12.png deleted file mode 100644 index 3ff19839cf..0000000000 Binary files a/docs/developer-guide/img/developer-guide/styled-sidemenu-12.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/switch-list-flowlayout.png b/docs/developer-guide/img/developer-guide/switch-list-flowlayout.png deleted file mode 100644 index 452de83ab5..0000000000 Binary files a/docs/developer-guide/img/developer-guide/switch-list-flowlayout.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/switchlist-boxlayout-y.png b/docs/developer-guide/img/developer-guide/switchlist-boxlayout-y.png deleted file mode 100644 index 4da56abe26..0000000000 Binary files a/docs/developer-guide/img/developer-guide/switchlist-boxlayout-y.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/switchlist-gridlayout-2col.png b/docs/developer-guide/img/developer-guide/switchlist-gridlayout-2col.png deleted file mode 100644 index c176a9ee01..0000000000 Binary files a/docs/developer-guide/img/developer-guide/switchlist-gridlayout-2col.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/switchlist-tablelayout-2col.png b/docs/developer-guide/img/developer-guide/switchlist-tablelayout-2col.png deleted file mode 100644 index d1409aee72..0000000000 Binary files a/docs/developer-guide/img/developer-guide/switchlist-tablelayout-2col.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/switchlist-tablelayout-3col.png b/docs/developer-guide/img/developer-guide/switchlist-tablelayout-3col.png deleted file mode 100644 index 961e6cd8b9..0000000000 Binary files a/docs/developer-guide/img/developer-guide/switchlist-tablelayout-3col.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/table-layout.png b/docs/developer-guide/img/developer-guide/table-layout.png deleted file mode 100644 index 4c825eacba..0000000000 Binary files a/docs/developer-guide/img/developer-guide/table-layout.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/theme-get-started-uiid.png b/docs/developer-guide/img/developer-guide/theme-get-started-uiid.png deleted file mode 100644 index 0e95fbaf8d..0000000000 Binary files a/docs/developer-guide/img/developer-guide/theme-get-started-uiid.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/toggle-button.png b/docs/developer-guide/img/developer-guide/toggle-button.png deleted file mode 100644 index e50a8a59a2..0000000000 Binary files a/docs/developer-guide/img/developer-guide/toggle-button.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/toolbar-1.png b/docs/developer-guide/img/developer-guide/toolbar-1.png deleted file mode 100644 index 4d1d1e01a0..0000000000 Binary files a/docs/developer-guide/img/developer-guide/toolbar-1.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/tools-plugins-install.png b/docs/developer-guide/img/developer-guide/tools-plugins-install.png deleted file mode 100644 index 86170797ab..0000000000 Binary files a/docs/developer-guide/img/developer-guide/tools-plugins-install.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/travis-build-status.png b/docs/developer-guide/img/developer-guide/travis-build-status.png deleted file mode 100644 index bd95a02636..0000000000 Binary files a/docs/developer-guide/img/developer-guide/travis-build-status.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/travis-ci-enable-form.png b/docs/developer-guide/img/developer-guide/travis-ci-enable-form.png deleted file mode 100644 index a1c8911fb1..0000000000 Binary files a/docs/developer-guide/img/developer-guide/travis-ci-enable-form.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/travis-ci-settings-button.png b/docs/developer-guide/img/developer-guide/travis-ci-settings-button.png deleted file mode 100644 index 8600c6939a..0000000000 Binary files a/docs/developer-guide/img/developer-guide/travis-ci-settings-button.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/travis-environment-vars.png b/docs/developer-guide/img/developer-guide/travis-environment-vars.png deleted file mode 100644 index f1c8fe364d..0000000000 Binary files a/docs/developer-guide/img/developer-guide/travis-environment-vars.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/travis-more-options-menu.png b/docs/developer-guide/img/developer-guide/travis-more-options-menu.png deleted file mode 100644 index eeccd5cbd5..0000000000 Binary files a/docs/developer-guide/img/developer-guide/travis-more-options-menu.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/travis-profile-button.png b/docs/developer-guide/img/developer-guide/travis-profile-button.png deleted file mode 100644 index 1f2fcbd010..0000000000 Binary files a/docs/developer-guide/img/developer-guide/travis-profile-button.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/travis-profile-form.png b/docs/developer-guide/img/developer-guide/travis-profile-form.png deleted file mode 100644 index 918ec8806d..0000000000 Binary files a/docs/developer-guide/img/developer-guide/travis-profile-form.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/travis-select-jobs.png b/docs/developer-guide/img/developer-guide/travis-select-jobs.png deleted file mode 100644 index bf6beb99a9..0000000000 Binary files a/docs/developer-guide/img/developer-guide/travis-select-jobs.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/update-project-settings.png b/docs/developer-guide/img/developer-guide/update-project-settings.png deleted file mode 100644 index e7a758f302..0000000000 Binary files a/docs/developer-guide/img/developer-guide/update-project-settings.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/uwp-cn1settings-main.png b/docs/developer-guide/img/developer-guide/uwp-cn1settings-main.png deleted file mode 100644 index 3e2e61627e..0000000000 Binary files a/docs/developer-guide/img/developer-guide/uwp-cn1settings-main.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/uwp-cn1settings-uwp-custom.png b/docs/developer-guide/img/developer-guide/uwp-cn1settings-uwp-custom.png deleted file mode 100644 index ffbd4320cf..0000000000 Binary files a/docs/developer-guide/img/developer-guide/uwp-cn1settings-uwp-custom.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/uwp-cn1settings-windows-store-upload.png b/docs/developer-guide/img/developer-guide/uwp-cn1settings-windows-store-upload.png deleted file mode 100644 index 708cc90ccf..0000000000 Binary files a/docs/developer-guide/img/developer-guide/uwp-cn1settings-windows-store-upload.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/uwp-mobile-settings-deviceportal-off.png b/docs/developer-guide/img/developer-guide/uwp-mobile-settings-deviceportal-off.png deleted file mode 100644 index 098321ffeb..0000000000 Binary files a/docs/developer-guide/img/developer-guide/uwp-mobile-settings-deviceportal-off.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/uwp-mobile-settings-pair-device.png b/docs/developer-guide/img/developer-guide/uwp-mobile-settings-pair-device.png deleted file mode 100644 index 0664e5780f..0000000000 Binary files a/docs/developer-guide/img/developer-guide/uwp-mobile-settings-pair-device.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/uwp-mobile-settings.png b/docs/developer-guide/img/developer-guide/uwp-mobile-settings.png deleted file mode 100644 index 05895ee030..0000000000 Binary files a/docs/developer-guide/img/developer-guide/uwp-mobile-settings.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/vserve.png b/docs/developer-guide/img/developer-guide/vserve.png deleted file mode 100644 index 54dd48114a..0000000000 Binary files a/docs/developer-guide/img/developer-guide/vserve.png and /dev/null differ diff --git a/docs/developer-guide/img/developer-guide/dial_chart.png b/docs/developer-guide/img/dial_chart.png similarity index 100% rename from docs/developer-guide/img/developer-guide/dial_chart.png rename to docs/developer-guide/img/dial_chart.png diff --git a/docs/developer-guide/img/developer-guide/doughnut_chart.png b/docs/developer-guide/img/doughnut_chart.png similarity index 100% rename from docs/developer-guide/img/developer-guide/doughnut_chart.png rename to docs/developer-guide/img/doughnut_chart.png diff --git a/docs/developer-guide/img/developer-guide/download-dev-provisioning-profile.png b/docs/developer-guide/img/download-dev-provisioning-profile.png similarity index 100% rename from docs/developer-guide/img/developer-guide/download-dev-provisioning-profile.png rename to docs/developer-guide/img/download-dev-provisioning-profile.png diff --git a/docs/developer-guide/img/developer-guide/download-dist-provisioning-profile.png b/docs/developer-guide/img/download-dist-provisioning-profile.png similarity index 100% rename from docs/developer-guide/img/developer-guide/download-dist-provisioning-profile.png rename to docs/developer-guide/img/download-dist-provisioning-profile.png diff --git a/docs/developer-guide/img/developer-guide/dpi.png b/docs/developer-guide/img/dpi.png similarity index 100% rename from docs/developer-guide/img/developer-guide/dpi.png rename to docs/developer-guide/img/dpi.png diff --git a/docs/developer-guide/img/developer-guide/draganddrop-rearrange-game.png b/docs/developer-guide/img/draganddrop-rearrange-game.png similarity index 100% rename from docs/developer-guide/img/developer-guide/draganddrop-rearrange-game.png rename to docs/developer-guide/img/draganddrop-rearrange-game.png diff --git a/docs/developer-guide/img/developer-guide/dynamic-autocomplete.png b/docs/developer-guide/img/dynamic-autocomplete.png similarity index 100% rename from docs/developer-guide/img/developer-guide/dynamic-autocomplete.png rename to docs/developer-guide/img/dynamic-autocomplete.png diff --git a/docs/developer-guide/img/developer-guide/eclipse-gui-builder-step-1.png b/docs/developer-guide/img/eclipse-gui-builder-step-1.png similarity index 100% rename from docs/developer-guide/img/developer-guide/eclipse-gui-builder-step-1.png rename to docs/developer-guide/img/eclipse-gui-builder-step-1.png diff --git a/docs/developer-guide/img/developer-guide/eclipse-gui-builder-step-2.png b/docs/developer-guide/img/eclipse-gui-builder-step-2.png similarity index 100% rename from docs/developer-guide/img/developer-guide/eclipse-gui-builder-step-2.png rename to docs/developer-guide/img/eclipse-gui-builder-step-2.png diff --git a/docs/developer-guide/img/developer-guide/eclipse-gui-builder-step-3.png b/docs/developer-guide/img/eclipse-gui-builder-step-3.png similarity index 100% rename from docs/developer-guide/img/developer-guide/eclipse-gui-builder-step-3.png rename to docs/developer-guide/img/eclipse-gui-builder-step-3.png diff --git a/docs/developer-guide/img/developer-guide/eclipse-gui-builder-step-4.png b/docs/developer-guide/img/eclipse-gui-builder-step-4.png similarity index 100% rename from docs/developer-guide/img/developer-guide/eclipse-gui-builder-step-4.png rename to docs/developer-guide/img/eclipse-gui-builder-step-4.png diff --git a/docs/developer-guide/img/developer-guide/eef6d078-61f6-11e5-91cd-2e1836916359.png b/docs/developer-guide/img/eef6d078-61f6-11e5-91cd-2e1836916359.png similarity index 100% rename from docs/developer-guide/img/developer-guide/eef6d078-61f6-11e5-91cd-2e1836916359.png rename to docs/developer-guide/img/eef6d078-61f6-11e5-91cd-2e1836916359.png diff --git a/docs/developer-guide/img/developer-guide/error-dialog.png b/docs/developer-guide/img/error-dialog.png similarity index 100% rename from docs/developer-guide/img/developer-guide/error-dialog.png rename to docs/developer-guide/img/error-dialog.png diff --git a/docs/developer-guide/img/developer-guide/f7200840-677e-11e5-8fd7-41eb027f8a6c.png b/docs/developer-guide/img/f7200840-677e-11e5-8fd7-41eb027f8a6c.png similarity index 100% rename from docs/developer-guide/img/developer-guide/f7200840-677e-11e5-8fd7-41eb027f8a6c.png rename to docs/developer-guide/img/f7200840-677e-11e5-8fd7-41eb027f8a6c.png diff --git a/docs/developer-guide/img/developer-guide/fc8a77d2-61e0-11e5-9ecf-bf381d4ac966.png b/docs/developer-guide/img/fc8a77d2-61e0-11e5-9ecf-bf381d4ac966.png similarity index 100% rename from docs/developer-guide/img/developer-guide/fc8a77d2-61e0-11e5-9ecf-bf381d4ac966.png rename to docs/developer-guide/img/fc8a77d2-61e0-11e5-9ecf-bf381d4ac966.png diff --git a/docs/developer-guide/img/developer-guide/filesystem-tree.png b/docs/developer-guide/img/filesystem-tree.png similarity index 100% rename from docs/developer-guide/img/developer-guide/filesystem-tree.png rename to docs/developer-guide/img/filesystem-tree.png diff --git a/docs/developer-guide/img/developer-guide/final.png b/docs/developer-guide/img/final.png similarity index 100% rename from docs/developer-guide/img/developer-guide/final.png rename to docs/developer-guide/img/final.png diff --git a/docs/developer-guide/img/developer-guide/floating-action.png b/docs/developer-guide/img/floating-action.png similarity index 100% rename from docs/developer-guide/img/developer-guide/floating-action.png rename to docs/developer-guide/img/floating-action.png diff --git a/docs/developer-guide/img/developer-guide/flow-layout-center-middle.png b/docs/developer-guide/img/flow-layout-center-middle.png similarity index 100% rename from docs/developer-guide/img/developer-guide/flow-layout-center-middle.png rename to docs/developer-guide/img/flow-layout-center-middle.png diff --git a/docs/developer-guide/img/developer-guide/flow-layout-center.png b/docs/developer-guide/img/flow-layout-center.png similarity index 100% rename from docs/developer-guide/img/developer-guide/flow-layout-center.png rename to docs/developer-guide/img/flow-layout-center.png diff --git a/docs/developer-guide/img/developer-guide/flow-layout-right.png b/docs/developer-guide/img/flow-layout-right.png similarity index 100% rename from docs/developer-guide/img/developer-guide/flow-layout-right.png rename to docs/developer-guide/img/flow-layout-right.png diff --git a/docs/developer-guide/img/developer-guide/flow-layout.png b/docs/developer-guide/img/flow-layout.png similarity index 100% rename from docs/developer-guide/img/developer-guide/flow-layout.png rename to docs/developer-guide/img/flow-layout.png diff --git a/docs/developer-guide/img/developer-guide/game-figure-3.png b/docs/developer-guide/img/game-figure-3.png similarity index 100% rename from docs/developer-guide/img/developer-guide/game-figure-3.png rename to docs/developer-guide/img/game-figure-3.png diff --git a/docs/developer-guide/img/developer-guide/gaming-fig2.png b/docs/developer-guide/img/gaming-fig2.png similarity index 100% rename from docs/developer-guide/img/developer-guide/gaming-fig2.png rename to docs/developer-guide/img/gaming-fig2.png diff --git a/docs/developer-guide/img/developer-guide/gb-create-list-1.png b/docs/developer-guide/img/gb-create-list-1.png similarity index 100% rename from docs/developer-guide/img/developer-guide/gb-create-list-1.png rename to docs/developer-guide/img/gb-create-list-1.png diff --git a/docs/developer-guide/img/developer-guide/gb-create-list-2.png b/docs/developer-guide/img/gb-create-list-2.png similarity index 100% rename from docs/developer-guide/img/developer-guide/gb-create-list-2.png rename to docs/developer-guide/img/gb-create-list-2.png diff --git a/docs/developer-guide/img/developer-guide/gb-create-list-4.png b/docs/developer-guide/img/gb-create-list-4.png similarity index 100% rename from docs/developer-guide/img/developer-guide/gb-create-list-4.png rename to docs/developer-guide/img/gb-create-list-4.png diff --git a/docs/developer-guide/img/developer-guide/gb-create-list-6.png b/docs/developer-guide/img/gb-create-list-6.png similarity index 100% rename from docs/developer-guide/img/developer-guide/gb-create-list-6.png rename to docs/developer-guide/img/gb-create-list-6.png diff --git a/docs/developer-guide/img/developer-guide/gb-create-list-7.png b/docs/developer-guide/img/gb-create-list-7.png similarity index 100% rename from docs/developer-guide/img/developer-guide/gb-create-list-7.png rename to docs/developer-guide/img/gb-create-list-7.png diff --git a/docs/developer-guide/img/developer-guide/gb-create-list3.png b/docs/developer-guide/img/gb-create-list3.png similarity index 100% rename from docs/developer-guide/img/developer-guide/gb-create-list3.png rename to docs/developer-guide/img/gb-create-list3.png diff --git a/docs/developer-guide/img/developer-guide/gb-create-list5.png b/docs/developer-guide/img/gb-create-list5.png similarity index 100% rename from docs/developer-guide/img/developer-guide/gb-create-list5.png rename to docs/developer-guide/img/gb-create-list5.png diff --git a/docs/developer-guide/img/developer-guide/get-device-udid.png b/docs/developer-guide/img/get-device-udid.png similarity index 100% rename from docs/developer-guide/img/developer-guide/get-device-udid.png rename to docs/developer-guide/img/get-device-udid.png diff --git a/docs/developer-guide/img/developer-guide/getting-started-right-click-menu.png b/docs/developer-guide/img/getting-started-right-click-menu.png similarity index 100% rename from docs/developer-guide/img/developer-guide/getting-started-right-click-menu.png rename to docs/developer-guide/img/getting-started-right-click-menu.png diff --git a/docs/developer-guide/img/developer-guide/google-play-ads.png b/docs/developer-guide/img/google-play-ads.png similarity index 100% rename from docs/developer-guide/img/developer-guide/google-play-ads.png rename to docs/developer-guide/img/google-play-ads.png diff --git a/docs/developer-guide/img/developer-guide/google-sign-in-google-cloud-platform-credentials.png b/docs/developer-guide/img/google-sign-in-google-cloud-platform-credentials.png similarity index 100% rename from docs/developer-guide/img/developer-guide/google-sign-in-google-cloud-platform-credentials.png rename to docs/developer-guide/img/google-sign-in-google-cloud-platform-credentials.png diff --git a/docs/developer-guide/img/developer-guide/google-sign-in-oauth-setup-redirect-url.png b/docs/developer-guide/img/google-sign-in-oauth-setup-redirect-url.png similarity index 100% rename from docs/developer-guide/img/developer-guide/google-sign-in-oauth-setup-redirect-url.png rename to docs/developer-guide/img/google-sign-in-oauth-setup-redirect-url.png diff --git a/docs/developer-guide/img/developer-guide/google-signin-android-choose-and-configure-services-btn.png b/docs/developer-guide/img/google-signin-android-choose-and-configure-services-btn.png similarity index 100% rename from docs/developer-guide/img/developer-guide/google-signin-android-choose-and-configure-services-btn.png rename to docs/developer-guide/img/google-signin-android-choose-and-configure-services-btn.png diff --git a/docs/developer-guide/img/developer-guide/google-signin-android-create-or-choose-app.png b/docs/developer-guide/img/google-signin-android-create-or-choose-app.png similarity index 100% rename from docs/developer-guide/img/developer-guide/google-signin-android-create-or-choose-app.png rename to docs/developer-guide/img/google-signin-android-create-or-choose-app.png diff --git a/docs/developer-guide/img/developer-guide/google-signin-android-download-googleservices-json-btn.png b/docs/developer-guide/img/google-signin-android-download-googleservices-json-btn.png similarity index 100% rename from docs/developer-guide/img/developer-guide/google-signin-android-download-googleservices-json-btn.png rename to docs/developer-guide/img/google-signin-android-download-googleservices-json-btn.png diff --git a/docs/developer-guide/img/developer-guide/google-signin-android-google-services-json-file-structure.png b/docs/developer-guide/img/google-signin-android-google-services-json-file-structure.png similarity index 100% rename from docs/developer-guide/img/developer-guide/google-signin-android-google-services-json-file-structure.png rename to docs/developer-guide/img/google-signin-android-google-services-json-file-structure.png diff --git a/docs/developer-guide/img/developer-guide/google-signin-android-signing-sha1.png b/docs/developer-guide/img/google-signin-android-signing-sha1.png similarity index 100% rename from docs/developer-guide/img/developer-guide/google-signin-android-signing-sha1.png rename to docs/developer-guide/img/google-signin-android-signing-sha1.png diff --git a/docs/developer-guide/img/developer-guide/google-signin-ios-choose-and-configure-services-btn.png b/docs/developer-guide/img/google-signin-ios-choose-and-configure-services-btn.png similarity index 100% rename from docs/developer-guide/img/developer-guide/google-signin-ios-choose-and-configure-services-btn.png rename to docs/developer-guide/img/google-signin-ios-choose-and-configure-services-btn.png diff --git a/docs/developer-guide/img/developer-guide/google-signin-ios-choose-and-configure-services-form.png b/docs/developer-guide/img/google-signin-ios-choose-and-configure-services-form.png similarity index 100% rename from docs/developer-guide/img/developer-guide/google-signin-ios-choose-and-configure-services-form.png rename to docs/developer-guide/img/google-signin-ios-choose-and-configure-services-form.png diff --git a/docs/developer-guide/img/developer-guide/google-signin-ios-create-or-choose-app.png b/docs/developer-guide/img/google-signin-ios-create-or-choose-app.png similarity index 100% rename from docs/developer-guide/img/developer-guide/google-signin-ios-create-or-choose-app.png rename to docs/developer-guide/img/google-signin-ios-create-or-choose-app.png diff --git a/docs/developer-guide/img/developer-guide/google-signin-ios-download-googleservice-infoplist-btn.png b/docs/developer-guide/img/google-signin-ios-download-googleservice-infoplist-btn.png similarity index 100% rename from docs/developer-guide/img/developer-guide/google-signin-ios-download-googleservice-infoplist-btn.png rename to docs/developer-guide/img/google-signin-ios-download-googleservice-infoplist-btn.png diff --git a/docs/developer-guide/img/developer-guide/google-signin-ios-enable-google-signin-btn.png b/docs/developer-guide/img/google-signin-ios-enable-google-signin-btn.png similarity index 100% rename from docs/developer-guide/img/developer-guide/google-signin-ios-enable-google-signin-btn.png rename to docs/developer-guide/img/google-signin-ios-enable-google-signin-btn.png diff --git a/docs/developer-guide/img/developer-guide/google-signin-ios-generate-configuration-files-button.png b/docs/developer-guide/img/google-signin-ios-generate-configuration-files-button.png similarity index 100% rename from docs/developer-guide/img/developer-guide/google-signin-ios-generate-configuration-files-button.png rename to docs/developer-guide/img/google-signin-ios-generate-configuration-files-button.png diff --git a/docs/developer-guide/img/developer-guide/google-signin-ios-getting-started-button.png b/docs/developer-guide/img/google-signin-ios-getting-started-button.png similarity index 100% rename from docs/developer-guide/img/developer-guide/google-signin-ios-getting-started-button.png rename to docs/developer-guide/img/google-signin-ios-getting-started-button.png diff --git a/docs/developer-guide/img/developer-guide/google-signin-ios-google-service-info-plist-file-structure.png b/docs/developer-guide/img/google-signin-ios-google-service-info-plist-file-structure.png similarity index 100% rename from docs/developer-guide/img/developer-guide/google-signin-ios-google-service-info-plist-file-structure.png rename to docs/developer-guide/img/google-signin-ios-google-service-info-plist-file-structure.png diff --git a/docs/developer-guide/img/developer-guide/google-signin-ios-pick-a-platform.png b/docs/developer-guide/img/google-signin-ios-pick-a-platform.png similarity index 100% rename from docs/developer-guide/img/developer-guide/google-signin-ios-pick-a-platform.png rename to docs/developer-guide/img/google-signin-ios-pick-a-platform.png diff --git a/docs/developer-guide/img/developer-guide/google-signin-ios-setup.png b/docs/developer-guide/img/google-signin-ios-setup.png similarity index 100% rename from docs/developer-guide/img/developer-guide/google-signin-ios-setup.png rename to docs/developer-guide/img/google-signin-ios-setup.png diff --git a/docs/developer-guide/img/developer-guide/gradle-settings.png b/docs/developer-guide/img/gradle-settings.png similarity index 100% rename from docs/developer-guide/img/developer-guide/gradle-settings.png rename to docs/developer-guide/img/gradle-settings.png diff --git a/docs/developer-guide/img/developer-guide/graphics-fontimage-fixed.png b/docs/developer-guide/img/graphics-fontimage-fixed.png similarity index 100% rename from docs/developer-guide/img/developer-guide/graphics-fontimage-fixed.png rename to docs/developer-guide/img/graphics-fontimage-fixed.png diff --git a/docs/developer-guide/img/developer-guide/graphics-fontimage-material.png b/docs/developer-guide/img/graphics-fontimage-material.png similarity index 100% rename from docs/developer-guide/img/developer-guide/graphics-fontimage-material.png rename to docs/developer-guide/img/graphics-fontimage-material.png diff --git a/docs/developer-guide/img/developer-guide/graphics-fontimage-style.png b/docs/developer-guide/img/graphics-fontimage-style.png similarity index 100% rename from docs/developer-guide/img/developer-guide/graphics-fontimage-style.png rename to docs/developer-guide/img/graphics-fontimage-style.png diff --git a/docs/developer-guide/img/developer-guide/graphics-glasspane.png b/docs/developer-guide/img/graphics-glasspane.png similarity index 100% rename from docs/developer-guide/img/developer-guide/graphics-glasspane.png rename to docs/developer-guide/img/graphics-glasspane.png diff --git a/docs/developer-guide/img/developer-guide/graphics-hiworld.png b/docs/developer-guide/img/graphics-hiworld.png similarity index 100% rename from docs/developer-guide/img/developer-guide/graphics-hiworld.png rename to docs/developer-guide/img/graphics-hiworld.png diff --git a/docs/developer-guide/img/developer-guide/graphics-image-masking.png b/docs/developer-guide/img/graphics-image-masking.png similarity index 100% rename from docs/developer-guide/img/developer-guide/graphics-image-masking.png rename to docs/developer-guide/img/graphics-image-masking.png diff --git a/docs/developer-guide/img/developer-guide/graphics-urlimage-multilist.png b/docs/developer-guide/img/graphics-urlimage-multilist.png similarity index 100% rename from docs/developer-guide/img/developer-guide/graphics-urlimage-multilist.png rename to docs/developer-guide/img/graphics-urlimage-multilist.png diff --git a/docs/developer-guide/img/developer-guide/grid-layout-2x2.png b/docs/developer-guide/img/grid-layout-2x2.png similarity index 100% rename from docs/developer-guide/img/developer-guide/grid-layout-2x2.png rename to docs/developer-guide/img/grid-layout-2x2.png diff --git a/docs/developer-guide/img/developer-guide/grid-layout-2x4.png b/docs/developer-guide/img/grid-layout-2x4.png similarity index 100% rename from docs/developer-guide/img/developer-guide/grid-layout-2x4.png rename to docs/developer-guide/img/grid-layout-2x4.png diff --git a/docs/developer-guide/img/developer-guide/grid-layout-autofit-landscape.png b/docs/developer-guide/img/grid-layout-autofit-landscape.png similarity index 100% rename from docs/developer-guide/img/developer-guide/grid-layout-autofit-landscape.png rename to docs/developer-guide/img/grid-layout-autofit-landscape.png diff --git a/docs/developer-guide/img/developer-guide/grid-layout-autofit-portrait.png b/docs/developer-guide/img/grid-layout-autofit-portrait.png similarity index 100% rename from docs/developer-guide/img/developer-guide/grid-layout-autofit-portrait.png rename to docs/developer-guide/img/grid-layout-autofit-portrait.png diff --git a/docs/developer-guide/img/developer-guide/gridbag-layout.png b/docs/developer-guide/img/gridbag-layout.png similarity index 100% rename from docs/developer-guide/img/developer-guide/gridbag-layout.png rename to docs/developer-guide/img/gridbag-layout.png diff --git a/docs/developer-guide/img/developer-guide/group-layout.png b/docs/developer-guide/img/group-layout.png similarity index 100% rename from docs/developer-guide/img/developer-guide/group-layout.png rename to docs/developer-guide/img/group-layout.png diff --git a/docs/developer-guide/img/developer-guide/gui-builder-events.png b/docs/developer-guide/img/gui-builder-events.png similarity index 100% rename from docs/developer-guide/img/developer-guide/gui-builder-events.png rename to docs/developer-guide/img/gui-builder-events.png diff --git a/docs/developer-guide/img/developer-guide/gui-builder-in-place-edit.png b/docs/developer-guide/img/gui-builder-in-place-edit.png similarity index 100% rename from docs/developer-guide/img/developer-guide/gui-builder-in-place-edit.png rename to docs/developer-guide/img/gui-builder-in-place-edit.png diff --git a/docs/developer-guide/img/developer-guide/gui-builder-java-and-gui-files.png b/docs/developer-guide/img/gui-builder-java-and-gui-files.png similarity index 100% rename from docs/developer-guide/img/developer-guide/gui-builder-java-and-gui-files.png rename to docs/developer-guide/img/gui-builder-java-and-gui-files.png diff --git a/docs/developer-guide/img/developer-guide/guibuilder-2-inset-control.png b/docs/developer-guide/img/guibuilder-2-inset-control.png similarity index 100% rename from docs/developer-guide/img/developer-guide/guibuilder-2-inset-control.png rename to docs/developer-guide/img/guibuilder-2-inset-control.png diff --git a/docs/developer-guide/img/developer-guide/guibuilder-2-inset-fixed-button.png b/docs/developer-guide/img/guibuilder-2-inset-fixed-button.png similarity index 100% rename from docs/developer-guide/img/developer-guide/guibuilder-2-inset-fixed-button.png rename to docs/developer-guide/img/guibuilder-2-inset-fixed-button.png diff --git a/docs/developer-guide/img/developer-guide/guibuilder-2-insets-1.png b/docs/developer-guide/img/guibuilder-2-insets-1.png similarity index 100% rename from docs/developer-guide/img/developer-guide/guibuilder-2-insets-1.png rename to docs/developer-guide/img/guibuilder-2-insets-1.png diff --git a/docs/developer-guide/img/developer-guide/guibuilder-2-insets-2.png b/docs/developer-guide/img/guibuilder-2-insets-2.png similarity index 100% rename from docs/developer-guide/img/developer-guide/guibuilder-2-insets-2.png rename to docs/developer-guide/img/guibuilder-2-insets-2.png diff --git a/docs/developer-guide/img/developer-guide/guibuilder-2-insets-3.png b/docs/developer-guide/img/guibuilder-2-insets-3.png similarity index 100% rename from docs/developer-guide/img/developer-guide/guibuilder-2-insets-3.png rename to docs/developer-guide/img/guibuilder-2-insets-3.png diff --git a/docs/developer-guide/img/developer-guide/guibuilder-2-insets-dropdown-menu.png b/docs/developer-guide/img/guibuilder-2-insets-dropdown-menu.png similarity index 100% rename from docs/developer-guide/img/developer-guide/guibuilder-2-insets-dropdown-menu.png rename to docs/developer-guide/img/guibuilder-2-insets-dropdown-menu.png diff --git a/docs/developer-guide/img/developer-guide/guibuilder-2-link-button-unselected.png b/docs/developer-guide/img/guibuilder-2-link-button-unselected.png similarity index 100% rename from docs/developer-guide/img/developer-guide/guibuilder-2-link-button-unselected.png rename to docs/developer-guide/img/guibuilder-2-link-button-unselected.png diff --git a/docs/developer-guide/img/developer-guide/guibuilder-2-smart-insets-auto-snap-checkboxes.png b/docs/developer-guide/img/guibuilder-2-smart-insets-auto-snap-checkboxes.png similarity index 100% rename from docs/developer-guide/img/developer-guide/guibuilder-2-smart-insets-auto-snap-checkboxes.png rename to docs/developer-guide/img/guibuilder-2-smart-insets-auto-snap-checkboxes.png diff --git a/docs/developer-guide/img/developer-guide/guibuilder-2-subcontainer-add-child-2.png b/docs/developer-guide/img/guibuilder-2-subcontainer-add-child-2.png similarity index 100% rename from docs/developer-guide/img/developer-guide/guibuilder-2-subcontainer-add-child-2.png rename to docs/developer-guide/img/guibuilder-2-subcontainer-add-child-2.png diff --git a/docs/developer-guide/img/developer-guide/guibuilder-2-subcontainer-add-child.png b/docs/developer-guide/img/guibuilder-2-subcontainer-add-child.png similarity index 100% rename from docs/developer-guide/img/developer-guide/guibuilder-2-subcontainer-add-child.png rename to docs/developer-guide/img/guibuilder-2-subcontainer-add-child.png diff --git a/docs/developer-guide/img/developer-guide/guibuilder-2-widget-control-pad.png b/docs/developer-guide/img/guibuilder-2-widget-control-pad.png similarity index 100% rename from docs/developer-guide/img/developer-guide/guibuilder-2-widget-control-pad.png rename to docs/developer-guide/img/guibuilder-2-widget-control-pad.png diff --git a/docs/developer-guide/img/developer-guide/iap-demo-1.png b/docs/developer-guide/img/iap-demo-1.png similarity index 100% rename from docs/developer-guide/img/developer-guide/iap-demo-1.png rename to docs/developer-guide/img/iap-demo-1.png diff --git a/docs/developer-guide/img/developer-guide/iap-demo2.png b/docs/developer-guide/img/iap-demo2.png similarity index 100% rename from docs/developer-guide/img/developer-guide/iap-demo2.png rename to docs/developer-guide/img/iap-demo2.png diff --git a/docs/developer-guide/img/developer-guide/iap-demo3.png b/docs/developer-guide/img/iap-demo3.png similarity index 100% rename from docs/developer-guide/img/developer-guide/iap-demo3.png rename to docs/developer-guide/img/iap-demo3.png diff --git a/docs/developer-guide/img/developer-guide/iap3-add-product-google.png b/docs/developer-guide/img/iap3-add-product-google.png similarity index 100% rename from docs/developer-guide/img/developer-guide/iap3-add-product-google.png rename to docs/developer-guide/img/iap3-add-product-google.png diff --git a/docs/developer-guide/img/developer-guide/iap3-alpha-testing-tab.png b/docs/developer-guide/img/iap3-alpha-testing-tab.png similarity index 100% rename from docs/developer-guide/img/developer-guide/iap3-alpha-testing-tab.png rename to docs/developer-guide/img/iap3-alpha-testing-tab.png diff --git a/docs/developer-guide/img/developer-guide/iap3-approve-purchase.png b/docs/developer-guide/img/iap3-approve-purchase.png similarity index 100% rename from docs/developer-guide/img/developer-guide/iap3-approve-purchase.png rename to docs/developer-guide/img/iap3-approve-purchase.png diff --git a/docs/developer-guide/img/developer-guide/iap3-create-service-account-key.png b/docs/developer-guide/img/iap3-create-service-account-key.png similarity index 100% rename from docs/developer-guide/img/developer-guide/iap3-create-service-account-key.png rename to docs/developer-guide/img/iap3-create-service-account-key.png diff --git a/docs/developer-guide/img/developer-guide/iap3-credentials-dropdown.png b/docs/developer-guide/img/iap3-credentials-dropdown.png similarity index 100% rename from docs/developer-guide/img/developer-guide/iap3-credentials-dropdown.png rename to docs/developer-guide/img/iap3-credentials-dropdown.png diff --git a/docs/developer-guide/img/developer-guide/iap3-enable-api.png b/docs/developer-guide/img/iap3-enable-api.png similarity index 100% rename from docs/developer-guide/img/developer-guide/iap3-enable-api.png rename to docs/developer-guide/img/iap3-enable-api.png diff --git a/docs/developer-guide/img/developer-guide/iap3-first-screen.png b/docs/developer-guide/img/iap3-first-screen.png similarity index 100% rename from docs/developer-guide/img/developer-guide/iap3-first-screen.png rename to docs/developer-guide/img/iap3-first-screen.png diff --git a/docs/developer-guide/img/developer-guide/iap3-grant-access.png b/docs/developer-guide/img/iap3-grant-access.png similarity index 100% rename from docs/developer-guide/img/developer-guide/iap3-grant-access.png rename to docs/developer-guide/img/iap3-grant-access.png diff --git a/docs/developer-guide/img/developer-guide/iap3-link-to-api.png b/docs/developer-guide/img/iap3-link-to-api.png similarity index 100% rename from docs/developer-guide/img/developer-guide/iap3-link-to-api.png rename to docs/developer-guide/img/iap3-link-to-api.png diff --git a/docs/developer-guide/img/developer-guide/iap3-new-user.png b/docs/developer-guide/img/iap3-new-user.png similarity index 100% rename from docs/developer-guide/img/developer-guide/iap3-new-user.png rename to docs/developer-guide/img/iap3-new-user.png diff --git a/docs/developer-guide/img/developer-guide/iap3-persistence-file.png b/docs/developer-guide/img/iap3-persistence-file.png similarity index 100% rename from docs/developer-guide/img/developer-guide/iap3-persistence-file.png rename to docs/developer-guide/img/iap3-persistence-file.png diff --git a/docs/developer-guide/img/developer-guide/iap3-play-add-new-product.png b/docs/developer-guide/img/iap3-play-add-new-product.png similarity index 100% rename from docs/developer-guide/img/developer-guide/iap3-play-add-new-product.png rename to docs/developer-guide/img/iap3-play-add-new-product.png diff --git a/docs/developer-guide/img/developer-guide/iap3-play-developer-api-link.png b/docs/developer-guide/img/iap3-play-developer-api-link.png similarity index 100% rename from docs/developer-guide/img/developer-guide/iap3-play-developer-api-link.png rename to docs/developer-guide/img/iap3-play-developer-api-link.png diff --git a/docs/developer-guide/img/developer-guide/iap3-subscriptions-form.png b/docs/developer-guide/img/iap3-subscriptions-form.png similarity index 100% rename from docs/developer-guide/img/developer-guide/iap3-subscriptions-form.png rename to docs/developer-guide/img/iap3-subscriptions-form.png diff --git a/docs/developer-guide/img/developer-guide/iap3-successful-purchase.png b/docs/developer-guide/img/iap3-successful-purchase.png similarity index 100% rename from docs/developer-guide/img/developer-guide/iap3-successful-purchase.png rename to docs/developer-guide/img/iap3-successful-purchase.png diff --git a/docs/developer-guide/img/developer-guide/iap3-table-view.png b/docs/developer-guide/img/iap3-table-view.png similarity index 100% rename from docs/developer-guide/img/developer-guide/iap3-table-view.png rename to docs/developer-guide/img/iap3-table-view.png diff --git a/docs/developer-guide/img/developer-guide/iap3-view-table-data.png b/docs/developer-guide/img/iap3-view-table-data.png similarity index 100% rename from docs/developer-guide/img/developer-guide/iap3-view-table-data.png rename to docs/developer-guide/img/iap3-view-table-data.png diff --git a/docs/developer-guide/img/developer-guide/image-sizes-different-dpis.png b/docs/developer-guide/img/image-sizes-different-dpis.png similarity index 100% rename from docs/developer-guide/img/developer-guide/image-sizes-different-dpis.png rename to docs/developer-guide/img/image-sizes-different-dpis.png diff --git a/docs/developer-guide/img/developer-guide/in-app-purchase-receipt-store-diagram.png b/docs/developer-guide/img/in-app-purchase-receipt-store-diagram.png similarity index 100% rename from docs/developer-guide/img/developer-guide/in-app-purchase-receipt-store-diagram.png rename to docs/developer-guide/img/in-app-purchase-receipt-store-diagram.png diff --git a/docs/developer-guide/img/developer-guide/in-app-purchase-subscription-confirm.png b/docs/developer-guide/img/in-app-purchase-subscription-confirm.png similarity index 100% rename from docs/developer-guide/img/developer-guide/in-app-purchase-subscription-confirm.png rename to docs/developer-guide/img/in-app-purchase-subscription-confirm.png diff --git a/docs/developer-guide/img/developer-guide/in-app-purchase-subscription-dialog.png b/docs/developer-guide/img/in-app-purchase-subscription-dialog.png similarity index 100% rename from docs/developer-guide/img/developer-guide/in-app-purchase-subscription-dialog.png rename to docs/developer-guide/img/in-app-purchase-subscription-dialog.png diff --git a/docs/developer-guide/img/developer-guide/in-app-purchase-subscription-main-form.png b/docs/developer-guide/img/in-app-purchase-subscription-main-form.png similarity index 100% rename from docs/developer-guide/img/developer-guide/in-app-purchase-subscription-main-form.png rename to docs/developer-guide/img/in-app-purchase-subscription-main-form.png diff --git a/docs/developer-guide/img/developer-guide/in-app-purchase-subscription-toastbar-success.png b/docs/developer-guide/img/in-app-purchase-subscription-toastbar-success.png similarity index 100% rename from docs/developer-guide/img/developer-guide/in-app-purchase-subscription-toastbar-success.png rename to docs/developer-guide/img/in-app-purchase-subscription-toastbar-success.png diff --git a/docs/developer-guide/img/developer-guide/include-push-build-hint.png b/docs/developer-guide/img/include-push-build-hint.png similarity index 100% rename from docs/developer-guide/img/developer-guide/include-push-build-hint.png rename to docs/developer-guide/img/include-push-build-hint.png diff --git a/docs/developer-guide/img/developer-guide/infinite-progress.png b/docs/developer-guide/img/infinite-progress.png similarity index 100% rename from docs/developer-guide/img/developer-guide/infinite-progress.png rename to docs/developer-guide/img/infinite-progress.png diff --git a/docs/developer-guide/img/developer-guide/intellij-gui-builder-step-1.png b/docs/developer-guide/img/intellij-gui-builder-step-1.png similarity index 100% rename from docs/developer-guide/img/developer-guide/intellij-gui-builder-step-1.png rename to docs/developer-guide/img/intellij-gui-builder-step-1.png diff --git a/docs/developer-guide/img/developer-guide/intellij-gui-builder-step-2.png b/docs/developer-guide/img/intellij-gui-builder-step-2.png similarity index 100% rename from docs/developer-guide/img/developer-guide/intellij-gui-builder-step-2.png rename to docs/developer-guide/img/intellij-gui-builder-step-2.png diff --git a/docs/developer-guide/img/developer-guide/intellij-gui-builder-step-3.png b/docs/developer-guide/img/intellij-gui-builder-step-3.png similarity index 100% rename from docs/developer-guide/img/developer-guide/intellij-gui-builder-step-3.png rename to docs/developer-guide/img/intellij-gui-builder-step-3.png diff --git a/docs/developer-guide/img/developer-guide/ios-add-devices.png b/docs/developer-guide/img/ios-add-devices.png similarity index 100% rename from docs/developer-guide/img/developer-guide/ios-add-devices.png rename to docs/developer-guide/img/ios-add-devices.png diff --git a/docs/developer-guide/img/developer-guide/ios-cert-global-settings.png b/docs/developer-guide/img/ios-cert-global-settings.png similarity index 100% rename from docs/developer-guide/img/developer-guide/ios-cert-global-settings.png rename to docs/developer-guide/img/ios-cert-global-settings.png diff --git a/docs/developer-guide/img/developer-guide/ios-cert-wizard-1-signing.png b/docs/developer-guide/img/ios-cert-wizard-1-signing.png similarity index 100% rename from docs/developer-guide/img/developer-guide/ios-cert-wizard-1-signing.png rename to docs/developer-guide/img/ios-cert-wizard-1-signing.png diff --git a/docs/developer-guide/img/developer-guide/ios-cert-wizard-2-login.png b/docs/developer-guide/img/ios-cert-wizard-2-login.png similarity index 100% rename from docs/developer-guide/img/developer-guide/ios-cert-wizard-2-login.png rename to docs/developer-guide/img/ios-cert-wizard-2-login.png diff --git a/docs/developer-guide/img/developer-guide/ios-cert-wizard-3-devices.png b/docs/developer-guide/img/ios-cert-wizard-3-devices.png similarity index 100% rename from docs/developer-guide/img/developer-guide/ios-cert-wizard-3-devices.png rename to docs/developer-guide/img/ios-cert-wizard-3-devices.png diff --git a/docs/developer-guide/img/developer-guide/ios-cert-wizard-4-devices-selected.png b/docs/developer-guide/img/ios-cert-wizard-4-devices-selected.png similarity index 100% rename from docs/developer-guide/img/developer-guide/ios-cert-wizard-4-devices-selected.png rename to docs/developer-guide/img/ios-cert-wizard-4-devices-selected.png diff --git a/docs/developer-guide/img/developer-guide/ios-cert-wizard-4.1-overwrite-cert.png b/docs/developer-guide/img/ios-cert-wizard-4.1-overwrite-cert.png similarity index 100% rename from docs/developer-guide/img/developer-guide/ios-cert-wizard-4.1-overwrite-cert.png rename to docs/developer-guide/img/ios-cert-wizard-4.1-overwrite-cert.png diff --git a/docs/developer-guide/img/developer-guide/ios-cert-wizard-4.2-overwrite-cert.png b/docs/developer-guide/img/ios-cert-wizard-4.2-overwrite-cert.png similarity index 100% rename from docs/developer-guide/img/developer-guide/ios-cert-wizard-4.2-overwrite-cert.png rename to docs/developer-guide/img/ios-cert-wizard-4.2-overwrite-cert.png diff --git a/docs/developer-guide/img/developer-guide/ios-cert-wizard-5-bundle-id.png b/docs/developer-guide/img/ios-cert-wizard-5-bundle-id.png similarity index 100% rename from docs/developer-guide/img/developer-guide/ios-cert-wizard-5-bundle-id.png rename to docs/developer-guide/img/ios-cert-wizard-5-bundle-id.png diff --git a/docs/developer-guide/img/developer-guide/ios-cert-wizard-6-install-now.png b/docs/developer-guide/img/ios-cert-wizard-6-install-now.png similarity index 100% rename from docs/developer-guide/img/developer-guide/ios-cert-wizard-6-install-now.png rename to docs/developer-guide/img/ios-cert-wizard-6-install-now.png diff --git a/docs/developer-guide/img/developer-guide/ios-cert-wizard-7-select-directory.png b/docs/developer-guide/img/ios-cert-wizard-7-select-directory.png similarity index 100% rename from docs/developer-guide/img/developer-guide/ios-cert-wizard-7-select-directory.png rename to docs/developer-guide/img/ios-cert-wizard-7-select-directory.png diff --git a/docs/developer-guide/img/developer-guide/ios-cert-wizard-8-complete.png b/docs/developer-guide/img/ios-cert-wizard-8-complete.png similarity index 100% rename from docs/developer-guide/img/developer-guide/ios-cert-wizard-8-complete.png rename to docs/developer-guide/img/ios-cert-wizard-8-complete.png diff --git a/docs/developer-guide/img/developer-guide/ios-cert-wizard-9-signing-panel.png b/docs/developer-guide/img/ios-cert-wizard-9-signing-panel.png similarity index 100% rename from docs/developer-guide/img/developer-guide/ios-cert-wizard-9-signing-panel.png rename to docs/developer-guide/img/ios-cert-wizard-9-signing-panel.png diff --git a/docs/developer-guide/img/developer-guide/ios-certificate-wizard-1.png b/docs/developer-guide/img/ios-certificate-wizard-1.png similarity index 100% rename from docs/developer-guide/img/developer-guide/ios-certificate-wizard-1.png rename to docs/developer-guide/img/ios-certificate-wizard-1.png diff --git a/docs/developer-guide/img/developer-guide/ios-certificate-wizard-2.png b/docs/developer-guide/img/ios-certificate-wizard-2.png similarity index 100% rename from docs/developer-guide/img/developer-guide/ios-certificate-wizard-2.png rename to docs/developer-guide/img/ios-certificate-wizard-2.png diff --git a/docs/developer-guide/img/developer-guide/ios-certificate-wizard-3.png b/docs/developer-guide/img/ios-certificate-wizard-3.png similarity index 100% rename from docs/developer-guide/img/developer-guide/ios-certificate-wizard-3.png rename to docs/developer-guide/img/ios-certificate-wizard-3.png diff --git a/docs/developer-guide/img/developer-guide/ios-certificates-provisioning.png b/docs/developer-guide/img/ios-certificates-provisioning.png similarity index 100% rename from docs/developer-guide/img/developer-guide/ios-certificates-provisioning.png rename to docs/developer-guide/img/ios-certificates-provisioning.png diff --git a/docs/developer-guide/img/developer-guide/ios-create-app-id.png b/docs/developer-guide/img/ios-create-app-id.png similarity index 100% rename from docs/developer-guide/img/developer-guide/ios-create-app-id.png rename to docs/developer-guide/img/ios-create-app-id.png diff --git a/docs/developer-guide/img/developer-guide/ios-create-dist-prov-profile.png b/docs/developer-guide/img/ios-create-dist-prov-profile.png similarity index 100% rename from docs/developer-guide/img/developer-guide/ios-create-dist-prov-profile.png rename to docs/developer-guide/img/ios-create-dist-prov-profile.png diff --git a/docs/developer-guide/img/developer-guide/ios-create-prov-profile-1.png b/docs/developer-guide/img/ios-create-prov-profile-1.png similarity index 100% rename from docs/developer-guide/img/developer-guide/ios-create-prov-profile-1.png rename to docs/developer-guide/img/ios-create-prov-profile-1.png diff --git a/docs/developer-guide/img/developer-guide/ios-create-prov-profile-2.png b/docs/developer-guide/img/ios-create-prov-profile-2.png similarity index 100% rename from docs/developer-guide/img/developer-guide/ios-create-prov-profile-2.png rename to docs/developer-guide/img/ios-create-prov-profile-2.png diff --git a/docs/developer-guide/img/developer-guide/ios-create-prov-profile-3.png b/docs/developer-guide/img/ios-create-prov-profile-3.png similarity index 100% rename from docs/developer-guide/img/developer-guide/ios-create-prov-profile-3.png rename to docs/developer-guide/img/ios-create-prov-profile-3.png diff --git a/docs/developer-guide/img/developer-guide/ios-download-dist-prov-profile.png b/docs/developer-guide/img/ios-download-dist-prov-profile.png similarity index 100% rename from docs/developer-guide/img/developer-guide/ios-download-dist-prov-profile.png rename to docs/developer-guide/img/ios-download-dist-prov-profile.png diff --git a/docs/developer-guide/img/developer-guide/ios-export-p12.png b/docs/developer-guide/img/ios-export-p12.png similarity index 100% rename from docs/developer-guide/img/developer-guide/ios-export-p12.png rename to docs/developer-guide/img/ios-export-p12.png diff --git a/docs/developer-guide/img/developer-guide/ios-import-cer-files.png b/docs/developer-guide/img/ios-import-cer-files.png similarity index 100% rename from docs/developer-guide/img/developer-guide/ios-import-cer-files.png rename to docs/developer-guide/img/ios-import-cer-files.png diff --git a/docs/developer-guide/img/developer-guide/ios-project-settings.png b/docs/developer-guide/img/ios-project-settings.png similarity index 100% rename from docs/developer-guide/img/developer-guide/ios-project-settings.png rename to docs/developer-guide/img/ios-project-settings.png diff --git a/docs/developer-guide/img/developer-guide/ios_strings_directory_screenshot.png b/docs/developer-guide/img/ios_strings_directory_screenshot.png similarity index 100% rename from docs/developer-guide/img/developer-guide/ios_strings_directory_screenshot.png rename to docs/developer-guide/img/ios_strings_directory_screenshot.png diff --git a/docs/developer-guide/img/developer-guide/javascript-pwa-add-app-banner.png b/docs/developer-guide/img/javascript-pwa-add-app-banner.png similarity index 100% rename from docs/developer-guide/img/developer-guide/javascript-pwa-add-app-banner.png rename to docs/developer-guide/img/javascript-pwa-add-app-banner.png diff --git a/docs/developer-guide/img/developer-guide/javascript-pwa-add-native-app-banner.png b/docs/developer-guide/img/javascript-pwa-add-native-app-banner.png similarity index 100% rename from docs/developer-guide/img/developer-guide/javascript-pwa-add-native-app-banner.png rename to docs/developer-guide/img/javascript-pwa-add-native-app-banner.png diff --git a/docs/developer-guide/img/developer-guide/javascript-pwa-add-to-shelf-banner.png b/docs/developer-guide/img/javascript-pwa-add-to-shelf-banner.png similarity index 100% rename from docs/developer-guide/img/developer-guide/javascript-pwa-add-to-shelf-banner.png rename to docs/developer-guide/img/javascript-pwa-add-to-shelf-banner.png diff --git a/docs/developer-guide/img/developer-guide/javascript-pwa-add-to-shelf-prompt.png b/docs/developer-guide/img/javascript-pwa-add-to-shelf-prompt.png similarity index 100% rename from docs/developer-guide/img/developer-guide/javascript-pwa-add-to-shelf-prompt.png rename to docs/developer-guide/img/javascript-pwa-add-to-shelf-prompt.png diff --git a/docs/developer-guide/img/developer-guide/javascript-pwa-chrome-app-launcher.png b/docs/developer-guide/img/javascript-pwa-chrome-app-launcher.png similarity index 100% rename from docs/developer-guide/img/developer-guide/javascript-pwa-chrome-app-launcher.png rename to docs/developer-guide/img/javascript-pwa-chrome-app-launcher.png diff --git a/docs/developer-guide/img/developer-guide/js-beforeunload-prompt.png b/docs/developer-guide/img/js-beforeunload-prompt.png similarity index 100% rename from docs/developer-guide/img/developer-guide/js-beforeunload-prompt.png rename to docs/developer-guide/img/js-beforeunload-prompt.png diff --git a/docs/developer-guide/img/developer-guide/json-parsing.png b/docs/developer-guide/img/json-parsing.png similarity index 100% rename from docs/developer-guide/img/developer-guide/json-parsing.png rename to docs/developer-guide/img/json-parsing.png diff --git a/docs/developer-guide/img/developer-guide/l10n-basic.png b/docs/developer-guide/img/l10n-basic.png similarity index 100% rename from docs/developer-guide/img/developer-guide/l10n-basic.png rename to docs/developer-guide/img/l10n-basic.png diff --git a/docs/developer-guide/img/developer-guide/l10n-manager.png b/docs/developer-guide/img/l10n-manager.png similarity index 100% rename from docs/developer-guide/img/developer-guide/l10n-manager.png rename to docs/developer-guide/img/l10n-manager.png diff --git a/docs/developer-guide/img/developer-guide/layered-layout.png b/docs/developer-guide/img/layered-layout.png similarity index 100% rename from docs/developer-guide/img/developer-guide/layered-layout.png rename to docs/developer-guide/img/layered-layout.png diff --git a/docs/developer-guide/img/developer-guide/layers.png b/docs/developer-guide/img/layers.png similarity index 100% rename from docs/developer-guide/img/developer-guide/layers.png rename to docs/developer-guide/img/layers.png diff --git a/docs/developer-guide/img/developer-guide/layout-animation-1.png b/docs/developer-guide/img/layout-animation-1.png similarity index 100% rename from docs/developer-guide/img/developer-guide/layout-animation-1.png rename to docs/developer-guide/img/layout-animation-1.png diff --git a/docs/developer-guide/img/developer-guide/layout-animation-2.png b/docs/developer-guide/img/layout-animation-2.png similarity index 100% rename from docs/developer-guide/img/developer-guide/layout-animation-2.png rename to docs/developer-guide/img/layout-animation-2.png diff --git a/docs/developer-guide/img/developer-guide/layout-animation-3.png b/docs/developer-guide/img/layout-animation-3.png similarity index 100% rename from docs/developer-guide/img/developer-guide/layout-animation-3.png rename to docs/developer-guide/img/layout-animation-3.png diff --git a/docs/developer-guide/img/developer-guide/layout-animation-4.png b/docs/developer-guide/img/layout-animation-4.png similarity index 100% rename from docs/developer-guide/img/developer-guide/layout-animation-4.png rename to docs/developer-guide/img/layout-animation-4.png diff --git a/docs/developer-guide/img/developer-guide/layout-animation-5.png b/docs/developer-guide/img/layout-animation-5.png similarity index 100% rename from docs/developer-guide/img/developer-guide/layout-animation-5.png rename to docs/developer-guide/img/layout-animation-5.png diff --git a/docs/developer-guide/img/developer-guide/layout-animation-6.png b/docs/developer-guide/img/layout-animation-6.png similarity index 100% rename from docs/developer-guide/img/developer-guide/layout-animation-6.png rename to docs/developer-guide/img/layout-animation-6.png diff --git a/docs/developer-guide/img/developer-guide/layout-animation-7.png b/docs/developer-guide/img/layout-animation-7.png similarity index 100% rename from docs/developer-guide/img/developer-guide/layout-animation-7.png rename to docs/developer-guide/img/layout-animation-7.png diff --git a/docs/developer-guide/img/developer-guide/lead-component-blocking.png b/docs/developer-guide/img/lead-component-blocking.png similarity index 100% rename from docs/developer-guide/img/developer-guide/lead-component-blocking.png rename to docs/developer-guide/img/lead-component-blocking.png diff --git a/docs/developer-guide/img/developer-guide/line_chart.png b/docs/developer-guide/img/line_chart.png similarity index 100% rename from docs/developer-guide/img/developer-guide/line_chart.png rename to docs/developer-guide/img/line_chart.png diff --git a/docs/developer-guide/img/developer-guide/line_chart_cubic_multi.png b/docs/developer-guide/img/line_chart_cubic_multi.png similarity index 100% rename from docs/developer-guide/img/developer-guide/line_chart_cubic_multi.png rename to docs/developer-guide/img/line_chart_cubic_multi.png diff --git a/docs/developer-guide/img/developer-guide/linear-gradient-0deg.png b/docs/developer-guide/img/linear-gradient-0deg.png similarity index 100% rename from docs/developer-guide/img/developer-guide/linear-gradient-0deg.png rename to docs/developer-guide/img/linear-gradient-0deg.png diff --git a/docs/developer-guide/img/developer-guide/linear-gradient-45deg.png b/docs/developer-guide/img/linear-gradient-45deg.png similarity index 100% rename from docs/developer-guide/img/developer-guide/linear-gradient-45deg.png rename to docs/developer-guide/img/linear-gradient-45deg.png diff --git a/docs/developer-guide/img/developer-guide/linear-gradient-90deg.png b/docs/developer-guide/img/linear-gradient-90deg.png similarity index 100% rename from docs/developer-guide/img/developer-guide/linear-gradient-90deg.png rename to docs/developer-guide/img/linear-gradient-90deg.png diff --git a/docs/developer-guide/img/developer-guide/linear-gradient-diff-alpha.png b/docs/developer-guide/img/linear-gradient-diff-alpha.png similarity index 100% rename from docs/developer-guide/img/developer-guide/linear-gradient-diff-alpha.png rename to docs/developer-guide/img/linear-gradient-diff-alpha.png diff --git a/docs/developer-guide/img/developer-guide/linear-gradient-to-left.png b/docs/developer-guide/img/linear-gradient-to-left.png similarity index 100% rename from docs/developer-guide/img/developer-guide/linear-gradient-to-left.png rename to docs/developer-guide/img/linear-gradient-to-left.png diff --git a/docs/developer-guide/img/developer-guide/linear-gradient-to-top.png b/docs/developer-guide/img/linear-gradient-to-top.png similarity index 100% rename from docs/developer-guide/img/developer-guide/linear-gradient-to-top.png rename to docs/developer-guide/img/linear-gradient-to-top.png diff --git a/docs/developer-guide/img/developer-guide/lineto-example.png b/docs/developer-guide/img/lineto-example.png similarity index 100% rename from docs/developer-guide/img/developer-guide/lineto-example.png rename to docs/developer-guide/img/lineto-example.png diff --git a/docs/developer-guide/img/developer-guide/login-ios-provisioning.png b/docs/developer-guide/img/login-ios-provisioning.png similarity index 100% rename from docs/developer-guide/img/developer-guide/login-ios-provisioning.png rename to docs/developer-guide/img/login-ios-provisioning.png diff --git a/docs/developer-guide/img/developer-guide/lwuit-screenshot.png b/docs/developer-guide/img/lwuit-screenshot.png similarity index 100% rename from docs/developer-guide/img/developer-guide/lwuit-screenshot.png rename to docs/developer-guide/img/lwuit-screenshot.png diff --git a/docs/developer-guide/img/developer-guide/mac-desktop-entitlements.png b/docs/developer-guide/img/mac-desktop-entitlements.png similarity index 100% rename from docs/developer-guide/img/developer-guide/mac-desktop-entitlements.png rename to docs/developer-guide/img/mac-desktop-entitlements.png diff --git a/docs/developer-guide/img/developer-guide/mac-desktop-export-certificates-as-p12.png b/docs/developer-guide/img/mac-desktop-export-certificates-as-p12.png similarity index 100% rename from docs/developer-guide/img/developer-guide/mac-desktop-export-certificates-as-p12.png rename to docs/developer-guide/img/mac-desktop-export-certificates-as-p12.png diff --git a/docs/developer-guide/img/developer-guide/mac-desktop-settings-button.png b/docs/developer-guide/img/mac-desktop-settings-button.png similarity index 100% rename from docs/developer-guide/img/developer-guide/mac-desktop-settings-button.png rename to docs/developer-guide/img/mac-desktop-settings-button.png diff --git a/docs/developer-guide/img/developer-guide/mac-desktop-settings-form.png b/docs/developer-guide/img/mac-desktop-settings-form.png similarity index 100% rename from docs/developer-guide/img/developer-guide/mac-desktop-settings-form.png rename to docs/developer-guide/img/mac-desktop-settings-form.png diff --git a/docs/developer-guide/img/developer-guide/mac-developer-certificates.png b/docs/developer-guide/img/mac-developer-certificates.png similarity index 100% rename from docs/developer-guide/img/developer-guide/mac-developer-certificates.png rename to docs/developer-guide/img/mac-developer-certificates.png diff --git a/docs/developer-guide/img/developer-guide/mac-developer-guide-what-type-of-certificate.png b/docs/developer-guide/img/mac-developer-guide-what-type-of-certificate.png similarity index 100% rename from docs/developer-guide/img/developer-guide/mac-developer-guide-what-type-of-certificate.png rename to docs/developer-guide/img/mac-developer-guide-what-type-of-certificate.png diff --git a/docs/developer-guide/img/developer-guide/map-loc.png b/docs/developer-guide/img/map-loc.png similarity index 100% rename from docs/developer-guide/img/developer-guide/map-loc.png rename to docs/developer-guide/img/map-loc.png diff --git a/docs/developer-guide/img/developer-guide/mapcomponent.png b/docs/developer-guide/img/mapcomponent.png similarity index 100% rename from docs/developer-guide/img/developer-guide/mapcomponent.png rename to docs/developer-guide/img/mapcomponent.png diff --git a/docs/developer-guide/img/developer-guide/marshmallow-permissions-codenameone-prompt.png b/docs/developer-guide/img/marshmallow-permissions-codenameone-prompt.png similarity index 100% rename from docs/developer-guide/img/developer-guide/marshmallow-permissions-codenameone-prompt.png rename to docs/developer-guide/img/marshmallow-permissions-codenameone-prompt.png diff --git a/docs/developer-guide/img/developer-guide/marshmallow-permissions-first-request.png b/docs/developer-guide/img/marshmallow-permissions-first-request.png similarity index 100% rename from docs/developer-guide/img/developer-guide/marshmallow-permissions-first-request.png rename to docs/developer-guide/img/marshmallow-permissions-first-request.png diff --git a/docs/developer-guide/img/developer-guide/marshmallow-permissions-level21.png b/docs/developer-guide/img/marshmallow-permissions-level21.png similarity index 100% rename from docs/developer-guide/img/developer-guide/marshmallow-permissions-level21.png rename to docs/developer-guide/img/marshmallow-permissions-level21.png diff --git a/docs/developer-guide/img/developer-guide/marshmallow-permissions-level23.png b/docs/developer-guide/img/marshmallow-permissions-level23.png similarity index 100% rename from docs/developer-guide/img/developer-guide/marshmallow-permissions-level23.png rename to docs/developer-guide/img/marshmallow-permissions-level23.png diff --git a/docs/developer-guide/img/developer-guide/marshmallow-permissions-second-request.png b/docs/developer-guide/img/marshmallow-permissions-second-request.png similarity index 100% rename from docs/developer-guide/img/developer-guide/marshmallow-permissions-second-request.png rename to docs/developer-guide/img/marshmallow-permissions-second-request.png diff --git a/docs/developer-guide/img/developer-guide/media-audio-recording-example.png b/docs/developer-guide/img/media-audio-recording-example.png similarity index 100% rename from docs/developer-guide/img/developer-guide/media-audio-recording-example.png rename to docs/developer-guide/img/media-audio-recording-example.png diff --git a/docs/developer-guide/img/developer-guide/mig-layout.png b/docs/developer-guide/img/mig-layout.png similarity index 100% rename from docs/developer-guide/img/developer-guide/mig-layout.png rename to docs/developer-guide/img/mig-layout.png diff --git a/docs/developer-guide/img/developer-guide/mighty-morphing-components-1.png b/docs/developer-guide/img/mighty-morphing-components-1.png similarity index 100% rename from docs/developer-guide/img/developer-guide/mighty-morphing-components-1.png rename to docs/developer-guide/img/mighty-morphing-components-1.png diff --git a/docs/developer-guide/img/developer-guide/mvc.png b/docs/developer-guide/img/mvc.png similarity index 100% rename from docs/developer-guide/img/developer-guide/mvc.png rename to docs/developer-guide/img/mvc.png diff --git a/docs/developer-guide/img/developer-guide/native-interfaces-generate-menu.png b/docs/developer-guide/img/native-interfaces-generate-menu.png similarity index 100% rename from docs/developer-guide/img/developer-guide/native-interfaces-generate-menu.png rename to docs/developer-guide/img/native-interfaces-generate-menu.png diff --git a/docs/developer-guide/img/developer-guide/native-interfaces-generated-existing.png b/docs/developer-guide/img/native-interfaces-generated-existing.png similarity index 100% rename from docs/developer-guide/img/developer-guide/native-interfaces-generated-existing.png rename to docs/developer-guide/img/native-interfaces-generated-existing.png diff --git a/docs/developer-guide/img/developer-guide/native-interfaces-generated.png b/docs/developer-guide/img/native-interfaces-generated.png similarity index 100% rename from docs/developer-guide/img/developer-guide/native-interfaces-generated.png rename to docs/developer-guide/img/native-interfaces-generated.png diff --git a/docs/developer-guide/img/developer-guide/native-interfaces-native-hierarchy.png b/docs/developer-guide/img/native-interfaces-native-hierarchy.png similarity index 100% rename from docs/developer-guide/img/developer-guide/native-interfaces-native-hierarchy.png rename to docs/developer-guide/img/native-interfaces-native-hierarchy.png diff --git a/docs/developer-guide/img/developer-guide/native-theme-menu.png b/docs/developer-guide/img/native-theme-menu.png similarity index 100% rename from docs/developer-guide/img/developer-guide/native-theme-menu.png rename to docs/developer-guide/img/native-theme-menu.png diff --git a/docs/developer-guide/img/developer-guide/netbeans-gui-builder-step-1.png b/docs/developer-guide/img/netbeans-gui-builder-step-1.png similarity index 100% rename from docs/developer-guide/img/developer-guide/netbeans-gui-builder-step-1.png rename to docs/developer-guide/img/netbeans-gui-builder-step-1.png diff --git a/docs/developer-guide/img/developer-guide/netbeans-gui-builder-step-2.png b/docs/developer-guide/img/netbeans-gui-builder-step-2.png similarity index 100% rename from docs/developer-guide/img/developer-guide/netbeans-gui-builder-step-2.png rename to docs/developer-guide/img/netbeans-gui-builder-step-2.png diff --git a/docs/developer-guide/img/developer-guide/netbeans-gui-builder-step-3.png b/docs/developer-guide/img/netbeans-gui-builder-step-3.png similarity index 100% rename from docs/developer-guide/img/developer-guide/netbeans-gui-builder-step-3.png rename to docs/developer-guide/img/netbeans-gui-builder-step-3.png diff --git a/docs/developer-guide/img/developer-guide/netbeans-gui-builder-step-4.png b/docs/developer-guide/img/netbeans-gui-builder-step-4.png similarity index 100% rename from docs/developer-guide/img/developer-guide/netbeans-gui-builder-step-4.png rename to docs/developer-guide/img/netbeans-gui-builder-step-4.png diff --git a/docs/developer-guide/img/developer-guide/network-monitor.png b/docs/developer-guide/img/network-monitor.png similarity index 100% rename from docs/developer-guide/img/developer-guide/network-monitor.png rename to docs/developer-guide/img/network-monitor.png diff --git a/docs/developer-guide/img/developer-guide/network-sliderbridge.png b/docs/developer-guide/img/network-sliderbridge.png similarity index 100% rename from docs/developer-guide/img/developer-guide/network-sliderbridge.png rename to docs/developer-guide/img/network-sliderbridge.png diff --git a/docs/developer-guide/img/developer-guide/network-speed.png b/docs/developer-guide/img/network-speed.png similarity index 100% rename from docs/developer-guide/img/developer-guide/network-speed.png rename to docs/developer-guide/img/network-speed.png diff --git a/docs/developer-guide/img/developer-guide/new-gui-builder-component-tree-palette-inspector.png b/docs/developer-guide/img/new-gui-builder-component-tree-palette-inspector.png similarity index 100% rename from docs/developer-guide/img/developer-guide/new-gui-builder-component-tree-palette-inspector.png rename to docs/developer-guide/img/new-gui-builder-component-tree-palette-inspector.png diff --git a/docs/developer-guide/img/developer-guide/new-gui-builder-drag-button.png b/docs/developer-guide/img/new-gui-builder-drag-button.png similarity index 100% rename from docs/developer-guide/img/developer-guide/new-gui-builder-drag-button.png rename to docs/developer-guide/img/new-gui-builder-drag-button.png diff --git a/docs/developer-guide/img/developer-guide/new-gui-builder-left-toolbar.png b/docs/developer-guide/img/new-gui-builder-left-toolbar.png similarity index 100% rename from docs/developer-guide/img/developer-guide/new-gui-builder-left-toolbar.png rename to docs/developer-guide/img/new-gui-builder-left-toolbar.png diff --git a/docs/developer-guide/img/developer-guide/new-gui-builder-property-sheet.png b/docs/developer-guide/img/new-gui-builder-property-sheet.png similarity index 100% rename from docs/developer-guide/img/developer-guide/new-gui-builder-property-sheet.png rename to docs/developer-guide/img/new-gui-builder-property-sheet.png diff --git a/docs/developer-guide/img/developer-guide/new-gui-builder-right-toolbar.png b/docs/developer-guide/img/new-gui-builder-right-toolbar.png similarity index 100% rename from docs/developer-guide/img/developer-guide/new-gui-builder-right-toolbar.png rename to docs/developer-guide/img/new-gui-builder-right-toolbar.png diff --git a/docs/developer-guide/img/developer-guide/numbers.png b/docs/developer-guide/img/numbers.png similarity index 100% rename from docs/developer-guide/img/developer-guide/numbers.png rename to docs/developer-guide/img/numbers.png diff --git a/docs/developer-guide/img/developer-guide/override-platform.png b/docs/developer-guide/img/override-platform.png similarity index 100% rename from docs/developer-guide/img/developer-guide/override-platform.png rename to docs/developer-guide/img/override-platform.png diff --git a/docs/developer-guide/img/developer-guide/override-resource.png b/docs/developer-guide/img/override-resource.png similarity index 100% rename from docs/developer-guide/img/developer-guide/override-resource.png rename to docs/developer-guide/img/override-resource.png diff --git a/docs/developer-guide/img/developer-guide/p12-export.png b/docs/developer-guide/img/p12-export.png similarity index 100% rename from docs/developer-guide/img/developer-guide/p12-export.png rename to docs/developer-guide/img/p12-export.png diff --git a/docs/developer-guide/img/developer-guide/package-id-app-id.png b/docs/developer-guide/img/package-id-app-id.png similarity index 100% rename from docs/developer-guide/img/developer-guide/package-id-app-id.png rename to docs/developer-guide/img/package-id-app-id.png diff --git a/docs/developer-guide/img/developer-guide/padding.png b/docs/developer-guide/img/padding.png similarity index 100% rename from docs/developer-guide/img/developer-guide/padding.png rename to docs/developer-guide/img/padding.png diff --git a/docs/developer-guide/img/developer-guide/performance-image-remove-dpi.png b/docs/developer-guide/img/performance-image-remove-dpi.png similarity index 100% rename from docs/developer-guide/img/developer-guide/performance-image-remove-dpi.png rename to docs/developer-guide/img/performance-image-remove-dpi.png diff --git a/docs/developer-guide/img/developer-guide/performance-image-sizes.png b/docs/developer-guide/img/performance-image-sizes.png similarity index 100% rename from docs/developer-guide/img/developer-guide/performance-image-sizes.png rename to docs/developer-guide/img/performance-image-sizes.png diff --git a/docs/developer-guide/img/developer-guide/performance-image-to-jpen.png b/docs/developer-guide/img/performance-image-to-jpen.png similarity index 100% rename from docs/developer-guide/img/developer-guide/performance-image-to-jpen.png rename to docs/developer-guide/img/performance-image-to-jpen.png diff --git a/docs/developer-guide/img/developer-guide/performance-monitor-tab-1.png b/docs/developer-guide/img/performance-monitor-tab-1.png similarity index 100% rename from docs/developer-guide/img/developer-guide/performance-monitor-tab-1.png rename to docs/developer-guide/img/performance-monitor-tab-1.png diff --git a/docs/developer-guide/img/developer-guide/performance-monitor-tab-2.png b/docs/developer-guide/img/performance-monitor-tab-2.png similarity index 100% rename from docs/developer-guide/img/developer-guide/performance-monitor-tab-2.png rename to docs/developer-guide/img/performance-monitor-tab-2.png diff --git a/docs/developer-guide/img/developer-guide/perspective-form-layers.png b/docs/developer-guide/img/perspective-form-layers.png similarity index 100% rename from docs/developer-guide/img/developer-guide/perspective-form-layers.png rename to docs/developer-guide/img/perspective-form-layers.png diff --git a/docs/developer-guide/img/developer-guide/pie_chart.png b/docs/developer-guide/img/pie_chart.png similarity index 100% rename from docs/developer-guide/img/developer-guide/pie_chart.png rename to docs/developer-guide/img/pie_chart.png diff --git a/docs/developer-guide/img/developer-guide/pixel-perfect-text-field-android-codenameone-font.png b/docs/developer-guide/img/pixel-perfect-text-field-android-codenameone-font.png similarity index 100% rename from docs/developer-guide/img/developer-guide/pixel-perfect-text-field-android-codenameone-font.png rename to docs/developer-guide/img/pixel-perfect-text-field-android-codenameone-font.png diff --git a/docs/developer-guide/img/developer-guide/pixel-perfect-text-field-error-handling-blank.png b/docs/developer-guide/img/pixel-perfect-text-field-error-handling-blank.png similarity index 100% rename from docs/developer-guide/img/developer-guide/pixel-perfect-text-field-error-handling-blank.png rename to docs/developer-guide/img/pixel-perfect-text-field-error-handling-blank.png diff --git a/docs/developer-guide/img/developer-guide/pixel-perfect-text-field-error-handling-on-ios.png b/docs/developer-guide/img/pixel-perfect-text-field-error-handling-on-ios.png similarity index 100% rename from docs/developer-guide/img/developer-guide/pixel-perfect-text-field-error-handling-on-ios.png rename to docs/developer-guide/img/pixel-perfect-text-field-error-handling-on-ios.png diff --git a/docs/developer-guide/img/developer-guide/pixel-perfect-text-field-error-handling-text.png b/docs/developer-guide/img/pixel-perfect-text-field-error-handling-text.png similarity index 100% rename from docs/developer-guide/img/developer-guide/pixel-perfect-text-field-error-handling-text.png rename to docs/developer-guide/img/pixel-perfect-text-field-error-handling-text.png diff --git a/docs/developer-guide/img/developer-guide/pixel-perfect-text-field-picker-android.png b/docs/developer-guide/img/pixel-perfect-text-field-picker-android.png similarity index 100% rename from docs/developer-guide/img/developer-guide/pixel-perfect-text-field-picker-android.png rename to docs/developer-guide/img/pixel-perfect-text-field-picker-android.png diff --git a/docs/developer-guide/img/developer-guide/pixel-perfect-text-field-picker-ios.png b/docs/developer-guide/img/pixel-perfect-text-field-picker-ios.png similarity index 100% rename from docs/developer-guide/img/developer-guide/pixel-perfect-text-field-picker-ios.png rename to docs/developer-guide/img/pixel-perfect-text-field-picker-ios.png diff --git a/docs/developer-guide/img/developer-guide/pixel-perfect-text-field-reasonable-on-ios.png b/docs/developer-guide/img/pixel-perfect-text-field-reasonable-on-ios.png similarity index 100% rename from docs/developer-guide/img/developer-guide/pixel-perfect-text-field-reasonable-on-ios.png rename to docs/developer-guide/img/pixel-perfect-text-field-reasonable-on-ios.png diff --git a/docs/developer-guide/img/developer-guide/processing-package.png b/docs/developer-guide/img/processing-package.png similarity index 100% rename from docs/developer-guide/img/developer-guide/processing-package.png rename to docs/developer-guide/img/processing-package.png diff --git a/docs/developer-guide/img/developer-guide/properties-demo-binding.png b/docs/developer-guide/img/properties-demo-binding.png similarity index 100% rename from docs/developer-guide/img/developer-guide/properties-demo-binding.png rename to docs/developer-guide/img/properties-demo-binding.png diff --git a/docs/developer-guide/img/developer-guide/provisioning-profile-details.png b/docs/developer-guide/img/provisioning-profile-details.png similarity index 100% rename from docs/developer-guide/img/developer-guide/provisioning-profile-details.png rename to docs/developer-guide/img/provisioning-profile-details.png diff --git a/docs/developer-guide/img/developer-guide/provisioning-profile-with-app-id.png b/docs/developer-guide/img/provisioning-profile-with-app-id.png similarity index 100% rename from docs/developer-guide/img/developer-guide/provisioning-profile-with-app-id.png rename to docs/developer-guide/img/provisioning-profile-with-app-id.png diff --git a/docs/developer-guide/img/developer-guide/psd-image-size.png b/docs/developer-guide/img/psd-image-size.png similarity index 100% rename from docs/developer-guide/img/developer-guide/psd-image-size.png rename to docs/developer-guide/img/psd-image-size.png diff --git a/docs/developer-guide/img/developer-guide/psd2app-image1.png b/docs/developer-guide/img/psd2app-image1.png similarity index 100% rename from docs/developer-guide/img/developer-guide/psd2app-image1.png rename to docs/developer-guide/img/psd2app-image1.png diff --git a/docs/developer-guide/img/developer-guide/psd2app-image10.png b/docs/developer-guide/img/psd2app-image10.png similarity index 100% rename from docs/developer-guide/img/developer-guide/psd2app-image10.png rename to docs/developer-guide/img/psd2app-image10.png diff --git a/docs/developer-guide/img/developer-guide/psd2app-image11.png b/docs/developer-guide/img/psd2app-image11.png similarity index 100% rename from docs/developer-guide/img/developer-guide/psd2app-image11.png rename to docs/developer-guide/img/psd2app-image11.png diff --git a/docs/developer-guide/img/developer-guide/psd2app-image12.png b/docs/developer-guide/img/psd2app-image12.png similarity index 100% rename from docs/developer-guide/img/developer-guide/psd2app-image12.png rename to docs/developer-guide/img/psd2app-image12.png diff --git a/docs/developer-guide/img/developer-guide/psd2app-image13.png b/docs/developer-guide/img/psd2app-image13.png similarity index 100% rename from docs/developer-guide/img/developer-guide/psd2app-image13.png rename to docs/developer-guide/img/psd2app-image13.png diff --git a/docs/developer-guide/img/developer-guide/psd2app-image14.png b/docs/developer-guide/img/psd2app-image14.png similarity index 100% rename from docs/developer-guide/img/developer-guide/psd2app-image14.png rename to docs/developer-guide/img/psd2app-image14.png diff --git a/docs/developer-guide/img/developer-guide/psd2app-image15.png b/docs/developer-guide/img/psd2app-image15.png similarity index 100% rename from docs/developer-guide/img/developer-guide/psd2app-image15.png rename to docs/developer-guide/img/psd2app-image15.png diff --git a/docs/developer-guide/img/developer-guide/psd2app-image16.png b/docs/developer-guide/img/psd2app-image16.png similarity index 100% rename from docs/developer-guide/img/developer-guide/psd2app-image16.png rename to docs/developer-guide/img/psd2app-image16.png diff --git a/docs/developer-guide/img/developer-guide/psd2app-image2.png b/docs/developer-guide/img/psd2app-image2.png similarity index 100% rename from docs/developer-guide/img/developer-guide/psd2app-image2.png rename to docs/developer-guide/img/psd2app-image2.png diff --git a/docs/developer-guide/img/developer-guide/psd2app-image3.png b/docs/developer-guide/img/psd2app-image3.png similarity index 100% rename from docs/developer-guide/img/developer-guide/psd2app-image3.png rename to docs/developer-guide/img/psd2app-image3.png diff --git a/docs/developer-guide/img/developer-guide/psd2app-image4.png b/docs/developer-guide/img/psd2app-image4.png similarity index 100% rename from docs/developer-guide/img/developer-guide/psd2app-image4.png rename to docs/developer-guide/img/psd2app-image4.png diff --git a/docs/developer-guide/img/developer-guide/psd2app-image5.png b/docs/developer-guide/img/psd2app-image5.png similarity index 100% rename from docs/developer-guide/img/developer-guide/psd2app-image5.png rename to docs/developer-guide/img/psd2app-image5.png diff --git a/docs/developer-guide/img/developer-guide/psd2app-image6.png b/docs/developer-guide/img/psd2app-image6.png similarity index 100% rename from docs/developer-guide/img/developer-guide/psd2app-image6.png rename to docs/developer-guide/img/psd2app-image6.png diff --git a/docs/developer-guide/img/developer-guide/psd2app-image7.png b/docs/developer-guide/img/psd2app-image7.png similarity index 100% rename from docs/developer-guide/img/developer-guide/psd2app-image7.png rename to docs/developer-guide/img/psd2app-image7.png diff --git a/docs/developer-guide/img/developer-guide/psd2app-image8.png b/docs/developer-guide/img/psd2app-image8.png similarity index 100% rename from docs/developer-guide/img/developer-guide/psd2app-image8.png rename to docs/developer-guide/img/psd2app-image8.png diff --git a/docs/developer-guide/img/developer-guide/psd2app-image9.png b/docs/developer-guide/img/psd2app-image9.png similarity index 100% rename from docs/developer-guide/img/developer-guide/psd2app-image9.png rename to docs/developer-guide/img/psd2app-image9.png diff --git a/docs/developer-guide/img/developer-guide/pull-to-refresh.png b/docs/developer-guide/img/pull-to-refresh.png similarity index 100% rename from docs/developer-guide/img/developer-guide/pull-to-refresh.png rename to docs/developer-guide/img/pull-to-refresh.png diff --git a/docs/developer-guide/img/developer-guide/push-actions-android.png b/docs/developer-guide/img/push-actions-android.png similarity index 100% rename from docs/developer-guide/img/developer-guide/push-actions-android.png rename to docs/developer-guide/img/push-actions-android.png diff --git a/docs/developer-guide/img/developer-guide/push-actions-chrome-desktop.png b/docs/developer-guide/img/push-actions-chrome-desktop.png similarity index 100% rename from docs/developer-guide/img/developer-guide/push-actions-chrome-desktop.png rename to docs/developer-guide/img/push-actions-chrome-desktop.png diff --git a/docs/developer-guide/img/developer-guide/push-actions-ios.png b/docs/developer-guide/img/push-actions-ios.png similarity index 100% rename from docs/developer-guide/img/developer-guide/push-actions-ios.png rename to docs/developer-guide/img/push-actions-ios.png diff --git a/docs/developer-guide/img/developer-guide/push-actions-simulator.png b/docs/developer-guide/img/push-actions-simulator.png similarity index 100% rename from docs/developer-guide/img/developer-guide/push-actions-simulator.png rename to docs/developer-guide/img/push-actions-simulator.png diff --git a/docs/developer-guide/img/developer-guide/push-android-firebase-console-1.png b/docs/developer-guide/img/push-android-firebase-console-1.png similarity index 100% rename from docs/developer-guide/img/developer-guide/push-android-firebase-console-1.png rename to docs/developer-guide/img/push-android-firebase-console-1.png diff --git a/docs/developer-guide/img/developer-guide/push-fcm-add-app-form.png b/docs/developer-guide/img/push-fcm-add-app-form.png similarity index 100% rename from docs/developer-guide/img/developer-guide/push-fcm-add-app-form.png rename to docs/developer-guide/img/push-fcm-add-app-form.png diff --git a/docs/developer-guide/img/developer-guide/push-fcm-add-project.png b/docs/developer-guide/img/push-fcm-add-project.png similarity index 100% rename from docs/developer-guide/img/developer-guide/push-fcm-add-project.png rename to docs/developer-guide/img/push-fcm-add-project.png diff --git a/docs/developer-guide/img/developer-guide/push-fcm-dashboard.png b/docs/developer-guide/img/push-fcm-dashboard.png similarity index 100% rename from docs/developer-guide/img/developer-guide/push-fcm-dashboard.png rename to docs/developer-guide/img/push-fcm-dashboard.png diff --git a/docs/developer-guide/img/developer-guide/push-fcm-download-config-file.png b/docs/developer-guide/img/push-fcm-download-config-file.png similarity index 100% rename from docs/developer-guide/img/developer-guide/push-fcm-download-config-file.png rename to docs/developer-guide/img/push-fcm-download-config-file.png diff --git a/docs/developer-guide/img/developer-guide/push-fcm-enable-notifications.png b/docs/developer-guide/img/push-fcm-enable-notifications.png similarity index 100% rename from docs/developer-guide/img/developer-guide/push-fcm-enable-notifications.png rename to docs/developer-guide/img/push-fcm-enable-notifications.png diff --git a/docs/developer-guide/img/developer-guide/push-fcm-grow-menu.png b/docs/developer-guide/img/push-fcm-grow-menu.png similarity index 100% rename from docs/developer-guide/img/developer-guide/push-fcm-grow-menu.png rename to docs/developer-guide/img/push-fcm-grow-menu.png diff --git a/docs/developer-guide/img/developer-guide/push-fcm-project-settings-context-menu.png b/docs/developer-guide/img/push-fcm-project-settings-context-menu.png similarity index 100% rename from docs/developer-guide/img/developer-guide/push-fcm-project-settings-context-menu.png rename to docs/developer-guide/img/push-fcm-project-settings-context-menu.png diff --git a/docs/developer-guide/img/developer-guide/push-fcm-server-key.png b/docs/developer-guide/img/push-fcm-server-key.png similarity index 100% rename from docs/developer-guide/img/developer-guide/push-fcm-server-key.png rename to docs/developer-guide/img/push-fcm-server-key.png diff --git a/docs/developer-guide/img/developer-guide/push-hello-world-simulator-paused.png b/docs/developer-guide/img/push-hello-world-simulator-paused.png similarity index 100% rename from docs/developer-guide/img/developer-guide/push-hello-world-simulator-paused.png rename to docs/developer-guide/img/push-hello-world-simulator-paused.png diff --git a/docs/developer-guide/img/developer-guide/push-pause-app.png b/docs/developer-guide/img/push-pause-app.png similarity index 100% rename from docs/developer-guide/img/developer-guide/push-pause-app.png rename to docs/developer-guide/img/push-pause-app.png diff --git a/docs/developer-guide/img/developer-guide/push-push-simulation-menuitem.png b/docs/developer-guide/img/push-push-simulation-menuitem.png similarity index 100% rename from docs/developer-guide/img/developer-guide/push-push-simulation-menuitem.png rename to docs/developer-guide/img/push-push-simulation-menuitem.png diff --git a/docs/developer-guide/img/developer-guide/push-push-simulator-test-1.png b/docs/developer-guide/img/push-push-simulator-test-1.png similarity index 100% rename from docs/developer-guide/img/developer-guide/push-push-simulator-test-1.png rename to docs/developer-guide/img/push-push-simulator-test-1.png diff --git a/docs/developer-guide/img/developer-guide/push-token.png b/docs/developer-guide/img/push-token.png similarity index 100% rename from docs/developer-guide/img/developer-guide/push-token.png rename to docs/developer-guide/img/push-token.png diff --git a/docs/developer-guide/img/developer-guide/push-type-1-example-hello-android.png b/docs/developer-guide/img/push-type-1-example-hello-android.png similarity index 100% rename from docs/developer-guide/img/developer-guide/push-type-1-example-hello-android.png rename to docs/developer-guide/img/push-type-1-example-hello-android.png diff --git a/docs/developer-guide/img/developer-guide/push-type-1-example-hello-chrome-desktop.png b/docs/developer-guide/img/push-type-1-example-hello-chrome-desktop.png similarity index 100% rename from docs/developer-guide/img/developer-guide/push-type-1-example-hello-chrome-desktop.png rename to docs/developer-guide/img/push-type-1-example-hello-chrome-desktop.png diff --git a/docs/developer-guide/img/developer-guide/push-type-1-example-hello-ios.png b/docs/developer-guide/img/push-type-1-example-hello-ios.png similarity index 100% rename from docs/developer-guide/img/developer-guide/push-type-1-example-hello-ios.png rename to docs/developer-guide/img/push-type-1-example-hello-ios.png diff --git a/docs/developer-guide/img/developer-guide/push-type-100-example-5-ios.png b/docs/developer-guide/img/push-type-100-example-5-ios.png similarity index 100% rename from docs/developer-guide/img/developer-guide/push-type-100-example-5-ios.png rename to docs/developer-guide/img/push-type-100-example-5-ios.png diff --git a/docs/developer-guide/img/developer-guide/push-type-3-simulator.png b/docs/developer-guide/img/push-type-3-simulator.png similarity index 100% rename from docs/developer-guide/img/developer-guide/push-type-3-simulator.png rename to docs/developer-guide/img/push-type-3-simulator.png diff --git a/docs/developer-guide/img/developer-guide/push-type-4-example-hello-android.png b/docs/developer-guide/img/push-type-4-example-hello-android.png similarity index 100% rename from docs/developer-guide/img/developer-guide/push-type-4-example-hello-android.png rename to docs/developer-guide/img/push-type-4-example-hello-android.png diff --git a/docs/developer-guide/img/developer-guide/push-type-4-example-hello-firefox-desktop.png b/docs/developer-guide/img/push-type-4-example-hello-firefox-desktop.png similarity index 100% rename from docs/developer-guide/img/developer-guide/push-type-4-example-hello-firefox-desktop.png rename to docs/developer-guide/img/push-type-4-example-hello-firefox-desktop.png diff --git a/docs/developer-guide/img/developer-guide/push-type-4-example-hello-ios.png b/docs/developer-guide/img/push-type-4-example-hello-ios.png similarity index 100% rename from docs/developer-guide/img/developer-guide/push-type-4-example-hello-ios.png rename to docs/developer-guide/img/push-type-4-example-hello-ios.png diff --git a/docs/developer-guide/img/developer-guide/push-type-4-simulator-paused.png b/docs/developer-guide/img/push-type-4-simulator-paused.png similarity index 100% rename from docs/developer-guide/img/developer-guide/push-type-4-simulator-paused.png rename to docs/developer-guide/img/push-type-4-simulator-paused.png diff --git a/docs/developer-guide/img/developer-guide/push-type-99-example-hello-android.png b/docs/developer-guide/img/push-type-99-example-hello-android.png similarity index 100% rename from docs/developer-guide/img/developer-guide/push-type-99-example-hello-android.png rename to docs/developer-guide/img/push-type-99-example-hello-android.png diff --git a/docs/developer-guide/img/developer-guide/push-type-99-example-hello-ios.png b/docs/developer-guide/img/push-type-99-example-hello-ios.png similarity index 100% rename from docs/developer-guide/img/developer-guide/push-type-99-example-hello-ios.png rename to docs/developer-guide/img/push-type-99-example-hello-ios.png diff --git a/docs/developer-guide/img/developer-guide/push-type-99-hello-world-simulator-paused.png b/docs/developer-guide/img/push-type-99-hello-world-simulator-paused.png similarity index 100% rename from docs/developer-guide/img/developer-guide/push-type-99-hello-world-simulator-paused.png rename to docs/developer-guide/img/push-type-99-hello-world-simulator-paused.png diff --git a/docs/developer-guide/img/developer-guide/quadto-example.png b/docs/developer-guide/img/quadto-example.png similarity index 100% rename from docs/developer-guide/img/developer-guide/quadto-example.png rename to docs/developer-guide/img/quadto-example.png diff --git a/docs/developer-guide/img/developer-guide/radial-gradient-c100.png b/docs/developer-guide/img/radial-gradient-c100.png similarity index 100% rename from docs/developer-guide/img/developer-guide/radial-gradient-c100.png rename to docs/developer-guide/img/radial-gradient-c100.png diff --git a/docs/developer-guide/img/developer-guide/radial-gradient-c200.png b/docs/developer-guide/img/radial-gradient-c200.png similarity index 100% rename from docs/developer-guide/img/developer-guide/radial-gradient-c200.png rename to docs/developer-guide/img/radial-gradient-c200.png diff --git a/docs/developer-guide/img/developer-guide/radial-gradient-xeq0.png b/docs/developer-guide/img/radial-gradient-xeq0.png similarity index 100% rename from docs/developer-guide/img/developer-guide/radial-gradient-xeq0.png rename to docs/developer-guide/img/radial-gradient-xeq0.png diff --git a/docs/developer-guide/img/developer-guide/radial-gradient-xeq1.png b/docs/developer-guide/img/radial-gradient-xeq1.png similarity index 100% rename from docs/developer-guide/img/developer-guide/radial-gradient-xeq1.png rename to docs/developer-guide/img/radial-gradient-xeq1.png diff --git a/docs/developer-guide/img/developer-guide/raised-flat-buttons-purple.png b/docs/developer-guide/img/raised-flat-buttons-purple.png similarity index 100% rename from docs/developer-guide/img/developer-guide/raised-flat-buttons-purple.png rename to docs/developer-guide/img/raised-flat-buttons-purple.png diff --git a/docs/developer-guide/img/developer-guide/raised-flat-buttons.png b/docs/developer-guide/img/raised-flat-buttons.png similarity index 100% rename from docs/developer-guide/img/developer-guide/raised-flat-buttons.png rename to docs/developer-guide/img/raised-flat-buttons.png diff --git a/docs/developer-guide/img/developer-guide/range_bar_chart.png b/docs/developer-guide/img/range_bar_chart.png similarity index 100% rename from docs/developer-guide/img/developer-guide/range_bar_chart.png rename to docs/developer-guide/img/range_bar_chart.png diff --git a/docs/developer-guide/img/developer-guide/rectangle_component1.png b/docs/developer-guide/img/rectangle_component1.png similarity index 100% rename from docs/developer-guide/img/developer-guide/rectangle_component1.png rename to docs/developer-guide/img/rectangle_component1.png diff --git a/docs/developer-guide/img/developer-guide/rotation1.png b/docs/developer-guide/img/rotation1.png similarity index 100% rename from docs/developer-guide/img/developer-guide/rotation1.png rename to docs/developer-guide/img/rotation1.png diff --git a/docs/developer-guide/img/developer-guide/rotation2.png b/docs/developer-guide/img/rotation2.png similarity index 100% rename from docs/developer-guide/img/developer-guide/rotation2.png rename to docs/developer-guide/img/rotation2.png diff --git a/docs/developer-guide/img/developer-guide/rotation3.png b/docs/developer-guide/img/rotation3.png similarity index 100% rename from docs/developer-guide/img/developer-guide/rotation3.png rename to docs/developer-guide/img/rotation3.png diff --git a/docs/developer-guide/img/developer-guide/round-border-theme.png b/docs/developer-guide/img/round-border-theme.png similarity index 100% rename from docs/developer-guide/img/developer-guide/round-border-theme.png rename to docs/developer-guide/img/round-border-theme.png diff --git a/docs/developer-guide/img/developer-guide/rounded-rectangle-border.png b/docs/developer-guide/img/rounded-rectangle-border.png similarity index 100% rename from docs/developer-guide/img/developer-guide/rounded-rectangle-border.png rename to docs/developer-guide/img/rounded-rectangle-border.png diff --git a/docs/developer-guide/img/developer-guide/scatter_chart.png b/docs/developer-guide/img/scatter_chart.png similarity index 100% rename from docs/developer-guide/img/developer-guide/scatter_chart.png rename to docs/developer-guide/img/scatter_chart.png diff --git a/docs/developer-guide/img/developer-guide/select-image-resolutions.png b/docs/developer-guide/img/select-image-resolutions.png similarity index 100% rename from docs/developer-guide/img/developer-guide/select-image-resolutions.png rename to docs/developer-guide/img/select-image-resolutions.png diff --git a/docs/developer-guide/img/developer-guide/shaped-clipping.png b/docs/developer-guide/img/shaped-clipping.png similarity index 100% rename from docs/developer-guide/img/developer-guide/shaped-clipping.png rename to docs/developer-guide/img/shaped-clipping.png diff --git a/docs/developer-guide/img/developer-guide/simulate-permission-prompts.png b/docs/developer-guide/img/simulate-permission-prompts.png similarity index 100% rename from docs/developer-guide/img/developer-guide/simulate-permission-prompts.png rename to docs/developer-guide/img/simulate-permission-prompts.png diff --git a/docs/developer-guide/img/developer-guide/slider.png b/docs/developer-guide/img/slider.png similarity index 100% rename from docs/developer-guide/img/developer-guide/slider.png rename to docs/developer-guide/img/slider.png diff --git a/docs/developer-guide/img/developer-guide/splitpane.png b/docs/developer-guide/img/splitpane.png similarity index 100% rename from docs/developer-guide/img/developer-guide/splitpane.png rename to docs/developer-guide/img/splitpane.png diff --git a/docs/developer-guide/img/developer-guide/sql-entry.png b/docs/developer-guide/img/sql-entry.png similarity index 100% rename from docs/developer-guide/img/developer-guide/sql-entry.png rename to docs/developer-guide/img/sql-entry.png diff --git a/docs/developer-guide/img/developer-guide/sql-table.png b/docs/developer-guide/img/sql-table.png similarity index 100% rename from docs/developer-guide/img/developer-guide/sql-table.png rename to docs/developer-guide/img/sql-table.png diff --git a/docs/developer-guide/img/developer-guide/storage-content.png b/docs/developer-guide/img/storage-content.png similarity index 100% rename from docs/developer-guide/img/developer-guide/storage-content.png rename to docs/developer-guide/img/storage-content.png diff --git a/docs/developer-guide/img/developer-guide/storage-list.png b/docs/developer-guide/img/storage-list.png similarity index 100% rename from docs/developer-guide/img/developer-guide/storage-list.png rename to docs/developer-guide/img/storage-list.png diff --git a/docs/developer-guide/img/developer-guide/styled-sidemenu-1.png b/docs/developer-guide/img/styled-sidemenu-1.png similarity index 100% rename from docs/developer-guide/img/developer-guide/styled-sidemenu-1.png rename to docs/developer-guide/img/styled-sidemenu-1.png diff --git a/docs/developer-guide/img/developer-guide/styled-sidemenu-10.png b/docs/developer-guide/img/styled-sidemenu-10.png similarity index 100% rename from docs/developer-guide/img/developer-guide/styled-sidemenu-10.png rename to docs/developer-guide/img/styled-sidemenu-10.png diff --git a/docs/developer-guide/img/developer-guide/styled-sidemenu-11.png b/docs/developer-guide/img/styled-sidemenu-11.png similarity index 100% rename from docs/developer-guide/img/developer-guide/styled-sidemenu-11.png rename to docs/developer-guide/img/styled-sidemenu-11.png diff --git a/docs/developer-guide/img/developer-guide/styled-sidemenu-2.png b/docs/developer-guide/img/styled-sidemenu-2.png similarity index 100% rename from docs/developer-guide/img/developer-guide/styled-sidemenu-2.png rename to docs/developer-guide/img/styled-sidemenu-2.png diff --git a/docs/developer-guide/img/developer-guide/styled-sidemenu-3.png b/docs/developer-guide/img/styled-sidemenu-3.png similarity index 100% rename from docs/developer-guide/img/developer-guide/styled-sidemenu-3.png rename to docs/developer-guide/img/styled-sidemenu-3.png diff --git a/docs/developer-guide/img/developer-guide/styled-sidemenu-4.png b/docs/developer-guide/img/styled-sidemenu-4.png similarity index 100% rename from docs/developer-guide/img/developer-guide/styled-sidemenu-4.png rename to docs/developer-guide/img/styled-sidemenu-4.png diff --git a/docs/developer-guide/img/developer-guide/styled-sidemenu-5.png b/docs/developer-guide/img/styled-sidemenu-5.png similarity index 100% rename from docs/developer-guide/img/developer-guide/styled-sidemenu-5.png rename to docs/developer-guide/img/styled-sidemenu-5.png diff --git a/docs/developer-guide/img/developer-guide/styled-sidemenu-6.png b/docs/developer-guide/img/styled-sidemenu-6.png similarity index 100% rename from docs/developer-guide/img/developer-guide/styled-sidemenu-6.png rename to docs/developer-guide/img/styled-sidemenu-6.png diff --git a/docs/developer-guide/img/developer-guide/styled-sidemenu-7.png b/docs/developer-guide/img/styled-sidemenu-7.png similarity index 100% rename from docs/developer-guide/img/developer-guide/styled-sidemenu-7.png rename to docs/developer-guide/img/styled-sidemenu-7.png diff --git a/docs/developer-guide/img/developer-guide/styled-sidemenu-8.png b/docs/developer-guide/img/styled-sidemenu-8.png similarity index 100% rename from docs/developer-guide/img/developer-guide/styled-sidemenu-8.png rename to docs/developer-guide/img/styled-sidemenu-8.png diff --git a/docs/developer-guide/img/developer-guide/styled-sidemenu-9.png b/docs/developer-guide/img/styled-sidemenu-9.png similarity index 100% rename from docs/developer-guide/img/developer-guide/styled-sidemenu-9.png rename to docs/developer-guide/img/styled-sidemenu-9.png diff --git a/docs/developer-guide/img/developer-guide/styled-sidemenu-result.png b/docs/developer-guide/img/styled-sidemenu-result.png similarity index 100% rename from docs/developer-guide/img/developer-guide/styled-sidemenu-result.png rename to docs/developer-guide/img/styled-sidemenu-result.png diff --git a/docs/developer-guide/img/developer-guide/table-layout-2x2.png b/docs/developer-guide/img/table-layout-2x2.png similarity index 100% rename from docs/developer-guide/img/developer-guide/table-layout-2x2.png rename to docs/developer-guide/img/table-layout-2x2.png diff --git a/docs/developer-guide/img/developer-guide/table-layout-constraints.png b/docs/developer-guide/img/table-layout-constraints.png similarity index 100% rename from docs/developer-guide/img/developer-guide/table-layout-constraints.png rename to docs/developer-guide/img/table-layout-constraints.png diff --git a/docs/developer-guide/img/developer-guide/table-layout-enclose.png b/docs/developer-guide/img/table-layout-enclose.png similarity index 100% rename from docs/developer-guide/img/developer-guide/table-layout-enclose.png rename to docs/developer-guide/img/table-layout-enclose.png diff --git a/docs/developer-guide/img/developer-guide/tabs.png b/docs/developer-guide/img/tabs.png similarity index 100% rename from docs/developer-guide/img/developer-guide/tabs.png rename to docs/developer-guide/img/tabs.png diff --git a/docs/developer-guide/img/developer-guide/test-recorder-blank.png b/docs/developer-guide/img/test-recorder-blank.png similarity index 100% rename from docs/developer-guide/img/developer-guide/test-recorder-blank.png rename to docs/developer-guide/img/test-recorder-blank.png diff --git a/docs/developer-guide/img/developer-guide/test-recorder-in-progress.png b/docs/developer-guide/img/test-recorder-in-progress.png similarity index 100% rename from docs/developer-guide/img/developer-guide/test-recorder-in-progress.png rename to docs/developer-guide/img/test-recorder-in-progress.png diff --git a/docs/developer-guide/img/developer-guide/theme-add-edit-entry.png b/docs/developer-guide/img/theme-add-edit-entry.png similarity index 100% rename from docs/developer-guide/img/developer-guide/theme-add-edit-entry.png rename to docs/developer-guide/img/theme-add-edit-entry.png diff --git a/docs/developer-guide/img/developer-guide/theme-area-in-designer.png b/docs/developer-guide/img/theme-area-in-designer.png similarity index 100% rename from docs/developer-guide/img/developer-guide/theme-area-in-designer.png rename to docs/developer-guide/img/theme-area-in-designer.png diff --git a/docs/developer-guide/img/developer-guide/theme-background-image-aligned-bottom-left.png b/docs/developer-guide/img/theme-background-image-aligned-bottom-left.png similarity index 100% rename from docs/developer-guide/img/developer-guide/theme-background-image-aligned-bottom-left.png rename to docs/developer-guide/img/theme-background-image-aligned-bottom-left.png diff --git a/docs/developer-guide/img/developer-guide/theme-background-image-aligned-bottom-right.png b/docs/developer-guide/img/theme-background-image-aligned-bottom-right.png similarity index 100% rename from docs/developer-guide/img/developer-guide/theme-background-image-aligned-bottom-right.png rename to docs/developer-guide/img/theme-background-image-aligned-bottom-right.png diff --git a/docs/developer-guide/img/developer-guide/theme-background-image-aligned-bottom.png b/docs/developer-guide/img/theme-background-image-aligned-bottom.png similarity index 100% rename from docs/developer-guide/img/developer-guide/theme-background-image-aligned-bottom.png rename to docs/developer-guide/img/theme-background-image-aligned-bottom.png diff --git a/docs/developer-guide/img/developer-guide/theme-background-image-aligned-center.png b/docs/developer-guide/img/theme-background-image-aligned-center.png similarity index 100% rename from docs/developer-guide/img/developer-guide/theme-background-image-aligned-center.png rename to docs/developer-guide/img/theme-background-image-aligned-center.png diff --git a/docs/developer-guide/img/developer-guide/theme-background-image-aligned-left.png b/docs/developer-guide/img/theme-background-image-aligned-left.png similarity index 100% rename from docs/developer-guide/img/developer-guide/theme-background-image-aligned-left.png rename to docs/developer-guide/img/theme-background-image-aligned-left.png diff --git a/docs/developer-guide/img/developer-guide/theme-background-image-aligned-right.png b/docs/developer-guide/img/theme-background-image-aligned-right.png similarity index 100% rename from docs/developer-guide/img/developer-guide/theme-background-image-aligned-right.png rename to docs/developer-guide/img/theme-background-image-aligned-right.png diff --git a/docs/developer-guide/img/developer-guide/theme-background-image-aligned-top-left.png b/docs/developer-guide/img/theme-background-image-aligned-top-left.png similarity index 100% rename from docs/developer-guide/img/developer-guide/theme-background-image-aligned-top-left.png rename to docs/developer-guide/img/theme-background-image-aligned-top-left.png diff --git a/docs/developer-guide/img/developer-guide/theme-background-image-aligned-top-right.png b/docs/developer-guide/img/theme-background-image-aligned-top-right.png similarity index 100% rename from docs/developer-guide/img/developer-guide/theme-background-image-aligned-top-right.png rename to docs/developer-guide/img/theme-background-image-aligned-top-right.png diff --git a/docs/developer-guide/img/developer-guide/theme-background-image-aligned-top.png b/docs/developer-guide/img/theme-background-image-aligned-top.png similarity index 100% rename from docs/developer-guide/img/developer-guide/theme-background-image-aligned-top.png rename to docs/developer-guide/img/theme-background-image-aligned-top.png diff --git a/docs/developer-guide/img/developer-guide/theme-background-image-scaled-fill.png b/docs/developer-guide/img/theme-background-image-scaled-fill.png similarity index 100% rename from docs/developer-guide/img/developer-guide/theme-background-image-scaled-fill.png rename to docs/developer-guide/img/theme-background-image-scaled-fill.png diff --git a/docs/developer-guide/img/developer-guide/theme-background-image-scaled-fit.png b/docs/developer-guide/img/theme-background-image-scaled-fit.png similarity index 100% rename from docs/developer-guide/img/developer-guide/theme-background-image-scaled-fit.png rename to docs/developer-guide/img/theme-background-image-scaled-fit.png diff --git a/docs/developer-guide/img/developer-guide/theme-background-image-scaled.png b/docs/developer-guide/img/theme-background-image-scaled.png similarity index 100% rename from docs/developer-guide/img/developer-guide/theme-background-image-scaled.png rename to docs/developer-guide/img/theme-background-image-scaled.png diff --git a/docs/developer-guide/img/developer-guide/theme-background-image-tile-both.png b/docs/developer-guide/img/theme-background-image-tile-both.png similarity index 100% rename from docs/developer-guide/img/developer-guide/theme-background-image-tile-both.png rename to docs/developer-guide/img/theme-background-image-tile-both.png diff --git a/docs/developer-guide/img/developer-guide/theme-background-image-tile-horizontal-align-bottom.png b/docs/developer-guide/img/theme-background-image-tile-horizontal-align-bottom.png similarity index 100% rename from docs/developer-guide/img/developer-guide/theme-background-image-tile-horizontal-align-bottom.png rename to docs/developer-guide/img/theme-background-image-tile-horizontal-align-bottom.png diff --git a/docs/developer-guide/img/developer-guide/theme-background-image-tile-horizontal-align-center.png b/docs/developer-guide/img/theme-background-image-tile-horizontal-align-center.png similarity index 100% rename from docs/developer-guide/img/developer-guide/theme-background-image-tile-horizontal-align-center.png rename to docs/developer-guide/img/theme-background-image-tile-horizontal-align-center.png diff --git a/docs/developer-guide/img/developer-guide/theme-background-image-tile-horizontal-align-top.png b/docs/developer-guide/img/theme-background-image-tile-horizontal-align-top.png similarity index 100% rename from docs/developer-guide/img/developer-guide/theme-background-image-tile-horizontal-align-top.png rename to docs/developer-guide/img/theme-background-image-tile-horizontal-align-top.png diff --git a/docs/developer-guide/img/developer-guide/theme-background-image-tile-vertical-center-align.png b/docs/developer-guide/img/theme-background-image-tile-vertical-center-align.png similarity index 100% rename from docs/developer-guide/img/developer-guide/theme-background-image-tile-vertical-center-align.png rename to docs/developer-guide/img/theme-background-image-tile-vertical-center-align.png diff --git a/docs/developer-guide/img/developer-guide/theme-background-image-tile-vertical-left-align.png b/docs/developer-guide/img/theme-background-image-tile-vertical-left-align.png similarity index 100% rename from docs/developer-guide/img/developer-guide/theme-background-image-tile-vertical-left-align.png rename to docs/developer-guide/img/theme-background-image-tile-vertical-left-align.png diff --git a/docs/developer-guide/img/developer-guide/theme-background-image-tile-vertical-right-align.png b/docs/developer-guide/img/theme-background-image-tile-vertical-right-align.png similarity index 100% rename from docs/developer-guide/img/developer-guide/theme-background-image-tile-vertical-right-align.png rename to docs/developer-guide/img/theme-background-image-tile-vertical-right-align.png diff --git a/docs/developer-guide/img/developer-guide/theme-default-view.png b/docs/developer-guide/img/theme-default-view.png similarity index 100% rename from docs/developer-guide/img/developer-guide/theme-default-view.png rename to docs/developer-guide/img/theme-default-view.png diff --git a/docs/developer-guide/img/developer-guide/theme-entry-9-piece-wizard-stage1.png b/docs/developer-guide/img/theme-entry-9-piece-wizard-stage1.png similarity index 100% rename from docs/developer-guide/img/developer-guide/theme-entry-9-piece-wizard-stage1.png rename to docs/developer-guide/img/theme-entry-9-piece-wizard-stage1.png diff --git a/docs/developer-guide/img/developer-guide/theme-entry-9-piece-wizard-stage2-bad-border.png b/docs/developer-guide/img/theme-entry-9-piece-wizard-stage2-bad-border.png similarity index 100% rename from docs/developer-guide/img/developer-guide/theme-entry-9-piece-wizard-stage2-bad-border.png rename to docs/developer-guide/img/theme-entry-9-piece-wizard-stage2-bad-border.png diff --git a/docs/developer-guide/img/developer-guide/theme-entry-9-piece-wizard-stage2-better-border.png b/docs/developer-guide/img/theme-entry-9-piece-wizard-stage2-better-border.png similarity index 100% rename from docs/developer-guide/img/developer-guide/theme-entry-9-piece-wizard-stage2-better-border.png rename to docs/developer-guide/img/theme-entry-9-piece-wizard-stage2-better-border.png diff --git a/docs/developer-guide/img/developer-guide/theme-entry-9-piece-wizard-stage2.png b/docs/developer-guide/img/theme-entry-9-piece-wizard-stage2.png similarity index 100% rename from docs/developer-guide/img/developer-guide/theme-entry-9-piece-wizard-stage2.png rename to docs/developer-guide/img/theme-entry-9-piece-wizard-stage2.png diff --git a/docs/developer-guide/img/developer-guide/theme-entry-9-piece-wizard-stage3.png b/docs/developer-guide/img/theme-entry-9-piece-wizard-stage3.png similarity index 100% rename from docs/developer-guide/img/developer-guide/theme-entry-9-piece-wizard-stage3.png rename to docs/developer-guide/img/theme-entry-9-piece-wizard-stage3.png diff --git a/docs/developer-guide/img/developer-guide/theme-entry-align.png b/docs/developer-guide/img/theme-entry-align.png similarity index 100% rename from docs/developer-guide/img/developer-guide/theme-entry-align.png rename to docs/developer-guide/img/theme-entry-align.png diff --git a/docs/developer-guide/img/developer-guide/theme-entry-border-edit-9-piece.png b/docs/developer-guide/img/theme-entry-border-edit-9-piece.png similarity index 100% rename from docs/developer-guide/img/developer-guide/theme-entry-border-edit-9-piece.png rename to docs/developer-guide/img/theme-entry-border-edit-9-piece.png diff --git a/docs/developer-guide/img/developer-guide/theme-entry-border-edit-bevel.png b/docs/developer-guide/img/theme-entry-border-edit-bevel.png similarity index 100% rename from docs/developer-guide/img/developer-guide/theme-entry-border-edit-bevel.png rename to docs/developer-guide/img/theme-entry-border-edit-bevel.png diff --git a/docs/developer-guide/img/developer-guide/theme-entry-border-edit-etched.png b/docs/developer-guide/img/theme-entry-border-edit-etched.png similarity index 100% rename from docs/developer-guide/img/developer-guide/theme-entry-border-edit-etched.png rename to docs/developer-guide/img/theme-entry-border-edit-etched.png diff --git a/docs/developer-guide/img/developer-guide/theme-entry-border-edit-horizontal-image.png b/docs/developer-guide/img/theme-entry-border-edit-horizontal-image.png similarity index 100% rename from docs/developer-guide/img/developer-guide/theme-entry-border-edit-horizontal-image.png rename to docs/developer-guide/img/theme-entry-border-edit-horizontal-image.png diff --git a/docs/developer-guide/img/developer-guide/theme-entry-border-settings.png b/docs/developer-guide/img/theme-entry-border-settings.png similarity index 100% rename from docs/developer-guide/img/developer-guide/theme-entry-border-settings.png rename to docs/developer-guide/img/theme-entry-border-settings.png diff --git a/docs/developer-guide/img/developer-guide/theme-entry-border-three-dot-button.png b/docs/developer-guide/img/theme-entry-border-three-dot-button.png similarity index 100% rename from docs/developer-guide/img/developer-guide/theme-entry-border-three-dot-button.png rename to docs/developer-guide/img/theme-entry-border-three-dot-button.png diff --git a/docs/developer-guide/img/developer-guide/theme-entry-color.png b/docs/developer-guide/img/theme-entry-color.png similarity index 100% rename from docs/developer-guide/img/developer-guide/theme-entry-color.png rename to docs/developer-guide/img/theme-entry-color.png diff --git a/docs/developer-guide/img/developer-guide/theme-entry-derive.png b/docs/developer-guide/img/theme-entry-derive.png similarity index 100% rename from docs/developer-guide/img/developer-guide/theme-entry-derive.png rename to docs/developer-guide/img/theme-entry-derive.png diff --git a/docs/developer-guide/img/developer-guide/theme-entry-fonts.png b/docs/developer-guide/img/theme-entry-fonts.png similarity index 100% rename from docs/developer-guide/img/developer-guide/theme-entry-fonts.png rename to docs/developer-guide/img/theme-entry-fonts.png diff --git a/docs/developer-guide/img/developer-guide/theme-entry-padding.png b/docs/developer-guide/img/theme-entry-padding.png similarity index 100% rename from docs/developer-guide/img/developer-guide/theme-entry-padding.png rename to docs/developer-guide/img/theme-entry-padding.png diff --git a/docs/developer-guide/img/developer-guide/theme-font-catalog-opo.png b/docs/developer-guide/img/theme-font-catalog-opo.png similarity index 100% rename from docs/developer-guide/img/developer-guide/theme-font-catalog-opo.png rename to docs/developer-guide/img/theme-font-catalog-opo.png diff --git a/docs/developer-guide/img/developer-guide/theme-font-catalog.png b/docs/developer-guide/img/theme-font-catalog.png similarity index 100% rename from docs/developer-guide/img/developer-guide/theme-font-catalog.png rename to docs/developer-guide/img/theme-font-catalog.png diff --git a/docs/developer-guide/img/developer-guide/theme-preview-section.png b/docs/developer-guide/img/theme-preview-section.png similarity index 100% rename from docs/developer-guide/img/developer-guide/theme-preview-section.png rename to docs/developer-guide/img/theme-preview-section.png diff --git a/docs/developer-guide/img/developer-guide/theme-state-tabs.png b/docs/developer-guide/img/theme-state-tabs.png similarity index 100% rename from docs/developer-guide/img/developer-guide/theme-state-tabs.png rename to docs/developer-guide/img/theme-state-tabs.png diff --git a/docs/developer-guide/img/developer-guide/theme-style-selection-pane.png b/docs/developer-guide/img/theme-style-selection-pane.png similarity index 100% rename from docs/developer-guide/img/developer-guide/theme-style-selection-pane.png rename to docs/developer-guide/img/theme-style-selection-pane.png diff --git a/docs/developer-guide/img/developer-guide/theme-title-area-UIIDs.png b/docs/developer-guide/img/theme-title-area-UIIDs.png similarity index 100% rename from docs/developer-guide/img/developer-guide/theme-title-area-UIIDs.png rename to docs/developer-guide/img/theme-title-area-UIIDs.png diff --git a/docs/developer-guide/img/developer-guide/tick_marks.png b/docs/developer-guide/img/tick_marks.png similarity index 100% rename from docs/developer-guide/img/developer-guide/tick_marks.png rename to docs/developer-guide/img/tick_marks.png diff --git a/docs/developer-guide/img/developer-guide/time_chart.png b/docs/developer-guide/img/time_chart.png similarity index 100% rename from docs/developer-guide/img/developer-guide/time_chart.png rename to docs/developer-guide/img/time_chart.png diff --git a/docs/developer-guide/img/developer-guide/toolbar-search-mode.jpg b/docs/developer-guide/img/toolbar-search-mode.jpg similarity index 100% rename from docs/developer-guide/img/developer-guide/toolbar-search-mode.jpg rename to docs/developer-guide/img/toolbar-search-mode.jpg diff --git a/docs/developer-guide/img/developer-guide/transition-bubble.png b/docs/developer-guide/img/transition-bubble.png similarity index 100% rename from docs/developer-guide/img/developer-guide/transition-bubble.png rename to docs/developer-guide/img/transition-bubble.png diff --git a/docs/developer-guide/img/developer-guide/transition-cover.jpg b/docs/developer-guide/img/transition-cover.jpg similarity index 100% rename from docs/developer-guide/img/developer-guide/transition-cover.jpg rename to docs/developer-guide/img/transition-cover.jpg diff --git a/docs/developer-guide/img/developer-guide/transition-fade.jpg b/docs/developer-guide/img/transition-fade.jpg similarity index 100% rename from docs/developer-guide/img/developer-guide/transition-fade.jpg rename to docs/developer-guide/img/transition-fade.jpg diff --git a/docs/developer-guide/img/developer-guide/transition-flip.jpg b/docs/developer-guide/img/transition-flip.jpg similarity index 100% rename from docs/developer-guide/img/developer-guide/transition-flip.jpg rename to docs/developer-guide/img/transition-flip.jpg diff --git a/docs/developer-guide/img/developer-guide/transition-slide-fade.jpg b/docs/developer-guide/img/transition-slide-fade.jpg similarity index 100% rename from docs/developer-guide/img/developer-guide/transition-slide-fade.jpg rename to docs/developer-guide/img/transition-slide-fade.jpg diff --git a/docs/developer-guide/img/developer-guide/transition-slide-vertical.jpg b/docs/developer-guide/img/transition-slide-vertical.jpg similarity index 100% rename from docs/developer-guide/img/developer-guide/transition-slide-vertical.jpg rename to docs/developer-guide/img/transition-slide-vertical.jpg diff --git a/docs/developer-guide/img/developer-guide/transition-slide.jpg b/docs/developer-guide/img/transition-slide.jpg similarity index 100% rename from docs/developer-guide/img/developer-guide/transition-slide.jpg rename to docs/developer-guide/img/transition-slide.jpg diff --git a/docs/developer-guide/img/developer-guide/transition-uncover.jpg b/docs/developer-guide/img/transition-uncover.jpg similarity index 100% rename from docs/developer-guide/img/developer-guide/transition-uncover.jpg rename to docs/developer-guide/img/transition-uncover.jpg diff --git a/docs/developer-guide/img/developer-guide/tree.png b/docs/developer-guide/img/tree.png similarity index 100% rename from docs/developer-guide/img/developer-guide/tree.png rename to docs/developer-guide/img/tree.png diff --git a/docs/developer-guide/img/developer-guide/uwp-app-manager-apps.png b/docs/developer-guide/img/uwp-app-manager-apps.png similarity index 100% rename from docs/developer-guide/img/developer-guide/uwp-app-manager-apps.png rename to docs/developer-guide/img/uwp-app-manager-apps.png diff --git a/docs/developer-guide/img/developer-guide/uwp-certificate-generator.png b/docs/developer-guide/img/uwp-certificate-generator.png similarity index 100% rename from docs/developer-guide/img/developer-guide/uwp-certificate-generator.png rename to docs/developer-guide/img/uwp-certificate-generator.png diff --git a/docs/developer-guide/img/developer-guide/uwp-cn1settings-debug-desktop-selected.png b/docs/developer-guide/img/uwp-cn1settings-debug-desktop-selected.png similarity index 100% rename from docs/developer-guide/img/developer-guide/uwp-cn1settings-debug-desktop-selected.png rename to docs/developer-guide/img/uwp-cn1settings-debug-desktop-selected.png diff --git a/docs/developer-guide/img/developer-guide/uwp-cn1settings-disk-icon.png b/docs/developer-guide/img/uwp-cn1settings-disk-icon.png similarity index 100% rename from docs/developer-guide/img/developer-guide/uwp-cn1settings-disk-icon.png rename to docs/developer-guide/img/uwp-cn1settings-disk-icon.png diff --git a/docs/developer-guide/img/developer-guide/uwp-cn1settings-uwp.png b/docs/developer-guide/img/uwp-cn1settings-uwp.png similarity index 100% rename from docs/developer-guide/img/developer-guide/uwp-cn1settings-uwp.png rename to docs/developer-guide/img/uwp-cn1settings-uwp.png diff --git a/docs/developer-guide/img/developer-guide/uwp-cn1settings-windows-settings-menu-item.png b/docs/developer-guide/img/uwp-cn1settings-windows-settings-menu-item.png similarity index 100% rename from docs/developer-guide/img/developer-guide/uwp-cn1settings-windows-settings-menu-item.png rename to docs/developer-guide/img/uwp-cn1settings-windows-settings-menu-item.png diff --git a/docs/developer-guide/img/developer-guide/uwp-dashboard-download-appxbundle.png b/docs/developer-guide/img/uwp-dashboard-download-appxbundle.png similarity index 100% rename from docs/developer-guide/img/developer-guide/uwp-dashboard-download-appxbundle.png rename to docs/developer-guide/img/uwp-dashboard-download-appxbundle.png diff --git a/docs/developer-guide/img/developer-guide/uwp-extract-zip-file.png b/docs/developer-guide/img/uwp-extract-zip-file.png similarity index 100% rename from docs/developer-guide/img/developer-guide/uwp-extract-zip-file.png rename to docs/developer-guide/img/uwp-extract-zip-file.png diff --git a/docs/developer-guide/img/developer-guide/uwp-mobile-recently-added.png b/docs/developer-guide/img/uwp-mobile-recently-added.png similarity index 100% rename from docs/developer-guide/img/developer-guide/uwp-mobile-recently-added.png rename to docs/developer-guide/img/uwp-mobile-recently-added.png diff --git a/docs/developer-guide/img/developer-guide/uwp-mobile-settings-developer-mode.png b/docs/developer-guide/img/uwp-mobile-settings-developer-mode.png similarity index 100% rename from docs/developer-guide/img/developer-guide/uwp-mobile-settings-developer-mode.png rename to docs/developer-guide/img/uwp-mobile-settings-developer-mode.png diff --git a/docs/developer-guide/img/developer-guide/uwp-mobile-settings-devicediscovery-on.png b/docs/developer-guide/img/uwp-mobile-settings-devicediscovery-on.png similarity index 100% rename from docs/developer-guide/img/developer-guide/uwp-mobile-settings-devicediscovery-on.png rename to docs/developer-guide/img/uwp-mobile-settings-devicediscovery-on.png diff --git a/docs/developer-guide/img/developer-guide/uwp-mobile-settings-deviceportal-on.png b/docs/developer-guide/img/uwp-mobile-settings-deviceportal-on.png similarity index 100% rename from docs/developer-guide/img/developer-guide/uwp-mobile-settings-deviceportal-on.png rename to docs/developer-guide/img/uwp-mobile-settings-deviceportal-on.png diff --git a/docs/developer-guide/img/developer-guide/uwp-mobile-settings-update-security.png b/docs/developer-guide/img/uwp-mobile-settings-update-security.png similarity index 100% rename from docs/developer-guide/img/developer-guide/uwp-mobile-settings-update-security.png rename to docs/developer-guide/img/uwp-mobile-settings-update-security.png diff --git a/docs/developer-guide/img/developer-guide/uwp-netbeans-codenameone-settings-menu.png b/docs/developer-guide/img/uwp-netbeans-codenameone-settings-menu.png similarity index 100% rename from docs/developer-guide/img/developer-guide/uwp-netbeans-codenameone-settings-menu.png rename to docs/developer-guide/img/uwp-netbeans-codenameone-settings-menu.png diff --git a/docs/developer-guide/img/developer-guide/uwp-pc-settings-developer-mode.png b/docs/developer-guide/img/uwp-pc-settings-developer-mode.png similarity index 100% rename from docs/developer-guide/img/developer-guide/uwp-pc-settings-developer-mode.png rename to docs/developer-guide/img/uwp-pc-settings-developer-mode.png diff --git a/docs/developer-guide/img/developer-guide/uwp-powershell-change-execution-policy.png b/docs/developer-guide/img/uwp-powershell-change-execution-policy.png similarity index 100% rename from docs/developer-guide/img/developer-guide/uwp-powershell-change-execution-policy.png rename to docs/developer-guide/img/uwp-powershell-change-execution-policy.png diff --git a/docs/developer-guide/img/developer-guide/uwp-powershell-success.png b/docs/developer-guide/img/uwp-powershell-success.png similarity index 100% rename from docs/developer-guide/img/developer-guide/uwp-powershell-success.png rename to docs/developer-guide/img/uwp-powershell-success.png diff --git a/docs/developer-guide/img/developer-guide/uwp-run-in-powershell.png b/docs/developer-guide/img/uwp-run-in-powershell.png similarity index 100% rename from docs/developer-guide/img/developer-guide/uwp-run-in-powershell.png rename to docs/developer-guide/img/uwp-run-in-powershell.png diff --git a/docs/developer-guide/img/developer-guide/uwp-send-build.png b/docs/developer-guide/img/uwp-send-build.png similarity index 100% rename from docs/developer-guide/img/developer-guide/uwp-send-build.png rename to docs/developer-guide/img/uwp-send-build.png diff --git a/docs/developer-guide/img/developer-guide/uwp-store-upload-settings.png b/docs/developer-guide/img/uwp-store-upload-settings.png similarity index 100% rename from docs/developer-guide/img/developer-guide/uwp-store-upload-settings.png rename to docs/developer-guide/img/uwp-store-upload-settings.png diff --git a/docs/developer-guide/img/developer-guide/uwp-windows-10-start-menu-app-installed.png b/docs/developer-guide/img/uwp-windows-10-start-menu-app-installed.png similarity index 100% rename from docs/developer-guide/img/developer-guide/uwp-windows-10-start-menu-app-installed.png rename to docs/developer-guide/img/uwp-windows-10-start-menu-app-installed.png diff --git a/docs/developer-guide/img/developer-guide/uwp-windows-store-app-identity.png b/docs/developer-guide/img/uwp-windows-store-app-identity.png similarity index 100% rename from docs/developer-guide/img/developer-guide/uwp-windows-store-app-identity.png rename to docs/developer-guide/img/uwp-windows-store-app-identity.png diff --git a/docs/developer-guide/img/developer-guide/uwp-windows-store-dashboard.png b/docs/developer-guide/img/uwp-windows-store-dashboard.png similarity index 100% rename from docs/developer-guide/img/developer-guide/uwp-windows-store-dashboard.png rename to docs/developer-guide/img/uwp-windows-store-dashboard.png diff --git a/docs/developer-guide/img/developer-guide/uwp-windows-store-publish.png b/docs/developer-guide/img/uwp-windows-store-publish.png similarity index 100% rename from docs/developer-guide/img/developer-guide/uwp-windows-store-publish.png rename to docs/developer-guide/img/uwp-windows-store-publish.png diff --git a/docs/developer-guide/img/developer-guide/uwp-windows-store-reserve-name.png b/docs/developer-guide/img/uwp-windows-store-reserve-name.png similarity index 100% rename from docs/developer-guide/img/developer-guide/uwp-windows-store-reserve-name.png rename to docs/developer-guide/img/uwp-windows-store-reserve-name.png diff --git a/docs/developer-guide/img/developer-guide/uwp-windows-store-wpp-identity-info.png b/docs/developer-guide/img/uwp-windows-store-wpp-identity-info.png similarity index 100% rename from docs/developer-guide/img/developer-guide/uwp-windows-store-wpp-identity-info.png rename to docs/developer-guide/img/uwp-windows-store-wpp-identity-info.png diff --git a/docs/developer-guide/img/developer-guide/uwp-zip-contents-with-dependencies.png b/docs/developer-guide/img/uwp-zip-contents-with-dependencies.png similarity index 100% rename from docs/developer-guide/img/developer-guide/uwp-zip-contents-with-dependencies.png rename to docs/developer-guide/img/uwp-zip-contents-with-dependencies.png diff --git a/docs/developer-guide/img/developer-guide/uwp-zip-file-contents.png b/docs/developer-guide/img/uwp-zip-file-contents.png similarity index 100% rename from docs/developer-guide/img/developer-guide/uwp-zip-file-contents.png rename to docs/developer-guide/img/uwp-zip-file-contents.png diff --git a/docs/developer-guide/img/developer-guide/validation-regex-masking-1.png b/docs/developer-guide/img/validation-regex-masking-1.png similarity index 100% rename from docs/developer-guide/img/developer-guide/validation-regex-masking-1.png rename to docs/developer-guide/img/validation-regex-masking-1.png diff --git a/docs/developer-guide/img/developer-guide/webservice-wizard-result.png b/docs/developer-guide/img/webservice-wizard-result.png similarity index 100% rename from docs/developer-guide/img/developer-guide/webservice-wizard-result.png rename to docs/developer-guide/img/webservice-wizard-result.png diff --git a/docs/developer-guide/img/developer-guide/webservice-wizard-step1-create-webapp.png b/docs/developer-guide/img/webservice-wizard-step1-create-webapp.png similarity index 100% rename from docs/developer-guide/img/developer-guide/webservice-wizard-step1-create-webapp.png rename to docs/developer-guide/img/webservice-wizard-step1-create-webapp.png diff --git a/docs/developer-guide/img/developer-guide/webservice-wizard-step2-any-name-will-do.png b/docs/developer-guide/img/webservice-wizard-step2-any-name-will-do.png similarity index 100% rename from docs/developer-guide/img/developer-guide/webservice-wizard-step2-any-name-will-do.png rename to docs/developer-guide/img/webservice-wizard-step2-any-name-will-do.png diff --git a/docs/developer-guide/img/developer-guide/webservice-wizard-step3-setup-your-webserver.png b/docs/developer-guide/img/webservice-wizard-step3-setup-your-webserver.png similarity index 100% rename from docs/developer-guide/img/developer-guide/webservice-wizard-step3-setup-your-webserver.png rename to docs/developer-guide/img/webservice-wizard-step3-setup-your-webserver.png diff --git a/docs/developer-guide/img/developer-guide/webservice-wizard-step4-configure-the-app-notice-context-path.png b/docs/developer-guide/img/webservice-wizard-step4-configure-the-app-notice-context-path.png similarity index 100% rename from docs/developer-guide/img/developer-guide/webservice-wizard-step4-configure-the-app-notice-context-path.png rename to docs/developer-guide/img/webservice-wizard-step4-configure-the-app-notice-context-path.png diff --git a/docs/developer-guide/img/developer-guide/webservice-wizard-step5-main-project-rightclick-select-webservice-wizard.png b/docs/developer-guide/img/webservice-wizard-step5-main-project-rightclick-select-webservice-wizard.png similarity index 100% rename from docs/developer-guide/img/developer-guide/webservice-wizard-step5-main-project-rightclick-select-webservice-wizard.png rename to docs/developer-guide/img/webservice-wizard-step5-main-project-rightclick-select-webservice-wizard.png diff --git a/docs/developer-guide/img/developer-guide/webservice-wizard-step6-set-package-and-class-names-add-methods.png b/docs/developer-guide/img/webservice-wizard-step6-set-package-and-class-names-add-methods.png similarity index 100% rename from docs/developer-guide/img/developer-guide/webservice-wizard-step6-set-package-and-class-names-add-methods.png rename to docs/developer-guide/img/webservice-wizard-step6-set-package-and-class-names-add-methods.png diff --git a/docs/developer-guide/img/developer-guide/webservice-wizard-step7-add-methods.png b/docs/developer-guide/img/webservice-wizard-step7-add-methods.png similarity index 100% rename from docs/developer-guide/img/developer-guide/webservice-wizard-step7-add-methods.png rename to docs/developer-guide/img/webservice-wizard-step7-add-methods.png diff --git a/docs/developer-guide/img/developer-guide/webservice-wizard-step8-pick-the-server-source-directory.png b/docs/developer-guide/img/webservice-wizard-step8-pick-the-server-source-directory.png similarity index 100% rename from docs/developer-guide/img/developer-guide/webservice-wizard-step8-pick-the-server-source-directory.png rename to docs/developer-guide/img/webservice-wizard-step8-pick-the-server-source-directory.png diff --git a/docs/developer-guide/img/developer-guide/webservice-wizard-step8b-if-you-did-this-correctly.png b/docs/developer-guide/img/webservice-wizard-step8b-if-you-did-this-correctly.png similarity index 100% rename from docs/developer-guide/img/developer-guide/webservice-wizard-step8b-if-you-did-this-correctly.png rename to docs/developer-guide/img/webservice-wizard-step8b-if-you-did-this-correctly.png diff --git a/docs/developer-guide/img/developer-guide/windows-store-push-notications-menu.png b/docs/developer-guide/img/windows-store-push-notications-menu.png similarity index 100% rename from docs/developer-guide/img/developer-guide/windows-store-push-notications-menu.png rename to docs/developer-guide/img/windows-store-push-notications-menu.png diff --git a/docs/developer-guide/img/developer-guide/windows-store-wns-menu-item.png b/docs/developer-guide/img/windows-store-wns-menu-item.png similarity index 100% rename from docs/developer-guide/img/developer-guide/windows-store-wns-menu-item.png rename to docs/developer-guide/img/windows-store-wns-menu-item.png diff --git a/docs/developer-guide/img/developer-guide/wns-client-secret.png b/docs/developer-guide/img/wns-client-secret.png similarity index 100% rename from docs/developer-guide/img/developer-guide/wns-client-secret.png rename to docs/developer-guide/img/wns-client-secret.png diff --git a/docs/developer-guide/img/developer-guide/wns-live-services-link.png b/docs/developer-guide/img/wns-live-services-link.png similarity index 100% rename from docs/developer-guide/img/developer-guide/wns-live-services-link.png rename to docs/developer-guide/img/wns-live-services-link.png diff --git a/docs/developer-guide/img/developer-guide/wns-package-id.png b/docs/developer-guide/img/wns-package-id.png similarity index 100% rename from docs/developer-guide/img/developer-guide/wns-package-id.png rename to docs/developer-guide/img/wns-package-id.png diff --git a/docs/developer-guide/io.asciidoc b/docs/developer-guide/io.asciidoc index 5743515913..127dff846f 100644 --- a/docs/developer-guide/io.asciidoc +++ b/docs/developer-guide/io.asciidoc @@ -105,10 +105,10 @@ private void createFileEntry(Form hi, String file) { ---- .List of files within the storage -image::img/developer-guide/storage-list.png[List of files within the storage,scaledwidth=20%] +image::img/storage-list.png[List of files within the storage,scaledwidth=20%] .Content of a file added to the storage -image::img/developer-guide/storage-content.png[Content of a file added to the storage,scaledwidth=20%] +image::img/storage-content.png[Content of a file added to the storage,scaledwidth=20%] ==== The Preferences API @@ -223,7 +223,7 @@ hi.show(); ---- .Simple sample of a tree for the FileSystemStorage API -image::img/developer-guide/filesystem-tree.png[Simple sample of a tree for the FileSystemStorage API,scaledwidth=20%] +image::img/filesystem-tree.png[Simple sample of a tree for the FileSystemStorage API,scaledwidth=20%] ==== Storage vs. File System @@ -362,10 +362,10 @@ hi.show(); ---- .Querying the temp demo generated by the SQLDemo application -image::img/developer-guide/sql-table.png[Querying the temp demo generated by the SQLDemo application,scaledwidth=20%] +image::img/sql-table.png[Querying the temp demo generated by the SQLDemo application,scaledwidth=20%] .Issuing a query -image::img/developer-guide/sql-entry.png[Issuing a query,scaledwidth=20%] +image::img/sql-entry.png[Issuing a query,scaledwidth=20%] === Network Manager & Connection Request @@ -705,7 +705,7 @@ hi.show(); ---- .CSV parsing results, notice the properly escaped parentheses and comma -image::img/developer-guide/csv-parsing.png[CSV parsing results notice the properly escaped parentheses and comma,scaledwidth=30%] +image::img/csv-parsing.png[CSV parsing results notice the properly escaped parentheses and comma,scaledwidth=30%] The data contains a two dimensional array of the CSV content. You can change the delimiter character by using the `CSVParser` constructor that accepts a character. @@ -845,7 +845,7 @@ hi.show(); <3> Notice that the "titles" and "aliases" entries are both lists of elements. We use `java.util.List` to avoid a clash with `com.codename1.ui.List`. .Parsed JSON result, clicking the elements opens the URL from the JSON -image::img/developer-guide/json-parsing.png[Parsed JSON result, clicking the elements opens the URL from the JSON,scaledwidth=20%] +image::img/json-parsing.png[Parsed JSON result, clicking the elements opens the URL from the JSON,scaledwidth=20%] TIP: The structure of the returned map is sometimes unintuitive when looking at the raw JSON. The easiest thing to do is set a breakpoint on the method and use the inspect variables capability of your IDE to inspect the returned element hierarchy while writing the code to extract that data @@ -1088,7 +1088,7 @@ The returned JSON looks something like this (notice it's snipped because the dat ---- .Running the geocode sample above in the simulator -image::img/developer-guide/processing-package.png[Running the geocode sample above in the simulator,scaledwidth=20%] +image::img/processing-package.png[Running the geocode sample above in the simulator,scaledwidth=20%] The XML processor currently handles global selections by using a double slash anywhere within the expression, for example: @@ -1226,7 +1226,7 @@ This was done to provide consistency for saved files. === Debugging Network Connections .Debugging Network Connections -image::img/developer-guide/network-monitor.png[Debugging Network Connections,scaledwidth=20%] +image::img/network-monitor.png[Debugging Network Connections,scaledwidth=20%] Codename One includes a Network Monitor tool which you can access via the simulator menu option. This tool reflects all the requests made through the connection requests and displays them in the left pane. This allows you to track issues in your code/web service and see everything the is "going through the wire". @@ -1429,35 +1429,35 @@ The Webservice Wizard can be invoked directly from the plugin. It generates stub There are limits to the types of values that can be passed via the webservice wizard protocol but it is highly efficient since it is a binary protocol and very extensible thru object externalization. All methods are provided both as asynchronous and synchronous calls for the convenience of the developer. .The first step in creating a client/server connection using the webservice wizard is to create a web application -image::img/developer-guide/webservice-wizard-step1-create-webapp.png[The first step in creating a client/server connection using the webservice wizard is to create a web application,scaledwidth=40%] +image::img/webservice-wizard-step1-create-webapp.png[The first step in creating a client/server connection using the webservice wizard is to create a web application,scaledwidth=40%] .Any name will do -image::img/developer-guide/webservice-wizard-step2-any-name-will-do.png[Any name will do,scaledwidth=40%] +image::img/webservice-wizard-step2-any-name-will-do.png[Any name will do,scaledwidth=40%] Normally you should have a server setup locally. I use Tomcat since it's really trivial and I don't really need much but there are many great Java webservers out there and this should work with all of them! .Setup your webserver in the IDE -image::img/developer-guide/webservice-wizard-step3-setup-your-webserver.png[Setup your webserver in the IDE,scaledwidth=40%] +image::img/webservice-wizard-step3-setup-your-webserver.png[Setup your webserver in the IDE,scaledwidth=40%] .Configure the application server to the newly created app, notice the application context value which we will use later -image::img/developer-guide/webservice-wizard-step4-configure-the-app-notice-context-path.png[Configure the application server to the newly created app, notice the application context value which we will use later] +image::img/webservice-wizard-step4-configure-the-app-notice-context-path.png[Configure the application server to the newly created app, notice the application context value which we will use later] .In the main Codename One project right click and select the WebService Wizard option -image::img/developer-guide/webservice-wizard-step5-main-project-rightclick-select-webservice-wizard.png[In the main Codename One project right click and select the WebService Wizard option,scaledwidth=40%] +image::img/webservice-wizard-step5-main-project-rightclick-select-webservice-wizard.png[In the main Codename One project right click and select the WebService Wizard option,scaledwidth=40%] .Set the package and class name for the webservice abstraction (notice this isn't your main class name) and then add the methods you want in the webservice -image::img/developer-guide/webservice-wizard-step6-set-package-and-class-names-add-methods.png[Set the package and class name for the webservice abstraction (notice this isn't your main class name) and then add the methods you want in the webservice,scaledwidth=40%] +image::img/webservice-wizard-step6-set-package-and-class-names-add-methods.png[Set the package and class name for the webservice abstraction (notice this isn't your main class name) and then add the methods you want in the webservice,scaledwidth=40%] .Add the methods and their arguments/return types. Once you finished adding all of those press the "Generate" button -image::img/developer-guide/webservice-wizard-step7-add-methods.png[Add the methods and their arguments/return types. Once you finished adding all of those press the "Generate" button,scaledwidth=40%] +image::img/webservice-wizard-step7-add-methods.png[Add the methods and their arguments/return types. Once you finished adding all of those press the "Generate" button,scaledwidth=40%] TIP: The types of arguments are pretty limited however you can pass an arbitrary `Externalizable` object which can be "anything" .Pick the directory in the server project to which the source files will be generated by default this is the src/java directory under the project we created in the first step -image::img/developer-guide/webservice-wizard-step8-pick-the-server-source-directory.png[Pick the directory in the server project to which the source files will be generated by default this is the src/java directory under the project we created in the first step,scaledwidth=40%] +image::img/webservice-wizard-step8-pick-the-server-source-directory.png[Pick the directory in the server project to which the source files will be generated by default this is the src/java directory under the project we created in the first step,scaledwidth=40%] .If you saved to the right location the server project directory should look like this -image::img/developer-guide/webservice-wizard-step8b-if-you-did-this-correctly.png[If you saved to the right location the server project directory should look like this,scaledwidth=30%] +image::img/webservice-wizard-step8b-if-you-did-this-correctly.png[If you saved to the right location the server project directory should look like this,scaledwidth=30%] We can now open the `GameOfThronesServiceServer.java` file in the server and it looks like this: @@ -1564,7 +1564,7 @@ getNamesASync.addActionListener((e) -> { ---- .The final result of the WebService Wizard code -image::img/developer-guide/webservice-wizard-result.png[The final result of the WebService Wizard code,scaledwidth=20%] +image::img/webservice-wizard-result.png[The final result of the WebService Wizard code,scaledwidth=20%] === Connection Request Caching @@ -1845,7 +1845,7 @@ hi.show(); ---- .SliderBridge progress for downloading the image in the slow network mode -image::img/developer-guide/network-sliderbridge.png[SliderBridge progress for downloading the image in the slow network mode,scaledwidth=20%] +image::img/network-sliderbridge.png[SliderBridge progress for downloading the image in the slow network mode,scaledwidth=20%] === Logging & Crash Protection @@ -2500,7 +2500,7 @@ resp.add(c.rank.getLabel()). <4> Numeric bindings "just work" .Properties form for the contact -image::img/developer-guide/properties-demo-binding.png[Properties form for the contact,scaledwidth=20%] +image::img/properties-demo-binding.png[Properties form for the contact,scaledwidth=20%] ====== Binding Object & Auto Commit diff --git a/docs/developer-guide/performance.asciidoc b/docs/developer-guide/performance.asciidoc index ce2322d81e..e787ec7e78 100644 --- a/docs/developer-guide/performance.asciidoc +++ b/docs/developer-guide/performance.asciidoc @@ -9,14 +9,14 @@ TIP: Images will take up 95-99% of the resource file size; everything else pales Like every optimization the first rule is to reduce the size of the biggest images which will provide your biggest improvements, for this purpose we introduced the ability to see image sizes in kilobytes. To launch that feature use the menu item #Images# -> #Image Sizes (KB)# in the designer. .Image sizes window that allows us to find the biggest impact on our RAM/Storage -image::img/developer-guide/performance-image-sizes.png[Image sizes window that allows us to find the biggest impact on our RAM/Storage,scaledwidth=20%] +image::img/performance-image-sizes.png[Image sizes window that allows us to find the biggest impact on our RAM/Storage,scaledwidth=20%] This produces a list of images sorted by size with their sizes. Often the top entries will be multi-images, which include HD resolution values that can be pretty large. These very high-resolution images take up a significant amount of space! Just going to the multi-images, selecting the unnecessary resolutions & deleting these images can saves significant amounts of space: .Removing unused DPI's -image::img/developer-guide/performance-image-remove-dpi.png[Removing unused DPI's,scaledwidth=50%] +image::img/performance-image-remove-dpi.png[Removing unused DPI's,scaledwidth=50%] TIP: You can see the size in KB at the top right side in the designers image viewer @@ -25,7 +25,7 @@ Applications using the old GUI builder can use the #Images# -> #Delete Unused Im If you have a very large image that is opaque you might want to consider converting it to JPEG and replacing the built in PNG’s. Notice that JPEG's work on all supported devices and are typically smaller. .Convert a MultiImage to use JPEGs instead of PNGs -image::img/developer-guide/performance-image-to-jpen.png[Convert a MultiImage to use JPEGs instead of PNGs] +image::img/performance-image-to-jpen.png[Convert a MultiImage to use JPEGs instead of PNGs] You can use the excellent http://optipng.sourceforge.net/[OptiPng] tool to optimize image files right from the Codename One designer. To use this feature you need to install OptiPng then select #Images# -> #Launch OptiPng# from the menu. Once you do that the tool will automatically optimize all your PNG's. @@ -50,7 +50,7 @@ The simulator contains some tools to measure performance overhead of a specific The Performance Monitor tool can be accessible via the #Simulator# -> #Performance Monitor# menu option in the simulator. This launches the following UI that can help you improve application performance: .Main tab of the performance monitor: Logs and timings -image::img/developer-guide/performance-monitor-tab-1.png[Main tab of the performance monitor: Logs and timings] +image::img/performance-monitor-tab-1.png[Main tab of the performance monitor: Logs and timings] The first tab of the performance monitor includes a table of the drawn components. Each entry includes the number of times it was drawn and the slowest/fastest and average drawing time. The toolbar across the top includes Pause/Continue buttons so you can freeze the counters while you inspect @@ -65,7 +65,7 @@ The Log on the bottom includes debug related information. E.g. it warns about th current form consumes so you can correlate spikes with your drawing code. .Rendering tree -image::img/developer-guide/performance-monitor-tab-2.png[Rendering tree] +image::img/performance-monitor-tab-2.png[Rendering tree] The rendering tree view allows us to inspect the hierarchy painting. You can press the refresh button which will trigger the painting of the current `Form`. Every graphics operation is logged and so is the stack to it. @@ -78,7 +78,7 @@ TIP: Android devices have a very nice overdraw debugging tool === Network Speed .Network speed tool -image::img/developer-guide/network-speed.png[Network speed tool,scaledwidth=10%] +image::img/network-speed.png[Network speed tool,scaledwidth=10%] This feature is actually more useful for general debugging however it's sometimes useful to simulate a slow/disconnected network to see how this affects performance. @@ -110,12 +110,12 @@ Codename One includes a built in testing framework and test recorder tool as par To get started with the testing framework, launch the application and open the test recorder in the simulator menu. .The test recorder tool in the simulator -image::img/developer-guide/test-recorder-blank.png[The test recorder tool in the simulator,scaledwidth=50%] +image::img/test-recorder-blank.png[The test recorder tool in the simulator,scaledwidth=50%] Once you press record a test will be generate for you as you use the application. .Test recording in progress, when done just press the save icon -image::img/developer-guide/test-recorder-in-progress.png[Test recording in progress, when done just press the save icon,scaledwidth=50%] +image::img/test-recorder-in-progress.png[Test recording in progress, when done just press the save icon,scaledwidth=50%] You can build tests using the Codename One testing package to manipulate the Codename One UI programmatically and perform various assertions. @@ -127,7 +127,7 @@ Unlike frameworks such as JUnit which assign a method per test, the Codename One Handling errors or exceptions in a deployed product is pretty difficult, most users would just throw away your app and some would give it a negative rating without providing you with the opportunity to actually fix the bug that might have happened. .Default error dialog -image::img/developer-guide/error-dialog.png[Default error dialog,scaledwidth=10%] +image::img/error-dialog.png[Default error dialog,scaledwidth=10%] Google improved on this a bit by allowing users to submit stack traces for failures on Android devices but this requires the users approval for sending personal data which you might not need if you only want to receive the stack trace and maybe some basic application state (without violating user privacy). diff --git a/docs/developer-guide/signing.asciidoc b/docs/developer-guide/signing.asciidoc index c6f5a54a6d..d1e1977cf4 100644 --- a/docs/developer-guide/signing.asciidoc +++ b/docs/developer-guide/signing.asciidoc @@ -51,7 +51,7 @@ Codename One features a wizard to generate certificates/provisioning for iOS wit To generate your certificates and profiles, open project's properties and click on "iOS" in the left menu. This will show the "iOS Signing" panel that includes fields to select your certificates and mobile provisioning profiles. .Netbeans iOS Signing properties panel -image::img/developer-guide/ios-cert-wizard-1-signing.png[Netbeans iOS Signing properties panel,scaledwidth=50%] +image::img/ios-cert-wizard-1-signing.png[Netbeans iOS Signing properties panel,scaledwidth=50%] If you already have valid certificates and profiles, you can just enter their locations here. If you don't, then you can use the wizard by clicking the #Generate# button in the lower part of the form. @@ -61,7 +61,7 @@ After clicking #Generate# you'll be shown a login form. Log into this form using password. **NOT YOUR CODENAME ONE LOGIN**. .Wizard login form -image::img/developer-guide/ios-cert-wizard-2-login.png[Wizard login form,scaledwidth=20%] +image::img/ios-cert-wizard-2-login.png[Wizard login form,scaledwidth=20%] ==== Selecting Devices @@ -69,14 +69,14 @@ Once you are logged in you will be shown a list of all of the devices that you c Apple developer account. .Devices form -image::img/developer-guide/ios-cert-wizard-3-devices.png[Devices form,scaledwidth=20%] +image::img/ios-cert-wizard-3-devices.png[Devices form,scaledwidth=20%] Select the ones that you want to include in your provisioning profile and click next. NOTE: Apple supports up to 100 devices for testing purposes so if you want to install the built app on your device you need to add it here .After selecting devices -image::img/developer-guide/ios-cert-wizard-4-devices-selected.png[After selecting devices,scaledwidth=20%] +image::img/ios-cert-wizard-4-devices-selected.png[After selecting devices,scaledwidth=20%] If you don't have any devices registered yet, you can click the "Add New Device" button, which will prompt you to enter the UDID for your device. @@ -90,10 +90,10 @@ account, then it will just use the same certificate. If the certificate doesn't haven't provided a certificate, you will be prompted to overwrite the old certificate with a new one. .Prompt to overwrite existing certificate -image::img/developer-guide/ios-cert-wizard-4.1-overwrite-cert.png[Prompt to overwrite existing certificate,scaledwidth=20%] +image::img/ios-cert-wizard-4.1-overwrite-cert.png[Prompt to overwrite existing certificate,scaledwidth=20%] .Prompt to overwrite other certificate -image::img/developer-guide/ios-cert-wizard-4.2-overwrite-cert.png[Prompt to overwrite other certificate,scaledwidth=20%] +image::img/ios-cert-wizard-4.2-overwrite-cert.png[Prompt to overwrite other certificate,scaledwidth=20%] The same decision need to be made twice: Once for the development certificate, and once for the Apptore certificate. @@ -118,7 +118,7 @@ The next form in the wizard asks for your app's bundle ID. This should have bee the app ID to a wildcard ID if you prefer. .Enter the app bundle ID -image::img/developer-guide/ios-cert-wizard-5-bundle-id.png[Enter the app bundle ID,scaledwidth=20%] +image::img/ios-cert-wizard-5-bundle-id.png[Enter the app bundle ID,scaledwidth=20%] .Wildcard Card Provisioning **** @@ -127,7 +127,7 @@ Wildcard ids such as com.mycompany.\* or even \* allow you to create one generic You can set the global defaults for the IDE by going to IDE settings/preferences and setting default values e.g.: .Setting the development certificate and a global \* provisioning profile allows you to create a new app and built it to device without running the certificate wizard. Notice that you will need to run it when going into production -image::img/developer-guide/ios-cert-global-settings.png[Setting the development certificate and a global \* provisioning profile allows you to create a new app and built it to device without running the certificate wizard. Notice that you will need to run it when going into production] +image::img/ios-cert-global-settings.png[Setting the development certificate and a global \* provisioning profile allows you to create a new app and built it to device without running the certificate wizard. Notice that you will need to run it when going into production] **** ==== Installing Files Locally @@ -136,13 +136,13 @@ Once the wizard is finished generating your provisioning profiles, you should cl open a file dialog for you to navigate to a folder in which to store the generated files. .Install files locally -image::img/developer-guide/ios-cert-wizard-6-install-now.png[Install files locally,scaledwidth=20%] +image::img/ios-cert-wizard-6-install-now.png[Install files locally,scaledwidth=20%] .Select directory to save files in -image::img/developer-guide/ios-cert-wizard-7-select-directory.png[Select directory to save files in,scaledwidth=20%] +image::img/ios-cert-wizard-7-select-directory.png[Select directory to save files in,scaledwidth=20%] .Final Done Message -image::img/developer-guide/ios-cert-wizard-8-complete.png[Final Done Message,scaledwidth=20%] +image::img/ios-cert-wizard-8-complete.png[Final Done Message,scaledwidth=20%] TIP: You can see the password for the P12 files in the `codenameone_settings.properties` file. You can use the values defined there when creating a new application @@ -152,7 +152,7 @@ After selecting your local install location, and closing the wizard, you should properties panel filled in correctly. You should now be able to send iOS debug or Appstore builds without the usual hassles. .Filled in signing panel after wizard complete -image::img/developer-guide/ios-cert-wizard-9-signing-panel.png[Filled in signing panel after wizard complete,scaledwidth=40%] +image::img/ios-cert-wizard-9-signing-panel.png[Filled in signing panel after wizard complete,scaledwidth=40%] === Advanced iOS Signing @@ -189,66 +189,66 @@ Start by logging in to the iOS-provisioning portal [[login-ios-provisioning]] .Login for the iOS provisioning portal -image::img/developer-guide/login-ios-provisioning.png[Log into IOS provisioning portal,scaledwidth=30%] +image::img/login-ios-provisioning.png[Log into IOS provisioning portal,scaledwidth=30%] In the certificates section you can download your development and distribution certificates. [[download-dev-provisioning-profile]] .Download development provisioning profile -image::img/developer-guide/download-dev-provisioning-profile.png[Download development provisioning profile,scaledwidth=30%] +image::img/download-dev-provisioning-profile.png[Download development provisioning profile,scaledwidth=30%] [[download-dist-provisioning-profile]] .Download distribution provisioning profile -image::img/developer-guide/download-dist-provisioning-profile.png[Download distribution provisioning profile,scaledwidth=30%] +image::img/download-dist-provisioning-profile.png[Download distribution provisioning profile,scaledwidth=30%] In the devices section add device ids for the development devices you want to support. Notice no more than 100 devices are supported! [[ios-add-devices]] .Add devices -image::img/developer-guide/ios-add-devices.png[Add devices,scaledwidth=30%] +image::img/ios-add-devices.png[Add devices,scaledwidth=30%] Create an application id; it should match the package identifier of your application perfectly! .Create application id -image::img/developer-guide/ios-create-app-id.png[Create application id,scaledwidth=30%] +image::img/ios-create-app-id.png[Create application id,scaledwidth=30%] Create a provisioning profile for development, make sure to select the right app and make sure to add the devices you want to use during debug. .Create provisioning profile step 1 -image::img/developer-guide/ios-create-prov-profile-1.png[Create provisioning profile step 1,scaledwidth=30%] +image::img/ios-create-prov-profile-1.png[Create provisioning profile step 1,scaledwidth=30%] .Create provisioning profile step 2 -image::img/developer-guide/ios-create-prov-profile-2.png[Create provisioning profile step 2,scaledwidth=30%] +image::img/ios-create-prov-profile-2.png[Create provisioning profile step 2,scaledwidth=30%] Refresh the screen to see the profile you just created and press the download button to download your development provisioning profile. .Create provisioning profile step 3 -image::img/developer-guide/ios-create-prov-profile-3.png[Create provisioning profile step 3,scaledwidth=30%] +image::img/ios-create-prov-profile-3.png[Create provisioning profile step 3,scaledwidth=30%] Create a distribution provisioning profile; it will be used when uploading to the app store. There is no need to specify devices here. .Create distribution provisioning profile -image::img/developer-guide/ios-create-dist-prov-profile.png[Create distribution provisioning profile,scaledwidth=30%] +image::img/ios-create-dist-prov-profile.png[Create distribution provisioning profile,scaledwidth=30%] Download the distribution provisioning profile. .Download distribution provisioning profile -image::img/developer-guide/ios-download-dist-prov-profile.png[Download distribution provisioning profile,scaledwidth=30%] +image::img/ios-download-dist-prov-profile.png[Download distribution provisioning profile,scaledwidth=30%] We can now import the cer files into the key chain tool on a Mac by double clicking the file, on Windows the process is slightly more elaborate .Import cer files -image::img/developer-guide/ios-import-cer-files.png[Import cer files,scaledwidth=30%] +image::img/ios-import-cer-files.png[Import cer files,scaledwidth=30%] We can export the p12 files for the distribution and development profiles through the keychain tool .Export p12 files -image::img/developer-guide/ios-export-p12.png[Export p12 files,scaledwidth=30%] +image::img/ios-export-p12.png[Export p12 files,scaledwidth=30%] In the IDE we enter the project settings, configure our provisioning profile, the password we typed when exporting and the p12 certificates. It is now possible to send the build to the server. .IOS Project Settings -image::img/developer-guide/ios-project-settings.png[IOS Project Settings,scaledwidth=30%] +image::img/ios-project-settings.png[IOS Project Settings,scaledwidth=30%] ==== iOS Code Signing Failure Checklist @@ -263,32 +263,32 @@ Notice that this is something you need to do once a year (generate P12), you wil - When exporting the P12 certificate *make sure that you selected BOTH the public and the private keys* as illustrated here. If you only see one entry (no private key) then you created the CSR (singing request) on a different machine than the one where you imported the resulting CER file. + .p12 export -image::img/developer-guide/p12-export.png[P12 Export,scaledwidth=30%] +image::img/p12-export.png[P12 Export,scaledwidth=30%] - Make sure the package matches between the main preferences screen in the IDE and the iOS settings screen. + .Package ID matching App ID -image::img/developer-guide/package-id-app-id.png[Package ID matching App ID,scaledwidth=30%] +image::img/package-id-app-id.png[Package ID matching App ID,scaledwidth=30%] - Make sure the prefix for the app id in the iOS section of the preferences matches the one you have from Apple + .App prefix -image::img/developer-guide/app-prefix.png[App prefix,scaledwidth=30%] +image::img/app-prefix.png[App prefix,scaledwidth=30%] - Make sure your provisioning profile's app id matches your package name or is a * provisioning profile. Both are sampled in the pictures below, notice that you would need an actual package name for push/in-app-purchase support as well as for app store distribution. + .The star (*) Provisioning Profile -image::img/developer-guide/provisioning-profile-details.png[The star (*) Provisioning Profile,scaledwidth=30%] +image::img/provisioning-profile-details.png[The star (*) Provisioning Profile,scaledwidth=30%] + .Provisioning Profile with app id -image::img/developer-guide/provisioning-profile-with-app-id.png[Provisioning Profile with app id,scaledwidth=30%] +image::img/provisioning-profile-with-app-id.png[Provisioning Profile with app id,scaledwidth=30%] - Make sure the certificate and provisioning profile are from the same source (if you work with multiple accounts), notice that provisioning profiles and certificates expire so you will need to regenerate provisioning when your certificate expires or is revoked. - If you declare push in the provisioning profile then `ios.includePush` (in the build arguments) MUST be set to true, otherwise it *MUST* be set to false (see pictures below). Notice that this should be configured via the UI in the iOS section. + .Include push build hint -image::img/developer-guide/include-push-build-hint.png[Include push build hint,scaledwidth=30%] +image::img/include-push-build-hint.png[Include push build hint,scaledwidth=30%] === Android @@ -297,12 +297,12 @@ Signing Android applications is trivial when compared to the pain of iOS signing The NetBeans and Eclipse plugins have a simple wizard to generate the certificate that you can launch by pressing this button: .Android keystore generation wizard -image::img/developer-guide/android-certificate-wizard.png[Android keystore generation wizard,scaledwidth=50%] +image::img/android-certificate-wizard.png[Android keystore generation wizard,scaledwidth=50%] Then fill out your details and password in the form: .UI for Android certificate details -image::img/developer-guide/android-certificate-wizard2.png[UI for Android certificate details,scaledwidth=30%] +image::img/android-certificate-wizard2.png[UI for Android certificate details,scaledwidth=30%] This will seamlessly generate a certificate for your project, you can reuse it for other projects as well.