diff --git a/docs/demos/common/src/main/css/guide-snippets-theme.css b/docs/demos/common/src/main/css/guide-snippets-theme.css index fd01290cfb3..b1b88f158ec 100644 --- a/docs/demos/common/src/main/css/guide-snippets-theme.css +++ b/docs/demos/common/src/main/css/guide-snippets-theme.css @@ -747,3 +747,90 @@ SpinnerStyle { cn1-background-type: cn1-image-scaled-fit; } /* end::svg-transcoder-css-003[] */ + +/* tag::psd-theme[] */ +TitleContainer { + background-image: url(images/background.jpg); + cn1-background-type: cn1-image-scaled-fill; + cn1-source-dpi: 320; + padding: 8mm 3mm 2mm 3mm; + margin: 0; +} + +/* The camera artwork is fetched by name at runtime rather than set as a + background, so it needs a selector to get it into the theme at all. This one + is never applied to anything; naming the images here is what bundles them. */ +PsdImages { + background-image: url(images/camera.png), + url(images/camera-button.png); + cn1-source-dpi: 320; +} + +Title { + background-color: transparent; + color: #ffffff; + font-family: "native:MainThin"; + font-size: 3.5mm; + padding: 1mm; + margin: 0; + border: none; +} + +TitleCommand { + cn1-derive: Title; +} + +RedCommand, RedCommand.pressed, RedCommand.selected { + cn1-derive: Title; + color: #f73267; + font-family: "native:MainLight"; + font-size: 3mm; +} + +TitleArea { + background-color: transparent; + padding: 0; + margin: 0; + border: none; +} + +TextField, TextField.selected { + background-color: #ffffff; + font-family: "native:MainLight"; + font-size: 2mm; + padding: 2mm; + margin: 0; + border: none; +} + +TextHint { + cn1-derive: TextField; + color: #4d606f; +} + +SouthButton, SouthButton.pressed, SouthButton.selected { + background-color: #f73267; + color: #ffffff; + text-align: center; + font-family: "native:MainThin"; + font-size: 3mm; + padding: 2mm 1mm 2mm 1mm; + margin: 0; +} + +CameraButton, CameraButton.pressed, CameraButton.selected { + background-color: transparent; + text-align: center; + padding: 3mm 1mm 1mm 1mm; + margin: 1mm; +} + +/* The separator is an empty Label, so the line is the style: a background + colour and just enough padding to give it height. */ +Separator { + background-color: #f5f5f5; + padding: 0.2mm 0 0 0; + margin: 1mm 0 1mm 0; + border: none; +} +/* end::psd-theme[] */ diff --git a/docs/demos/common/src/main/css/images/background.jpg b/docs/demos/common/src/main/css/images/background.jpg new file mode 100644 index 00000000000..684390d20e3 Binary files /dev/null and b/docs/demos/common/src/main/css/images/background.jpg differ diff --git a/docs/demos/common/src/main/css/images/camera-button.png b/docs/demos/common/src/main/css/images/camera-button.png new file mode 100644 index 00000000000..bece92cc223 Binary files /dev/null and b/docs/demos/common/src/main/css/images/camera-button.png differ diff --git a/docs/demos/common/src/main/css/images/camera.png b/docs/demos/common/src/main/css/images/camera.png new file mode 100644 index 00000000000..2509adb3151 Binary files /dev/null and b/docs/demos/common/src/main/css/images/camera.png differ diff --git a/docs/developer-guide/Advanced-Theming.asciidoc b/docs/developer-guide/Advanced-Theming.asciidoc index 29dfe0f9713..86f02892223 100644 --- a/docs/developer-guide/Advanced-Theming.asciidoc +++ b/docs/developer-guide/Advanced-Theming.asciidoc @@ -939,169 +939,45 @@ TIP: Rounded images work well here, you can round images dynamically using maski These steps produce the UI above as a side menu, they might seem like a long set of steps but each step is pretty simple as you walk through each one. This does show off the versatility and power of Codename One as a change to one step can create a radically different UI design. -=== Converting a PSD to a theme +=== From a design to a theme -Codename One provides extensive support for designing beautiful user interfaces, but it isn't necessarily obvious to new developers how to achieve their desired results. A common workflow for app design includes a PSD file with mock-ups of the UI, created by a professional designer. +A design usually arrives as a mock-up from someone who doesn't write apps, and +the work is the same whichever tool it came out of: decide which components and +layout managers reproduce the structure, export the images you need at the +densities you need, and then style it. -TIP: PSD is the Adobe Photoshop file format, it's the most common format for UI designs in the industry +.Sign up form design +image::img/psd2app-image1.png[Sign up form design,scaledwidth=25%] -For this tutorial you adapt a slick looking sign-up form found online and convert it to a Codename One component that can be used inside an application. +The structure is the part worth doing on paper first. Nesting containers to match +the design, rather than positioning things absolutely, is what keeps it working +across screen sizes and platforms: -The process you followed was: - -. Find the PSD design you want to use: -http://freebiesbug.com/psd-freebies/iphone-6-ui-kit/[this PSD file] created by https://dribbble.com/adrianchiran[Adrian Chiran] (you mirrored it https://www.codenameone.com/files/iOS_UI-Kit.psd[here] in case it goes offline): -+ -.Sign Up form Design -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 you structured the component hierarchy in the `Form`: -+ .Component hierarchy and layouts image::img/psd2app-image2.png[Component hierarchy and layouts,scaledwidth=50%] -. Extract the images you needed using Photoshop - this process is often referred to as "cutting" - -. Extract the fonts, colors, and styles you needed to reproduce the design in Codename One - -. Import images into the Codename one project, and define theme styles so that your components match the look of the original design - -Here is a screenshot of the resulting component running inside the Codename One simulator: - -.Resulting app in the Codename One simulator -image::img/psd2app-image3.png[Resulting app in the Codename One simulator,scaledwidth=25%] - -==== Breaking down the PSD - -Open the PSD you're interested in using Photoshop. - -TIP: You might be missing fonts in your system so you can either install them or ignore that. Keep in mind that some fonts might not be redistributable with your application - -In this PSD you want one of the screen designs so initially you want to remove everything that isn't related so you can get your bearings more effectively: - -- Select the drag tool (the top left tool) -- In the toolbar for the tool (top bar area) check the #Auto Select# mode -- Select the #Layer Mode# for auto selection (sometimes group would actually be better so feel free to experiment) -- Click on the portion in the PSD that you're interested in - -You should end up with something like this where a layer is selected in the layers window: - -.Selecting a layer from the region you're interested in -image::img/psd2app-image4.png[Selecting a layer from the region you're 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're interested in -image::img/psd2app-image5.png[Find the right element layer you're 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/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 double-click it which will open the sub hierarchy in a new tab and you now have the pieces of the image you care about. - -.Double clicking the smart object allows you to edit the form you need -image::img/psd2app-image7.png[Double clicking the smart object allows you to edit the form you need,scaledwidth=40%] - -===== Removing the noise - -The first thing you need to do is remove from the image all the things that you don't need. The status bar area on the top is redundant as if is a part of the phones UI. You can select it using the select tool and click the eye icon next to the layer to hide it. - -You'd want to have the back arrow but thanks to the material design icons that are a part of Codename One you don't need that icon so you can hide that too. - -You don't need the "Sign Up" or "Done" strings in the title either but before removing them you'd like to know the font that's used. - -To discover that, click them to select the layer then switch to the text tool: - -.The text tool allows you to inspect the font used -image::img/psd2app-image8.png[The text tool allows you to inspect the font used,scaledwidth=5%] - -Then 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/psd2app-image9.png[The Done toolbar entry uses SourceSansPro Regular] - -TIP: Notice that you don't actually need to have the font installed; in this case the font isn't installed (hence the square brackets) - -Also notice that the color of the font is accessible in that toolbar, by clicking the color element you get this dialog which shows the color value to be #f73267#, this is something you will use later - -.The color dialog lists the hex color at the bottom, you can paste that directly to the designer tool -image::img/psd2app-image10.png[The color dialog lists the hex color at the bottom, you can paste that directly to the designer tool,scaledwidth=40%] - -You can now hide both text layers so they won't pose a problem later. - -===== The camera Button - -The camera button includes an icon and the button background itself. You can use that as a single image and be done with it, but for this tutorial you will take the harder route of separating this into a button background and a foreground image. - -When you click on the camera icon you will notice that the camera icon comprises two separate layers: the camera and the "x" symbol above it. You 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/psd2app-image11.png[The camera smart object] - -Since the image is used as an icon you want it to be 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. You 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/psd-image-size.png[The canvas size dialog for the camera.png file,scaledwidth=40%] - -You can now use #File# -> #Export# and save the first image resource you will need into a temporary directory. Make sure to save a PNG file to preserve quality and transparency! - -TIP: Use #File# -> #Export# and never use #File# -> #Save As#. The latter can produce a huge size difference as it retains image meta-data - -For convenience you will refer to the file as `camera.png` when you need it later. - -.The camera icon image -image::img/camera.png[The camera icon image,scaledwidth=4%] - -You can follow the exact same procedure with the parent button layer (the white portion) which you 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/camera-button.png[The camera button image set to a gray background so it will be visible,scaledwidth=15%] -**** - -Now you can hide both of these elements and proceed to get the background image for the title. - -Here the "smart object trick" won't work... An effects layer is in place and the smart object will provide you with the real underlying image instead of the look you actually want. For example, solving this is trivial now that you hid all the elements on top of the image! - -You need to switch to the rectangular select tool: - -.The select tool and the clean image you want to select -image::img/psd2app-image12.png[The select tool and the clean image you 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 high value to get the selection right. - -When the selection is right click #Edit# -> #Copy Merged#. #Copy# would copy a specific layer but in this case you want to copy what you see on the screen! - -Now click #File# -> #New# it should have the #Presets# set to #Clipboard# which means the newly created image is based on what you copied (great UX). Just accept that dialog and paste (#Ctrl-V# or #Command-V#). - -You can now save the image, since it's a background using JPEG is totally acceptable in this case. You named it `background.jpg`. - -.The background image -image::img/background.jpg[The background image,scaledwidth=40%] - -The last thing you need is the colors used in the UI. You can use the "eye drop" tool in a high zoom level to discover the colors of various elements for example: 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/psd2app-image13.png[The eye drop tool can be pointed at an area of the image to get the color in that region] +Export the artwork the design needs before writing the code. This one needs +three pieces: the header background, and the camera icon with the round button it +sits on. -==== The Code - -While that was verbose it was simple. You will create a simple barebones manual application with the native theme. - -NOTE: The reason for this is to avoid "noise," if you 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/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 you created above: `background.jpg`, `camera.png` & `camera-button.png`. Leave the default setting on # High# and press #OK#. +[cols="1,1,1",frame=none,grid=none] +|=== +a| .The header background +image::img/background.jpg[The header background,scaledwidth=60%] +a| .The camera icon +image::img/camera.png[The camera icon,scaledwidth=20%] +a| .The button behind it +image::img/camera-button.png[The button behind it,scaledwidth=35%] +|=== -Then save the resource file so you can use these images from code. +Only images a stylesheet names reach the compiled theme, and the camera pieces +are fetched by name at runtime rather than used as a background, so the theme +below carries a selector that exists purely to import them. Each is declared at +its source density so the compiler produces a multi-image and every screen gets +an appropriately sized file, which is what `theme.getImage` then returns. -Here is the source code you used to work with the UI above there are comments within the code explaining some logic: +That hierarchy is ordinary component code. The code below builds the form, +starting with a separator the design uses between fields: [source,java] ---- @@ -1113,80 +989,19 @@ include::../demos/common/src/main/java/com/codenameone/developerguide/advancedth include::../demos/common/src/main/java/com/codenameone/developerguide/advancedtheming/PsdTutorialDemo.java[tag=psdStart,indent=0] ---- -==== Styling the UI - -The code above is most of the work but you still need to put everything together using the theme. This is what you've so far: - -.Before applying the changes to the theme this is what you've -image::img/psd2app-image15.png[Before applying the changes to the theme this is what you've,scaledwidth=20%] - -.This is what you're aiming at with no more code changes -image::img/psd2app-image16.png[This is what you're aiming at with no more code changes,scaledwidth=20%] - -This looks like a major set of changes but it requires 10 UIID definitions to get to this look! - -Open the designer and select the theme. Press the #Add# button and type in #TitleContainer#. Uncheck derive for the background and select #IMAGE_SCALED_FILL# for the #Type# and the #background.jpg# image. +Style it with <>. Ten UIIDs cover this design, and every value in it maps to an +ordinary CSS property: the scaled header image is `cn1-background-type`, a UIID +that only varies a color inherits the rest with `cn1-derive`, and the pressed +and selected states are the `.pressed` and `.selected` classes rather than +separate definitions. Sizes are in millimetres so they hold their physical size +across densities. -Define the padding as: - -- Left - 3 millimeters -- Right - 3 millimeters -- Top - 8 millimeters -- Bottom - 2 millimeters - -This will allow enough space for the title. Define margin as 0 on all sides. Then press #OK#. - -Add the "Title" UIID. In the #Color# tab define the foreground as `ffffff` define transparency as `0` (fully transparent so you will see the `TitleContainer`). Define padding as 1 millimeter on all sides and margin as 0 on all sides. - -In the #Border# tab press the #...# button and select #[Empty]#. - -In the #Font# tab select the #True Type# as #native:MainThin#. Select the #True Type Size# as millimeters and set the value to `3.5`. - -Press #OK# to save the changes. - -Copy the `Title` UIID and paste it, change the name to "TitleCommand" and press #OK# to save the changes. - -Copy the `Title` UIID again and paste it, change the name to `RedCommand`. In the #Color# tab set the foreground color to `f73267`. In the #Font# tab set the #True Type# to #native:MainLight# and set the size to 3. Press #OK# to save the changes. - -Add the "TitleArea" UIID. In the #Color# tab define transparency as `0` (fully transparent so you will see the `TitleContainer`). Define padding and margin as 0 on all sides. + -In the #Border# tab press the #...# button and select #[Empty]#. -Press #OK# to save the changes. - -Add the "TextField" UIID. In the #Color# tab define transparency as `255` (fully opaque) and the background as `ffffff` (white). Define padding as 2 millimeters on all sides and margin as 0 on all sides. + -In the #Border# tab press the #...# button and select #[Empty]#. -In the #Font# tab set the #True Type# to #native:MainLight# and set the size to 2. Press #OK# to save the changes. - -Copy the `TextField` UIID again and paste it, change the name to `TextHint`. In the #Color# tab set the foreground color to `4d606f`. Press #OK# to save the changes. - -Add the "SouthButton" UIID. In the #Color# tab define transparency as `255` (fully opaque) and the background as `f73267` (red) and the foreground as `ffffff` (white). Define #Alignment# as #Center#. + - -Define padding as: - -- Left - 1 millimeter -- right - 1 millimeter -- top - 2 millimeters -- bottom - 2 millimeters - -Define margin as 0 on all sides. -In the #Font# tab set the #True Type# to #native:MainThin# and set the size to 3. Press #OK# to save the changes. - -Add the "CameraButton" UIID. In the #Color# tab define transparency as `0` (fully transparent). Define #Alignment# as #Center#. + -Define padding as: - -- Left - 1 millimeter -- right - 1 millimeter -- top - 3 millimeters -- bottom - 1 millimeter - -NOTE: This helps spacing away from the title - -Define margin as 1 millimeter on all sides. -Press #OK# to save the changes. - -You can now save the theme and the app should look like the final result! - -===== Not quite there yet +[source,css] +---- +include::../demos/common/src/main/css/guide-snippets-theme.css[tag=psd-theme,indent=0] +---- -One last piece would become apparent if you actually try to run this code. When pressing the buttons/text fields you would see their look change due to the different styles for focus/press behavior. +That's the whole theme. With it in place the same code produces the design: -You can derive the regular styles from the selected/pressed styles but one of the simplest ways is to copy & paste the styles to the pressed/selected tabs. You can copy `CameraButton`, `RedCommand`, `SouthButton` & `TextField` to the selected state. Then copy `CameraButton`, `RedCommand` & `SouthButton` to the pressed state to get the complete app running! +.The result in the simulator +image::img/psd2app-image3.png[The result in the simulator,scaledwidth=25%] diff --git a/docs/developer-guide/img/psd-image-size.png b/docs/developer-guide/img/psd-image-size.png deleted file mode 100644 index cf84b6f7d30..00000000000 Binary files a/docs/developer-guide/img/psd-image-size.png and /dev/null differ diff --git a/docs/developer-guide/img/psd2app-image10.png b/docs/developer-guide/img/psd2app-image10.png deleted file mode 100644 index a27ac9dada3..00000000000 Binary files a/docs/developer-guide/img/psd2app-image10.png and /dev/null differ diff --git a/docs/developer-guide/img/psd2app-image11.png b/docs/developer-guide/img/psd2app-image11.png deleted file mode 100644 index 90ede995d44..00000000000 Binary files a/docs/developer-guide/img/psd2app-image11.png and /dev/null differ diff --git a/docs/developer-guide/img/psd2app-image12.png b/docs/developer-guide/img/psd2app-image12.png deleted file mode 100644 index 9478e324d6d..00000000000 Binary files a/docs/developer-guide/img/psd2app-image12.png and /dev/null differ diff --git a/docs/developer-guide/img/psd2app-image13.png b/docs/developer-guide/img/psd2app-image13.png deleted file mode 100644 index 26ddb1ec0fe..00000000000 Binary files a/docs/developer-guide/img/psd2app-image13.png and /dev/null differ diff --git a/docs/developer-guide/img/psd2app-image14.png b/docs/developer-guide/img/psd2app-image14.png deleted file mode 100644 index 2dddfe6f5f5..00000000000 Binary files a/docs/developer-guide/img/psd2app-image14.png and /dev/null differ diff --git a/docs/developer-guide/img/psd2app-image15.png b/docs/developer-guide/img/psd2app-image15.png deleted file mode 100644 index 4372d455d0a..00000000000 Binary files a/docs/developer-guide/img/psd2app-image15.png and /dev/null differ diff --git a/docs/developer-guide/img/psd2app-image16.png b/docs/developer-guide/img/psd2app-image16.png deleted file mode 100644 index 9435d8eb643..00000000000 Binary files a/docs/developer-guide/img/psd2app-image16.png and /dev/null differ diff --git a/docs/developer-guide/img/psd2app-image4.png b/docs/developer-guide/img/psd2app-image4.png deleted file mode 100644 index e3c675031c5..00000000000 Binary files a/docs/developer-guide/img/psd2app-image4.png and /dev/null differ diff --git a/docs/developer-guide/img/psd2app-image5.png b/docs/developer-guide/img/psd2app-image5.png deleted file mode 100644 index 79a7100f7d7..00000000000 Binary files a/docs/developer-guide/img/psd2app-image5.png and /dev/null differ diff --git a/docs/developer-guide/img/psd2app-image6.png b/docs/developer-guide/img/psd2app-image6.png deleted file mode 100644 index ede22f31f0f..00000000000 Binary files a/docs/developer-guide/img/psd2app-image6.png and /dev/null differ diff --git a/docs/developer-guide/img/psd2app-image7.png b/docs/developer-guide/img/psd2app-image7.png deleted file mode 100644 index e54933d8cd8..00000000000 Binary files a/docs/developer-guide/img/psd2app-image7.png and /dev/null differ diff --git a/docs/developer-guide/img/psd2app-image8.png b/docs/developer-guide/img/psd2app-image8.png deleted file mode 100644 index 0114a5c85ea..00000000000 Binary files a/docs/developer-guide/img/psd2app-image8.png and /dev/null differ diff --git a/docs/developer-guide/img/psd2app-image9.png b/docs/developer-guide/img/psd2app-image9.png deleted file mode 100644 index 096c5c070a8..00000000000 Binary files a/docs/developer-guide/img/psd2app-image9.png and /dev/null differ diff --git a/scripts/developer-guide/guide-links-baseline.txt b/scripts/developer-guide/guide-links-baseline.txt index 99c0323acb4..d4956d0e773 100644 --- a/scripts/developer-guide/guide-links-baseline.txt +++ b/scripts/developer-guide/guide-links-baseline.txt @@ -5,7 +5,6 @@ # Regenerate with check-guide-links.py --write-baseline. About-This-Guide.asciidoc http://github.com/chen-fishbein/ About-This-Guide.asciidoc http://github.com/shannah/ -Advanced-Theming.asciidoc http://freebiesbug.com/psd-freebies/iphone-6-ui-kit/ Advanced-Topics-Under-The-Hood.asciidoc http://stackoverflow.com/questions/11421048/android-ios-custom-uri-protocol-handling Introduction.asciidoc http://www.xmlvm.org/ Miscellaneous-Features.asciidoc http://wiki.akosma.com/IPhone_URL_Schemes